/* Bump ?v= in templates/portal/_shell.html and login.html whenever this file changes. */
/* =====================================================================
   OITE Events Portal — design system  (docs/PORTAL-MERGE.md → "Design system")
   One stylesheet for both sides of exhibitor.oite.com:
     organiser console  (/hq/…)        html.ws-organiser  → dark sidebar .side--ink
     stand tools        (/exhibitor/…) html.ws-stand      → white sidebar + bottom tab bar
   Accent = the active event's colour_primary, set inline on <html style="--accent:…">.
   Sections:  1 tokens · 2 base · 3 shell (sidebar, top bar, content) · 4 buttons
              5 cards & stats · 6 tables · 7 tools (search/chips) · 8 pager · 9 pills/badges/dots
              10 forms · 11 savebar · 12 empty · 13 tabs · 14 toasts · 15 dialog & palette
              16 timeline · 17 progress · 18 misc (avatar/kbd/grid/utilities) · 19 responsive · 20 print
   ===================================================================== */

/* ------------------------------------------------------------------ 1. tokens */
:root {
  --accent: #E92027;                     /* overridden inline per event */
  --accent-2: #101826;
  --accent-ink: #FFFFFF;
  --accent-soft: color-mix(in srgb, var(--accent) 10%, #fff);
  --accent-line: color-mix(in srgb, var(--accent) 32%, #fff);
  --accent-ring: color-mix(in srgb, var(--accent) 28%, transparent);

  --bg: #F5F6F8;  --card: #FFFFFF;  --card-2: #F8F9FB;  --card-3: #F1F3F6;
  --ink: #161A22;  --ink-2: #596270;  --ink-3: #8A93A2;  --ink-4: #B3BAC5;
  --line: #E4E7EC;  --line-2: #EEF0F4;  --line-3: #D5DAE2;

  --side-bg: #141824;  --side-ink: #C7CCD6;  --side-dim: #7E8797;  --side-line: rgba(255,255,255,.08);

  --ok: #1F8A4C;      --ok-bg: #E6F4EC;      --ok-line: #BFE3CC;
  --warn: #B7791F;    --warn-bg: #FFF4DF;    --warn-line: #F1DDB2;
  --danger: #C62828;  --danger-bg: #FCEBEB;  --danger-line: #F2C4C4;
  --info: #1D6FD6;    --info-bg: #E8F0FC;    --info-line: #C2D6F5;

  --r: 14px;  --r-s: 10px;  --r-xs: 7px;
  --shadow: 0 1px 2px rgba(16,24,40,.06), 0 8px 24px -16px rgba(16,24,40,.25);
  --shadow-lg: 0 2px 4px rgba(16,24,40,.06), 0 24px 48px -20px rgba(16,24,40,.35);
  --ease: cubic-bezier(.2,.7,.2,1);  --t: 180ms;  --t-slow: 240ms;

  --side-w: 264px;  --side-rail: 72px;  --top-h: 64px;  --tab-h: 62px;  --content-w: 1200px;
  --font: Inter, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: Outfit, var(--font);
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* ------------------------------------------------------------------ 2. base */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { color-scheme: light; -webkit-text-size-adjust: 100%; }
body { font-family: var(--font); font-size: 14px; line-height: 1.5; color: var(--ink); background: var(--bg);
       min-height: 100dvh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
       -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus { outline: none; }
html.kb :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 999; background: var(--ink); color: #fff; padding: 8px 12px; border-radius: 8px; }
.skip:focus { left: 8px; }
svg.ic { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.8; fill: none;
         stroke-linecap: round; stroke-linejoin: round; flex: none; }
svg.ic.ic--sm { width: 15px; height: 15px; }
svg.ic.ic--lg { width: 22px; height: 22px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ------------------------------------------------------------------ 3. shell */
.app { display: flex; min-height: 100dvh; }

/* sidebar */
.side { width: var(--side-w); flex: none; position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column;
        background: var(--card); border-right: 1px solid var(--line); overflow-y: auto; scrollbar-width: none;
        transition: width var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); z-index: 60; }
.side::-webkit-scrollbar { display: none; }
.side--ink { background: var(--side-bg); color: var(--side-ink); border-right-color: transparent; }

.brand { padding: 16px 14px 8px; }
.brand__card { display: flex; align-items: center; gap: 11px; padding: 10px; border-radius: var(--r-s); min-width: 0;
               transition: background var(--t) var(--ease); }
.brand__card:hover { background: var(--card-2); }
.side--ink .brand__card:hover { background: rgba(255,255,255,.05); }
.brand__mark { width: 40px; height: 40px; flex: none; border-radius: 11px; display: grid; place-items: center; overflow: hidden;
               background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent-2) 65%, var(--accent)));
               color: #fff; font-family: var(--display); font-weight: 800; font-size: 13px; letter-spacing: .04em;
               box-shadow: 0 6px 16px -8px var(--accent); }
.brand__mark img { width: 100%; height: 100%; object-fit: contain; padding: 5px; } /* event logos are often white artwork: keep the event-colour tile behind them */
.brand__mark--oite { background: #fff; }
.brand__mark--oite img { padding: 4px; }
.brand__txt { min-width: 0; display: flex; flex-direction: column; }
.brand__txt b { font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.brand__txt small { font-size: 11.5px; color: var(--ink-3); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side--ink .brand__txt b { color: #fff; }
.side--ink .brand__txt small { color: var(--side-dim); }

.nav { flex: 1; padding: 4px 12px 16px; }
.nav__grp + .nav__grp { margin-top: 6px; }
.nav__lbl { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
            padding: 14px 12px 6px; white-space: nowrap; }
.side--ink .nav__lbl { color: var(--side-dim); }
.nav__item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 9px; font-size: 13.5px; font-weight: 500;
             color: var(--ink-2); margin-bottom: 1px; min-width: 0; position: relative;
             transition: background var(--t) var(--ease), color var(--t) var(--ease); }
.nav__item .ic { color: var(--ink-3); transition: color var(--t) var(--ease); }
.nav__item:hover { background: var(--card-2); color: var(--ink); }
.nav__item:hover .ic { color: var(--ink-2); }
.nav__item.is-on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.nav__item.is-on .ic { color: var(--accent); }
.side--ink .nav__item { color: var(--side-ink); }
.side--ink .nav__item .ic { color: var(--side-dim); }
.side--ink .nav__item:hover { background: rgba(255,255,255,.06); color: #fff; }
.side--ink .nav__item:hover .ic { color: #fff; }
.side--ink .nav__item.is-on { background: var(--accent); color: var(--accent-ink); }
.side--ink .nav__item.is-on .ic { color: var(--accent-ink); }
.nav__txt { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav__badge { margin-left: auto; font-size: 10.5px; font-weight: 700; padding: 1px 7px; min-width: 20px; text-align: center; border-radius: 999px;
              background: var(--accent); color: var(--accent-ink); line-height: 1.5; }
.side--ink .nav__item.is-on .nav__badge { background: rgba(255,255,255,.22); }

.side__foot { border-top: 1px solid var(--line); padding: 10px 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.side--ink .side__foot { border-top-color: var(--side-line); }
.ws { position: relative; }
.ws__btn { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-s); border: 1px solid var(--line);
           background: var(--card); text-align: left; min-width: 0; transition: border-color var(--t) var(--ease), background var(--t) var(--ease); }
.ws__btn:hover { border-color: var(--line-3); background: var(--card-2); }
.ws__btn .ic { color: var(--ink-3); margin-left: auto; }
.ws__txt, .pop__txt, .me__txt { min-width: 0; display: flex; flex-direction: column; flex: 1; }
.ws__txt b, .pop__txt b, .me__txt b { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws__txt small, .pop__txt small, .me__txt small { font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side--ink .ws__btn { background: rgba(255,255,255,.04); border-color: var(--side-line); color: #fff; }
.side--ink .ws__btn:hover { background: rgba(255,255,255,.08); }
.side--ink .ws__txt small, .side--ink .me__txt small { color: var(--side-dim); }
.ws__pop { bottom: calc(100% + 6px); left: 0; right: 0; }

.me { display: flex; align-items: center; gap: 10px; padding: 4px 4px 0; }
.me__txt b { color: var(--ink); }
.side--ink .me__txt b { color: #fff; }
.me__out { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 9px; color: var(--ink-3);
           transition: background var(--t) var(--ease), color var(--t) var(--ease); }
.me__out:hover { background: var(--danger-bg); color: var(--danger); }
.side--ink .me__out { color: var(--side-dim); }
.side--ink .me__out:hover { background: rgba(255,255,255,.08); color: #fff; }

/* popover (generic) */
.pop { position: absolute; z-index: 80; min-width: 220px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-s);
       box-shadow: var(--shadow-lg); padding: 6px; opacity: 0; visibility: hidden; transform: translateY(4px);
       transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility 0s var(--t); color: var(--ink); }
.pop.open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.pop__lbl { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); padding: 8px 10px 4px; }
.pop__item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; min-width: 0; }
.pop__item:hover { background: var(--card-2); }
.pop__item.is-on { background: var(--accent-soft); }
.pop__item.is-on .ic { color: var(--accent); }
.pop__item .ic { margin-left: auto; }

/* scrim + drawer state (≤820px) */
.scrim { position: fixed; inset: 0; background: rgba(16,24,40,.45); z-index: 55; opacity: 0; visibility: hidden;
         transition: opacity var(--t-slow) var(--ease), visibility 0s var(--t-slow); backdrop-filter: blur(2px); }
html.drawer-open .scrim { opacity: 1; visibility: visible; transition-delay: 0s; }

/* main column */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.top { position: sticky; top: 0; z-index: 40; min-height: var(--top-h); display: flex; align-items: center; gap: 14px; padding: 10px 28px;
       background: rgba(245,246,248,.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.top__menu { display: none; width: 40px; height: 40px; border-radius: var(--r-s); border: 1px solid var(--line); background: var(--card);
             place-items: center; color: var(--ink); flex: none; }
.top__title { min-width: 0; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.top__title h1 { font-family: var(--display); font-size: 20px; font-weight: 700; letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kicker { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); line-height: 1.3; }
.top__right { display: flex; align-items: center; gap: 8px; flex: none; }
.top__cmd { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 8px 0 11px; border-radius: var(--r-s); border: 1px solid var(--line);
            background: var(--card); color: var(--ink-3); font-size: 13px; transition: border-color var(--t) var(--ease), color var(--t) var(--ease); }
.top__cmd:hover { border-color: var(--line-3); color: var(--ink-2); }
.top__cmdtxt { min-width: 90px; text-align: left; }
.evsw { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 8px 0 12px; border-radius: 999px; border: 1px solid var(--line);
        background: var(--card); font-weight: 600; font-size: 13px; position: relative; cursor: pointer; max-width: 300px;
        transition: border-color var(--t) var(--ease); }
.evsw:hover { border-color: var(--line-3); }
.evsw select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; padding-right: 22px; cursor: pointer; max-width: 230px;
               white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.evsw__chev { position: absolute; right: 8px; color: var(--ink-3); pointer-events: none; width: 16px; height: 16px; }

.content { width: 100%; max-width: var(--content-w); margin: 0 auto; padding: 28px 28px 80px; }
.content > * + * { margin-top: 20px; }

/* page header inside content (optional, for pages that need a sub-title) */
.ph { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ph h2 { font-family: var(--display); font-size: 17px; }
.ph p { color: var(--ink-2); font-size: 13.5px; margin-top: 2px; }
.ph__acts { display: flex; gap: 8px; flex-wrap: wrap; }

/* ------------------------------------------------------------------ 4. buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: var(--r-s);
       font-size: 13.5px; font-weight: 600; white-space: nowrap; border: 1px solid var(--line); background: var(--card); color: var(--ink);
       cursor: pointer; user-select: none; touch-action: manipulation; line-height: 1;
       transition: background var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease), transform 100ms var(--ease), box-shadow var(--t) var(--ease); }
.btn .ic { width: 16px; height: 16px; }
.btn:hover { background: var(--card-2); border-color: var(--line-3); }
.btn:active { transform: scale(.985); }
.btn[aria-disabled="true"], .btn:disabled { opacity: .45; pointer-events: none; }
.btn--pri { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: 0 1px 2px rgba(16,24,40,.08), inset 0 1px 0 rgba(255,255,255,.12); }
.btn--pri:hover { background: color-mix(in srgb, var(--accent) 88%, #000); border-color: color-mix(in srgb, var(--accent) 88%, #000); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn--ghost:hover { background: var(--card-3); color: var(--ink); border-color: transparent; }
.btn--danger { color: var(--danger); background: transparent; border-color: transparent; }
.btn--danger:hover { background: var(--danger-bg); border-color: var(--danger-line); }
.btn--outline-danger { color: var(--danger); border-color: var(--danger-line); }
.btn--outline-danger:hover { background: var(--danger-bg); }
.btn--sm { height: 31px; padding: 0 10px; font-size: 12.5px; border-radius: var(--r-xs); gap: 5px; }
.btn--sm .ic { width: 14px; height: 14px; }
.btn--lg { height: 44px; padding: 0 20px; font-size: 14.5px; }
.btn--icon { width: 38px; padding: 0; }
.btn--icon.btn--sm { width: 31px; }
.btn--block { width: 100%; }
.btn-group { display: inline-flex; gap: 6px; flex-wrap: wrap; }

/* ------------------------------------------------------------------ 5. cards & stats */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.card--flat { box-shadow: none; }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line-2); flex-wrap: wrap; }
.card__head h2, .card__t { font-family: var(--display); font-size: 15.5px; font-weight: 700; display: flex; align-items: center; gap: 9px; }
.card__head h2 .ic { color: var(--accent); }
.card__head p, .card__p { font-size: 12.5px; color: var(--ink-2); flex-basis: 100%; margin-top: -2px; }
.card__acts { display: flex; gap: 6px; margin-left: auto; }
.card__body { padding: 20px; }
.card__body--tight { padding: 0; }
.card__foot { padding: 12px 20px; border-top: 1px solid var(--line-2); background: var(--card-2); border-radius: 0 0 var(--r) var(--r);
              display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); }
.card > .table-wrap { border-radius: 0 0 var(--r) var(--r); }
.card > .table-wrap:first-child { border-radius: var(--r); }
.card > .empty { border: 0; background: transparent; }

.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.stat { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
        box-shadow: var(--shadow); min-width: 0; position: relative; transition: border-color var(--t) var(--ease), transform var(--t) var(--ease); }
a.stat:hover { border-color: var(--accent-line); transform: translateY(-1px); }
.stat__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.stat__lbl { font-size: 12px; font-weight: 600; color: var(--ink-2); letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat__ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none; }
.stat__ic .ic { width: 16px; height: 16px; }
.stat .num { font-family: var(--display); font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1.05; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat__sub { font-size: 12px; color: var(--ink-3); font-weight: 500; }
.stat--ok .stat__sub { color: var(--ok); }      .stat--ok .stat__ic { background: var(--ok-bg); color: var(--ok); }
.stat--warn .stat__sub { color: var(--warn); }  .stat--warn .stat__ic { background: var(--warn-bg); color: var(--warn); }
.stat--danger .stat__sub { color: var(--danger); } .stat--danger .stat__ic { background: var(--danger-bg); color: var(--danger); }
.stat--info .stat__sub { color: var(--info); }  .stat--info .stat__ic { background: var(--info-bg); color: var(--info); }
.stat--accent .num { color: var(--accent); }
.stat--mut .stat__ic { background: var(--card-3); color: var(--ink-3); }

/* ------------------------------------------------------------------ 6. tables */
.table-wrap { overflow: auto; max-height: min(78vh, 900px); -webkit-overflow-scrolling: touch; border-radius: var(--r); }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.table th { position: sticky; top: 0; z-index: 2; text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
            color: var(--ink-3); padding: 11px 16px; background: var(--card-2); border-bottom: 1px solid var(--line); white-space: nowrap; }
.table th:first-child { padding-left: 20px; }  .table th:last-child { padding-right: 20px; }
.table td { padding: 12px 16px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.table td:first-child { padding-left: 20px; }  .table td:last-child { padding-right: 20px; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background var(--t) var(--ease); }
.table tbody tr:hover td { background: var(--card-2); }
.table tr[data-href] { cursor: pointer; }
.table tr[data-href]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.table td.primary, .table .primary { font-weight: 600; color: var(--ink); }
.table td.num, .table th.num, .table .right { text-align: right; font-variant-numeric: tabular-nums; }
.table td.muted { color: var(--ink-3); }
.table td.actions { text-align: right; white-space: nowrap; }
.table td.actions .btn { opacity: .0; transition: opacity var(--t) var(--ease); }
.table tr:hover td.actions .btn, .table tr:focus-within td.actions .btn { opacity: 1; }
.table .check { width: 44px; padding-right: 0; }
.table .cell-2 { display: flex; flex-direction: column; min-width: 0; }
.table .cell-2 small { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.table .cell-av { display: flex; align-items: center; gap: 10px; min-width: 0; }
.table--compact td { padding-top: 8px; padding-bottom: 8px; }
.table .th-sort { display: inline-flex; align-items: center; gap: 4px; color: inherit; }
.table .th-sort .ic { width: 12px; height: 12px; }
.table .th-sort.is-on { color: var(--ink); }

/* ------------------------------------------------------------------ 7. tools (search / chips) */
.tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tools__sp { flex: 1; }
.tools__count { font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.search { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px 0 12px; border: 1px solid var(--line); border-radius: var(--r-s);
          background: var(--card); flex: 1 1 220px; max-width: 360px; min-width: 180px; transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.search .ic { color: var(--ink-3); width: 16px; height: 16px; }
.search input { flex: 1; min-width: 0; border: 0; background: none; outline: 0; font-size: 13.5px; }
.search input::placeholder { color: var(--ink-3); }
.search input::-webkit-search-cancel-button { display: none; }
.search__clear { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; color: var(--ink-3); }
.search__clear:hover { background: var(--card-3); color: var(--ink); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card);
        font-size: 12.5px; font-weight: 600; color: var(--ink-2); transition: background var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease); }
.chip:hover { border-color: var(--line-3); color: var(--ink); }
.chip.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip em { font-style: normal; font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: 999px; background: var(--card-3); color: var(--ink-2); line-height: 18px; }
.chip.is-on em { background: rgba(255,255,255,.2); color: #fff; }

/* ------------------------------------------------------------------ 8. pager */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 20px; border-top: 1px solid var(--line-2); font-size: 13px; }
.card .pager { background: var(--card-2); border-radius: 0 0 var(--r) var(--r); }
.pager__btns { display: flex; align-items: center; gap: 4px; }
.pager__n { min-width: 31px; height: 31px; padding: 0 8px; display: inline-grid; place-items: center; border-radius: var(--r-xs); font-size: 12.5px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
a.pager__n:hover { background: var(--card-3); color: var(--ink); }
.pager__n.is-on { background: var(--accent); color: var(--accent-ink); }
.pager__gap { color: var(--ink-4); padding: 0 4px; }
.pager .btn--sm + .pager__n, .pager .pager__n + .btn--sm { margin-left: 4px; }

/* ------------------------------------------------------------------ 9. pills · badges · dots */
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; line-height: 1.5;
        background: var(--card-3); color: var(--ink-2); }
.pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill--accent { background: var(--accent-soft); color: var(--accent); }
.pill--ok { background: var(--ok-bg); color: var(--ok); }
.pill--warn { background: var(--warn-bg); color: var(--warn); }
.pill--danger { background: var(--danger-bg); color: var(--danger); }
.pill--info { background: var(--info-bg); color: var(--info); }
.pill--mut { background: var(--card-3); color: var(--ink-2); }
.pill--ink { background: var(--ink); color: #fff; }
.badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; font-size: 11px; font-weight: 700;
         background: var(--accent); color: var(--accent-ink); line-height: 1; }
.badge--mut { background: var(--card-3); color: var(--ink-2); }
.badge--ok { background: var(--ok); color: #fff; }
.badge--danger { background: var(--danger); color: #fff; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--dot, var(--accent)); flex: none;
       box-shadow: 0 0 0 2px color-mix(in srgb, var(--dot, var(--accent)) 22%, transparent); }
.dot--sm { width: 7px; height: 7px; box-shadow: none; }
.dot--ok { --dot: var(--ok); } .dot--warn { --dot: var(--warn); } .dot--danger { --dot: var(--danger); } .dot--info { --dot: var(--info); } .dot--mut { --dot: var(--ink-4); }
.dot--live { animation: dot-pulse 1.6s ease-out infinite; }
@keyframes dot-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--dot, var(--accent)) 45%, transparent); } 100% { box-shadow: 0 0 0 8px transparent; } }

/* ------------------------------------------------------------------ 10. forms */
.form { display: flex; flex-direction: column; gap: 20px; }
.fsec { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.fsec__head { padding: 16px 22px 14px; border-bottom: 1px solid var(--line-2); }
.fsec__t { font-family: var(--display); font-size: 15.5px; }
.fsec__p { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }
.fsec__body { padding: 20px 22px 22px; }
.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 22px; }
.fgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field { min-width: 0; display: flex; flex-direction: column; }
.field--wide { grid-column: 1 / -1; }
.field--check { justify-content: flex-end; padding-top: 22px; }
.f-lb { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.f-opt { font-weight: 500; color: var(--ink-4); font-size: 11.5px; margin-left: 2px; }
.f-in { width: 100%; min-height: 40px; border: 1px solid var(--line); border-radius: var(--r-s); padding: 9px 12px; font-size: 14px; background: var(--card); color: var(--ink);
        transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), background var(--t) var(--ease); }
.f-in::placeholder { color: var(--ink-4); }
.f-in:hover { border-color: var(--line-3); }
.f-in:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.f-in:disabled, .f-in[readonly] { background: var(--card-2); color: var(--ink-2); }
.f-area { resize: vertical; min-height: 104px; line-height: 1.55; }
.f-select { appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%238A93A2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; }
.f-select[multiple] { background-image: none; padding-right: 12px; min-height: 120px; }
.f-check { width: 17px; height: 17px; accent-color: var(--accent); flex: none; margin: 0; cursor: pointer; }
.f-checkrow { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 500; color: var(--ink); cursor: pointer; min-height: 40px; }
.f-choices { display: flex; flex-direction: column; gap: 6px; list-style: none; }
.f-choices label { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.f-choices input { accent-color: var(--accent); }
.f-file { font-size: 13px; color: var(--ink-2); }
.f-file::file-selector-button { font: inherit; font-weight: 600; font-size: 12.5px; height: 31px; padding: 0 10px; margin-right: 10px; border-radius: var(--r-xs); border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; }
.f-row { display: flex; gap: 8px; align-items: center; }
.f-row .f-in { flex: 1; }
.f-addon { display: flex; align-items: stretch; }
.f-addon > span { display: grid; place-items: center; padding: 0 12px; border: 1px solid var(--line); border-right: 0; border-radius: var(--r-s) 0 0 var(--r-s); background: var(--card-2); color: var(--ink-3); font-size: 13px; }
.f-addon > .f-in { border-radius: 0 var(--r-s) var(--r-s) 0; }
.help { font-size: 12px; color: var(--ink-3); margin-top: 6px; line-height: 1.45; }
.err { font-size: 12px; color: var(--danger); font-weight: 600; margin-top: 6px; }
.field.is-invalid .f-in { border-color: var(--danger); }
.field.is-invalid .f-in:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 22%, transparent); }
.form__errors { border: 1px solid var(--danger-line); background: var(--danger-bg); color: var(--danger); border-radius: var(--r-s); padding: 12px 14px; font-size: 13px; }
.form__errors ul { margin-left: 18px; }
.danger-zone { border-color: var(--danger-line); }
.danger-zone .fsec__t { color: var(--danger); }

/* ------------------------------------------------------------------ 11. savebar */
.savebar { display: flex; align-items: center; gap: 10px; padding: 14px 20px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.savebar--sticky { position: sticky; bottom: 16px; z-index: 30; transition: box-shadow var(--t) var(--ease); }
.savebar--sticky.is-stuck { box-shadow: var(--shadow-lg); }
.savebar__sp { flex: 1; }
.savebar__note { font-size: 12.5px; }

/* ------------------------------------------------------------------ 12. empty */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 48px 24px; border: 1.5px dashed var(--line-3); border-radius: var(--r); background: var(--card); }
.empty__ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); margin-bottom: 6px; }
.empty__ic .ic { width: 24px; height: 24px; }
.empty__t { font-family: var(--display); font-size: 16px; }
.empty__p { color: var(--ink-2); font-size: 13.5px; max-width: 420px; }
.empty .btn { margin-top: 10px; }

/* ------------------------------------------------------------------ 13. tabs */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.tabs::-webkit-scrollbar { display: none; }
.tab { display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 14px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap;
       border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--t) var(--ease), border-color var(--t) var(--ease); }
.tab .ic { width: 16px; height: 16px; }
.tab:hover { color: var(--ink); }
.tab.is-on { color: var(--accent); border-bottom-color: var(--accent); }
.tab em { font-style: normal; font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: 999px; background: var(--card-3); color: var(--ink-2); line-height: 18px; }
.tab.is-on em { background: var(--accent-soft); color: var(--accent); }
.tabs--pills { border: 0; gap: 4px; padding: 4px; background: var(--card-3); border-radius: var(--r-s); width: max-content; max-width: 100%; }
.tabs--pills .tab { height: 32px; padding: 0 12px; border: 0; margin: 0; border-radius: 8px; font-size: 13px; }
.tabs--pills .tab.is-on { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }

/* ------------------------------------------------------------------ 14. toasts */
.toasts { position: fixed; right: 20px; top: 16px; z-index: 200; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 32px)); }
.toast { display: flex; align-items: center; gap: 10px; padding: 11px 10px 11px 14px; background: var(--ink); color: #fff; border-radius: 12px; font-size: 13px; font-weight: 500;
         box-shadow: var(--shadow-lg); animation: toast-in var(--t-slow) var(--ease); }
.toast__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--info); flex: none; }
.toast--ok .toast__dot { background: #34C26E; } .toast--warn .toast__dot { background: #F2B544; } .toast--danger .toast__dot { background: #F26A6A; }
.toast__txt { flex: 1; }
.toast__x { width: 26px; height: 26px; border-radius: 7px; color: rgba(255,255,255,.6); font-size: 18px; line-height: 1; display: grid; place-items: center; }
.toast__x:hover { background: rgba(255,255,255,.12); color: #fff; }
.toast--out { animation: toast-out 220ms var(--ease) forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-6px); } }

/* inline notices (non-transient) */
.notice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-s); font-size: 13px; border: 1px solid var(--line); background: var(--card-2); color: var(--ink-2); }
.notice .ic { margin-top: 1px; flex: none; }
.notice--ok { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }
.notice--warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }
.notice--danger { background: var(--danger-bg); border-color: var(--danger-line); color: var(--danger); }
.notice--info { background: var(--info-bg); border-color: var(--info-line); color: var(--info); }

