/* =============================================================================
   PASSMYLISTING DESIGN KIT  (broker-kit.css) — shared with PassMyTicket (upstream: app/static/css/pmt.css).
   Source of truth lives in the PassMyTicket repo (app/static/css/pmt.css); re-copy, don't fork.
   -----------------------------------------------------------------------------
   One stylesheet governs every internal page. Load order in base.html:
       tailwind 2.2.19 CDN  →  pmt.css  →  page CSS / page <style>
   so tokens + components here win over Tailwind, and pages can still refine.

   Sections
     1. Tokens (light)            6. Feedback: badges, dots, banners, toasts
     2. Tokens (dark)             7. Overlays: menus, popovers, modals, drawers
     3. Base + typography         8. Data: tables, lists, key/value, skeletons
     4. App shell (sidebar)       9. Page scaffolding + empty/error states
     5. Controls: buttons, fields 10. Legacy bridge (Tailwind + old classes)

   Breakpoints (CSS vars can't drive media queries — keep these in sync):
     sm 640 · md 768 · lg 1024 (sidebar appears) · xl 1280 · 2xl 1536
   ========================================================================== */


/* ============================================================== 1. TOKENS */
:root {
    color-scheme: light;

    /* — Brand palette (Relate foundation) — */
    --c-canvas:     #fcfcfc;   /* Snow Canvas    */
    --c-wash:       #f0f4fe;   /* Lavender Wash  */
    --c-ink:        #020520;   /* Midnight Ink   */
    --c-graphite:   #14141e;   /* Graphite Body  */
    --c-slate:      #374151;   /* Slate Caption  */
    --c-ash:        #6b7280;   /* Ash Helper     */
    --c-stone:      #e2e8f0;   /* Stone Divider  */
    --c-fog:        #f1f5f9;   /* Fog Surface    */
    --c-royal:      #145aff;   /* Royal Signal   */
    --c-cobalt:     #3b82f6;   /* Cobalt Glow    */
    --c-mint:       #16ca2e;
    --c-coral:      #f26052;
    --c-amber:      #ffa64d;
    --c-azure:      #0099ff;   /* focus ring     */

    /* — Surfaces — */
    --bg-app:       #f5f7fc;            /* frame behind sidebar + sheet */
    --bg-canvas:    var(--c-canvas);    /* page sheet                   */
    --bg-surface:   #ffffff;            /* cards, menus, modals         */
    --bg-subtle:    #f8fafc;            /* table heads, quiet groups    */
    --bg-muted:     var(--c-fog);       /* inputs at rest (filled), chips */
    --bg-wash:      var(--c-wash);      /* accent-tinted bands          */
    --bg-hover:     rgba(2, 5, 32, 0.04);
    --bg-press:     rgba(2, 5, 32, 0.07);
    --bg-selected:  rgba(20, 90, 255, 0.07);
    --bg-inverse:   var(--c-ink);

    /* — Text — */
    --tx-ink:       var(--c-ink);       /* headings                     */
    --tx:           var(--c-graphite);  /* body                         */
    --tx-2:         var(--c-slate);     /* secondary                    */
    --tx-3:         var(--c-ash);       /* helper / meta                */
    --tx-4:         #9aa3b2;            /* placeholder / disabled only  */
    --tx-inverse:   #ffffff;
    --tx-link:      var(--c-royal);

    /* — Lines — */
    --ln:           var(--c-stone);
    --ln-soft:      #edf1f6;
    --ln-strong:    #cfd7e3;
    --ln-focus:     var(--c-azure);

    /* — Accent — */
    --ac:           var(--c-royal);
    --ac-hover:     #0f4fe8;
    --ac-press:     #0b43c9;
    --ac-tx:        var(--c-royal);
    --ac-soft:      rgba(20, 90, 255, 0.08);
    --ac-soft-2:    rgba(20, 90, 255, 0.14);
    --ac-line:      rgba(20, 90, 255, 0.32);
    --ring:         0 0 0 3px rgba(0, 153, 255, 0.22);
    --ring-tight:   0 0 0 2px var(--bg-surface), 0 0 0 4px rgba(0, 153, 255, 0.55);

    /* — Semantic (text / solid / soft / line) — */
    --ok-tx:   #0f8a2a;  --ok:   #16b22c;  --ok-dot:   var(--c-mint);  --ok-soft:   rgba(22, 202, 46, 0.10);  --ok-line:   rgba(22, 178, 44, 0.28);
    --warn-tx: #a75a06;  --warn: #f59a3c;  --warn-dot: var(--c-amber); --warn-soft: rgba(255, 166, 77, 0.14); --warn-line: rgba(245, 154, 60, 0.36);
    --bad-tx:  #c8352a;  --bad:  #e5483b;  --bad-dot:  var(--c-coral); --bad-soft:  rgba(242, 96, 82, 0.10);  --bad-line:  rgba(229, 72, 59, 0.30);
    --info-tx: #1d5fd8;  --info: var(--c-cobalt); --info-dot: var(--c-cobalt); --info-soft: rgba(59, 130, 246, 0.10); --info-line: rgba(59, 130, 246, 0.30);
    --neu-tx:  var(--c-slate); --neu-dot: #a3acba; --neu-soft: var(--c-fog); --neu-line: var(--c-stone);

    /* — Typography — */
    --font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --fs-2xs: 11px;  --fs-xs: 12px;  --fs-sm: 13px;  --fs-md: 14px;  --fs-base: 15px;
    --fs-lg: 16px;   --fs-xl: 18px;  --fs-2xl: 20px; --fs-3xl: 24px; --fs-4xl: 30px; --fs-5xl: 40px;
    --lh-tight: 1.15; --lh-snug: 1.35; --lh-body: 1.5;
    --tr-display: -0.032em; --tr-title: -0.022em; --tr-head: -0.012em; --tr-caps: 0.06em;

    /* — Spacing (4px rhythm with the reference's 6/10 half-steps) — */
    --sp-1: 4px;  --sp-1h: 6px; --sp-2: 8px;  --sp-2h: 10px; --sp-3: 12px; --sp-4: 16px;
    --sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 32px;  --sp-10: 40px; --sp-13: 52px; --sp-18: 72px;

    /* — Radii: two-tier (inner 6–10, containers 14–20) + pill — */
    --r-xs: 6px; --r-sm: 8px; --r-md: 10px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 20px; --r-pill: 9999px;

    /* — Elevation — */
    --sh-hair:  0 0 4px -2px rgba(0, 0, 0, 0.10);
    --sh-xs:    0 1px 2px rgba(2, 5, 32, 0.04);
    --sh-sm:    0 0.36px 1.8px -1.4px rgba(0, 0, 0, 0.08), 0 1.37px 6.87px -2.8px rgba(0, 0, 0, 0.07);
    --sh-md:    0 0.36px 1.8px -1.4px rgba(0, 0, 0, 0.08), 0 1.37px 6.87px -2.8px rgba(0, 0, 0, 0.07), 0 6px 30px -4.25px rgba(0, 0, 0, 0.05);
    --sh-pop:   0 0 0 1px rgba(2, 5, 32, 0.06), 0 12px 32px -8px rgba(2, 5, 32, 0.16), 0 2px 6px -2px rgba(2, 5, 32, 0.06);
    --sh-modal: 0 0 0 1px rgba(2, 5, 32, 0.06), 0 32px 64px -16px rgba(2, 5, 32, 0.28), 0 6px 16px -6px rgba(2, 5, 32, 0.10);
    --sh-glow:  0 0 100px -28px rgba(20, 90, 255, 0.10);
    --sh-glow-2: 0 0 50px -28px rgba(20, 90, 255, 0.10), 0 0 3px -1px rgba(0, 0, 0, 0.18);
    --sh-btn:   0 1px 2px rgba(2, 5, 32, 0.06), inset 0 -1px 0 rgba(2, 5, 32, 0.04);
    --sh-btn-ac: 0 1px 2px rgba(20, 90, 255, 0.28), 0 4px 12px -4px rgba(20, 90, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.16);

    --scrim: rgba(8, 12, 32, 0.38);

    /* — Motion — */
    --ease:      cubic-bezier(0.2, 0, 0, 1);       /* standard / exits      */
    --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);    /* enters, no overshoot  */
    --ease-io:   cubic-bezier(0.4, 0, 0.2, 1);
    --d-1: 120ms; --d-2: 160ms; --d-3: 220ms; --d-4: 300ms;

    /* — Sizing — */
    --h-xs: 24px; --h-sm: 30px; --h-md: 36px; --h-lg: 42px;
    --sb-w: 252px;              /* sidebar width */
    --sb-w-collapsed: 68px;
    --topbar-h: 56px;           /* mobile top bar */
    --app-gap: 8px;             /* frame gap around the sheet (desktop) */
    --sticky-top: 0px;          /* where sticky page bars park */
    --page-max: 1320px;

    /* — Layers — */
    --z-sticky: 20; --z-sidebar: 40; --z-topbar: 45; --z-drop: 70; --z-modal: 90; --z-toast: 120;
}


