/* disponibilites.css — Sport94 V2 — 2026-11-01
   Palette et dégradés inspirés du planning V1. */
.availability-page{padding:28px 0 65px}
.availability-heading{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;margin-bottom:14px}
.availability-heading h1{margin:5px 0;font-size:clamp(27px,3vw,38px)}
.availability-nav,.availability-nav form{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.availability-nav input{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:8px;padding:10px}
.availability-nav .button{margin:0}
.availability-notice{color:var(--muted);font-size:13px}
.availability-legend{display:flex;gap:9px;flex-wrap:wrap;margin:18px 0}
.availability-legend span{padding:7px 12px;border:1px solid #1115;border-radius:3px;font-size:12px;font-weight:700}
.availability-scroll{width:100%;max-width:100%;overflow:auto;border:1px solid #252525;border-radius:3px}
.availability-grid{border-collapse:separate;border-spacing:0;width:max-content;min-width:100%;font-size:12px;text-align:center}
.availability-grid th,.availability-grid td{border-right:1px solid #292929;border-bottom:1px solid #292929;padding:11px 9px;min-width:100px;white-space:nowrap}
.availability-grid thead th{position:sticky;top:0;z-index:2;background:linear-gradient(135deg,#555 0%,#1e1e1e 55%,#050505 100%);color:#fff;font-weight:800}
.availability-grid th:first-child{position:sticky;left:0;z-index:3;min-width:135px;background:linear-gradient(135deg,#444 0%,#141414 70%,#050505 100%);color:#fff;font-weight:800}
.availability-grid thead th:first-child{z-index:4}
.availability-grid td.availability-free,.availability-legend .availability-free{background:linear-gradient(125deg,#0a8d0f 0%,#12be1a 46%,#009409 100%);color:#fff}
.availability-grid td.availability-busy,.availability-legend .availability-busy{background:linear-gradient(125deg,#ffc300 0%,#ffe400 53%,#f3b900 100%);color:#131313}
.availability-grid td.availability-closed,.availability-legend .availability-closed{background:linear-gradient(135deg,#a6a6a6 0%,#d8d8d8 47%,#919191 100%);color:#fff}
@media(max-width:650px){.availability-heading{align-items:flex-start;flex-direction:column}.availability-grid th,.availability-grid td{padding:9px 7px;min-width:82px}}

/* Planning plein écran, grille ajustée au nombre de terrains, sans défilement horizontal. */
.availability-page{width:calc(100vw - 32px);max-width:none;position:relative;left:50%;transform:translateX(-50%)}
.availability-nav select{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:8px;padding:10px}
.availability-scroll{width:100%;max-width:100%;overflow:visible}
.availability-grid{width:100%;min-width:0;table-layout:fixed;font-size:clamp(9px,.84vw,12px)}
.availability-grid th,.availability-grid td{min-width:0;padding:11px 3px;white-space:normal;overflow-wrap:anywhere}
.availability-grid th:first-child{min-width:0;width:105px}
@media(max-width:700px){
 .availability-page{width:calc(100vw - 16px)}
 .availability-grid{font-size:9px}
 .availability-grid th,.availability-grid td{padding:8px 1px;word-break:normal}
 .availability-grid th:first-child{width:78px;font-size:9px}
 .availability-nav form{gap:5px}
 .availability-nav select{max-width:145px}
}

/* Filtrage par type : toolbar dédiée. */
.availability-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 15px;margin:10px 0 16px;background:var(--surface);border:1px solid var(--border);border-radius:10px}
.availability-toolbar label{font-size:13px;font-weight:700;color:var(--text)}
.availability-toolbar select{min-width:220px;max-width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:7px;background:var(--bg);color:var(--text);font:inherit}
.availability-toolbar .button{margin:0}
@media(max-width:550px){.availability-toolbar{gap:8px;padding:10px}.availability-toolbar select{min-width:0;flex:1}}

.availability-toolbar{gap:8px}
.availability-type-btn{appearance:none;cursor:pointer;border:1px solid var(--border);border-radius:8px;padding:10px 15px;font:inherit;font-size:13px;font-weight:700;background:var(--bg);color:var(--text)}
.availability-type-btn:hover{border-color:var(--accent);background:var(--soft)}
.availability-type-btn.is-active{background:var(--accent);color:#fff;border-color:var(--accent)}
.availability-type-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:550px){.availability-type-btn{flex:1 1 auto;padding:10px 8px}}

.availability-legend{margin:15px 0 4px;justify-content:flex-start}

/* Vue administrateur : détails visibles uniquement avec droits du site. */
.availability-admin-cell.availability-busy{text-align:left;vertical-align:top}
.availability-reservation{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;line-height:1.2;color:#171717}
.availability-reservation-id{font-size:11px;font-variant-numeric:tabular-nums}
.availability-reservation-name{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.availability-reservation-paid{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;background:#1176ce;color:#fff;padding:2px 4px;border-radius:2px;font-size:9px;font-weight:750}
.availability-admin-cell{height:74px}

/* Barre unique : titre, navigation date, filtres des terrains. */
.availability-heading{display:flex;align-items:center;justify-content:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.availability-heading h1{flex:0 0 auto;margin:0;font-size:clamp(22px,2.2vw,31px)}
.availability-heading .availability-nav{flex:0 0 auto;display:flex;align-items:center;gap:6px}
.availability-heading .availability-nav form{display:flex;align-items:center;gap:6px}
.availability-heading .availability-nav .button{padding:8px 11px;min-height:37px}
.availability-heading .availability-nav input[type=date]{padding:7px 9px;min-height:37px}
.availability-heading .availability-toolbar{display:flex;flex:1 1 auto;align-items:center;justify-content:flex-end;gap:6px;margin:0;padding:0;background:transparent;border:0;border-radius:0}
.availability-heading .availability-type-btn{padding:8px 11px;min-height:37px;font-size:12px}
@media(max-width:850px){.availability-heading{justify-content:center}.availability-heading h1{width:100%;text-align:center}.availability-heading .availability-toolbar{justify-content:center}}

.availability-free-link{display:flex;align-items:center;justify-content:center;min-height:30px;color:inherit;text-decoration:none;font-weight:700;border-radius:3px}
.availability-free-link:hover,.availability-free-link:focus-visible{outline:2px solid #fff;outline-offset:-2px;background:#006c0a;color:#fff}

.availability-grid td.availability-admin-cell:has(.availability-admin-link){position:relative;padding:0;height:74px}
.availability-admin-link{position:absolute;inset:0;box-sizing:border-box;display:flex;width:100%;height:100%;min-height:0;padding:8px 4px;text-decoration:none;color:#171717;cursor:pointer}
.availability-admin-link:hover{background:#f5ad00;color:#111}
.availability-admin-link:focus-visible{outline:2px solid #fff;outline-offset:-3px;background:#f5ad00;color:#111}

.availability-grid td.availability-cell-clickable{cursor:pointer}
.availability-grid td.availability-cell-clickable:hover{filter:brightness(1.06)}
.availability-grid td.availability-cell-clickable:focus-visible{outline:2px solid #fff;outline-offset:-3px}
.availability-grid td.availability-cell-clickable .availability-admin-link{cursor:pointer}

/* Cellules libres : lien cliquable sur toute la surface. */
.availability-grid td.availability-free:has(.availability-free-link){position:relative;padding:0;height:74px}
.availability-grid td.availability-free .availability-free-link{position:absolute;inset:0;box-sizing:border-box;width:100%;height:100%;min-height:0;border-radius:0;cursor:pointer}

/* En-têtes V1 : indicateurs court_high et court_special de tennis_court. */
.availability-grid thead th.availability-header-high{background-color:silver;background-image:linear-gradient(0.125turn,dimgray,white);color:#000}
.availability-grid thead th.availability-header-special{color:gold}

/* Vue publique compacte ; le lien libre recouvre toute la cellule. */
.availability-grid-public tbody tr{height:34px}
.availability-grid-public tbody th,.availability-grid-public tbody td{height:34px;padding:3px 2px;line-height:1.15}
.availability-grid-public td.availability-free:has(.availability-free-link){height:34px;padding:0}
.availability-grid-public td.availability-free .availability-free-link{min-height:0;height:100%;width:100%;padding:2px}
@media(max-width:700px){.availability-grid-public tbody tr,.availability-grid-public tbody th,.availability-grid-public tbody td,.availability-grid-public td.availability-free:has(.availability-free-link){height:32px}}

/* Navigation date : retour rapide au jour courant. */
.availability-nav .availability-today{font-size:11px;padding:6px 9px;min-height:30px;border-radius:6px;white-space:nowrap}
.availability-heading .availability-nav .availability-today{min-height:30px;padding:6px 9px;font-size:11px}

/* Même densité administrateur/public : 34px, 32px sur mobile. */
.availability-grid-admin tbody tr{height:34px}
.availability-grid-admin tbody th,.availability-grid-admin tbody td{height:34px;padding:3px 2px;line-height:1.15}
.availability-grid-admin td.availability-admin-cell:has(.availability-admin-link),.availability-grid-admin td.availability-free:has(.availability-free-link){height:34px;padding:0}
.availability-grid-admin .availability-admin-link{height:100%;min-height:0;padding:2px 4px;justify-content:center;gap:2px}
.availability-grid-admin .availability-free-link{height:100%;min-height:0;padding:2px}
@media(max-width:700px){.availability-grid-admin tbody tr,.availability-grid-admin tbody th,.availability-grid-admin tbody td,.availability-grid-admin td.availability-admin-cell:has(.availability-admin-link),.availability-grid-admin td.availability-free:has(.availability-free-link){height:32px}}

/* Réservations sur plusieurs heures : une seule cellule fusionnée. */
.availability-grid-admin td[rowspan]{vertical-align:middle;position:relative;padding:0}
.availability-grid-admin td[rowspan] .availability-admin-link{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;position:absolute;inset:0;width:100%;height:100%;box-sizing:border-box}

/* Palette V1 exacte — custom.css.php (site historique non modifié). */
.availability-grid td.availability-free,.availability-legend .availability-free{background-color:limegreen;background-image:linear-gradient(0.125turn,green,limegreen);color:white}
.availability-grid td.availability-free-high{background-color:limegreen;background-image:linear-gradient(0.125turn,green,lightgreen);color:white}
.availability-grid td.availability-public-confirmed,.availability-legend .availability-busy{background-color:orange;background-image:linear-gradient(0.125turn,orange,gold);color:black}
.availability-grid td.availability-special{background-color:aqua;background-image:linear-gradient(0.125turn,steelblue,aqua);color:black}
.availability-grid td.availability-concession{background-color:mediumorchid;background-image:linear-gradient(0.125turn,darkviolet,mediumorchid);color:white}
.availability-grid td.availability-unconfirmed{background-color:cornsilk;background-image:linear-gradient(0.125turn,tan,cornsilk);color:black}
.availability-grid td.availability-closed,.availability-legend .availability-closed{background-color:silver;background-image:linear-gradient(0.125turn,gray,silver);color:white}
.availability-grid-admin td.availability-concession .availability-admin-link{color:white}

/* Alignement V1 : réservations en haut à gauche, même avec rowspan. */
.availability-grid-admin td.availability-admin-cell,.availability-grid-admin td.availability-admin-cell[rowspan]{vertical-align:top;text-align:left}
.availability-grid-admin td.availability-admin-cell .availability-admin-link,.availability-grid-admin td.availability-admin-cell[rowspan] .availability-admin-link{align-items:flex-start;justify-content:flex-start;text-align:left;gap:3px;padding:4px 5px}
.availability-grid-admin td.availability-admin-cell .availability-reservation-name{text-align:left}
.availability-grid-admin td.availability-cell-clickable:hover{filter:brightness(1.12)}
.availability-grid-admin td.availability-cell-clickable .availability-admin-link:hover,.availability-grid-admin td.availability-cell-clickable .availability-admin-link:focus-visible{background:rgba(255,255,255,.14);color:inherit}
.availability-grid-admin td.availability-concession .availability-admin-link:hover,.availability-grid-admin td.availability-concession .availability-admin-link:focus-visible{color:white}

/* Noms complets : retour à la ligne dans les réservations. */
.availability-grid-admin .availability-reservation-name{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;word-break:normal;line-height:1.15}
.availability-grid-admin .availability-admin-link{overflow:visible}

/* Code de paiement dans l'angle supérieur droit de la cellule. */
.availability-grid-admin td.availability-admin-cell{position:relative}
.availability-grid-admin td.availability-admin-cell .availability-reservation-paid{position:absolute;top:3px;right:3px;z-index:1;margin:0;max-width:calc(100% - 6px);line-height:1.1}
.availability-grid-admin td.availability-admin-cell .availability-admin-link{padding-right:24px}

/* Couleurs des modes de paiement, d'après les icônes V1. */
.payment-code{display:inline-block;border-radius:4px;padding:3px 6px;font-size:11px;font-weight:800;line-height:1.2;white-space:nowrap;background:#e5e7eb;color:#111827}
.payment-code-n{background:crimson;color:#fff}
.payment-code-o{background:orange;color:#111827}
.payment-code-cb{background:dodgerblue;color:#fff}
.payment-code-ch,.payment-code-es{background:limegreen;color:#102515}
.payment-code-g{background:green;color:#fff}
.payment-code-pf{background:deeppink;color:#111827}

/* Badge paiement miniature, uniquement dans la grille. */
.availability-grid-admin .availability-reservation-paid.payment-code{font-size:8px;line-height:1;padding:1px 3px;border-radius:2px;min-width:0}

/* Chevauchements : réserver un volet par réservation (style calendrier Outlook). */
.availability-grid-admin td.availability-overlap{padding:0!important;position:relative;vertical-align:top;background:#fff!important;background-image:none!important}
.availability-overlap-grid{display:flex;align-items:stretch;width:100%;min-height:100%;height:100%;gap:1px;background:#333}
.availability-overlap-item{position:relative;display:block;flex:1 1 0;min-width:0;min-height:34px;box-sizing:border-box;padding:4px 3px 17px 4px;text-align:left;text-decoration:none;color:#111;overflow-wrap:anywhere;font-size:10px;line-height:1.12;border-top:3px solid #c62828}
.availability-overlap-item.availability-public-confirmed{background:linear-gradient(0.125turn,orange,gold)}
.availability-overlap-item.availability-unconfirmed{background:linear-gradient(0.125turn,tan,cornsilk)}
.availability-overlap-item.availability-special{background:linear-gradient(0.125turn,steelblue,aqua)}
.availability-overlap-item.availability-concession{background:linear-gradient(0.125turn,darkviolet,mediumorchid);color:#fff}
.availability-overlap-item.availability-closed{background:linear-gradient(0.125turn,gray,silver);color:#fff}
.availability-overlap-item:hover,.availability-overlap-item:focus-visible{filter:brightness(1.12);outline:2px solid #c62828;outline-offset:-2px;color:inherit}
.availability-overlap-item strong{display:block;white-space:normal;overflow-wrap:anywhere}
.availability-overlap-item .payment-code{position:absolute;top:3px;right:3px;font-size:8px;padding:1px 2px;border-radius:2px}
.availability-overlap-item strong{padding-right:17px}

/* Paiement en bas à droite, sans réserver de place au texte. */
.availability-grid-admin td.availability-admin-cell .availability-reservation-paid{top:auto;bottom:3px;right:3px}
.availability-grid-admin td.availability-admin-cell .availability-admin-link{padding-right:5px}
.availability-overlap-item .payment-code{top:auto;bottom:3px;right:3px}
.availability-overlap-item strong{padding-right:0}

/* Respiration sous le texte des réservations. */
.availability-grid-admin td.availability-admin-cell .availability-admin-link{padding-bottom:6px}
.availability-overlap-item{padding-bottom:6px}

/* Légende centrée sous le tableau des disponibilités. */
.availability-page .availability-legend{justify-content:center}

/* Conflit prioritaire : dégradé rouge sur chaque réservation en chevauchement. */
.availability-grid-admin td.availability-overlap{background:linear-gradient(0.125turn,#991b1b,#ef4444)!important}
.availability-grid-admin td.availability-overlap .availability-overlap-grid{background:#7f1d1d}
.availability-grid-admin td.availability-overlap .availability-overlap-item{background:#dc2626;background-image:linear-gradient(0.125turn,#991b1b,#f87171);color:#fff;border-top:0}
.availability-grid-admin td.availability-overlap .availability-overlap-item:hover,.availability-grid-admin td.availability-overlap .availability-overlap-item:focus-visible{color:#fff;filter:brightness(1.14)}

/* Le tableau est centré : supprimer le cadre de son conteneur. */
.availability-scroll{border:none;border-radius:0}

/* Responsive lisible : largeur constante par terrain, scroll uniquement dans la grille. */
.availability-page .availability-scroll{max-width:100%;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch}
.availability-page .availability-grid{width:calc(105px + var(--court-count)*70px);min-width:calc(105px + var(--court-count)*70px);max-width:none;margin-inline:auto;table-layout:fixed}
.availability-page .availability-grid th:first-child{width:105px;min-width:105px;max-width:105px}
.availability-page .availability-grid thead th:not(:first-child),.availability-page .availability-grid tbody td{width:70px;min-width:70px;max-width:70px}
.availability-page .availability-grid tbody th:first-child{position:sticky;left:0;z-index:2}
@media(max-width:700px){
  .availability-page .availability-grid{width:calc(78px + var(--court-count)*80px);min-width:calc(78px + var(--court-count)*80px)}
  .availability-page .availability-grid th:first-child{width:78px;min-width:78px;max-width:78px}
  .availability-page .availability-grid thead th:not(:first-child),.availability-page .availability-grid tbody td{width:80px;min-width:80px;max-width:80px}
}

/* Toolbar : chaque bouton garde sa largeur, même après retour à la ligne. */
.availability-heading .availability-toolbar{flex:0 1 auto;justify-content:flex-start}
.availability-heading .availability-type-btn{flex:0 0 auto}

/* KB #32 : "Fermé" centré comme "Libre" dans les deux vues. */
.availability-page .availability-grid tbody td.availability-closed:not(.availability-overlap){text-align:center;vertical-align:middle}

/* KB #26 : indication discrète des horaires nécessitant l'éclairage. */
.availability-grid .availability-lighting{display:inline-block;color:#ffd43b;font-size:12px;vertical-align:middle;white-space:nowrap;filter:drop-shadow(0 0 2px #000)}

/* Navigation dates et types : même apparence et surbrillance contextuelle. */
.availability-heading .availability-type-btn,
.availability-heading .availability-nav .availability-today{
  appearance:none;display:inline-flex;align-items:center;justify-content:center;
  min-height:37px;box-sizing:border-box;padding:8px 11px;
  border:1px solid var(--border);border-radius:8px;
  background:var(--surface);color:var(--text);
  font:inherit;font-size:12px;font-weight:700;line-height:1.2;
  text-decoration:none;white-space:nowrap;cursor:pointer;
}
.availability-heading .availability-type-btn:hover,
.availability-heading .availability-nav .availability-today:hover{background:var(--soft);border-color:var(--accent)}
.availability-heading .availability-type-btn.is-active,
.availability-heading .availability-nav .availability-today.is-date-selected{
  background:var(--accent);color:#fff;border-color:var(--accent);
}
.availability-heading .availability-type-btn:focus-visible,
.availability-heading .availability-nav .availability-today:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;
}

/* Meilleur contraste des boutons sélectionnés sur le vert clair. */
.availability-heading .availability-type-btn.is-active,
.availability-heading .availability-nav .availability-today.is-date-selected{color:#102515;font-weight:800}

/* Contraste garanti : sélection vert foncé = texte blanc, indépendamment du thème. */
.availability-heading .availability-type-btn.is-active,
.availability-heading .availability-nav .availability-today.is-date-selected{background:#147d2a!important;border-color:#147d2a!important;color:#fff!important;font-weight:800}
@media(max-width:700px){.availability-heading .availability-toolbar{justify-content:center;width:100%}.availability-heading .availability-type-btn{flex:0 0 auto}}

/* Date : une seule ligne sur mobile, flèches accessibles et calendrier central. */
@media(max-width:700px){
 .availability-heading .availability-nav{display:grid;grid-template-columns:38px minmax(0,1fr) auto 38px;align-items:center;gap:5px;width:100%;min-width:0;flex-wrap:nowrap}
 .availability-heading .availability-nav form{display:block;min-width:0;width:100%}
 .availability-heading .availability-nav input[type="date"]{display:block;box-sizing:border-box;width:100%;min-width:0;padding:8px 5px;font-size:14px;min-height:40px}
 .availability-heading .availability-nav>a{min-width:0;min-height:40px;margin:0;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;padding:6px}
 .availability-heading .availability-nav>a:first-child,.availability-heading .availability-nav>a:last-child{width:38px;padding:0;font-size:23px;line-height:1}
 .availability-heading .availability-nav-word{display:none}
 .availability-heading .availability-nav .availability-today{font-size:11px;padding:6px 8px;min-height:40px}
}

/* Réservation POST : bouton identique au lien de créneau libre. */
.availability-book-form{margin:0;padding:0}
.availability-book-form .availability-free-link{font:inherit;font-weight:700;background:transparent;border:0;color:inherit;appearance:none}
.availability-book-form .availability-free-link:hover,.availability-book-form .availability-free-link:focus-visible{background:#006c0a;color:#fff}

/* Public : creneau libre hors regles MAXD/MINH/quota = desactive. */
.availability-grid-public td.availability-free.availability-not-bookable{background:#086610!important;color:#fff!important;cursor:default}
.availability-grid-public td.availability-not-bookable .availability-unavailable-label{display:flex;align-items:center;justify-content:center;min-height:32px;height:100%;font-weight:700;opacity:.9}
.availability-legend .availability-not-bookable{background:#118c18;color:#fff;border-radius:4px;padding:5px 9px;opacity:.78}

/* Hauteur identique des cellules publiques reservables ou non. */
.availability-grid-public tbody tr{height:34px}
.availability-grid-public tbody th,.availability-grid-public tbody td,.availability-grid-public tbody td.availability-free:has(.availability-free-link){box-sizing:border-box;height:34px;min-height:34px;max-height:34px;padding:0;vertical-align:middle;line-height:1.15}
.availability-grid-public .availability-unavailable-label{min-height:0!important;height:100%;box-sizing:border-box;padding:2px}
@media(max-width:700px){.availability-grid-public tbody tr,.availability-grid-public tbody th,.availability-grid-public tbody td,.availability-grid-public tbody td.availability-free:has(.availability-free-link){height:32px;min-height:32px;max-height:32px}}

/* Reservations temporaires : couleur distincte des reservations confirmees. */
.availability-grid td.availability-busy.availability-temporary,.availability-grid td.availability-temporary{background:#f3c5a3!important;background-image:linear-gradient(125deg,#eeb68d,#f7d5b5)!important;color:#402310!important}
.availability-legend .availability-temporary{display:inline-flex;padding:5px 9px;border-radius:4px;background:#eeb68d;color:#402310;font-weight:700}

/* Les reservations appartenant au joueur connecte sont bleues. */
.availability-grid td.availability-busy.availability-own,
.availability-legend .availability-own{
  background:#2563eb!important;
  background-image:linear-gradient(125deg,#1d4ed8,#3b82f6)!important;
  color:#fff!important;
}
.availability-grid td.availability-own .availability-admin-link,
.availability-grid td.availability-own .availability-reservation{color:#fff!important}
.availability-own-link{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:30px;color:#fff!important;text-decoration:none;font-weight:750}
.availability-own-link:hover,.availability-own-link:focus-visible{background:#1e40af;color:#fff!important;outline:2px solid #fff;outline-offset:-2px}
.availability-legend .availability-own{display:inline-flex;padding:5px 9px;border-radius:4px;font-weight:700}