/* ComplyHR theme v3 — "command centre".
   Dark instrument panel: near-black ground, glass panels, cyan primary, and colour
   that means something (red = act now, amber = soon, green = clear). Glow is used
   only on status and focus, never as decoration, so a red card genuinely pulls the
   eye across a dense screen.
   Class prefix: ch-  — every page shares these, so the whole app re-skins here. */

/* DARK (default) — the product's signature look. */
:root {
    /* ground + glass */
    --ch-bg: #070A12;
    --ch-bg-2: #0B1020;
    --ch-panel: rgba(255, 255, 255, .045);
    --ch-panel-2: rgba(255, 255, 255, .075);
    --ch-line: rgba(255, 255, 255, .10);
    --ch-line-soft: rgba(255, 255, 255, .06);
    --ch-sidebar: rgba(8, 12, 22, .92);
    --ch-input-bg: rgba(0, 0, 0, .3);
    --ch-input-bg-focus: rgba(0, 0, 0, .45);
    --ch-grid: rgba(255, 255, 255, .022);

    /* text */
    --ch-ink: #E9EEFB;
    --ch-ink-strong: #FFFFFF;
    --ch-muted: #8791AC;
    --ch-dim: #5C6685;

    /* brand: cyan instrument light */
    --ch-accent: #22D3EE;
    --ch-accent-2: #3B82F6;
    --ch-accent-dark: #67E8F9;
    --ch-accent-soft: rgba(34, 211, 238, .14);
    --ch-grad: linear-gradient(135deg, #22D3EE 0%, #3B82F6 100%);
    --ch-glow: 0 0 18px rgba(34, 211, 238, .45);
    --ch-btn-ink: #04121A;

    /* status */
    --ch-critical: #FF5A6E;
    --ch-critical-soft: rgba(255, 90, 110, .13);
    --ch-critical-glow: 0 0 16px rgba(255, 90, 110, .38);
    --ch-warning: #FFB224;
    --ch-warning-soft: rgba(255, 178, 36, .13);
    --ch-warning-glow: 0 0 16px rgba(255, 178, 36, .32);
    --ch-good: #2EE6A8;
    --ch-good-soft: rgba(46, 230, 168, .13);

    --ch-card: var(--ch-panel);
    --ch-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 10px 30px rgba(0, 0, 0, .45);
    --ch-shadow-hover: 0 1px 0 rgba(255,255,255,.05) inset, 0 16px 44px rgba(0, 0, 0, .6);
    --ch-radius: 14px;

    color-scheme: dark;

    --ch-body:
        radial-gradient(900px 520px at 12% -8%, rgba(34, 211, 238, .10), transparent 60%),
        radial-gradient(760px 480px at 92% 4%, rgba(59, 130, 246, .10), transparent 58%),
        linear-gradient(var(--ch-grid) 1px, transparent 1px) 0 0 / 100% 44px,
        linear-gradient(90deg, var(--ch-grid) 1px, transparent 1px) 0 0 / 44px 100%,
        var(--ch-bg);
    --ch-auth-body:
        radial-gradient(900px 600px at 25% -10%, rgba(34, 211, 238, .16), transparent 60%),
        radial-gradient(760px 560px at 105% 105%, rgba(59, 130, 246, .18), transparent 58%),
        linear-gradient(var(--ch-grid) 1px, transparent 1px) 0 0 / 100% 44px,
        linear-gradient(90deg, var(--ch-grid) 1px, transparent 1px) 0 0 / 44px 100%,
        var(--ch-bg);
    --ch-halo-accent: rgba(34, 211, 238, .5);
    --ch-halo-good: rgba(46, 230, 168, .4);
    --ch-halo-critical: rgba(255, 90, 110, .5);
    --ch-halo-warning: rgba(255, 178, 36, .45);
    --ch-accent-border: rgba(34, 211, 238, .42);
    --ch-accent-ring: rgba(34, 211, 238, .16);
    --ch-accent-halo: rgba(34, 211, 238, .20);
    --ch-critical-border: rgba(255, 90, 110, .40);
    --ch-warning-border: rgba(255, 178, 36, .35);
    --ch-good-border: rgba(46, 230, 168, .30);
    --ch-hover: rgba(255, 255, 255, .07);
    --ch-sheen: rgba(255, 255, 255, .22);
    --ch-gauge-hole: rgba(7, 10, 18, .96);
    --ch-gauge-track: rgba(255, 255, 255, .07);
    --ch-critical-text: #FFC2CA;
    --ch-auth-card-bg: rgba(11, 16, 32, .78);
    --ch-auth-card-shadow: 0 24px 70px rgba(0, 0, 0, .7), 0 0 0 1px rgba(34, 211, 238, .06);
}

/* LIGHT — a designed daylight counterpart, not an inversion. Panels sit on a soft
   near-white ground, the accent darkens so it still passes contrast on white, and the
   glows become quiet shadows: neon on white reads as muddy rather than lit. */
:root[data-theme="light"] {
    --ch-bg: #F4F7FC;
    --ch-bg-2: #FFFFFF;
    --ch-panel: #FFFFFF;
    --ch-panel-2: #F1F5FA;
    --ch-line: #DFE5EF;
    --ch-line-soft: #EDF1F7;
    --ch-sidebar: #FFFFFFEE;
    --ch-input-bg: #FFFFFF;
    --ch-input-bg-focus: #FFFFFF;
    --ch-grid: rgba(16, 24, 39, .035);

    --ch-ink: #172033;
    --ch-ink-strong: #0B1220;
    --ch-muted: #5B677E;
    --ch-dim: #8A94A8;

    --ch-accent: #0E8FA8;
    --ch-accent-2: #2563EB;
    --ch-accent-dark: #0B7488;
    --ch-accent-soft: rgba(14, 143, 168, .10);
    --ch-grad: linear-gradient(135deg, #0E9CB8 0%, #2563EB 100%);
    --ch-glow: 0 2px 10px rgba(14, 143, 168, .25);
    --ch-btn-ink: #FFFFFF;

    --ch-critical: #C92A43;
    --ch-critical-soft: rgba(201, 42, 67, .08);
    --ch-critical-glow: 0 2px 10px rgba(201, 42, 67, .18);
    --ch-warning: #A96A06;
    --ch-warning-soft: rgba(169, 106, 6, .10);
    --ch-warning-glow: 0 2px 10px rgba(169, 106, 6, .16);
    --ch-good: #0B7A56;
    --ch-good-soft: rgba(11, 122, 86, .10);

    --ch-shadow: 0 1px 2px rgba(16, 24, 39, .05), 0 6px 18px rgba(16, 24, 39, .06);
    --ch-shadow-hover: 0 2px 6px rgba(16, 24, 39, .08), 0 14px 32px rgba(16, 24, 39, .10);

    color-scheme: light;

    --ch-body:
        radial-gradient(900px 520px at 12% -8%, rgba(14, 143, 168, .07), transparent 60%),
        radial-gradient(760px 480px at 92% 4%, rgba(37, 99, 235, .06), transparent 58%),
        linear-gradient(var(--ch-grid) 1px, transparent 1px) 0 0 / 100% 44px,
        linear-gradient(90deg, var(--ch-grid) 1px, transparent 1px) 0 0 / 44px 100%,
        var(--ch-bg);
    --ch-auth-body:
        radial-gradient(900px 600px at 25% -10%, rgba(14, 143, 168, .14), transparent 60%),
        radial-gradient(760px 560px at 105% 105%, rgba(37, 99, 235, .12), transparent 58%),
        linear-gradient(var(--ch-grid) 1px, transparent 1px) 0 0 / 100% 44px,
        linear-gradient(90deg, var(--ch-grid) 1px, transparent 1px) 0 0 / 44px 100%,
        var(--ch-bg);
    --ch-halo-accent: transparent;
    --ch-halo-good: transparent;
    --ch-halo-critical: transparent;
    --ch-halo-warning: transparent;
    --ch-accent-border: rgba(14, 143, 168, .38);
    --ch-accent-ring: rgba(14, 143, 168, .20);
    --ch-accent-halo: rgba(14, 143, 168, .10);
    --ch-critical-border: rgba(201, 42, 67, .35);
    --ch-warning-border: rgba(169, 106, 6, .32);
    --ch-good-border: rgba(11, 122, 86, .30);
    --ch-hover: #EEF3F9;
    --ch-sheen: rgba(16, 24, 39, .06);
    --ch-gauge-hole: #FFFFFF;
    --ch-gauge-track: #E6ECF4;
    --ch-critical-text: #A31E34;
    --ch-auth-card-bg: #FFFFFF;
    --ch-auth-card-shadow: 0 10px 40px rgba(16, 24, 39, .14), 0 0 0 1px rgba(16, 24, 39, .04);
}

html, body { margin: 0; height: 100%; }
h1:focus { outline: none; }

body {
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    color: var(--ch-ink);
    font-size: 15px;
    background: var(--ch-body);
    background-attachment: fixed;
}

/* Registering the property is what lets a conic-gradient stop be animated at all.
   Where it is unsupported the keyframe is simply ignored and the ring renders at its
   final value — the inline --pct — so nothing breaks, it just doesn't sweep. */
@property --gp { syntax: "<number>"; initial-value: 0; inherits: false; }

@keyframes ch-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ch-gauge-fill { from { --gp: 0; } to { --gp: var(--pct); } }
@keyframes ch-pop { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }
@keyframes ch-shimmer { to { background-position: 200% 0; } }
@keyframes ch-breathe {
    0%, 100% { filter: drop-shadow(0 0 18px var(--gauge-shadow)); }
    50% { filter: drop-shadow(0 0 30px var(--gauge-shadow)); }
}
@keyframes ch-aurora {
    0%, 100% { transform: translate(-12%, -18%) scale(1); opacity: .55; }
    50% { transform: translate(10%, 8%) scale(1.25); opacity: .85; }
}
@keyframes ch-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ch-sweep { to { background-position: 200% 0; } }
@keyframes ch-pulse {
    0%, 100% { box-shadow: var(--ch-critical-glow); }
    50% { box-shadow: 0 0 26px var(--ch-halo-critical); }
}

/* ---------- shell ---------- */
.ch-shell { display: flex; min-height: 100vh; }
.ch-sidebar {
    width: 232px; flex-shrink: 0; background: var(--ch-sidebar);
    border-right: 1px solid var(--ch-line); backdrop-filter: blur(14px);
    color: var(--ch-muted); display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh; overflow: hidden;
}
/* Slow drifting light behind the brand mark — the only ambient motion in the app. */
.ch-sidebar::before {
    content: ""; position: absolute; top: -70px; left: -60px; width: 240px; height: 240px;
    border-radius: 50%; pointer-events: none; z-index: 0;
    background: radial-gradient(circle, var(--ch-accent-halo), transparent 70%);
    animation: ch-aurora 14s ease-in-out infinite;
}
.ch-sidebar > * { position: relative; z-index: 1; }
.ch-logo { display: flex; align-items: center; gap: 11px; padding: 20px 18px 18px; }
.ch-logo-mark {
    width: 34px; height: 34px; border-radius: 10px; background: var(--ch-grad); color: var(--ch-btn-ink);
    display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 17px;
    box-shadow: var(--ch-glow);
}
.ch-logo-text { font-weight: 650; font-size: 17px; color: var(--ch-ink-strong); letter-spacing: .015em; }
/* The real brand mark (SVG) — replaces the old letter tile; no background, the sails
   carry the identity on light and dark alike. */
.ch-logo-img { width: 36px; height: 36px; display: block; flex-shrink: 0; }
.ch-auth-brand .ch-logo-img { width: 44px; height: 44px; }
.ch-pub-brand .ch-logo-img { width: 34px; height: 34px; }

.ch-nav { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px; flex: 1; overflow-y: auto; }
.ch-nav a {
    display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 10px;
    color: var(--ch-muted); text-decoration: none; font-weight: 500; font-size: 14px;
    border: 1px solid transparent; position: relative;
    transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.ch-nav a:hover { background: var(--ch-hover); color: var(--ch-ink); }
.ch-nav a.active {
    background: var(--ch-accent-soft); color: var(--ch-ink-strong);
    border-color: var(--ch-accent-border);
    box-shadow: 0 0 14px var(--ch-accent-ring), inset 0 0 12px var(--ch-accent-halo);
}
.ch-nav a.active::before {
    content: ""; position: absolute; left: -1px; top: 8px; bottom: 8px; width: 2.5px;
    border-radius: 2px; background: var(--ch-accent); box-shadow: var(--ch-glow);
    animation: ch-bar-in .28s cubic-bezier(.2, .8, .3, 1) both;
    transform-origin: center;
}
@keyframes ch-bar-in { from { transform: scaleY(0); opacity: 0; } to { transform: none; opacity: 1; } }
.ch-nav-ico {
    width: 19px; height: 19px; display: inline-flex; flex-shrink: 0; opacity: .85;
    transition: transform .18s cubic-bezier(.2, .8, .3, 1.2);
}
.ch-nav a:hover .ch-nav-ico { transform: scale(1.15); }
.ch-nav a.active .ch-nav-ico { opacity: 1; color: var(--ch-accent); }
.ch-nav-ico svg { width: 100%; height: 100%; }

.ch-sidebar-foot { padding: 11px 14px 13px; border-top: 1px solid var(--ch-line); }

/* theme switch */
.ch-theme-toggle {
    display: flex; align-items: center; gap: 9px; width: 100%; margin-bottom: 10px;
    padding: 8px 11px; border-radius: 10px; cursor: pointer;
    background: var(--ch-panel); border: 1px solid var(--ch-line); color: var(--ch-muted);
    font: inherit; font-size: 13px; font-weight: 600;
    transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.ch-theme-toggle:hover {
    background: var(--ch-accent-soft); color: var(--ch-accent-dark);
    border-color: var(--ch-accent-border);
}
.ch-theme-toggle:focus-visible { outline: 2px solid var(--ch-accent); outline-offset: 2px; }
.ch-theme-ico { width: 17px; height: 17px; display: inline-flex; flex-shrink: 0; }
.ch-theme-ico svg { width: 100%; height: 100%; }
.ch-auth-foot .ch-theme-toggle { width: auto; margin: 0 auto 10px; justify-content: center; }
.ch-user-name { color: var(--ch-ink-strong); font-weight: 600; font-size: 13.5px; }
.ch-user-company { font-size: 12.5px; color: var(--ch-dim); }

.ch-main { flex: 1; padding: 26px 32px 60px; min-width: 0; animation: ch-fade .3s ease both; }

/* ---------- page furniture ---------- */
.ch-page-head {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    margin-bottom: 20px; flex-wrap: wrap;
}
.ch-page-head h1 {
    margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.01em; color: var(--ch-ink-strong);
}
.ch-page-ico {
    width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
    background: var(--ch-accent-soft); color: var(--ch-accent);
    border: 1px solid var(--ch-accent-border);
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 0 16px var(--ch-accent-ring);
}
.ch-page-ico svg { width: 21px; height: 21px; }
.ch-sub { color: var(--ch-muted); font-size: 13.5px; }

.ch-card {
    background: var(--ch-card); border: 1px solid var(--ch-line); border-radius: var(--ch-radius);
    padding: 18px 20px; margin-bottom: 14px; box-shadow: var(--ch-shadow);
    backdrop-filter: blur(10px); animation: ch-rise .4s ease both;
    transition: border-color .25s ease, box-shadow .25s ease;
}
.ch-card:hover { border-color: var(--ch-line); box-shadow: var(--ch-shadow-hover); }
.ch-main > .ch-card:nth-of-type(2) { animation-delay: .05s; }
.ch-main > .ch-card:nth-of-type(3) { animation-delay: .1s; }
.ch-card h2 {
    margin: 0 0 12px; font-size: 12px; font-weight: 700; color: var(--ch-muted);
    letter-spacing: .13em; text-transform: uppercase;
}

/* ---------- stat tiles ---------- */
.ch-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 11px; margin-bottom: 14px; }
.ch-stat {
    position: relative; overflow: hidden;
    background: var(--ch-card); border: 1px solid var(--ch-line); border-radius: var(--ch-radius);
    padding: 15px 17px; box-shadow: var(--ch-shadow); backdrop-filter: blur(10px);
    animation: ch-rise .4s ease both; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.ch-stat::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--ch-sheen), transparent);
}
.ch-stat:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.18); box-shadow: var(--ch-shadow-hover); }
.ch-stats > .ch-stat:nth-child(2) { animation-delay: .04s; }
.ch-stats > .ch-stat:nth-child(3) { animation-delay: .08s; }
.ch-stats > .ch-stat:nth-child(4) { animation-delay: .12s; }
.ch-stats > .ch-stat:nth-child(5) { animation-delay: .16s; }
.ch-stats > .ch-stat:nth-child(6) { animation-delay: .2s; }
.ch-stat-value {
    font-size: 28px; font-weight: 700; line-height: 1.1; color: var(--ch-ink-strong);
    font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}