/* ============================================================== 2. DARK */
html.dark {
    color-scheme: dark;

    --bg-app:      #08090f;
    --bg-canvas:   #0e1018;
    --bg-surface:  #141722;
    --bg-subtle:   #11131c;
    --bg-muted:    #1a1e2b;
    --bg-wash:     #121a33;
    --bg-hover:    rgba(255, 255, 255, 0.045);
    --bg-press:    rgba(255, 255, 255, 0.08);
    --bg-selected: rgba(77, 130, 255, 0.14);
    --bg-inverse:  #f4f6fb;

    --tx-ink:      #f5f7fc;
    --tx:          #e4e7ef;
    --tx-2:        #b6bccb;
    --tx-3:        #8b93a5;
    --tx-4:        #5c6477;
    --tx-inverse:  #0e1018;
    --tx-link:     #7ea4ff;

    --ln:          #232838;
    --ln-soft:     #1c202d;
    --ln-strong:   #313849;

    --ac:          #3d74ff;
    --ac-hover:    #5586ff;
    --ac-press:    #2f63e8;
    --ac-tx:       #86aaff;
    --ac-soft:     rgba(77, 130, 255, 0.13);
    --ac-soft-2:   rgba(77, 130, 255, 0.22);
    --ac-line:     rgba(77, 130, 255, 0.42);
    --ring:        0 0 0 3px rgba(0, 153, 255, 0.32);
    --ring-tight:  0 0 0 2px var(--bg-surface), 0 0 0 4px rgba(0, 153, 255, 0.7);

    --ok-tx: #5ee07a;   --ok-soft: rgba(22, 202, 46, 0.13);   --ok-line: rgba(22, 202, 46, 0.32);
    --warn-tx: #ffbe7a; --warn-soft: rgba(255, 166, 77, 0.13); --warn-line: rgba(255, 166, 77, 0.34);
    --bad-tx: #ff8a7e;  --bad-soft: rgba(242, 96, 82, 0.14);   --bad-line: rgba(242, 96, 82, 0.36);
    --info-tx: #8ab4ff; --info-soft: rgba(59, 130, 246, 0.14); --info-line: rgba(59, 130, 246, 0.36);
    --neu-tx: #b6bccb;  --neu-soft: #1a1e2b; --neu-line: #2a3041; --neu-dot: #6b7386;

    --sh-hair:  0 0 0 1px rgba(255, 255, 255, 0.02);
    --sh-xs:    0 1px 2px rgba(0, 0, 0, 0.4);
    --sh-sm:    0 1px 2px rgba(0, 0, 0, 0.45), 0 2px 8px -2px rgba(0, 0, 0, 0.35);
    --sh-md:    0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px -6px rgba(0, 0, 0, 0.5);
    --sh-pop:   0 0 0 1px rgba(255, 255, 255, 0.06), 0 16px 40px -8px rgba(0, 0, 0, 0.7);
    --sh-modal: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 32px 80px -16px rgba(0, 0, 0, 0.8);
    --sh-glow:  0 0 100px -28px rgba(61, 116, 255, 0.25);
    --sh-glow-2: 0 0 0 1px rgba(255, 255, 255, 0.03);
    --sh-btn:   0 1px 2px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    --sh-btn-ac: 0 1px 2px rgba(0, 0, 0, 0.5), 0 4px 14px -4px rgba(61, 116, 255, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.14);

    --scrim: rgba(0, 0, 0, 0.58);
}


/* ============================================================== 3. BASE */
html { -webkit-text-size-adjust: 100%; }
html, body { background: var(--bg-app); }
body {
    font-family: var(--font);
    font-size: var(--fs-md);
    line-height: var(--lh-body);
    color: var(--tx);
    font-feature-settings: 'cv11', 'ss01', 'ss03';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
* { -webkit-tap-highlight-color: transparent; }
::selection { background: rgba(20, 90, 255, 0.18); }
:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--ring-tight); }
input, select, textarea, button { font-family: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

h1, h2, h3, h4, h5 { color: var(--tx-ink); letter-spacing: var(--tr-head); }
a { color: inherit; text-decoration: none; }
code, kbd, .pm-mono { font-family: var(--font-mono); font-size: 0.92em; letter-spacing: -0.02em; }
.pm-num, .pm-tabular { font-variant-numeric: tabular-nums; }

/* Scrollbars: thin, neutral, never decorative */
* { scrollbar-width: thin; scrollbar-color: var(--ln-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ln-strong); border-radius: 9999px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--tx-4); }

/* Type helpers */
.pm-t-display { font-size: var(--fs-5xl); line-height: 1.05; font-weight: 600; letter-spacing: var(--tr-display); color: var(--tx-ink); }
.pm-t-title   { font-size: var(--fs-3xl); line-height: var(--lh-tight); font-weight: 600; letter-spacing: var(--tr-title); color: var(--tx-ink); }
.pm-t-h2      { font-size: var(--fs-xl); line-height: var(--lh-snug); font-weight: 600; letter-spacing: var(--tr-head); color: var(--tx-ink); }
.pm-t-h3      { font-size: var(--fs-base); line-height: var(--lh-snug); font-weight: 600; letter-spacing: -0.006em; color: var(--tx-ink); }
.pm-t-body    { font-size: var(--fs-md); color: var(--tx-2); }
.pm-t-sm      { font-size: var(--fs-sm); color: var(--tx-2); }
.pm-t-meta    { font-size: var(--fs-xs); color: var(--tx-3); }
.pm-t-eyebrow { font-size: var(--fs-xs); font-weight: 500; color: var(--ac-tx); letter-spacing: 0; }
.pm-t-caps    { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--tx-3); }
.pm-t-muted   { color: var(--tx-3); }
.pm-t-ink     { color: var(--tx-ink); }
.pm-t-accent  { color: var(--ac-tx); }
.pm-t-ok { color: var(--ok-tx); } .pm-t-warn { color: var(--warn-tx); } .pm-t-bad { color: var(--bad-tx); }
.pm-t-trunc   { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

.pm-link { color: var(--tx-link); font-weight: 500; text-underline-offset: 3px; transition: color var(--d-1) var(--ease); }
.pm-link:hover { text-decoration: underline; text-decoration-color: var(--ac-line); }

.sr-only, .pm-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }


/* ============================================================== 4. APP SHELL */
/* Frame: tinted app background, fixed sidebar, content on a rounded sheet.
   The sheet does NOT scroll itself (window scroll is kept so existing
   sticky bars, scroll listeners and fixed modals keep working). */
.app { min-height: 100vh; }

.sb {
    position: fixed; z-index: var(--z-sidebar);
    top: 0; bottom: 0; left: 0;
    width: var(--sb-w);
    display: flex; flex-direction: column;
    padding: 12px 10px 10px;
    background: var(--bg-app);
    transition: width var(--d-3) var(--ease), transform var(--d-4) var(--ease-out);
}
.sb-head { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 4px 0 6px; margin-bottom: 14px; }
.sb-brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; flex: 1; border-radius: var(--r-sm); padding: 2px; }
.sb-mark {
    flex-shrink: 0; display: block; width: 34px; height: 20px;
    filter: drop-shadow(0 1px 1.5px rgba(99, 102, 241, 0.35));
    transition: transform var(--d-2) var(--ease-out);
}
.sb-brand:hover .sb-mark { transform: translateX(1px); }
.sb-word { min-width: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.02em; color: var(--tx-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-word b { font-weight: 600; color: var(--ac-tx); }

.sb-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; margin: 0 -4px; padding: 0 4px; }
.sb-section + .sb-section { margin-top: 18px; }
.sb-label { display: block; padding: 0 10px 6px; font-size: var(--fs-2xs); font-weight: 500; color: var(--tx-3); white-space: nowrap; letter-spacing: 0.01em; }
.sb-nav { display: flex; flex-direction: column; gap: 1px; position: relative; }

.sb-link {
    position: relative;
    display: flex; align-items: center; gap: 10px;
    height: 34px; padding: 0 10px;
    border-radius: var(--r-md);
    font-size: var(--fs-md); font-weight: 500; color: var(--tx-2);
    white-space: nowrap;
    transition: background-color var(--d-1) var(--ease), color var(--d-1) var(--ease), box-shadow var(--d-2) var(--ease);
}
.sb-link > i { font-size: 18px; line-height: 1; width: 18px; text-align: center; color: var(--tx-3); transition: color var(--d-1) var(--ease); flex-shrink: 0; }
.sb-link:hover { background: var(--bg-hover); color: var(--tx-ink); }
.sb-link:hover > i { color: var(--tx-2); }
.sb-link:active { background: var(--bg-press); }
.sb-link[aria-current="page"] {
    background: var(--bg-surface); color: var(--tx-ink); font-weight: 500;
    box-shadow: 0 0 0 1px var(--ln), 0 1px 2px rgba(2, 5, 32, 0.05);
}
.sb-link[aria-current="page"] > i { color: var(--ac); }
.sb-link[aria-current="page"]::before {
    content: ''; position: absolute; left: -10px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--ac);
}
.sb-link-meta { margin-left: auto; font-size: var(--fs-2xs); font-weight: 500; color: var(--tx-3); font-variant-numeric: tabular-nums; }
.sb-link-label { overflow: hidden; text-overflow: ellipsis; }

