/* ============================================================
   FACTURATION CANADA PRO — Design Tokens
   ============================================================ */

:root {
  /* ---- Fond (mode clair) — v4 « Surligneur » : blanc net, pointe froide ---- */
  --bg:        oklch(0.977 0.004 250);   /* fond app blanc froid */
  --surface:   oklch(1 0 0);              /* cartes, panneaux */
  --surface-2: oklch(0.966 0.005 250);   /* surface alt */
  --surface-3: oklch(0.944 0.007 250);   /* hover doux */
  --border:   oklch(0.905 0.008 252);
  --border-strong: oklch(0.84 0.012 252);
  --divider:  oklch(0.928 0.007 252);

  --text:     oklch(0.24 0.035 262);      /* encre bleu nuit */
  --text-2:   oklch(0.44 0.03 260);      /* secondaire */
  --text-3:   oklch(0.52 0.025 258);     /* tertiaire/labels — 5.1:1 sur --bg (WCAG AA) */
  --text-muted: oklch(0.55 0.02 256);    /* 4.6:1 sur --bg (WCAG AA) */

  /* ---- Accent : JAUNE SURLIGNEUR (réservé à l'action et à l'argent) ---- */
  --accent:        oklch(0.87 0.155 92);
  --accent-hover:  oklch(0.82 0.15 88);
  --accent-soft:   oklch(0.965 0.05 95);
  --accent-soft-2: oklch(0.925 0.09 95);
  --accent-text:   oklch(0.45 0.09 80);
  --accent-fg:     oklch(0.24 0.035 262); /* encre sur jaune */

  /* ---- ROUGE NUMÉROTEUR (accent rare : numéros de documents) ---- */
  --numero:      oklch(0.54 0.19 27);
  --numero-soft: oklch(0.955 0.025 27);
  --numero-text: oklch(0.47 0.18 28);

  /* ---- JAUNE DUPLICATA (papier carbone : aide, languette active) ---- */
  --carbon:        oklch(0.965 0.05 95);
  --carbon-strong: oklch(0.9 0.09 95);
  --carbon-text:   oklch(0.45 0.09 80);

  /* ---- Accent secondaire : miel chaud (compat v2) ---- */
  --honey:      oklch(0.78 0.12 75);
  --honey-soft: oklch(0.95 0.06 80);
  --honey-text: oklch(0.5 0.11 65);

  /* ---- Statuts (lisibles — v3) ---- */
  --ok:        oklch(0.58 0.13 155);
  --ok-soft:   oklch(0.945 0.045 155);
  --ok-text:   oklch(0.4 0.11 158);

  --warn:      oklch(0.75 0.13 75);
  --warn-soft: oklch(0.95 0.055 80);
  --warn-text: oklch(0.48 0.1 60);

  --danger:      oklch(0.55 0.19 27);
  --danger-soft: oklch(0.95 0.03 27);
  --danger-text: oklch(0.47 0.18 28);

  --info:      oklch(0.56 0.12 240);
  --info-soft: oklch(0.95 0.03 240);
  --info-text: oklch(0.44 0.11 245);

  --neutral-soft: oklch(0.945 0.008 88);
  --neutral-text: oklch(0.44 0.02 260);

  /* ---- Signatures « Carnet » ---- */
  --perfo:        oklch(0.84 0.016 84);   /* pointillés de perforation */
  --stamp-ok:     oklch(0.45 0.12 158);   /* encre du tampon PAYÉE */
  --stamp-danger: oklch(0.5 0.19 27);     /* encre du tampon EN RETARD */

  /* ---- Rayons ---- */
  --r-1: 4px;
  --r-2: 6px;
  --r-3: 8px;
  --r-4: 12px;
  --r-5: 16px;
  --r-pill: 999px;

  /* ---- Ombres (très douces) ---- */
  --shadow-1: 0 1px 0 0 oklch(0.92 0.005 270);
  --shadow-2: 0 1px 2px 0 oklch(0.2 0.01 270 / 0.05), 0 1px 0 0 oklch(0.92 0.005 270);
  --shadow-3: 0 4px 12px -2px oklch(0.2 0.01 270 / 0.06), 0 2px 4px -1px oklch(0.2 0.01 270 / 0.04);
  --shadow-4: 0 12px 32px -8px oklch(0.2 0.01 270 / 0.12), 0 4px 8px -2px oklch(0.2 0.01 270 / 0.06);
  --shadow-pop: 0 24px 48px -12px oklch(0.2 0.01 270 / 0.18);

  /* ---- Voile des panneaux modaux ---- */
  --scrim: oklch(0.2 0.02 262 / 0.45);

  /* ---- Espaces (densité confortable) ---- */
  --row-h: 44px;        /* hauteur de ligne tableau */
  --row-py: 12px;
  --field-h: 36px;
  --header-h: 56px;

  /* ---- Typo ---- */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-display: "Bricolage Grotesque", "Geist", ui-sans-serif, system-ui, sans-serif;

  /* ---- Ombre de marque (bouton jaune : ombre d'encre) ---- */
  --shadow-brand: 0 8px 24px -8px oklch(0.24 0.035 262 / 0.35);

  /* ---- Focus (bleu nuit — visible même sur le jaune) ---- */
  --focus-ring: 0 0 0 3px oklch(0.45 0.15 262 / 0.45);
}

