/* IBM Plex Sans Arabic (SIL Open Font License 1.1) — self-hosted, no CDN.
   Generated from the Google Fonts css2 payload; URLs rewritten to /fonts/*.
   Same family + weights (400/500/600) and unicode-range subsetting as before. */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-arabic-arabic-400.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-arabic-cyrillic-ext-400.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-arabic-latin-ext-400.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-arabic-latin-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-arabic-arabic-500.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-arabic-cyrillic-ext-500.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-arabic-latin-ext-500.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-arabic-latin-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-arabic-arabic-600.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-arabic-cyrillic-ext-600.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-arabic-latin-ext-600.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-arabic-latin-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


  :root {
    /* Brand — chrome + identity only (sampled from logo.jpg, OKLCH) */
    --brand-blue: oklch(56.3% 0.112 247);
    --brand-teal: oklch(69.3% 0.100 192);
    --brand-sun:  oklch(86% 0.150 92);
    --brand-orange: oklch(70.6% 0.146 54);
    --brand-gradient: linear-gradient(100deg, var(--brand-blue), var(--brand-teal));

    /* Action */
    --primary: oklch(48% 0.115 248);
    --primary-hover: oklch(43% 0.118 248);
    --primary-weak: oklch(95% 0.03 245);
    --on-primary: oklch(100% 0 0);
    --ring: oklch(56% 0.13 248 / 0.45);

    /* Neutrals — blue-tinted, never gray */
    --bg: oklch(98.4% 0.006 245);
    --surface: oklch(100% 0 0);
    --surface-sunk: oklch(96.6% 0.008 245);
    --border: oklch(90.5% 0.012 245);
    --border-strong: oklch(83% 0.015 245);
    --ink: oklch(27% 0.025 252);
    --ink-strong: oklch(20% 0.03 252);
    --muted: oklch(46% 0.02 250);
    --muted-strong: oklch(35% 0.024 250); /* darker label ink for text ON glass — clears 4.5:1 after blur (verified) */
    --faint: oklch(62% 0.015 250);

    /* Semantic */
    --success: oklch(48% 0.12 152);   --success-bg: oklch(95% 0.04 152);
    --warning: oklch(52% 0.12 70);    --warning-bg: oklch(95% 0.06 80);
    --danger:  oklch(52% 0.18 27);    --danger-bg:  oklch(95% 0.04 25);
    --info: var(--primary);           --info-bg: var(--primary-weak);

    /* Spacing / radius / shadow */
    --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
    --r-sm:6px; --r-md:9px; --r-lg:14px;
    --shadow-1: 0 1px 2px oklch(40% 0.03 250 / .06);
    --shadow-2: 0 6px 20px oklch(40% 0.05 250 / .12);

    /* ---- Liquid Hologram material (SHOWCASE tier — see DESIGN.md) ----
       One bounded glass layer per showcase screen. The fill is NEAR-SOLID so text
       sitting on it still clears 4.5:1 AFTER the blur (hard rule); the translucency
       + blur only lens the brand aurora softly at the edges. Depth comes from
       layered light — a refractive rim, an inner top glow, a tinted lift shadow —
       never heavy black shadow. */
    --glass-fill:        color-mix(in oklab, var(--surface) 88%, transparent);
    --glass-fill-strong: color-mix(in oklab, var(--surface) 94%, transparent);
    --glass-border:      color-mix(in oklab, var(--brand-blue) 26%, var(--border));
    --glass-blur: 20px;  --glass-sat: 138%;
    --glass-rim:      oklch(100% 0 0 / .66);              /* cool specular top highlight */
    --glass-rim-warm: oklch(93% 0.105 92 / .62);          /* warm sun catch at the leading corner (brand-sun, sparing) */
    --glass-edge:  color-mix(in oklab, var(--brand-teal) 46%, transparent); /* refractive teal rim tint */
    --glass-glow:  oklch(100% 0 0 / .55);                 /* inner top glow */
    /* Brand light the panel appears to CATCH — a faint blue→teal glow concentrated at
       the leading-top, fading out so the fill stays very light (text-safe after blur). */
    --glass-aura:  radial-gradient(135% 105% at 12% -10%,
                     color-mix(in oklab, var(--brand-blue) 15%, transparent) 0%,
                     color-mix(in oklab, var(--brand-teal) 9%, transparent) 32%,
                     transparent 70%);
    /* Depth from layered light: tinted lift + a soft brand ambient halo, never black. */
    --glass-lift:  0 16px 38px -10px oklch(46% 0.07 245 / .22), 0 2px 8px oklch(46% 0.06 250 / .10);
    --glass-halo:  0 0 0 1px color-mix(in oklab, var(--brand-blue) 6%, transparent);
    --ease-showcase: cubic-bezier(0.16, 1, 0.3, 1);       /* ease-out-expo — confident, fluid */

    /* z-index scale */
    --z-nav:10; --z-dropdown:20; --z-sticky:30; --z-modal:50; --z-toast:60;

    --font-ui: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  }

  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; background: var(--bg); }
  body {
    margin: 0; color: var(--ink);
    font-family: var(--font-ui); font-size: 0.95rem; line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    min-height: 100svh;
    /* clear the iPhone home indicator (works with viewport-fit=cover) */
    padding-block-end: env(safe-area-inset-bottom);
    /* ---- Premium brand field ----
       A soft brand "crown" at the top — the same blue→teal identity as the login
       hero and the header's gradient hairline, so logging in and working feel like
       one continuous surface. Anchored to the viewport (fixed) and concentrated at
       the very top + the gutters; it fades to the blue-tinted neutral well before
       it reaches body copy. Every data surface (header, cards, tables, forms) is
       OPAQUE and paints over it, so contrast is untouched (verified AA). */
    background:
      radial-gradient(150% 78% at 50% -26%,
        color-mix(in oklab, var(--brand-blue) 26%, transparent) 0%,
        color-mix(in oklab, var(--brand-teal) 12%, transparent) 26%,
        transparent 58%),
      var(--bg);
    background-attachment: fixed;
    background-repeat: no-repeat;
  }

  /* ---- App-shell aurora ----
     Two slow brand blobs that read in the page GUTTERS (beside the centered
     column) and as soft corner glows on phones — the same technique as the login
     hero, raised so the brand is actually felt, yet still behind every opaque
     surface (z-index:-1). The login uses the bare layout with its own stronger
     aurora, so these never compound there. prefers-reduced-motion freezes them;
     prefers-reduced-transparency tones them right down. */
  body::before, body::after {
    content: ""; position: fixed; z-index: -1; border-radius: 50%;
    filter: blur(86px); pointer-events: none; will-change: transform;
  }
  body::before {
    inline-size: 58vmax; block-size: 58vmax; inset-block-start: -22vmax; inset-inline-end: -16vmax;
    background: var(--brand-blue); opacity: .16; animation: appDrift1 52s ease-in-out infinite alternate;
  }
  body::after {
    inline-size: 50vmax; block-size: 50vmax; inset-block-end: -20vmax; inset-inline-start: -16vmax;
    background: var(--brand-teal); opacity: .15; animation: appDrift2 60s ease-in-out infinite alternate;
  }
  @keyframes appDrift1 { from { transform: translate3d(0,0,0); } to { transform: translate3d(-5vmax,4vmax,0); } }
  @keyframes appDrift2 { from { transform: translate3d(0,0,0); } to { transform: translate3d(5vmax,-3vmax,0); } }
  @media (prefers-reduced-motion: reduce) { body::before, body::after { animation: none; } }
  @media (prefers-reduced-transparency: reduce) {
    body::before { opacity: .06; }
    body::after  { opacity: .06; }
  }

  /* ---- App header (white chrome + brand-gradient hairline) ---- */
  header.app {
    background: var(--surface);
    border-block-end: 1px solid var(--border);
    box-shadow: inset 0 -3px 0 0 transparent;
    position: relative;
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s4);
    /* top padding clears the Dynamic Island; inline clears curved/landscape edges */
    padding-block: max(var(--s3), env(safe-area-inset-top)) var(--s3);
    padding-inline: max(var(--s5), env(safe-area-inset-left)) max(var(--s5), env(safe-area-inset-right));
  }
  header.app::after {
    content: ""; position: absolute; inset-inline: 0; inset-block-end: 0;
    height: 3px; background: var(--brand-gradient);
  }
  .brand { display: inline-flex; align-items: center; gap: var(--s3); text-decoration: none; }
  .brand img { height: 38px; width: auto; display: block; }
  .brand .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  nav.app-nav { display: flex; align-items: center; gap: var(--s1); flex-wrap: wrap; }
  nav.app-nav .who { color: var(--muted); font-size: 0.8rem; margin-inline-end: var(--s2); }
  nav.app-nav a {
    display: inline-flex; align-items: center;
    color: var(--ink); text-decoration: none; font-size: 0.875rem; font-weight: 500;
    padding: var(--s2) var(--s3); border-radius: var(--r-sm);
  }
  nav.app-nav a:hover { background: var(--surface-sunk); }
  nav.app-nav a.active { color: var(--primary); background: var(--primary-weak); }
  nav.app-nav a.logout { color: var(--muted); }

  main { max-width: 1080px; margin: var(--s6) auto;
         padding-inline: max(var(--s5), env(safe-area-inset-left)) max(var(--s5), env(safe-area-inset-right)); }
  main.narrow { max-width: 720px; }

  /* ---- Page header ---- */
  .page-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: var(--s4); margin-block-end: var(--s5); flex-wrap: wrap;
  }
  .page-head h1 { margin: 0; }
  .page-head .sub { color: var(--muted); font-size: 0.85rem; margin-block-start: var(--s1); }
  .page-head .actions { display: flex; gap: var(--s2); }

  h1 { font-size: 1.6rem; font-weight: 600; line-height: 1.25; color: var(--ink-strong);
       letter-spacing: -0.01em; text-wrap: balance; }
  h2 { font-size: 1.25rem; font-weight: 600; line-height: 1.3; color: var(--ink-strong); margin: 0 0 var(--s3); }
  h3 { font-size: 1.05rem; font-weight: 600; color: var(--ink-strong); margin: 0 0 var(--s2); }

  .card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
    padding: var(--s5); margin-block-end: var(--s5); box-shadow: var(--shadow-1);
  }

  /* ============================================================================
     SHOWCASE tier — Liquid Hologram glass (login · owner dashboard · cards hub).
     ONE bounded .glass-showcase per screen ("glass floats, it doesn't tile").
     Near-solid fill keeps text ≥4.5:1 after blur; the brand aurora lenses softly
     through. Refractive rim + inner glow + specular = depth through light.
     Fallbacks below are MANDATORY (no-backdrop / reduced-transparency / reduced-
     motion) and verified — solid surfaces, no effect, full legibility.
     ============================================================================ */
  .glass-showcase {
    position: relative; isolation: isolate; border-radius: var(--r-lg); overflow: hidden;
    background: var(--surface);                                   /* solid fallback FIRST */
    /* near-solid frost + a faint brand light the glass appears to catch (text stays
       on the ≥88%-opaque base, so contrast holds after the blur). */
    background: var(--glass-aura), var(--glass-fill);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-lift), var(--glass-halo), inset 0 1px 0 var(--glass-glow);
  }
  /* Refractive rim — a lensed light edge bending brand light around the panel: a warm
     sun catch at the leading-top corner melting into a cool specular highlight, then a
     teal refraction at the trailing-bottom. Painted into a 1px ring via mask (nothing
     over content). The warm→cool→teal run is the "iridescent" read, within the palette. */
  .glass-showcase::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
    pointer-events: none; z-index: 0;
    background: linear-gradient(135deg,
      var(--glass-rim-warm) 0%, var(--glass-rim) 15%, transparent 40%,
      transparent 60%, var(--glass-edge) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
  }
  /* Specular sheen — a soft diagonal highlight that sweeps once on entrance, then
     rests. Decorative, behind content (z-index:0), suppressed under reduced motion. */
  .glass-showcase > * { position: relative; z-index: 1; }
  .glass-sheen::after {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
    background: linear-gradient(112deg, transparent 32%, oklch(100% 0 0 / .34) 48%,
                oklch(93% 0.07 92 / .14) 52%, transparent 62%);
    background-size: 250% 100%; background-position: 120% 0;
  }
  /* Entrance — the showcase panel lifts in once: a confident expo ease so the rim
     catches the light as it settles. ONE orchestrated moment per showcase screen. */
  @media (prefers-reduced-motion: no-preference) {
    .glass-showcase { animation: glassRise .62s var(--ease-showcase) both; }
    .glass-sheen::after { animation: glassSheen 1.25s var(--ease-showcase) .18s 1 both; }
  }
  @keyframes glassSheen { from { background-position: 120% 0; } to { background-position: -45% 0; } }
  @keyframes glassRise {
    from { opacity: 0; transform: translateY(15px) scale(.986); }
    to   { opacity: 1; transform: none; }
  }

  /* Fallback 1 — no backdrop-filter support → solid surface, keep rim/lift/light. */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass-showcase { background: var(--glass-aura), var(--surface); }
  }
  /* Fallback 2 — user asked for less transparency → fully solid, drop the blur (keep a
     whisper of the brand light over the solid surface; depth stays via rim + shadow). */
  @media (prefers-reduced-transparency: reduce) {
    .glass-showcase {
      background: var(--glass-aura), var(--surface);
      -webkit-backdrop-filter: none; backdrop-filter: none;
      box-shadow: var(--shadow-2), var(--glass-halo), inset 0 1px 0 var(--glass-glow);
    }
  }
  /* Fallback 3 — reduced motion → no specular sweep, no panel lift (gated above). */

  /* ---- Forms ---- */
  label { display: block; font-size: 0.8rem; font-weight: 500; margin: var(--s3) 0 var(--s1); color: var(--muted); }
  input, select, textarea {
    width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-md);
    font: inherit; font-size: 0.92rem; color: var(--ink); background: var(--surface);
    box-sizing: border-box; min-height: 44px;
  }
  textarea { min-height: 88px; resize: vertical; line-height: 1.5; }
  input::placeholder, textarea::placeholder { color: var(--muted); }
  input[type=checkbox] { width: auto; min-width: 18px; min-height: 18px; margin: 0; accent-color: var(--primary); }
  input:hover, select:hover, textarea:hover { border-color: var(--border-strong); }
  input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring);
  }
  input[aria-invalid="true"] { border-color: var(--danger); }
  fieldset { border: 0; padding: 0; margin: 0 0 var(--s2); }
  .help { display: block; color: var(--muted); font-size: 0.75rem; margin-block-start: var(--s1); }
  .row { display: flex; gap: var(--s4); flex-wrap: wrap; }
  .row > div { flex: 1 1 200px; }
  .clear-row { display: flex; align-items: center; gap: var(--s2); margin-block-start: var(--s2); min-height: 44px; }
  .clear-row label { margin: 0; font-size: 0.8rem; color: var(--danger); cursor: pointer; }

  /* ---- Buttons ---- */
  button, .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
    min-height: 44px; padding: 10px 18px; background: var(--primary); color: var(--on-primary);
    border: 1px solid transparent; border-radius: var(--r-md); font: inherit; font-size: 0.9rem;
    font-weight: 500; cursor: pointer; text-decoration: none;
  }
  button:hover, .btn:hover { background: var(--primary-hover); }
  button.secondary, .btn.secondary {
    background: var(--surface); color: var(--ink); border-color: var(--border-strong);
  }
  button.secondary:hover, .btn.secondary:hover { background: var(--surface-sunk); }
  button.ghost, .btn.ghost { background: transparent; color: var(--primary); border-color: transparent; }
  button.ghost:hover, .btn.ghost:hover { background: var(--primary-weak); }
  button.danger, .btn.danger { background: var(--danger); }
  button:disabled, .btn:disabled { opacity: 0.55; cursor: not-allowed; }
  button:focus-visible, .btn:focus-visible, a:focus-visible {
    outline: 3px solid var(--ring); outline-offset: 2px;
  }

  /* ---- Country picker (nationality + phone prefix) ---- */
  .cpick { position: relative; }
  /* No-JS / pre-enhance: the native <select> is the visible, working control. */
  .cpick-native { width: 100%; }
  .cpick--ready .cpick-native {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .cpick-btn, .cpick-pop { display: none; }
  .cpick--ready .cpick-btn { display: flex; }
  /* The combobox button reads as a form control, not a primary button. */
  .cpick--ready .cpick-btn {
    width: 100%; align-items: center; justify-content: flex-start; gap: var(--s2);
    min-height: 44px; padding: 8px 12px; text-align: start;
    background: var(--surface); color: var(--ink); border: 1px solid var(--border);
    border-radius: var(--r-md); font: inherit; font-size: 0.92rem; font-weight: 400; cursor: pointer;
  }
  .cpick-btn:hover { background: var(--surface); border-color: var(--border-strong); }
  .cpick-btn .cpick-val { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cpick-btn--empty .cpick-val { color: var(--muted); }
  .cpick-chev { flex: 0 0 auto; margin-inline-start: auto; color: var(--muted); transition: transform 160ms ease; }
  .cpick--open .cpick-chev { transform: rotate(180deg); }
  /* Flag chip — fixed box so a missing/blank flag never shifts layout or hides text. */
  .cpick-flag {
    flex: 0 0 auto; inline-size: 1.5rem; block-size: 1.12rem; line-height: 1.12rem;
    font-size: 1.05rem; text-align: center; font-style: normal;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .cpick-flag--iso {
    font-size: 0.62rem; font-weight: 600; letter-spacing: 0.02em; color: var(--muted);
    background: var(--surface-sunk); border: 1px solid var(--border); border-radius: 3px;
    inline-size: 1.55rem; block-size: 1.08rem;
  }
  .cpick-flag--none { background: var(--surface-sunk); border: 1px solid var(--border); border-radius: 3px; inline-size: 1.55rem; block-size: 1.08rem; }
  /* Popup (position:fixed via JS so it escapes card overflow / stacking contexts). */
  .cpick-pop {
    position: fixed; z-index: var(--z-dropdown, 20); display: flex; flex-direction: column;
    max-height: min(20rem, 70vh); background: var(--surface); border: 1px solid var(--border-strong);
    border-radius: var(--r-md); box-shadow: var(--shadow-2); overflow: hidden;
    animation: cpickIn 150ms ease both;
  }
  .cpick-pop[hidden] { display: none; }
  .cpick-pop--up { transform-origin: bottom; }
  @keyframes cpickIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
  .cpick-search-wrap { padding: var(--s2); border-bottom: 1px solid var(--border); background: var(--surface); }
  .cpick-search { min-height: 40px; }
  .cpick-list { list-style: none; margin: 0; padding: var(--s1); overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .cpick-opt {
    display: flex; align-items: center; gap: var(--s2); min-height: 44px;
    padding: 6px 10px; border-radius: var(--r-sm); cursor: pointer; color: var(--ink);
  }
  /* search filter hides non-matches via the [hidden] property — must beat .cpick-opt's
     display:flex (equal specificity would otherwise keep them visible). */
  .cpick-opt[hidden] { display: none; }
  .cpick-opt-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cpick-opt:hover { background: var(--surface-sunk); }
  .cpick-opt.is-active { background: var(--primary-weak); }
  .cpick-opt[aria-selected="true"] { font-weight: 600; }
  .cpick-check { flex: 0 0 auto; margin-inline-start: auto; color: var(--primary); opacity: 0; }
  .cpick-opt[aria-selected="true"] .cpick-check { opacity: 1; }
  .cpick-empty { padding: var(--s4) var(--s3); color: var(--muted); text-align: center; font-size: 0.85rem; }
  @media (prefers-reduced-motion: reduce) {
    .cpick-pop { animation: none; }
    .cpick-chev { transition: none; }
  }

  /* ---- Tables ---- */
  .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg);
                background: var(--surface); box-shadow: var(--shadow-1);
                -webkit-overflow-scrolling: touch; }
  /* min-width turns the cramped mobile wrap into a clean horizontal scroll */
  table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 0.9rem; }
  /* small reference tables (few short columns) don't need the scroll min-width */
  .table-wrap.compact { box-shadow: none; }
  .table-wrap.compact table { min-width: 0; }
  thead th {
    position: sticky; top: 0; background: var(--surface-sunk); color: var(--muted);
    font-size: 0.75rem; font-weight: 600; text-transform: none; text-align: start;
    padding: 10px 14px; border-block-end: 1px solid var(--border); white-space: nowrap; z-index: 1;
  }
  tbody td { padding: 12px 14px; border-block-end: 1px solid var(--border); color: var(--ink); vertical-align: middle; }
  tbody tr:last-child td { border-block-end: 0; }
  tbody tr:hover { background: var(--primary-weak); }
  td a, .linklike { color: var(--primary); text-decoration: none; font-weight: 500; }
  td a:hover { text-decoration: underline; }
  .num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
  th.num { text-align: end; }
  .rowname { font-weight: 600; color: var(--ink-strong); }
  .nowrap { white-space: nowrap; }
  .neg { color: var(--danger); }
  td.num.neg { color: var(--danger); }

  /* checkbox group (booking credit picker) */
  .checks { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); margin-block-start: var(--s1); }
  .checks .check { display: inline-flex; align-items: center; gap: var(--s2); margin: 0;
                   font-size: 0.9rem; font-weight: 400; color: var(--ink); min-height: 44px; cursor: pointer; }

  /* ---- Metric figures (detail header) ---- */
  /* Fixed 3-up grid so the strip stays compact at every width (no flex-wrap gaps). */
  .metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3) var(--s5); margin: 0; }
  .metric { min-width: 0; }
  .metric .k { display: block; font-size: 0.75rem; color: var(--muted); font-weight: 500; }
  .metric .v { display: block; font-size: 1.5rem; font-weight: 600; color: var(--ink-strong);
               font-variant-numeric: tabular-nums; line-height: 1.2; margin-block-start: var(--s1); }
  .metric .v.empty { color: var(--faint); }
  .metric .v.neg { color: var(--danger); }
  .metrics.metrics-4 { grid-template-columns: repeat(4, 1fr); }

  /* ---- Definition rows (contact panel) ---- */
  .dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--s2) var(--s5); margin: 0; }
  .dl dt { color: var(--muted); font-size: 0.85rem; }
  .dl dd { margin: 0; color: var(--ink); }
  .dl dd.none { color: var(--faint); }

  /* ---- Toolbar / search ---- */
  .toolbar { display: flex; gap: var(--s2); align-items: center; margin-block-end: var(--s4); flex-wrap: wrap; }
  .toolbar form { display: flex; gap: var(--s2); flex: 1 1 280px; }
  .toolbar input { flex: 1; }
  .count { color: var(--muted); font-size: 0.85rem; }

  /* pill tab row + inline custom form — shared by dashboard ranges + payout filters */
  .rtabs { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
  .rtab { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border-strong); color: var(--ink);
          text-decoration: none; font-size: 0.85rem; font-weight: 500; min-height: 44px; display: inline-flex; align-items: center; }
  .rtab:hover { background: var(--surface-sunk); }
  .rtab.active { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
  .rcustom { display: inline-flex; gap: var(--s2); align-items: center; margin-inline-start: auto; flex-wrap: wrap; }
  .rcustom input, .rcustom select { width: auto; min-height: 44px; }

  /* ---- Pills / badges ---- */
  .pill, .badge {
    display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 500;
    padding: 3px 10px; border-radius: 999px; line-height: 1.4; white-space: nowrap;
  }
  .pill.owner { background: var(--warning-bg); color: oklch(40% 0.09 70); }
  .pill.employee { background: var(--primary-weak); color: var(--primary-hover); }
  .pill.off { background: var(--danger-bg); color: var(--danger); }
  .pill::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; opacity: .8; }
  .pill.plain::before { display: none; }
  /* booking status pills */
  .pill.paid, .pill.verified, .pill.completed { background: var(--success-bg); color: var(--success); }
  .pill.due, .pill.pending, .pill.draft { background: var(--warning-bg); color: oklch(40% 0.09 70); }
  .pill.overdue, .pill.mismatch, .pill.cancelled { background: var(--danger-bg); color: var(--danger); }
  .pill.void { background: var(--surface-sunk); color: var(--muted); }
  .pill.active, .pill.unmatched, .pill.confirmed { background: var(--primary-weak); color: var(--primary-hover); }
  .pill.incomplete-pill { background: var(--warning-bg); color: oklch(40% 0.09 70); }
  .badge::before { display: none; }
  .badge.set { background: var(--success-bg); color: var(--success); }
  .badge.unset { background: var(--surface-sunk); color: var(--muted); }

  /* ---- Notices ---- */
  .err { background: var(--danger-bg); color: var(--danger); padding: 12px 14px; border-radius: var(--r-md);
         font-size: 0.9rem; margin-block-end: var(--s3); }
  .ok { background: var(--success-bg); color: var(--success); padding: 12px 14px; border-radius: var(--r-md);
        font-size: 0.9rem; margin-block-end: var(--s3); }
  .notice { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-md);
            padding: var(--s4); margin-block-end: var(--s4); }
  .notice.warn { background: var(--warning-bg); border-color: oklch(80% 0.08 80); }
  .notice h3 { color: oklch(38% 0.09 70); }
  .notice .matches { margin: var(--s3) 0; display: flex; flex-direction: column; gap: var(--s2); }
  .notice .match { display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
                   background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
                   padding: var(--s2) var(--s3); }
  .notice .acts { display: flex; gap: var(--s2); flex-wrap: wrap; margin-block-start: var(--s2); }

  /* ---- Empty state ---- */
  .empty { text-align: center; padding: var(--s7) var(--s5); color: var(--muted); }
  .empty p { margin: 0 0 var(--s4); }

  .muted { color: var(--muted); font-size: 0.85rem; }
  .back { display: inline-block; color: var(--muted); text-decoration: none; font-size: 0.85rem; margin-block-end: var(--s3); }
  .back:hover { color: var(--primary); }

  @media (max-width: 880px) {
    main { margin-block: var(--s5); }
    header.app {
      padding-block: max(var(--s3), env(safe-area-inset-top)) var(--s3);
      padding-inline: max(var(--s4), env(safe-area-inset-left)) max(var(--s4), env(safe-area-inset-right));
    }
    .dl { grid-template-columns: 1fr; gap: var(--s1) 0; }
    .dl dt { margin-block-start: var(--s2); }
    .metrics.metrics-4 { grid-template-columns: repeat(2, 1fr); }
  }
  /* Touch devices (phones, foldables): comfortable 44px hit areas */
  @media (pointer: coarse) {
    nav.app-nav a { min-height: 44px; }
    .brand { min-block-size: 44px; }   /* header logo link clears the 44px tap contract */
    .back { min-height: 44px; }
    td a, .linklike { display: inline-flex; align-items: center; min-block-size: 44px; padding-block: 6px; }
    .page-head .actions .btn, .page-head .actions button { min-height: 46px; }
    /* filter/range pills sit at 40px for desktop density; lift to the 44px contract
       on touch devices (phones + the foldable, fine pointer untouched). */
    .rtab, .ftab { min-height: 44px; }
    .rcustom input, .rcustom select, .crange input, .crange select { min-height: 44px; }
  }
  @media (prefers-reduced-motion: no-preference) {
    button, .btn, input, select, textarea, nav.app-nav a, tbody tr, .back { transition:
      background-color .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease; }
  }
  /* ---- Pagination (shared by every flagship list: bookings, customers,
     commissions, card transactions). Lives here so all four get one visual
     contract from the cached stylesheet instead of repeating it per page. ---- */
  .pager { display: flex; align-items: center; justify-content: center; gap: var(--s3);
           flex-wrap: wrap; margin-block-start: var(--s4); }
  .pgbtn { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--s4);
           border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface);
           color: var(--ink); text-decoration: none; font-size: 0.88rem; font-weight: 500; }
  .pgbtn:hover { border-color: var(--primary); color: var(--primary); }
  .pgbtn:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
  .pgbtn.disabled { opacity: 0.45; pointer-events: none; }
  .pgnow { font-size: 0.85rem; color: var(--muted); font-variant-numeric: tabular-nums; text-align: center; }
  .pgnow strong { color: var(--ink-strong); }