.sb-foot { padding-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.sb-plan {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: var(--r-lg);
    background: var(--bg-surface); box-shadow: 0 0 0 1px var(--ln-soft);
    font-size: var(--fs-sm); color: var(--tx-2);
    transition: box-shadow var(--d-2) var(--ease), background-color var(--d-2) var(--ease);
}
.sb-plan:hover { box-shadow: 0 0 0 1px var(--ln), var(--sh-xs); }
.sb-plan-text { min-width: 0; flex: 1; line-height: 1.3; }
.sb-plan-title { color: var(--tx-ink); font-weight: 500; }
.sb-plan-sub { font-size: var(--fs-xs); color: var(--tx-3); }
.sb-plan > i { color: var(--tx-3); font-size: 16px; }

.sb-user {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 6px 8px; border-radius: var(--r-md);
    background: transparent; border: 0; text-align: left; color: var(--tx);
    transition: background-color var(--d-1) var(--ease);
}
.sb-user:hover, .sb-user[aria-expanded="true"] { background: var(--bg-hover); }
.sb-user-text { min-width: 0; flex: 1; line-height: 1.25; }
.sb-user-name { font-size: var(--fs-sm); font-weight: 500; color: var(--tx-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-user-mail { font-size: var(--fs-xs); color: var(--tx-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-user .ri-expand-up-down-line { color: var(--tx-3); font-size: 15px; }

.sb-collapse {
    display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-sm);
    color: var(--tx-3); background: transparent; border: 0; font-size: 16px; flex-shrink: 0;
    transition: background-color var(--d-1) var(--ease), color var(--d-1) var(--ease);
}
.sb-collapse:hover { background: var(--bg-hover); color: var(--tx-ink); }
.sb-close { display: none; }

/* Avatar */
.pm-avatar {
    display: inline-grid; place-items: center; flex-shrink: 0;
    width: 28px; height: 28px; border-radius: 50%;
    background: linear-gradient(160deg, #3d7bff, #145aff); color: #fff;
    font-size: 12px; font-weight: 600; letter-spacing: -0.01em;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}
.pm-avatar--lg { width: 36px; height: 36px; font-size: 14px; }
.pm-avatar--sq { border-radius: 9px; }

/* Main column + sheet */
.app-main { min-height: 100vh; padding: var(--app-gap) var(--app-gap) var(--app-gap) 0; margin-left: var(--sb-w); transition: margin-left var(--d-3) var(--ease); }
.app-sheet {
    position: relative;
    min-height: calc(100vh - var(--app-gap) * 2);
    background: var(--bg-canvas);
    border-radius: var(--r-xl);
    box-shadow: 0 0 0 1px var(--ln), var(--sh-glow-2);
    overflow: clip;
}
html.dark .app-sheet { box-shadow: 0 0 0 1px var(--ln); }
.app-sheet > .app-content { min-height: inherit; }

/* Auth-free pages (login, signup…) — no shell */
.app--bare .app-main { margin-left: 0; padding: 0; }
.app--bare .app-sheet { border-radius: 0; box-shadow: none; min-height: 100vh; background: var(--bg-canvas); }

/* Collapsed sidebar (desktop) */
html.sb-collapsed { --sb-w: var(--sb-w-collapsed); }
html.sb-collapsed .sb-word,
html.sb-collapsed .sb-label,
html.sb-collapsed .sb-link-label,
html.sb-collapsed .sb-link-meta,
html.sb-collapsed .sb-plan-text,
html.sb-collapsed .sb-plan > i,
html.sb-collapsed .sb-user-text,
html.sb-collapsed .sb-user .ri-expand-up-down-line { display: none; }
html.sb-collapsed .sb-head { flex-direction: column; height: auto; gap: 10px; padding: 0; }
html.sb-collapsed .sb-brand { flex: 0 0 auto; }
html.sb-collapsed .sb-link { justify-content: center; padding: 0; }
html.sb-collapsed .sb-label { display: block; height: 1px; padding: 0; margin: 0 10px 10px; background: var(--ln); font-size: 0; }
html.sb-collapsed .sb-plan { justify-content: center; padding: 10px 0; }
html.sb-collapsed .sb-user { justify-content: center; padding: 6px 0; }
html.sb-collapsed .sb-collapse i { transform: scaleX(-1); }

/* Tooltip for collapsed links */
.sb-tip {
    position: fixed; z-index: var(--z-drop); pointer-events: none;
    padding: 5px 9px; border-radius: var(--r-sm);
    background: var(--bg-inverse); color: var(--tx-inverse);
    font-size: var(--fs-xs); font-weight: 500; white-space: nowrap;
    opacity: 0; transform: translateX(-4px);
    transition: opacity var(--d-1) var(--ease), transform var(--d-1) var(--ease);
}
.sb-tip.is-on { opacity: 1; transform: none; }

/* Mobile top bar (hidden ≥ lg) */
.topbar {
    position: sticky; top: 0; z-index: var(--z-topbar);
    display: none; align-items: center; gap: 10px;
    height: var(--topbar-h); padding: 0 12px 0 8px;
    background: color-mix(in srgb, var(--bg-canvas) 88%, transparent);
    -webkit-backdrop-filter: saturate(160%) blur(12px); backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid var(--ln);
}
.topbar .sb-brand { flex: 1; }
.sb-scrim { display: none; }

@media (max-width: 1023.98px) {
    :root { --sticky-top: var(--topbar-h); }
    .topbar { display: flex; }
    .app-main { margin-left: 0; padding: 0; }
    .app-sheet { border-radius: 0; box-shadow: none; min-height: 100vh; overflow: visible; }
    .sb {
        width: min(300px, 86vw); padding-top: 10px;
        background: var(--bg-canvas);
        box-shadow: var(--sh-modal);
        transform: translateX(-104%);
        z-index: calc(var(--z-modal) - 1);
        visibility: hidden;
        transition: transform var(--d-4) var(--ease-out), visibility 0s linear var(--d-4);
    }
    .sb.is-open { transform: none; visibility: visible; transition: transform var(--d-4) var(--ease-out), visibility 0s; }
    .sb .sb-collapse { display: none; }
    .sb .sb-close { display: grid; margin-left: auto; }
    .sb-scrim {
        display: block; position: fixed; inset: 0; z-index: calc(var(--z-modal) - 2);
        background: var(--scrim); opacity: 0; pointer-events: none;
        transition: opacity var(--d-3) var(--ease);
    }
    .sb-scrim.is-open { opacity: 1; pointer-events: auto; }
    html.sb-collapsed { --sb-w: 252px; }
    html.sb-collapsed .sb-word, html.sb-collapsed .sb-label, html.sb-collapsed .sb-link-label,
    html.sb-collapsed .sb-plan-text, html.sb-collapsed .sb-user-text { display: initial; }
    .sb-link { height: 40px; font-size: var(--fs-base); }
}

/* Impersonation strip — sits atop the sheet */
.pm-imp-strip {
    position: sticky; top: var(--sticky-top); z-index: calc(var(--z-sticky) + 5);
    display: flex; align-items: center; gap: 12px;
    padding: 8px 12px 8px 16px;
    background: var(--c-ink); color: #fff; font-size: var(--fs-sm);
}
.pm-imp-strip .pm-dot { background: var(--c-coral); box-shadow: 0 0 0 3px rgba(242, 96, 82, 0.25); }
.pm-imp-strip strong { font-weight: 600; }
.pm-imp-strip-meta { color: rgba(255, 255, 255, 0.6); }
html.dark .pm-imp-strip { background: #1d0f12; box-shadow: inset 0 -1px 0 rgba(242, 96, 82, 0.35); }

/* Announcement — quiet wash band, accent dot carries the type */
.pm-announce {
    display: flex; align-items: center; gap: 12px;
    margin: 12px 12px 0; padding: 10px 10px 10px 14px;
    border-radius: var(--r-lg);
    background: var(--bg-wash); box-shadow: inset 0 0 0 1px var(--ac-soft-2);
    font-size: var(--fs-sm); color: var(--tx);
    animation: pmt-drop-in var(--d-3) var(--ease-out) both;
}
.pm-announce[data-type="success"] { background: var(--ok-soft); box-shadow: inset 0 0 0 1px var(--ok-line); }
.pm-announce[data-type="warning"] { background: var(--warn-soft); box-shadow: inset 0 0 0 1px var(--warn-line); }
.pm-announce-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--bg-surface); color: var(--ac); font-size: 16px; flex-shrink: 0; box-shadow: var(--sh-xs); }
.pm-announce[data-type="success"] .pm-announce-icon { color: var(--ok-tx); }
.pm-announce[data-type="warning"] .pm-announce-icon { color: var(--warn-tx); }
.pm-announce-text { flex: 1; min-width: 0; }
.pm-announce-title { font-weight: 600; color: var(--tx-ink); margin-right: 6px; }
.pm-announce-msg { color: var(--tx-2); }


/* ============================================================== 5. CONTROLS */
/* ── Buttons ──
   .pm-btn           neutral surface pill (secondary)
   .pm-btn--primary  royal fill — one per view
   .pm-btn--outline  Relate ghost-outline (blue hairline)
   .pm-btn--ghost    no chrome until hover
   .pm-btn--ink      high-contrast neutral (midnight)
   .pm-btn--danger   destructive (soft red → solid on hover)
   .pm-btn--danger-solid  confirm-destroy inside dialogs
   sizes: --xs --sm (default md) --lg · --icon · --block · .is-loading      */
.pm-btn {
    --btn-h: var(--h-md);
    position: relative;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    height: var(--btn-h); padding: 0 15px;
    border-radius: var(--r-pill);
    border: 1px solid var(--ln);
    background: var(--bg-surface); color: var(--tx-ink);
    font-family: inherit; font-size: var(--fs-md); font-weight: 500; line-height: 1; letter-spacing: -0.006em;
    white-space: nowrap; text-decoration: none; user-select: none; cursor: pointer;
    box-shadow: var(--sh-btn);
    transition: background-color var(--d-1) var(--ease), border-color var(--d-1) var(--ease),
                color var(--d-1) var(--ease), box-shadow var(--d-2) var(--ease), transform var(--d-1) var(--ease);
}
.pm-btn > i { font-size: 16px; line-height: 1; margin: 0 -1px; }
.pm-btn > svg { width: 16px; height: 16px; flex-shrink: 0; }
.pm-btn:hover { background: var(--bg-subtle); border-color: var(--ln-strong); text-decoration: none; }
.pm-btn:active { transform: translateY(0.5px) scale(0.985); background: var(--bg-muted); box-shadow: none; }
.pm-btn:focus-visible { box-shadow: var(--ring-tight); }
.pm-btn[disabled], .pm-btn.is-disabled, .pm-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; box-shadow: none; }

.pm-btn--primary { background: var(--ac); border-color: var(--ac); color: #fff; box-shadow: var(--sh-btn-ac); }
.pm-btn--primary:hover { background: var(--ac-hover); border-color: var(--ac-hover); color: #fff; }
.pm-btn--primary:active { background: var(--ac-press); border-color: var(--ac-press); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15); }
.pm-btn--primary[disabled], .pm-btn--primary.is-disabled { opacity: 1; background: var(--ac-soft-2); border-color: transparent; color: rgba(255,255,255,.9); }
html:not(.dark) .pm-btn--primary[disabled], html:not(.dark) .pm-btn--primary.is-disabled { background: #a9c1ff; }

.pm-btn--outline { background: var(--bg-surface); border-color: var(--ac-line); color: var(--ac-tx); box-shadow: none; }
.pm-btn--outline:hover { background: var(--ac-soft); border-color: var(--ac); color: var(--ac-tx); }

.pm-btn--ghost { background: transparent; border-color: transparent; color: var(--tx-2); box-shadow: none; }
.pm-btn--ghost:hover { background: var(--bg-hover); border-color: transparent; color: var(--tx-ink); }
.pm-btn--ghost:active { background: var(--bg-press); }

.pm-btn--ink { background: var(--bg-inverse); border-color: var(--bg-inverse); color: var(--tx-inverse); box-shadow: var(--sh-xs); }
.pm-btn--ink:hover { background: #1b1f3a; border-color: #1b1f3a; color: #fff; }
html.dark .pm-btn--ink:hover { background: #fff; border-color: #fff; color: var(--tx-inverse); }

.pm-btn--danger { background: var(--bg-surface); border-color: var(--bad-line); color: var(--bad-tx); box-shadow: none; }
.pm-btn--danger:hover { background: var(--bad-soft); border-color: var(--bad); color: var(--bad-tx); }
.pm-btn--danger-solid { background: var(--bad); border-color: var(--bad); color: #fff; box-shadow: 0 1px 2px rgba(229, 72, 59, 0.3), 0 4px 12px -4px rgba(229, 72, 59, 0.45); }
.pm-btn--danger-solid:hover { background: #d43b2f; border-color: #d43b2f; color: #fff; }

.pm-btn--success { background: var(--bg-surface); border-color: var(--ok-line); color: var(--ok-tx); box-shadow: none; }
.pm-btn--success:hover { background: var(--ok-soft); border-color: var(--ok); }

.pm-btn--xs { --btn-h: var(--h-xs); padding: 0 9px; font-size: var(--fs-xs); gap: 5px; }
.pm-btn--xs > i { font-size: 13px; }
.pm-btn--sm { --btn-h: var(--h-sm); padding: 0 12px; font-size: var(--fs-sm); gap: 6px; }
.pm-btn--sm > i { font-size: 15px; }
.pm-btn--lg { --btn-h: var(--h-lg); padding: 0 20px; font-size: var(--fs-base); }
.pm-btn--icon { width: var(--btn-h); padding: 0; }
.pm-btn--block { width: 100%; }
.pm-btn--square { border-radius: var(--r-md); }

/* Loading: label fades, spinner takes its place — width never jumps */
.pm-btn.is-loading { color: transparent !important; pointer-events: none; }
.pm-btn.is-loading > * { visibility: hidden; }
.pm-btn.is-loading::after {
    content: ''; position: absolute; left: 50%; top: 50%; width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px;
    border-radius: 50%; border: 2px solid currentColor; border-color: var(--tx-3) transparent var(--tx-3) var(--tx-3);
    animation: pmt-spin 0.7s linear infinite;
}
.pm-btn--primary.is-loading::after, .pm-btn--danger-solid.is-loading::after, .pm-btn--ink.is-loading::after { border-color: #fff transparent #fff #fff; }

/* Button group (segmented actions) */
.pm-btn-group { display: inline-flex; }
.pm-btn-group > .pm-btn { border-radius: 0; }
.pm-btn-group > .pm-btn + .pm-btn { margin-left: -1px; }
.pm-btn-group > .pm-btn:first-child { border-radius: var(--r-pill) 0 0 var(--r-pill); padding-left: 14px; }
.pm-btn-group > .pm-btn:last-child { border-radius: 0 var(--r-pill) var(--r-pill) 0; padding-right: 14px; }
.pm-btn-group > .pm-btn:hover { z-index: 1; }

/* Icon-only quiet button (toolbars, rows) */
.pm-icon-btn {
    display: inline-grid; place-items: center; flex-shrink: 0;
    width: 30px; height: 30px; border-radius: var(--r-sm);
    background: transparent; border: 0; color: var(--tx-3); font-size: 17px; line-height: 1;
    transition: background-color var(--d-1) var(--ease), color var(--d-1) var(--ease), transform var(--d-1) var(--ease);
}
.pm-icon-btn:hover { background: var(--bg-hover); color: var(--tx-ink); }
.pm-icon-btn:active { background: var(--bg-press); transform: scale(0.94); }
.pm-icon-btn[aria-expanded="true"] { background: var(--bg-press); color: var(--tx-ink); }
.pm-icon-btn--sm { width: 26px; height: 26px; font-size: 15px; border-radius: 7px; }
.pm-icon-btn--danger:hover { background: var(--bad-soft); color: var(--bad-tx); }
.pm-icon-btn[disabled], .pm-icon-btn.is-disabled { opacity: 0.4; pointer-events: none; }
.pm-icon-btn.is-loading > i { visibility: hidden; }
.pm-icon-btn.is-loading { position: relative; pointer-events: none; }
.pm-icon-btn.is-loading::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2px solid var(--tx-3); border-right-color: transparent; animation: pmt-spin 0.7s linear infinite; }

/* ── Fields ── */
.pm-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pm-field-label { font-size: var(--fs-sm); font-weight: 500; color: var(--tx-ink); }
.pm-field-label .opt { color: var(--tx-3); font-weight: 400; margin-left: 4px; }
.pm-field-hint { font-size: var(--fs-xs); color: var(--tx-3); line-height: 1.45; }
.pm-field-error { font-size: var(--fs-xs); color: var(--bad-tx); display: flex; align-items: center; gap: 4px; }

.pm-input, .pm-select, .pm-textarea {
    width: 100%;
    height: var(--h-md); padding: 0 12px;
    border-radius: var(--r-lg);
    border: 1px solid var(--ln);
    background: var(--bg-surface); color: var(--tx-ink);
    font-family: inherit; font-size: var(--fs-md); line-height: 1.4;
    box-shadow: var(--sh-xs);
    transition: border-color var(--d-1) var(--ease), box-shadow var(--d-2) var(--ease), background-color var(--d-1) var(--ease);
    -webkit-appearance: none; appearance: none;
}
.pm-textarea { height: auto; min-height: 92px; padding: 10px 12px; resize: vertical; }
.pm-input::placeholder, .pm-textarea::placeholder { color: var(--tx-4); }
.pm-input:hover, .pm-select:hover, .pm-textarea:hover { border-color: var(--ln-strong); }
.pm-input:focus, .pm-select:focus, .pm-textarea:focus,
.pm-input:focus-visible, .pm-select:focus-visible, .pm-textarea:focus-visible {
    outline: none; border-color: var(--ln-focus); box-shadow: var(--ring);
}
.pm-input[disabled], .pm-select[disabled], .pm-textarea[disabled], .pm-input[readonly].is-static {
    background: var(--bg-muted); color: var(--tx-3); box-shadow: none; cursor: not-allowed;
}
.pm-input.is-invalid, .pm-select.is-invalid, .pm-textarea.is-invalid { border-color: var(--bad); }
.pm-input.is-invalid:focus { box-shadow: 0 0 0 3px var(--bad-soft); }
.pm-input--sm, .pm-select--sm { height: var(--h-sm); font-size: var(--fs-sm); border-radius: var(--r-md); padding: 0 10px; }
.pm-input--lg { height: var(--h-lg); font-size: var(--fs-base); }
.pm-input--mono { font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: -0.02em; }

.pm-select {
    padding-right: 34px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center; background-size: 16px;
}

/* Input with leading icon / trailing slot */
.pm-input-wrap { position: relative; display: flex; align-items: center; min-width: 0; }
.pm-input-wrap > .pm-input { padding-left: 36px; }
.pm-input-wrap > .pm-input-icon { position: absolute; left: 12px; color: var(--tx-3); font-size: 16px; pointer-events: none; line-height: 1; transition: color var(--d-1) var(--ease); }
.pm-input-wrap:focus-within > .pm-input-icon { color: var(--ac); }
.pm-input-wrap > .pm-input-trail { position: absolute; right: 6px; display: flex; align-items: center; gap: 4px; }
.pm-input-wrap.has-trail > .pm-input { padding-right: 40px; }
.pm-kbd {
    display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 5px;
    background: var(--bg-muted); box-shadow: inset 0 0 0 1px var(--ln); color: var(--tx-3);
    font-family: var(--font); font-size: 11px; font-weight: 500;
}

/* Checkbox / radio / switch */
.pm-check { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: var(--fs-md); color: var(--tx); line-height: 1.4; }
.pm-check input[type="checkbox"], .pm-check input[type="radio"], input.pm-cbx {
    -webkit-appearance: none; appearance: none; flex-shrink: 0;
    width: 16px; height: 16px; margin: 2px 0 0; border-radius: 5px;
    border: 1px solid var(--ln-strong); background: var(--bg-surface);
    display: inline-grid; place-items: center; cursor: pointer;
    transition: background-color var(--d-1) var(--ease), border-color var(--d-1) var(--ease), box-shadow var(--d-2) var(--ease);
}
.pm-check input[type="radio"] { border-radius: 50%; }
.pm-check input:hover, input.pm-cbx:hover { border-color: var(--ac); }
.pm-check input:checked, input.pm-cbx:checked { background: var(--ac); border-color: var(--ac); }
.pm-check input[type="checkbox"]:checked::after, input.pm-cbx:checked::after {
    content: ''; width: 9px; height: 5px; margin-top: -2px;
    border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg);
}
.pm-check input[type="checkbox"]:indeterminate, input.pm-cbx:indeterminate { background: var(--ac); border-color: var(--ac); }
.pm-check input[type="checkbox"]:indeterminate::after, input.pm-cbx:indeterminate::after { content: ''; width: 8px; height: 2px; background: #fff; border-radius: 1px; transform: none; border: 0; margin: 0; }
.pm-check input[type="radio"]:checked::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.pm-check input:focus-visible, input.pm-cbx:focus-visible { box-shadow: var(--ring); }

.pm-switch {
    -webkit-appearance: none; appearance: none; position: relative; flex-shrink: 0; cursor: pointer;
    width: 34px; height: 20px; border-radius: 9999px; margin: 0;
    background: var(--ln-strong); border: 0;
    transition: background-color var(--d-2) var(--ease);
}
.pm-switch::after {
    content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 2px rgba(2, 5, 32, 0.25), 0 0 0 0.5px rgba(2, 5, 32, 0.06);
    transition: transform var(--d-3) var(--ease-out);
}
.pm-switch:checked, .pm-switch[aria-checked="true"] { background: var(--ac); }
.pm-switch:checked::after, .pm-switch[aria-checked="true"]::after { transform: translateX(14px); }
.pm-switch:focus-visible { box-shadow: var(--ring); }
.pm-switch[disabled] { opacity: 0.45; cursor: not-allowed; }
.pm-switch--sm { width: 28px; height: 16px; }
.pm-switch--sm::after { width: 12px; height: 12px; }
.pm-switch--sm:checked::after { transform: translateX(12px); }

/* Segmented control / tabs */
.pm-seg {
    display: inline-flex; align-items: center; gap: 2px; padding: 3px;
    border-radius: var(--r-pill); background: var(--bg-muted);
    box-shadow: inset 0 0 0 1px var(--ln-soft);
    position: relative; isolation: isolate; max-width: 100%; overflow-x: auto; scrollbar-width: none;
}
.pm-seg::-webkit-scrollbar { display: none; }
.pm-seg-btn {
    position: relative; z-index: 1;
    display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px;
    border-radius: var(--r-pill); border: 0; background: transparent;
    font-size: var(--fs-sm); font-weight: 500; color: var(--tx-3); white-space: nowrap;
    transition: color var(--d-1) var(--ease), background-color var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease);
}
.pm-seg-btn:hover { color: var(--tx-ink); }
.pm-seg-btn > i { font-size: 15px; }
.pm-seg-btn.is-active, .pm-seg-btn[aria-selected="true"], .pm-seg-btn[aria-pressed="true"] {
    color: var(--tx-ink); background: var(--bg-surface);
    box-shadow: 0 0 0 1px var(--ln), 0 1px 2px rgba(2, 5, 32, 0.06);
}
.pm-seg-count { font-size: var(--fs-2xs); font-weight: 500; color: var(--tx-3); font-variant-numeric: tabular-nums; }
.pm-seg-btn.is-active .pm-seg-count, .pm-seg-btn[aria-selected="true"] .pm-seg-count { color: var(--ac-tx); }

/* Underline tabs (page-level sections) */
.pm-tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--ln); overflow-x: auto; scrollbar-width: none; }
.pm-tabs::-webkit-scrollbar { display: none; }
.pm-tab {
    position: relative; display: inline-flex; align-items: center; gap: 7px;
    height: 40px; padding: 0; border: 0; background: none;
    font-size: var(--fs-md); font-weight: 500; color: var(--tx-3); white-space: nowrap;
    transition: color var(--d-1) var(--ease);
}
.pm-tab:hover { color: var(--tx-ink); }
.pm-tab::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px 2px 0 0; background: var(--ac); transform: scaleX(0); transition: transform var(--d-3) var(--ease-out); }
.pm-tab.is-active, .pm-tab[aria-selected="true"], .pm-tab[aria-current="page"] { color: var(--tx-ink); }
.pm-tab.is-active::after, .pm-tab[aria-selected="true"]::after, .pm-tab[aria-current="page"]::after { transform: scaleX(1); }

/* Chip filter */
.pm-chip {
    display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px;
    border-radius: var(--r-pill); border: 1px solid var(--ln); background: var(--bg-surface);
    font-size: var(--fs-sm); font-weight: 500; color: var(--tx-2); white-space: nowrap;
    transition: all var(--d-1) var(--ease);
}
.pm-chip:hover { border-color: var(--ln-strong); color: var(--tx-ink); }
.pm-chip.is-active, .pm-chip[aria-pressed="true"] { background: var(--ac-soft); border-color: var(--ac-line); color: var(--ac-tx); }
.pm-chip > i { font-size: 14px; }


/* ============================================================== 6. FEEDBACK */
/* Dot — 6px status signal, the reference's pipeline marker */
.pm-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--neu-dot); flex-shrink: 0; }
.pm-dot--ok { background: var(--ok-dot); } .pm-dot--warn { background: var(--warn-dot); }
.pm-dot--bad { background: var(--bad-dot); } .pm-dot--info { background: var(--info-dot); } .pm-dot--ac { background: var(--ac); }
.pm-dot--live { box-shadow: 0 0 0 0 currentColor; animation: pmt-ping 1.8s var(--ease) infinite; }
.pm-dot--ok.pm-dot--live { color: rgba(22, 202, 46, 0.45); }
.pm-dot--warn.pm-dot--live { color: rgba(255, 166, 77, 0.5); }
.pm-dot--bad.pm-dot--live { color: rgba(242, 96, 82, 0.45); }
.pm-dot--info.pm-dot--live, .pm-dot--ac.pm-dot--live { color: rgba(20, 90, 255, 0.4); }

/* Badge — pill, hairline, tinted. One semantic hue per badge. */
.pm-badge {
    display: inline-flex; align-items: center; gap: 5px;
    height: 22px; padding: 0 8px; border-radius: var(--r-pill);
    font-size: var(--fs-xs); font-weight: 500; line-height: 1; white-space: nowrap; letter-spacing: 0;
    color: var(--neu-tx); background: var(--neu-soft); box-shadow: inset 0 0 0 1px var(--neu-line);
}
.pm-badge > i { font-size: 12px; }
.pm-badge--ok   { color: var(--ok-tx);   background: var(--ok-soft);   box-shadow: inset 0 0 0 1px var(--ok-line); }
.pm-badge--warn { color: var(--warn-tx); background: var(--warn-soft); box-shadow: inset 0 0 0 1px var(--warn-line); }
.pm-badge--bad  { color: var(--bad-tx);  background: var(--bad-soft);  box-shadow: inset 0 0 0 1px var(--bad-line); }
.pm-badge--info { color: var(--info-tx); background: var(--info-soft); box-shadow: inset 0 0 0 1px var(--info-line); }
.pm-badge--ac   { color: var(--ac-tx);   background: var(--ac-soft);   box-shadow: inset 0 0 0 1px var(--ac-line); }
.pm-badge--plain { background: var(--bg-surface); box-shadow: inset 0 0 0 1px var(--ln); color: var(--tx-2); }
.pm-badge--sm { height: 18px; padding: 0 6px; font-size: var(--fs-2xs); }
.pm-badge--lg { height: 26px; padding: 0 10px; font-size: var(--fs-sm); }
/* status = plain badge with a leading dot (Linear-style) */
.pm-status { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-sm); font-weight: 500; color: var(--tx-2); white-space: nowrap; }

/* Callouts / inline banners */
.pm-callout {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 12px 14px; border-radius: var(--r-lg);
    background: var(--bg-subtle); box-shadow: inset 0 0 0 1px var(--ln);
    font-size: var(--fs-sm); color: var(--tx-2); line-height: 1.5;
}
.pm-callout > i { font-size: 17px; line-height: 1.25; color: var(--tx-3); flex-shrink: 0; }
.pm-callout-title { font-weight: 600; color: var(--tx-ink); margin-bottom: 2px; }
.pm-callout--info { background: var(--bg-wash); box-shadow: inset 0 0 0 1px var(--ac-soft-2); } .pm-callout--info > i { color: var(--ac); }
.pm-callout--ok   { background: var(--ok-soft);   box-shadow: inset 0 0 0 1px var(--ok-line); }   .pm-callout--ok > i { color: var(--ok-tx); }
.pm-callout--warn { background: var(--warn-soft); box-shadow: inset 0 0 0 1px var(--warn-line); } .pm-callout--warn > i { color: var(--warn-tx); }
.pm-callout--bad  { background: var(--bad-soft);  box-shadow: inset 0 0 0 1px var(--bad-line); }  .pm-callout--bad > i { color: var(--bad-tx); }

/* Progress */
.pm-progress { height: 6px; border-radius: 9999px; background: var(--bg-muted); overflow: hidden; box-shadow: inset 0 0 0 1px var(--ln-soft); }
.pm-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--ac); transition: width var(--d-4) var(--ease-out); }

