/* =============================================================================
   Sealique design system · v4
   One token-driven stylesheet. Layers (lowest → highest priority):
     reset → tokens → base → layout → components → patterns → utilities → theme
   Page-level <style> blocks and inline styles are unlayered and therefore win.
   ============================================================================= */
@layer vendor, reset, tokens, base, layout, components, patterns, utilities, theme;

/* -----------------------------------------------------------------------------
   0. Reset
   ----------------------------------------------------------------------------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
  body { margin: 0; min-height: 100dvh; }
  h1, h2, h3, h4, h5, p, figure, blockquote, dl, dd { margin: 0; }
  img, svg, canvas, video { max-width: 100%; display: block; }
  img { height: auto; }
  button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
  button { cursor: pointer; background: none; border: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
  a { color: inherit; -webkit-tap-highlight-color: transparent; }
  fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
  table { border-collapse: collapse; border-spacing: 0; }
  hr { border: 0; }
  [hidden] { display: none !important; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  }
}

/* -----------------------------------------------------------------------------
   1. Tokens
   ----------------------------------------------------------------------------- */
@layer tokens {
  :root {
    /* Brand — blue #02478d, shared with the landing page */
    --brand-50:  #eaf2fb;
    --brand-100: #d2e3f6;
    --brand-200: #a8c8ee;
    --brand-300: #78a8e2;
    --brand-400: #4886d2;
    --brand-500: #2366b4;
    --brand-600: #02478d;
    --brand-700: #023b77;
    --brand-800: #032f5e;
    --brand-900: #052546;
    --brand-950: #04182f;

    /* Accents */
    --coin: #f5b942;          /* XP / streaks */
    --coin-deep: #d99a1c;
    --coin-ink: #3a2b00;
    --stamp: #e2493a;         /* "checked in" stamp */

    /* Neutrals — cool slate, slightly warm */
    --n-0:   #ffffff;
    --n-50:  #f6f7fb;
    --n-100: #eef0f6;
    --n-200: #e3e6ef;
    --n-300: #cdd2df;
    --n-400: #9ea7ba;
    --n-500: #717b92;
    --n-600: #525c73;
    --n-700: #3b4358;
    --n-800: #262c3d;
    --n-900: #171b28;
    --n-950: #0d1019;

    /* Semantic status */
    --success: #15803d;  --success-soft: #e2f5e9;  --success-ink: #0f6a3a;
    --warning: #b45309;  --warning-soft: #fff0da;  --warning-ink: #8a4a06;
    --danger:  #dc2626;  --danger-soft:  #fde7e7;  --danger-ink:  #a12121;
    --info:    var(--brand-600); --info-soft: var(--brand-50); --info-ink: var(--brand-800);

    /* Surfaces & text (light) */
    --bg: #f3f5fa;
    --surface: var(--n-0);
    --surface-2: var(--n-50);
    --surface-3: var(--n-100);
    --border: var(--n-200);
    --border-strong: var(--n-300);
    --ink: var(--n-900);
    --ink-2: var(--n-600);
    --ink-3: var(--n-500);
    --ink-4: var(--n-400);
    --heading: var(--n-900);
    --brand: var(--brand-600);
    --brand-deep: var(--brand-700);
    --brand-ink: var(--brand-800);
    --brand-tint: var(--brand-50);
    --brand-tint-2: var(--brand-100);
    --brand-ring: color-mix(in srgb, var(--brand) 18%, transparent);
    --on-brand: #ffffff;
    --overlay: rgba(13, 16, 25, .55);

    /* Legacy aliases (older partials reference these) */
    --white: var(--surface);
    --gray-50: var(--n-50);  --gray-100: var(--n-100); --gray-200: var(--n-200); --gray-300: var(--n-300);
    --gray-400: var(--n-400); --gray-500: var(--n-500); --gray-600: var(--n-600); --gray-700: var(--n-700); --gray-900: var(--n-900);
    --navy-900: var(--brand-950); --navy-800: var(--brand-800); --navy-700: var(--brand-700);
    --blue-700: var(--brand-700); --blue-600: var(--brand-600); --blue-500: var(--brand-500);
    --blue-100: var(--brand-100); --blue-50: var(--brand-50); --azure-400: var(--brand-300);
    --success-bg: var(--success-soft); --warning-bg: var(--warning-soft); --danger-bg: var(--danger-soft); --info-bg: var(--info-soft);

    /* Typography */
    --font: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-display: "Bricolage Grotesque", "Figtree", ui-sans-serif, system-ui, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --fs--2: clamp(.68rem, .66rem + .1vw, .72rem);
    --fs--1: clamp(.78rem, .76rem + .12vw, .83rem);
    --fs-0:  clamp(.92rem, .9rem + .15vw, .97rem);
    --fs-1:  clamp(1.02rem, .98rem + .3vw, 1.12rem);
    --fs-2:  clamp(1.18rem, 1.1rem + .5vw, 1.4rem);
    --fs-3:  clamp(1.45rem, 1.25rem + .9vw, 1.9rem);
    --fs-4:  clamp(1.9rem, 1.5rem + 1.8vw, 2.7rem);
    --lh: 1.55;

    /* Shape & elevation */
    --r-xs: 6px; --r-sm: 9px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-2xl: 26px; --r-pill: 999px;
    --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .05);
    --shadow-md: 0 4px 10px -2px rgba(16, 24, 40, .08), 0 2px 4px -2px rgba(16, 24, 40, .05);
    --shadow-lg: 0 18px 40px -16px rgba(16, 24, 40, .22), 0 6px 14px -8px rgba(16, 24, 40, .1);
    --shadow-brand: 0 8px 20px -8px color-mix(in srgb, var(--brand) 60%, transparent);
    --ring: 0 0 0 4px var(--brand-ring);

    /* Layout */
    --gutter: clamp(16px, 2.6vw, 28px);
    --container: min(100%, 4200px);
    --sidenav-w: 248px;
    --sidenav-rail: 68px;
    --topbar-h: 60px;
    --ease: cubic-bezier(.2, .8, .2, 1);
    --ease-pop: cubic-bezier(.2, .9, .3, 1.25);
    --t-fast: .14s; --t: .2s; --t-slow: .32s;

    color-scheme: light;
    accent-color: var(--brand);
  }

  /* Dark theme — same hues, deeper surfaces */
  :root[data-theme="dark"],
  :root:not([data-theme="light"]).theme-auto-dark {
    --bg: #0a111c;
    --surface: #111a2a;
    --surface-2: #172234;
    --surface-3: #1d2a40;
    --border: #243350;
    --border-strong: #314466;
    --ink: #e9edf8;
    --ink-2: #aab4cc;
    --ink-3: #8390ac;
    --ink-4: #5d6983;
    --heading: #f3f5fb;
    --brand: #78a8e2;
    --brand-deep: #4886d2;
    --brand-ink: #a8c8ee;
    --brand-tint: color-mix(in srgb, #78a8e2 14%, #131828);
    --brand-tint-2: color-mix(in srgb, #78a8e2 26%, #131828);
    --brand-ring: color-mix(in srgb, #78a8e2 28%, transparent);
    --on-brand: #0b0f19;
    --overlay: rgba(2, 4, 10, .7);
    --success: #4ade80;  --success-soft: #11301f;  --success-ink: #86efac;
    --warning: #fbbf24;  --warning-soft: #332608;  --warning-ink: #fcd34d;
    --danger:  #f87171;  --danger-soft:  #3a1414;  --danger-ink:  #fca5a5;
    --info: #78a8e2; --info-soft: var(--brand-tint); --info-ink: #a8c8ee;
    --coin: #ffd166;
    --n-50: var(--surface-2); --n-100: var(--surface-3); --n-200: var(--border); --n-300: var(--border-strong);
    --n-400: var(--ink-4); --n-500: var(--ink-3); --n-600: var(--ink-2); --n-700: #c3cbe0; --n-900: var(--ink);
    --navy-900: #090c16; --navy-800: #02478d; --navy-700: #2366b4;
    --blue-50: var(--brand-tint); --blue-100: var(--brand-tint-2);
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, .5);
    --shadow-lg: 0 20px 48px -18px rgba(0, 0, 0, .8);
    color-scheme: dark;
  }
}

/* -----------------------------------------------------------------------------
   2. Base
   ----------------------------------------------------------------------------- */
@layer base {
  body {
    font-family: var(--font);
    font-size: var(--fs-0);
    line-height: var(--lh);
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
  }
  h1, h2, h3, h4 { color: var(--heading); line-height: 1.2; font-weight: 700; letter-spacing: -.012em; text-wrap: balance; }
  h1, h2 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.025em; font-variation-settings: "opsz" 48; }
  h1 { font-size: var(--fs-3); margin-bottom: .35rem; }
  h2 { font-size: var(--fs-2); margin-bottom: .35rem; }
  h3 { font-size: var(--fs-1); margin-bottom: .35rem; }
  h4 { font-size: var(--fs-0); margin-bottom: .25rem; }
  p { margin: 0 0 .9rem; }
  p:last-child { margin-bottom: 0; }
  a { color: var(--brand); text-decoration: none; }
  a:hover { text-decoration: underline; text-underline-offset: 2px; }
  strong, b { font-weight: 650; }
  small { font-size: var(--fs--1); }
  code, kbd, pre, .mono { font-family: var(--font-mono); font-size: .92em; }
  pre { margin: 0; white-space: pre-wrap; word-break: break-word; }
  ::selection { background: color-mix(in srgb, var(--brand) 22%, transparent); }
  :focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 55%, transparent); outline-offset: 2px; border-radius: var(--r-xs); }
  :where(input, select, textarea, button):focus-visible { outline-offset: 1px; }

  /* Native form controls */
  input[type="text"], input[type="email"], input[type="password"], input[type="number"],
  input[type="date"], input[type="time"], input[type="url"], input[type="tel"], input[type="search"],
  select, textarea {
    width: 100%; min-height: 44px; padding: 10px 13px;
    border: 1px solid var(--border-strong); border-radius: var(--r-md);
    background: var(--surface); color: var(--ink); font-size: var(--fs-0);
    transition: border-color var(--t), box-shadow var(--t), background var(--t);
  }
  textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
  select {
    appearance: none; -webkit-appearance: none; padding-right: 38px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23717b92' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
    background-repeat: no-repeat; background-position: right 12px center;
  }
  select[multiple] { background-image: none; padding-right: 13px; }
  input::placeholder, textarea::placeholder { color: var(--ink-4); }
  input:hover:not(:focus):not([readonly]), select:hover:not(:focus), textarea:hover:not(:focus) { border-color: color-mix(in srgb, var(--border-strong) 60%, var(--ink-4)); }
  input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
  input[readonly] { background: var(--surface-2); color: var(--ink-2); }
  input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; min-height: 0; margin: 0; flex: none; accent-color: var(--brand); cursor: pointer; }
  input[type="file"] { min-height: 0; }
  input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
  label { cursor: default; }
  @media (max-width: 640px) { input, select, textarea { font-size: 16px; } } /* no iOS zoom */
}

/* -----------------------------------------------------------------------------
   3. Layout
   ----------------------------------------------------------------------------- */
@layer layout {
  .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
  .container-narrow { width: 100%; max-width: 760px; margin-inline: auto; padding-inline: var(--gutter); }
  .page { padding-block: clamp(18px, 2.4vw, 28px) 72px; }
  .page-header { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; justify-content: space-between; margin-bottom: 18px; }
  .page-header h1 { margin-bottom: 0; }
  .stack { display: flex; flex-direction: column; gap: 14px; }
  .row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
  .spread { justify-content: space-between; }
  .right { display: flex; gap: 10px; align-items: center; }
  .nav-spacer { flex: 1; }
  .grid { display: grid; gap: 14px; }
  .grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
  .grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @media (min-width: 900px) { .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .divider { border-top: 1px solid var(--border); margin: 16px 0; }

  /* App shell: sticky top bar + fixed left rail on desktop */
  main { min-width: 0; }
  @media (min-width: 1000px) {
    body:has(.sidenav) main { margin-left: var(--sidenav-w); }
    body:has(.sidenav) .navbar .container { max-width: none; }
    body:has(.sidenav) main .container { max-width: var(--container); }
    body:has(.sidenav) .wizard-top { margin-left: var(--sidenav-w); }
    body:has(.wizard-top) .sidenav { top: 0; }
  }
}

/* -----------------------------------------------------------------------------
   4. Components
   ----------------------------------------------------------------------------- */
@layer components {

  /* ---- Icons (inline SVG sprite) ---- */
  .ico { width: 1.1em; height: 1.1em; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.18em; }

  /* ---- Buttons ---- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 42px; padding: 9px 16px; border-radius: var(--r-md);
    border: 1px solid transparent; font-weight: 600; font-size: var(--fs-0); line-height: 1.2;
    text-decoration: none; white-space: nowrap; user-select: none;
    transition: background var(--t), color var(--t), border-color var(--t), box-shadow var(--t), transform var(--t-fast);
  }
  .btn:hover { text-decoration: none; }
  .btn:active { transform: translateY(1px) scale(.99); }
  .btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }
  .btn-primary, .btn-brand {
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 88%, #fff) 0%, var(--brand) 100%);
    color: #fff; border-color: color-mix(in srgb, var(--brand) 80%, #000); box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255,255,255,.18);
  }
  .btn-primary:hover, .btn-brand:hover { background: var(--brand-deep); color: #fff; border-color: var(--brand-deep); box-shadow: var(--shadow-brand); }
  .btn-secondary, .btn-paper { background: var(--surface); color: var(--ink); border-color: var(--border-strong); box-shadow: var(--shadow-xs); }
  .btn-secondary:hover, .btn-paper:hover { background: var(--surface-2); border-color: color-mix(in srgb, var(--border-strong) 50%, var(--ink-4)); color: var(--heading); }
  .btn-ghost { background: transparent; color: var(--brand); }
  .btn-ghost:hover { background: var(--brand-tint); }
  .btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); }
  .btn-danger:hover { filter: brightness(.95); }
  .btn-danger-ghost { background: transparent; color: var(--danger); border-color: color-mix(in srgb, var(--danger) 28%, transparent); }
  .btn-danger-ghost:hover { background: var(--danger-soft); border-color: var(--danger); }
  .btn-success { background: var(--success); color: #fff; border-color: var(--success); }
  .btn-success:hover { filter: brightness(.95); }
  .btn-sm { min-height: 34px; padding: 5px 11px; font-size: var(--fs--1); border-radius: var(--r-sm); gap: 6px; }
  .btn-lg { min-height: 50px; padding: 12px 24px; font-size: var(--fs-1); border-radius: var(--r-lg); }
  .btn-block { width: 100%; }
  .icon-btn { width: 40px; height: 40px; border-radius: var(--r-sm); display: inline-grid; place-items: center; color: var(--ink-2); border: 1px solid transparent; transition: background var(--t), color var(--t), border-color var(--t); }
  .icon-btn:hover { background: var(--surface-2); color: var(--heading); border-color: var(--border); }

  /* ---- Cards ---- */
  .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); min-width: 0; }
  .card-pad { padding: 18px; }
  .card-lg { border-radius: var(--r-xl); box-shadow: var(--shadow-md); }
  .card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--border); }
  .card-header h3 { margin: 0; font-size: var(--fs-0); font-weight: 700; }
  .card-body { padding: 18px; }
  .card-footer { padding: 12px 18px; border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 var(--r-lg) var(--r-lg); }
  .card-hover { transition: transform var(--t) var(--ease), box-shadow var(--t), border-color var(--t); }
  .card-hover:hover, a.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-strong); text-decoration: none; }
  a.card { color: inherit; }
  .card.table-wrap { overflow: hidden; }

  /* ---- Stat tiles ---- */
  .stat { display: flex; gap: 12px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px 16px; box-shadow: var(--shadow-sm); min-width: 0; transition: box-shadow var(--t), transform var(--t); }
  .stat:hover { box-shadow: var(--shadow-md); }
  .stat-icon { width: 40px; height: 40px; border-radius: var(--r-md); background: var(--brand-tint); color: var(--brand); display: inline-grid; place-items: center; font-size: 1rem; flex: none; }
  .stat-icon .ico { width: 20px; height: 20px; }
  .stat-body { min-width: 0; }
  .stat-value { font-family: var(--font-display); font-size: var(--fs-2); font-weight: 700; color: var(--heading); line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
  .stat-label { color: var(--ink-3); font-size: var(--fs--1); font-weight: 500; margin-top: 3px; }

  /* ---- Forms ---- */
  .field { margin-bottom: 14px; min-width: 0; }
  .field > label, .field label, .label-caps { display: block; font-size: .82rem; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; letter-spacing: 0; text-transform: none; }
  .label-caps { font-size: var(--fs--2); font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .08em; }
  .field .help, .help { font-size: var(--fs--1); color: var(--ink-3); margin-top: 5px; }
  .field .errors, .errors { color: var(--danger); font-size: var(--fs--1); font-weight: 500; margin-top: 5px; }
  .req { color: var(--danger); font-weight: 700; }
  .checkbox-row { display: flex; gap: 10px; align-items: flex-start; }
  .checkbox-row input { margin-top: 2px; }
  .checkbox-row label { margin: 0; font-weight: 500; color: var(--ink); cursor: pointer; }
  .form-errors { background: var(--danger-soft); color: var(--danger-ink); border: 1px solid color-mix(in srgb, var(--danger) 25%, transparent); border-radius: var(--r-md); padding: 11px 14px; margin-bottom: 14px; font-size: var(--fs--1); font-weight: 500; }
  .field-row { display: grid; gap: 12px; }
  @media (min-width: 640px) {
    .field-row-2 { grid-template-columns: 1fr 1fr; }
    .field-row-3 { grid-template-columns: repeat(3, 1fr); }
  }
  .input-lg { font-size: var(--fs-1) !important; font-weight: 600; padding: 11px 14px !important; min-height: 50px; }
  .copy-input { display: flex; gap: 8px; }
  .copy-input input { font-size: var(--fs--1); color: var(--ink-2); min-width: 0; }
  .pw-wrap { position: relative; }
  .pw-wrap input { padding-right: 74px !important; }
  .pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: var(--fs--2); font-weight: 700; color: var(--brand); padding: 6px 10px; border-radius: var(--r-sm); }
  .pw-toggle:hover { background: var(--brand-tint); }

  /* Toggle switch */
  .tgl { position: relative; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
  .tgl input { position: absolute; opacity: 0; pointer-events: none; }
  .tgl .track { width: 40px; height: 23px; border-radius: var(--r-pill); background: var(--n-300); flex: none; position: relative; transition: background var(--t); }
  .tgl .track::after { content: ""; position: absolute; top: 2.5px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform var(--t) var(--ease-pop); }
  .tgl input:checked + .track { background: var(--success); }
  .tgl input:checked + .track::after { transform: translateX(16px); }
  .tgl input:focus-visible + .track { box-shadow: var(--ring); }
  .tgl .tgl-label { font-size: var(--fs--2); font-weight: 700; color: var(--ink-3); min-width: 52px; }
  .tgl input:checked ~ .tgl-label { color: var(--success); }
  .req-pill { border: 1px solid var(--border-strong); border-radius: var(--r-pill); padding: 5px 12px; font-size: var(--fs--2); font-weight: 700; color: var(--ink-3); background: var(--surface); transition: all var(--t); }
  .req-pill.on { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
  .req-pill:disabled { opacity: .4; cursor: not-allowed; }

  /* Choice pills & cards (radio groups) */
  .choice-pills { display: flex; flex-wrap: wrap; gap: 8px; }
  .choice-pill { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 7px 14px; border: 1px solid var(--border-strong); border-radius: var(--r-pill); background: var(--surface); color: var(--ink-2); font-weight: 600; font-size: var(--fs--1); cursor: pointer; user-select: none; transition: all var(--t-fast); }
  .choice-pill input { position: absolute; opacity: 0; pointer-events: none; }
  .choice-pill:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-tint); }
  .choice-pill:has(input:checked) { background: var(--brand); border-color: var(--brand); color: var(--on-brand); box-shadow: var(--shadow-brand); }
  .choice-pill:has(input:focus-visible) { box-shadow: var(--ring); }
  .choice-cards { display: grid; gap: 10px; }
  @media (min-width: 640px) { .choice-cards { grid-template-columns: 1fr 1fr; } }
  .choice-card { position: relative; display: block; padding: 12px 40px 12px 14px; border: 1px solid var(--border-strong); border-radius: var(--r-lg); background: var(--surface); cursor: pointer; transition: all var(--t-fast); }
  .choice-card input { position: absolute; opacity: 0; pointer-events: none; }
  .choice-card:hover { border-color: var(--brand); }
  .choice-card:has(input:checked) { background: var(--brand); border-color: var(--brand); box-shadow: var(--shadow-brand); }
  .choice-card:has(input:focus-visible) { box-shadow: var(--ring); }
  .choice-card .cc-icon { display: none; }
  .choice-card .cc-title { display: block; font-weight: 700; font-size: var(--fs-0); color: var(--heading); }
  .choice-card .cc-desc { display: block; font-size: var(--fs--1); color: var(--ink-3); margin-top: 2px; line-height: 1.45; }
  .choice-card:has(input:checked) .cc-title { color: var(--on-brand); }
  .choice-card:has(input:checked) .cc-desc { color: color-mix(in srgb, var(--on-brand) 80%, transparent); }
  .choice-card .cc-check { position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--border-strong); display: inline-grid; place-items: center; font-size: .6rem; color: transparent; transition: all var(--t-fast); }
  .choice-card:has(input:checked) .cc-check { background: var(--on-brand); border-color: var(--on-brand); color: var(--brand); }

  /* Dropzone */
  .dz, .dropzone { display: block; border: 1.5px dashed var(--border-strong); border-radius: var(--r-lg); padding: 22px 16px; text-align: center; background: var(--surface-2); color: var(--ink-2); font-size: var(--fs--1); cursor: pointer; transition: border-color var(--t), background var(--t); }
  .dz:hover, .dz.drag, .dropzone:hover, .dropzone.drag { border-color: var(--brand); background: var(--brand-tint); color: var(--brand-ink); }
  .dz .dz-icon { display: none; }
  .dz .dz-file { display: none; font-weight: 700; color: var(--heading); margin-top: 4px; word-break: break-all; }
  .dz.has-file { border-style: solid; border-color: var(--success); background: var(--success-soft); }
  .dz.has-file .dz-file { display: block; }
  .dz input[type="file"] { display: none; }
  .logo-tile { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px; display: grid; place-items: center; height: 84px; cursor: grab; }
  .logo-tile img { max-height: 60px; max-width: 100%; object-fit: contain; }
  .logo-tile .remove-btn { position: absolute; top: 4px; right: 4px; }
  .logo-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: center; }
  .logo-row img { height: 40px; width: auto; max-width: 130px; object-fit: contain; }

  /* Combobox */
  .combo { position: relative; }
  .combo [data-results] { display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-lg); z-index: 60; max-height: 260px; overflow-y: auto; padding: 4px; }
  .combo-option { display: block; width: 100%; text-align: left; padding: 9px 12px; border-radius: var(--r-sm); font-size: var(--fs--1); color: var(--ink); }
  .combo-option:hover, .combo-option.active { background: var(--brand-tint); color: var(--brand-ink); }
  .combo-add { color: var(--brand); font-weight: 700; }
  .chip-box { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border: 1px solid var(--border-strong); border-radius: var(--r-md); padding: 6px 8px; background: var(--surface); min-height: 44px; transition: border-color var(--t), box-shadow var(--t); }
  .chip-box:focus-within { border-color: var(--brand); box-shadow: var(--ring); }
  .chip-box input { border: none !important; box-shadow: none !important; min-height: 30px !important; flex: 1; min-width: 140px; padding: 4px 6px !important; background: transparent; }
  .org-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--brand-tint); color: var(--brand-ink); border: 1px solid var(--brand-tint-2); border-radius: var(--r-sm); padding: 4px 9px; font-size: var(--fs--1); font-weight: 600; }
  .org-chip.primary { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
  .org-chip button { color: inherit; font-size: .75rem; padding: 0 2px; opacity: .7; }
  .org-chip button:hover { opacity: 1; }

  /* ---- Badges ---- */
  .badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--r-pill); font-size: .72rem; font-weight: 700; letter-spacing: .01em; white-space: nowrap; line-height: 1.4; vertical-align: middle; }
  .badge-gray { background: var(--surface-3); color: var(--ink-2); }
  .badge-blue { background: var(--brand-tint); color: var(--brand-ink); }
  .badge-navy { background: var(--brand); color: var(--on-brand); }
  .badge-green { background: var(--success-soft); color: var(--success-ink); }
  .badge-amber { background: var(--warning-soft); color: var(--warning-ink); }
  .badge-red { background: var(--danger-soft); color: var(--danger-ink); }
  a.badge:hover { text-decoration: none; filter: brightness(.96); }
  .chip-optional { font-size: .6rem; font-weight: 700; letter-spacing: .03em; background: var(--surface-3); color: var(--ink-3); padding: 2px 8px; border-radius: var(--r-pill); text-transform: lowercase; }

  /* ---- Alerts & toasts ---- */
  .alert { border-radius: var(--r-md); padding: 12px 14px; font-size: var(--fs--1); margin-bottom: 14px; border: 1px solid transparent; }
  .alert a { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
  .alert-info { background: var(--info-soft); color: var(--info-ink); border-color: color-mix(in srgb, var(--info) 20%, transparent); }
  .alert-warning { background: var(--warning-soft); color: var(--warning-ink); border-color: color-mix(in srgb, var(--warning) 25%, transparent); }
  .alert-danger { background: var(--danger-soft); color: var(--danger-ink); border-color: color-mix(in srgb, var(--danger) 25%, transparent); }
  .alert-success { background: var(--success-soft); color: var(--success-ink); border-color: color-mix(in srgb, var(--success) 25%, transparent); }
  .messages { position: fixed; top: calc(var(--topbar-h) + 10px); right: 16px; left: 16px; z-index: 120; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
  @media (min-width: 640px) { .messages { left: auto; width: 380px; } }
  .toast { pointer-events: auto; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--brand); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 12px 14px; font-size: var(--fs--1); font-weight: 500; display: flex; justify-content: space-between; gap: 10px; animation: slidein .25s var(--ease); }
  .toast.success { border-left-color: var(--success); }
  .toast.error { border-left-color: var(--danger); }
  .toast.warning { border-left-color: var(--warning); }
  .toast button { color: var(--ink-4); font-size: 1rem; padding: 0 2px; line-height: 1; }
  @keyframes slidein { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

  /* ---- Tables ---- */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.table { width: 100%; font-size: var(--fs--1); background: var(--surface); }
  .table th { text-align: left; font-size: var(--fs--2); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--ink-3); padding: 10px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border); white-space: nowrap; }
  .table td { padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--ink); }
  .table tbody tr:last-child td { border-bottom: 0; }
  .table tbody tr { transition: background var(--t-fast); }
  .table tbody tr:hover td { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
  .table td strong { color: var(--heading); }
  .table .btn-sm { min-height: 30px; }

  /* ---- Modal ---- */
  .modal-backdrop { position: fixed; inset: 0; background: var(--overlay); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 110; display: none; align-items: flex-end; justify-content: center; padding: 12px; }
  @media (min-width: 640px) { .modal-backdrop { align-items: center; padding: 20px; } }
  .modal-backdrop.open { display: flex; animation: fadein .18s ease; }
  .modal { background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); width: 100%; max-width: 520px; max-height: min(92dvh, 760px); overflow-y: auto; padding: 22px; animation: modalin .26s var(--ease-pop); border: 1px solid var(--border); }
  .modal h3 { font-size: var(--fs-1); margin-bottom: 6px; }
  @keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
  @keyframes modalin { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

  /* ---- Empty states ---- */
  .empty { text-align: center; padding: 44px 22px; color: var(--ink-2); }
  .empty-icon { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 18px; display: grid; place-items: center; font-size: 1.5rem; background: var(--brand-tint); color: var(--brand); }
  .empty h3 { color: var(--heading); margin-bottom: 4px; }
  .empty p { max-width: 42ch; margin: 0 auto 14px; font-size: var(--fs--1); }

  /* ---- Avatar ---- */
  .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--brand-tint-2); color: var(--brand-ink); display: inline-grid; place-items: center; font-weight: 700; font-size: .85rem; object-fit: cover; flex: none; text-transform: uppercase; }

  /* ---- Pill nav / tabs ---- */
  .pill-nav { display: flex; gap: 4px; overflow-x: auto; margin-bottom: 18px; padding: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); width: max-content; max-width: 100%; }
  .pill-nav a { padding: 7px 14px; border-radius: var(--r-sm); font-size: var(--fs--1); font-weight: 600; color: var(--ink-2); white-space: nowrap; transition: all var(--t-fast); }
  .pill-nav a:hover { text-decoration: none; color: var(--heading); background: var(--surface); }
  .pill-nav a.active { background: var(--surface); color: var(--brand); box-shadow: var(--shadow-sm); }
  .sig-tabs { display: flex; gap: 4px; margin-bottom: 10px; padding: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); }
  .sig-tabs button { flex: 1; min-height: 36px; padding: 6px 10px; border-radius: var(--r-sm); font-weight: 600; font-size: var(--fs--1); color: var(--ink-2); transition: all var(--t-fast); }
  .sig-tabs button.active { background: var(--surface); color: var(--brand); box-shadow: var(--shadow-sm); }
  .view-switch { display: inline-flex; gap: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 2px; }
  .view-switch button { padding: 6px 11px; border-radius: 7px; font-size: var(--fs--1); font-weight: 600; color: var(--ink-3); }
  .view-switch button.active { background: var(--surface); color: var(--brand); box-shadow: var(--shadow-sm); }

  /* ---- Filter popovers ---- */
  .filter-pop { position: relative; }
  .filter-menu { display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 70; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 8px; min-width: 210px; }
  .filter-pop.open .filter-menu { display: block; animation: fadein .15s ease; }
  .filter-menu label { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: var(--r-sm); font-size: var(--fs--1); cursor: pointer; }
  .filter-menu label:hover { background: var(--surface-2); }
  .filter-btn { position: relative; }
  .filter-btn .fcount { background: var(--brand); color: var(--on-brand); border-radius: var(--r-pill); font-size: .64rem; min-width: 17px; height: 17px; display: inline-grid; place-items: center; padding: 0 4px; margin-left: 4px; }
  #filters-form { width: 100%; }
  #filters-form input[type="search"] { flex: 1 1 260px; max-width: none !important; }
  #filters-form .filter-pop { flex: 1 1 150px; }
  #filters-form .filter-pop .filter-btn { width: 100%; justify-content: space-between; }
  #filters-form .filter-menu { width: 100%; min-width: 200px; }

  /* ---- List rows ---- */
  .field-item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); transition: border-color var(--t), box-shadow var(--t), transform var(--t); }
  .field-item.dragging { opacity: .5; }
  .field-item .drag-handle { cursor: grab; color: var(--ink-4); font-size: 1rem; touch-action: none; letter-spacing: -.2em; }
  .field-item.disabled { opacity: .55; background: var(--surface-2); }
  .field-item .field-name { font-size: var(--fs-0); color: var(--heading); }
  .field-item .field-meta { font-size: var(--fs--2); }
  a.field-item:hover { text-decoration: none; border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); }
  .event-rows .field-item { padding: 12px 16px; }

  /* ---- Signature pad ---- */
  .sig-pad { border: 1.5px dashed var(--border-strong); border-radius: var(--r-md); background: #fff; position: relative; touch-action: none; }
  .sig-pad canvas { display: block; width: 100%; height: 160px; border-radius: var(--r-sm); }
  .sig-pad .sig-hint { position: absolute; inset: 0; display: grid; place-items: center; color: var(--n-400); pointer-events: none; font-size: var(--fs--1); }

  /* ---- Comments & timeline ---- */
  .comment { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border); }
  .comment:first-child { border-top: 0; padding-top: 0; }
  .comment .avatar { width: 32px; height: 32px; font-size: .78rem; }
  .comment-body { min-width: 0; }
  .comment-head { font-size: var(--fs--1); color: var(--ink-3); }
  .comment-head b { color: var(--heading); }
  .comment-text { font-size: var(--fs--1); margin-top: 2px; white-space: pre-line; }
  .timeline { position: relative; padding-left: 22px; }
  .timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--border); border-radius: 1px; }
  .tl-item { position: relative; padding: 7px 0; font-size: var(--fs--1); }
  .tl-item::before { content: ""; position: absolute; left: -21px; top: 12px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 3px solid var(--brand); }
  .tl-item.good::before { border-color: var(--success); }
  .tl-item.bad::before { border-color: var(--danger); }
  .tl-item .tl-time { font-size: var(--fs--2); color: var(--ink-4); }
  .meta-rows { margin: 0; }
  .meta-row { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); }
  .meta-row:last-child { border-bottom: 0; }
  .meta-row dt { font-size: var(--fs--2); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); padding-top: 3px; }
  .meta-row dd { margin: 0; font-size: var(--fs--1); color: var(--ink); }
  .check-list { display: flex; flex-direction: column; gap: 8px; }
  .check-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--r-md); font-size: var(--fs--1); background: var(--surface); }
  .check-item .ck { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font-size: .66rem; flex: none; background: var(--surface-3); color: var(--ink-4); }
  .check-item.on .ck { background: var(--success); color: #fff; }
  .check-item.on { border-color: color-mix(in srgb, var(--success) 35%, transparent); background: color-mix(in srgb, var(--success-soft) 60%, var(--surface)); }

  /* ---- Charts ---- */
  .chart-card svg { display: block; width: 100%; height: auto; }
  .chart-title { font-size: var(--fs-0); font-weight: 700; color: var(--heading); margin-bottom: 1px; }
  .chart-sub { font-size: var(--fs--1); color: var(--ink-3); margin-bottom: 12px; }
  .chart-total { font-family: var(--font-display); font-size: var(--fs-2); font-weight: 700; color: var(--heading); letter-spacing: -.02em; line-height: 1.1; }
  .chart-svg { width: 100%; height: auto; display: block; }
  .chart-svg .gridline { stroke: var(--border); stroke-width: 1; }
  .chart-svg .axis-label { font: 600 10px var(--font); fill: var(--ink-4); }
  .chart-svg .pt { fill: var(--brand); stroke: var(--surface); stroke-width: 1.5; opacity: 0; transition: opacity var(--t-fast); }
  .chart-svg .pt-hit { fill: transparent; }
  .chart-svg .pt-hit:hover + .pt, .chart-svg .pt.last { opacity: 1; }
  .bar-h { display: grid; grid-template-columns: minmax(90px, 160px) 1fr auto; gap: 8px; align-items: center; font-size: var(--fs--1); margin-bottom: 8px; }
  .bar-h .bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
  .bar-h .bar-track { background: var(--surface-3); border-radius: 6px; height: 12px; overflow: hidden; }
  .bar-h .bar-fill { background: linear-gradient(90deg, var(--brand-400), var(--brand)); height: 100%; border-radius: 6px; min-width: 2px; }
  .bar-h .bar-value { color: var(--ink-2); font-weight: 700; font-variant-numeric: tabular-nums; }

  /* ---- PDF stages ---- */
  .pdf-stage { position: relative; margin: 0 auto; box-shadow: var(--shadow-md); background: #fff; border-radius: 4px; }
  .pdf-stage canvas { display: block; width: 100%; height: auto; }
  .pdf-field { position: absolute; border: 2px solid var(--brand-500); background: color-mix(in srgb, var(--brand-500) 14%, transparent); border-radius: 4px; font-size: .66rem; color: var(--brand-700); display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: move; }
  .pdf-field .remove { position: absolute; top: -1px; right: -1px; background: var(--danger); color: #fff; width: 16px; height: 16px; font-size: 10px; line-height: 1; border-radius: 0 0 0 6px; }
  .pdf-field.readonly { cursor: default; }
  .pdf-field.mine { border-color: var(--success); background: rgba(21, 128, 61, .14); color: var(--success); }
  .pdf-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 0; position: sticky; top: var(--topbar-h); background: var(--bg); z-index: 40; }

  /* ---- Date & time pickers ---- */
  .pk-native { display: none !important; }
  .pk-wrap { position: relative; display: inline-flex; width: 100%; }
  .pk-wrap .pk-display { width: 100%; cursor: pointer; background: var(--surface); color: var(--ink); }
  .pk-wrap-time .pk-display { cursor: text; text-align: center; font-variant-numeric: tabular-nums; }
  .pk-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 90; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 10px; min-width: 258px; animation: fadein .14s ease; }
  .pk-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
  .pk-head span { font-weight: 700; font-size: var(--fs--1); color: var(--heading); }
  .pk-head button { width: 30px; height: 30px; border: 1px solid var(--border); border-radius: var(--r-sm); font-size: 1rem; line-height: 1; color: var(--ink-2); }
  .pk-head button:hover { background: var(--brand-tint); border-color: var(--brand); color: var(--brand); }
  .pk-grid { display: grid; grid-template-columns: repeat(7, 33px); gap: 2px; justify-content: center; }
  .pk-dow { font-size: 10px; font-weight: 800; color: var(--ink-4); text-align: center; padding: 3px 0; text-transform: uppercase; }
  .pk-day { height: 31px; border-radius: var(--r-sm); font-size: 12.5px; font-weight: 600; color: var(--ink); }
  .pk-day:hover { background: var(--brand-tint); color: var(--brand); }
  .pk-day.today { box-shadow: inset 0 0 0 1.5px var(--border-strong); }
  .pk-day.sel { background: var(--brand); color: var(--on-brand); box-shadow: none; }
  .pk-times { min-width: 140px; padding: 6px; }
  .pk-now { display: block; width: 100%; padding: 7px 9px; margin-bottom: 4px; border-radius: var(--r-sm); background: var(--brand-tint); color: var(--brand); font-size: 12px; font-weight: 700; text-align: left; }
  .pk-time-list { max-height: 216px; overflow-y: auto; display: grid; gap: 1px; }
  .pk-time { padding: 6px 9px; border-radius: var(--r-xs); font-size: 12.5px; font-weight: 600; color: var(--ink); text-align: left; font-variant-numeric: tabular-nums; }
  .pk-time:hover { background: var(--brand-tint); color: var(--brand); }
  .pk-time.sel { background: var(--brand); color: var(--on-brand); }
  .day-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .day-row input[type="date"] { flex: 1 1 150px; max-width: 190px; }
  .day-row input[type="time"] { flex: 0 1 112px; }
  .day-row .pk-wrap { flex: 1 1 150px; max-width: 190px; }
  .day-row .pk-wrap-time { flex: 0 1 112px; max-width: 112px; }
  .day-row .time-dash { flex: none; color: var(--ink-4); }
  @media (max-width: 560px) {
    .day-row input[type="date"], .day-row .pk-wrap:not(.pk-wrap-time) { flex-basis: 100%; max-width: none; }
    .day-row .pk-wrap-time, .day-row input[type="time"] { flex: 1 1 0; max-width: none; }
  }
  .dt-grid { display: grid; gap: 12px; grid-template-columns: 1fr; align-items: start; }
  @media (min-width: 720px) { .dt-grid { grid-template-columns: minmax(0, 1fr) 240px; } }
}

