/* ============================================================
   Ample Commissions — brand design system
   Navy + green · Plus Jakarta Sans / Inter · light + dark · responsive
   ============================================================ */
:root, [data-theme="light"] {
    --bg: #f3f7f5;
    --bg-tint: #eaf3ee;
    --surface: #ffffff;
    --surface-2: #f7faf8;
    --sidebar: #ffffff;
    --ink: #142b43;
    --ink-soft: #3b4a5b;
    --muted: #7c8a99;
    --faint: #a7b2bf;
    --line: #e7edea;
    --line-soft: #f0f4f1;
    --accent: #2f7159;
    --accent-bright: #49a67d;
    --accent-soft: #e8f4ed;
    --navy: #142b43;
    --blue: #3a6fa0;
    --blue-soft: #eaf1f8;
    --ok: #2f9e6a; --ok-soft: #e7f6ee;
    --warn: #bd7415; --warn-soft: #fbf1e2;
    --bad: #d6453f; --bad-soft: #fbeceb;
    --shadow: 0 1px 2px rgba(20,43,67,.04), 0 1px 3px rgba(20,43,67,.03);
    --shadow-md: 0 6px 18px rgba(20,43,67,.07);
    --shadow-lg: 0 16px 40px rgba(20,43,67,.14);
    --leaf: rgba(73,166,125,.10);
}
[data-theme="dark"] {
    --bg: #0b1622;
    --bg-tint: #0e2030;
    --surface: #122739;
    --surface-2: #0f2030;
    --sidebar: #0e1f30;
    --ink: #eaf2f8;
    --ink-soft: #bccadb;
    --muted: #8094a6;
    --faint: #5f7184;
    --line: #21394f;
    --line-soft: #1a3044;
    --accent: #4fb088;
    --accent-bright: #62c79b;
    --accent-soft: rgba(79,176,136,.16);
    --navy: #0a141f;
    --blue: #5b90be;
    --blue-soft: rgba(91,144,190,.16);
    --ok: #46c08a; --ok-soft: rgba(70,192,138,.16);
    --warn: #e0a23a; --warn-soft: rgba(224,162,58,.16);
    --bad: #f06a66; --bad-soft: rgba(240,106,102,.16);
    --shadow: 0 1px 2px rgba(0,0,0,.25), 0 1px 3px rgba(0,0,0,.2);
    --shadow-md: 0 6px 20px rgba(0,0,0,.35);
    --shadow-lg: 0 18px 44px rgba(0,0,0,.5);
    --leaf: rgba(79,176,136,.13);
}

* { box-sizing: border-box; }
html, body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg); color: var(--ink-soft);
    font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; letter-spacing: -.006em;
}
h1, h2, h3, h4, h5, .brand-name, .kpi-value, .period-nav .period { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; }
h1, h2, h3, h4, h5 { color: var(--ink); font-weight: 700; letter-spacing: -.02em; }
h1:focus, h1:focus-visible, [tabindex="-1"]:focus { outline: none; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-bright); }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.text-muted { color: var(--muted) !important; }
.fw-semibold { font-weight: 600 !important; }

/* ---------- Shell ---------- */
.nav-toggle { position: fixed; opacity: 0; width: 0; height: 0; pointer-events: none; }
.shell { display: flex; min-height: 100vh; }
.shell-aside {
    width: 256px; flex: 0 0 256px; background: var(--sidebar); color: var(--ink-soft);
    border-right: 1px solid var(--line); position: sticky; top: 0; height: 100vh;
    display: flex; flex-direction: column; z-index: 40; overflow: hidden;
}
.shell-aside::after {  /* faint leaf watermark */
    content: ""; position: absolute; right: -30px; bottom: 40px; width: 160px; height: 160px; opacity: .9; pointer-events: none;
    background: radial-gradient(circle at 30% 30%, var(--leaf), transparent 70%);
}
.shell-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.shell-topbar {
    min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 0 clamp(16px, 3vw, 40px); background: color-mix(in srgb, var(--surface) 82%, transparent);
    backdrop-filter: blur(12px) saturate(1.3); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30;
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 12px; min-width: 0; }
.shell-content { padding: clamp(18px, 2.4vw, 36px) clamp(16px, 3vw, 40px) 64px; max-width: 1560px; width: 100%; }
.nav-scrim { display: none; }
.hamburger { display: none; }