/* Spinner */
.pm-spinner { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--ln); border-top-color: var(--ac); animation: pmt-spin 0.7s linear infinite; flex-shrink: 0; }
.pm-spinner--lg { width: 24px; height: 24px; border-width: 2.5px; }

/* Toasts — bottom-right stack, newest on top of stack */
.pm-toasts {
    position: fixed; z-index: var(--z-toast);
    right: 16px; bottom: 16px; left: auto; top: auto;
    display: flex; flex-direction: column-reverse; gap: 8px;
    width: min(380px, calc(100vw - 32px)); pointer-events: none;
}
.pm-toast {
    pointer-events: auto;
    display: flex; align-items: flex-start; gap: 11px;
    padding: 12px 10px 12px 14px; border-radius: var(--r-lg);
    background: var(--bg-surface); color: var(--tx);
    box-shadow: var(--sh-pop);
    font-size: var(--fs-md); line-height: 1.45;
    animation: pmt-toast-in var(--d-3) var(--ease-out) both;
    transform-origin: bottom right;
}
.pm-toast.is-leaving { animation: pmt-toast-out var(--d-2) var(--ease) both; }
.pm-toast-icon { font-size: 18px; line-height: 1.2; flex-shrink: 0; color: var(--ac); }
.pm-toast--success .pm-toast-icon { color: var(--ok); }
.pm-toast--error .pm-toast-icon { color: var(--bad); }
.pm-toast--warning .pm-toast-icon { color: var(--warn); }
.pm-toast-body { flex: 1; min-width: 0; padding-top: 1px; }
.pm-toast-title { font-weight: 600; color: var(--tx-ink); }
.pm-toast-msg { color: var(--tx-2); word-wrap: break-word; }
.pm-toast-title + .pm-toast-msg { font-size: var(--fs-sm); margin-top: 1px; }
.pm-toast-x { margin: -4px -2px 0 0; }
@media (max-width: 639.98px) { .pm-toasts { right: 12px; left: 12px; bottom: 12px; width: auto; } }