/* Tile icon: a quiet identifier in the corner. It carries the tile's status colour,
   so a tile reads as "which reading, and is it healthy" before the number is parsed. */
.ch-stat-ico {
    position: absolute; top: 13px; right: 13px; width: 30px; height: 30px; border-radius: 9px;
    display: grid; place-items: center; color: var(--ch-muted);
    background: var(--ch-panel-2); border: 1px solid var(--ch-line-soft);
    transition: transform .22s ease, color .22s ease, border-color .22s ease;
}
.ch-stat-ico svg { width: 16px; height: 16px; }
.ch-stat:hover .ch-stat-ico { transform: scale(1.12) rotate(-4deg); }
.ch-stat-critical .ch-stat-ico { color: var(--ch-critical); border-color: var(--ch-critical-border); background: var(--ch-critical-soft); }
.ch-stat-warning .ch-stat-ico { color: var(--ch-warning); border-color: var(--ch-warning-border); background: var(--ch-warning-soft); }
.ch-stat-value + .ch-stat-label { max-width: calc(100% - 34px); }
.ch-stat-label {
    color: var(--ch-muted); font-size: 11.5px; margin-top: 5px;
    letter-spacing: .04em; text-transform: uppercase; font-weight: 600;
}
.ch-stat-critical { border-color: var(--ch-critical-border); }
.ch-stat-critical .ch-stat-value { color: var(--ch-critical); text-shadow: 0 0 18px var(--ch-halo-critical); }
.ch-stat-warning { border-color: var(--ch-warning-border); }
.ch-stat-warning .ch-stat-value { color: var(--ch-warning); text-shadow: 0 0 18px var(--ch-halo-warning); }
.ch-stat-accent .ch-stat-value { color: var(--ch-accent); text-shadow: var(--ch-glow); }