/* ---------- Brand + nav ---------- */
.brand { display: flex; align-items: center; gap: 12px; padding: 22px 22px 20px; }
.brand-mark { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(140deg, #49a67d, #2f7159 70%);
    display: grid; place-items: center; box-shadow: 0 6px 16px -5px rgba(47,113,89,.55); flex: 0 0 40px; }
.brand-name { font-weight: 800; color: var(--ink); font-size: 1.02rem; line-height: 1.1; }
.brand-sub { font-size: .68rem; color: var(--faint); letter-spacing: .08em; text-transform: uppercase; }
.nav-group-label { font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; color: var(--faint); padding: 18px 26px 8px; font-weight: 700; }
.nav-list { display: flex; flex-direction: column; gap: 2px; padding: 0 14px; }
.nav-link2 { display: flex; align-items: center; gap: 11px; padding: 9px 14px; border-radius: 10px; color: var(--ink-soft);
    font-weight: 500; font-size: .9rem; transition: all .13s ease; position: relative; }
.nav-link2 svg { width: 17px; height: 17px; opacity: .6; flex: 0 0 17px; }
.nav-link2:hover { background: var(--surface-2); color: var(--ink); }
.nav-link2:hover svg { opacity: .9; }
.nav-link2.active { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.nav-link2.active svg { opacity: 1; color: var(--accent); }
.aside-foot { margin-top: auto; padding: 18px 24px; font-size: .72rem; color: var(--faint); border-top: 1px solid var(--line); line-height: 1.6; position: relative; z-index: 1; }

/* ---------- Pills / status ---------- */
.pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; font-size: .76rem; font-weight: 600; white-space: nowrap; }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill-ok { background: var(--ok-soft); color: var(--ok); }
.pill-run { background: var(--accent-soft); color: var(--accent); }
.pill-bad { background: var(--bad-soft); color: var(--bad); }
.pill-idle { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }

/* ---------- theme toggle / hamburger buttons ---------- */
.icon-square { width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--line); background: var(--surface);
    display: grid; place-items: center; cursor: pointer; color: var(--ink-soft); transition: all .14s ease; flex: 0 0 auto; }
.icon-square:hover { background: var(--surface-2); color: var(--ink); }
.theme-toggle .ico-sun { display: none; }
[data-theme="dark"] .theme-toggle .ico-sun { display: block; }
[data-theme="dark"] .theme-toggle .ico-moon { display: none; }

/* ---------- Page header ---------- */
.page-head { margin-bottom: 26px; }
.page-head h1 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 1.95rem); margin: 0; }
.page-head p { color: var(--muted); margin: 6px 0 0; font-size: .96rem; }