/* -----------------------------------------------------------------------------
   5. Patterns — app shell, wizard, dashboard, gamification, auth, attendance
   ----------------------------------------------------------------------------- */
@layer patterns {

  /* ---- Top bar ---- */
  .navbar { position: sticky; top: 0; z-index: 80; background: color-mix(in srgb, var(--surface) 86%, transparent); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); border-bottom: 1px solid var(--border); }
  .navbar-inner { display: flex; align-items: center; gap: 10px; height: var(--topbar-h); }
  .brand { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 800; font-size: 1.12rem; letter-spacing: -.02em; color: var(--heading); }
  .brand:hover { text-decoration: none; }
  .brand-mark { width: 32px; height: 32px; color: var(--brand); display: inline-grid; place-items: center; filter: drop-shadow(0 2px 4px rgba(2, 71, 141, .22)); }
  .brand-mark .ico { width: 32px; height: 32px; stroke: none; fill: none; }
  .theme-toggle { width: 38px; height: 38px; min-height: 0; padding: 0; border-radius: var(--r-sm); color: var(--ink-2); }
  .theme-toggle .ico { width: 18px; height: 18px; }
  .theme-toggle:hover { background: var(--surface-2); color: var(--heading); }
  .topbar-user { display: none; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; font-size: var(--fs--1); padding: 4px 8px 4px 4px; border-radius: var(--r-pill); border: 1px solid transparent; }
  .topbar-user:hover { background: var(--surface-2); border-color: var(--border); text-decoration: none; }
  .topbar-user .avatar { width: 30px; height: 30px; font-size: .78rem; }
  .topbar-cta { display: none; }
  .nav-toggle { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--ink-2); background: var(--surface); }
  @media (min-width: 1000px) {
    .topbar-user, .topbar-cta { display: inline-flex; }
    .nav-toggle { display: none; }
  }
  .mobile-menu { display: none; border-top: 1px solid var(--border); background: var(--surface); padding: 8px var(--gutter) 16px; max-height: calc(100dvh - var(--topbar-h)); overflow-y: auto; }
  .mobile-menu.open { display: block; animation: fadein .18s ease; }
  .mobile-menu a { display: flex; align-items: center; gap: 12px; padding: 11px 10px; color: var(--ink); font-weight: 600; border-radius: var(--r-sm); font-size: var(--fs-0); }
  .mobile-menu a .ico { width: 20px; height: 20px; color: var(--ink-3); }
  .mobile-menu a:hover { background: var(--surface-2); text-decoration: none; }

  /* ---- Left rail ---- */
  .sidenav { display: none; }
  @media (min-width: 1000px) {
    .sidenav { display: flex; flex-direction: column; gap: 2px; position: fixed; left: 0; top: var(--topbar-h); bottom: 0; width: var(--sidenav-w); z-index: 75; background: var(--surface); border-right: 1px solid var(--border); padding: 14px 12px 16px; overflow-y: auto; scrollbar-width: thin; }
  }
  .snav-label { font-size: var(--fs--2); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); padding: 14px 12px 6px; }
  .snav-label:first-child { padding-top: 4px; }
  .snav-link { position: relative; display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: var(--r-sm); color: var(--ink-2); font-weight: 600; font-size: var(--fs--1); transition: background var(--t-fast), color var(--t-fast); }
  .snav-link:hover { background: var(--surface-2); color: var(--heading); text-decoration: none; }
  .snav-link.active { background: var(--brand-tint); color: var(--brand); }
  .snav-link.active::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--brand); }
  .snav-ico { width: 20px; height: 20px; display: inline-grid; place-items: center; flex: none; color: var(--ink-4); font-size: .95rem; transition: color var(--t-fast); }
  .snav-ico .ico { width: 19px; height: 19px; }
  .snav-link:hover .snav-ico, .snav-link.active .snav-ico { color: currentColor; }
  .snav-foot { margin-top: auto; padding: 14px 2px 0; }

  /* ---- Mobile tab bar ---- */
  .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 85; display: flex; justify-content: space-around; align-items: center; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--border); padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); }
  .tabbar a { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: .62rem; font-weight: 600; color: var(--ink-3); padding: 4px 10px; border-radius: var(--r-sm); min-width: 56px; }
  .tabbar a span { font-size: 1.1rem; line-height: 1; display: inline-grid; place-items: center; }
  .tabbar a .ico { width: 22px; height: 22px; }
  .tabbar a.active { color: var(--brand); }
  .tabbar a:hover { text-decoration: none; }
  .tabbar .tab-cta { background: var(--brand); color: #fff; border-radius: 50%; width: 48px; height: 48px; min-width: 48px; justify-content: center; margin-top: -20px; box-shadow: var(--shadow-brand); padding: 0; }
  .tabbar .tab-cta .ico { width: 24px; height: 24px; }
  @media (min-width: 1000px) { .tabbar { display: none; } }
  @media (max-width: 999px) { body:has(.tabbar) main { padding-bottom: 78px; } }
  body:not(:has(nav.navbar)) .tabbar { display: none; }

  /* ---- Dashboard ---- */
  .dash-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
  .dash-date { font-size: var(--fs--2); color: var(--ink-4); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }

  /* ---- Gamification ---- */
  .player-card { position: relative; overflow: hidden; background: linear-gradient(120deg, var(--brand-900) 0%, var(--brand-700) 55%, var(--brand-600) 100%); color: #fff; border-radius: var(--r-xl); padding: 18px 20px; box-shadow: var(--shadow-md); display: flex; flex-wrap: wrap; gap: 16px 22px; align-items: center; isolation: isolate; }
  .player-card::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(420px 220px at 90% 0%, rgba(255,255,255,.18), transparent 60%), radial-gradient(360px 220px at 0% 100%, rgba(95,132,255,.35), transparent 60%); }
  .level-ring { width: 64px; height: 64px; border-radius: 50%; flex: none; display: grid; place-items: center; position: relative; background: conic-gradient(var(--coin) calc(var(--p, 0) * 1%), rgba(255,255,255,.18) 0); }
  .level-ring::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--brand-800); }
  .level-ring b { position: relative; font-family: var(--font-display); font-size: 1.1rem; font-weight: 800; }
  .level-ring small { position: absolute; bottom: 9px; font-size: .5rem; letter-spacing: .08em; color: rgba(255,255,255,.75); text-transform: uppercase; }
  .player-meta { flex: 1; min-width: 200px; }
  .player-meta .xp-line { display: flex; justify-content: space-between; gap: 10px; font-size: var(--fs--1); color: rgba(255,255,255,.8); margin-bottom: 6px; }
  .player-meta .xp-line b { color: #fff; }
  .xp-track { height: 10px; border-radius: var(--r-pill); background: rgba(255,255,255,.18); overflow: hidden; }
  .xp-fill { height: 100%; background: linear-gradient(90deg, var(--coin), #ffd166); border-radius: inherit; transition: width .6s var(--ease); }
  .streak-pill { display: flex; flex-direction: column; align-items: center; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: var(--r-lg); padding: 8px 16px; min-width: 96px; }
  .streak-pill b { font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; color: #ffd166; line-height: 1.1; white-space: nowrap; }
  .streak-pill small { font-size: .64rem; color: rgba(255,255,255,.78); text-transform: uppercase; letter-spacing: .06em; }
  .badge-shelf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 8px; }
  @media (min-width: 640px) { .badge-shelf { grid-template-columns: repeat(5, 1fr); } }
  .gbadge { text-align: center; font-size: var(--fs--2); color: var(--ink-2); line-height: 1.3; }
  .gbadge .disc { width: 52px; height: 52px; margin: 0 auto 6px; border-radius: 50%; display: grid; place-items: center; font-size: 1.35rem; background: linear-gradient(160deg, #ffe9a8, var(--coin)); box-shadow: inset 0 -4px 0 rgba(0,0,0,.12); }
  .gbadge.locked .disc { background: var(--surface-3); box-shadow: inset 0 0 0 2px var(--border); filter: grayscale(1); opacity: .6; }
  .gbadge.locked { opacity: .7; }
  a.gbadge:hover { text-decoration: none; }
  .board-row { display: grid; grid-template-columns: 1.6rem 1fr auto auto; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--border); font-size: var(--fs--1); }
  .board-row:first-child { border-top: 0; }
  .board-row .rank { font-family: var(--font-display); font-size: 1.05rem; font-weight: 800; color: var(--ink-4); }
  .board-row.me { background: var(--brand-tint); margin: 0 -18px; padding-inline: 18px; border-radius: var(--r-md); border-top-color: transparent; }
  .board-row.me .rank { color: var(--brand); }
  .board-row .pts { font-variant-numeric: tabular-nums; color: var(--ink-2); font-weight: 700; font-size: var(--fs--1); }
  .eyebrow { display: inline-block; font-size: var(--fs--2); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); margin-bottom: 6px; }

  /* ---- Wizard shell (builder, series, minutes, signing) ---- */
  .wizard-top { position: sticky; top: 0; z-index: 80; background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); }
  .wizard-top-inner { display: flex; align-items: center; gap: 10px; padding: 9px var(--gutter); max-width: 1480px; margin: 0 auto; min-height: var(--topbar-h); }
  .wizard-label { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; margin-left: 2px; }
  .wizard-kicker { font-size: var(--fs--2); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); white-space: nowrap; }
  .wizard-title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-0); color: var(--heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; }
  .wizard-status { font-size: var(--fs--1); color: var(--ink-3); }
  .wizard-progress { height: 3px; background: var(--surface-3); }
  .wizard-progress .bar { height: 100%; background: linear-gradient(90deg, var(--brand-500), var(--brand-300)); transition: width .45s var(--ease); border-radius: 0 2px 2px 0; }
  .wizard-complete { text-align: right; font-size: var(--fs--2); font-weight: 600; color: var(--ink-4); padding: 3px var(--gutter) 0; max-width: 1480px; margin: 0 auto; }
  .builder-shell { display: grid; gap: 10px; grid-template-columns: 1fr; align-items: start; }
  @media (min-width: 980px) { .builder-shell { grid-template-columns: 264px minmax(0, 1fr); gap: 14px; } }
  .builder-shell.steps-hidden { grid-template-columns: 1fr; }
  .builder-shell.steps-hidden .builder-sidebar { display: none; }
  .builder-sidebar { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 8px; display: flex; flex-direction: row; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .builder-sidebar::-webkit-scrollbar { display: none; }
  @media (min-width: 980px) { .builder-sidebar { flex-direction: column; padding: 10px; position: sticky; top: calc(var(--topbar-h) + 14px); gap: 4px; } }
  .bstep { position: relative; display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: var(--r-md); text-decoration: none; min-width: max-content; width: 100%; text-align: left; color: var(--ink-2); transition: background var(--t-fast), color var(--t-fast); }
  .bstep:hover { background: var(--surface-2); text-decoration: none; color: var(--heading); }
  .bstep-num { width: 28px; height: 28px; border-radius: 50%; flex: none; display: inline-grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: .76rem; background: var(--surface); color: var(--ink-3); border: 1.5px solid var(--border-strong); transition: all var(--t); }
  .bstep-text { display: flex; flex-direction: column; line-height: 1.25; }
  .bstep-title { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: var(--fs--1); }
  .bstep-ico { display: none; }
  .bstep-desc { font-size: var(--fs--2); color: var(--ink-4); }
  .bstep.active { background: var(--brand); color: var(--on-brand); box-shadow: var(--shadow-brand); }
  .bstep.active:hover { background: var(--brand-deep); }
  .bstep.active .bstep-title { color: inherit; font-weight: 700; }
  .bstep.active .bstep-num { background: var(--on-brand); border-color: var(--on-brand); color: var(--brand); box-shadow: 0 0 0 3px rgba(255,255,255,.22); }
  .bstep.active .chip-optional { background: rgba(255,255,255,.2); color: inherit; }
  .bstep.done .bstep-num { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
  .bstep.done .bstep-title { color: var(--ink); }
  .bstep.locked { opacity: .45; pointer-events: none; }
  .builder-panel { min-width: 0; animation: panelIn .36s var(--ease) both; }
  @keyframes panelIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  .builder-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; min-width: 0; }
  .panel-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
  .panel-head h2 { margin: 0; font-size: var(--fs-1); font-family: var(--font); font-weight: 700; letter-spacing: -.01em; }
  .panel-body { padding: 18px; }
  .section-icon { display: none; }
  .form-section { padding: 16px 18px; border-bottom: 1px solid var(--border); }
  .form-section:last-of-type { border-bottom: none; }
  .form-section > h3 { font-size: var(--fs-0); font-weight: 700; margin-bottom: 4px; }
  .form-section .field:last-child { margin-bottom: 0; }
  .section-hint { font-size: var(--fs--1); color: var(--ink-3); margin: 0 0 14px; }
  .wizard .section-hint { margin-bottom: 12px; }
  .builder-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; background: var(--surface-2); border-top: 1px solid var(--border); }
  .wizard-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
  .step-panel { display: none; }
  .step-panel.active { display: block; animation: panelIn .3s var(--ease) both; }
  .wizard .field { margin-bottom: 12px; }
  .wizard .form-section { padding: 16px 18px; }
  .wizard .choice-pill { padding: 7px 13px; }
  .day-chips .choice-pill { min-height: 34px; padding: 5px 11px; }
  .steps { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 18px; }
  .step { display: flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: var(--r-pill); font-size: var(--fs--1); font-weight: 600; color: var(--ink-2); background: var(--surface); border: 1px solid var(--border); white-space: nowrap; }
  .step.active { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
  .step.done { color: var(--brand-ink); border-color: var(--brand-tint-2); background: var(--brand-tint); }

  /* ---- Signing layout ---- */
  .sign-shell { display: grid; gap: 14px; grid-template-columns: 1fr; align-items: start; }
  @media (min-width: 980px) { .sign-shell { grid-template-columns: 260px minmax(0, 1fr); gap: 18px; } }
  .sign-side { position: sticky; top: calc(var(--topbar-h) + 14px); display: none; }
  @media (min-width: 980px) { .sign-side { display: block; } }
  .field-nav { display: flex; flex-direction: column; gap: 6px; }
  .field-nav button { display: flex; align-items: center; gap: 10px; padding: 8px 11px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); font-weight: 600; font-size: var(--fs--1); color: var(--ink-2); text-align: left; transition: all var(--t-fast); }
  .field-nav button:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-tint); }
  .field-nav .fnum { width: 22px; height: 22px; border-radius: 50%; background: var(--brand-tint); color: var(--brand); display: grid; place-items: center; font-size: .68rem; font-weight: 800; flex: none; }

  /* ---- Auth ---- */
  .auth-shell { display: grid; min-height: calc(100dvh - var(--topbar-h)); grid-template-columns: 1fr; }
  @media (min-width: 920px) { .auth-shell { grid-template-columns: minmax(380px, 44%) 1fr; } }
  .auth-hero { display: none; position: relative; overflow: hidden; background: linear-gradient(160deg, var(--brand-950), var(--brand-800) 55%, var(--brand-600)); color: #fff; padding: 56px 48px; isolation: isolate; }
  @media (min-width: 920px) { .auth-hero { display: flex; flex-direction: column; justify-content: center; } }
  .auth-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(520px 320px at 85% 15%, rgba(147,175,255,.35), transparent 65%), radial-gradient(420px 280px at 10% 90%, rgba(245,185,66,.18), transparent 60%); }
  .auth-hero h2 { color: #fff; font-size: var(--fs-4); line-height: 1.05; letter-spacing: -.03em; max-width: 14ch; }
  .auth-points { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 16px; max-width: 460px; }
  .auth-points li { display: flex; gap: 12px; align-items: flex-start; color: rgba(255,255,255,.85); font-size: var(--fs--1); line-height: 1.5; }
  .auth-points .pt-ico { width: 36px; height: 36px; border-radius: var(--r-md); flex: none; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); display: inline-grid; place-items: center; font-size: 1rem; }
  .auth-points b { color: #fff; display: block; font-size: var(--fs-0); }
  .auth-points .pt-ico .ico { width: 18px; height: 18px; color: #fff; }
  .auth-seal { display: inline-flex; gap: 12px; align-items: center; margin-top: 34px; align-self: flex-start; padding: 12px 16px; border-radius: 14px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); font-size: var(--fs--1); line-height: 1.45; color: rgba(255,255,255,.9); }
  .auth-seal b { color: #fff; }
  .auth-seal-ico { width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.14); display: grid; place-items: center; flex: none; }
  .auth-seal-ico .ico { width: 22px; height: 22px; color: #ffd166; }
  .auth-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 28px 26px; }
  @media (max-width: 480px) { .auth-card { padding: 22px 18px; } }
  .auth-pane { display: flex; align-items: center; justify-content: center; padding: 36px var(--gutter) 64px; }
  .auth-card { width: 100%; max-width: 420px; }
  .auth-card h1 { font-size: var(--fs-3); margin-bottom: 4px; }
  .auth-sub { color: var(--ink-2); font-size: var(--fs--1); margin-bottom: 22px; }
  .auth-foot { text-align: center; font-size: var(--fs--1); color: var(--ink-2); margin-top: 18px; }

  /* ---- Public attendance card (also embedded in the builder preview) ---- */
  .att-page { background: radial-gradient(900px 420px at 50% -10%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 70%), var(--bg); min-height: 100dvh; padding: 24px var(--gutter) 56px; }
  .att-wrap { max-width: 560px; margin: 0 auto; }
  .att-head { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(135deg, var(--brand-900) 0%, var(--brand-700) 60%, var(--brand-600) 100%); color: #fff; border-radius: var(--r-xl); padding: 22px 22px 20px; box-shadow: var(--shadow-lg); animation: attFade .4s ease-out; }
  .att-head::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(360px 200px at 100% 0%, rgba(255,255,255,.16), transparent 60%); }
  @keyframes attFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; } }
  .att-kicker { display: flex; align-items: center; gap: 7px; color: rgba(255,255,255,.72); font-size: var(--fs--2); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 8px; }
  .att-head h1 { color: #fff; font-size: var(--fs-2); line-height: 1.25; margin: 0; }
  .att-meta { margin-top: 12px; display: grid; gap: 5px; font-size: var(--fs--1); color: rgba(255,255,255,.86); }
  .att-meta div { display: flex; align-items: center; gap: 8px; }
  .att-days { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
  .att-days span { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); border-radius: var(--r-pill); padding: 3px 11px; font-size: var(--fs--2); font-weight: 600; }
  .att-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 20px; margin-top: 14px; box-shadow: var(--shadow-sm); animation: attScale .3s var(--ease); }
  @keyframes attScale { from { opacity: 0; transform: scale(.98); } to { opacity: 1; } }
  .att-card .field { margin-bottom: 14px; }
  .att-row { display: grid; gap: 12px; }
  @media (min-width: 560px) { .att-row-2 { grid-template-columns: 1fr 1fr; } }
  .att-seg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .att-seg { position: relative; display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 48px; padding: 10px 8px; text-align: center; border: 1.5px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); font-size: var(--fs--1); font-weight: 700; color: var(--ink-2); cursor: pointer; transition: all var(--t-fast); user-select: none; line-height: 1.25; }
  .att-seg input { position: absolute; opacity: 0; pointer-events: none; }
  .att-seg:active { transform: scale(.97); }
  .att-seg:has(input:checked) { background: var(--brand); border-color: var(--brand); color: var(--on-brand); box-shadow: var(--shadow-brand); }
  .att-helper { font-size: var(--fs--2); color: var(--ink-4); line-height: 1.5; margin: -2px 0 8px; }
  .att-choices { display: grid; gap: 7px; list-style: none; margin: 0; padding: 0; }
  .att-choices label { display: flex; align-items: center; gap: 10px; padding: 10px 13px; border: 1px solid var(--border-strong); border-radius: var(--r-md); font-size: var(--fs--1); font-weight: 600; color: var(--ink); cursor: pointer; margin: 0; transition: all var(--t-fast); }
  .att-choices label:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); color: var(--brand-ink); }
  .att-sig-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
  .att-sig-head label { margin: 0; }
  .att-sig-segs { display: flex; gap: 4px; padding: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); }
  .att-sig-segs button { border-radius: 6px; padding: 4px 11px; font-size: var(--fs--2); font-weight: 700; color: var(--ink-3); transition: all var(--t-fast); }
  .att-sig-segs button.active { background: var(--surface); color: var(--brand); box-shadow: var(--shadow-sm); }
  .att-sig-pad { border: 1.5px dashed var(--border-strong); border-radius: var(--r-md); background: var(--surface-2); padding: 4px; }
  .att-sig-pad canvas { display: block; width: 100%; height: 180px; border-radius: var(--r-sm); background: #fff; touch-action: none; cursor: crosshair; }
  .att-sig-foot { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px 3px; }
  .att-sig-foot .hint { font-size: var(--fs--2); color: var(--ink-4); }
  .att-sig-foot .clear { color: var(--danger); font-size: var(--fs--2); font-weight: 800; display: inline-flex; gap: 4px; align-items: center; }
  .att-submit { width: 100%; background: var(--brand); color: #fff; border-radius: var(--r-lg); min-height: 52px; font-size: var(--fs-0); font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: var(--shadow-brand); transition: transform var(--t-fast), background var(--t); }
  .att-submit:hover { background: var(--brand-deep); }
  .att-submit:active { transform: scale(.99); }
  .att-powered { display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center; font-size: var(--fs--2); color: var(--ink-3); margin-top: 18px; padding: 10px 14px; border-radius: 999px; }
  .att-powered:hover { text-decoration: none; background: var(--brand-tint); color: var(--brand); }
  .att-powered .ico { width: 20px; height: 20px; flex: none; color: var(--brand); stroke: none; }
  .att-powered b { color: var(--heading); }
  .att-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
  .att-brand { display: inline-flex; align-items: center; gap: 7px; color: #fff; font-weight: 700; font-size: var(--fs--1); opacity: .92; --mark-ink: #02478d; }
  .att-brand:hover { text-decoration: none; opacity: 1; }
  .att-brand .ico { width: 22px; height: 22px; stroke: none; }
  .att-closed { text-align: center; padding: 34px 22px; }
  .att-closed .ico { display: none; }

  /* ---- Calendar ---- */
  .cal-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 16px; }
  .cal-title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-2); color: var(--heading); min-width: 190px; letter-spacing: -.02em; }
  .cal-switch { display: flex; gap: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 3px; }
  .cal-switch button { padding: 6px 14px; border-radius: 7px; font-weight: 600; font-size: var(--fs--1); color: var(--ink-3); }
  .cal-switch button.active { background: var(--surface); color: var(--brand); box-shadow: var(--shadow-sm); }
  .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
  .cal-dow { text-align: center; font-size: var(--fs--2); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); padding: 4px 0; }
  .cal-cell { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); min-height: 92px; padding: 6px; font-size: .72rem; overflow: hidden; min-width: 0; }
  .cal-cell.other { opacity: .45; }
  .cal-cell.weekend { background: var(--surface-2); }
  .cal-cell .dnum { font-family: var(--font-display); font-weight: 700; color: var(--ink-3); font-size: .76rem; }
  .cal-cell.today { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); background: var(--brand-tint); }
  .cal-cell.today .dnum { color: var(--brand); }
  .cal-chip { display: block; margin-top: 3px; padding: 2px 6px; border-radius: 6px; background: var(--brand-tint); color: var(--brand-ink); font-weight: 600; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cal-chip:hover { text-decoration: none; background: var(--brand-tint-2); }
  .cal-chip.projected { background: var(--surface-3); color: var(--ink-3); border: 1px dashed var(--border-strong); }
  .agenda-day { margin-bottom: 16px; }
  .agenda-date { font-size: var(--fs--2); font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; margin: 14px 0 6px; }
  .agenda-item { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 14px; margin-bottom: 8px; text-decoration: none; color: inherit; transition: box-shadow var(--t), transform var(--t); }
  .agenda-item:hover { text-decoration: none; box-shadow: var(--shadow-md); transform: translateY(-1px); }
  .agenda-time { font-family: var(--font-display); font-weight: 700; font-size: var(--fs--1); color: var(--brand); min-width: 48px; }
  @media (max-width: 767px) { .cal-grid-wrap[data-auto] { display: none; } }
  @media (min-width: 768px) { .agenda-wrap[data-auto] { display: none; } }
}