/* ============================================================== 7. OVERLAYS */
/* ── Menu / dropdown ──  .pm-menu is positioned by its wrapper (.pm-menu-anchor). */
.pm-menu-anchor { position: relative; display: inline-flex; }
.pm-menu {
    position: absolute; z-index: var(--z-drop);
    top: calc(100% + 6px); left: 0;
    min-width: 200px; max-width: 320px; padding: 5px;
    border-radius: var(--r-lg);
    background: var(--bg-surface); box-shadow: var(--sh-pop);
    transform-origin: top left;
    opacity: 0; visibility: hidden; transform: translateY(-4px) scale(0.98);
    transition: opacity var(--d-1) var(--ease), transform var(--d-2) var(--ease), visibility 0s linear var(--d-2);
}
.pm-menu--right { left: auto; right: 0; transform-origin: top right; }
.pm-menu--up { top: auto; bottom: calc(100% + 6px); transform-origin: bottom left; transform: translateY(4px) scale(0.98); }
.pm-menu.is-open {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity var(--d-2) var(--ease-out), transform var(--d-3) var(--ease-out), visibility 0s;
}
.pm-menu-head { padding: 8px 10px 9px; display: flex; align-items: center; gap: 10px; }
.pm-menu-label { padding: 7px 10px 4px; font-size: var(--fs-2xs); font-weight: 500; color: var(--tx-3); }
.pm-menu-sep { height: 1px; margin: 5px -5px; background: var(--ln-soft); }
.pm-menu-item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    height: 32px; padding: 0 10px; border-radius: var(--r-sm);
    border: 0; background: transparent; text-align: left;
    font-size: var(--fs-md); font-weight: 400; color: var(--tx); white-space: nowrap;
    transition: background-color 80ms linear, color 80ms linear;
}
.pm-menu-item > i { font-size: 16px; width: 16px; text-align: center; color: var(--tx-3); flex-shrink: 0; }
.pm-menu-item:hover, .pm-menu-item:focus-visible, .pm-menu-item.is-hl { background: var(--bg-hover); color: var(--tx-ink); box-shadow: none; outline: none; }
.pm-menu-item:hover > i, .pm-menu-item:focus-visible > i { color: var(--tx-2); }
.pm-menu-item[role="menuitemradio"][aria-checked="true"]::after, .pm-menu-item.is-selected::after {
    content: ''; margin-left: auto; width: 8px; height: 4.5px;
    border-left: 1.6px solid var(--ac); border-bottom: 1.6px solid var(--ac); transform: rotate(-45deg) translateY(-1px);
}
.pm-menu-item.is-selected { color: var(--tx-ink); font-weight: 500; }
.pm-menu-item--danger, .pm-menu-item--danger > i { color: var(--bad-tx); }
.pm-menu-item--danger:hover { background: var(--bad-soft); color: var(--bad-tx); }
.pm-menu-item--danger:hover > i { color: var(--bad-tx); }
.pm-menu-item[disabled], .pm-menu-item.is-disabled { opacity: 0.45; pointer-events: none; }
.pm-menu-meta { margin-left: auto; font-size: var(--fs-xs); color: var(--tx-3); }
.pm-menu-item .pm-switch { margin-left: auto; }