/* ---------- KPI tiles ---------- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 28px; }
.kpi { background: var(--surface); border-radius: 16px; padding: 20px; box-shadow: var(--shadow); border: 1px solid var(--line);
    transition: transform .18s ease, box-shadow .18s ease; position: relative; overflow: hidden; }
.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.kpi-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.kpi-value { font-size: clamp(1.3rem, 1rem + 1vw, 1.85rem); font-weight: 800; margin-top: 10px; line-height: 1.08;
    color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-sub { font-size: .82rem; color: var(--muted); margin-top: 6px; }
.kpi-value.sm { font-size: clamp(1.05rem, .9rem + .5vw, 1.35rem); white-space: normal; line-height: 1.25; }
.kpi.accent-success .kpi-value { color: var(--ok); }
.kpi.accent-warning .kpi-value { color: var(--warn); }
.kpi.accent-brand .kpi-value { color: var(--accent); }

/* ---------- Panels ---------- */
.panel, .card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
.panel-head, .card-header { padding: 16px 20px; font-weight: 700; font-size: 1rem; color: var(--ink); background: var(--surface);
    border-bottom: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.panel-body, .card-body { padding: 20px; }

/* ---------- Tables ---------- */
.table { margin: 0; color: var(--ink-soft); }
.table > thead th { background: var(--surface); color: var(--faint); font-weight: 700; font-size: .71rem; text-transform: uppercase;
    letter-spacing: .05em; border-bottom: 1px solid var(--line); padding: 13px 16px; white-space: nowrap; }
.table > tbody td { padding: 13px 16px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; font-size: .9rem; }
.table > tbody tr:last-child td { border-bottom: none; }
.table.table-hover > tbody tr { transition: background .12s ease; }
.table.table-hover > tbody tr:hover { background: var(--accent-soft); }
.table tfoot td { padding: 14px 16px; border-top: 1px solid var(--line); background: var(--surface-2); font-weight: 700; color: var(--ink); }
.table-wrap { border-radius: 16px; overflow-x: auto; border: 1px solid var(--line); box-shadow: var(--shadow); background: var(--surface); }
.table-scroll { max-height: 72vh; overflow: auto; }
.table-scroll thead th { position: sticky; top: 0; z-index: 1; }

/* ---------- Badges ---------- */
.badge { font-weight: 600; padding: .38em .72em; border-radius: 7px; font-size: .72rem; }
.s-ok { background: var(--ok-soft); color: var(--ok); }
.s-bad { background: var(--bad-soft); color: var(--bad); }
.s-warn { background: var(--warn-soft); color: var(--warn); }
.s-run { background: var(--accent-soft); color: var(--accent); }
.s-muted { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }

/* ---------- Buttons ---------- */
.btn { font-weight: 600; border-radius: 10px; transition: all .14s ease; }
.btn-primary { background: var(--accent); border: none; color: #fff; box-shadow: 0 2px 6px -1px rgba(47,113,89,.4); }
.btn-primary:hover { background: var(--accent-bright); transform: translateY(-1px); box-shadow: 0 6px 16px -3px rgba(47,113,89,.5); color: #fff; }
.btn-primary:disabled { opacity: .55; }
.btn-outline-primary { border: 1px solid var(--line); color: var(--accent); background: var(--surface); }
.btn-outline-primary:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.btn-ghost { background: var(--surface); border: 1px solid var(--line); color: var(--ink-soft); }
.btn-ghost:hover { background: var(--surface-2); }

/* ---------- Progress / recon ---------- */
.progress { background: var(--line); border-radius: 999px; height: 8px; overflow: hidden; }
.progress-bar.bg-success { background: linear-gradient(90deg,var(--accent),var(--accent-bright)) !important; }
.progress-bar.bg-warning { background: linear-gradient(90deg,#e0a23a,#f0c068) !important; }
.recon-cell { display: flex; align-items: center; gap: 10px; }
.recon-cell .pct { font-size: .8rem; font-weight: 600; color: var(--ink-soft); width: 42px; text-align: right; }

/* ---------- Bar charts ---------- */
.bar-row { display: flex; align-items: center; gap: 12px; margin-bottom: 11px; }
.bar-label { width: 130px; font-size: .85rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.bar-track { flex: 1; background: var(--line); border-radius: 7px; height: 10px; overflow: hidden; min-width: 60px; }
.bar-fill { height: 100%; border-radius: 7px; background: linear-gradient(90deg,var(--accent),var(--accent-bright)); }
.bar-fill.alt { background: linear-gradient(90deg,#3a6fa0,#5b90be); }
.bar-val { width: 116px; text-align: right; font-size: .84rem; font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }

/* ---------- Period navigator ---------- */
.period-nav { display: flex; align-items: center; gap: 10px; }
.period-nav .period { min-width: 180px; text-align: center; font-weight: 700; font-size: 1.08rem; color: var(--ink); padding: 9px 16px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.period-nav .period small { display: block; font-weight: 500; font-size: .72rem; color: var(--muted); margin-top: 2px; }
.icon-btn { width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface);
    display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow); transition: all .14s ease; color: var(--ink-soft); }
.icon-btn:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-1px); }
.icon-btn:disabled { opacity: .4; cursor: not-allowed; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; cursor: pointer; border: 1px solid var(--line);
    background: var(--surface); font-size: .82rem; font-weight: 600; color: var(--ink-soft); transition: all .13s ease; }
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------- Search ---------- */
.topbar-search { display: flex; align-items: center; gap: 9px; background: var(--surface-2); border: 1px solid var(--line);
    border-radius: 10px; padding: 9px 14px; width: clamp(160px, 28vw, 360px); color: var(--muted); transition: all .15s ease; min-width: 0; }
.topbar-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--surface); }
.topbar-search input { border: none; background: transparent; outline: none; font-size: .9rem; width: 100%; color: var(--ink); min-width: 0; }
.search-bar { display: flex; align-items: center; gap: 13px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
    padding: 14px 18px; box-shadow: var(--shadow); max-width: 760px; color: var(--muted); }
.search-bar:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.search-input { flex: 1; border: none; outline: none; font-size: 1.05rem; background: transparent; color: var(--ink); min-width: 0; }
.legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: middle; margin: 0 3px; }
.legend-dot.ours { background: var(--accent-bright); }
.legend-dot.ten { background: #3a6fa0; }
code { background: var(--accent-soft); padding: 2px 7px; border-radius: 6px; color: var(--accent); font-size: .85em; }
.form-control { background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 8px 12px; color: var(--ink); font-size: .9rem; }
.form-control:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }
.form-control::placeholder { color: var(--faint); }
.freshness { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 10px; font-size: .82rem; color: var(--muted); }
.freshness b { color: var(--ink-soft); font-weight: 600; }

/* ---------- misc ---------- */
.muted-sm { font-size: .84rem; color: var(--muted); }
.clickrow { cursor: pointer; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted) 45%, transparent); border-radius: 8px; border: 3px solid var(--bg); }