/* ---------- compliance gauge (dashboard centrepiece) ---------- */
.ch-hero { display: grid; grid-template-columns: auto 1fr; gap: 14px; margin-bottom: 14px; align-items: stretch; }
.ch-gauge-card {
    background: var(--ch-card); border: 1px solid var(--ch-line); border-radius: var(--ch-radius);
    padding: 20px 26px; box-shadow: var(--ch-shadow); backdrop-filter: blur(10px);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-width: 232px; animation: ch-rise .4s ease both;
}
.ch-gauge {
    --pct: 0;
    width: 152px; height: 152px; border-radius: 50%; position: relative;
    display: grid; place-items: center;
    background:
        conic-gradient(var(--gauge-color) calc(var(--gp) * 1%), var(--ch-gauge-track) 0);
    filter: drop-shadow(0 0 20px var(--gauge-shadow));
    animation: ch-gauge-fill 1.15s cubic-bezier(.2, .75, .25, 1) forwards;
}
/* A failing score keeps breathing after the sweep — it should not settle into the
   background the way a healthy one can. */
.ch-gauge.ch-gauge-bad { animation: ch-gauge-fill 1.15s cubic-bezier(.2,.75,.25,1) forwards, ch-breathe 3.2s ease-in-out 1.2s infinite; }
.ch-gauge-value { animation: ch-pop .5s cubic-bezier(.2, .8, .3, 1.1) .35s both; }
.ch-gauge::before {
    content: ""; position: absolute; inset: 11px; border-radius: 50%;
    background: radial-gradient(circle at 50% 35%, var(--ch-sheen), var(--ch-gauge-hole) 70%);
    border: 1px solid var(--ch-line-soft);
}
.ch-gauge-value {
    position: relative; font-size: 40px; font-weight: 750; color: var(--ch-ink-strong);
    font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1;
}
.ch-gauge-value small { display: block; font-size: 11px; font-weight: 600; letter-spacing: .14em;
    text-transform: uppercase; color: var(--ch-muted); margin-top: 7px; }