/* ------------------------------------------------------------------ 15. dialog & palette */
.dialog, .palette { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; width: auto; height: auto; color: var(--ink); }
.dialog[open] { position: fixed; inset: 0; width: 100vw; height: 100dvh; margin: 0; display: grid; place-items: center; }
.dialog::backdrop, .palette::backdrop { background: rgba(16,24,40,.5); backdrop-filter: blur(3px); }
.dialog[open], .palette[open] { animation: dlg-in var(--t-slow) var(--ease); }
@keyframes dlg-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.dialog__box { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); display: flex; flex-direction: column; background: var(--card); border-radius: 16px; box-shadow: var(--shadow-lg); overflow: hidden; }
.dialog--sm .dialog__box { width: min(420px, calc(100vw - 32px)); }
.dialog--lg .dialog__box { width: min(760px, calc(100vw - 32px)); }
.dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--line-2); }
.dialog__t { font-family: var(--display); font-size: 17px; }
.dialog__p { font-size: 13px; color: var(--ink-2); margin-top: 2px; }
.dialog__x { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: var(--ink-3); flex: none; }
.dialog__x:hover { background: var(--card-3); color: var(--ink); }
.dialog__body { padding: 18px 20px; overflow: auto; }
.dialog__body .fgrid { gap: 14px 16px; }
.dialog__foot { display: flex; justify-content: flex-end; gap: 8px; padding-top: 18px; margin-top: 18px; border-top: 1px solid var(--line-2); }