/* ============================================================
   Responsive — down to 400px
   ============================================================ */
@media (max-width: 1100px) { .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } }
@media (max-width: 860px) {
    .shell-aside { position: fixed; top: 0; left: 0; bottom: 0; transform: translateX(-102%); transition: transform .24s ease; box-shadow: var(--shadow-lg); }
    .nav-toggle:checked ~ .shell .shell-aside { transform: translateX(0); }
    .nav-scrim { display: block; position: fixed; inset: 0; background: rgba(8,16,24,.42); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 35; }
    .nav-toggle:checked ~ .shell .nav-scrim { opacity: 1; pointer-events: auto; }
    .hamburger { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; color: var(--ink-soft); flex: 0 0 auto; }
}
@media (max-width: 560px) {
    .kpi-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .kpi-value { font-size: 1.4rem; }
    .topbar-search { display: none; }
    .shell-topbar { padding: 0 14px; }
    .row > [class*="col-"] { margin-bottom: 14px; }
    .period-nav .period { min-width: 130px; font-size: .96rem; }
}
@media (max-width: 400px) {
    .kpi-grid { grid-template-columns: 1fr; }
    .page-head h1 { font-size: 1.4rem; }
}

/* ============================================================
   Auth — login / forgot / reset (AccountLayout)
   ============================================================ */
.auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 28px 18px;
    background:
        radial-gradient(1100px 520px at 88% -8%, var(--accent-soft), transparent 60%),
        radial-gradient(900px 480px at -6% 108%, var(--blue-soft), transparent 58%),
        var(--bg); position: relative; }
.auth-theme { position: fixed; top: 18px; right: 18px; }
.auth-wrap { width: 100%; max-width: 430px; }
.auth-card { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 34px 32px;
    box-shadow: var(--shadow-lg); }
.auth-brand { display: flex; align-items: center; gap: 13px; margin-bottom: 26px; }
.auth-mark { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
    background: linear-gradient(150deg, var(--accent), var(--accent-bright)); box-shadow: 0 8px 18px -6px rgba(47,113,89,.55); }
.auth-brand-name { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1.15rem; color: var(--ink); line-height: 1.1; }
.auth-brand-sub { font-size: .78rem; color: var(--muted); letter-spacing: .03em; text-transform: uppercase; }
.auth-title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1.6rem; color: var(--ink); margin: 0 0 4px; }
.auth-sub { color: var(--muted); font-size: .92rem; margin: 0 0 22px; }
.auth-form { display: flex; flex-direction: column; gap: 16px; }
.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.auth-link { color: var(--accent); font-weight: 600; font-size: .85rem; text-decoration: none; }
.auth-link:hover { text-decoration: underline; color: var(--accent-bright); }
.auth-validation { color: var(--bad); font-size: .85rem; }
.auth-validation ul { margin: 0; padding-left: 18px; }
.auth-foot { text-align: center; color: var(--muted); font-size: .78rem; margin-top: 18px; }
.auth-steps { margin: 0 0 20px; padding-left: 20px; color: var(--ink-soft); font-size: .9rem; line-height: 1.7; }
.auth-steps b { color: var(--ink); }

/* shared form field */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field-label { font-size: .82rem; font-weight: 600; color: var(--ink-soft); }
.field-hint { font-size: .76rem; color: var(--muted); }
.field-error { color: var(--bad); font-size: .8rem; }
.field .form-control, .auth-form .form-control { padding: 11px 13px; font-size: .95rem; border-radius: 11px; }
.check-row { display: inline-flex; align-items: center; gap: 8px; font-size: .87rem; color: var(--ink-soft); cursor: pointer; user-select: none; margin: 0; }
.check-row input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); }