/* ---- Densité dense ---- */
[data-density="dense"] {
  --row-h: 36px;
  --row-py: 8px;
  --field-h: 32px;
  --header-h: 48px;
}

/* ---- Mode sombre — « surligneur la nuit » : bleu nuit profond, jaune intact ---- */
[data-theme="dark"] {
  --bg:        oklch(0.19 0.02 262);
  --surface:   oklch(0.23 0.022 262);
  --surface-2: oklch(0.26 0.023 262);
  --surface-3: oklch(0.3 0.024 262);
  --border:   oklch(0.34 0.025 262);
  --border-strong: oklch(0.43 0.026 262);
  --divider:  oklch(0.3 0.023 262);

  --text:     oklch(0.93 0.01 262);
  --text-2:   oklch(0.78 0.012 262);
  --text-3:   oklch(0.66 0.014 260);     /* 5.5:1 sur --surface sombre */
  --text-muted: oklch(0.62 0.014 258);   /* 4.7:1 sur --surface sombre */

  --accent:        oklch(0.87 0.155 92);
  --accent-hover:  oklch(0.91 0.14 95);
  --accent-soft:   oklch(0.33 0.05 95);
  --accent-soft-2: oklch(0.41 0.075 95);
  --accent-text:   oklch(0.88 0.11 95);
  --accent-fg:     oklch(0.2 0.03 262);

  /* Rouge numéroteur et jaune duplicata, version nuit */
  --numero:      oklch(0.68 0.16 27);
  --numero-soft: oklch(0.32 0.06 27);
  --numero-text: oklch(0.8 0.13 28);

  --carbon:        oklch(0.32 0.05 95);
  --carbon-strong: oklch(0.42 0.08 95);
  --carbon-text:   oklch(0.85 0.08 95);

  --honey:      oklch(0.78 0.12 75);
  --honey-soft: oklch(0.36 0.06 75);
  --honey-text: oklch(0.85 0.1 78);

  --ok:        oklch(0.7 0.13 155);
  --ok-soft:   oklch(0.3 0.05 155);
  --ok-text:   oklch(0.81 0.11 158);

  --warn:      oklch(0.79 0.12 75);
  --warn-soft: oklch(0.33 0.055 75);
  --warn-text: oklch(0.85 0.1 78);

  --danger:      oklch(0.68 0.17 27);
  --danger-soft: oklch(0.32 0.06 27);
  --danger-text: oklch(0.82 0.13 30);

  --info:      oklch(0.7 0.12 240);
  --info-soft: oklch(0.31 0.05 240);
  --info-text: oklch(0.8 0.1 243);

  --neutral-soft: oklch(0.28 0.012 262);
  --neutral-text: oklch(0.78 0.012 262);

  /* Signatures « Carnet » — version nuit */
  --perfo:        oklch(0.42 0.02 262);
  --stamp-ok:     oklch(0.75 0.13 158);
  --stamp-danger: oklch(0.72 0.17 27);

  --shadow-1: 0 1px 0 0 oklch(0.12 0.01 262);
  --shadow-2: 0 1px 2px 0 oklch(0 0 0 / 0.4);
  --shadow-3: 0 4px 12px -2px oklch(0 0 0 / 0.4);
  --shadow-4: 0 12px 32px -8px oklch(0 0 0 / 0.5);
  --shadow-pop: 0 24px 48px -12px oklch(0 0 0 / 0.6);
  --scrim: oklch(0.1 0.01 262 / 0.6);
  --shadow-brand: 0 8px 24px -8px oklch(0.87 0.155 92 / 0.3);
  --focus-ring: 0 0 0 3px oklch(0.75 0.13 262 / 0.55);
}