/* ── Modal ──
   <div class="modal" id="x" role="dialog" aria-modal="true" aria-labelledby="xT" hidden>
     <div class="modal-scrim" data-modal-close></div>
     <div class="modal-panel modal-panel--md">
       <header class="modal-head">…</header><div class="modal-body">…</div><footer class="modal-foot">…</footer>
   PMT.modal.open('x') / PMT.modal.close('x')                                 */
.pm-modal {
    position: fixed; inset: 0; z-index: var(--z-modal);
    display: flex; align-items: center; justify-content: center;
    padding: 24px 16px;
}
.pm-modal-scrim {
    position: absolute; inset: 0; background: var(--scrim);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    opacity: 0; transition: opacity var(--d-3) var(--ease);
}
.pm-modal-panel {
    position: relative; width: 100%; max-width: 480px; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px);
    display: flex; flex-direction: column;
    border-radius: var(--r-xl); background: var(--bg-surface); box-shadow: var(--sh-modal);
    opacity: 0; transform: translateY(8px) scale(0.98);
    transition: opacity var(--d-2) var(--ease), transform var(--d-3) var(--ease-out);
}
.pm-modal-panel--sm { max-width: 400px; } .pm-modal-panel--md { max-width: 520px; }
.pm-modal-panel--lg { max-width: 720px; } .pm-modal-panel--xl { max-width: 960px; }
.pm-modal.is-open .pm-modal-scrim { opacity: 1; }
.pm-modal.is-open .pm-modal-panel { opacity: 1; transform: none; }
.pm-modal-head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 18px 6px 20px; }
.pm-modal-head-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--ac-soft); color: var(--ac); font-size: 18px; flex-shrink: 0; }
.pm-modal-head-icon--bad { background: var(--bad-soft); color: var(--bad-tx); }
.pm-modal-head-icon--warn { background: var(--warn-soft); color: var(--warn-tx); }
.pm-modal-head-icon--ok { background: var(--ok-soft); color: var(--ok-tx); }
.pm-modal-title { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.012em; color: var(--tx-ink); line-height: 1.35; }
.pm-modal-sub { margin-top: 2px; font-size: var(--fs-sm); color: var(--tx-3); line-height: 1.45; }
.pm-modal-head > .pm-icon-btn { margin: -4px -4px 0 auto; }
.pm-modal-body { padding: 14px 20px 18px; overflow-y: auto; min-height: 0; color: var(--tx-2); font-size: var(--fs-md); }
.pm-modal-foot {
    display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap;
    padding: 12px 16px; border-top: 1px solid var(--ln-soft); background: var(--bg-subtle);
    border-radius: 0 0 var(--r-xl) var(--r-xl);
}
.pm-modal-foot-start { margin-right: auto; font-size: var(--fs-xs); color: var(--tx-3); }
@media (max-width: 639.98px) {
    .pm-modal { align-items: flex-end; padding: 0; }
    .pm-modal-panel { max-width: none !important; border-radius: var(--r-2xl) var(--r-2xl) 0 0; max-height: calc(100dvh - 24px); transform: translateY(24px); }
    .pm-modal-foot { border-radius: 0; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
    .pm-modal-foot > .pm-btn { flex: 1; }
}

/* Side drawer (details panels) */
.pm-drawer { position: fixed; inset: 0; z-index: var(--z-modal); }
.pm-drawer-panel {
    position: absolute; top: 8px; right: 8px; bottom: 8px; width: min(520px, calc(100vw - 16px));
    display: flex; flex-direction: column; border-radius: var(--r-xl);
    background: var(--bg-surface); box-shadow: var(--sh-modal);
    transform: translateX(calc(100% + 16px)); transition: transform var(--d-4) var(--ease-out);
}
.pm-drawer.is-open .pm-modal-scrim { opacity: 1; }
.pm-drawer.is-open .pm-drawer-panel { transform: none; }

/* Tooltip (CSS-only, via data-tip) */
[data-tip] { position: relative; }
[data-tip]::after {
    content: attr(data-tip); position: absolute; z-index: var(--z-drop); left: 50%; bottom: calc(100% + 6px);
    padding: 5px 8px; border-radius: 7px; background: var(--bg-inverse); color: var(--tx-inverse);
    font-size: 11.5px; font-weight: 500; line-height: 1.3; white-space: nowrap; letter-spacing: 0;
    opacity: 0; pointer-events: none; transform: translate(-50%, 3px);
    transition: opacity var(--d-1) var(--ease), transform var(--d-1) var(--ease);
}
[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); transition-delay: 350ms; }


/* ============================================================== 8. DATA */
/* Card — container tier (16px), hairline + whisper shadow */
.pm-card {
    background: var(--bg-surface); border-radius: var(--r-xl);
    box-shadow: 0 0 0 1px var(--ln), var(--sh-hair);
}
.pm-card--flat { box-shadow: 0 0 0 1px var(--ln); }
.pm-card--raised { box-shadow: 0 0 0 1px var(--ln-soft), var(--sh-md); }
.pm-card--wash { background: var(--bg-wash); box-shadow: inset 0 0 0 1px var(--ac-soft-2); }
.pm-card--interactive { transition: box-shadow var(--d-2) var(--ease), transform var(--d-2) var(--ease); cursor: pointer; }
.pm-card--interactive:hover { box-shadow: 0 0 0 1px var(--ln-strong), var(--sh-md); }
.pm-card--interactive:active { transform: scale(0.995); }
.pm-card-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; }
.pm-card-head + .pm-card-body { padding-top: 0; }
.pm-card-head--line { border-bottom: 1px solid var(--ln-soft); }
.pm-card-title { font-size: var(--fs-base); font-weight: 600; color: var(--tx-ink); letter-spacing: -0.008em; }
.pm-card-sub { font-size: var(--fs-sm); color: var(--tx-3); margin-top: 1px; }
.pm-card-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.pm-card-body { padding: 18px; }
.pm-card-foot { padding: 12px 18px; border-top: 1px solid var(--ln-soft); display: flex; align-items: center; gap: 8px; }

/* Inner tile — 8–10px tier */
.pm-tile { background: var(--bg-surface); border-radius: var(--r-md); box-shadow: 0 0 0 1px var(--ln); padding: 12px 14px; }
.pm-tile--muted { background: var(--bg-subtle); box-shadow: inset 0 0 0 1px var(--ln-soft); }

/* Table */
.pm-table-wrap { overflow-x: auto; border-radius: var(--r-xl); box-shadow: 0 0 0 1px var(--ln); background: var(--bg-surface); }
.pm-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-md); }
.pm-table th {
    position: sticky; top: 0; z-index: 1;
    height: 36px; padding: 0 14px; text-align: left; white-space: nowrap;
    font-size: var(--fs-xs); font-weight: 500; color: var(--tx-3); letter-spacing: 0;
    background: var(--bg-subtle); border-bottom: 1px solid var(--ln);
}
.pm-table th:first-child { border-top-left-radius: var(--r-xl); }
.pm-table th:last-child { border-top-right-radius: var(--r-xl); }
.pm-table td { height: 48px; padding: 8px 14px; border-bottom: 1px solid var(--ln-soft); color: var(--tx); vertical-align: middle; }
.pm-table tbody tr:last-child td { border-bottom: 0; }
.pm-table tbody tr { transition: background-color 80ms linear; }
.pm-table tbody tr:hover td { background: var(--bg-subtle); }
.pm-table tbody tr.is-selected td { background: var(--bg-selected); }
.pm-table .pm-num, .pm-table td.pm-num, .pm-table th.pm-num { text-align: right; font-variant-numeric: tabular-nums; }
.pm-table--compact td { height: 40px; padding-top: 6px; padding-bottom: 6px; }
.pm-cell-main { font-weight: 500; color: var(--tx-ink); }
.pm-cell-sub { font-size: var(--fs-xs); color: var(--tx-3); margin-top: 1px; }
.pm-cell-actions { display: flex; justify-content: flex-end; gap: 2px; opacity: 0.55; transition: opacity var(--d-1) var(--ease); }
tr:hover .pm-cell-actions, .pm-cell-actions:focus-within { opacity: 1; }

/* Key / value list */
.pm-kv { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: 0; font-size: var(--fs-md); }
.pm-kv > dt, .pm-kv > dd { padding: 10px 0; border-bottom: 1px solid var(--ln-soft); margin: 0; min-width: 0; }
.pm-kv > dt { color: var(--tx-3); }
.pm-kv > dd { color: var(--tx-ink); font-weight: 500; overflow-wrap: anywhere; }
.pm-kv > dt:last-of-type, .pm-kv > dd:last-of-type { border-bottom: 0; }