.palette { margin: 0; position: fixed; inset: 0; width: 100vw; height: 100dvh; display: none; place-items: start center; padding-top: 12vh; }
.palette[open] { display: grid; }
.palette__box { width: min(600px, calc(100vw - 32px)); background: var(--card); border-radius: 16px; box-shadow: var(--shadow-lg); overflow: hidden; }
.palette__in { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line-2); }
.palette__in .ic { color: var(--ink-3); }
.palette__in input { flex: 1; border: 0; background: none; outline: 0; font-size: 16px; padding: 4px 0; }
.palette__in input::-webkit-search-cancel-button { display: none; }
.palette__list { max-height: 360px; overflow: auto; padding: 6px; }
.palette__item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; font-size: 14px; font-weight: 500; }
.palette__item .ic { color: var(--ink-3); }
.palette__item.is-sel { background: var(--accent-soft); color: var(--accent); }
.palette__item.is-sel .ic { color: var(--accent); }
.palette__lbl { flex: 1; }
.palette__grp { font-size: 12px; color: var(--ink-3); }
.palette__empty { padding: 24px; text-align: center; color: var(--ink-3); font-size: 13.5px; }

/* ------------------------------------------------------------------ 16. timeline (meetings hub agenda) */
.timeline { --tl-gutter: 64px; position: relative; display: flex; flex-direction: column; }
.timeline::before { content: ""; position: absolute; left: calc(var(--tl-gutter) + 5px); top: 6px; bottom: 6px; width: 2px; background: var(--line); border-radius: 2px; }
.tl-day { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); padding: 12px 0 8px calc(var(--tl-gutter) + 22px); }
.tl-item { display: grid; grid-template-columns: var(--tl-gutter) 12px minmax(0, 1fr); gap: 0 10px; align-items: start; padding: 4px 0; min-width: 0;
           --tl: var(--accent); --tl-bg: var(--accent-soft); }