/* ============================================================
   Reset/base
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}

body { margin: 0; }

::selection { background: var(--accent-soft-2); color: var(--text); }

/* ============================================================
   Composants partagés
   ============================================================ */

/* Boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  height: 36px; padding: 0 14px;
  border-radius: var(--r-2);
  font-weight: 500; font-size: 13.5px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
  font-family: inherit;
}
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

.btn-primary {
  background: var(--accent); color: var(--accent-fg);
  border-color: var(--accent);
}
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.btn-secondary {
  background: var(--surface); color: var(--text);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-1);
}
.btn-secondary:hover { background: var(--surface-2); }

.btn-ghost {
  background: transparent; color: var(--text-2);
  border-color: transparent;
}
.btn-ghost:hover { background: var(--surface-3); color: var(--text); }

.btn-danger {
  background: var(--surface); color: var(--danger-text);
  border-color: var(--border-strong);
}
.btn-danger:hover { background: var(--danger-soft); border-color: var(--danger); }

.btn-sm { height: 28px; padding: 0 10px; font-size: 12.5px; }
.btn-lg { height: 42px; padding: 0 18px; font-size: 14px; }

.btn-icon {
  width: 32px; height: 32px; padding: 0;
  background: transparent; color: var(--text-2);
  border-radius: var(--r-2);
}
.btn-icon:hover { background: var(--surface-3); color: var(--text); }

/* Champs */
.field {
  width: 100%;
  height: var(--field-h);
  padding: 0 10px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-2);
  color: var(--text);
  font-size: 13.5px;
  font-family: inherit;
  transition: border-color 100ms ease, box-shadow 100ms ease;
}
.field:hover { border-color: var(--text-3); }
.field:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.field::placeholder { color: var(--text-muted); }
textarea.field { padding: 8px 10px; height: auto; min-height: 72px; line-height: 1.5; resize: vertical; }
select.field { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'><path d='M3 4.5l3 3 3-3' stroke='%23737373' stroke-width='1.4' stroke-linecap='round'/></svg>"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; }

.field-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  margin-bottom: 6px;
  letter-spacing: 0.005em;
}
.field-hint { font-size: 11.5px; color: var(--text-3); margin-top: 4px; }
.field-error { font-size: 11.5px; color: var(--danger-text); margin-top: 4px; }

/* Money input avec préfixe CAD */
.money-input {
  display: flex; align-items: stretch;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-2);
  background: var(--surface);
  height: var(--field-h);
}
.money-input:focus-within { border-color: var(--accent); box-shadow: var(--focus-ring); }
.money-input .prefix {
  display: flex; align-items: center; justify-content: center;
  padding: 0 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-3);
  background: var(--surface-2);
  border-right: 1px solid var(--border);
  border-radius: var(--r-2) 0 0 var(--r-2);
}
.money-input input {
  flex: 1; min-width: 0;
  border: 0; background: transparent; outline: none;
  padding: 0 10px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 13.5px;
  text-align: right;
  color: var(--text);
}

/* Cartes */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-2);
}
.card-pad { padding: 18px 20px; }

/* Badges */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 18px;
  white-space: nowrap;
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; }