.ch-gauge-good { --gauge-color: var(--ch-good); --gauge-shadow: var(--ch-halo-good); }
.ch-gauge-mid  { --gauge-color: var(--ch-warning); --gauge-shadow: var(--ch-halo-warning); }
.ch-gauge-bad  { --gauge-color: var(--ch-critical); --gauge-shadow: var(--ch-halo-critical); }
.ch-gauge-status {
    margin-top: 15px; font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
}
.ch-gauge-status.ch-score-bad { color: var(--ch-critical); }
.ch-gauge-status.ch-score-mid { color: var(--ch-warning); }
.ch-gauge-status.ch-score-good { color: var(--ch-good); }
/* Fixed 3 columns so the six readings form a tidy 2×3 instrument block beside the
   gauge, rather than reflowing into an orphan row. */
.ch-hero-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; align-content: stretch; }
@media (max-width: 1180px) { .ch-hero-tiles { grid-template-columns: repeat(2, 1fr); } }
.ch-hero-tiles .ch-stat { margin: 0; }

/* ---------- action cards (the alert stack) ---------- */
.ch-actions { display: flex; flex-direction: column; gap: 9px; }
.ch-action {
    display: flex; align-items: center; gap: 14px; padding: 12px 15px;
    border-radius: 12px; border: 1px solid var(--ch-line);
    background: var(--ch-panel); cursor: default; position: relative; overflow: hidden;
    animation: ch-rise .35s ease both; transition: transform .16s ease, border-color .16s ease;
}
.ch-action::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ch-dim);
}
.ch-action.ch-click { cursor: pointer; }
.ch-action.ch-click:hover { transform: translateX(4px); border-color: var(--ch-accent-border); box-shadow: var(--ch-shadow); }
/* stagger the stack so it deals in rather than appearing as a block */
.ch-actions .ch-action:nth-child(1) { animation-delay: .02s; }
.ch-actions .ch-action:nth-child(2) { animation-delay: .06s; }
.ch-actions .ch-action:nth-child(3) { animation-delay: .1s; }
.ch-actions .ch-action:nth-child(4) { animation-delay: .14s; }
.ch-actions .ch-action:nth-child(5) { animation-delay: .18s; }
.ch-actions .ch-action:nth-child(6) { animation-delay: .22s; }
.ch-actions .ch-action:nth-child(n+7) { animation-delay: .26s; }
.ch-action-arrow {
    color: var(--ch-dim); opacity: 0; transform: translateX(-6px);
    transition: opacity .18s ease, transform .18s ease; flex-shrink: 0;
}
.ch-action-arrow svg { width: 16px; height: 16px; }
.ch-action.ch-click:hover .ch-action-arrow { opacity: 1; transform: none; color: var(--ch-accent); }
.ch-action-critical { background: linear-gradient(90deg, var(--ch-critical-soft), transparent 60%); border-color: var(--ch-critical-border); }
.ch-action-critical::before { background: var(--ch-critical); box-shadow: var(--ch-critical-glow); }
.ch-action-warning { background: linear-gradient(90deg, var(--ch-warning-soft), transparent 60%); border-color: var(--ch-warning-border); }
.ch-action-warning::before { background: var(--ch-warning); box-shadow: var(--ch-warning-glow); }
.ch-action-info { background: linear-gradient(90deg, var(--ch-accent-soft), transparent 60%); border-color: var(--ch-accent-border); }
.ch-action-info::before { background: var(--ch-accent); box-shadow: var(--ch-glow); }
.ch-action-body { flex: 1; min-width: 0; }
.ch-action-who { font-weight: 650; color: var(--ch-ink-strong); font-size: 14px; }
.ch-action-what { color: var(--ch-muted); font-size: 13px; margin-top: 2px; }
.ch-action-due {
    text-align: right; white-space: nowrap; font-size: 12px; font-variant-numeric: tabular-nums;
    color: var(--ch-muted);
}
.ch-action-due b { display: block; color: var(--ch-ink); font-weight: 650; }