.tl-item--ok { --tl: var(--ok); --tl-bg: var(--ok-bg); }   .tl-item--warn { --tl: var(--warn); --tl-bg: var(--warn-bg); }
.tl-item--danger { --tl: var(--danger); --tl-bg: var(--danger-bg); }  .tl-item--info { --tl: var(--info); --tl-bg: var(--info-bg); }
.tl-item--mut { --tl: var(--ink-4); --tl-bg: var(--card-3); }
.tl-item__time { text-align: right; padding-top: 9px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; line-height: 1.3; }
.tl-item__time small { display: block; font-weight: 500; color: var(--ink-4); font-size: 11px; }
.tl-item__dot { width: 12px; height: 12px; border-radius: 50%; margin-top: 11px; background: var(--tl); box-shadow: 0 0 0 3px var(--card); position: relative; z-index: 1; }
.tl-item__card { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 14px; border-radius: var(--r-s); background: var(--card); border: 1px solid var(--line);
                 border-left: 3px solid var(--tl); transition: border-color var(--t) var(--ease), transform var(--t) var(--ease), box-shadow var(--t) var(--ease); }
a.tl-item__card:hover { transform: translateX(2px); box-shadow: var(--shadow); border-color: var(--line-3); border-left-color: var(--tl); }
.tl-item__txt { min-width: 0; flex: 1; }
.tl-item__t { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-item__s { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-item__tag { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--tl-bg); color: var(--tl); white-space: nowrap; }
.tl-gap { padding: 6px 0 6px calc(var(--tl-gutter) + 22px); font-size: 11.5px; color: var(--ink-4); font-style: italic; }
.tl-now { display: grid; grid-template-columns: var(--tl-gutter) 12px minmax(0, 1fr); gap: 0 10px; align-items: center; padding: 2px 0; }
.tl-now span:first-child { text-align: right; font-size: 11px; font-weight: 700; color: var(--danger); }
.tl-now i { width: 8px; height: 8px; margin-left: 2px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 3px var(--card); position: relative; z-index: 1; }
.tl-now b { height: 2px; background: var(--danger); border-radius: 2px; display: block; }

/* ------------------------------------------------------------------ 17. progress (ring + bar) */
.progress { --p: 0; --size: 44px; --w: 5px; width: var(--size); height: var(--size); border-radius: 50%; display: grid; place-items: center; flex: none; position: relative;
            background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--line-2) 0); }