.badge-draft   { background: var(--neutral-soft); color: var(--neutral-text); }
.badge-draft .dot   { background: oklch(0.6 0.01 270); }
.badge-sent    { background: var(--info-soft); color: var(--info-text); }
.badge-sent .dot    { background: var(--info); }
.badge-paid    { background: var(--ok-soft); color: var(--ok-text); }
.badge-paid .dot    { background: var(--ok); }
.badge-overdue { background: var(--danger-soft); color: var(--danger-text); }
.badge-overdue .dot { background: var(--danger); }
.badge-cancelled { background: var(--neutral-soft); color: var(--text-3); text-decoration: line-through; }
.badge-cancelled .dot { background: var(--text-muted); }
.badge-scheduled { background: var(--warn-soft); color: var(--warn-text); }
.badge-scheduled .dot { background: var(--warn); }

/* Tableaux */
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; }
.tbl thead th {
  background: var(--surface-2);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
  text-align: left;
  padding: 0 14px;
  height: 36px;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0;
}
.tbl tbody td {
  height: var(--row-h);
  padding: 0 14px;
  font-size: 13.5px;
  border-bottom: 1px solid var(--divider);
  color: var(--text);
  vertical-align: middle;
}
.tbl tbody tr:hover td { background: var(--surface-2); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 13px; }
.col-num { text-align: right; }

/* Avatars */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid var(--border);
}

/* Sidebar nav */
.nav-link {
  display: flex; align-items: center; gap: 10px;
  height: 32px; padding: 0 10px;
  border-radius: var(--r-2);
  font-size: 13.5px;
  color: var(--text-2);
  cursor: pointer;
  text-decoration: none;
  transition: background 80ms ease, color 80ms ease;
}
.nav-link:hover { background: var(--surface-3); color: var(--text); }
.nav-link.active { background: var(--accent-soft); color: var(--accent-text); font-weight: 500; }
.nav-link.active svg { color: var(--accent); }
.nav-link svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--text-3); }

.nav-section {
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 14px 10px 6px;
}

/* Kbd */
kbd {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  padding: 1px 5px;
  border-radius: var(--r-1);
  color: var(--text-2);
}

/* Scrollbars discrètes */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; border: 2px solid var(--bg); }
*::-webkit-scrollbar-track { background: transparent; }

/* Slide-over */
.slide-over-backdrop {
  position: fixed; inset: 0; background: oklch(0.15 0.01 270 / 0.4);
  z-index: 50; opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}
.slide-over-backdrop[data-open="true"] { opacity: 1; pointer-events: auto; }
.slide-over {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(560px, 100vw);
  background: var(--surface);
  box-shadow: var(--shadow-pop);
  z-index: 51;
  transform: translateX(100%);
  transition: transform 220ms cubic-bezier(.2,.7,.2,1);
  display: flex; flex-direction: column;
}
.slide-over[data-open="true"] { transform: translateX(0); }
.slide-over-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}
.slide-over-body { flex: 1; overflow-y: auto; padding: 20px; }
.slide-over-footer {
  border-top: 1px solid var(--border); padding: 14px 20px;
  display: flex; justify-content: flex-end; gap: 8px;
  background: var(--surface-2);
}

/* Toast */
.toast-stack { position: fixed; bottom: 20px; right: 20px; z-index: 80; display: flex; flex-direction: column; gap: 8px; }
.toast {
  display: flex; align-items: center; gap: 10px;
  background: var(--text); color: var(--surface);
  padding: 10px 14px; border-radius: var(--r-3);
  box-shadow: var(--shadow-4);
  font-size: 13px;
  min-width: 240px; max-width: 380px;
}
.toast .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }

/* Skeleton */
.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 50%, var(--surface-2) 100%);
  background-size: 200% 100%;
  animation: skeleton 1.4s ease-in-out infinite;
  border-radius: var(--r-2);
}
@keyframes skeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Helpers */
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.text-2 { color: var(--text-2); }
.text-3 { color: var(--text-3); }
.text-muted { color: var(--text-muted); }
.divider { border: 0; border-top: 1px solid var(--divider); margin: 12px 0; }

/* Empty state */
.empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 56px 24px; text-align: center; color: var(--text-2);
}
.empty .empty-icon {
  width: 44px; height: 44px; border-radius: var(--r-3);
  background: var(--surface-2); display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px; color: var(--text-3);
  border: 1px solid var(--border);
}
.empty h3 { margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--text); }
.empty p { margin: 0 0 14px; font-size: 13px; max-width: 320px; }