/* -----------------------------------------------------------------------------
   6. Utilities
   ----------------------------------------------------------------------------- */
@layer utilities {
  .muted { color: var(--ink-3); }
  .small { font-size: var(--fs--1); }
  .tiny { font-size: var(--fs--2); }
  .mono { font-family: var(--font-mono); }
  .nowrap { white-space: nowrap; }
  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  @media print {
    .navbar, .sidenav, .tabbar, .messages, .wizard-top, .no-print { display: none !important; }
    body { background: #fff; color: #000; }
    main { margin: 0 !important; }
    .card, .builder-card { box-shadow: none; border-color: #ccc; }
  }
}

/* -----------------------------------------------------------------------------
   7. Theme fix-ups that can't be expressed with tokens alone
   ----------------------------------------------------------------------------- */
@layer theme {
  :root[data-theme="dark"] .pdf-stage, .theme-auto-dark .pdf-stage { background: #fff; }        /* paper stays white */
  :root[data-theme="dark"] img[src*="qr"], .theme-auto-dark img[src*="qr"] { background: #fff; border-radius: 8px; padding: 4px; }
  :root[data-theme="dark"] .btn-primary, .theme-auto-dark:not([data-theme="light"]) .btn-primary,
  :root[data-theme="dark"] .btn-brand, .theme-auto-dark:not([data-theme="light"]) .btn-brand { color: #0b0f19; border-color: transparent; }
  :root[data-theme="dark"] .btn-primary:hover, .theme-auto-dark:not([data-theme="light"]) .btn-primary:hover { color: #0b0f19; }
  :root[data-theme="dark"] .tabbar .tab-cta, .theme-auto-dark .tabbar .tab-cta { color: #0b0f19; }
  :root[data-theme="dark"] select, .theme-auto-dark select { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238390ac' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>"); }
  :root[data-theme="dark"] .gbadge .disc, .theme-auto-dark .gbadge .disc { color: #2b1f00; }
  :root[data-theme="dark"] .att-submit, .theme-auto-dark .att-submit { color: #0b0f19; }
}


/* -----------------------------------------------------------------------------
   8. Event detail, lists and dialogs added with the attendance/report rework
   ----------------------------------------------------------------------------- */
@layer components {
  .back-link { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs--1); font-weight: 600; color: var(--ink-3); margin-bottom: 10px; }
  .back-link:hover { color: var(--brand); text-decoration: none; }
  .back-link .ico { width: 16px; height: 16px; }
  .type-pill { text-transform: uppercase; letter-spacing: .06em; font-size: .66rem; }

  /* Tabs (same chrome as pill-nav, but buttons that switch panels) */
  .pill-nav button.tab-btn { padding: 8px 16px; border-radius: var(--r-sm); font-size: var(--fs--1); font-weight: 600; color: var(--ink-2); white-space: nowrap; transition: all var(--t-fast); display: inline-flex; align-items: center; gap: 8px; }
  .pill-nav button.tab-btn:hover { color: var(--heading); background: var(--surface); }
  .pill-nav button.tab-btn.active { background: var(--surface); color: var(--brand); box-shadow: var(--shadow-sm); }
  .tab-count { background: var(--surface-3); color: var(--ink-2); border-radius: var(--r-pill); font-size: .66rem; padding: 1px 7px; min-width: 20px; text-align: center; }
  .tab-btn.active .tab-count { background: var(--brand-tint-2); color: var(--brand-ink); }
  .tab-count.warn { background: var(--warning-soft); color: var(--warning-ink); }
  .tab-panel { display: none; }
  .tab-panel.active { display: block; animation: panelIn .28s var(--ease) both; }

  /* Attendance window state */
  .win-state { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs--1); font-weight: 700; color: var(--ink-2); }
  .win-state .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-4); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink-4) 20%, transparent); }
  .win-state.open .dot, .win-state.reopened .dot { background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 25%, transparent); animation: pulse 1.8s ease-in-out infinite; }
  .win-state.open, .win-state.reopened { color: var(--success-ink); }
  .win-state.locked .dot { background: var(--brand); }
  .win-state.before .dot, .win-state.closed_early .dot { background: var(--warning); }
  @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 25%, transparent); } 50% { box-shadow: 0 0 0 6px transparent; } }
  .win-table td, .win-table th { padding: 8px 12px; }
  .win-table input[type="time"] { min-height: 34px; padding: 4px 8px; max-width: 104px; font-size: var(--fs--1); }
  .win-table .pk-wrap, .win-table .pk-wrap-time { width: auto; max-width: none; flex: none; }
  .win-table .pk-display { width: 76px; min-height: 34px; padding: 4px 6px; font-size: var(--fs--1); }

  /* Event rows with the delete affordance */
  .event-row { padding: 0 8px 0 0; gap: 4px; }
  .event-row-main { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; padding: 12px 14px; color: inherit; }
  .event-row-main:hover { text-decoration: none; }
  .event-row .icon-btn { width: 36px; height: 36px; flex: none; }
  .event-row .icon-btn:hover { background: var(--danger-soft); border-color: transparent; }

  /* Filters all share one height */
  #filters-form input[type="search"], #filters-form .btn { min-height: 44px; }
  #filters-form .filter-btn { font-size: var(--fs-0); padding: 9px 14px; }

  /* Report rows & dialogs */
  .report-row { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); }
  .logo-pick { display: flex; flex-wrap: wrap; gap: 8px; }
  .logo-pick-item { position: relative; display: grid; place-items: center; width: 96px; height: 60px; padding: 6px; border: 1.5px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); cursor: pointer; }
  .logo-pick-item input { position: absolute; top: 4px; left: 4px; margin: 0; }
  .logo-pick-item img { max-height: 40px; max-width: 72px; object-fit: contain; }
  .logo-pick-item:has(input:checked) { border-color: var(--brand); box-shadow: var(--ring); }
  .logo-pick-item:has(input:not(:checked)) img { opacity: .35; filter: grayscale(1); }
  .member-pick { display: grid; gap: 4px; max-height: 180px; overflow-y: auto; padding: 6px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); }
  .member-pick label { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--r-sm); font-size: var(--fs--1); font-weight: 500; color: var(--ink); cursor: pointer; margin: 0; }
  .member-pick label:hover { background: var(--surface); }

  /* Event type tiles in the builder */
  .type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; }
  .type-tile { position: relative; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 9px 12px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); font-size: var(--fs--1); font-weight: 600; color: var(--ink-2); cursor: pointer; transition: all var(--t-fast); }
  .type-tile input { position: absolute; opacity: 0; pointer-events: none; }
  .type-tile:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-tint); }
  .type-tile:has(input:checked) { background: var(--brand); border-color: var(--brand); color: var(--on-brand); box-shadow: var(--shadow-brand); }
  .type-tile:has(input:focus-visible) { box-shadow: var(--ring); }
  .type-tile .tt-tag { margin-left: auto; font-size: .58rem; text-transform: uppercase; letter-spacing: .06em; opacity: .7; }
  .type-tile-other { border-style: dashed; }

  /* Version diff viewer */
  .rev-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .rev-text { font-family: var(--font); font-size: var(--fs--1); white-space: pre-wrap; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 8px 10px; max-height: 180px; overflow-y: auto; margin: 2px 0 0; }
  @media (max-width: 560px) { .rev-cols { grid-template-columns: 1fr; } }
}


/* -----------------------------------------------------------------------------
   9. Events list (rows + cards), event page refinements, badge palette
   ----------------------------------------------------------------------------- */
@layer components {
  /* Badges: calmer tints, status badges carry a dot */
  .badge-gray { background: var(--surface-3); color: var(--ink-2); }
  .badge-blue { background: var(--brand-tint); color: var(--brand-ink); }
  .type-pill { background: color-mix(in srgb, var(--brand) 9%, var(--surface)); color: var(--brand); border: 1px solid color-mix(in srgb, var(--brand) 18%, transparent); text-transform: uppercase; letter-spacing: .06em; font-size: .64rem; }
  .badge-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }

  /* Filters sit clear of the list */
  .filters { margin-bottom: 20px; }

  /* View switch with icons */
  .view-switch button { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 6px 12px; }
  .view-switch .ico { width: 15px; height: 15px; }

  /* Event collection — list rows by default, cards on request */
  .event-collection { display: grid; gap: 10px; }
  .event-collection.view-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
  .event-card { --accent: var(--ink-4); position: relative; display: flex; align-items: stretch; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; transition: transform var(--t) var(--ease), box-shadow var(--t), border-color var(--t); }
  .event-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent); }
  .event-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
  .event-card.status-published { --accent: var(--success); }
  .event-card.status-draft { --accent: var(--ink-4); }
  .event-card.status-closed { --accent: var(--warning); }
  .event-card.status-locked, .event-card.status-archived { --accent: var(--brand); }
  .ec-main { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0; padding: 14px 16px 14px 20px; color: inherit; }
  .ec-main:hover { text-decoration: none; }
  .ec-date { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 58px; height: 62px; flex: none; border-radius: var(--r-md); background: var(--brand-tint); color: var(--brand); line-height: 1; }
  .ec-day { font-family: var(--font-display); font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; }
  .ec-mon { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; margin-top: 2px; }
  .ec-dow { font-size: .58rem; font-weight: 600; color: var(--ink-3); margin-top: 3px; text-transform: uppercase; letter-spacing: .06em; }
  .ec-body { flex: 1; min-width: 0; }
  .ec-top { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 5px; }
  .ec-title { font-family: var(--font); font-size: var(--fs-1); font-weight: 700; margin: 0 0 3px; color: var(--heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ec-meta { font-size: var(--fs--1); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ec-side { display: flex; align-items: center; gap: 14px; flex: none; color: var(--ink-3); }
  .ec-count { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: var(--fs--1); color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 4px 10px; }
  .ec-count .ico { width: 15px; height: 15px; color: var(--ink-4); }
  .ec-chevron { font-size: 1.3rem; color: var(--ink-4); }
  .ec-delete { align-self: center; margin-right: 10px; flex: none; width: 36px; height: 36px; color: var(--ink-4); }
  .ec-delete:hover { background: var(--danger-soft); color: var(--danger); border-color: transparent; }

  .view-cards .event-card { flex-direction: column; }
  .view-cards .event-card::before { width: auto; height: 4px; right: 0; bottom: auto; }
  .view-cards .ec-main { flex-direction: column; align-items: stretch; gap: 12px; padding: 18px 16px 14px; }
  .view-cards .ec-date { width: 58px; }
  .view-cards .ec-title { white-space: normal; line-height: 1.3; }
  .view-cards .ec-meta { white-space: normal; }
  .view-cards .ec-side { justify-content: space-between; padding-top: 10px; border-top: 1px solid var(--border); margin-top: auto; }
  .view-cards .ec-chevron { display: none; }
  .view-cards .ec-delete { position: absolute; top: 12px; right: 10px; margin: 0; background: var(--surface); border: 1px solid var(--border); }

  @media (max-width: 640px) {
    .ec-main { gap: 12px; padding: 12px 12px 12px 16px; }
    .ec-date { width: 50px; height: 56px; }
    .ec-side .ec-chevron { display: none; }
  }

  /* Event page: share box, participants header, signature thumbnails */
  .share-box { display: flex; gap: 14px; align-items: flex-start; }
  .qr-thumb { flex: none; width: 92px; height: 92px; padding: 4px; border: 1px solid var(--border); border-radius: var(--r-md); background: #fff; overflow: hidden; transition: box-shadow var(--t); }
  .qr-thumb img { width: 100%; height: 100%; object-fit: contain; }
  .qr-thumb:hover { box-shadow: var(--ring); }
  .participants-head { align-items: center; }
  .participants-head h3 { display: inline-flex; align-items: center; gap: 8px; }
  .inline-search { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
  .inline-search input[type="search"] { width: 260px; max-width: 42vw; min-height: 36px; padding: 6px 12px; font-size: var(--fs--1); }
  .sig-thumb { height: 30px; max-width: 110px; object-fit: contain; background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: 2px 4px; }
  @media (max-width: 640px) {
    .share-box { flex-direction: column; }
    .inline-search input[type="search"] { width: 100%; max-width: none; }
  }
}


@layer components {
  .about-title { padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
  .about-title h2 { font-family: var(--font); font-size: var(--fs-1); font-weight: 700; margin: 6px 0 0; letter-spacing: -.01em; }
  .link-btn { font-size: var(--fs--2); font-weight: 700; color: var(--brand); padding: 2px 4px; border-radius: var(--r-xs); }
  .link-btn:hover { background: var(--brand-tint); }
  .logo-pick-item { flex-direction: column; gap: 4px; height: auto; padding: 10px 8px 6px; width: 110px; }
  .logo-pick-item img { max-height: 36px; }
  .lp-name { font-size: .62rem; font-weight: 600; color: var(--ink-3); max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* -----------------------------------------------------------------------------
   10. Event cards (screenshot design), menus, link-settings dialog
   ----------------------------------------------------------------------------- */
@layer components {
  .detail-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
  .detail-top .back-link { margin: 0; }

  /* Event cards — date tile, two-line title, at-a-glance status and counts */
  .event-collection.view-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 350px), 1fr)); gap: 18px; }
  .ev-card { position: relative; display: flex; flex-direction: column; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 20px 20px 16px; box-shadow: var(--shadow-xs); transition: transform var(--t) var(--ease), box-shadow var(--t), border-color var(--t); }
  .ev-card::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 5px; border-radius: 20px 20px 0 0; background: var(--brand-300); }
  .ev-card:has(.menu.open) { z-index: 5; }
  .ev-card.st-published::before { background: var(--success); }
  .ev-card.st-closed::before { background: var(--warning); }
  .ev-card.st-locked::before, .ev-card.st-archived::before { background: var(--ink-4); }
  .ev-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--brand-tint-2); }
  .ev-head { display: flex; align-items: flex-start; gap: 14px; }
  .ev-date { width: 54px; flex: none; border-radius: 14px; background: var(--brand-tint); color: var(--brand); text-align: center; padding: 8px 0 7px; }
  .ev-date .d { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.45rem; line-height: 1; letter-spacing: -.01em; }
  .ev-date .m { display: block; font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; margin-top: 3px; }
  .is-training .ev-date { background: #fbf3df; color: #8a6a12; }
  .is-training .ev-kicker { color: #8a6a12; }
  .ev-heading { flex: 1; min-width: 0; }
  .ev-kicker { font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); margin-bottom: 3px; }
  .ev-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 700; font-size: 1.06rem; color: var(--heading); line-height: 1.3; }
  .ev-title:hover { text-decoration: none; color: var(--brand); }
  .ev-when { font-size: var(--fs--1); color: var(--ink-3); margin-top: 4px; line-height: 1.35; }
  .ev-status { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .8rem; white-space: nowrap; flex: none; padding: 4px 10px 4px 8px; border-radius: var(--r-pill); color: var(--ink-3); background: var(--surface-2); }
  .ev-status .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
  .ev-status.st-published { color: var(--success-ink); background: var(--success-soft); }
  .ev-status.st-published .dot { box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent); }
  .ev-status.st-draft { color: var(--brand); background: var(--brand-tint); }
  .ev-status.st-closed { color: var(--warning-ink); background: var(--warning-soft); }
  .ev-status.st-locked, .ev-status.st-archived { color: var(--ink-2); background: var(--surface-2); }
  .ev-meta { display: grid; gap: 8px; font-size: .93rem; color: var(--ink-2); }
  .ev-meta > div { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .ev-meta > div > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ev-meta .ico { width: 17px; height: 17px; color: var(--ink-4); flex: none; }
  .ev-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--border); }
  .ev-stats { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--fs--1); font-weight: 700; color: var(--heading); }
  .ev-stats > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
  .ev-stats small { font-weight: 600; color: var(--ink-3); font-size: inherit; }
  .ev-stats .ico { width: 16px; height: 16px; color: var(--ink-4); }
  .ev-type { flex: none; font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); background: var(--brand-tint); border-radius: var(--r-pill); padding: 4px 10px; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface); font-size: .82rem; font-weight: 600; color: var(--ink-2); }
  .chip .ico { width: 15px; height: 15px; color: var(--ink-4); }
  .ev-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .ev-actions .btn-sm { min-height: 40px; padding: 7px 14px; font-size: var(--fs-0); border-radius: var(--r-md); }
  .ev-ib { width: 40px; height: 40px; border: 1px solid var(--border-strong); border-radius: var(--r-md); color: var(--ink-2); background: var(--surface); box-shadow: var(--shadow-xs); }
  .ev-ib:hover { background: var(--surface-2); color: var(--heading); border-color: var(--border-strong); }
  .ev-ib .ico { width: 17px; height: 17px; }
  .ev-actions .menu { margin-left: auto; }
  .menu-label { margin: 0 2px 0 4px; }
  .view-cards .ev-actions .menu-btn { width: 40px; padding: 7px 0; justify-content: center; }
  .view-cards .ev-actions .menu-btn .menu-label, .view-cards .ev-actions .menu-btn .menu-chev { display: none; }
  .menu { position: relative; }
  .menu-btn { background: var(--brand-tint); color: var(--brand); border-color: var(--brand-tint-2); }
  .menu-btn:hover { background: var(--brand-tint-2); color: var(--brand-ink); }
  .menu-list { display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 70; min-width: 220px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-lg); }
  .menu.open .menu-list { display: block; animation: fadein .14s ease; }
  .menu-list a, .menu-list button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: var(--r-sm); font-size: var(--fs--1); font-weight: 600; color: var(--ink); text-align: left; }
  .menu-list a:hover, .menu-list button:hover { background: var(--surface-2); text-decoration: none; }
  .menu-list .ico { width: 16px; height: 16px; color: var(--ink-4); }
  .menu-list .danger { color: var(--danger); }
  .menu-list .danger .ico { color: var(--danger); }
  .menu-list .danger:hover { background: var(--danger-soft); }
  .menu-sep { border-top: 1px solid var(--border); margin: 6px 4px; }

  /* Compact list variant of the same card */
  .view-list .ev-card { flex-direction: row; align-items: center; gap: 18px; padding: 12px 16px 12px 18px; border-radius: 16px; }
  .view-list .ev-card::before { top: -1px; bottom: -1px; right: auto; width: 5px; height: auto; border-radius: 16px 0 0 16px; }
  .view-list .ev-head { flex: 1.4; min-width: 0; align-items: center; }
  .view-list .ev-date { width: 48px; padding: 6px 0 5px; }
  .view-list .ev-date .d { font-size: 1.2rem; }
  .view-list .ev-title { -webkit-line-clamp: 1; font-size: 1rem; }
  .view-list .ev-status { order: 5; }
  .view-list .ev-meta { flex: 1.2; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--fs--1); }
  .view-list .ev-foot { flex: none; padding: 0; border: 0; gap: 14px; }
  .view-list .ev-type { display: none; }
  .view-list .ev-actions { flex: none; }
  .view-list .ev-actions .btn-sm, .view-list .ev-ib { display: none; }
  .view-list .ev-actions .btn-primary { display: inline-flex; }
  .ev-open { width: 44px; padding: 7px 0 !important; justify-content: center; }
  .ev-open .ico { width: 19px; height: 19px; }
  .filter-menu-search { padding: 6px; min-width: 240px; }
  .fm-search { width: 100%; min-height: 36px; margin-bottom: 6px; font-size: var(--fs--1); }
  .fm-options { max-height: 260px; overflow-y: auto; padding: 2px; }
  .fm-empty { padding: 6px 8px; }
  @media (max-width: 1100px) { .view-list .ev-card { flex-wrap: wrap; } .view-list .ev-meta { flex-basis: 100%; } }

  /* Link settings dialog */
  .ls-section { padding: 14px 0; border-top: 1px solid var(--border); }
  .ls-section:first-of-type { border-top: 0; padding-top: 4px; }
  .ls-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
  .ls-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
  .ls-today { margin-top: 12px; padding: 10px 12px; border: 1px dashed var(--border-strong); border-radius: var(--r-md); background: var(--surface-2); }
  .win-table select { min-height: 36px; padding: 5px 30px 5px 10px; font-size: var(--fs--1); width: 104px; background-position: right 8px center; }
}


@layer components {
  .nl-closes { min-height: 44px; display: flex; align-items: center; padding: 10px 13px; border: 1px dashed var(--border-strong); border-radius: var(--r-md); background: var(--surface-2); font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; }
}


/* -----------------------------------------------------------------------------
   11. Sidebar toggle, data tables, branding footer, inline validation
   ----------------------------------------------------------------------------- */
@layer components {
  .snav-toggle { display: none; width: 38px; height: 38px; border-radius: var(--r-sm); color: var(--ink-2); place-items: center; margin-right: 2px; }
  .snav-toggle:hover { background: var(--surface-2); color: var(--heading); }
  .snav-toggle .ico { width: 20px; height: 20px; }
  .wizard-top-inner .snav-toggle { margin-right: 6px; flex: none; }
  .af-dialog .modal { max-width: 460px; }
  .af-dialog-body { color: var(--ink-2); margin: 4px 0 0; white-space: pre-line; }
  .dlg-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 12px; }
  .dlg-head h3 { margin: 2px 0 0; }
  .dlg-head-text { min-width: 0; flex: 1; }
  .dlg-icon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; flex: none; }
  .dlg-icon svg { width: 22px; height: 22px; }
  .dlg-icon.is-danger { background: var(--danger-soft); color: var(--danger); }
  .dlg-icon.is-brand { background: var(--brand-tint); color: var(--brand); }
  .dlg-subject { font-weight: 700; padding: 10px 12px; border: 1px solid var(--border); border-left: 3px solid var(--danger); border-radius: var(--r-md); background: var(--surface-2); margin: 0 0 10px; overflow-wrap: anywhere; }
  .dlg-details { margin: 0 0 12px; padding: 0; list-style: none; display: grid; gap: 6px; font-size: var(--fs--1); color: var(--ink-2); }
  .dlg-details li { position: relative; padding-left: 18px; }
  .dlg-details li::before { content: ""; position: absolute; left: 4px; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--danger); }
  .dlg-word { margin: 4px 0 14px; }
  .dlg-word input { font-family: var(--font-mono, ui-monospace, monospace); letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }
  .dlg-word.is-ok input { border-color: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 20%, transparent); }
  .dlg-actions .btn:disabled { opacity: .45; cursor: not-allowed; }
  .btn-trash { gap: 6px; }
  .btn-trash .ico { width: 15px; height: 15px; }
  .btn-trash-icon { width: 34px; height: 34px; padding: 0; justify-content: center; }
  .btn-trash-icon .ico { width: 15px; height: 15px; }
  .detail-top .btn-trash { margin-left: 6px; }
  @media (min-width: 1000px) {
    .snav-toggle { display: inline-grid; }
  }

  /* Inline validation under a field */
  .field-error { display: none; color: var(--danger); font-size: var(--fs--1); font-weight: 600; margin-top: 6px; }
  .field.is-invalid .field-error { display: block; }
  .field.is-invalid input, .field.is-invalid select { border-color: var(--danger); box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 14%, transparent); }

  /* Branding footer helpers */
  .footer-samples { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 2px 0 12px; }
  .footer-preview { background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px 18px 12px; color: #1f2937; }
  .fp-rule { border-top: 3px double #7a1f1f; margin-bottom: 8px; }
  .fp-line { text-align: center; font-weight: 700; font-size: .8rem; font-family: Helvetica, Arial, sans-serif; }
  .fp-page { text-align: right; font-size: .62rem; color: #64748b; margin-top: 2px; }

  /* Data table */
  .dt-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 18px; border-bottom: 1px solid var(--border); }
  .dt-toolbar .dt-search { flex: 1 1 240px; min-height: 38px; padding: 7px 12px 7px 36px; font-size: var(--fs--1); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ea7ba' stroke-width='2.2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>"); background-repeat: no-repeat; background-position: 12px center; }
  .dt-toolbar select { width: auto; min-height: 38px; padding: 6px 30px 6px 10px; font-size: var(--fs--1); background-position: right 8px center; }
  .dt-toolbar .btn-sm { min-height: 38px; }
  .dt-bulk { display: none; align-items: center; gap: 8px; padding: 8px 18px; background: var(--brand-tint); border-bottom: 1px solid var(--border); font-size: var(--fs--1); font-weight: 600; color: var(--brand-ink); }
  .dt-bulk.show { display: flex; }
  table[data-datatable] th.dt-sortable { cursor: pointer; user-select: none; position: relative; padding-right: 22px; }
  table[data-datatable] th.dt-sortable::after { content: ""; position: absolute; right: 8px; top: 50%; width: 8px; height: 8px; margin-top: -5px; border-right: 2px solid var(--ink-4); border-bottom: 2px solid var(--ink-4); transform: rotate(45deg); opacity: .35; }
  table[data-datatable] th.sorted-asc::after { transform: rotate(-135deg); margin-top: -1px; opacity: 1; border-color: var(--brand); }
  table[data-datatable] th.sorted-desc::after { opacity: 1; border-color: var(--brand); }
  table[data-datatable] th.dt-sortable:hover { color: var(--heading); }
  table[data-datatable] thead th { position: sticky; top: 0; z-index: 2; }
  table[data-datatable] tbody tr.is-selected td { background: var(--brand-tint); }
  table[data-datatable].dt-compact td { padding-top: 6px; padding-bottom: 6px; }
  table[data-datatable].dt-compact .avatar { display: none; }
  .table-wrap.dt-scroll { max-height: 640px; overflow: auto; }
  .dt-empty-msg { text-align: center; padding: 28px; color: var(--ink-3); }
  .dt-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 18px; border-top: 1px solid var(--border); font-size: var(--fs--1); color: var(--ink-3); }
  .dt-pager { display: flex; gap: 4px; align-items: center; }
  .dt-page { min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); font-size: var(--fs--1); font-weight: 600; color: var(--ink-2); }
  .dt-page:hover:not([disabled]) { border-color: var(--brand); color: var(--brand); }
  .dt-page.active { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
  .dt-page[disabled] { opacity: .4; cursor: not-allowed; }
  .dt-ellipsis { color: var(--ink-4); padding: 0 4px; }
  .dt-cols { position: relative; }
  .dt-cols .menu-list { left: 0; right: auto; min-width: 200px; max-height: 320px; overflow-y: auto; }
  .dt-cols .menu-list label { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: var(--r-sm); font-size: var(--fs--1); font-weight: 500; color: var(--ink); cursor: pointer; }
  .dt-cols .menu-list label:hover { background: var(--surface-2); }
}


/* -----------------------------------------------------------------------------
   12. Guided check-in form
   ----------------------------------------------------------------------------- */
@layer patterns {
  .att-open-note { display: flex; align-items: center; gap: 8px; justify-content: center; margin: 12px 0 0; font-size: var(--fs--1); color: var(--ink-2); }
  .att-open-note .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 25%, transparent); animation: pulse 1.8s ease-in-out infinite; }
  .att-eta { margin-left: 6px; padding: 2px 9px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--border); font-size: var(--fs--2); font-weight: 700; color: var(--ink-3); }
  .att-card { counter-reset: step; }
  .att-progress { margin-bottom: 18px; }
  .att-progress-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
  .att-progress-text { font-size: var(--fs--1); font-weight: 700; color: var(--heading); transition: color var(--t); }
  .att-progress-pct { font-family: var(--font-display); font-weight: 800; font-size: .9rem; color: var(--brand); font-variant-numeric: tabular-nums; }
  .att-progress-bar { height: 8px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
  .att-progress-bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--brand-500), var(--brand)); transition: width .45s var(--ease); }
  .att-step { counter-increment: step; position: relative; padding: 16px 0 18px; border-top: 1px solid var(--border); }
  .att-step:first-of-type { border-top: 0; padding-top: 4px; }
  .att-step.att-in { animation: attStepIn .4s var(--ease) both; }
  @keyframes attStepIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  .att-step-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
  .att-step-num { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--surface-3); color: var(--ink-3); font-family: var(--font-display); font-weight: 800; font-size: .8rem; transition: all var(--t); }
  .att-step-num::before { content: counter(step); }
  .att-step.done .att-step-num { background: var(--success); color: #fff; transform: scale(1.04); }
  .att-step.done .att-step-num::before { content: "✓"; }
  .att-step-title { flex: 1; min-width: 0; line-height: 1.25; }
  .att-step-title strong { display: block; font-size: var(--fs-0); color: var(--heading); }
  .att-step-title > span { display: block; font-size: var(--fs--2); color: var(--ink-3); margin-top: 1px; }
  .att-step-title strong .req { display: inline; margin-left: 2px; }
  .att-live-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); color: var(--ink-4); font-weight: 800; font-size: .85rem; transition: all var(--t) var(--ease-pop); flex: none; }
  .att-live-avatar.has-name { background: var(--brand); color: var(--on-brand); transform: scale(1.06); box-shadow: var(--shadow-brand); }
  .att-field label { font-size: .8rem; }
  .att-field input:focus, .att-field select:focus, .att-field textarea:focus { transform: translateY(-1px); }
  .att-field-last { margin-bottom: 0; }
  .att-typed-sig { font-family: "Snell Roundhand", "Brush Script MT", "Segoe Script", cursive; font-size: 1.35rem !important; min-height: 56px; }
  .att-step .att-sig-segs { margin-left: auto; }
  .att-submit.ready { background: linear-gradient(90deg, var(--brand), var(--brand-500)); animation: attReady 1.6s ease-in-out infinite; }
  @keyframes attReady { 0%, 100% { box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--brand) 60%, transparent); } 50% { box-shadow: 0 10px 28px -6px color-mix(in srgb, var(--brand) 75%, transparent); } }
  .att-submit.busy { opacity: .75; }
  .att-shake { animation: attShake .5s ease; }
  @keyframes attShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
  @media (prefers-reduced-motion: reduce) { .att-step.att-in, .att-submit.ready, .att-open-note .dot { animation: none; } }
}