.progress::before { content: ""; position: absolute; inset: var(--w); border-radius: 50%; background: var(--card); }
.progress span { position: relative; font-size: calc(var(--size) * .26); font-weight: 700; font-variant-numeric: tabular-nums; }
.progress--ok { background: conic-gradient(var(--ok) calc(var(--p) * 1%), var(--line-2) 0); }
.progress--warn { background: conic-gradient(var(--warn) calc(var(--p) * 1%), var(--line-2) 0); }
.progress--lg { --size: 72px; --w: 7px; }
.bar { height: 8px; border-radius: 999px; background: var(--line-2); overflow: hidden; min-width: 60px; }
.bar > i { display: block; height: 100%; width: calc(var(--p, 0) * 1%); background: var(--accent); border-radius: 999px; transition: width 400ms var(--ease); }
.bar--ok > i { background: var(--ok); } .bar--warn > i { background: var(--warn); } .bar--danger > i { background: var(--danger); }
.bar--sm { height: 5px; }
.bar-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.bar-row .bar { flex: 1; }
.bar-row .num { min-width: 36px; text-align: right; }

/* ------------------------------------------------------------------ 18. misc */
.avatar { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
          background: var(--accent-soft); color: var(--accent); overflow: hidden; text-transform: uppercase; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--sm { width: 26px; height: 26px; font-size: 10px; }
.avatar--lg { width: 48px; height: 48px; font-size: 16px; }
.avatar--sq { border-radius: 9px; background: var(--card-2); border: 1px solid var(--line); }
.avatar--sq img { object-fit: contain; padding: 3px; background: #fff; }
.side--ink .avatar { background: rgba(255,255,255,.12); color: #fff; }
.avatars { display: flex; }
.avatars .avatar { box-shadow: 0 0 0 2px var(--card); margin-left: -6px; }
.avatars .avatar:first-child { margin-left: 0; }
.kbd { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 5px; border-radius: 5px; border: 1px solid var(--line); border-bottom-width: 2px;
       background: var(--card-2); font-family: var(--font); font-size: 11px; font-weight: 600; color: var(--ink-3); }
.mono { font-family: var(--mono); font-size: .93em; }
.num { font-variant-numeric: tabular-nums; }
.right { text-align: right; }
.center { text-align: center; }
.muted { color: var(--ink-3); }
.muted-2 { color: var(--ink-2); }
.small { font-size: 12.5px; }
.strong { font-weight: 600; }
.accent { color: var(--accent); }
.ok { color: var(--ok); } .warn { color: var(--warn); } .danger { color: var(--danger); } .info { color: var(--info); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.grid-2 > *, .grid-3 > * { min-width: 0; margin-top: 0; }
.grid-main { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 20px; }
.grid-main > * { min-width: 0; margin-top: 0; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.stack > * { margin-top: 0; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.sp { flex: 1; }
.mt-0 { margin-top: 0 !important; } .mt-1 { margin-top: 6px !important; } .mt-2 { margin-top: 12px !important; } .mt-3 { margin-top: 20px !important; } .mt-4 { margin-top: 32px !important; }
.mb-0 { margin-bottom: 0 !important; } .mb-2 { margin-bottom: 12px !important; } .mb-3 { margin-bottom: 20px !important; }
.hide { display: none !important; }
.list { list-style: none; }
.list > li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-2); min-width: 0; }
.list > li:last-child { border-bottom: 0; }
.list__txt { min-width: 0; flex: 1; }
.list__txt b { display: block; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list__txt small { display: block; font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 18px; font-size: 13.5px; }
.dl dt { color: var(--ink-3); font-weight: 500; }
.dl dd { min-width: 0; overflow-wrap: anywhere; }
.divider { height: 1px; background: var(--line-2); }
.event-card { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: var(--r); color: #fff; position: relative; overflow: hidden;
              background: linear-gradient(120deg, var(--accent), color-mix(in srgb, var(--accent-2) 70%, var(--accent))); }
.event-card::after { content: ""; position: absolute; right: -50px; bottom: -80px; width: 220px; height: 220px; border-radius: 50%; background: rgba(255,255,255,.12); }
.event-card__t { font-family: var(--display); font-size: 19px; font-weight: 700; }
.event-card__s { font-size: 12.5px; opacity: .9; }
.event-card .btn { position: relative; background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.3); color: #fff; margin-left: auto; }
.event-card .btn:hover { background: rgba(255,255,255,.26); }

/* bottom tab bar (stand, ≤820px) */
.tabbar { display: none; }

/* ------------------------------------------------------------------ 19. responsive */
@media (max-width: 1100px) {
  /* icon rail */
  .side { width: var(--side-rail); }
  .brand { padding: 14px 12px 6px; }
  .brand__card { justify-content: center; padding: 8px 0; }
  .brand__txt, .nav__txt, .nav__lbl, .ws__txt, .me__txt { display: none; }
  .nav { padding: 4px 12px 16px; }
  .nav__grp + .nav__grp { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-2); }
  .side--ink .nav__grp + .nav__grp { border-top-color: var(--side-line); }
  .nav__item { justify-content: center; padding: 10px 0; }
  .nav__badge { position: absolute; top: 4px; right: 4px; min-width: 16px; padding: 0 4px; font-size: 9.5px; }
  .ws__btn { justify-content: center; padding: 8px 0; }
  .ws__btn .ic { margin: 0; }
  .ws__pop { left: 0; right: auto; min-width: 240px; }
  .me { flex-direction: column; gap: 6px; padding: 4px 0 0; }
  .content { padding: 24px 22px 80px; }
  .top { padding: 10px 22px; }
  .top__cmdtxt { display: none; }
  .top__cmd { padding: 0 8px 0 10px; }
}
@media (max-width: 820px) {
  /* drawer */
  .side { position: fixed; top: 0; left: 0; bottom: 0; width: var(--side-w); height: 100dvh; transform: translateX(-100%); box-shadow: var(--shadow-lg); }
  .brand { padding: 16px 14px 8px; }
  .brand__card { justify-content: flex-start; padding: 10px; }
  .brand__txt, .nav__txt, .nav__lbl, .ws__txt, .me__txt { display: flex; }
  .nav { padding: 4px 12px 16px; }
  .nav__grp + .nav__grp { margin-top: 6px; padding-top: 0; border-top: 0; }
  .nav__item { justify-content: flex-start; padding: 9px 12px; }
  .nav__badge { position: static; min-width: 20px; padding: 1px 7px; font-size: 10.5px; }
  .ws__btn { justify-content: flex-start; padding: 8px 10px; }
  .ws__btn .ic { margin-left: auto; }
  .ws__pop { left: 0; right: 0; }
  .me { flex-direction: row; gap: 10px; padding: 4px 4px 0; }
  html.drawer-open .side { transform: none; }
  html.drawer-open { overflow: hidden; }
  .top { padding: 8px 16px; gap: 10px; min-height: 58px; }
  .top__menu { display: grid; }
  .top__title h1 { font-size: 17px; }
  .kicker { font-size: 10px; }
  .top__right .btn span { display: none; }
  .top__right .btn { width: 38px; padding: 0; }
  .top__right .btn .ic { width: 18px; height: 18px; }
  .top__cmd .kbd { display: none; }
  .evsw { max-width: 170px; padding-left: 10px; }
  .evsw select { max-width: 120px; font-size: 12.5px; }
  .content { padding: 18px 16px 100px; }
  .content > * + * { margin-top: 16px; }
  .fgrid, .fgrid--3, .grid-2, .grid-3, .grid-main { grid-template-columns: 1fr; }
  .field--check { padding-top: 0; }
  .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat { padding: 14px; }
  .stat .num { font-size: 24px; }
  .fsec__head, .fsec__body { padding-left: 16px; padding-right: 16px; }
  .card__head, .card__body, .card__foot { padding-left: 16px; padding-right: 16px; }
  .table th, .table td { padding-left: 12px; padding-right: 12px; }
  .table th:first-child, .table td:first-child { padding-left: 16px; }
  .table th:last-child, .table td:last-child { padding-right: 16px; }
  .table td.actions .btn { opacity: 1; }
  .search { max-width: none; flex-basis: 100%; }
  .savebar--sticky { bottom: 12px; }
  html.ws-stand .savebar--sticky { bottom: calc(var(--tab-h) + 10px); }
  .toasts { left: 16px; right: 16px; top: auto; bottom: 16px; max-width: none; }
  html.ws-stand .toasts { bottom: calc(var(--tab-h) + 12px); }
  .timeline { --tl-gutter: 46px; }
  .tl-item__tag { display: none; }
  .pager { padding: 12px 16px; }
  .pager__n:not(.is-on) { display: none; }
  .event-card { flex-wrap: wrap; }
  .event-card .btn { margin-left: 0; }
  /* stand: bottom tab bar (first 5 nav items) */
  html.ws-stand .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; height: calc(var(--tab-h) + env(safe-area-inset-bottom));
                          padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
                          border-top: 1px solid var(--line); }
  .tabbar__item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 10px; font-size: 10.5px; font-weight: 600;
                  color: var(--ink-3); position: relative; min-width: 0; }
  .tabbar__item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .tabbar__item .ic { width: 22px; height: 22px; }
  .tabbar__item.is-on { color: var(--accent); }
  .tabbar__badge { position: absolute; top: 2px; right: calc(50% - 20px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--accent); color: var(--accent-ink);
                   font-size: 9.5px; font-weight: 700; font-style: normal; display: grid; place-items: center; line-height: 1; }
}
@media (max-width: 480px) {
  .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .top__right { gap: 6px; }
  .evsw { display: none; }
  .dialog__box { width: calc(100vw - 20px); }
}
/* narrow desktop between 820 and 1100 keeps the rail; content padding already tuned */

/* ------------------------------------------------------------------ 20. print */
@media print {
  .side, .scrim, .top__menu, .top__right, .tabbar, .toasts, .savebar, .tools, .pager__btns, .palette { display: none !important; }
  .app { display: block; }
  body { background: #fff; }
  .content { max-width: none; padding: 0; }
  .card, .stat, .fsec { box-shadow: none; break-inside: avoid; }
  .table th { position: static; }
  .table-wrap { max-height: none; overflow: visible; }
  a[href]::after { content: ""; }
}
.img-fallback { font-family: var(--display); font-weight: 800; font-size: 13px; letter-spacing: .04em; }

/* ------------------------------------------------------------------ 21. onboarding (journey cards + embedded Hub form) */
.jgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.jcard { display: flex; flex-direction: column; }
.jcard__head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 12px; }
.jcard__ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none; }
.jcard__t { min-width: 0; flex: 1; }
.jcard__t b { display: block; font-family: var(--display); font-size: 15.5px; font-weight: 700; line-height: 1.3; }
.jcard__t small { display: block; font-size: 12px; color: var(--ink-3); }
.jcard__body { padding: 0 20px 16px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.jcard__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--ink-2); }
.jcard__meta .ic { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; margin-right: 4px; color: var(--ink-3); }
.jcard__meta .is-late, .jcard__meta .is-late .ic { color: var(--danger); font-weight: 600; }
.jcard__miss { list-style: none; display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--ink-2); }
.jcard__miss li { display: flex; gap: 8px; align-items: flex-start; }
.jcard__miss li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--warn); margin-top: 7px; flex: none; }
.jcard__lbl { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.jcard .card__foot { margin-top: auto; display: flex; align-items: center; gap: 10px; }
.ob-hero { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.ob-hero__txt { min-width: 0; flex: 1; }
.ob-hero__txt b { display: block; font-family: var(--display); font-size: 20px; font-weight: 700; }
.ob-hero__txt span { font-size: 13px; color: var(--ink-2); }
.ob-frame { overflow: hidden; padding: 0; position: relative; }
.ob-frame iframe { display: block; width: 100%; border: 0; min-height: 600px; height: 600px; background: transparent; transition: opacity var(--t-slow) var(--ease); }
.ob-frame.is-loading iframe { opacity: 0; position: absolute; inset: 0; }
.ob-skel { padding: 24px; display: none; flex-direction: column; gap: 14px; min-height: 600px; }
.ob-frame.is-loading .ob-skel { display: flex; }
.ob-skel i { display: block; height: 14px; border-radius: 7px; background: linear-gradient(90deg, var(--line-2) 0%, var(--card-3) 50%, var(--line-2) 100%); background-size: 200% 100%; animation: ob-shimmer 1.2s linear infinite; }
.ob-skel i.h { height: 22px; width: 40%; } .ob-skel i.s { width: 60%; } .ob-skel i.b { height: 44px; border-radius: var(--r-s); }
@keyframes ob-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .ob-skel i { animation: none; } }
.ob-status { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ob-deadline { margin-bottom: 14px; font-size: 13.5px; align-items: center; }
.ob-deadline .ic { width: 18px; height: 18px; flex: none; }
.dl-list li { align-items: center; }
.ob-status .bar-row { flex: 1; min-width: 180px; max-width: 360px; }

/* ------------------------------------------------------------------ allowances (package limits) */
.allow-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.allow { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 8px 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-size: 12.5px; min-height: 34px; max-width: 100%; }
.allow__lbl { color: var(--ink-3); font-weight: 600; }
.allow__num { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.allow.is-open .allow__num { color: var(--ink-2); font-weight: 600; }
.allow.is-full { border-color: var(--warn-line); background: var(--warn-bg); }
.allow.is-full .allow__num { color: var(--warn); }
.allow__btn { padding-top: 2px; padding-bottom: 2px; min-height: 0; }
.allow-notice { align-items: center; flex-wrap: wrap; }
.allow-notice__txt { flex: 1; min-width: 200px; }
.allow-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.allow-list li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.allow-list .bar-row { flex: 1; min-width: 120px; }
.switch-form { display: inline; }