/* Logo carré */
.logo-square {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: var(--accent); color: var(--accent-fg);
  border-radius: var(--r-2);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.04em;
}

/* ============================================================
   Lisibilité sur téléphone (nœud C5 du plan de contrôle)
   ------------------------------------------------------------
   La cible travaille souvent dehors, sur un téléphone, et a rarement
   vingt ans. Les tailles de l'interface de bureau (14 px de base,
   11,5 px pour les explications sous les champs) y sont trop petites :
   on remonte le corps de texte et, surtout, les phrases qui EXPLIQUENT
   quoi saisir — ce sont elles qu'un débutant doit pouvoir lire.
   ============================================================ */
@media (max-width: 640px) {
  html, body { font-size: 16px; }

  /* `!important` assumé et limité à ce bloc : c'est une règle transverse de
     lisibilité, et des feuilles de page plus spécifiques (.auth-form .field-hint,
     .bloc-sous…) la neutralisaient une par une. Sur un téléphone, au soleil,
     ces phrases sont celles qui expliquent quoi saisir. */
  .field-hint,
  .field-help,
  .field-error,
  .side-note,
  .form-card__lede,
  .sec-lead,
  .summary-note,
  .imp-note,
  .cat-pill__ex,
  .text-3 { font-size: 15px !important; line-height: 1.45; }

  /* Le libellé d'un champ dit ce qu'on doit écrire : jamais en petit.
     (Taille imposée plus bas, avec `!important`.) */

  /* Phrases d'explication (vitrine, cartes, aides) : elles portent le sens. */
  .text-2,
  .section-lede,
  .page-head__lede,
  .demo__legende,
  .feature p,
  .step p { font-size: 15.5px !important; line-height: 1.55; }

  /* Surtitres et pieds de page : décoratifs, mais lisibles quand même. */
  .page-head__eyebrow,
  .auth-eyebrow,
  .hero__note,
  .app-footer__brand,
  .auth-aside__brand-name { font-size: 15px !important; }

  /* Les champs eux-mêmes : sous 16 px, iOS zoome à chaque mise au point. */
  .field,
  input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], input[type="tel"], input[type="date"],
  input[type="datetime-local"], select, textarea { font-size: 16px; }

  /* Cibles tactiles : 44 px, y compris pour les petits boutons. */
  .btn-sm { height: 40px; padding: 0 14px; font-size: 14px; }
  .btn-icon { min-width: 44px; min-height: 44px; }

  /* Phrases qui avaient echappe a la liste ci-dessus.
     -------------------------------------------------
     Relevees une a une par `python3 bin/verifie-mobile.py`, qui nomme
     desormais la classe de chaque phrase rendue sous 15 px. Ce sont toutes
     des phrases d'explication : ce qu'un client voit sur la facture, ce que
     verra le comptable invite, ce que fait chaque role d'equipe, ce que la
     suppression du compte efface. Autrement dit exactement ce qu'une personne
     qui decouvre le logiciel a besoin de lire. */
  .retour__texte,
  .imp-cols,
  .imp-hint,
  .info-none,
  .pwd-change__notice,
  .settings-head__sub,
  .compta-intro,
  .vide__aide,
  .rep-carte__meta,
  .rep-detail__intro,
  .rep-detail__mention,
  .rep-mention { font-size: 15px !important; line-height: 1.5; }

  /* Les listes qui enumerent : forfaits de la vitrine, roles d'equipe,
     ce qui sera efface. Un « li » sans classe n'en reste pas moins la
     phrase qui porte la decision. */
  .plan-card__features li,
  .role-aide li,
  .suppr__avert li { font-size: 15px !important; line-height: 1.5; }

  /* Encarts d'explication : le rappel de taxes dans les parametres, le
     « comment payer » que lit le client sur le portail, l'exemple sous chaque
     relance. Ce sont des phrases entieres, pas des etiquettes. */
  .aide-carbone p,
  .encart p,
  .reminder-row__example { font-size: 15px !important; line-height: 1.5; }

  /* Le libelle d'un champ : la regle plus haut etait sans `!important` et une
     feuille de page la reprenait a 14 px. */
  .field-label,
  label.field-label { font-size: 16px !important; }
}