/* buttons used by auth + users pages */
.btn-brand { background: linear-gradient(150deg, var(--accent), var(--accent-bright)); border: none; color: #fff;
    padding: 11px 18px; font-weight: 700; border-radius: 11px; box-shadow: 0 6px 16px -6px rgba(47,113,89,.6); }
.btn-brand:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 10px 22px -7px rgba(47,113,89,.7); }
.btn-brand:disabled { opacity: .55; transform: none; }
.btn-block { width: 100%; }
.btn-soft { background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-soft); }
.btn-soft:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.btn-xs { padding: 5px 11px; font-size: .78rem; border-radius: 8px; margin-left: 5px; }
.btn-danger-soft { color: var(--bad); }
.btn-danger-soft:hover { background: var(--bad-soft); border-color: var(--bad); color: var(--bad); }

/* inline alerts */
.alert-line { padding: 11px 15px; border-radius: 11px; font-size: .88rem; font-weight: 500; margin: 4px 0 18px; border: 1px solid transparent; }
.alert-ok { background: var(--ok-soft); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.alert-bad { background: var(--bad-soft); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 30%, transparent); }

/* users page reset row */
.reset-row td { background: var(--surface-2); }
.reset-inline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.reset-label { font-size: .85rem; color: var(--ink-soft); }

/* ============================================================
   Account menu (top bar)
   ============================================================ */
.usermenu { position: relative; }
.usermenu-toggle { position: absolute; opacity: 0; pointer-events: none; }
.usermenu-btn { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 8px 0 6px; border-radius: 12px;
    border: 1px solid var(--line); background: var(--surface); cursor: pointer; color: var(--ink-soft); transition: all .14s ease; }
.usermenu-btn:hover { border-color: var(--accent); }
.usermenu-avatar { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: .76rem; font-weight: 700;
    color: #fff; background: linear-gradient(150deg, var(--accent), var(--accent-bright)); }
.usermenu-caret { transition: transform .18s ease; }
.usermenu-toggle:checked ~ .usermenu-btn .usermenu-caret { transform: rotate(180deg); }
.usermenu-scrim { display: none; position: fixed; inset: 0; z-index: 40; }
.usermenu-toggle:checked ~ .usermenu-scrim { display: block; }
.usermenu-pop { position: absolute; right: 0; top: calc(100% + 8px); width: 232px; background: var(--surface); border: 1px solid var(--line);
    border-radius: 14px; box-shadow: var(--shadow-lg); padding: 7px; z-index: 50; opacity: 0; transform: translateY(-6px) scale(.98);
    pointer-events: none; transition: opacity .15s ease, transform .15s ease; }
.usermenu-toggle:checked ~ .usermenu-pop { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.usermenu-head { padding: 9px 11px 11px; border-bottom: 1px solid var(--line-soft); margin-bottom: 6px; }
.usermenu-name { font-weight: 700; font-size: .88rem; color: var(--ink); word-break: break-all; }
.usermenu-role { font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
.usermenu-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 11px; border-radius: 9px;
    font-size: .87rem; font-weight: 600; color: var(--ink-soft); background: none; border: none; cursor: pointer; text-decoration: none; }
.usermenu-item:hover { background: var(--accent-soft); color: var(--accent); }
.usermenu-item svg { color: var(--muted); flex: 0 0 auto; }
.usermenu-item:hover svg { color: var(--accent); }
.usermenu-form { margin: 6px 0 0; border-top: 1px solid var(--line-soft); padding-top: 6px; }
.usermenu-signout:hover { background: var(--bad-soft); color: var(--bad); }
.usermenu-signout:hover svg { color: var(--bad); }

@media (max-width: 560px) {
    .usermenu-pop { width: 210px; }
    .auth-card { padding: 28px 22px; }
}

.blazor-error-boundary { background: var(--bad); padding: 1rem; color: #fff; border-radius: 10px; }
.blazor-error-boundary::after { content: "An error has occurred." }
#blazor-error-ui { background: var(--navy); color: #fff; bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,.2); display: none; left: 0; padding: .8rem 1.2rem; position: fixed; width: 100%; z-index: 1000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 1rem; top: .6rem; }