/* Sidebar hidden state — in the utilities layer so it outranks the sidenav's own layout rules */
@layer utilities {
  @media (min-width: 1000px) {
    html.snav-hidden .sidenav { width: var(--sidenav-rail); padding: 14px 8px 16px; overflow-x: hidden; }
    html.snav-hidden body:has(.sidenav) main, html.snav-hidden body:has(.sidenav) .wizard-top { margin-left: var(--sidenav-rail); }
    html.snav-hidden .snav-label { font-size: 0; height: 1px; background: var(--border); margin: 10px 8px; padding: 0; overflow: hidden; }
    html.snav-hidden .snav-label:first-child { height: 0; margin: 0; background: transparent; }
    html.snav-hidden .snav-link { justify-content: center; padding: 10px 0; font-size: 0; gap: 0; }
    html.snav-hidden .snav-link .snav-ico { width: 24px; height: 24px; }
    html.snav-hidden .snav-link .snav-ico .ico { width: 22px; height: 22px; }
    html.snav-hidden .snav-link.active::before { left: -8px; }
    html.snav-hidden .snav-sub { padding-left: 0; } html.snav-hidden .snav-sub .snav-ico .ico { width: 18px; height: 18px; }
    html.snav-hidden .snav-caret { display: none; }
    html.snav-hidden .snav-children { margin-left: 0; padding-left: 0; }
    html.snav-hidden .snav-children::before { display: none; }
    html.snav-hidden .snav-children .snav-sub { padding-left: 0; }
    html.snav-hidden .snav-children .snav-sub.active::before { left: -12px; }
    html.snav-hidden .snav-link::after { content: attr(data-label); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); background: var(--ink); color: var(--surface); font-size: .78rem; font-weight: 600; padding: 5px 9px; border-radius: 8px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 5; }
    html.snav-hidden .snav-link:hover::after, html.snav-hidden .snav-link:focus-visible::after { opacity: 1; }
    html.snav-hidden .sidenav .snav-mobile { display: none; }
    html.snav-hidden .sidenav .snav-head { display: flex; }
  }
}

/* -----------------------------------------------------------------------------
   13. My attendance, lock dialog
   ----------------------------------------------------------------------------- */
@layer components {
  .ma-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 22px; }
  .ma-stat { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
  .ma-num { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; color: var(--brand); line-height: 1.1; }
  .ma-lbl { font-size: var(--fs--1); color: var(--ink-3); font-weight: 600; }
  .ma-year { font-size: var(--fs-1); margin: 18px 0 10px; color: var(--heading); display: flex; align-items: center; gap: 12px; }
  .ma-year::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
  .ma-list { display: grid; gap: 12px; }
  .ma-item { display: grid; grid-template-columns: 60px 1fr auto; gap: 16px; align-items: start; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px 18px; box-shadow: var(--shadow-xs); }
  .ma-date { width: 60px; border-radius: 14px; background: var(--brand-tint); color: var(--brand); text-align: center; padding: 8px 0 7px; }
  .ma-date .d { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; line-height: 1; }
  .ma-date .m { display: block; font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin-top: 3px; }
  .is-training .ma-date { background: #fbf3df; color: #8a6a12; }
  .ma-kicker { font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); }
  .ma-title { margin: 2px 0 6px; font-size: 1.02rem; }
  .ma-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--fs--1); color: var(--ink-2); }
  .ma-meta span { display: inline-flex; align-items: center; gap: 6px; }
  .ma-meta .ico { width: 15px; height: 15px; color: var(--ink-4); }
  .ma-docs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
  .ma-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
  @media (max-width: 640px) {
    .ma-item { grid-template-columns: 52px 1fr; }
    .ma-side { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; }
  }
  .lock-list { margin: 0; padding-left: 18px; color: var(--ink-2); }
  .lock-list li { margin-bottom: 4px; }
}

/* -----------------------------------------------------------------------------
   14. Rich minutes: editor, mentions, document preview, version diffs
   ----------------------------------------------------------------------------- */
@layer components {
  /* Rich text editors (Quill) — one card: sticky toolbar, roomy canvas, footer */
  .rte-field label { display: block; margin-bottom: 8px; }
  .rte-wrap { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-lg); overflow: clip; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
  .rte-wrap:focus-within { border-color: var(--brand); box-shadow: var(--ring); }
  .rte-wrap .ql-toolbar.ql-snow { position: sticky; top: calc(var(--topbar-h) + 6px); z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; border: 0; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 8px 10px; font-family: inherit; }
  .rte-wrap .ql-toolbar.ql-snow .ql-formats { display: inline-flex; align-items: center; gap: 2px; margin: 0; padding: 0 8px; border-right: 1px solid var(--border); }
  .rte-wrap .ql-toolbar.ql-snow .ql-formats:first-child { padding-left: 2px; }
  .rte-wrap .ql-toolbar.ql-snow .ql-formats:last-child { border-right: 0; }
  .rte-wrap .ql-toolbar.ql-snow button { width: 34px; height: 34px; padding: 7px; border-radius: 9px; color: var(--ink-2); transition: background var(--t-fast), color var(--t-fast); }
  .rte-wrap .ql-toolbar.ql-snow button svg { width: 20px; height: 20px; float: none; }
  .rte-wrap .ql-toolbar.ql-snow button:hover, .rte-wrap .ql-toolbar.ql-snow button:focus-visible { background: var(--surface-2); }
  .rte-wrap .ql-toolbar.ql-snow button.ql-active { background: var(--brand-tint); }
  .ql-snow .ql-stroke { stroke: var(--ink-2); }
  .ql-snow .ql-fill, .ql-snow .ql-stroke.ql-fill { fill: var(--ink-2); }
  .ql-snow.ql-toolbar button:hover .ql-stroke, .ql-snow.ql-toolbar button:focus-visible .ql-stroke, .ql-snow.ql-toolbar button.ql-active .ql-stroke, .ql-snow .ql-picker-label:hover .ql-stroke, .ql-snow .ql-picker-item:hover .ql-stroke, .ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { stroke: var(--brand); }
  .ql-snow.ql-toolbar button:hover .ql-fill, .ql-snow.ql-toolbar button.ql-active .ql-fill { fill: var(--brand); }
  .ql-snow.ql-toolbar button.ql-active, .ql-snow .ql-picker-label.ql-active, .ql-snow .ql-picker-item.ql-selected, .ql-snow .ql-picker.ql-expanded .ql-picker-label { color: var(--brand); }
  .ql-snow .ql-picker { color: var(--ink-2); font-family: inherit; font-weight: 600; font-size: var(--fs--1); height: 34px; }
  .ql-snow .ql-picker-label { display: inline-flex; align-items: center; height: 34px; padding-left: 10px; border: 0 !important; border-radius: 9px; }
  .ql-snow .ql-picker-label:hover { background: var(--surface-2); }
  .ql-snow .ql-picker.ql-expanded .ql-picker-label { background: var(--brand-tint); }
  .ql-snow .ql-picker-options { background: var(--surface); border: 1px solid var(--border) !important; border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 6px; margin-top: 6px; }
  .ql-snow .ql-picker-item { border-radius: 7px; padding: 6px 10px; color: var(--ink-2); }
  .ql-snow .ql-picker-item:hover { background: var(--surface-2); color: var(--brand); }
  .ql-snow .ql-color-picker .ql-picker-item { border-radius: 5px; padding: 0; margin: 2px; }
  .rte { border: 0; }
  .rte-wrap .ql-container.ql-snow { border: 0; font-family: inherit; font-size: var(--fs-0); color: var(--ink); }
  .rte-wrap .ql-editor { min-height: 380px; padding: 22px 24px 28px; line-height: 1.7; color: var(--ink); }
  .rte-wrap .ql-editor.ql-blank::before { color: var(--ink-4); font-style: normal; left: 24px; right: 24px; }
  .rte-wrap .ql-editor ::selection { background: color-mix(in srgb, var(--brand) 24%, transparent); }
  .rte-wrap .ql-editor h1, .rte-wrap .ql-editor h2, .rte-wrap .ql-editor h3 { color: var(--heading); font-family: var(--font-display); }
  .rte-wrap .ql-editor h1 { font-size: 1.6em; } .rte-wrap .ql-editor h2 { font-size: 1.35em; } .rte-wrap .ql-editor h3 { font-size: 1.15em; }
  .rte-wrap .ql-editor blockquote { border-left: 3px solid var(--brand-tint-2); color: var(--ink-2); padding-left: 14px; }
  .rte-wrap .ql-editor pre.ql-syntax { background: var(--surface-2); color: var(--ink); border: 1px solid var(--border); border-radius: var(--r-sm); }
  .rte-wrap .ql-editor a { color: var(--brand); }
  .rte-wrap .ql-editor li[data-list="checked"] > .ql-ui::before { color: var(--success-ink); }
  .rte-wrap.rte-wrap-mini .ql-editor { min-height: 130px; padding: 14px 16px; }
  .rte-wrap.rte-wrap-mini .ql-toolbar.ql-snow { position: static; backdrop-filter: none; background: var(--surface-2); }
  .rte-wrap.rte-wrap-line .ql-editor { min-height: 46px; padding: 11px 14px; white-space: nowrap; overflow-x: auto; }
  .rte-wrap.rte-wrap-line .ql-editor p { margin: 0; }
  .rte-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px; border-top: 1px solid var(--border); background: var(--surface-2); font-size: var(--fs--2); color: var(--ink-3); }
  .rte-foot kbd { font-family: var(--font-mono); font-size: .7rem; padding: 1px 6px; border: 1px solid var(--border-strong); border-radius: 5px; background: var(--surface); color: var(--ink-2); }
  .ql-snow .ql-tooltip { background: var(--surface); border: 1px solid var(--border); color: var(--ink); box-shadow: var(--shadow-lg); border-radius: var(--r-md); padding: 8px 12px; z-index: 90; }
  .ql-snow .ql-tooltip::before { color: var(--ink-3); }
  .ql-snow .ql-tooltip input[type=text] { border: 1px solid var(--border-strong); border-radius: 8px; color: var(--ink); background: var(--surface); height: 32px; padding: 0 8px; font-family: inherit; }
  .ql-snow .ql-tooltip a.ql-action::after, .ql-snow .ql-tooltip a.ql-remove::before { color: var(--brand); }
  .ql-snow .ql-tooltip a.ql-preview { color: var(--brand); }
  .ql-editor .ql-caption, .rich .ql-caption { text-align: center; font-size: .86em; color: var(--ink-3); font-style: italic; margin-top: -4px; }
  .ql-editor img, .rich img { max-width: 100%; height: auto; border-radius: 10px; display: block; margin: 10px auto 6px; }
  .section-title-input { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-2); border: 0; border-bottom: 2px dashed transparent; background: transparent; padding: 2px 0; min-width: 0; flex: 1; color: var(--heading); }
  .section-title-input:hover, .section-title-input:focus { border-bottom-color: var(--brand-tint-2); outline: none; }
  .bstep-add { border: 1px dashed var(--border-strong); color: var(--brand); }
  .bstep-add .bstep-num { border-style: dashed; color: var(--brand); }

  /* Mentions: chips in the editor, the preview and the PDF-like views */
  .mention, .ql-mention-list-container { font-family: inherit; }
  .mention { display: inline-flex; align-items: center; gap: 2px; width: auto; height: auto; margin-right: 2px; padding: 1px 8px 1px 6px; border-radius: var(--r-pill); background: var(--brand-tint); color: var(--brand-ink); font-weight: 600; font-size: .92em; line-height: 1.5; white-space: nowrap; }
  .mention > span { margin: 0; }
  .mention[data-denotation-char="#"] { background: #fbf3df; color: #7a5a0a; }
  .mention .ql-mention-denotation-char { opacity: .7; }
  .ql-mention-list-container { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 4px; max-height: 280px; overflow: auto; width: 300px; z-index: 95; }
  .ql-mention-list { list-style: none; margin: 0; padding: 0; }
  .ql-mention-list-item { padding: 0; border-radius: var(--r-sm); cursor: pointer; line-height: 1.3; }
  .ql-mention-list-item.selected { background: var(--brand-tint); color: inherit; }
  .mention-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
  .mi-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: var(--on-brand); display: grid; place-items: center; font-weight: 700; font-size: .8rem; flex: none; }
  .kind-institution .mi-avatar { background: #8a6a12; } .kind-email .mi-avatar { background: var(--ink-3); }
  .mi-text { display: flex; flex-direction: column; min-width: 0; } .mi-text strong { font-size: var(--fs--1); } .mi-text small { color: var(--ink-3); font-size: var(--fs--2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Rendered rich text (preview, tables) */
  .rich { line-height: 1.6; overflow-wrap: anywhere; }
  .rich p { margin: 0 0 .6em; } .rich p:last-child { margin-bottom: 0; }
  .rich h1 { font-size: 1.35em; margin: .8em 0 .3em; } .rich h2 { font-size: 1.2em; margin: .8em 0 .3em; } .rich h3 { font-size: 1.05em; margin: .7em 0 .3em; }
  .rich ol, .rich ul { padding-left: 1.5em; margin: 0 0 .6em; }
  .rich li[data-list="bullet"] { list-style-type: disc; } .rich li[data-list="ordered"] { list-style-type: decimal; }
  .rich li[data-list="checked"], .rich li[data-list="unchecked"] { list-style: none; margin-left: -1.4em; }
  .rich li[data-list="checked"]::before { content: "☑ "; color: var(--success-ink); } .rich li[data-list="unchecked"]::before { content: "☐ "; }
  .rich .ql-indent-1 { padding-left: 2.5em; } .rich .ql-indent-2 { padding-left: 5em; } .rich .ql-indent-3 { padding-left: 7.5em; }
  .rich .ql-align-center { text-align: center; } .rich .ql-align-right { text-align: right; } .rich .ql-align-justify { text-align: justify; }
  .rich blockquote { border-left: 3px solid var(--brand-tint-2); margin: .6em 0; padding: 4px 14px; color: var(--ink-2); }
  .rich pre, .rich .ql-syntax { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px 12px; font-family: var(--font-mono); font-size: .9em; white-space: pre-wrap; }
  .rich a { color: var(--brand); text-decoration: underline; }
  .rich-sm { font-size: var(--fs--1); }
  .ai-table td { vertical-align: top; } .ai-actions { white-space: nowrap; } .ai-actions form { display: inline-block; }
  .ai-form { border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px 16px; background: var(--surface-2); }
  .ai-form-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }

  /* People lists */
  .people-list { gap: 6px; }
  .person-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
  .person-row .avatar { width: 30px; height: 30px; font-size: .75rem; flex: none; }
  .person-row .avatar-muted { background: var(--surface-2); color: var(--ink-3); }
  .person-text { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.25; }
  .person-text strong { font-size: var(--fs--1); } .person-text small { color: var(--ink-3); font-size: var(--fs--2); }

  /* Version timeline + diffs */
  .rev-timeline { list-style: none; margin: 0; padding: 0 0 0 6px; border-left: 2px solid var(--border); display: grid; gap: 14px; }
  .rev-item { position: relative; display: flex; gap: 12px; align-items: flex-start; padding-left: 16px; }
  .rev-dot { position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--brand); border: 2px solid var(--surface); box-shadow: 0 0 0 2px var(--brand-tint-2); }
  .rev-item:first-child .rev-dot { background: var(--success); box-shadow: 0 0 0 2px var(--success-soft); }
  .rev-main { flex: 1; min-width: 0; } .rev-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .rev-note { font-size: var(--fs--1); color: var(--ink-2); }
  .rev-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
  .rev-chip { font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: var(--r-pill); background: var(--brand-tint); color: var(--brand); }
  .rev-actions { display: flex; gap: 6px; flex: none; }
  .rev-change { border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 12px; }
  .rev-change-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
  .rev-diff { font-size: var(--fs--1); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
  .rev-diff ins, .diff-key ins { background: var(--success-soft); color: var(--success-ink); text-decoration: none; border-radius: 3px; padding: 0 2px; }
  .rev-diff del, .diff-key del { background: var(--danger-soft); color: var(--danger); text-decoration: line-through; border-radius: 3px; padding: 0 2px; }
  .rev-cols { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; } .rev-text { white-space: pre-wrap; font-family: inherit; font-size: var(--fs--1); background: var(--surface-2); border-radius: var(--r-sm); padding: 8px 10px; margin: 4px 0 0; }

  /* Document-style preview */
  .doc { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-sm); padding: clamp(20px, 4vw, 48px) clamp(16px, 5vw, 56px); max-width: 980px; margin: 0 auto; }
  .doc-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
  .doc-logos { display: flex; gap: 18px; align-items: center; } .doc-logos img { height: 48px; }
  .doc-meta { font-size: var(--fs--2); color: var(--ink-3); text-align: right; }
  .doc-title { border-left: 4px solid var(--brand); padding: 2px 0 2px 16px; margin-bottom: 22px; }
  .doc-kind { color: var(--brand); font-family: var(--font-display); font-size: clamp(1.4rem, 2.6vw, 1.8rem); font-weight: 800; line-height: 1.15; }
  .doc-name { margin-top: 4px; font-size: var(--fs-0); } .doc-name .lbl { color: var(--ink-3); font-weight: 700; margin-right: 6px; }
  .doc .facts { width: 100%; border-collapse: collapse; margin: 0 0 24px; border-top: 2px solid var(--brand); border-bottom: 1px solid var(--brand-tint-2); }
  .doc .facts td { width: 33.3%; padding: 10px 14px 10px 0; vertical-align: top; border-bottom: 1px solid var(--border); }
  .doc .facts tr:last-child td { border-bottom: 0; } .doc .facts td + td { padding-left: 14px; border-left: 1px solid var(--border); }
  .doc .facts .lbl { display: block; font-size: .64rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); margin-bottom: 3px; }
  .doc .facts .val { display: block; font-weight: 700; color: var(--heading); } .doc .facts .sub { display: block; font-size: var(--fs--2); color: var(--ink-3); margin-top: 2px; }
  .doc-section { margin: 22px 0; } .doc-section h2 { color: var(--brand); font-size: var(--fs-1); padding-bottom: 4px; border-bottom: 2px solid var(--brand); display: inline-block; margin: 0 0 10px; }
  .doc-center { display: block !important; text-align: center; border-bottom: 0 !important; }
  .doc-table { width: 100%; border-collapse: collapse; font-size: var(--fs--1); }
  .doc-table th { background: var(--brand); color: var(--on-brand); text-align: left; padding: 9px 10px; font-size: var(--fs--2); letter-spacing: .02em; }
  .doc-table td { padding: 9px 10px; border: 1px solid var(--border); vertical-align: top; }
  .doc-table tbody tr:nth-child(even) td { background: var(--surface-2); }
  .doc-sig { height: 40px; max-width: 120px; } .doc-typed { font-family: "Snell Roundhand", "Brush Script MT", cursive; font-size: 1.2em; color: #0f245a; }
  .ds-block { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; background: var(--surface); }
  .ds-img { flex: none; width: 90px; display: grid; place-items: center; border-right: 1px solid var(--border); padding-right: 8px; }
  .ds-img .doc-sig { height: 34px; max-width: 80px; }
  .ds-text { display: flex; flex-direction: column; line-height: 1.3; font-size: .72rem; color: var(--ink-2); min-width: 0; }
  .ds-text > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ds-text .ds-by { color: var(--brand); font-weight: 700; font-size: .68rem; letter-spacing: .02em; }
  .ds-text strong { color: var(--heading); font-size: .78rem; }
  .ds-text .ds-date { font-family: var(--font-mono); font-size: .66rem; color: var(--ink-3); }
  @media (max-width: 700px) { .doc .facts, .doc .facts tr, .doc .facts td { display: block; width: 100%; } .doc .facts td + td { padding-left: 0; border-left: 0; } .rev-cols { grid-template-columns: 1fr; } .doc-table { display: block; overflow-x: auto; } }
}

/* -----------------------------------------------------------------------------
   15. Locked attendance panel, Events attended filters, people picker
   ----------------------------------------------------------------------------- */
@layer components {
  .locked-panel { border: 1px solid var(--border); border-radius: var(--r-lg); background: linear-gradient(180deg, var(--surface-2), var(--surface)); padding: 16px; }
  .locked-head { display: flex; align-items: flex-start; gap: 12px; }
  .locked-ico { width: 42px; height: 42px; border-radius: 12px; background: var(--brand-tint); color: var(--brand); display: grid; place-items: center; flex: none; }
  .locked-ico .ico { width: 22px; height: 22px; }
  .locked-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; }
  .locked-stats > div { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 12px; display: flex; flex-direction: column; }
  .locked-stats .n { font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; color: var(--heading); line-height: 1.1; }
  .locked-stats .l { font-size: var(--fs--2); color: var(--ink-3); font-weight: 600; }
  .locked-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; color: var(--ink-2); }
  .locked-list li { display: flex; gap: 8px; align-items: flex-start; }
  .locked-list .ico { width: 16px; height: 16px; color: var(--success-ink); flex: none; margin-top: 2px; }

  .ma-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 18px; }
  .ma-filters input[type="search"] { flex: 1 1 220px; min-height: 42px; }
  .ma-filters select { min-height: 42px; max-width: 200px; }
  .ma-filters .checkbox-row { margin: 0; min-height: 42px; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); font-weight: 600; font-size: var(--fs--1); }
  .ma-count { font-size: var(--fs--1); color: var(--ink-3); margin: -8px 0 12px; }

  .people-picker { display: grid; gap: 6px; }
  .pp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .pp-chips:empty { display: none; }
  .pp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border-radius: var(--r-pill); background: var(--brand-tint); color: var(--brand-ink); font-size: var(--fs--1); font-weight: 600; }
  .pp-chip.is-email { background: var(--surface-2); color: var(--ink-2); }
  .pp-chip button { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: inherit; font-size: .8rem; }
  .pp-chip button:hover { background: rgba(0,0,0,.08); }
}

/* -----------------------------------------------------------------------------
   16. Document signing: list, prepare workspace, signing page, verification
   ----------------------------------------------------------------------------- */