/* List rows */
.pm-list { display: flex; flex-direction: column; }
.pm-list-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--ln-soft); transition: background-color 80ms linear; }
.pm-list-row:last-child { border-bottom: 0; }
.pm-list-row:hover { background: var(--bg-subtle); }

/* Stat (metric) — inline, not a boxed tile */
.pm-metric { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pm-metric-label { font-size: var(--fs-xs); color: var(--tx-3); display: flex; align-items: center; gap: 6px; }
.pm-metric-value { font-size: 22px; font-weight: 600; letter-spacing: -0.025em; color: var(--tx-ink); font-variant-numeric: tabular-nums; line-height: 1.15; }
.pm-metric-delta { font-size: var(--fs-xs); font-weight: 500; }

/* Skeleton */
.pm-skel {
    display: block; border-radius: 6px; min-height: 10px;
    background: linear-gradient(90deg, var(--bg-muted) 0%, var(--ln-soft) 45%, var(--bg-muted) 90%);
    background-size: 220% 100%; animation: pmt-shimmer 1.3s ease-in-out infinite;
}
.pm-skel--line { height: 10px; } .pm-skel--title { height: 14px; width: 55%; } .pm-skel--pill { height: 22px; width: 64px; border-radius: 9999px; }
.pm-skel--circle { border-radius: 50%; }


/* ============================================================== 9. PAGE */
.pm-page { max-width: var(--page-max); margin: 0 auto; padding: 28px 32px 64px; }
.pm-page--wide { max-width: 1560px; }
.pm-page--narrow { max-width: 880px; }
@media (max-width: 1023.98px) { .pm-page { padding: 20px 16px 56px; } }

.pm-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 24px; }
.pm-page-head-text { min-width: 0; }
.pm-page-crumbs { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: var(--fs-sm); color: var(--tx-3); }
.pm-page-crumbs a { color: var(--tx-3); transition: color var(--d-1) var(--ease); }
.pm-page-crumbs a:hover { color: var(--tx-ink); }
.pm-page-crumbs i { font-size: 14px; color: var(--tx-4); }
.pm-page-title { font-size: 26px; line-height: 1.15; font-weight: 600; letter-spacing: var(--tr-title); color: var(--tx-ink); margin: 0; }
.pm-page-sub { margin-top: 6px; font-size: var(--fs-md); color: var(--tx-3); max-width: 64ch; }
.pm-page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
@media (max-width: 639.98px) { .pm-page-title { font-size: 22px; } .pm-page-head { align-items: flex-start; } }

.pm-section + .pm-section { margin-top: 32px; }
.pm-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.pm-section-title { font-size: var(--fs-base); font-weight: 600; color: var(--tx-ink); letter-spacing: -0.008em; display: flex; align-items: center; gap: 8px; }