/* ---------- avatars ---------- */
/* Initials, not photo placeholders: a list of people should look like people, and the
   hue is derived from the name so the same person is the same colour everywhere. */
.ch-avatar {
    width: 34px; height: 34px; border-radius: 11px; flex-shrink: 0;
    display: inline-grid; place-items: center;
    font-weight: 700; font-size: 12.5px; letter-spacing: .02em;
    color: hsl(var(--h, 190) 70% var(--ch-avatar-l, 72%));
    background: hsl(var(--h, 190) 65% var(--ch-avatar-bg-l, 22%) / var(--ch-avatar-bg-a, .55));
    border: 1px solid hsl(var(--h, 190) 60% 55% / .35);
    text-transform: uppercase;
}
:root[data-theme="light"] { --ch-avatar-l: 32%; --ch-avatar-bg-l: 92%; --ch-avatar-bg-a: 1; }
.ch-avatar-sm { width: 28px; height: 28px; border-radius: 9px; font-size: 11px; }
.ch-avatar-lg { width: 46px; height: 46px; border-radius: 14px; font-size: 16px; }

/* ---------- skeleton loading ---------- */
/* Shows the shape of what is coming rather than the word "Loading", so the page does
   not appear to jump when the data lands. */
.ch-skeleton { display: flex; flex-direction: column; gap: 11px; animation: ch-fade .25s ease both; }
.ch-skel {
    height: 14px; border-radius: 7px;
    background: linear-gradient(90deg, var(--ch-panel) 0%, var(--ch-panel-2) 40%, var(--ch-panel) 80%);
    background-size: 200% 100%;
    animation: ch-shimmer 1.3s linear infinite;
}
.ch-skel-tile { height: 84px; border-radius: var(--ch-radius); }
.ch-skel-row { height: 46px; border-radius: 10px; }
.ch-skel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 11px; }

/* ---------- tables ---------- */
.ch-table-wrap { overflow-x: auto; }
.ch-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ch-table th {
    text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em;
    color: var(--ch-dim); font-weight: 700; padding: 8px 10px; white-space: nowrap;
    border-bottom: 1px solid var(--ch-line);
}
.ch-table td {
    padding: 11px 10px; border-bottom: 1px solid var(--ch-line-soft); vertical-align: middle;
    color: var(--ch-ink); font-variant-numeric: tabular-nums; transition: background .14s ease;
}
.ch-table tbody tr:last-child td { border-bottom: 0; }
.ch-table tr.ch-click { cursor: pointer; }
.ch-table tr.ch-click td { position: relative; }
.ch-table tr.ch-click:hover td { background: var(--ch-accent-halo); }
/* An accent edge on the hovered row anchors the eye when scanning a wide table. */
.ch-table tr.ch-click:hover td:first-child::before {
    content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2.5px;
    border-radius: 2px; background: var(--ch-accent);
}
.ch-table tr.ch-click:hover td:first-child { padding-left: 16px; transition: padding-left .16s ease; }

/* ---------- badges & scores ---------- */
.ch-badge {
    display: inline-block; padding: 3px 10px; border-radius: 7px; font-size: 11.5px; font-weight: 700;
    white-space: nowrap; letter-spacing: .02em; border: 1px solid transparent;
}
.ch-badge-critical { background: var(--ch-critical-soft); color: var(--ch-critical); border-color: var(--ch-critical-border); }
.ch-badge-warning { background: var(--ch-warning-soft); color: var(--ch-warning); border-color: var(--ch-warning-border); }
.ch-badge-info, .ch-badge-sponsored { background: var(--ch-accent-soft); color: var(--ch-accent); border-color: var(--ch-accent-border); }
.ch-badge-good { background: var(--ch-good-soft); color: var(--ch-good); border-color: var(--ch-good-border); }
.ch-badge-neutral { background: rgba(255,255,255,.06); color: var(--ch-muted); border-color: var(--ch-line); }

.ch-score { font-weight: 700; font-variant-numeric: tabular-nums; }
.ch-score-good { color: var(--ch-good); }
.ch-score-mid { color: var(--ch-warning); }
.ch-score-bad { color: var(--ch-critical); }

/* ---------- forms ---------- */
.ch-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px 14px; }
.ch-form-full { grid-column: 1 / -1; }
.ch-field label {
    display: block; font-size: 11px; font-weight: 700; color: var(--ch-muted);
    margin-bottom: 5px; letter-spacing: .07em; text-transform: uppercase;
}
.ch-field input, .ch-field select, .ch-field textarea {
    width: 100%; box-sizing: border-box; padding: 9px 12px;
    border: 1px solid var(--ch-line); border-radius: 10px; font: inherit;
    background: var(--ch-input-bg); color: var(--ch-ink);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.ch-field input::placeholder, .ch-field textarea::placeholder { color: var(--ch-dim); }
.ch-field input:focus, .ch-field select:focus, .ch-field textarea:focus {
    outline: none; border-color: var(--ch-accent);
    box-shadow: 0 0 0 3px var(--ch-accent-ring), 0 0 14px var(--ch-accent-ring);
    background: var(--ch-input-bg-focus);
}
.ch-field select option { background: var(--ch-bg-2); color: var(--ch-ink); }

.ch-check { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--ch-ink); }
.ch-check input { width: auto; accent-color: var(--ch-accent); }