@layer components {
  .sg-avatar { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--c, var(--brand)) 16%, var(--surface)); color: var(--c, var(--brand)); font-weight: 800; font-size: .7rem; border: 2px solid var(--c, var(--brand)); flex: none; letter-spacing: .02em; }
  .sg-avatar.sg-signed { background: var(--c, var(--brand)); color: #fff; }
  .sg-avatar.sg-declined { border-color: var(--danger); color: var(--danger); background: var(--danger-soft); }
  .sg-avatar.sg-pending { opacity: .6; }
  .needs-me { border: 1px solid var(--brand-tint-2); background: var(--brand-tint); border-radius: var(--r-lg); padding: 14px 16px; margin-bottom: 16px; }
  .needs-me-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
  .pulse-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--brand); animation: nmpulse 1.6s infinite; }
  @keyframes nmpulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 40%, transparent); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
  .needs-me-list { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
  .needs-me-item { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 12px; }
  .nm-ico { width: 36px; height: 36px; border-radius: 10px; background: var(--brand); color: #fff; display: grid; place-items: center; flex: none; }
  .nm-ico .ico { width: 18px; height: 18px; }
  .nm-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .nm-main strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25; }
  .doc-tabs .tab-btn { text-decoration: none; }
  .doc-list { display: grid; gap: 10px; }
  .doc-row { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1.6fr) minmax(120px, 1fr) minmax(120px, .8fr) auto; gap: 14px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 12px 14px 12px 18px; box-shadow: var(--shadow-xs); }
  .doc-row::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 5px; border-radius: 16px 0 0 16px; background: var(--brand-300); }
  .doc-row.st-sent::before { background: var(--brand); }
  .doc-row.st-completed::before, .doc-row.st-finalized::before { background: var(--success); }
  .doc-row.st-declined::before { background: var(--danger); }
  .doc-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--brand-tint); color: var(--brand); display: grid; place-items: center; }
  .doc-ico .ico { width: 20px; height: 20px; }
  .doc-main { min-width: 0; }
  .doc-title { display: block; font-weight: 700; color: var(--heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .doc-title:hover { color: var(--brand); text-decoration: none; }
  .doc-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 3px; }
  .doc-signers { display: flex; gap: 4px; flex-wrap: wrap; }
  .doc-progress { display: flex; flex-direction: column; gap: 4px; }
  .prog { display: block; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
  .prog > span { display: block; height: 100%; background: var(--brand); border-radius: 3px; transition: width .4s var(--ease); }
  @media (max-width: 820px) { .doc-row { grid-template-columns: 44px 1fr auto; } .doc-signers, .doc-progress { grid-column: 2 / -1; } }
  .steps-inline { list-style: none; display: flex; gap: 14px; padding: 0; margin: 0 0 16px; font-size: var(--fs--1); color: var(--ink-3); font-weight: 600; flex-wrap: wrap; }
  .steps-inline li { display: inline-flex; align-items: center; gap: 6px; }
  .steps-inline span { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; border: 1.5px solid var(--border-strong); font-size: .72rem; }
  .steps-inline li.on { color: var(--brand); }
  .steps-inline li.on span { background: var(--brand); border-color: var(--brand); color: #fff; }

  /* Prepare workspace */
  .prep-shell { display: grid; gap: 14px; grid-template-columns: 1fr; align-items: start; }
  @media (min-width: 1000px) {
    .prep-shell { grid-template-columns: 320px minmax(0, 1fr); gap: 18px; }
    .prep-side { position: sticky; top: calc(var(--topbar-h) + 14px); max-height: calc(100vh - var(--topbar-h) - 28px); overflow: auto; }
  }
  .prep-side { display: grid; gap: 12px; }
  .signer-list { display: grid; gap: 6px; margin-bottom: 10px; }
  .signer-row { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--border); border-radius: var(--r-md); }
  .signer-row:has(input:checked) { border-color: var(--c); background: color-mix(in srgb, var(--c) 8%, var(--surface)); }
  .signer-pick { cursor: pointer; position: relative; }
  .signer-pick input { position: absolute; opacity: 0; pointer-events: none; }
  .signer-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
  .signer-text strong { font-size: var(--fs--1); }
  .signer-text small { color: var(--ink-3); font-size: var(--fs--2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .signer-text .warn { color: var(--warning-ink); }
  .signer-add { display: grid; gap: 6px; }
  .palette { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .pal { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); font-weight: 600; font-size: var(--fs--1); color: var(--ink-2); cursor: grab; }
  .pal:hover { border-color: var(--brand); color: var(--brand); }
  .pal.active { background: var(--brand-tint); border-color: var(--brand); color: var(--brand); }
  .pal .ico { width: 16px; height: 16px; }
  .pal-glyph { width: 16px; text-align: center; font-weight: 800; font-size: .8rem; }
  .prep-toolbar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); margin-bottom: 10px; }
  .zoom { display: flex; align-items: center; gap: 6px; font-size: var(--fs--1); }
  .zoom .icon-btn { width: 30px; height: 30px; border: 1px solid var(--border-strong); border-radius: 8px; }
  .pdf-pages { display: flex; flex-direction: column; align-items: center; gap: 16px; }
  .pdf-stage.drop { outline: 3px dashed var(--brand); outline-offset: -3px; }
  .page-no { position: absolute; right: 8px; bottom: 8px; font-size: .68rem; color: var(--ink-4); background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; }
  .pf { position: absolute; display: flex; align-items: center; justify-content: center; border: 2px solid var(--c, var(--brand)); background: color-mix(in srgb, var(--c, var(--brand)) 14%, transparent); border-radius: 6px; font-size: .68rem; font-weight: 700; color: var(--c, var(--brand)); cursor: move; touch-action: none; user-select: none; }
  .pf:hover { background: color-mix(in srgb, var(--c, var(--brand)) 22%, transparent); }
  .pf-label { padding: 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pf-resize { position: absolute; right: -6px; bottom: -6px; width: 12px; height: 12px; border-radius: 3px; background: var(--c, var(--brand)); cursor: nwse-resize; }
  .pf-x { position: absolute; top: -9px; right: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--danger); color: #fff; font-size: 10px; display: grid; place-items: center; }
  .pf-locked { cursor: not-allowed; border-style: solid; border-color: color-mix(in srgb, var(--c, var(--brand)) 55%, transparent); background: color-mix(in srgb, var(--c, var(--brand)) 6%, #fff); }
  .pf-locked img { max-width: 94%; max-height: 90%; object-fit: contain; }
  .signer-row.is-signed { opacity: .85; }
  .prep-banner { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin-bottom: 14px; border: 1px solid var(--warning); background: var(--warning-soft); border-radius: var(--r-md); font-size: var(--fs--1); color: var(--ink); }
  .prep-banner .ico { width: 18px; height: 18px; color: var(--warning-ink); flex: none; margin-top: 1px; }
  .field-pop { position: absolute; z-index: 120; width: 280px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 12px; display: grid; gap: 8px; }
  .field-pop label { display: grid; gap: 4px; font-weight: 600; color: var(--ink-2); }
  .field-pop select, .field-pop input[type=text] { min-height: 36px; }
  .field-pop .checkbox-row { display: flex; align-items: center; gap: 8px; }
  .field-pop-head { display: flex; justify-content: space-between; align-items: center; }
  .send-signers { display: flex; flex-wrap: wrap; gap: 6px; }
  .send-signer { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: var(--r-pill); border: 1px solid var(--border); font-size: var(--fs--1); font-weight: 600; }
  .send-signer .sg-avatar { width: 24px; height: 24px; font-size: .6rem; }

  /* Tracking page */
  .doc-hero { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px 20px; margin-bottom: 14px; box-shadow: var(--shadow-xs); }
  .doc-hero-title { margin: 6px 0 0; font-size: var(--fs-3); }
  .doc-hero-progress { display: flex; align-items: center; gap: 14px; }
  .ring { --p: 0; width: 64px; height: 64px; border-radius: 50%; background: conic-gradient(var(--brand) calc(var(--p) * 1%), var(--surface-2) 0); display: grid; place-items: center; flex: none; }
  .ring span { width: 50px; height: 50px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font-weight: 800; font-family: var(--font-display); font-size: .9rem; color: var(--heading); }
  .doc-grid { display: grid; gap: 14px; grid-template-columns: 1fr; align-items: start; }
  @media (min-width: 1000px) { .doc-grid { grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); } }
  .signer-track { display: grid; gap: 8px; }
  .st-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-md); }
  .st-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
  .st-text small { color: var(--ink-3); font-size: var(--fs--2); }
  .st-meta { margin-top: 2px; }
  .verify-box { display: flex; gap: 14px; align-items: flex-start; }
  .verify-qr { width: 96px; height: 96px; border: 1px solid var(--border); border-radius: 10px; padding: 4px; background: #fff; flex: none; }
  .verify-id { font-size: var(--fs-1); font-weight: 700; color: var(--heading); letter-spacing: .04em; margin: 2px 0 6px; }
  .sgf-empty { position: absolute; border: 1.5px dashed var(--c, var(--brand)); border-radius: 4px; font-size: .6rem; color: var(--c, var(--brand)); display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--c, var(--brand)) 6%, transparent); overflow: hidden; }

  /* Signing page */
  .sg { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
  .sg-top { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 18px; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
  .sg-kicker { font-size: var(--fs--2); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
  .sg-title { font-size: var(--fs-1); margin: 0; line-height: 1.2; }
  .sg-top-side { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
  .sg-who { display: flex; align-items: center; gap: 8px; }
  .sg-who-text { display: flex; flex-direction: column; line-height: 1.2; font-size: var(--fs--1); }
  .sg-who-text small { color: var(--ink-3); font-size: var(--fs--2); }
  .sg-progress { display: flex; align-items: center; gap: 8px; min-width: 160px; }
  .sg-progress .prog { flex: 1; }
  .sg-top-actions { display: flex; gap: 6px; }
  .sg-note { display: flex; gap: 12px; margin: 14px auto 0; max-width: 920px; width: calc(100% - 32px); padding: 12px 14px; border: 1px solid var(--brand-tint-2); background: var(--brand-tint); border-radius: var(--r-md); font-size: var(--fs--1); }
  .sg-note .ico { width: 18px; height: 18px; color: var(--brand); flex: none; margin-top: 2px; }
  .sg-note p { margin: 2px 0 0; }
  .sg-body { display: grid; grid-template-columns: 1fr; gap: 16px; padding: 16px; flex: 1; align-items: start; }
  @media (min-width: 1060px) { .sg-body { grid-template-columns: 280px minmax(0, 1fr); padding: 18px 24px 40px; } }
  .sg-side { display: none; }
  @media (min-width: 1060px) { .sg-side { display: block; position: sticky; top: 86px; } }
  .sg-main { min-width: 0; }
  .sg-pages { display: flex; flex-direction: column; align-items: center; gap: 18px; padding-bottom: 90px; }
  .sg-loading { padding: 40px; color: var(--ink-3); }
  .sg-fieldlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
  .sg-fieldlist li { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--r-sm); cursor: pointer; }
  .sg-fieldlist li:hover { background: var(--surface-2); }
  .sg-fieldlist li.done .fnum { background: var(--success); border-color: var(--success); color: #fff; }
  .sgl-text { flex: 1; display: flex; flex-direction: column; line-height: 1.2; font-size: var(--fs--1); }
  .sgl-text small { color: var(--ink-3); font-size: var(--fs--2); }
  .sgl-state { color: var(--success-ink); font-weight: 800; }
  .sgf { position: absolute; display: flex; align-items: center; justify-content: center; border-radius: 5px; overflow: hidden; }
  .sgf img { max-width: 96%; max-height: 92%; object-fit: contain; }
  .sgf-other { border: 1.5px solid color-mix(in srgb, var(--c) 50%, transparent); background: color-mix(in srgb, var(--c) 6%, transparent); color: var(--c); font-size: .62rem; }
  .sgf-mine { border: 2px solid var(--brand); background: color-mix(in srgb, var(--brand) 14%, #fff); color: var(--brand); cursor: pointer; box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 12%, transparent); transition: box-shadow var(--t), background var(--t); }
  .sgf-mine:hover, .sgf-mine:focus-visible { background: color-mix(in srgb, var(--brand) 22%, #fff); outline: none; }
  .sgf-mine.done { border-color: var(--success); background: color-mix(in srgb, var(--success) 8%, #fff); box-shadow: none; }
  .sgf-mine.pulse { animation: sgfpulse 1.2s ease-out; }
  @keyframes sgfpulse { 0% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 40%, transparent); } 100% { box-shadow: 0 0 0 18px transparent; } }
  .sgf-tag { font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: var(--r-pill); background: var(--brand); color: #fff; white-space: nowrap; }
  .sgf-check { font-size: 1rem; font-weight: 800; color: var(--success-ink); }
  .sgf-input { width: 100%; height: 100%; border: 0; background: transparent; padding: 0 6px; font-size: .8rem; color: #0f2450; min-height: 0; }
  .sgf-input:focus { outline: none; }
  .sg-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -8px 24px rgba(16, 24, 40, .08); }
  @media (min-width: 1060px) { .sg-bar { display: none; } }
  .btn.ready { animation: readyglow 1.6s ease-in-out infinite; }
  @keyframes readyglow { 0%, 100% { box-shadow: var(--shadow-brand); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand) 22%, transparent); } }
  .hide-sm { display: inline; }
  .show-sm { display: none; }
  @media (max-width: 640px) { .hide-sm { display: none; } .show-sm { display: inline; } .sg-progress { display: none; } .sg-top { padding: 10px 12px; } }
  .sheet-backdrop { position: fixed; inset: 0; z-index: 110; background: rgba(10, 16, 30, .5); display: none; align-items: flex-end; justify-content: center; }
  .sheet-backdrop.open { display: flex; animation: fadein .15s ease; }
  .sheet { width: 100%; max-width: 560px; background: var(--surface); border-radius: 22px 22px 0 0; padding: 10px 18px calc(20px + env(safe-area-inset-bottom)); box-shadow: var(--shadow-lg); animation: sheetup .25s var(--ease); max-height: 92vh; overflow: auto; }
  @media (min-width: 720px) { .sheet-backdrop { align-items: center; padding: 20px; } .sheet { border-radius: 22px; } .sheet-handle { display: none; } }
  @keyframes sheetup { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
  .sheet-handle { width: 44px; height: 5px; border-radius: 3px; background: var(--border-strong); margin: 4px auto 10px; }
  .sheet-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
  .sheet-head h3 { margin: 0; }
  body.sheet-open { overflow: hidden; }
  .sg-pad { position: relative; height: 200px; border: 1.5px dashed var(--border-strong); border-radius: var(--r-md); background: #fff; touch-action: none; }
  .sg-pad canvas { width: 100%; height: 100%; display: block; border-radius: var(--r-md); }
  .sg-pad-hint { position: absolute; inset: 0; display: grid; place-items: center; color: #94a3b8; pointer-events: none; font-size: var(--fs--1); }
  .sg-typed-preview { margin-top: 10px; padding: 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: #fff; color: #0f2450; font-family: "Snell Roundhand", "Brush Script MT", "Apple Chancery", cursive; font-size: 2rem; min-height: 72px; }
  .sg-saved { padding: 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: #fff; display: grid; place-items: center; }
  .sg-saved img { max-height: 90px; }
  .sg-upload { width: 100%; min-height: 90px; display: grid; place-items: center; text-align: center; padding: 14px; }
  .sg-summary { margin: 0; padding-left: 18px; font-size: var(--fs--1); color: var(--ink-2); }
  .done-card { text-align: center; margin-top: 40px; }
  .done-check { width: 72px; height: 72px; margin: 0 auto 14px; border-radius: 50%; background: var(--success-soft); color: var(--success-ink); display: grid; place-items: center; animation: popin .5s cubic-bezier(.2, .9, .3, 1.3) both; }
  .done-check .ico { width: 36px; height: 36px; }
  .done-check.muted-disc { background: var(--surface-2); color: var(--ink-3); }
  @keyframes popin { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } }
  .done-progress { display: grid; gap: 6px; max-width: 320px; margin: 14px auto; }
  .done-next { text-align: left; margin: 14px auto 0; max-width: 420px; padding-left: 18px; color: var(--ink-2); }

  /* Verification */
  .vf-hero { display: flex; gap: 16px; align-items: flex-start; padding: 22px; border-radius: var(--r-lg); margin: 20px 0 14px; color: #fff; background: linear-gradient(135deg, var(--brand-900), var(--brand-600)); }
  .vf-hero.bad { background: linear-gradient(135deg, #7a1f1f, #c2410c); }
  .vf-icon { width: 56px; height: 56px; border-radius: 16px; background: rgba(255, 255, 255, .16); display: grid; place-items: center; flex: none; }
  .vf-icon .ico { width: 28px; height: 28px; }
  .vf-kicker { font-size: var(--fs--2); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
  .vf-hero h1 { color: #fff; margin: 4px 0 6px; }
  .vf-hero p { margin: 0; opacity: .92; }
  .vf-card { margin-bottom: 14px; }
  .vf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px 20px; }
  .vf-grid > div { display: flex; flex-direction: column; gap: 3px; }
  .vf-hash { margin-top: 14px; display: flex; flex-direction: column; gap: 4px; }
  .vf-hash code { word-break: break-all; font-size: var(--fs--2); background: var(--surface-2); padding: 6px 8px; border-radius: var(--r-sm); }
  .vf .card { margin-bottom: 14px; }
  .verify-entry { display: grid; gap: 14px; }
  .verify-or { text-align: center; color: var(--ink-4); font-size: var(--fs--1); font-weight: 700; letter-spacing: .1em; }
  .code-input { display: flex; gap: 8px; }
  .code-input input { flex: 1; font-family: var(--font-mono); letter-spacing: .08em; text-transform: uppercase; min-height: 46px; }
}

/* -----------------------------------------------------------------------------
   17. Quick Sign — upload, live signature block, done
----------------------------------------------------------------------------- */
@layer components {
  .qs-steps { list-style: none; display: flex; gap: 6px; padding: 0; margin: 0 0 18px; font-size: var(--fs--1); font-weight: 600; color: var(--ink-3); overflow-x: auto; }
  .qs-steps li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); white-space: nowrap; }
  .qs-steps li span { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; border: 1.5px solid var(--border-strong); font-size: .72rem; }
  .qs-steps li.on { color: var(--brand); border-color: var(--brand); background: var(--brand-tint); }
  .qs-steps li.on span, .qs-steps li.done span { background: var(--brand); border-color: var(--brand); color: #fff; }
  .qs-steps li.done { color: var(--ink-2); }
  .qs-steps em { font-style: normal; }
  @media (max-width: 640px) { .qs-steps li:not(.on) em { display: none; } .qs-steps li:not(.on) { padding: 8px; } }
  .qs-upload-grid { display: grid; gap: 16px; grid-template-columns: 1fr; align-items: start; }
  @media (min-width: 960px) { .qs-upload-grid { grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); } }
  .qs .dz { min-height: 150px; }
  .qs-recent { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
  .qs-recent:last-of-type { border-bottom: 0; }
  .qs-recent-main { flex: 1; min-width: 0; display: grid; }
  .qs-recent-main strong { font-size: var(--fs--1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .qs-recent-main small { color: var(--ink-3); font-size: .74rem; }
  .prep-stage { min-width: 0; }
  .qs .pdf-stage { cursor: crosshair; max-width: 100%; }
  .qs .pdf-stage canvas { width: 100%; height: auto; }
  .qs-block { position: absolute; display: flex; gap: 2.5%; align-items: stretch; padding: 1.2% 1.6%; border: 2px solid var(--brand); border-radius: 6px; background: rgba(255, 255, 255, .96); box-shadow: 0 0 0 4px rgba(2, 71, 141, .12), var(--shadow-md); cursor: move; touch-action: none; user-select: none; container-type: size; overflow: hidden; }
  .qs-block-sig { flex: 0 0 32%; display: grid; place-items: center; border-right: 1px solid #d5dfeb; padding-right: 2%; min-width: 0; }
  .qs-block-sig img { max-width: 100%; max-height: 100%; object-fit: contain; }
  .qs-block-typed { font-family: "Snell Roundhand", "Brush Script MT", "Apple Chancery", cursive; color: #0f2450; font-size: 38cqh; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .qs-block-empty { font-size: 18cqh; color: #94a3b8; }
  .qs-block-text { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2cqh; line-height: 1.1; color: #1f2937; }
  .qs-block-text > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12.5cqh; line-height: 1.15; }
  .qs-block-text .b { color: var(--brand); font-weight: 700; font-size: 12.5cqh; }
  .qs-block-text strong { font-size: 15cqh; font-weight: 700; }
  .qs-block-text .d { color: #64748b; font-size: 11cqh; }
  .qs-block-sig { flex-basis: 32%; }
  .qs-block-qr { flex: 0 0 auto; height: 72%; aspect-ratio: 1; align-self: center; border: 1.5px dashed #94a3b8; border-radius: 3px; display: grid; place-items: center; font-size: 14cqh; font-weight: 700; color: #94a3b8; background: repeating-linear-gradient(45deg, transparent 0 4px, rgba(148, 163, 184, .18) 4px 6px); }
  .qs-block .pf-x { display: grid; }
  .qs-block .pf-resize { right: -7px; bottom: -7px; width: 14px; height: 14px; }
  .qs .sg-pad { height: 130px; }
  .qs .sg-saved img { max-height: 70px; }
  .qs .prep-toolbar > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .qs-bar { display: none; }
  @media (max-width: 959px) {
    .qs-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--border); box-shadow: var(--shadow-lg); }
    .qs-bar[hidden] { display: none; }
    .qs .prep-side { padding-bottom: 64px; }
  }
  .qs .sg-typed-preview { font-size: 1.6rem; min-height: 60px; }
  .qs .done-card { margin-top: 0; }
  @media (max-width: 959px) {
    .qs .prep-side { order: 2; }
    .qs .prep-stage { order: 1; }
    .qs .prep-shell { display: flex; flex-direction: column; align-items: stretch; }
    .qs .prep-stage, .qs .prep-side { width: 100%; }
  }
}

/* -----------------------------------------------------------------------------
   18. In-app PDF viewer (inline + modal), document tabs, verify layout
----------------------------------------------------------------------------- */
@layer components {
  .pv { --pv-h: clamp(420px, 72vh, 920px); display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); overflow: hidden; min-width: 0; }
  .pv-bar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--surface); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
  .pv-title { font-weight: 600; font-size: var(--fs--1); flex: 1 1 120px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pv-nav, .pv-zoom { display: flex; align-items: center; gap: 4px; }
  .pv-page { font-size: var(--fs--1); color: var(--ink-2); min-width: 92px; text-align: center; }
  .pv-fit { min-height: 30px; padding: 0 9px; border: 1px solid var(--border-strong); border-radius: 8px; font-size: .78rem; font-weight: 600; color: var(--ink-2); background: var(--surface); }
  .pv .icon-btn { width: 30px; height: 30px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); }
  .pv .icon-btn:disabled { opacity: .4; cursor: default; }
  .pv-body { height: var(--pv-h); overflow: auto; padding: 12px; outline: none; overscroll-behavior: contain; scroll-behavior: smooth; }
  .pv-body:focus-visible { box-shadow: inset 0 0 0 2px var(--brand); }
  .pv-pages { display: flex; flex-direction: column; align-items: center; gap: 14px; }
  .pv-stage { max-width: 100%; }
  .pv-stage canvas { width: 100%; height: auto; display: block; }
  .pv-loading { padding: 40px 16px; color: var(--ink-3); text-align: center; }
  .pv-modal { align-items: center !important; padding: 12px !important; }
  .pv-dialog { width: min(1120px, 100%); }
  .pv-dialog.pv { background: var(--surface); box-shadow: var(--shadow-lg); border-radius: var(--r-lg); }
  .pv-close { margin-left: 2px; }
  body.modal-open { overflow: hidden; }
  .doc-view-tabs { display: flex; gap: 4px; padding: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-pill); }
  .doc-view-tabs button { min-height: 28px; padding: 0 12px; border-radius: var(--r-pill); font-size: var(--fs--1); font-weight: 600; color: var(--ink-2); }
  .doc-view-tabs button.active { background: var(--surface); color: var(--brand); box-shadow: var(--shadow-sm); }
  .vf-layout { display: grid; gap: 14px; grid-template-columns: 1fr; align-items: start; }
  @media (min-width: 960px) { .vf-layout { grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); } }
  .vf-signers { margin-bottom: 14px; }
  .vf-signer-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); }
  .vf-signer-grid .st-row { flex-wrap: wrap; }
  .vf-signer-grid .st-text { flex: 1 1 180px; }
  .vf-signer-grid .st-text small, .vf-signer-grid .st-text strong { overflow-wrap: anywhere; }
  .vf-table { table-layout: fixed; width: 100%; }
  .vf-table td, .vf-table th { overflow-wrap: anywhere; }
  @media (max-width: 640px) { .pv-page { min-width: 70px; } .pv-bar { gap: 6px; } }
}

/* -----------------------------------------------------------------------------
   19. Mobile-first shell: compact top bar, navigation drawer, tab bar with a
   create sheet, action strips, sheet-style dialogs, touch targets, danger zone
----------------------------------------------------------------------------- */
@layer tokens {
  @media (max-width: 999px) { :root { --topbar-h: 56px; } }
}
@layer patterns {
  /* ---- Top bar (phones & tablets) ---- */
  @media (max-width: 999px) {
    .navbar-inner { gap: 6px; }
    .brand { font-size: 1.05rem; }
    .topbar-user { display: inline-flex; padding: 2px; border: 0; }
    .topbar-user-name { display: none; }
    .theme-toggle { width: 42px; height: 42px; }
  }

  /* ---- Navigation drawer ---- */
  .drawer-backdrop { position: fixed; inset: 0; z-index: 125; background: rgba(10, 16, 30, .48); opacity: 0; pointer-events: none; transition: opacity .22s ease; }
  .snav-mobile { display: none; }
  /* the logo lives at the top of the sidebar on every page (desktop); the top bar's brand steps aside */
  @media (min-width: 1000px) {
    .snav-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--border); }
    body:has(.sidenav) .navbar .brand { display: none; }
    html.snav-hidden .snav-head { padding: 2px 0 10px; justify-content: center; }
    html.snav-hidden .snav-head .brand { gap: 0; font-size: 0; }
    html.snav-hidden .snav-head .brand-text { display: none; }
  }
  @media (max-width: 999px) {
    .sidenav { display: flex; flex-direction: column; gap: 2px; position: fixed; top: 0; bottom: 0; left: 0; width: min(86vw, 330px); z-index: 130; background: var(--surface); border-right: 1px solid var(--border); padding: 0 12px calc(16px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; transform: translateX(-104%); visibility: hidden; transition: transform .28s var(--ease), visibility 0s linear .28s; }
    html.drawer-open .sidenav { transform: none; visibility: visible; box-shadow: var(--shadow-lg); transition: transform .28s var(--ease), visibility 0s; }
    html.drawer-open .drawer-backdrop { opacity: 1; pointer-events: auto; }
    html.drawer-open, html.drawer-open body { overflow: hidden; }
    .snav-mobile { display: flex; }
    .snav-head { align-items: center; justify-content: space-between; gap: 10px; padding: calc(12px + env(safe-area-inset-top)) 2px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); z-index: 1; }
    .snav-foot { margin-top: auto; flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 2px 0; border-top: 1px solid var(--border); }
    .snav-user { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--r-md); color: var(--ink); min-width: 0; }
    .snav-user:hover { background: var(--surface-2); text-decoration: none; }
    .snav-user .avatar { width: 40px; height: 40px; flex: none; }
    .snav-user strong { display: block; font-size: var(--fs--1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .snav-user small { display: block; color: var(--ink-3); font-size: var(--fs--2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .snav-link { padding: 12px; min-height: 48px; font-size: 1rem; }
    .snav-label { padding-top: 16px; }
    body:has(.sidenav) main, body:has(.sidenav) .wizard-top { margin-left: 0; }
  }

  /* ---- Tab bar ---- */
  @media (max-width: 999px) {
    .tabbar { padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); gap: 2px; justify-content: space-between; }
    .tabbar a, .tabbar button { flex: 1 1 0; min-width: 0; min-height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: .68rem; font-weight: 600; color: var(--ink-3); padding: 4px 2px; border: 0; background: transparent; font-family: inherit; border-radius: var(--r-md); -webkit-tap-highlight-color: transparent; }
    .tabbar a span, .tabbar button span { width: 46px; height: 28px; border-radius: 999px; display: inline-grid; place-items: center; transition: background .15s ease, transform .15s ease; }
    .tabbar a.active { color: var(--brand); }
    .tabbar a.active span { background: var(--brand-tint); }
    .tabbar a:active span, .tabbar button:active span { transform: scale(.92); }
    .tabbar .tab-cta { flex: 0 0 58px; width: 58px; height: 58px; min-height: 58px; margin-top: -26px; border-radius: 50%; background: var(--brand); color: #fff; box-shadow: var(--shadow-brand); border: 4px solid var(--bg); }
    .tabbar .tab-cta span { width: auto; height: auto; background: transparent !important; }
    .tabbar .tab-cta .ico { width: 26px; height: 26px; }
    body:has(.tabbar) main { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
  }

  /* ---- Create sheet ---- */
  .sheet-actions { display: grid; gap: 8px; }
  .sheet-action { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: var(--r-md); color: var(--ink); min-height: 64px; background: var(--surface); }
  .sheet-action:hover, .sheet-action:focus-visible { background: var(--surface-2); border-color: var(--border-strong); text-decoration: none; }
  .sa-ico { width: 44px; height: 44px; border-radius: 13px; background: var(--brand-tint); color: var(--brand); display: grid; place-items: center; flex: none; }
  .sa-ico .ico { width: 21px; height: 21px; }
  .sa-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
  .sa-text strong { font-size: var(--fs-0); }
  .sa-text small { color: var(--ink-3); font-size: var(--fs--2); }
  .sa-arrow { width: 16px; height: 16px; color: var(--ink-4); transform: rotate(-90deg); flex: none; }
}
@layer components {
  .snav-toggle { display: inline-grid; }
  @media (max-width: 999px) { .snav-toggle { width: 42px; height: 42px; border: 1px solid var(--border); background: var(--surface); } }

  /* ---- Page headers become title + horizontally scrolling action strip ---- */
  @media (max-width: 760px) {
    .page-header, .dash-head, .detail-top { align-items: flex-start; row-gap: 8px; }
    .page-header > .row, .dash-head > .row, .detail-top > .row { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) 6px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
    .page-header > .row::-webkit-scrollbar, .dash-head > .row::-webkit-scrollbar, .detail-top > .row::-webkit-scrollbar { display: none; }
    .page-header > .row > *, .dash-head > .row > *, .detail-top > .row > * { flex: none; scroll-snap-align: start; }
    /* the primary action is last in the markup — show it first on phones */
    .page-header > .row, .dash-head > .row { flex-direction: row-reverse; justify-content: flex-end; }
    .page-header h1 { font-size: 1.4rem; }
    .filters { gap: 8px; }
    .filters > input[type="search"] { flex: 1 1 100%; max-width: none; }
    .filters > .pill-nav { flex: 1 1 100%; margin-bottom: 0; }
    .filters > .nav-spacer { display: none; }
    .filters > .btn, .filters > .filter-pop { flex: 1 1 auto; }
    .filters > .filter-pop .filter-btn { width: 100%; justify-content: space-between; }
  }

  /* ---- Dialogs and modals slide up as sheets on phones ---- */
  @media (max-width: 639px) {
    .modal-backdrop { align-items: flex-end; padding: 0; }
    .modal-backdrop .modal { width: 100%; max-width: none; border-radius: 22px 22px 0 0; max-height: 92dvh; padding-bottom: calc(18px + env(safe-area-inset-bottom)); animation: sheetup .22s var(--ease); }
    .modal-backdrop .modal::before { content: ""; display: block; width: 44px; height: 5px; border-radius: 3px; background: var(--border-strong); margin: -6px auto 12px; }
    .pv-modal .pv-dialog::before { display: none; }
    .af-dialog .dlg-actions { flex-direction: column-reverse; align-items: stretch; }
    .af-dialog .dlg-actions .btn { width: 100%; min-height: 48px; }
    .modal > form > .row > .btn, .modal > .row > .btn { flex: 1 1 auto; min-height: 46px; }
  }

  /* ---- Touch targets and density ---- */
  @media (max-width: 999px) {
    .btn { min-height: 44px; }
    .btn-sm { min-height: 40px; }
    .icon-btn { width: 44px; height: 44px; }
    .card-pad, .card-body { padding: 14px; }
    .card-header { padding: 12px 14px; }
    .page { padding-top: 14px; }
    .menu-list button, .menu-list a { min-height: 44px; }
    .pill-nav { width: 100%; }
    .pill-nav button.tab-btn, .pill-nav a { flex: 1; justify-content: center; }
    .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .messages { top: calc(var(--topbar-h) + 8px); }
  }
  @media (hover: none) { .btn:hover { transform: none; } }
  @media (min-width: 761px) { .filters-search { max-width: 260px; } }

  /* ---- Document rows and "needs me" items stack on phones ---- */
  .doc-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
  @media (max-width: 640px) {
    .doc-row { grid-template-columns: 44px minmax(0, 1fr); gap: 10px 12px; padding: 12px; }
    .doc-signers, .doc-progress { grid-column: 2 / -1; }
    .doc-actions { grid-column: 1 / -1; justify-content: flex-start; padding-top: 2px; border-top: 1px dashed var(--border); margin-top: 2px; padding-top: 10px; }
    .doc-actions .btn { flex: 1 1 auto; }
    .needs-me-item { flex-wrap: wrap; }
    .needs-me-item .btn { flex: 1 1 100%; }
  }

  /* ---- Danger zone ---- */
  .danger-zone { border-color: color-mix(in srgb, var(--danger) 30%, var(--border)); }
  .danger-zone .card-header { border-bottom-color: color-mix(in srgb, var(--danger) 18%, var(--border)); }
  .danger-zone .card-header h3 { color: var(--danger-ink); display: inline-flex; align-items: center; gap: 8px; }
  .danger-zone .card-header h3 .ico { width: 16px; height: 16px; }
  .danger-row { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
  .danger-row p { margin: 0; color: var(--ink-2); font-size: var(--fs--1); flex: 1 1 220px; }
  .danger-row .btn { flex: none; }
  @media (max-width: 639px) { .danger-row .btn { flex: 1 1 100%; } }
}

/* -----------------------------------------------------------------------------
   20. PDF tools: hub, editor, split, merge, PDF → image, background remover
----------------------------------------------------------------------------- */
@layer components {
  /* hub */
  .tool-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
  .tool-card { display: flex; align-items: center; gap: 14px; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); color: var(--ink); box-shadow: var(--shadow-sm); transition: transform var(--t) var(--ease), box-shadow var(--t), border-color var(--t); min-height: 92px; }
  .tool-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-strong); text-decoration: none; }
  .tool-ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; flex: none; background: var(--brand-tint); color: var(--brand); }
  .tool-ico .ico { width: 22px; height: 22px; }
  .tool-split .tool-ico { background: #e9f7ef; color: #15803d; } .tool-merge .tool-ico { background: #f3e8ff; color: #7c3aed; } .tool-image .tool-ico { background: #fff0da; color: #b45309; } .tool-background .tool-ico { background: #fde7f1; color: #be185d; } .tool-imgedit .tool-ico { background: #e0f2fe; color: #0369a1; } .tool-imgpdf .tool-ico { background: #ecfccb; color: #4d7c0f; }
  .tool-text { flex: 1; min-width: 0; display: grid; gap: 3px; }
  .tool-text strong { font-size: var(--fs-0); }
  .tool-text small { color: var(--ink-3); font-size: var(--fs--2); line-height: 1.35; }
  .tool-arrow { width: 16px; height: 16px; color: var(--ink-4); transform: rotate(-90deg); flex: none; }
  .job-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--border); margin: 0; }
  .job-row:first-child { border-top: 0; }
  .job-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
  .job-main strong { font-size: var(--fs--1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .job-main small { color: var(--ink-3); font-size: var(--fs--2); }
  .mg-pick { cursor: pointer; }
  .mg-pick input { flex: none; }
  .part-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); margin-top: 8px; }
  .part-card { padding: 14px; display: grid; gap: 12px; }
  .part-head { display: flex; align-items: center; gap: 10px; }
  .part-no { width: 32px; height: 32px; border-radius: 10px; background: var(--brand-tint); color: var(--brand); display: grid; place-items: center; font-weight: 800; flex: none; }
  .part-main { min-width: 0; display: grid; } .part-main strong { font-size: var(--fs--1); overflow-wrap: anywhere; } .part-main small { color: var(--ink-3); font-size: var(--fs--2); }
  .part-actions { display: flex; flex-wrap: wrap; gap: 6px; }

  /* editor */
  .ed { --ed-side: 180px; display: flex; flex-direction: column; min-height: calc(100dvh - var(--topbar-h)); background: var(--surface-2); }
  .ed-tools { display: flex; align-items: center; gap: 4px; padding: 8px var(--gutter); background: var(--surface); border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; position: sticky; top: var(--topbar-h); z-index: 60; }
  .ed-tools::-webkit-scrollbar { display: none; }
  .ed-tool { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 60px; min-height: 48px; padding: 4px 8px; border-radius: var(--r-md); font-size: .66rem; font-weight: 600; color: var(--ink-2); border: 1px solid transparent; flex: none; }
  .ed-tool .ico { width: 18px; height: 18px; } .ed-glyph { font-size: 1rem; line-height: 18px; height: 18px; font-weight: 800; }
  .ed-glyph.ed-cover { color: var(--ink); background: #fff; border: 1px solid var(--border-strong); line-height: 14px; padding: 0 3px; border-radius: 3px; font-size: .8rem; }
  .ed-glyph.ed-hl { background: #fde047; line-height: 14px; padding: 0 3px; border-radius: 3px; color: #fde047; font-size: .8rem; }
  .ed-tool:hover { background: var(--surface-2); } .ed-tool.active { background: var(--brand-tint); color: var(--brand); border-color: color-mix(in srgb, var(--brand) 30%, transparent); }
  .ed-sep { width: 1px; height: 32px; background: var(--border); margin: 0 6px; flex: none; }
  .ed-tools .zoom { margin-left: auto; flex: none; }
  .ed-shell { flex: 1; display: grid; grid-template-columns: var(--ed-side) minmax(0, 1fr); gap: 0; align-items: stretch; }
  .ed.has-props .ed-shell { grid-template-columns: var(--ed-side) minmax(0, 1fr) 280px; }
  .ed-pages { border-right: 1px solid var(--border); background: var(--surface); padding: 12px; overflow-y: auto; max-height: calc(100dvh - var(--topbar-h) - 64px); position: sticky; top: calc(var(--topbar-h) + 64px); }
  .ed-pages-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 10px; font-size: var(--fs--1); }
  .ed-thumbs { display: grid; gap: 10px; }
  .ed-thumb { display: grid; gap: 4px; }
  .ed-thumb-pic { position: relative; cursor: pointer; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: #fff; }
  .ed-thumb-pic canvas { display: block; width: 100%; height: auto; }
  .ed-thumb-pic span { position: absolute; left: 6px; bottom: 6px; font-size: .64rem; font-weight: 700; background: var(--surface); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; }
  .ed-thumb-actions { display: flex; gap: 2px; justify-content: center; }
  .ed-thumb-actions button { width: 30px; height: 28px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); font-size: .8rem; color: var(--ink-2); }
  .ed-thumb-actions button:hover { background: var(--surface-2); color: var(--heading); } .ed-thumb-actions button.danger { color: var(--danger); }
  .ed-stage-wrap { padding: 16px; overflow: auto; }
  .ed-stages { display: flex; flex-direction: column; align-items: center; gap: 18px; }
  .ed-stage { position: relative; background: #fff; box-shadow: var(--shadow-md); border-radius: 4px; }
  .ed-stage canvas { display: block; width: 100%; height: 100%; }
  .ed-stage.ed-blank canvas { background: #fff; }
  .ed-layer { position: absolute; inset: 0; }
  .ed-crosshair .ed-layer { cursor: crosshair; }
  .ed-ghost { position: absolute; border: 1.5px dashed var(--brand); background: color-mix(in srgb, var(--brand) 10%, transparent); pointer-events: none; }
  .ed-el { position: absolute; box-sizing: border-box; border: 1px solid transparent; cursor: move; touch-action: none; user-select: none; }
  .ed-el:hover { border-color: color-mix(in srgb, var(--brand) 40%, transparent); }
  .ed-el.selected { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
  .ed-el .ed-handle { display: none; } .ed-el.selected .ed-handle { display: block; }
  .ed-inner { width: 100%; height: 100%; overflow: hidden; }
  .ed-text { width: 100%; height: 100%; outline: none; padding: 2px; font-family: Helvetica, Arial, sans-serif; line-height: 1.25; color: #111827; white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; cursor: text; }
  .ed-text:empty::before { content: attr(data-placeholder); color: #9ca3af; }
  .ed-table { width: 100%; height: 100%; border-collapse: collapse; table-layout: fixed; font-family: Helvetica, Arial, sans-serif; }
  .ed-table td { border: 1px solid var(--border, #9ca3af); padding: 2px 3px; outline: none; vertical-align: top; overflow-wrap: anywhere; user-select: text; cursor: text; }
  .ed-table tr.head td { background: #edf2f8; font-weight: 700; }
  .ed-image img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
  .ed-check-glyph { display: grid; place-items: center; font-weight: 800; line-height: 1; font-size: 400%; }
  .ed-line { border: 0 !important; box-shadow: none !important; } .ed-line.selected .ed-svg { filter: drop-shadow(0 0 2px var(--brand)); }
  .ed-svg { width: 100%; height: 100%; display: block; }
  .ed-props { border-left: 1px solid var(--border); background: var(--surface); padding: 14px; position: sticky; top: calc(var(--topbar-h) + 64px); max-height: calc(100dvh - var(--topbar-h) - 64px); overflow-y: auto; }
  .ed-props-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
  .ed-field { margin-bottom: 10px; } .ed-field label { display: block; font-size: var(--fs--2); font-weight: 600; color: var(--ink-3); margin-bottom: 4px; }
  .ed-field input[type="number"] { width: 90px; } .ed-field input[type="color"] { width: 44px; height: 34px; padding: 2px; }
  .ed-hint { position: sticky; bottom: 0; padding: 8px var(--gutter) calc(8px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--border); font-size: var(--fs--1); color: var(--ink-2); }
  @media (max-width: 999px) {
    .ed-shell, .ed.has-props .ed-shell { grid-template-columns: 1fr; }
    .ed-pages { display: none; position: fixed; left: 0; right: 0; bottom: 0; top: auto; max-height: 50dvh; z-index: 95; border: 0; border-top: 1px solid var(--border); box-shadow: var(--shadow-lg); border-radius: 18px 18px 0 0; }
    .ed-pages.open { display: block; }
    .ed-thumbs { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
    .ed-props { position: fixed; left: 0; right: 0; bottom: 0; top: auto; max-height: 55dvh; z-index: 96; border: 0; border-top: 1px solid var(--border); box-shadow: var(--shadow-lg); border-radius: 18px 18px 0 0; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
    .ed-stage-wrap { padding: 10px; }
    .ed-tools { top: var(--topbar-h); }
  }

  /* split */
  .sp-shell { display: grid; gap: 16px; grid-template-columns: 1fr; align-items: start; }
  @media (min-width: 960px) { .sp-shell { grid-template-columns: 320px minmax(0, 1fr); } .sp-side { position: sticky; top: calc(var(--topbar-h) + 14px); max-height: calc(100vh - var(--topbar-h) - 28px); overflow: auto; } }
  .sp-side { display: grid; gap: 12px; }
  .sp-modes { display: grid; gap: 6px; }
  .sp-mode { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border: 1px solid var(--border); border-radius: var(--r-md); cursor: pointer; }
  .sp-mode:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); }
  .sp-mode input { margin-top: 3px; } .sp-mode strong { display: block; font-size: var(--fs--1); } .sp-mode small { color: var(--ink-3); font-size: var(--fs--2); }
  .sp-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .sp-tile { position: relative; padding: 0; border: 2px solid var(--border); border-radius: 8px; background: #fff; overflow: hidden; cursor: pointer; text-align: left; transition: transform .12s ease, border-color .12s ease; --c: transparent; }
  .sp-tile canvas { display: block; width: 100%; height: auto; }
  .sp-tile:hover { transform: translateY(-2px); border-color: var(--border-strong); }
  .sp-tile.in { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 20%, transparent); }
  .sp-tile.out canvas { opacity: .45; }
  .sp-tile.current { outline: 2px dashed var(--c); outline-offset: 3px; }
  .sp-page { position: absolute; left: 6px; bottom: 6px; font-size: .66rem; font-weight: 700; background: var(--surface); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; color: var(--ink-2); }
  .sp-tag { position: absolute; right: 6px; top: 6px; font-size: .62rem; font-weight: 800; background: var(--c); color: #fff; border-radius: 999px; padding: 2px 8px; }
  .sp-parts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
  .sp-parts li { display: grid; grid-template-columns: 14px 1fr; gap: 4px 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--border); }
  .sp-parts li:first-child { border-top: 0; }
  .sp-parts li.active input { border-color: var(--c); }
  .sp-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c); cursor: pointer; }
  .sp-parts input { min-height: 34px; font-size: var(--fs--1); padding: 4px 8px; }
  .sp-parts small { grid-column: 2; color: var(--ink-3); font-size: var(--fs--2); }
  .sp .qs-bar { display: none; }
  @media (max-width: 959px) { .sp .qs-bar { display: flex; } }

  /* merge */
  .mg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
  .mg-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); cursor: grab; }
  .mg-item.dragging { opacity: .5; } .mg-item.over { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
  .mg-grip { color: var(--ink-4); font-size: .8rem; letter-spacing: -2px; }
  .mg-no { width: 26px; height: 26px; border-radius: 8px; background: var(--brand-tint); color: var(--brand); font-weight: 800; font-size: .8rem; display: grid; place-items: center; flex: none; }
  .mg-main { flex: 1; min-width: 0; display: grid; } .mg-main strong { font-size: var(--fs--1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mg-main small { color: var(--ink-3); font-size: var(--fs--2); }
  .mg-actions { display: flex; gap: 2px; } .mg-actions button { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--ink-2); } .mg-actions button.danger { color: var(--danger); }

  /* pdf → image, background */
  .p2i-shell { display: grid; gap: 16px; grid-template-columns: 1fr; align-items: start; margin-top: 16px; }
  @media (min-width: 960px) { .p2i-shell { grid-template-columns: 340px minmax(0, 1fr); } }
  .p2i-preview { background: repeating-conic-gradient(var(--surface-3) 0 25%, var(--surface) 0 50%) 0 0 / 20px 20px; border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px; display: grid; place-items: center; max-height: 70vh; overflow: auto; }
  .p2i-preview img { max-width: 100%; height: auto; display: block; box-shadow: var(--shadow-md); }
  .bg-card { overflow: hidden; }
  .bg-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-bottom: 1px solid var(--border); }
  .bg-top .sig-tabs { margin: 0; }
  .bg-top-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
  .bg-backdrops { display: flex; gap: 6px; }
  .bg-bd { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--border-strong); cursor: pointer; padding: 0; background: repeating-conic-gradient(#d9dee8 0 25%, #f6f7fb 0 50%) 0 0 / 8px 8px; }
  .bg-bd[data-backdrop="white"] { background: #fff; } .bg-bd[data-backdrop="dark"] { background: #111827; } .bg-bd[data-backdrop="brand"] { background: var(--brand); }
  .bg-bd.active { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
  .bg-stage { position: relative; display: grid; place-items: center; height: clamp(320px, 58vh, 680px); padding: 14px; overflow: hidden; transition: background .2s ease; }
  .bg-stage[data-backdrop="checker"] { background: repeating-conic-gradient(#d9dee8 0 25%, #f6f7fb 0 50%) 0 0 / 20px 20px; }
  .bg-stage[data-backdrop="white"] { background: #fff; } .bg-stage[data-backdrop="dark"] { background: #111827; } .bg-stage[data-backdrop="brand"] { background: var(--brand); }
  .bg-stage.drag { outline: 3px dashed var(--brand); outline-offset: -8px; }
  .bg-frame { position: relative; display: grid; max-width: 100%; max-height: 100%; width: auto; height: auto; }
  .bg-frame canvas { grid-area: 1 / 1; display: block; max-width: 100%; max-height: calc(clamp(320px, 58vh, 680px) - 28px); width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 8px 20px rgba(2, 20, 50, .18)); }
  .bg-frame[hidden] { display: none; }
  .bg-stage[data-view="before"] #bg-after, .bg-stage[data-view="after"] #bg-before { display: none; }
  .bg-stage.picking #bg-before { cursor: crosshair; }
  .bg-divider { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); pointer-events: none; }
  .bg-divider i { position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-md); }
  .bg-divider i::before { content: "◀ ▶"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 10px; color: var(--brand); letter-spacing: 1px; }
  .bg-compare { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; background: transparent; }
  .bg-compare::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 100%; }
  .bg-frame canvas { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; }
  .bg-stage.zoomed { overflow: auto; place-items: start; }
  .bg-stage.zoomed .bg-frame { max-width: none; max-height: none; margin: auto; }
  .bg-zoom { display: inline-flex; align-items: center; gap: 2px; }
  .bg-zoom .icon-btn { width: 32px; height: 32px; }
  .bg-zoom .btn { min-width: 48px; padding: 0 8px; }
  .bg-empty { position: absolute; inset: 14px; display: grid; place-content: center; justify-items: center; gap: 6px; text-align: center; border: 2px dashed var(--border-strong); border-radius: var(--r-md); background: color-mix(in srgb, var(--surface) 80%, transparent); cursor: pointer; padding: 20px; }
  .bg-empty:hover { border-color: var(--brand); }
  .bg-empty input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
  .bg-empty-ico { width: 52px; height: 52px; border-radius: 16px; background: var(--brand-tint); color: var(--brand); display: grid; place-items: center; margin-bottom: 4px; }
  .bg-empty-ico .ico { width: 26px; height: 26px; }
  .bg-busy { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; background: color-mix(in srgb, var(--surface) 70%, transparent); backdrop-filter: blur(2px); font-weight: 600; color: var(--heading); }
  .bg-busy[hidden], .bg-flash[hidden] { display: none; }
  .bg-busy .spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border-strong); border-top-color: var(--brand); animation: bg-spin .8s linear infinite; }
  @keyframes bg-spin { to { transform: rotate(360deg); } }
  .bg-flash { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); background: var(--success); color: #fff; font-weight: 700; font-size: var(--fs--1); padding: 8px 14px; border-radius: 999px; box-shadow: var(--shadow-md); white-space: nowrap; max-width: calc(100% - 28px); overflow: hidden; text-overflow: ellipsis; animation: bg-flash-in .35s var(--ease) both; }
  @keyframes bg-flash-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
  .bg-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 12px 14px; border-top: 1px solid var(--border); }
  .bg-actions[hidden] { display: none; }
  .bg-go-card { border-color: var(--brand-tint-2, var(--border)); background: var(--brand-tint); }
  .bg-go-card .help { color: var(--ink-2); }
  @media (max-width: 959px) { .bg-stage { height: clamp(260px, 50vh, 520px); } .bg-frame canvas { max-height: calc(clamp(260px, 50vh, 520px) - 28px); } .bg-top { padding: 10px 12px; } .bg-actions .btn { flex: 1 1 45%; } .bgr .p2i-side { padding-bottom: 80px; } }
  @media (max-width: 480px) { .bg-top-right { width: 100%; justify-content: space-between; } }
  .bg-swatch { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--border-strong); background: #fff; flex: none; }
  .bg-recent { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .bg-recent-item { display: grid; gap: 4px; text-align: center; color: var(--ink-3); font-size: var(--fs--2); }
  .bg-recent-item img { width: 100%; aspect-ratio: 1; object-fit: contain; background: repeating-conic-gradient(#d9dee8 0 25%, #f6f7fb 0 50%) 0 0 / 12px 12px; border: 1px solid var(--border); border-radius: 10px; padding: 6px; }
}
@layer patterns {
  .snav-sub { padding-left: 24px; font-size: var(--fs--1); }
  .snav-sub .snav-ico .ico { width: 16px; height: 16px; }
  @media (max-width: 999px) { .snav-sub { padding-left: 28px; } }
  /* collapsible group (PDF tools) */
  .snav-group { display: grid; }
  .snav-row { display: flex; align-items: center; gap: 2px; }
  .snav-row .snav-link { flex: 1 1 auto; min-width: 0; }
  .snav-caret { flex: none; width: 34px; height: 34px; border: 0; background: transparent; color: var(--ink-4); border-radius: var(--r-sm); display: grid; place-items: center; cursor: pointer; transition: background var(--t-fast), color var(--t-fast); }
  .snav-caret .ico { width: 16px; height: 16px; transform: rotate(-90deg); transition: transform .22s var(--ease); }
  .snav-caret:hover { background: var(--surface-2); color: var(--heading); }
  .snav-group.open .snav-caret .ico { transform: rotate(0deg); }
  .snav-children { position: relative; display: grid; gap: 1px; margin: 0 0 0 22px; padding-left: 8px; max-height: 0; opacity: 0; visibility: hidden; overflow: hidden; transition: max-height .28s var(--ease), opacity .2s ease, visibility 0s linear .28s; }
  .snav-children::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: var(--border); }
  .snav-group.open .snav-children { max-height: 360px; opacity: 1; visibility: visible; transition: max-height .28s var(--ease), opacity .2s ease .05s, visibility 0s; }
  .snav-children .snav-sub { padding-left: 10px; padding-top: 8px; padding-bottom: 8px; }
  .snav-children .snav-sub.active::before { left: -10px; }
  .snav-children .snav-sub.active { background: transparent; }
  .snav-children .snav-sub.active .snav-ico { color: var(--brand); }
  @media (max-width: 999px) { .snav-children .snav-sub { padding-left: 12px; } .snav-caret { width: 44px; height: 44px; } }
}
@layer components {
  @media (max-width: 640px) {
    .wizard-kicker { display: none; }
    .wizard-label { min-width: 0; }
    .wizard-title { font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
    .wizard-top-inner .btn-sm { white-space: nowrap; }
  }
}
@layer components {
  .tool-card .badge { flex: none; }
  @media (max-width: 520px) { .tool-card .badge { display: none; } }
}
@layer components {
  /* editable text passages detected in the PDF */
  .ed-hit { position: absolute; padding: 0; border: 1.5px dashed transparent; border-radius: 3px; background: transparent; cursor: text; pointer-events: none; transition: border-color .12s, background .12s; }
  .ed-hits-on .ed-hit { pointer-events: auto; border-color: color-mix(in srgb, var(--brand) 40%, transparent); background: color-mix(in srgb, var(--brand) 3%, transparent); }
  .ed-hits-on .ed-hit:hover, .ed-hits-on .ed-hit:focus-visible { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, transparent); outline: none; }
  .ed-mode-edit .ed-el:not(.ed-textblock):not(.ed-table) { opacity: .85; }
  .ed-mode-edit .ed-rich, .ed-mode-edit .ed-table td { cursor: text; }
  .ed:not(.ed-mode-edit) .ed-rich, .ed:not(.ed-mode-edit) .ed-table td { cursor: move; user-select: none; }
  .ed-rich { width: 100%; height: 100%; outline: none; padding: 1px 2px; color: #111827; white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; cursor: text; }
  .ed-rich:empty::before { content: attr(data-placeholder); color: #9ca3af; }
  .ed-rich ul, .ed-rich ol { margin: 0; padding-left: 1.2em; }
  .ed-font-sans { font-family: Helvetica, Arial, sans-serif; } .ed-font-serif { font-family: "Times New Roman", Times, serif; } .ed-font-mono { font-family: "Courier New", Courier, monospace; }
  .ed-inner.ed-covered { background: #fff; }
  .ed-textblock.selected { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent), 0 8px 24px -12px rgba(2, 71, 141, .5); }
}
@layer components {
  /* editor top bar: mode switch + (arrange tools | formatting ribbon) */
  .ed-topbar { position: sticky; top: var(--topbar-h); z-index: 60; display: flex; align-items: center; gap: 10px; padding: 6px var(--gutter); background: var(--surface); border-bottom: 1px solid var(--border); }
  .ed-topbar .ed-tools { position: static; padding: 0; border: 0; flex: 1; min-width: 0; }
  .ed-modes { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-pill); flex: none; }
  .ed-modes button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: var(--r-pill); font-weight: 700; font-size: var(--fs--1); color: var(--ink-2); white-space: nowrap; }
  .ed-modes button .ico { width: 16px; height: 16px; } .ed-modes button .ed-glyph { font-size: .85rem; height: auto; line-height: 1; }
  .ed-modes button.active { background: var(--brand); color: #fff; box-shadow: var(--shadow-sm); }
  .ed-ribbon { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
  .ed-ribbon::-webkit-scrollbar { display: none; }
  .ed-rg { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); flex: none; }
  .ed-rg button { min-width: 32px; height: 32px; padding: 0 6px; border-radius: 7px; font-size: .9rem; color: var(--ink); border: 1px solid transparent; font-family: inherit; display: inline-flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; }
  .ed-rg button:hover:not(:disabled) { background: var(--surface-2); }
  .ed-rg button.active { background: var(--brand-tint); color: var(--brand); border-color: color-mix(in srgb, var(--brand) 30%, transparent); }
  .ed-rg button:disabled, .ed-rg select:disabled, .ed-rg input:disabled { opacity: .45; cursor: not-allowed; }
  .ed-rg select { min-height: 32px; padding: 4px 22px 4px 6px; font-size: .82rem; width: auto; border-radius: 7px; border-color: transparent; background-color: transparent; }
  .ed-rg small { font-size: .7rem; }
  .ed-rt-color { position: relative; width: 32px; height: 32px; border-radius: 7px; display: grid; place-items: center; font-weight: 800; cursor: pointer; flex: none; }
  .ed-rt-color input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
  .ed-rt-color span { pointer-events: none; line-height: 1; }
  .ed-rb-a { border-bottom: 3px solid var(--brand); }
  .ed-rb-hl { background: #fde047; padding: 1px 3px; border-radius: 3px; font-weight: 700; font-size: .8rem; color: #1f2937; }
  .ed-rb-cover { padding: 0 8px; white-space: nowrap; }
  .ed-rb-done { flex: none; }
  .ed-mode-edit.has-props-text .ed-props { display: none; }
  .ed-mode-edit.has-props-text .ed-shell { grid-template-columns: var(--ed-side) minmax(0, 1fr); }
  @media (max-width: 999px) {
    .ed-topbar { flex-wrap: wrap; gap: 6px; padding: 6px var(--gutter); }
    .ed-modes { width: 100%; } .ed-modes button { flex: 1; justify-content: center; }
    .ed-topbar .ed-tools { width: 100%; }
    .ed-ribbon { flex: 1 1 0; min-width: 0; }
    .ed-rb-done { margin-left: auto; }
  }
}
@layer components {
  /* PDF → image refinements */
  .p2i .qs-steps { margin-bottom: 16px; }
  .p2i-layouts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .p2i-layouts button { display: grid; justify-items: center; gap: 6px; padding: 10px 6px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); font-size: var(--fs--2); font-weight: 600; color: var(--ink-2); }
  .p2i-layouts button.active { border-color: var(--brand); background: var(--brand-tint); color: var(--brand); }
  .lay { display: grid; gap: 2px; width: 30px; height: 30px; }
  .lay i { background: currentColor; opacity: .55; border-radius: 2px; }
  .lay-stack { grid-template-rows: repeat(3, 1fr); } .lay-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; } .lay-row { grid-template-columns: repeat(3, 1fr); }
  .p2i-progress { margin-top: 10px; display: grid; gap: 4px; }
  .p2i-progress .bar { height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
  .p2i-progress .bar span { display: block; height: 100%; width: 0; background: var(--brand); transition: width .2s ease; }
  .p2i-progress small { color: var(--ink-3); font-size: var(--fs--2); }
  .p2i-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
  .p2i-actions .btn { flex: 1 1 160px; }
  .p2i-each { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
  .p2i-chip { display: grid; justify-items: center; gap: 4px; padding: 6px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); color: var(--ink-2); font-size: var(--fs--2); font-weight: 600; width: 96px; }
  .p2i-chip canvas { width: 80px; height: auto; display: block; border: 1px solid var(--border); background: #fff; }
  .p2i-chip:hover { border-color: var(--brand); text-decoration: none; color: var(--brand); }
  .p2i .qs-bar { display: none; }
  @media (max-width: 959px) { .p2i .qs-bar:not([hidden]) { display: flex; } .p2i-shell { display: flex; flex-direction: column; } .p2i-side { order: 2; } .p2i-main { order: 1; } .p2i-side { padding-bottom: 70px; } }
  @media (min-width: 960px) { .p2i-shell { grid-template-columns: minmax(0, 1fr) 340px; } .p2i-side { order: 2; position: sticky; top: calc(var(--topbar-h) + 14px); } }
}

/* -----------------------------------------------------------------------------
   21. Document library: rail, chips, bulk move; merge page board
----------------------------------------------------------------------------- */
@layer components {
  .lib { display: grid; gap: 16px; grid-template-columns: 1fr; align-items: start; }
  @media (min-width: 1000px) { .lib { grid-template-columns: 250px minmax(0, 1fr); } .lib-rail { position: sticky; top: calc(var(--topbar-h) + 14px); max-height: calc(100vh - var(--topbar-h) - 28px); overflow: auto; } .show-lib-sheet { display: none; } }
  @media (max-width: 999px) { .lib > .lib-rail { display: none; } }
  .lib-rail { display: grid; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 10px; }
  .lib-group { display: grid; gap: 2px; }
  .lib-group-title { font-size: var(--fs--2); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); padding: 6px 10px 4px; }
  .lib-link { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: var(--r-sm); color: var(--ink-2); font-weight: 600; font-size: var(--fs--1); min-height: 38px; }
  .lib-link .ico { width: 16px; height: 16px; color: var(--ink-4); flex: none; }
  .lib-link:hover { background: var(--surface-2); text-decoration: none; color: var(--heading); }
  .lib-link.active { background: var(--brand-tint); color: var(--brand); } .lib-link.active .ico { color: currentColor; }
  .lib-count { margin-left: auto; font-size: var(--fs--2); color: var(--ink-4); font-variant-numeric: tabular-nums; }
  .lib-count.warn { background: var(--warning-soft); color: var(--warning-ink); border-radius: 999px; padding: 1px 8px; font-weight: 700; }
  .lib-count.on { margin-left: 2px; background: var(--brand); color: #fff; border-radius: 999px; padding: 1px 8px; font-weight: 700; }
  .lib-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; } .lib-dot.gray { background: var(--ink-4); } .lib-dot.blue { background: var(--brand); } .lib-dot.green { background: var(--success); }
  .lib-folder { padding-left: calc(10px + var(--depth, 0) * 14px); }
  .lib-folder-ico { color: var(--brand); display: inline-grid; place-items: center; }
  .lib-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
  .lib-toolbar .show-lib-sheet { order: -1; flex: 1 1 100%; justify-content: center; }
  @media (min-width: 640px) { .lib-toolbar .show-lib-sheet { flex: 0 0 auto; } }
  .lib-search { flex: 1 1 280px; position: relative; }
  .lib-search .ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--ink-4); pointer-events: none; }
  .lib-search input { padding-left: 38px; width: 100%; }
  .lib-sort { display: flex; align-items: center; gap: 6px; }
  .lib-sort select { width: auto; min-height: 42px; }
  .lib-sort .icon-btn { border: 1px solid var(--border-strong); border-radius: var(--r-sm); width: 42px; height: 42px; font-size: 1rem; }
  .lib-crumbs { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
  .crumbs { font-size: var(--fs--1); color: var(--ink-3); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  .crumbs .sep { color: var(--ink-4); } .crumbs strong { color: var(--heading); }
  .chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--brand-tint); color: var(--brand); font-size: var(--fs--1); font-weight: 600; }
  .chip a { color: inherit; opacity: .7; } .chip a:hover { opacity: 1; text-decoration: none; }
  .lib-list { display: grid; gap: 10px; }
  .lib-list .doc-row { grid-template-columns: 28px 44px minmax(0, 1fr) minmax(72px, auto) 120px auto; }
  .lib-list .doc-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; overflow-wrap: anywhere; }
  .sg-avatar.sg-none { background: var(--surface-2); color: var(--ink-4); border: 1px dashed var(--border); }
  .lib-check { display: grid; place-items: center; }
  .src-chip { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs--2); color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px; max-width: 100%; }
  .src-chip .ico { width: 12px; height: 12px; color: var(--ink-4); }
  .src-chip a { color: var(--brand); font-weight: 600; }
  .src-chip.folder { color: var(--brand); }
  .lib-bulk { position: sticky; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 70; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--brand); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
  .lib-bulk select { width: auto; min-height: 38px; }
  @media (max-width: 999px) { body:has(.tabbar) .lib-bulk { bottom: calc(92px + env(safe-area-inset-bottom)); } }
  @media (max-width: 820px) { .lib-list .doc-row { grid-template-columns: 28px 44px minmax(0, 1fr); } }
  @media (max-width: 640px) { .lib-list .doc-row { grid-template-columns: 28px minmax(0, 1fr); } .lib-list .doc-row .doc-ico { display: none; } }
  .fam-sib { padding-left: 28px; }
  /* merge: sources + page board */
  .mg-shell { display: grid; gap: 16px; grid-template-columns: 1fr; align-items: start; margin-top: 16px; }
  @media (min-width: 1000px) { .mg-shell { grid-template-columns: minmax(300px, 1fr) minmax(0, 1.4fr); } }
  .mg-pick-wrap { margin-top: 12px; } .mg-pick-wrap summary { cursor: pointer; padding: 6px 0; }
  .mg-pick-list { max-height: 300px; overflow: auto; border: 1px solid var(--border); border-radius: var(--r-md); margin-top: 6px; }
  .mg-board { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
  .mg-page { position: relative; border: 2px solid var(--border); border-left: 4px solid var(--c, var(--border)); border-radius: 8px; background: var(--surface); padding: 6px; cursor: grab; display: grid; gap: 4px; }
  .mg-page.dragging { opacity: .5; } .mg-page.over { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
  .mg-page-pic { background: #fff; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; transition: transform .2s ease; }
  .mg-page-pic canvas { display: block; width: 100%; height: auto; }
  .mg-page-no { position: absolute; top: 10px; left: 10px; font-size: .66rem; font-weight: 800; background: var(--brand); color: #fff; border-radius: 999px; padding: 1px 7px; }
  .mg-page-src { font-size: .66rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mg-page-actions { display: flex; justify-content: space-between; gap: 2px; }
  .mg-page-actions button { flex: 1; height: 26px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); font-size: .8rem; color: var(--ink-2); }
  .mg-page-actions button:hover { background: var(--surface-2); } .mg-page-actions button.danger { color: var(--danger); }
}
@layer patterns {
  /* auth hero: animated gradient, audiences, brand */
  .auth-hero { position: relative; overflow: hidden; }
  .auth-orbs { position: absolute; inset: 0; pointer-events: none; }
  .auth-orbs i { position: absolute; border-radius: 50%; filter: blur(40px); opacity: .55; animation: orb 14s ease-in-out infinite; }
  .auth-orbs i:nth-child(1) { width: 320px; height: 320px; left: -80px; top: -60px; background: #5f9cff; }
  .auth-orbs i:nth-child(2) { width: 260px; height: 260px; right: -60px; top: 30%; background: #ffd166; animation-delay: -5s; }
  .auth-orbs i:nth-child(3) { width: 300px; height: 300px; left: 20%; bottom: -120px; background: #7cf0c4; animation-delay: -9s; }
  @keyframes orb { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(24px, -18px) scale(1.08); } }
  .auth-brand { position: relative; display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: inherit; margin-bottom: 26px; }
  .auth-brand:hover { text-decoration: none; }
  .auth-hero h2, .auth-lead, .auth-uses, .auth-seal { position: relative; }
  .auth-lead { margin: 10px 0 22px; opacity: .9; font-size: 1.02rem; max-width: 460px; }
  .auth-uses { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; margin-bottom: 22px; }
  .auth-use { display: grid; grid-template-columns: 34px 1fr; gap: 2px 10px; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18); backdrop-filter: blur(6px); }
  .auth-use .pt-ico { grid-row: 1 / span 2; width: 34px; height: 34px; }
  .auth-use b { font-size: .92rem; } .auth-use small { font-size: .78rem; opacity: .82; }
  @media (max-width: 480px) { .auth-uses { grid-template-columns: 1fr; } }
  .pw-meter { height: 5px; border-radius: 3px; background: var(--surface-3); margin-top: 8px; overflow: hidden; }
  .pw-meter span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--danger); transition: width .25s ease, background .25s ease; }
  .pw-meter span[data-level="2"] { background: var(--warning); } .pw-meter span[data-level="3"], .pw-meter span[data-level="4"] { background: var(--success); }
}

/* 22. PDF tools promo (check-in success page) */
@layer patterns {
  .promo-tools { margin: 18px 0 30px; padding: 22px 20px; border-radius: 22px; background: var(--surface); border: 1px solid var(--border); text-align: left; box-shadow: var(--shadow-md); animation: promo-in .6s var(--ease) .4s both; }
  @keyframes promo-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  .promo-kicker { display: inline-block; font-size: var(--fs--2); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); }
  .promo-tools h2 { font-size: 1.2rem; line-height: 1.3; margin: 6px 0 6px; }
  .promo-tools > p { color: var(--ink-2); font-size: var(--fs--1); margin: 0; }
  .promo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
  .promo-tile { display: grid; gap: 3px; align-content: start; padding: 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-2); color: var(--heading); font-size: var(--fs--1); line-height: 1.3; transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast); }
  .promo-tile:hover { text-decoration: none; transform: translateY(-2px); border-color: var(--brand); box-shadow: var(--shadow-sm); }
  .promo-tile b { font-weight: 700; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  .promo-tile small { color: var(--ink-3); font-size: var(--fs--2); }
  .pt-ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--brand-tint); color: var(--brand); margin-bottom: 5px; }
  .pt-ico.ok { background: var(--success-soft); color: var(--success); }
  .pt-ico .ico { width: 19px; height: 19px; }
  .promo-free { font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--success); background: var(--success-soft); border-radius: 999px; padding: 2px 7px; }
  .promo-cta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
  @media (max-width: 520px) { .promo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .promo-cta .btn { flex: 1 1 100%; } }
  @media (prefers-reduced-motion: reduce) { .promo-tools { animation: none; } }
}

/* 23. Image editor + Image → PDF */
@layer patterns {
  /* image editor on the shared editor engine */
  .ed-noside .ed-shell { grid-template-columns: minmax(0, 1fr); }
  .ed-noside.has-props .ed-shell { grid-template-columns: minmax(0, 1fr) 280px; }
  .ed-noside.ed-mode-edit.has-props-text .ed-shell { grid-template-columns: minmax(0, 1fr); }
  .ed-noside .ed-stage-wrap.drag { outline: 3px dashed var(--brand); outline-offset: -10px; }
  .ed-empty { display: grid; justify-items: center; gap: 8px; text-align: center; width: min(100%, 640px); margin: 24px auto 0; padding: 40px 24px; border: 2px dashed var(--border-strong); border-radius: var(--r-lg); background: var(--surface); cursor: pointer; }
  .ed-empty:hover { border-color: var(--brand); }
  .ed-empty-tips { margin-top: 10px; max-width: 480px; line-height: 1.5; }
  .ed-recent { width: min(100%, 640px); margin: 16px auto 0; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
  .ed-export { position: sticky; bottom: 0; z-index: 60; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--border); box-shadow: var(--shadow-lg); }
  .ed-export[hidden] { display: none; }
  .ed-export img { height: 54px; width: auto; max-width: 110px; border: 1px solid var(--border); border-radius: 8px; background: repeating-conic-gradient(#d9dee8 0 25%, #f6f7fb 0 50%) 0 0 / 10px 10px; }
  .ed-export-text { display: grid; gap: 2px; margin-right: auto; } .ed-export-text small { color: var(--ink-3); font-size: var(--fs--2); }
  @media (max-width: 760px) { .ed-export-text { flex: 1 1 100%; margin-right: 0; } .ed-export .btn { flex: 1 1 auto; } }
  /* image → pdf */
  .ip-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
  .ip-item { display: grid; grid-template-columns: 28px 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); cursor: grab; }
  .ip-item.dragging { opacity: .5; } .ip-item.over { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
  .ip-no { width: 28px; height: 28px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: var(--fs--2); }
  .ip-thumb { position: relative; width: 64px; height: 64px; border-radius: 8px; overflow: hidden; background: repeating-conic-gradient(#d9dee8 0 25%, #f6f7fb 0 50%) 0 0 / 10px 10px; border: 1px solid var(--border); display: grid; place-items: center; }
  .ip-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; transform: rotate(var(--rot, 0deg)); transition: transform .2s ease; }
  .ip-thumb i { position: absolute; left: 0; right: 0; border-top: 2px dashed var(--danger); }
  .ip-text { display: grid; gap: 2px; min-width: 0; } .ip-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs--1); } .ip-text small { color: var(--ink-3); font-size: var(--fs--2); }
  .ip-pages { color: var(--brand); font-weight: 700; }
  .ip-ops { display: flex; gap: 4px; } .ip-ops .icon-btn { width: 34px; height: 34px; } .ip-ops .icon-btn.danger { color: var(--danger); }
  @media (max-width: 560px) { .ip-item { grid-template-columns: 24px 52px minmax(0, 1fr); } .ip-ops { grid-column: 1 / -1; justify-content: flex-end; } .ip-thumb { width: 52px; height: 52px; } }
  .ip-modes { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
  .ipl { margin-top: 12px; }
  .ipl-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); }
  .ipl-toolbar select { width: auto; min-height: 34px; padding: 0 28px 0 10px; }
  .ipl-tray { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding: 8px 12px; border: 1px dashed var(--border-strong); border-radius: var(--r-md); }
  .ipl-tray[hidden] { display: none; }
  .ipl-tray-items { display: flex; gap: 8px; flex-wrap: wrap; }
  .ipl-tray-item { width: 56px; height: 56px; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: repeating-conic-gradient(#d9dee8 0 25%, #f6f7fb 0 50%) 0 0 / 10px 10px; overflow: hidden; cursor: pointer; display: grid; place-items: center; }
  .ipl-tray-item img { max-width: 100%; max-height: 100%; object-fit: contain; transform: rotate(var(--rot, 0deg)); }
  .ipl-tray-item:hover { border-color: var(--brand); }
  .ipl-pages { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); margin-top: 12px; }
  .ipl-page { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); padding: 8px; }
  .ipl-page.over { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
  .ipl-page-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: var(--fs--1); }
  .ipl-page-ops { margin-left: auto; display: flex; gap: 2px; } .ipl-page-ops .icon-btn { width: 30px; height: 30px; font-size: .8rem; } .ipl-page-ops .danger { color: var(--danger); }
  .ipl-sheet { position: relative; width: 100%; aspect-ratio: calc(1 / var(--pr, 1.414)); background: #fff; border: 1px solid var(--border-strong); box-shadow: inset 0 0 0 1px var(--surface-2); overflow: hidden; touch-action: none; }
  .ipl-item { position: absolute; box-sizing: border-box; border: 1px solid transparent; cursor: grab; touch-action: none; user-select: none; }
  .ipl-item:hover, .ipl-item.dragging { border-color: var(--brand); z-index: 2; }
  .ipl-item.dragging { opacity: .85; cursor: grabbing; }
  .ipl-item img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; transform: rotate(var(--rot, 0deg)); }
  .ipl-no { position: absolute; left: 4px; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--brand); color: #fff; font-size: .62rem; font-weight: 700; display: grid; place-items: center; pointer-events: none; }
  .ipl-x { position: absolute; right: 2px; top: 2px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(17, 24, 39, .75); color: #fff; font-size: .7rem; cursor: pointer; opacity: 0; }
  .ipl-item:hover .ipl-x, .ipl-item:focus-within .ipl-x { opacity: 1; }
  .ipl-handle { position: absolute; right: -6px; bottom: -6px; width: 16px; height: 16px; border-radius: 50%; background: var(--brand); border: 2px solid #fff; box-shadow: var(--shadow-sm); cursor: nwse-resize; opacity: 0; }
  .ipl-item:hover .ipl-handle, .ipl-item.dragging .ipl-handle { opacity: 1; }
  @media (max-width: 640px) { .ipl-x, .ipl-handle { opacity: 1; } }
  .ip .p2i-side { padding-bottom: 0; }
  @media (max-width: 959px) { .ip .p2i-side { padding-bottom: 80px; } }
}

/* 24. Dashboard v2 — insight-first */
@layer patterns {
  .dash .dash-head { align-items: flex-start; margin-bottom: 18px; }
  .dash-greet h1 { margin: 4px 0 0; font-size: clamp(1.5rem, 2.4vw, 2rem); }
  .dash-insight { margin: 8px 0 0; color: var(--ink-2); font-size: var(--fs-0); max-width: 720px; line-height: 1.5; }
  .dash-actions { flex-wrap: wrap; }
  .kpis { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 16px; }
  @media (max-width: 1100px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 480px) { .kpis { grid-template-columns: 1fr; } }
  .kpi { position: relative; display: grid; gap: 4px; align-content: start; padding: 16px 16px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-xs); color: var(--heading); overflow: hidden; transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast); }
  .kpi:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--brand-tint-2, var(--border)); }
  .kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--kpi-accent, var(--brand)); }
  .kpi-checkins { --kpi-accent: var(--brand); } .kpi-events { --kpi-accent: #0d9488; } .kpi-signed { --kpi-accent: var(--success); } .kpi-people { --kpi-accent: #b45309; }
  .kpi-label { font-size: var(--fs--1); font-weight: 600; color: var(--ink-3); }
  .kpi-value { font-family: var(--font); font-weight: 700; font-size: 2rem; line-height: 1.05; letter-spacing: -.01em; }
  .kpi-hero .kpi-value { font-size: 3rem; }
  .kpi-hero { background: linear-gradient(135deg, var(--brand-tint), var(--surface) 60%); }
  .kpi-delta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs--2); font-weight: 700; color: var(--ink-3); }
  .kpi-delta .ico { width: 14px; height: 14px; transform: rotate(180deg); } .kpi-delta .ico.down { transform: none; }
  .kpi-delta.up { color: var(--success); } .kpi-delta.down { color: var(--danger); }
  .spark { display: block; width: 100%; height: 28px; margin-top: 8px; opacity: .9; }
  .spark polyline { fill: none; stroke: var(--kpi-accent, var(--brand)); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
  .dash-grid { display: grid; gap: 16px; margin-bottom: 16px; align-items: start; }
  .dash-grid-main { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
  .dash-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  @media (max-width: 1100px) { .dash-grid-3 { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 860px) { .dash-grid-main, .dash-grid-3 { grid-template-columns: 1fr; } }
  /* chart hover */
  .chart-wrap { position: relative; }
  .chart-svg .gridline.base { stroke: var(--border-strong); }
  .chart-svg .xhair { stroke: var(--ink-4); stroke-width: 1; stroke-dasharray: 3 3; }
  .chart-svg .xhair[hidden] { display: none; }
  .chart-svg .pt { fill: var(--brand); stroke: var(--surface); stroke-width: 2; opacity: 0; transition: opacity var(--t-fast); }
  .chart-svg .pt-g.hover .pt, .chart-svg .pt.last, .chart-svg .pt.peak { opacity: 1; }
  .chart-svg .axis-label.strong { fill: var(--heading); font-weight: 700; font-size: 11px; }
  .chart-tip { position: absolute; top: 0; left: 0; pointer-events: none; background: var(--heading); color: var(--surface); border-radius: 8px; padding: 6px 10px; font-size: var(--fs--1); line-height: 1.2; white-space: nowrap; box-shadow: var(--shadow-md); display: grid; gap: 2px; }
  .chart-tip[hidden] { display: none; }
  .chart-tip b { font-size: var(--fs-0); } .chart-tip small { opacity: .8; font-size: var(--fs--2); }
  /* attention list */
  .attn { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 16px; color: var(--heading); border-top: 1px solid var(--border); }
  .attn:first-child { border-top: 0; }
  .attn:hover { text-decoration: none; background: var(--surface-2); }
  .attn-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px var(--brand-tint); }
  .tone-brand .attn-dot { background: var(--brand); box-shadow: 0 0 0 4px var(--brand-tint); }
  .tone-amber .attn-dot { background: var(--warning); box-shadow: 0 0 0 4px var(--warning-soft); }
  .tone-ok .attn-dot { background: var(--success); box-shadow: 0 0 0 4px var(--success-soft); }
  .tone-neutral .attn-dot { background: var(--ink-4); box-shadow: 0 0 0 4px var(--surface-3); }
  .attn-text { display: grid; gap: 2px; min-width: 0; } .attn-text strong { font-size: var(--fs--1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .attn-text small { color: var(--ink-3); font-size: var(--fs--2); }
  .attn-cta { font-size: var(--fs--2); font-weight: 700; color: var(--brand); white-space: nowrap; }
  .attn-empty { display: grid; justify-items: center; text-align: center; gap: 4px; padding: 26px 16px; }
  .attn-check { width: 44px; height: 44px; border-radius: 50%; background: var(--success-soft); color: var(--success); display: grid; place-items: center; margin-bottom: 4px; } .attn-check .ico { width: 22px; height: 22px; }
  .attn-empty small { color: var(--ink-3); max-width: 260px; }
  /* pipeline + legend + meter */
  .pipe { display: flex; gap: 2px; height: 14px; border-radius: 7px; overflow: hidden; margin-top: 14px; background: var(--surface-2); }
  .pipe .seg { display: block; height: 100%; min-width: 4px; }
  .seg.tone-ok, .legend i.tone-ok { background: var(--success); } .seg.tone-brand, .legend i.tone-brand { background: var(--brand); } .seg.tone-neutral, .legend i.tone-neutral { background: var(--ink-4); } .seg.tone-danger, .legend i.tone-danger { background: var(--danger); }
  .legend i.tone-brand-soft { background: var(--brand-tint-2, var(--brand-100, #c7dbf5)); }
  .legend { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
  .legend li { display: flex; align-items: center; gap: 8px; font-size: var(--fs--1); color: var(--ink-2); }
  .legend i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
  .legend b { margin-left: auto; color: var(--heading); font-variant-numeric: tabular-nums; }
  .meter { height: 14px; border-radius: 7px; background: var(--brand-tint-2, var(--brand-100, #c7dbf5)); overflow: hidden; margin-top: 14px; }
  .meter span { display: block; height: 100%; background: var(--brand); border-radius: 7px 0 0 7px; min-width: 0; }
  .bar-h .bar-fill { height: 10px; border-radius: 0 4px 4px 0; }
  /* coming up / events / activity */
  .up-row { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 0; color: var(--heading); border-top: 1px solid var(--border); }
  .up-row:first-child { border-top: 0; } .up-row:hover { text-decoration: none; }
  .up-when { font-size: var(--fs--2); font-weight: 700; text-align: center; padding: 5px 6px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); }
  .up-when.today { background: var(--success-soft); color: var(--success); } .up-when.soon { background: var(--brand-tint); color: var(--brand); }
  .up-text, .ev-text, .act-text { display: grid; gap: 2px; min-width: 0; } .up-text strong, .ev-text strong { font-size: var(--fs--1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .up-text small, .ev-text small, .act-text small { color: var(--ink-3); font-size: var(--fs--2); }
  .ev-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 16px; color: var(--heading); border-top: 1px solid var(--border); }
  .ev-row:first-child { border-top: 0; } .ev-row:hover { text-decoration: none; background: var(--surface-2); }
  .ev-date { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--brand-tint); color: var(--brand); line-height: 1; } .ev-date b { font-size: 1.05rem; } .ev-date small { font-size: .6rem; text-transform: uppercase; letter-spacing: .06em; }
  .act-row { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; border-top: 1px solid var(--border); font-size: var(--fs--1); }
  .act-row:first-child { border-top: 0; } .act-ico { width: 26px; height: 26px; border-radius: 8px; background: var(--surface-2); display: grid; place-items: center; font-size: .85rem; flex: none; }
  /* tools strip */
  .tools-strip { display: grid; gap: 10px; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 16px; }
  @media (max-width: 1100px) { .tools-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 640px) { .tools-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .tools-strip a { display: grid; grid-template-columns: 38px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--heading); transition: border-color var(--t-fast), transform var(--t-fast); }
  .tools-strip a:hover { text-decoration: none; border-color: var(--brand); transform: translateY(-1px); }
  .tools-strip b { font-size: var(--fs--1); } .tools-strip small { color: var(--ink-3); font-size: var(--fs--2); }
  .ts-ico { grid-row: 1 / 3; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; } .ts-ico .ico { width: 18px; height: 18px; }
  .ts-a { background: #fff3d6; color: #b45309; } .ts-b { background: var(--brand-tint); color: var(--brand); } .ts-c { background: #f3e8ff; color: #7c3aed; } .ts-d { background: #ecfccb; color: #4d7c0f; } .ts-e { background: var(--success-soft); color: var(--success); }
  /* compact progress card */
  .player-card.compact { margin: 0; align-self: stretch; }
  .badge-strip { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 8px; }
  .mini-badge { width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, .16); display: grid; place-items: center; font-size: .9rem; text-decoration: none; }
  .mini-badge.locked { opacity: .35; filter: grayscale(1); }
  html[data-theme="dark"] .ts-a, html[data-theme="dark"] .ts-c, html[data-theme="dark"] .ts-d { filter: saturate(.7) brightness(.8); }
}

/* 25. Event pool — public page, board, host page */
@layer patterns {
  .pool { --pbg1: #2b145e; --pbg2: #5b2a9d; --pbg3: #d9348a; --pink: #ff5fa2; --lime: #c6ff5c; position: relative; min-height: 100dvh; margin: 0; padding: 0 16px 40px; overflow: hidden; color: #fff; background: radial-gradient(900px 500px at 10% -10%, rgba(255, 95, 162, .35), transparent 60%), radial-gradient(700px 500px at 100% 10%, rgba(198, 255, 92, .18), transparent 55%), linear-gradient(160deg, var(--pbg1), var(--pbg2) 55%, #1b0f3a); font-family: var(--font); }
  body:has(.pool) { background: #1b0f3a; }
  body:has(.pool) .main, body:has(.pool) main { padding: 0 !important; max-width: none !important; }
  .pool-sky { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
  .pool-sky span { position: absolute; bottom: -40px; font-size: 1.6rem; opacity: .25; animation: sky 14s linear infinite; filter: blur(.2px); }
  .pool-sky span:nth-child(1) { left: 6%; animation-duration: 16s; } .pool-sky span:nth-child(2) { left: 18%; animation-delay: -4s; } .pool-sky span:nth-child(3) { left: 31%; animation-delay: -9s; font-size: 2.2rem; } .pool-sky span:nth-child(4) { left: 44%; animation-delay: -2s; } .pool-sky span:nth-child(5) { left: 58%; animation-delay: -12s; font-size: 2rem; } .pool-sky span:nth-child(6) { left: 70%; animation-delay: -6s; } .pool-sky span:nth-child(7) { left: 83%; animation-delay: -10s; font-size: 2.4rem; } .pool-sky span:nth-child(8) { left: 93%; animation-delay: -1s; }
  @keyframes sky { 0% { transform: translateY(0) rotate(0); } 100% { transform: translateY(-115vh) rotate(25deg); } }
  .pool-fly { position: fixed; inset: 0; pointer-events: none; z-index: 95; overflow: hidden; }
  .fly { position: absolute; bottom: 8vh; font-size: 1.8rem; animation: flyup var(--t, 3s) cubic-bezier(.2, .6, .3, 1) forwards; transform: scale(var(--s, 1)); }
  @keyframes flyup { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx, 0), -70vh) scale(var(--s, 1)) rotate(20deg); } }
  .confetto { position: fixed; top: -14px; width: 9px; height: 14px; border-radius: 3px; z-index: 96; pointer-events: none; animation: cfall var(--t) cubic-bezier(.3, .4, .6, 1) var(--d) forwards; }
  @keyframes cfall { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(105vh) rotate(var(--r)); opacity: .85; } }
  @media (prefers-reduced-motion: reduce) { .pool-sky span, .fly, .confetto { animation: none !important; } }
  .pool-top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: min(1120px, 100%); margin: 0 auto; padding: 16px 0; }
  .pool-brand { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 800; font-family: var(--font-display); font-size: 1.1rem; }
  .pool-brand .brand-mark { color: #fff; --mark-ink: var(--pbg1); filter: none; }
  .pool-board-link { color: rgba(255, 255, 255, .85); font-weight: 600; font-size: var(--fs--1); }
  .pool-hero { position: relative; z-index: 2; width: min(1120px, 100%); margin: 10px auto 22px; text-align: center; }
  .pool-kicker { display: inline-block; font-size: var(--fs--2); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--lime); background: rgba(255, 255, 255, .08); padding: 6px 12px; border-radius: 999px; }
  .pool-hero h1 { color: #fff; font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.05; margin: 14px 0 8px; letter-spacing: -.01em; text-shadow: 0 6px 30px rgba(0, 0, 0, .35); }
  .pool-headline { font-size: clamp(1.1rem, 2.2vw, 1.5rem); color: #fff; font-weight: 700; margin: 0; }
  .pool-intro { max-width: 680px; margin: 10px auto 0; color: rgba(255, 255, 255, .85); line-height: 1.5; }
  .pool-count { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
  .pc { min-width: 108px; padding: 10px 14px; border-radius: 16px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18); backdrop-filter: blur(8px); display: grid; gap: 2px; }
  .pc b { font-family: var(--font-display); font-size: 1.6rem; line-height: 1; } .pc small { font-size: var(--fs--2); text-transform: uppercase; letter-spacing: .08em; color: rgba(255, 255, 255, .75); }
  .pc-timer b { font-size: 1.25rem; padding-top: 4px; color: var(--lime); }
  .pool-main { position: relative; z-index: 2; width: min(1120px, 100%); margin: 0 auto; display: grid; gap: 16px; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: start; }
  @media (max-width: 900px) { .pool-main { grid-template-columns: 1fr; } }
  .pool-card { background: #fff; color: var(--heading, #111827); border-radius: 24px; padding: 22px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); }
  .pool-card h2 { font-family: var(--font-display); font-size: 1.5rem; margin: 0 0 12px; color: #111827; }
  /* response form: compact, quiet labels, one-line choices */
  .pool-form-card { padding: 18px 18px 16px; }
  .pool-form-card h2 { font-size: 1.2rem; margin: 0 0 10px; }
  .pool-status { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px; }
  .ps input { position: absolute; opacity: 0; pointer-events: none; }
  .ps span { display: grid; place-items: center; min-height: 40px; padding: 6px 8px; border-radius: 999px; font-weight: 700; font-size: .84rem; line-height: 1.15; border: 1.5px solid #e5e7eb; color: #374151; cursor: pointer; text-align: center; transition: transform .15s ease, background .15s ease, border-color .15s ease; }
  .ps.going input:checked + span { background: #26890c; border-color: #26890c; color: #fff; } .ps.maybe input:checked + span { background: #d89e00; border-color: #d89e00; color: #fff; } .ps.cant input:checked + span { background: #6b7280; border-color: #6b7280; color: #fff; }
  .ps span:hover { transform: translateY(-1px); }
  .pool-fields { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; margin-bottom: 10px; }
  @media (max-width: 560px) { .pool-fields { grid-template-columns: 1fr; } }
  .pool-field { display: grid; gap: 3px; }
  .pool-field > span { font-weight: 700; font-size: .78rem; color: #374151; } .pool-field small { font-weight: 500; color: #6b7280; font-size: .72rem; }
  .pool-field input, .pool-q input[type="text"], .pool-q input[type="number"], .pool-q textarea { width: 100%; min-height: 40px; padding: 8px 12px; border-radius: 12px; border: 1.5px solid #e5e7eb; font: inherit; font-size: .92rem; color: #111827; background: #fff; }
  .pool-field input:focus, .pool-q input:focus, .pool-q textarea:focus { outline: none; border-color: var(--pbg2); box-shadow: 0 0 0 3px rgba(91, 42, 157, .15); }
  .pool-label { display: block; font-weight: 800; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: #6b7280; margin: 6px 0 6px; }
  .pool-tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: 10px; }
  @media (max-width: 560px) { .pool-tiles { grid-template-columns: repeat(3, 1fr); } }
  .tile { position: relative; cursor: pointer; }
  .tile input { position: absolute; opacity: 0; pointer-events: none; }
  .tile > span { display: block; text-align: center; color: #fff; border-radius: 12px; }
  .tile .tile-emoji { font-size: 1.35rem; line-height: 1; padding: 8px 4px 2px; border-radius: 12px 12px 0 0; }
  .tile .tile-text { font-size: .62rem; font-weight: 800; letter-spacing: .01em; padding: 0 4px 7px; border-radius: 0 0 12px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tile-1 > span { background: #e21b3c; } .tile-2 > span { background: #1368ce; } .tile-3 > span { background: #d89e00; } .tile-4 > span { background: #26890c; } .tile-5 > span { background: #864cbf; } .tile-6 > span { background: #0aa3a3; }
  .tile > span { transition: transform .15s ease, filter .15s ease; filter: saturate(.55) brightness(.92); }
  .tile:hover > span { transform: translateY(-2px); }
  .tile input:checked ~ span { filter: none; transform: scale(1.04); box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .5); }
  .tile input:checked ~ .tile-emoji { animation: bounce .5s cubic-bezier(.2, .9, .3, 1.4); }
  @keyframes bounce { 0% { transform: scale(.8); } 60% { transform: scale(1.18); } 100% { transform: scale(1.04); } }
  .pool-questions { display: grid; gap: 10px; margin-bottom: 10px; padding: 12px; border-radius: 14px; background: #f7f5ff; }
  .pool-q { display: grid; gap: 5px; } .pool-q-label { font-weight: 700; font-size: .88rem; color: #111827; } .pool-q-label em { color: #e21b3c; font-style: normal; } .pool-q-help { color: #6b7280; font-size: .76rem; }
  .pool-opts { display: flex; gap: 6px; flex-wrap: wrap; } .pool-opts.scale .opt span { min-width: 38px; text-align: center; }
  .opt input { position: absolute; opacity: 0; pointer-events: none; }
  .opt span { display: inline-block; padding: 6px 12px; border-radius: 999px; border: 1.5px solid #e5e7eb; font-weight: 700; font-size: .84rem; color: #374151; cursor: pointer; }
  .opt input:checked + span { background: var(--pbg2); border-color: var(--pbg2); color: #fff; }
  .pool-error { background: #fde8ec; color: #9f1239; border-radius: 12px; padding: 9px 12px; font-weight: 600; font-size: .88rem; margin-bottom: 10px; }
  .pool-error[hidden] { display: none; }
  .pool-submit { width: 100%; min-height: 48px; border: 0; border-radius: 14px; background: linear-gradient(135deg, #ff5fa2, #e21b3c); color: #fff; font: inherit; font-size: 1rem; font-weight: 800; letter-spacing: .01em; cursor: pointer; box-shadow: 0 12px 26px -12px rgba(226, 27, 60, .7); transition: transform .15s ease; margin-top: 4px; }
  .pool-submit:hover { transform: translateY(-2px); } .pool-submit:disabled { opacity: .7; transform: none; }
  .pool-fine { margin: 8px 0 0; color: #6b7280; font-size: .72rem; text-align: center; }
  /* invite bar: QR + share, right under the hero */
  .pool-invite { position: relative; z-index: 2; width: min(1120px, 100%); margin: 0 auto 14px; display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 18px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); color: #fff; backdrop-filter: blur(8px); }
  .pool-invite img { width: 64px; height: 64px; flex: none; border-radius: 12px; background: #fff; padding: 4px; }
  .pool-invite > div { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; min-width: 0; flex: 1; }
  .pool-invite strong { font-family: var(--font-display); font-size: 1rem; color: #fff; } .pool-invite small { color: rgba(255, 255, 255, .8); font-size: var(--fs--1); }
  .pool-invite .row { margin-left: auto; }
  .pool-invite .pool-btn { color: #fff; border-color: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .08); } .pool-invite .pool-btn:hover { background: #fff; color: var(--pbg2); border-color: #fff; }
  @media (max-width: 560px) { .pool-invite { padding: 10px 12px; } .pool-invite img { width: 52px; height: 52px; } .pool-invite .row { margin-left: 0; width: 100%; } }
  .pool-thanks, .pool-closed { text-align: center; padding: 16px 6px; }
  .pool-thanks[hidden] { display: none; }
  .pool-thanks-emoji { font-size: 4rem; line-height: 1; margin-bottom: 10px; animation: bounce .6s cubic-bezier(.2, .9, .3, 1.4); }
  .pool-thanks p, .pool-closed p { color: #4b5563; margin: 0 0 14px; }
  .pool-thanks-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
  .pool-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 16px; border-radius: 999px; border: 2px solid rgba(17, 24, 39, .15); background: #fff; color: #111827; font: inherit; font-weight: 700; cursor: pointer; }
  .pool-btn.ghost:hover { border-color: var(--pbg2); color: var(--pbg2); } .pool-btn.sm { min-height: 34px; padding: 0 12px; font-size: var(--fs--1); }
  /* wall */
  .pool-wall-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
  .pool-wall-count { font-weight: 700; color: #4b5563; } .pool-wall-count b { font-family: var(--font-display); font-size: 1.3rem; color: #111827; }
  .pool-hype { display: grid; gap: 6px; margin: 6px 0 14px; }
  .hype-row { display: grid; grid-template-columns: 30px 1fr 32px; gap: 8px; align-items: center; }
  .hype-emoji { font-size: 1.2rem; text-align: center; } .hype-n { font-weight: 800; text-align: right; color: #374151; }
  .hype-bar { height: 12px; border-radius: 6px; background: #f1f0f7; overflow: hidden; } .hype-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #5b2a9d, #ff5fa2); transition: width .6s cubic-bezier(.2, .8, .2, 1); }
  .pool-people { display: flex; flex-wrap: wrap; gap: 10px; max-height: 420px; overflow: auto; padding: 4px 2px; }
  .person { display: grid; justify-items: center; gap: 4px; width: 84px; text-align: center; animation: pop-in .45s cubic-bezier(.2, .9, .3, 1.4) both; }
  .person.fresh { animation: pop-in .6s cubic-bezier(.2, .9, .3, 1.5) both; }
  .person.me .avatar { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--c); }
  .person.maybe .avatar { opacity: .75; border: 2px dashed rgba(255, 255, 255, .8); }
  @keyframes pop-in { from { opacity: 0; transform: scale(.5) translateY(10px); } to { opacity: 1; transform: none; } }
  .avatar { position: relative; width: 48px; height: 48px; border-radius: 50%; background: var(--c, #1368ce); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: .95rem; box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .5); }
  .avatar em { position: absolute; right: -6px; bottom: -6px; font-style: normal; font-size: 1rem; background: #fff; border-radius: 50%; width: 24px; height: 24px; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }
  .pname { font-size: var(--fs--2); font-weight: 700; color: #111827; max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pmsg { font-size: .68rem; color: #6b7280; max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pool-empty { width: 100%; text-align: center; color: #6b7280; padding: 24px 0; display: grid; gap: 6px; } .pool-empty span { font-size: 2rem; }
  .pool-cheer { margin-top: 14px; padding-top: 14px; border-top: 1px solid #eef0f4; }
  .cheer-row { display: flex; gap: 8px; flex-wrap: wrap; }
  .cheer { display: grid; justify-items: center; gap: 0; min-width: 56px; padding: 8px 10px 6px; border-radius: 16px; border: 2px solid #eef0f4; background: #fff; cursor: pointer; font: inherit; transition: transform .12s ease, border-color .12s ease; }
  .cheer span { font-size: 1.5rem; line-height: 1; } .cheer small { font-size: .68rem; font-weight: 800; color: #6b7280; min-height: 1em; }
  .cheer:hover { border-color: var(--pbg2); transform: translateY(-2px); }
  .cheer.pop span { animation: bounce .4s cubic-bezier(.2, .9, .3, 1.6); }
  .pool-foot { position: relative; z-index: 2; width: min(1120px, 100%); margin: 24px auto 0; display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; color: rgba(255, 255, 255, .8); }
  .pool-powered { font-size: var(--fs--2); }
  /* board */
  .pool-board { position: relative; z-index: 2; width: min(1120px, 100%); margin: 0 auto; display: grid; gap: 14px; }
  .board-count { margin: 10px 0 0; color: rgba(255, 255, 255, .8); font-weight: 600; font-size: var(--fs--1); }
  .board-section { display: flex; align-items: center; gap: 10px; margin: 10px 0 2px; color: #fff; font-family: var(--font-display); font-size: 1.05rem; letter-spacing: .02em; }
  .board-section span { font-size: var(--fs--2); font-weight: 800; padding: 2px 9px; border-radius: 999px; background: rgba(255, 255, 255, .14); }
  .board-section::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, .18); }
  .board-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }
  .bcard { display: flex; flex-direction: column; gap: 12px; padding: 18px 18px 14px; border-radius: 24px; background: #fff; color: #111827; box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .6); transition: transform .18s ease, box-shadow .18s ease; min-width: 0; }
  .bcard:hover { text-decoration: none; transform: translateY(-3px); box-shadow: 0 30px 60px -28px rgba(2, 31, 68, .85); }
  .bcard-head { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 12px; align-items: start; }
  .bcard-date { display: grid; justify-items: center; align-content: center; gap: 1px; width: 58px; height: 64px; border-radius: 16px; background: linear-gradient(160deg, #2d6fc4, #02478d); color: #fff; line-height: 1; }
  .bcard-date b { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; } .bcard-date small { font-size: .58rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
  .bcard-headtext { display: grid; gap: 3px; min-width: 0; }
  .bcard-kicker { font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bcard-title { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.2; letter-spacing: -.01em; color: #0b1f3a; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .bcard-when { flex: none; font-size: .7rem; font-weight: 800; padding: 5px 9px; border-radius: 999px; background: #eef3fa; color: #02478d; white-space: nowrap; }
  .bcard.is-today .bcard-when { background: #dcfce7; color: #15803d; } .bcard.is-today .bcard-date { background: linear-gradient(160deg, #16a34a, #15803d); }
  .bcard-meta { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--fs--1); color: #374151; font-weight: 600; }
  .bcard-meta li { display: inline-flex; align-items: center; gap: 6px; min-width: 0; } .bcard-meta .ico { width: 15px; height: 15px; color: #02478d; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
  .bcard-people { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .bcard-avatars { display: flex; } .bcard-avatars .avatar { width: 30px; height: 30px; font-size: .62rem; margin-right: -9px; border: 2px solid #fff; box-shadow: none; } .bcard-avatars .avatar.more { background: #e5e7eb; color: #374151; }
  .bcard-count { font-size: var(--fs--1); color: #374151; margin-left: 6px; } .bcard-count b { color: #0b1f3a; font-size: 1rem; }
  .bcard-cap { height: 8px; border-radius: 4px; background: #e8eef7; overflow: hidden; } .bcard-cap span { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #2d6fc4, #02478d); }
  .bcard-capnote { margin-top: -6px; font-size: .72rem; color: #6b7280; font-weight: 600; }
  .bcard-hype { display: flex; gap: 6px; flex-wrap: wrap; } .bcard-hype span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 7px; border-radius: 999px; background: #f3f6fb; font-size: .78rem; font-weight: 800; color: #374151; } .bcard-hype em { font-style: normal; font-size: 1rem; }
  .bcard-quote { margin: 0; padding: 10px 12px; border-radius: 14px; background: #f7f9fc; border-left: 3px solid #02478d; font-size: var(--fs--1); color: #1f2937; font-style: italic; line-height: 1.4; }
  .bcard-quote cite { display: block; margin-top: 2px; font-style: normal; font-size: .7rem; font-weight: 800; color: #6b7280; text-transform: uppercase; letter-spacing: .06em; }
  .bcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid #eef0f4; }
  .bcard-status { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 800; color: #15803d; } .bcard-status i { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px #dcfce7; }
  .bcard.is-closed .bcard-status { color: #6b7280; } .bcard.is-closed .bcard-status i { background: #9ca3af; box-shadow: 0 0 0 4px #f3f4f6; }
  .bcard-cta { font-weight: 800; color: #fff; background: #02478d; padding: 9px 14px; border-radius: 999px; font-size: var(--fs--1); white-space: nowrap; transition: background .15s ease; } .bcard:hover .bcard-cta { background: #0b5fb3; }
  .bcard.is-closed .bcard-cta { background: #eef0f4; color: #374151; }
  .bcard.is-closed .bcard-date { filter: grayscale(.4) opacity(.85); }
  @media (max-width: 480px) { .board-grid { grid-template-columns: 1fr; } .bcard { padding: 16px 14px 12px; border-radius: 20px; } .bcard-head { grid-template-columns: 52px minmax(0, 1fr); } .bcard-when { grid-column: 2; justify-self: start; } .bcard-date { width: 52px; height: 58px; } }
  .board-empty { text-align: center; } .board-empty span { font-size: 3rem; } .board-empty p { color: #4b5563; }
  /* host page + event card */
  .pm-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; margin-top: 16px; }
  @media (max-width: 960px) { .pm-grid { grid-template-columns: 1fr; } }
  .pm-stats { display: flex; gap: 10px; flex-wrap: wrap; }
  .pm-stat { min-width: 86px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); display: grid; gap: 2px; } .pm-stat b { font-family: var(--font-display); font-size: 1.4rem; line-height: 1; } .pm-stat small { color: var(--ink-3); font-size: var(--fs--2); text-transform: uppercase; letter-spacing: .06em; }
  .pm-hype { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; font-size: var(--fs--1); color: var(--ink-2); }
  .pm-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--border); }
  .pm-row:first-child { border-top: 0; }
  .pm-row-text { display: grid; gap: 2px; min-width: 0; } .pm-row-text small { color: var(--ink-3); font-size: var(--fs--2); }
  .pm-answers { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--ink-2) !important; }
  .pm-questions { display: grid; gap: 8px; }
  .pm-q { border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 12px; background: var(--surface-2); }
  .pm-q summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; } .pm-q summary::-webkit-details-marker { display: none; }
  .pm-q-kind { font-size: var(--fs--2); font-weight: 700; color: var(--brand); background: var(--brand-tint); border-radius: 999px; padding: 2px 8px; white-space: nowrap; } .pm-q em { color: var(--danger); font-style: normal; }
  .pm-compare { display: grid; gap: 10px; }
  .pmc { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; } .pmc-label { font-size: var(--fs--1); color: var(--ink-2); } .pmc b { font-family: var(--font-display); font-size: 1.2rem; }
  .pmc-bar { grid-column: 1 / -1; height: 12px; border-radius: 6px; background: var(--surface-2); overflow: hidden; } .pmc-bar i { display: block; height: 100%; background: var(--brand); border-radius: 6px; } .pmc-bar i.ok { background: var(--success); }
  .pool-mini { display: grid; gap: 10px; }
  .pool-mini-stats { display: flex; gap: 14px; flex-wrap: wrap; font-size: var(--fs--1); color: var(--ink-2); } .pool-mini-stats b { color: var(--heading); font-size: 1.1rem; }
  .pool-mini-people { display: flex; gap: 6px; flex-wrap: wrap; } .pool-mini-people .avatar { width: 36px; height: 36px; font-size: .72rem; } .pool-mini-people .avatar em { width: 18px; height: 18px; font-size: .7rem; right: -4px; bottom: -4px; }
}

/* 26. Public board in the brand palette */
@layer patterns {
  .pool-board-page { --pbg1: #021f44; --pbg2: #02478d; --lime: #bfe0ff; background: radial-gradient(900px 500px at 10% -10%, rgba(120, 168, 226, .35), transparent 60%), radial-gradient(700px 500px at 100% 10%, rgba(255, 255, 255, .12), transparent 55%), linear-gradient(160deg, #021f44, #02478d 55%, #0a2d5e); }
  body:has(.pool-board-page) { background: #021f44; }
  .pool-board-page .pool-kicker { color: #bfe0ff; background: rgba(255, 255, 255, .1); }
  .pool-board-page .pool-brand .brand-mark { color: #fff; --mark-ink: #02478d; }
  .pool-board-page .pool-sky span { opacity: .18; }
}

/* 27. Dashboard v2.1 — packed layout, stretchable chart, XP card */
@layer patterns {
  .dash-row-chart { display: grid; gap: 16px; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: stretch; margin-bottom: 16px; }
  @media (max-width: 860px) { .dash-row-chart { grid-template-columns: 1fr; } }
  .dash-row-chart .card { display: flex; flex-direction: column; min-height: 0; }
  .attn-body { padding: 6px 0 4px; flex: 1; overflow: auto; max-height: 420px; }
  .chart-card .chart-body { flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 260px; }
  .chart-kpi { display: flex; align-items: baseline; gap: 10px; } .chart-kpi b { font-size: 1.7rem; font-weight: 700; line-height: 1; color: var(--heading); } .chart-kpi small { color: var(--ink-3); font-size: var(--fs--2); }
  .chart-plot { flex: 1; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; min-height: 160px; }
  .chart-y { display: grid; grid-template-rows: 1fr 1fr auto; align-items: start; text-align: right; font-size: 10px; font-weight: 600; color: var(--ink-4); padding-top: calc(12% - 4px); }
  .chart-y span:last-child { align-self: end; } .chart-y span:nth-child(2) { align-self: center; }
  .chart-area { position: relative; min-height: 160px; }
  .chart-area svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
  .chart-area .gridline { stroke: var(--border); stroke-width: 1; } .chart-area .gridline.base { stroke: var(--border-strong); }
  .chart-dot { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--brand); border: 2px solid var(--surface); transform: translate(-50%, -50%); opacity: 0; transition: opacity var(--t-fast); pointer-events: none; }
  .chart-dot.last, .chart-dot.peak, .chart-dot.hover { opacity: 1; }
  .chart-last { position: absolute; transform: translate(-100%, calc(-100% - 8px)); font-size: 11px; font-weight: 700; color: var(--heading); pointer-events: none; }
  .chart-peak { position: absolute; transform: translate(-50%, calc(-100% - 8px)); font-size: 10px; font-weight: 600; color: var(--ink-3); white-space: nowrap; pointer-events: none; }
  .chart-xhair { position: absolute; bottom: 0; width: 0; border-left: 1px dashed var(--ink-4); transform: translateX(-50%); pointer-events: none; }
  .chart-xhair[hidden] { display: none; }
  .chart-x { display: flex; justify-content: space-between; padding-left: 38px; font-size: 10px; font-weight: 600; color: var(--ink-4); }
  /* packed columns: cards flow into columns, no stretched or empty cards */
  .dash-masonry { columns: 3; column-gap: 16px; }
  @media (max-width: 1100px) { .dash-masonry { columns: 2; } } @media (max-width: 760px) { .dash-masonry { columns: 1; } }
  .dash-item { display: inline-block; width: 100%; margin: 0 0 16px; break-inside: avoid; vertical-align: top; }
  /* XP card */
  .player-card.compact { display: grid; gap: 12px; grid-template-columns: 1fr; }
  .pc-head { display: flex; align-items: center; gap: 12px; }
  .pc-title { flex: 1; min-width: 0; display: grid; gap: 2px; } .pc-title strong { font-family: var(--font-display); font-size: 1.15rem; color: #fff; } .pc-title small { color: rgba(255, 255, 255, .75); font-size: var(--fs--2); }
  .pc-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
  .pc-week, .pc-eco { display: grid; gap: 1px; } .pc-week b, .pc-eco b { font-family: var(--font-display); font-size: 1.2rem; color: #ffd166; line-height: 1; } .pc-week small, .pc-eco small { font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(255, 255, 255, .75); }
  .pc-days { display: flex; gap: 4px; } .pc-days span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .62rem; font-weight: 800; background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .6); }
  .pc-days span.on { background: #ffd166; color: #1b1b1b; } .pc-days span.today { box-shadow: 0 0 0 2px rgba(255, 255, 255, .7); }
  .pc-label { display: block; font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .65); margin-bottom: 6px; }
  .pc-chips { display: flex; gap: 6px; flex-wrap: wrap; } .pc-chips span { font-size: var(--fs--2); color: #fff; background: rgba(255, 255, 255, .12); border-radius: 999px; padding: 4px 9px; } .pc-chips b { color: #ffd166; }
  .pc-recent { display: grid; gap: 4px; } .pc-gain { font-size: var(--fs--2); color: rgba(255, 255, 255, .9); } .pc-gain b { color: #ffd166; } .pc-gain small { color: rgba(255, 255, 255, .55); }
  .player-card.compact .badge-strip { margin-top: 0; }
}

/* 28. Language switcher: see static/css/lang-switch.css (shared with the landing page) */

/* 29. Admin console */
@layer patterns {
  .admin-strip { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: linear-gradient(90deg, #1b1f3b, #2b2f5e); color: #e5e7ff; font-size: var(--fs--1); font-weight: 600; }
  .admin-strip .ico { width: 16px; height: 16px; flex: none; color: #c6ff5c; }
  @media (min-width: 1000px) { body:has(.sidenav) .admin-strip { margin-left: var(--sidenav-w); } html.snav-hidden body:has(.sidenav) .admin-strip { margin-left: var(--sidenav-rail); } }
  .mode-switch { margin: 0; }
  .snav-btn { width: 100%; border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; }
  .snav-btn:hover { background: var(--surface-2); color: var(--heading); }
  html.snav-hidden .snav-btn { justify-content: center; padding: 10px 0; font-size: 0; gap: 0; }
  .adm-filters { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
  .adm-filters .chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--ink-2); font-size: var(--fs--1); font-weight: 600; }
  .adm-filters .chip.active { background: var(--brand); border-color: var(--brand); color: #fff; }
  .adm-filters .chip b { font-weight: 700; opacity: .8; }
  .adm-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
  .adm-toolbar input[type="search"] { max-width: 320px; }
  .adm-toolbar select { width: auto; }
  .adm-user { display: flex; align-items: center; gap: 10px; min-width: 0; } .adm-user .avatar { width: 34px; height: 34px; font-size: .8rem; flex: none; }
  .adm-user strong { display: block; font-size: var(--fs--1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .adm-user small { color: var(--ink-3); font-size: var(--fs--2); }
  .adm-head { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 16px; align-items: center; margin-bottom: 16px; }
  .adm-head .avatar { width: 64px; height: 64px; font-size: 1.4rem; }
  .adm-head h1 { margin: 0; font-size: 1.5rem; } .adm-head .meta { color: var(--ink-3); font-size: var(--fs--1); margin-top: 2px; display: flex; gap: 10px; flex-wrap: wrap; }
  @media (max-width: 640px) { .adm-head { grid-template-columns: 48px minmax(0, 1fr); } .adm-head .avatar { width: 48px; height: 48px; } .adm-head > .row { grid-column: 1 / -1; } }
  .adm-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
  @media (max-width: 960px) { .adm-grid { grid-template-columns: 1fr; } }
  .adm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
  .adm-stat { padding: 12px; border-radius: var(--r-md); background: var(--surface-2); display: grid; gap: 2px; } .adm-stat b { font-size: 1.35rem; line-height: 1; } .adm-stat small { color: var(--ink-3); font-size: var(--fs--2); }
  .adm-actions { display: grid; gap: 8px; }
  .adm-action { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-md); }
  .adm-action strong { font-size: var(--fs--1); } .adm-action small { display: block; color: var(--ink-3); font-size: var(--fs--2); }
  .adm-action.danger { border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); background: color-mix(in srgb, var(--danger) 5%, var(--surface)); }
  .adm-log { display: grid; gap: 0; }
  .adm-log-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); font-size: var(--fs--1); }
  .adm-log-row:first-child { border-top: 0; } .adm-log-row time { color: var(--ink-3); font-size: var(--fs--2); } .adm-log-row code { font-size: var(--fs--2); color: var(--brand); }
  .adm-kv { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 6px 12px; font-size: var(--fs--1); } .adm-kv dt { color: var(--ink-3); } .adm-kv dd { margin: 0; }
  .email-status-queued { color: var(--warning); } .email-status-sent { color: var(--success); } .email-status-failed { color: var(--danger); }
}

/* ---- 30. i18n robustness: longer labels in other languages ---- */
@layer components {
  .ev-row .ev-date small { display: block; max-width: 100%; padding: 0 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .52rem; letter-spacing: .02em; }
}

/* 31. Dashboard v3 — Chart.js charts */
@layer patterns {
  .kpi .spark { display: block; position: relative; height: 36px; margin-top: 8px; opacity: .95; }
  .kpi .spark canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
  .chart-head { align-items: center; gap: 10px; } .chart-head h3 { margin: 0; }
  .seg-toggle { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); flex: none; }
  .seg-toggle button { border: 0; background: none; border-radius: 999px; padding: 5px 11px; font: inherit; font-size: var(--fs--2); font-weight: 700; color: var(--ink-3); cursor: pointer; transition: background var(--t-fast), color var(--t-fast); }
  .seg-toggle button:hover { color: var(--brand); }
  .seg-toggle button.is-on { background: var(--surface); color: var(--brand); box-shadow: var(--shadow-xs); }
  .chart-kpi { flex-wrap: wrap; }
  .chart-canvas { position: relative; flex: 1; min-height: 240px; }
  .chart-canvas canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
  .chart-legend { margin-left: auto; display: inline-flex; gap: 12px; align-items: center; font-size: var(--fs--2); color: var(--ink-3); }
  .chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
  .chart-legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; background: var(--brand); }
  .chart-legend .lg-bar { width: 10px; height: 10px; border-radius: 3px; background: var(--brand-tint-2, #c7dbf5); }
  .donut-card { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: center; margin-top: 12px; }
  .donut-wrap { position: relative; height: 150px; } .donut-wrap.half { height: 110px; }
  .donut-wrap canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
  .donut-card .legend { margin: 0; }
  @media (max-width: 420px) { .donut-card { grid-template-columns: 1fr; } .donut-card .legend { width: 100%; } }
  .bars-wrap { position: relative; min-height: 60px; } .bars-wrap canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
  .when-wrap { position: relative; height: 170px; margin-top: 12px; } .when-wrap canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
  .card-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
  .poster-brand { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 28px; }
  .filters-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 18px; }
  .spam-hint { display: inline; opacity: .85; }
  .adm-queue { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
  .filters-bar select, .filters-bar input, .filters-bar .pk-wrap { width: auto; min-width: 150px; max-width: 200px; }
  .filters-bar .pk-wrap .pk-display { min-width: 170px; }
  @media (max-width: 640px) { .filters-bar select, .filters-bar input, .filters-bar .pk-wrap { flex: 1 1 140px; max-width: none; } .filters-bar .btn { flex: 1 1 100%; } }
}

/* 32. Auth pages: the header's Sign in / Get started buttons duplicate the form on phones */
@layer patterns {
  @media (max-width: 640px) { body.auth-page .nav-anon { display: none; } }
}

/* 33. Library: pictures & exports saved from the PDF tools */
@layer patterns {
  .lib-files { margin-top: 18px; }
  .lib-files-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .lib-files-head h2 { font-family: var(--font-display); font-size: 1.1rem; margin: 0; }
  .files-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
  .file-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; min-width: 0; transition: border-color var(--t-fast), transform var(--t-fast); }
  .file-card:hover { border-color: var(--brand); transform: translateY(-1px); }
  .file-thumb { display: block; width: 100%; aspect-ratio: 4 / 3; padding: 10px; border: 0; cursor: zoom-in; background-color: #f1f4f9; background-image: linear-gradient(45deg, #e3e8ef 25%, transparent 25%, transparent 75%, #e3e8ef 75%), linear-gradient(45deg, #e3e8ef 25%, transparent 25%, transparent 75%, #e3e8ef 75%); background-size: 18px 18px; background-position: 0 0, 9px 9px; }
  .file-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
  html[data-theme="dark"] .file-thumb, .theme-auto-dark .file-thumb { background-color: #1a2336; background-image: linear-gradient(45deg, #26314a 25%, transparent 25%, transparent 75%, #26314a 75%), linear-gradient(45deg, #26314a 25%, transparent 25%, transparent 75%, #26314a 75%); }
  .file-main { display: grid; gap: 2px; padding: 10px 12px 6px; min-width: 0; }
  .file-title { font-size: var(--fs--1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .file-actions { display: flex; gap: 6px; padding: 0 10px 10px; align-items: center; } .file-actions form { margin-left: auto; }
}