/* Toolbar (search + filters row) */
.pm-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pm-toolbar-spacer { flex: 1; }
.pm-toolbar--sticky { position: sticky; top: var(--sticky-top); z-index: var(--z-sticky); padding: 10px 0; background: color-mix(in srgb, var(--bg-canvas) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* Empty / error states */
.pm-empty {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 56px 24px; border-radius: var(--r-xl);
    background:
        radial-gradient(120% 90% at 50% 0%, var(--bg-wash) 0%, transparent 70%),
        var(--bg-surface);
    box-shadow: 0 0 0 1px var(--ln);
}
.pm-empty--plain { background: transparent; box-shadow: none; padding: 40px 16px; }
.pm-empty-icon {
    display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 16px;
    border-radius: 14px; background: var(--bg-surface); color: var(--ac); font-size: 22px;
    box-shadow: 0 0 0 1px var(--ln), 0 6px 16px -6px rgba(20, 90, 255, 0.25);
}
.pm-empty-title { font-size: var(--fs-lg); font-weight: 600; color: var(--tx-ink); letter-spacing: -0.01em; }
.pm-empty-text { margin-top: 6px; max-width: 42ch; font-size: var(--fs-md); color: var(--tx-3); line-height: 1.55; }
.pm-empty-actions { margin-top: 20px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* Hero wash (used sparingly — auth, onboarding, plan pickers) */
.pm-wash-band { position: relative; isolation: isolate; }
.pm-wash-band::before {
    content: ''; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 420px;
    background: linear-gradient(180deg, rgba(20, 90, 255, 0.07) 0%, rgba(182, 203, 253, 0) 100%);
    border-radius: 0 0 40px 40px; pointer-events: none;
}
html.dark .pm-wash-band::before { background: linear-gradient(180deg, rgba(61, 116, 255, 0.12) 0%, transparent 100%); }

/* Layout utilities the templates lean on */
.pm-stack { display: flex; flex-direction: column; } .pm-row { display: flex; align-items: center; }
.pm-gap-1 { gap: 4px; } .pm-gap-2 { gap: 8px; } .pm-gap-3 { gap: 12px; } .pm-gap-4 { gap: 16px; } .pm-gap-6 { gap: 24px; }
.pm-grow { flex: 1; min-width: 0; }
.pm-divider { height: 1px; background: var(--ln-soft); border: 0; margin: 16px 0; }
.pm-vr { width: 1px; align-self: stretch; background: var(--ln); }


/* ============================================================== KEYFRAMES */
@keyframes pmt-spin { to { transform: rotate(360deg); } }
@keyframes pmt-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -120% 0; } }
@keyframes pmt-ping { 0% { box-shadow: 0 0 0 0 currentColor; } 70%, 100% { box-shadow: 0 0 0 5px transparent; } }
@keyframes pmt-drop-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes pmt-fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pmt-toast-in { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes pmt-toast-out { to { opacity: 0; transform: translateX(16px) scale(0.98); } }
.pm-anim-in { animation: pmt-fade-up var(--d-3) var(--ease-out) both; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 1ms !important; animation-iteration-count: 1 !important;
        transition-duration: 1ms !important; scroll-behavior: auto !important;
    }
    .pm-skel { animation: none; }
}


/* ============================================================== 10. LEGACY BRIDGE
   Pages still carry Tailwind 2 utilities and a few retired global classes.
   Re-point them at tokens so every page speaks the new palette in both
   themes. Page redesigns gradually stop relying on these.                    */
.app-content { font-family: var(--font); }

/* Neutrals */
.bg-white { background-color: var(--bg-surface); }
.bg-gray-50 { background-color: var(--bg-canvas); }
.bg-gray-100 { background-color: var(--bg-muted); }
.bg-gray-200 { background-color: var(--ln); }
.text-gray-900, .text-black { color: var(--tx-ink); }
.text-gray-800 { color: var(--tx); }
.text-gray-700 { color: var(--tx-2); }
.text-gray-600 { color: var(--tx-2); }
.text-gray-500 { color: var(--tx-3); }
.text-gray-400 { color: var(--tx-3); }
.text-gray-300 { color: var(--tx-4); }
.border-gray-100 { border-color: var(--ln-soft); }
.border-gray-200 { border-color: var(--ln); }
.border-gray-300 { border-color: var(--ln-strong); }
.divide-gray-100 > * + *, .divide-gray-200 > * + * { border-color: var(--ln-soft); }
.hover\:bg-gray-50:hover { background-color: var(--bg-subtle); }
.hover\:bg-gray-100:hover { background-color: var(--bg-hover); }
.hover\:text-gray-900:hover { color: var(--tx-ink); }

/* Indigo / violet / purple → royal */
.bg-indigo-600, .bg-indigo-500, .bg-purple-600, .bg-violet-600, .bg-blue-600 { background-color: var(--ac); }
.hover\:bg-indigo-700:hover, .hover\:bg-purple-700:hover, .hover\:bg-blue-700:hover, .hover\:bg-indigo-600:hover { background-color: var(--ac-hover); }
.bg-indigo-50, .bg-purple-50, .bg-violet-50, .bg-blue-50 { background-color: var(--ac-soft); }
.bg-indigo-100, .bg-purple-100, .bg-blue-100 { background-color: var(--ac-soft-2); }
.text-indigo-600, .text-indigo-500, .text-indigo-700, .text-purple-600, .text-purple-700, .text-violet-600, .text-blue-600, .text-blue-700 { color: var(--ac-tx); }
.border-indigo-200, .border-indigo-300, .border-purple-200, .border-blue-200 { border-color: var(--ac-line); }
.border-indigo-500, .border-indigo-600, .border-purple-500, .border-blue-500 { border-color: var(--ac); }
.focus\:ring-indigo-500:focus, .focus\:ring-purple-500:focus, .focus\:ring-blue-500:focus { --tw-ring-color: rgba(0, 153, 255, 0.3); }
.focus\:border-indigo-500:focus, .focus\:border-purple-500:focus, .focus\:border-blue-500:focus { border-color: var(--ln-focus); }

/* Semantic tints */
.bg-green-50, .bg-emerald-50 { background-color: var(--ok-soft); }
.bg-red-50 { background-color: var(--bad-soft); }
.bg-yellow-50, .bg-amber-50, .bg-orange-50 { background-color: var(--warn-soft); }
.text-green-600, .text-green-700, .text-emerald-600, .text-emerald-700 { color: var(--ok-tx); }
.text-red-600, .text-red-700, .text-red-500 { color: var(--bad-tx); }
.text-yellow-600, .text-yellow-700, .text-amber-600, .text-amber-700, .text-orange-600 { color: var(--warn-tx); }
.border-green-200, .border-emerald-200 { border-color: var(--ok-line); }
.border-red-200 { border-color: var(--bad-line); }
.border-yellow-200, .border-amber-200 { border-color: var(--warn-line); }

/* Shape + depth normalisation */
.rounded-md { border-radius: var(--r-sm); }
.rounded-lg { border-radius: var(--r-md); }
.rounded-xl { border-radius: var(--r-lg); }
.rounded-2xl, .rounded-3xl { border-radius: var(--r-xl); }
.shadow-sm { box-shadow: var(--sh-xs); }
.shadow, .shadow-md { box-shadow: var(--sh-sm); }
.shadow-lg, .shadow-xl { box-shadow: var(--sh-md); }
.shadow-2xl { box-shadow: var(--sh-modal); }
.font-bold { font-weight: 600; }
.font-extrabold, .font-black { font-weight: 600; letter-spacing: -0.02em; }

/* Retired global classes — neutralised so old markup reads clean */
.glassmorphism { background: var(--bg-surface); box-shadow: 0 0 0 1px var(--ln), var(--sh-sm); border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.btn-enhanced:hover, .menu-item-legacy:hover, .nav-pill:hover { transform: none; }
.loading-shimmer { background: linear-gradient(90deg, var(--bg-muted) 25%, var(--ln-soft) 50%, var(--bg-muted) 75%); background-size: 200% 100%; animation: pmt-shimmer 1.3s infinite; }
.text-sharp { -webkit-font-smoothing: antialiased; }

/* Dark: Tailwind's fixed colours that don't use tokens */
html.dark .bg-gray-800, html.dark .bg-gray-900 { background-color: var(--bg-surface); }
html.dark .text-white { color: var(--tx-ink); }
html.dark .bg-indigo-600 .text-white, html.dark .bg-purple-600 .text-white, html.dark .bg-blue-600 .text-white,
html.dark .bg-red-600 .text-white, html.dark .bg-green-600 .text-white,
html.dark .bg-indigo-600.text-white, html.dark .bg-purple-600.text-white, html.dark .bg-blue-600.text-white,
html.dark .bg-red-600.text-white, html.dark .bg-green-600.text-white { color: #fff; }
html.dark input:not([type="checkbox"]):not([type="radio"]):not(.pm-switch).border,
html.dark select.border, html.dark textarea.border { background-color: var(--bg-muted); color: var(--tx-ink); border-color: var(--ln); }


/* ============================================================== 11. NOTIFICATIONS
   Bell in the sidebar head (and mobile top bar) → one shared panel.
   New events also arrive as top-right toasts (.pm-ntoasts). Fed by pmt.js
   polling /api/notifications.                                               */
.nf-bell { position: relative; }
.nf-bell > i { font-size: 17px; }
.nf-count {
    position: absolute; top: 2px; right: 1px; min-width: 15px; height: 15px; padding: 0 4px;
    display: none; align-items: center; justify-content: center;
    border-radius: 9999px; background: var(--ac); color: #fff;
    font-size: 9.5px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums;
    box-shadow: 0 0 0 2px var(--bg-app);
}
.topbar .nf-count { box-shadow: 0 0 0 2px var(--bg-canvas); }
.nf-bell.has-unread .nf-count { display: inline-flex; animation: nf-pop var(--d-3) var(--ease-out) both; }
.nf-bell.is-ringing > i { animation: nf-ring 0.7s var(--ease) 1; transform-origin: 50% 2px; }
@keyframes nf-pop { from { transform: scale(0.4); opacity: 0; } }
@keyframes nf-ring { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(14deg); } 40% { transform: rotate(-10deg); } 60% { transform: rotate(6deg); } 80% { transform: rotate(-3deg); } }
html.sb-collapsed .sb-head .nf-bell { order: 3; }

.nf-panel {
    position: fixed; z-index: var(--z-drop);
    top: 8px; left: calc(var(--sb-w) + 4px);
    width: 400px; max-height: min(640px, calc(100vh - 16px));
    display: flex; flex-direction: column;
    border-radius: var(--r-xl); background: var(--bg-surface); box-shadow: var(--sh-pop);
    opacity: 0; visibility: hidden; transform: translateX(-6px) scale(0.985); transform-origin: top left;
    transition: opacity var(--d-1) var(--ease), transform var(--d-2) var(--ease), visibility 0s linear var(--d-2);
}
.nf-panel.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity var(--d-2) var(--ease-out), transform var(--d-3) var(--ease-out), visibility 0s; }
.nf-head { display: flex; align-items: center; gap: 8px; padding: 14px 10px 10px 16px; }
.nf-title { font-size: var(--fs-base); font-weight: 600; color: var(--tx-ink); letter-spacing: -0.01em; }
.nf-head .pm-badge { margin-right: auto; }
.nf-tabs { display: flex; gap: 2px; padding: 0 12px 8px; border-bottom: 1px solid var(--ln-soft); }
.nf-list { flex: 1; min-height: 0; overflow-y: auto; padding: 6px; overscroll-behavior: contain; }
.nf-day { padding: 10px 10px 4px; font-size: var(--fs-2xs); font-weight: 500; color: var(--tx-3); }
.nf-item {
    position: relative; display: flex; gap: 12px; padding: 10px 10px 10px 12px;
    border-radius: var(--r-lg); color: inherit;
    transition: background-color 80ms linear;
}
.nf-item:hover { background: var(--bg-hover); }
.nf-item.is-unread::after { content: ''; position: absolute; right: 12px; top: 16px; width: 7px; height: 7px; border-radius: 50%; background: var(--ac); }
.nf-icon {
    position: relative; flex-shrink: 0; display: grid; place-items: center;
    width: 32px; height: 32px; border-radius: 10px;
    background: var(--bg-muted); color: var(--tx-2); font-size: 16px;
    box-shadow: inset 0 0 0 1px var(--ln-soft);
}
.nf-icon::after {
    content: ''; position: absolute; right: -2px; bottom: -2px; width: 10px; height: 10px; border-radius: 50%;
    background: var(--neu-dot); box-shadow: 0 0 0 2px var(--bg-surface);
}
.nf-item[data-level="success"] .nf-icon::after { background: var(--ok-dot); }
.nf-item[data-level="error"] .nf-icon::after { background: var(--bad-dot); }
.nf-item[data-level="warning"] .nf-icon::after { background: var(--warn-dot); }
.nf-item[data-level="info"] .nf-icon::after { background: var(--info-dot); }
.nf-item:hover .nf-icon::after { box-shadow: 0 0 0 2px color-mix(in srgb, var(--bg-surface) 96%, var(--tx-ink)); }
.nf-text { flex: 1; min-width: 0; padding-right: 14px; }
.nf-item-title { font-size: var(--fs-md); font-weight: 500; color: var(--tx-ink); line-height: 1.35; }
.nf-item.is-unread .nf-item-title { font-weight: 600; }
.nf-item-body { margin-top: 2px; font-size: var(--fs-sm); color: var(--tx-3); line-height: 1.45; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nf-meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: var(--fs-xs); color: var(--tx-3); }
.nf-meta a { color: var(--tx-link); font-weight: 500; }
.nf-meta a:hover { text-decoration: underline; }
.nf-fails-toggle { border: 0; background: none; padding: 0; color: var(--bad-tx); font: inherit; font-weight: 500; display: inline-flex; align-items: center; gap: 2px; }
.nf-fails-toggle i { transition: transform var(--d-2) var(--ease); }
.nf-fails-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
.nf-fails { margin-top: 8px; border-radius: var(--r-md); background: var(--bg-subtle); box-shadow: inset 0 0 0 1px var(--ln-soft); max-height: 180px; overflow-y: auto; }
.nf-fail { display: flex; flex-direction: column; padding: 7px 10px; border-bottom: 1px solid var(--ln-soft); font-size: var(--fs-xs); }
.nf-fail:last-child { border-bottom: 0; }
.nf-fail b { font-weight: 500; color: var(--tx-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nf-fail span { color: var(--tx-3); }
.nf-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--ln-soft); }
.nf-empty { padding: 44px 24px 48px; text-align: center; }
.nf-empty .pm-empty-icon { margin: 0 auto 14px; }
.nf-empty p { font-size: var(--fs-sm); color: var(--tx-3); margin-top: 4px; }

/* Top-right toasts for fresh notifications */
.pm-ntoasts {
    position: fixed; z-index: var(--z-toast); top: 12px; right: 12px;
    display: flex; flex-direction: column; gap: 8px; width: min(380px, calc(100vw - 24px)); pointer-events: none;
}
.pm-ntoast {
    pointer-events: auto; display: flex; gap: 12px; align-items: flex-start;
    padding: 12px 10px 12px 12px; border-radius: var(--r-lg);
    background: var(--bg-surface); box-shadow: var(--sh-pop); cursor: pointer;
    animation: nf-in var(--d-3) var(--ease-out) both;
}
.pm-ntoast.is-leaving { animation: nf-out var(--d-2) var(--ease) both; }
.pm-ntoast.is-bump { animation: nf-bump var(--d-3) var(--ease-out); }
.pm-ntoast .nf-text { padding-right: 0; }
@keyframes nf-in { from { opacity: 0; transform: translateY(-8px) scale(0.98); } }
@keyframes nf-out { to { opacity: 0; transform: translateX(16px) scale(0.98); } }
@keyframes nf-bump { 50% { transform: scale(1.015); } }

@media (max-width: 1023.98px) {
    .nf-panel { left: 8px; right: 8px; top: calc(var(--topbar-h) + 6px); width: auto; max-height: calc(100dvh - var(--topbar-h) - 14px); transform-origin: top right; }
    .pm-ntoasts { top: calc(var(--topbar-h) + 8px); }
}


/* ── Theme toggle (sidebar head + mobile top bar) ────────────────────── */
.pm-theme-btn > i { font-size: 17px; transition: transform var(--d-3) var(--ease-out), opacity var(--d-2) var(--ease); }
.pm-theme-btn .ri-sun-line { display: none; }
html.dark .pm-theme-btn .ri-sun-line { display: inline-block; }
html.dark .pm-theme-btn .ri-moon-line { display: none; }
.pm-theme-btn:active > i { transform: rotate(-20deg) scale(0.92); }

/* Footer row: subscription card + theme switch side by side */
.sb-foot-row { display: flex; align-items: stretch; gap: 6px; }
.sb-foot-row > .sb-plan { flex: 1; min-width: 0; }
.sb-theme {
    display: grid; place-items: center; flex-shrink: 0; width: 42px; border: 0; border-radius: var(--r-lg);
    background: var(--bg-surface); box-shadow: 0 0 0 1px var(--ln-soft); color: var(--tx-2);
    transition: background-color var(--d-1) var(--ease), color var(--d-1) var(--ease), box-shadow var(--d-1) var(--ease);
}
.sb-theme:hover { color: var(--tx-ink); box-shadow: 0 0 0 1px var(--ln); }
.sb-theme:focus-visible { outline: none; box-shadow: var(--ring); }
html.sb-collapsed .sb-foot-row { flex-direction: column; }
html.sb-collapsed .sb-theme { width: auto; height: 38px; }