/* File pickers render as a native control — left alone they are a bright white slab
   in the middle of a dark panel, which is the detail that gives a theme away. */
input[type="file"] { color: var(--ch-muted); font: inherit; font-size: 13px; }
input[type="file"]::file-selector-button {
    background: var(--ch-panel-2); color: var(--ch-ink); border: 1px solid var(--ch-line);
    border-radius: 8px; padding: 7px 14px; margin-right: 11px; font: inherit;
    font-weight: 650; font-size: 12.5px; cursor: pointer;
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}
input[type="file"]::file-selector-button:hover {
    background: var(--ch-accent-soft); border-color: var(--ch-accent-border); color: var(--ch-accent-dark);
}

/* ---------- buttons ---------- */
.ch-btn {
    display: inline-flex; align-items: center; gap: 7px; padding: 9px 17px; border-radius: 10px;
    border: 1px solid transparent; background: var(--ch-grad); color: var(--ch-btn-ink); font: inherit;
    font-weight: 700; cursor: pointer; text-decoration: none; white-space: nowrap;
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
    box-shadow: 0 0 16px var(--ch-accent-border);
}
.ch-btn { position: relative; overflow: hidden; }
/* A light sweeps across the primary button on hover — one small reward, on the one
   control that matters most on each screen. */
.ch-btn::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.38) 50%, transparent 80%);
    transform: translateX(-120%); transition: transform .55s cubic-bezier(.3, .7, .3, 1);
}
.ch-btn:hover::after { transform: translateX(120%); }
.ch-btn-ghost::after { display: none; }
.ch-btn:hover { transform: translateY(-1px); box-shadow: 0 0 26px var(--ch-accent-border); filter: brightness(1.08); }
.ch-btn:active { transform: none; }
.ch-btn:disabled { opacity: .45; cursor: default; transform: none; box-shadow: none; filter: grayscale(.4); }
.ch-btn-ghost {
    background: var(--ch-panel); color: var(--ch-ink); border-color: var(--ch-line); box-shadow: none;
}
.ch-btn-ghost:hover {
    background: var(--ch-accent-soft); color: var(--ch-ink-strong); border-color: var(--ch-accent-border);
    box-shadow: 0 0 14px var(--ch-accent-halo); filter: none;
}
.ch-btn-danger { background: linear-gradient(135deg, #FF5A6E, #C4374A); color: #fff; box-shadow: 0 0 16px var(--ch-critical-border); }
.ch-btn-danger:hover { box-shadow: 0 0 26px var(--ch-halo-critical); }
.ch-btn-sm { padding: 6px 12px; font-size: 12.5px; border-radius: 8px; }
.ch-btn:focus-visible { outline: 2px solid var(--ch-accent); outline-offset: 2px; }

/* ---------- messages ---------- */
.ch-error {
    background: var(--ch-critical-soft); color: var(--ch-critical-text); border: 1px solid var(--ch-critical-border);
    border-radius: 11px; padding: 11px 15px; margin-bottom: 13px; font-size: 14px;
    animation: ch-rise .3s ease both; box-shadow: var(--ch-critical-glow);
}
.ch-notice {
    background: var(--ch-accent-soft); color: var(--ch-accent-dark); border: 1px solid var(--ch-accent-border);
    border-radius: 11px; padding: 11px 15px; margin-bottom: 13px; font-size: 14px;
    animation: ch-rise .3s ease both;
}
.ch-empty { color: var(--ch-muted); padding: 22px 0; text-align: center; }
.ch-loading {
    color: var(--ch-muted); padding: 34px 0; text-align: center; letter-spacing: .1em;
    text-transform: uppercase; font-size: 12px; font-weight: 700;
    background: linear-gradient(90deg, var(--ch-dim), var(--ch-accent), var(--ch-dim)) 0 0 / 200% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: ch-sweep 1.4s linear infinite;
}

/* ---------- tabs ---------- */
.ch-tabs {
    display: flex; gap: 3px; margin-bottom: 16px; flex-wrap: wrap;
    border-bottom: 1px solid var(--ch-line);
}
.ch-tab {
    padding: 9px 15px; border: 0; background: none; font: inherit; font-weight: 600; font-size: 13.5px;
    color: var(--ch-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
    transition: color .16s ease, border-color .16s ease;
}
.ch-tab:hover { color: var(--ch-ink); }
.ch-tab.active { color: var(--ch-accent); border-bottom-color: var(--ch-accent); text-shadow: 0 0 14px var(--ch-halo-accent); }

/* ---------- checklist ---------- */
.ch-checklist { display: flex; flex-direction: column; gap: 7px; }
.ch-checklist-item { display: flex; align-items: center; gap: 9px; font-size: 13.5px; }
.ch-tick { color: var(--ch-good); font-weight: 700; text-shadow: 0 0 10px var(--ch-halo-accent); }
.ch-cross { color: var(--ch-critical); font-weight: 700; text-shadow: 0 0 10px var(--ch-halo-critical); }

/* ---------- auth ---------- */
.ch-auth-shell {
    min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px;
    background: var(--ch-auth-body);
}
.ch-auth-card {
    background: rgba(11, 16, 32, .78); border: 1px solid var(--ch-line); backdrop-filter: blur(16px);
    border-radius: 18px; padding: 34px 36px; width: 100%; max-width: 400px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .7), 0 0 0 1px var(--ch-accent-halo);
    animation: ch-rise .45s ease both;
}
.ch-auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.ch-auth-brand .ch-logo-text { color: var(--ch-ink-strong); font-size: 20px; }
.ch-auth-card h1 { font-size: 18px; margin: 0 0 16px; color: var(--ch-ink-strong); }
.ch-auth-card .ch-field { margin-bottom: 12px; }
.ch-auth-links { margin-top: 16px; font-size: 13.5px; display: flex; flex-direction: column; gap: 6px; color: var(--ch-muted); }
.ch-auth-links a { color: var(--ch-accent); text-decoration: none; }
.ch-auth-links a:hover { text-decoration: underline; }
.ch-auth-foot { margin-top: 20px; text-align: center; color: var(--ch-dim); font-size: 12px; letter-spacing: .06em; }

.ch-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ch-spacer { flex: 1; }

/* ---------- rota ---------- */
.ch-rota th, .ch-rota td { text-align: center; }
.ch-rota th:first-child, .ch-rota td:first-child { text-align: left; }
.ch-rota-today { color: var(--ch-accent) !important; text-shadow: 0 0 12px var(--ch-halo-accent); }
.ch-rota-cell { min-width: 86px; vertical-align: top; }
.ch-shift {
    background: var(--ch-accent-soft); color: var(--ch-accent-dark); border: 1px solid var(--ch-accent-border);
    border-radius: 8px; padding: 3px 8px; font-size: 12px; font-weight: 650; margin: 2px 0;
    position: relative; white-space: nowrap; transition: transform .15s ease, box-shadow .15s ease;
}
.ch-shift:hover { transform: scale(1.03); box-shadow: 0 0 14px var(--ch-accent-halo); }
.ch-shift .ch-sub { display: block; font-weight: 500; }
.ch-shift-x { border: 0; background: none; color: var(--ch-critical); cursor: pointer; font-size: 11px; padding: 0 2px; margin-left: 4px; }

/* ---------- leave wall chart ---------- */
.ch-wall { border-collapse: collapse; font-size: 12px; width: 100%; }
.ch-wall th {
    font-size: 10px; color: var(--ch-dim); font-weight: 700; padding: 4px 2px;
    border-bottom: 1px solid var(--ch-line); text-align: center;
}
.ch-wall th.ch-wall-name, .ch-wall td.ch-wall-name {
    text-align: left; white-space: nowrap; padding: 6px 10px 6px 0; font-weight: 650; font-size: 13px; color: var(--ch-ink);
}
.ch-wall td { padding: 2px 1px; border-bottom: 1px solid var(--ch-line-soft); }
.ch-wall-day { width: 24px; min-width: 20px; height: 26px; text-align: center; }
.ch-wall-cell { border-radius: 5px; height: 22px; transition: transform .15s ease; }
.ch-wall-cell:hover { transform: scale(1.18); }
.ch-wall-weekend { background: var(--ch-panel-2); }
.ch-wall-bankhol { background: repeating-linear-gradient(45deg, var(--ch-panel-2) 0 4px, var(--ch-line) 4px 8px); }
.ch-wall-leave { background: var(--ch-grad); box-shadow: 0 0 10px var(--ch-accent-border); }
.ch-wall-sick { background: var(--ch-warning); box-shadow: 0 0 10px var(--ch-warning-border); }
.ch-wall-unauth { background: var(--ch-critical); box-shadow: 0 0 10px var(--ch-critical-border); }
.ch-wall-other { background: var(--ch-dim); }
.ch-wall-pending { opacity: .4; }
.ch-wall-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; font-size: 12.5px; color: var(--ch-muted); }
.ch-wall-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ch-wall-legend i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }

/* Bradford factor pills */
.ch-bradford { font-weight: 700; font-variant-numeric: tabular-nums; padding: 2px 10px; border-radius: 8px; border: 1px solid transparent; }
.ch-bradford-ok { background: var(--ch-good-soft); color: var(--ch-good); border-color: var(--ch-good-border); }
.ch-bradford-watch { background: var(--ch-warning-soft); color: var(--ch-warning); border-color: var(--ch-warning-border); }
.ch-bradford-high { background: var(--ch-critical-soft); color: var(--ch-critical); border-color: var(--ch-critical-border); box-shadow: var(--ch-critical-glow); }

/* ---------- public/legal pages (web host only — stays light) ---------- */
.ch-pub-shell { display: flex; flex-direction: column; min-height: 100vh; background: #fff; color: #1C1F33; }
.ch-pub-nav {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 14px 5vw; border-bottom: 1px solid #E2E4F0;
    position: sticky; top: 0; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); z-index: 10;
}
.ch-pub-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.ch-pub-links { display: flex; align-items: center; gap: 20px; }
.ch-pub-links a { color: #1C1F33; text-decoration: none; font-weight: 500; transition: color .18s ease; }
.ch-pub-links a:hover { color: #0E7490; }
.ch-pub-main { flex: 1; }
.ch-pub-doc { max-width: 760px; margin: 0 auto; padding: 44px 5vw 64px; line-height: 1.65; animation: ch-rise .4s ease both; }
.ch-pub-doc h1 { font-size: 1.75rem; margin: 0 0 4px; }
.ch-pub-doc h2 { font-size: 1.05rem; margin: 26px 0 8px; color: #0E7490; }
.ch-pub-doc p, .ch-pub-doc li { margin: 0 0 10px; }
.ch-pub-doc a { color: #0E7490; }
.ch-pub-doc-meta { color: #6B7089; font-size: 0.85rem; margin-bottom: 26px; }
.ch-pub-footer { border-top: 1px solid #E2E4F0; padding: 26px 5vw 34px; color: #6B7089; font-size: 13px; text-align: center; }
.ch-pub-footer-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 18px; margin-bottom: 14px; }
.ch-pub-footer-links a { color: #1C1F33; text-decoration: none; font-weight: 500; }
.ch-pub-footer-links a:hover { color: #0E7490; }
.ch-pub-footer a { color: #0E7490; }

/* ---------- audit diff (old value → new value) ---------- */
.ch-diff { display: flex; flex-direction: column; gap: 4px; margin-top: 7px; }
.ch-diff-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; }
.ch-diff-field { color: var(--ch-muted); min-width: 128px; font-weight: 600; }
.ch-diff-from {
    background: var(--ch-critical-soft); color: var(--ch-critical);
    border: 1px solid var(--ch-critical-border); border-radius: 6px; padding: 1px 8px;
    text-decoration: line-through; text-decoration-thickness: 1px;
}
.ch-diff-arrow { color: var(--ch-dim); }
.ch-diff-to {
    background: var(--ch-good-soft); color: var(--ch-good);
    border: 1px solid var(--ch-good-border); border-radius: 6px; padding: 1px 8px; font-weight: 600;
}

/* ---------- progress bar (objectives) ---------- */
.ch-progress {
    height: 8px; border-radius: 5px; background: var(--ch-panel-2);
    border: 1px solid var(--ch-line-soft); overflow: hidden; min-width: 90px;
}
.ch-progress span {
    display: block; height: 100%; border-radius: 5px; background: var(--ch-grad);
    box-shadow: var(--ch-glow); transition: width .5s cubic-bezier(.2, .8, .3, 1);
}

/* ---------- phone tab bar + drawer (hidden on desktop) ---------- */
.ch-tabbar { display: none; }
.ch-drawer, .ch-drawer-backdrop { display: none; }

/* Blazor's error bar: hidden until the framework shows it. */
#blazor-error-ui {
    display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;
    background: var(--ch-panel-2); color: var(--ch-warning); border-top: 1px solid var(--ch-warning);
    padding: 10px 16px; box-shadow: 0 -2px 20px rgba(0,0,0,.6);
}
#blazor-error-ui .dismiss { cursor: pointer; float: right; padding-left: 12px; }

@media (max-width: 900px) {
    .ch-hero { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    /* Phone app bar, two rows:
         [C ComplyHR ................ ☀ Light mode]   brand + theme switch
         [Dashboard][Employees][eVisa]…               scrolling section strip
       One row could not hold all three, which is what pushed the theme switch out
       under the status-bar icons. The safe-area insets keep the bar clear of the
       notch and the gesture bar — Android draws apps edge-to-edge by default. */
    .ch-shell { flex-direction: column; }
    .ch-sidebar {
        width: auto; height: auto; position: sticky; top: 0; z-index: 20;
        flex-direction: row; flex-wrap: wrap; align-items: center;
        padding-top: env(safe-area-inset-top, 0px);
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
        border-right: 0; border-bottom: 1px solid var(--ch-line);
    }
    .ch-logo { order: 1; flex: 1; min-width: 0; padding: 12px 8px 12px 14px; }
    .ch-sidebar-foot { order: 2; border-top: 0; padding: 0 12px 0 0; flex-shrink: 0; }
    .ch-sidebar-foot .ch-user { display: none; }
    /* The sideways-scrolling strip is replaced by the bottom tab bar below. */
    .ch-nav { display: none; }
    .ch-main {
        padding: 16px 14px calc(84px + env(safe-area-inset-bottom, 0px));
    }

    /* ---- bottom tab bar: thumb-reachable, the standard phone pattern ---- */
    .ch-tabbar {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
        background: var(--ch-sidebar); backdrop-filter: blur(16px);
        border-top: 1px solid var(--ch-line);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .ch-tab-item {
        flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
        padding: 9px 4px 8px; border: 0; background: none; cursor: pointer;
        color: var(--ch-muted); text-decoration: none; font: inherit; font-size: 10.5px;
        font-weight: 600; letter-spacing: .01em; position: relative;
        transition: color .16s ease;
    }
    .ch-tab-ico { width: 22px; height: 22px; display: block; transition: transform .18s cubic-bezier(.2,.8,.3,1.3); }
    .ch-tab-ico svg { width: 100%; height: 100%; }
    .ch-tab-item.active { color: var(--ch-accent); }
    .ch-tab-item.active .ch-tab-ico { transform: translateY(-2px) scale(1.1); }
    .ch-tab-item.active::before {
        content: ""; position: absolute; top: 0; left: 26%; right: 26%; height: 2.5px;
        border-radius: 0 0 3px 3px; background: var(--ch-accent); box-shadow: var(--ch-glow);
    }

    /* ---- drawer for everything that does not fit ---- */
    .ch-drawer-backdrop {
        display: block; position: fixed; inset: 0; z-index: 40;
        background: rgba(0, 0, 0, .55); animation: ch-fade .2s ease both;
    }
    .ch-drawer {
        display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 41;
        max-height: 82vh; overflow-y: auto;
        background: var(--ch-bg-2); border-top: 1px solid var(--ch-line);
        border-radius: 18px 18px 0 0; box-shadow: 0 -14px 44px rgba(0, 0, 0, .55);
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        animation: ch-slide-up .26s cubic-bezier(.2, .8, .25, 1) both;
    }
    .ch-drawer-head {
        display: flex; align-items: center; justify-content: space-between;
        padding: 14px 16px 10px; font-size: 11px; font-weight: 700;
        letter-spacing: .13em; text-transform: uppercase; color: var(--ch-muted);
        position: sticky; top: 0; background: var(--ch-bg-2);
    }
    .ch-drawer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 12px 12px; }
    .ch-drawer-item {
        display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
        padding: 15px 6px; border-radius: 13px; text-decoration: none;
        color: var(--ch-ink); font-size: 12px; font-weight: 600;
        background: var(--ch-panel); border: 1px solid var(--ch-line);
    }
    .ch-drawer-item.active { border-color: var(--ch-accent-border); color: var(--ch-accent); background: var(--ch-accent-soft); }
    .ch-drawer-ico { width: 22px; height: 22px; }
    .ch-drawer-ico svg { width: 100%; height: 100%; }
    .ch-drawer-foot { padding: 4px 18px 8px; border-top: 1px solid var(--ch-line-soft); margin-top: 4px; }
}

@keyframes ch-slide-up { from { transform: translateY(100%); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}