/* ============================================================================
   VMaint Admin — iOR Style design system (ported from iOR_Style_DesignSystem.md)
   "editorial paper × soft instrument panel" · default dark, light opt-out
   ============================================================================ */
:root {
    --cal-primary:#1B4F72; --cal-primary-dark:#154360; --cal-primary-darker:#0E2F4D;
    --cal-primary-light:#21618C; --cal-primary-lighter:#2471A3;
    --cal-primary-wash:rgba(27,79,114,.08); --cal-primary-wash-2:rgba(27,79,114,.12);
    --cal-secondary:#148F77; --cal-secondary-light:#1ABC9C; --cal-secondary-wash:rgba(20,143,119,.08);

    --cal-success:#1E824C; --cal-success-wash:rgba(30,130,76,.08);
    --cal-warning:#D35400; --cal-warning-wash:rgba(211,84,0,.08);
    --cal-error:#B03A2E;   --cal-error-wash:rgba(176,58,46,.08);

    /* Categorical chart palette - distinct hues (light theme: deepened for white bg) */
    --ch-1:#5b63d6; --ch-2:#0d97b0; --ch-3:#e08407; --ch-4:#d23f78; --ch-5:#1f9d6b;
    --ch-glow:rgba(91,99,214,.30);
    --cal-info:#2471A3;    --cal-info-wash:rgba(36,113,163,.08);

    --cal-canvas:#EFEADF; --cal-background:#F4EFE4; --cal-surface:#FBF7EE;
    --cal-surface-bright:#FFFCF5; --cal-surface-soft:#F7F2E6; --cal-surface-hover:#EDE5D2;
    --cal-surface-sunk:#E7E0CC; --cal-stripe-bg:rgba(27,79,114,.022);

    --cal-ink:#1C2833; --cal-ink-soft:#3E5060; --cal-ink-muted:#5D6D7E;
    --cal-ink-faint:#AEB6BF; --cal-ink-hint:#CAD1D7; --cal-ink-inverse:#FFFFFF;

    --cal-border-subtle:rgba(74,54,28,.09); --cal-border-medium:rgba(74,54,28,.14);
    --cal-border-strong:rgba(74,54,28,.24); --cal-border:var(--cal-border-medium);
    --cal-border-soft:var(--cal-border-subtle); --cal-hairline:rgba(255,253,246,.9);

    --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
    --s-7:32px; --s-8:40px; --s-9:56px; --s-10:72px; --s-11:96px;
    --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-full:999px;

    --font-body:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,sans-serif;
    --font-display:'Playfair Display',Georgia,serif;
    --font-mono:'JetBrains Mono','Cascadia Code',Menlo,monospace;

    --shadow-xs:0 1px 1px rgba(74,54,28,.06),0 1px 2px rgba(27,79,114,.04);
    --shadow-sm:0 1px 2px rgba(74,54,28,.07),0 2px 6px rgba(27,79,114,.05),0 1px 1px rgba(74,54,28,.04);
    --shadow-md:0 2px 3px rgba(74,54,28,.08),0 10px 28px rgba(27,79,114,.08),0 4px 10px rgba(27,79,114,.05);
    --shadow-lg:0 3px 6px rgba(74,54,28,.10),0 24px 56px rgba(27,79,114,.14),0 10px 20px rgba(27,79,114,.07);
    --shadow-focus:0 0 0 3px rgba(20,143,119,.22);
    --shadow-inset-top:inset 0 1px 0 0 var(--cal-hairline);

    --ease:cubic-bezier(.4,0,.2,1); --dur-fast:150ms; --dur-med:200ms; --dur-slow:350ms;
    --appbar:linear-gradient(135deg,#1B4F72 0%,#154360 40%,#1A5276 100%);
    --authority:linear-gradient(90deg,#0E2F4D 0%,#1B4F72 40%,#148F77 100%);
}
[data-theme="dark"] {
    --cal-primary:#5DADE2; --cal-primary-dark:#2E86C1; --cal-primary-darker:#1F618C;
    --cal-primary-light:#85C1E9; --cal-primary-lighter:#AED6F1;
    --cal-primary-wash:rgba(93,173,226,.10); --cal-primary-wash-2:rgba(93,173,226,.16);
    --cal-secondary:#48C9B0; --cal-secondary-light:#76D7C4; --cal-secondary-wash:rgba(72,201,176,.10);
    --cal-success:#58D68D; --cal-success-wash:rgba(88,214,141,.10);

    /* Categorical chart palette - brighter neon for dark bg */
    --ch-1:#8b93ff; --ch-2:#5CE1E6; --ch-3:#ffb74d; --ch-4:#ff6fa5; --ch-5:#4be0a0;
    --ch-glow:rgba(139,147,255,.40);
    --cal-warning:#F5B041; --cal-warning-wash:rgba(245,176,65,.10);
    --cal-error:#EC7063;   --cal-error-wash:rgba(236,112,99,.10);
    --cal-info:#85C1E9;
    --cal-canvas:#080E1A; --cal-background:#0B1120; --cal-surface:#131B2E;
    --cal-surface-bright:#17203A; --cal-surface-soft:#0E1628; --cal-surface-hover:#1A2340;
    --cal-surface-sunk:#07101F; --cal-stripe-bg:rgba(93,173,226,.03);
    --cal-ink:#E8ECF1; --cal-ink-soft:#B4BEC9; --cal-ink-muted:#7B8CA3;
    --cal-ink-faint:#4A5568; --cal-ink-hint:#2D3748; --cal-ink-inverse:#0B1120;
    --cal-border-subtle:rgba(93,173,226,.08); --cal-border-medium:rgba(93,173,226,.14);
    --cal-border-strong:rgba(93,173,226,.28); --cal-hairline:transparent;
    --shadow-inset-top:none;
    --appbar:linear-gradient(135deg,#13243B 0%,#0E1B2E 50%,#13283f 100%);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
    font-family:var(--font-body); font-size:15px; line-height:1.55; letter-spacing:-.005em;
    color:var(--cal-ink); background:var(--cal-canvas); -webkit-font-smoothing:antialiased;
}
a{color:var(--cal-primary);text-decoration:none}
.material-symbols-outlined{font-size:20px;line-height:1;vertical-align:middle;
    font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24}

/* authority line + disclaimer ------------------------------------------------ */
.cal-authority-line{position:fixed;top:0;left:0;right:0;height:3px;background:var(--authority);z-index:9999}
.cal-disclaimer{position:fixed;top:3px;left:0;right:0;height:26px;background:var(--appbar);z-index:9998;
    display:flex;align-items:center;justify-content:center;color:#fff;font-size:10.5px;font-weight:700;
    letter-spacing:.14em;text-transform:uppercase;opacity:.95}

/* shell ---------------------------------------------------------------------- */
.admin-shell{display:flex;min-height:100vh;padding-top:29px}
.cal-sidebar{width:248px;flex:none;background:var(--cal-surface-soft);border-right:1px solid var(--cal-border-subtle);
    padding:18px 14px;display:flex;flex-direction:column;gap:3px;position:sticky;top:29px;height:calc(100vh - 29px)}
.cal-brand{flex:none;display:flex;align-items:center;gap:10px;padding:6px 8px 18px}
.cal-nav-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:3px;
    margin:0 -6px;padding:0 6px;scrollbar-width:thin;scrollbar-color:var(--cal-border-medium) transparent}
.cal-nav-scroll::-webkit-scrollbar{width:7px}
.cal-nav-scroll::-webkit-scrollbar-thumb{background:var(--cal-border-medium);border-radius:99px}
.cal-nav-scroll::-webkit-scrollbar-track{background:transparent}
.cal-group{display:flex;flex-direction:column}
.cal-grouphdr{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;background:transparent;
    border:0;cursor:pointer;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--cal-ink-faint);
    font-weight:700;padding:13px 10px 6px;text-align:left;border-radius:var(--r-sm)}
.cal-grouphdr:hover{color:var(--cal-ink-muted)}
.cal-chev{font-size:16px;margin-left:auto;transition:transform .15s var(--ease)}
.cal-grouphdr .cal-grp-badge{margin-left:6px}
.cal-group.collapsed .cal-chev{transform:rotate(-90deg)}
.cal-grouplinks{display:flex;flex-direction:column;gap:3px;overflow:hidden}
.cal-group.collapsed .cal-grouplinks{display:none}
.cal-grp-badge{display:inline-grid;place-items:center;min-width:17px;height:17px;padding:0 5px;border-radius:999px;
    background:var(--ch-4,#ff6fa5);color:#fff;font-size:10px;font-weight:800;line-height:1;vertical-align:middle}
.cal-navlink .cal-grp-badge{margin-left:auto}
.cal-brand .seal{width:30px;height:30px;border-radius:8px;background:var(--appbar);display:grid;place-items:center;
    color:#fff;font-weight:800;font-size:15px;box-shadow:var(--shadow-sm)}
.cal-brand .name{font-size:19px;font-weight:700;letter-spacing:-.02em;color:var(--cal-ink)}
.cal-brand .name .plus{color:var(--cal-secondary)}
.cal-brand .sub{display:block;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--cal-ink-muted);font-weight:700}
.cal-nav-section{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--cal-ink-faint);
    font-weight:700;padding:14px 10px 6px}
.cal-navlink{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--r-sm);
    color:var(--cal-ink-soft);font-size:14px;font-weight:500;border-left:2px solid transparent;transition:all var(--dur-fast) var(--ease)}
.cal-navlink .material-symbols-outlined{font-size:20px;color:var(--cal-ink-muted)}
.cal-navlink:hover{background:var(--cal-surface);color:var(--cal-ink)}
.cal-navlink.active{background:var(--cal-primary-wash);color:var(--cal-primary);border-left-color:var(--cal-primary);font-weight:600}
.cal-navlink.active .material-symbols-outlined{color:var(--cal-primary)}
.cal-nav-footer{flex:none;margin-top:0;padding:12px 10px 4px;border-top:1px solid var(--cal-border-subtle);
    font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--cal-ink-faint);font-weight:700;
    display:flex;align-items:center;justify-content:space-between}
.cal-theme-btn{background:transparent;border:1px solid var(--cal-border);border-radius:var(--r-sm);
    color:var(--cal-ink-muted);cursor:pointer;width:32px;height:32px;display:grid;place-items:center}
.cal-theme-btn:hover{color:var(--cal-primary);border-color:var(--cal-primary)}

/* "back to landing" link on standalone pages (login / download) */
.cal-home-link{position:fixed;top:16px;left:20px;z-index:20;display:inline-flex;align-items:center;gap:7px;
    font-weight:700;font-size:15px;letter-spacing:-.01em;color:var(--cal-ink-soft);text-decoration:none}
.cal-home-link:hover{color:var(--cal-ink)}
.cal-home-link .material-symbols-outlined{font-size:18px}
.cal-home-link .plus{color:var(--cal-secondary)}
/* sidebar brand is a link back to the landing page */
a.cal-brand{text-decoration:none;cursor:pointer}

/* signed-in account row (sidebar) */
.cal-nav-account{flex:none;margin-top:10px;display:flex;align-items:center;gap:8px;padding:10px;border-radius:var(--r-sm);
    background:var(--cal-surface-sunk);border:1px solid var(--cal-border-subtle)}
.cal-nav-account .material-symbols-outlined{font-size:22px;color:var(--cal-ink-muted)}
.cal-nav-account .who{flex:1;min-width:0;font-size:12.5px;font-weight:600;color:var(--cal-ink-soft);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-nav-account .logout-form{margin:0}
.cal-logout-btn{background:transparent;border:1px solid var(--cal-border);border-radius:var(--r-sm);
    color:var(--cal-ink-muted);cursor:pointer;width:30px;height:30px;display:grid;place-items:center}
.cal-logout-btn:hover{color:var(--cal-error);border-color:var(--cal-error)}
.cal-nav-account + .cal-nav-footer{margin-top:12px}

/* login screen */
.login-wrap{min-height:100vh;display:grid;place-items:center;background:var(--cal-canvas);padding:24px}
.login-card{width:100%;max-width:380px;background:var(--cal-surface);border:1px solid var(--cal-border-subtle);
    border-radius:var(--r-lg,16px);padding:32px 30px;box-shadow:var(--shadow-md,0 12px 40px rgba(0,0,0,.25))}
.login-brand{text-align:center;margin-bottom:26px}
.login-brand .name{font-size:26px;font-weight:800;letter-spacing:-.02em;color:var(--cal-ink)}
.login-brand .name .plus{color:var(--cal-secondary)}
.login-brand .sub{display:block;margin-top:4px;font-size:10px;letter-spacing:.24em;text-transform:uppercase;
    color:var(--cal-ink-muted);font-weight:700}
.login-label{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
    color:var(--cal-ink-muted);margin:14px 0 6px}
.login-card .cal-input{width:100%}
.login-error{margin-top:14px;padding:10px 12px;border-radius:var(--r-sm);font-size:13px;
    color:var(--cal-error);background:var(--cal-error-wash);border:1px solid var(--cal-error)}
.login-submit{width:100%;justify-content:center;margin-top:20px;padding:11px}
.login-foot{margin-top:22px;text-align:center;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
    color:var(--cal-ink-faint);font-weight:700}

.cal-content{flex:1;min-width:0;padding:var(--s-7) var(--s-8);max-width:1280px}

/* page header ---------------------------------------------------------------- */
.cal-page-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;
    letter-spacing:.10em;text-transform:uppercase;color:var(--cal-ink-muted)}
.cal-page-eyebrow::before{content:"";width:20px;height:2px;background:var(--cal-secondary);border-radius:2px}
.cal-page-title{font-size:clamp(24px,3vw,30px);font-weight:700;line-height:1.15;letter-spacing:-.025em;
    color:var(--cal-ink);margin:6px 0 4px}
[data-theme="light"] .cal-page-title,[data-theme="light"] .cal-display-md,[data-theme="light"] .cal-display-sm,
:root:not([data-theme="dark"]) .cal-page-title,:root:not([data-theme="dark"]) .cal-display-md,
:root:not([data-theme="dark"]) .cal-display-sm{text-shadow:0 1px 0 rgba(255,253,246,.7)}
.cal-page-subtitle{font-size:14.5px;color:var(--cal-ink-soft);line-height:1.55;margin:0 0 var(--s-6)}
.cal-eyebrow{font-size:11px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;color:var(--cal-ink-muted)}
.cal-display-md{font-size:20px;font-weight:600;letter-spacing:-.015em;color:var(--cal-ink)}
.cal-display-sm{font-size:16px;font-weight:600;letter-spacing:-.008em;color:var(--cal-ink)}
.cal-text-mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.cal-muted{color:var(--cal-ink-muted)}

/* card ----------------------------------------------------------------------- */
.cal-card{border-radius:var(--r-md);border:1px solid var(--cal-border-subtle);position:relative;
    background:
        radial-gradient(ellipse 260px 170px at 0% 0%,rgba(20,143,119,.08) 0%,transparent 70%),
        radial-gradient(ellipse 240px 160px at 100% 100%,rgba(217,155,46,.055) 0%,transparent 72%),
        linear-gradient(180deg,var(--cal-surface-bright) 0%,var(--cal-surface) 60%);
    box-shadow:var(--shadow-inset-top),var(--shadow-sm);
    transition:box-shadow var(--dur-med) var(--ease),border-color var(--dur-med) var(--ease),
        transform var(--dur-med) var(--ease),background var(--dur-med) var(--ease);
    padding:var(--s-6);margin-bottom:var(--s-5)}
.cal-card:hover{box-shadow:var(--shadow-inset-top),var(--shadow-md);border-color:var(--cal-border-medium);transform:translateY(-2px);
    background:
        radial-gradient(ellipse 280px 180px at 0% 0%,rgba(20,143,119,.13) 0%,transparent 70%),
        radial-gradient(ellipse 260px 170px at 100% 100%,rgba(217,155,46,.085) 0%,transparent 72%),
        linear-gradient(180deg,var(--cal-surface-bright) 0%,var(--cal-surface) 60%)}
.cal-card-pad-sm{padding:var(--s-4)}

/* metrics -------------------------------------------------------------------- */
.cal-metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--s-4);margin-bottom:var(--s-6)}
.cal-metric{padding:var(--s-6);border:1px solid var(--cal-border-subtle);border-radius:var(--r-md);position:relative;overflow:hidden;
    background:radial-gradient(ellipse 220px 170px at 100% 0%,rgba(27,79,114,.09) 0%,transparent 70%),
        linear-gradient(180deg,var(--cal-surface-bright) 0%,var(--cal-surface) 70%);
    box-shadow:var(--shadow-inset-top),var(--shadow-xs)}
.cal-metric::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
    background:linear-gradient(90deg,var(--cal-secondary),var(--cal-primary) 50%,var(--cal-warning));
    transform:scaleX(0);transform-origin:left;transition:transform var(--dur-slow) var(--ease)}
.cal-metric:hover::after{transform:scaleX(1)}
.cal-metric-label{font-size:11px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;color:var(--cal-ink-muted);margin-bottom:8px}
.cal-metric-value{font-size:36px;font-weight:700;letter-spacing:-.02em;line-height:1;
    background:linear-gradient(180deg,var(--cal-primary-lighter),var(--cal-primary) 60%,var(--cal-primary-dark));
    -webkit-background-clip:text;background-clip:text;color:transparent}
[data-theme="dark"] .cal-metric-value{background:none;color:var(--cal-primary)}
.cal-metric-sub{font-size:12.5px;color:var(--cal-ink-muted);margin-top:6px}

/* data table + pager --------------------------------------------------------- */
.cal-data-table{width:100%;border-collapse:collapse;font-size:13.5px}
.cal-data-table th{text-align:left;font-family:var(--font-body);font-size:11px;letter-spacing:.08em;
    text-transform:uppercase;color:var(--cal-ink-muted);font-weight:700;padding:var(--s-3) var(--s-4);
    border-bottom:2px solid var(--cal-border-medium);background:var(--cal-surface-soft)}
.cal-data-table td{padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--cal-border-subtle);color:var(--cal-ink);vertical-align:middle}
.cal-data-table tbody tr{transition:background var(--dur-fast) var(--ease)}
.cal-data-table tbody tr:nth-child(even) td{background:var(--cal-stripe-bg)}
.cal-data-table tbody tr:hover td{background:var(--cal-surface-hover)}
.cal-td-id{font-family:var(--font-mono);font-weight:600;color:var(--cal-primary)}
.cal-td-sub{font-size:11px;color:var(--cal-ink-muted)}
/* nowrap so "179,587 mi" never breaks across two lines in a narrow numeric column */
.cal-td-num{text-align:right;font-family:var(--font-mono);font-weight:600;white-space:nowrap}
.cal-td-action{text-align:right;white-space:nowrap}

.cal-data-table-compact th{padding:8px var(--s-3);font-size:10px}
.cal-data-table-compact td{padding:7px var(--s-3);font-size:13px}
.cal-data-table-compact .cal-iconbtn{width:28px;height:28px}
.cal-detail-row td{background:var(--cal-surface-soft) !important;border-bottom:1px solid var(--cal-border-medium)}
.cal-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-input-sm{padding:6px 10px;font-size:13px}

.cal-pager{display:flex;align-items:center;gap:var(--s-3);padding:10px var(--s-4);
    border-top:1px solid var(--cal-border-soft);background:var(--cal-surface-soft);border-radius:0 0 var(--r-md) var(--r-md)}
.cal-pager-size{display:flex;align-items:center;gap:6px}
.cal-pager-ind{font-family:var(--font-mono);font-size:12px;min-width:84px;text-align:center;color:var(--cal-ink-muted)}

/* chips ---------------------------------------------------------------------- */
.cal-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:var(--r-full);
    border:1px solid var(--cal-border);background:transparent;color:var(--cal-ink-soft);
    font-size:11.5px;font-weight:600;letter-spacing:.02em;line-height:1;cursor:pointer;transition:all var(--dur-fast) var(--ease)}
.cal-chip:hover{border-color:var(--cal-border-strong)}
.cal-chip-active{background:var(--cal-primary);color:var(--cal-ink-inverse);border-color:var(--cal-primary)}
.cal-badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--r-full);
    font-size:11px;font-weight:700;letter-spacing:.04em;white-space:nowrap}
.cal-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.cal-badge-primary{color:var(--cal-primary);background:var(--cal-primary-wash)}
.cal-badge-success{color:var(--cal-success);background:var(--cal-success-wash)}
.cal-badge-info{color:var(--cal-secondary);background:var(--cal-secondary-wash)}
.cal-badge-neutral{color:var(--cal-ink-muted);background:var(--cal-surface-sunk)}

/* buttons -------------------------------------------------------------------- */
.cal-btn{display:inline-flex;align-items:center;gap:7px;border:0;border-radius:var(--r-sm);cursor:pointer;
    font-family:var(--font-body);font-size:14px;font-weight:600;letter-spacing:.005em;padding:10px 18px;
    background:var(--cal-primary);color:var(--cal-ink-inverse);transition:all var(--dur-fast) var(--ease)}
.cal-btn:hover{background:var(--cal-primary-dark);box-shadow:var(--shadow-sm)}
.cal-btn .material-symbols-outlined{font-size:18px}
.cal-btn-outline{background:transparent;border:1px solid var(--cal-primary);color:var(--cal-primary)}
.cal-btn-outline:hover{background:var(--cal-primary-wash)}
.cal-btn-ghost{background:transparent;color:var(--cal-ink-soft)}
.cal-btn-ghost:hover{background:var(--cal-surface-hover)}
.cal-btn-danger{background:transparent;border:1px solid var(--cal-error);color:var(--cal-error)}
.cal-btn-danger:hover{background:var(--cal-error-wash)}
.cal-btn-sm{padding:6px 12px;font-size:12.5px}
.cal-btn:disabled{opacity:.5;cursor:not-allowed}
.cal-iconbtn{width:32px;height:32px;padding:0;border-radius:var(--r-sm);border:1px solid var(--cal-border);
    background:transparent;color:var(--cal-ink-muted);cursor:pointer;display:inline-grid;place-items:center}
.cal-iconbtn:hover:not(:disabled){color:var(--cal-primary);border-color:var(--cal-primary)}
.cal-iconbtn:disabled{opacity:.4;cursor:not-allowed}

/* row action menu (native <details>, no JS) ---------------------------------- */
.cal-menu{position:relative;display:inline-block}
.cal-menu>summary{list-style:none;cursor:pointer}
.cal-menu>summary::-webkit-details-marker{display:none}
.cal-menu>summary::marker{content:""}
.cal-menu-panel{position:absolute;right:0;top:calc(100% + 4px);z-index:30;min-width:184px;
    background:var(--cal-surface-bright);border:1px solid var(--cal-border);border-radius:var(--r-md);
    box-shadow:var(--shadow-md,0 10px 28px rgba(0,0,0,.18));padding:6px;display:flex;flex-direction:column;gap:2px}
.cal-menu-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--r-sm);
    font-size:13px;font-weight:600;color:var(--cal-ink-soft);text-decoration:none;white-space:nowrap;text-align:left}
/* Menu items are a mix of <a> and <button>. Strip the button UA styles (light background,
   border, centered button font) so an action button is indistinguishable from a link. */
button.cal-menu-item{width:100%;background:none;border:0;cursor:pointer;
    font-family:var(--font-body);font-size:13px;font-weight:600}
.cal-menu-item:hover{background:var(--cal-surface-hover);color:var(--cal-primary)}
.cal-menu-item .material-symbols-outlined{font-size:18px}
/* keep table corners rounded so the wrapping card no longer needs overflow:hidden */
.cal-data-table thead th:first-child{border-top-left-radius:var(--r-md)}
.cal-data-table thead th:last-child{border-top-right-radius:var(--r-md)}

/* inputs --------------------------------------------------------------------- */
.cal-input,.cal-select{font-family:var(--font-body);font-size:14px;color:var(--cal-ink);
    background:var(--cal-surface-bright);border:1px solid var(--cal-border);border-radius:var(--r-sm);
    padding:9px 12px;transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.cal-input:focus,.cal-select:focus{outline:none;border-color:var(--cal-primary);box-shadow:var(--shadow-focus)}
.cal-input::placeholder{color:var(--cal-ink-hint)}
/* Chrome paints autofilled fields with its own near-white background, which looks broken next
   to a non-autofilled field in this dark theme (e.g. email filled / password empty on sign-in).
   The inset shadow is the only way to override that background. */
.cal-input:-webkit-autofill,
.cal-input:-webkit-autofill:hover,
.cal-input:-webkit-autofill:focus,
.cal-select:-webkit-autofill{
    -webkit-text-fill-color:var(--cal-ink);
    -webkit-box-shadow:0 0 0 1000px var(--cal-surface-bright) inset;
    box-shadow:0 0 0 1000px var(--cal-surface-bright) inset;
    caret-color:var(--cal-ink)}
.cal-field-label{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    color:var(--cal-ink-muted);margin-bottom:5px}
.cal-toolbar{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;margin-bottom:var(--s-4)}
.cal-row{display:flex;gap:var(--s-3);align-items:center;flex-wrap:wrap}
.cal-spacer{flex:1}

/* empty ---------------------------------------------------------------------- */
.cal-empty{text-align:center;padding:var(--s-9) var(--s-6);color:var(--cal-ink-muted)}
.cal-empty-icon{width:52px;height:52px;color:var(--cal-ink-faint);margin-bottom:var(--s-3)}
.cal-empty-title{font-size:15px;font-weight:600;color:var(--cal-ink-soft);margin-bottom:4px}
.cal-empty-text{font-size:13px;color:var(--cal-ink-muted)}

/* banner --------------------------------------------------------------------- */
.cal-banner{display:flex;align-items:flex-start;gap:10px;padding:var(--s-3) var(--s-4);border-radius:var(--r-sm);
    border:1px solid var(--cal-border-subtle);font-size:13.5px;margin-bottom:var(--s-5)}
.cal-banner-info{background:var(--cal-primary-wash);color:var(--cal-ink-soft);border-color:var(--cal-border-medium)}
.cal-banner-warning{background:var(--cal-warning-wash);color:var(--cal-ink-soft)}

/* lightbox -------------------------------------------------------------------- */
.cal-lightbox{position:fixed;inset:0;z-index:10001;display:flex;align-items:center;justify-content:center;
    background:rgba(8,14,26,.88);backdrop-filter:blur(5px);animation:cal-lb-fade var(--dur-med) var(--ease)}
@keyframes cal-lb-fade{from{opacity:0}to{opacity:1}}
.cal-lightbox-stage{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:92vw}
.cal-lightbox-img{max-width:90vw;max-height:80vh;border-radius:var(--r-md);box-shadow:var(--shadow-lg);background:#fff}
.cal-lightbox-cap{color:#e8ecf1;font-size:12.5px;font-family:var(--font-mono);letter-spacing:.02em}
.cal-lb-btn{position:fixed;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:var(--r-full);
    background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);color:#fff;cursor:pointer;display:grid;place-items:center;transition:background var(--dur-fast) var(--ease)}
.cal-lb-btn:hover{background:rgba(255,255,255,.24)}
.cal-lb-prev{left:24px} .cal-lb-next{right:24px}
.cal-lb-close{position:fixed;top:20px;right:24px;width:42px;height:42px;border-radius:var(--r-full);
    background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);color:#fff;cursor:pointer;display:grid;place-items:center}
.cal-lb-close:hover{background:rgba(255,255,255,.24)}
.cal-thumb{cursor:pointer;transition:transform var(--dur-fast) var(--ease)}
.cal-thumb:hover{transform:scale(1.04)}

*:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
#blazor-error-ui{position:fixed;bottom:0;left:0;right:0;background:var(--cal-error);color:#fff;
    padding:10px 16px;display:none;z-index:10000}
#blazor-error-ui.show{display:block}

/* ===== light-mode atmosphere: paper grain + ambient bloom (spec §1, §8) ===== */
/* desaturated fractalNoise tooth over the whole viewport — reads as paper, not noise */
body::before{content:"";position:fixed;inset:0;z-index:9000;pointer-events:none;background-size:160px 160px;
    background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.85'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode:multiply;opacity:.05}
[data-theme="dark"] body::before{mix-blend-mode:screen;opacity:.022}
/* distant-window bloom upper-right — the light source that justifies card corner glows */
body::after{content:"";position:fixed;top:-12%;right:-6%;width:560px;height:560px;z-index:-1;pointer-events:none;
    border-radius:50%;filter:blur(46px);animation:cal-flare-breathe 16s var(--ease) infinite;
    background:radial-gradient(circle,rgba(255,248,232,.85) 0%,rgba(255,242,216,.34) 38%,transparent 70%)}
[data-theme="dark"] body::after{background:radial-gradient(circle,rgba(93,173,226,.12) 0%,rgba(72,201,176,.05) 40%,transparent 72%)}
@keyframes cal-flare-breathe{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:.85;transform:scale(1.07)}}
@media (prefers-reduced-motion:reduce){body::after{animation:none}}

/* ============================================================ MAP PINS */
.vm-pin span{display:block;width:16px;height:16px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
    border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.leaflet-popup-content{font-family:var(--font-body,'Plus Jakarta Sans',sans-serif);font-size:13px}
.leaflet-popup-content a{color:var(--cal-primary);font-weight:600}

/* ============================================================ MOBILE */
/* Mobile top bar + off-canvas drawer (shown only on small screens). */
.cal-mobilebar{display:none;position:fixed;top:3px;left:0;right:0;height:50px;z-index:1000;
    align-items:center;gap:10px;padding:0 12px;background:var(--cal-surface);border-bottom:1px solid var(--cal-border-subtle)}
.cal-burger{width:42px;height:42px;display:grid;place-items:center;border:0;border-radius:11px;background:transparent;
    color:var(--cal-ink);cursor:pointer}
.cal-burger:hover{background:var(--cal-surface-hover)}
.cal-burger .material-symbols-outlined{font-size:26px}
.cal-mobilebar-brand{font-size:18px;font-weight:800;letter-spacing:-.02em;color:var(--cal-ink);text-decoration:none}
.cal-mobilebar-brand .plus{color:var(--cal-secondary)}
.cal-mobilebar-brand .sub{margin-left:7px;font-size:9px;letter-spacing:.2em;text-transform:uppercase;
    color:var(--cal-ink-muted);font-weight:700}
.cal-nav-backdrop{display:none}

@media (max-width: 900px) {
    .cal-disclaimer{display:none}
    .cal-mobilebar{display:flex}
    .admin-shell{padding-top:53px}

    /* sidebar becomes an off-canvas drawer */
    .cal-sidebar{position:fixed;top:0;left:0;height:100vh;width:280px;max-width:84vw;z-index:1200;
        padding-top:18px;overflow-y:auto;transform:translateX(-100%);transition:transform .25s var(--ease,ease);
        box-shadow:0 0 50px rgba(0,0,0,.45)}
    html.vm-nav-open .cal-sidebar{transform:none}

    .cal-nav-backdrop{display:block;position:fixed;inset:0;z-index:1100;background:rgba(0,0,0,.5);
        opacity:0;pointer-events:none;transition:opacity .25s var(--ease,ease)}
    html.vm-nav-open .cal-nav-backdrop{opacity:1;pointer-events:auto}

    /* content + tables fit small screens */
    .cal-content{padding:var(--s-5) var(--s-4);max-width:100%}
    .cal-card{overflow-x:auto !important}
    .cal-data-table{min-width:560px}
    .cal-pager{flex-wrap:wrap}
    .cal-toolbar .cal-input{max-width:100%}
}

/* ---- Toasts ------------------------------------------------------------- */
.cal-toast-host{position:fixed;right:18px;bottom:18px;z-index:1200;display:flex;flex-direction:column;
    gap:10px;max-width:min(380px,calc(100vw - 36px));pointer-events:none}
.cal-toast{pointer-events:auto;display:flex;align-items:flex-start;gap:10px;padding:12px 12px 12px 14px;
    background:var(--cal-surface-bright);color:var(--cal-ink);border:1px solid var(--cal-border);
    border-left:3px solid var(--cal-ink-muted);border-radius:var(--r-md);box-shadow:var(--shadow-lg);
    font-size:13.5px;line-height:1.45;animation:cal-toast-in var(--dur-med) var(--ease)}
.cal-toast-ic{font-size:20px;flex:none;color:var(--cal-ink-muted);margin-top:1px}
.cal-toast-text{flex:1;min-width:0;font-weight:600;word-break:break-word}
.cal-toast-x{flex:none;background:transparent;border:0;cursor:pointer;color:var(--cal-ink-faint);
    display:grid;place-items:center;padding:0;width:22px;height:22px;border-radius:var(--r-xs)}
.cal-toast-x:hover{color:var(--cal-ink);background:var(--cal-surface-hover)}
.cal-toast-x .material-symbols-outlined{font-size:17px}
.cal-toast-success{border-left-color:var(--cal-success)}
.cal-toast-success .cal-toast-ic{color:var(--cal-success)}
.cal-toast-error{border-left-color:var(--cal-warning)}
.cal-toast-error .cal-toast-ic{color:var(--cal-warning)}
.cal-toast-info{border-left-color:var(--cal-primary,#1B4F72)}
.cal-toast-info .cal-toast-ic{color:var(--cal-primary,#1B4F72)}
@keyframes cal-toast-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:520px){.cal-toast-host{left:14px;right:14px;bottom:14px;max-width:none}}

/* ---- Rewards dashboard ------------------------------------------------- */
.rw-tokenhero{display:flex;align-items:center;gap:18px;margin:6px 0 16px;padding:16px 18px;border-radius:var(--r-lg);
    background:linear-gradient(120deg,var(--cal-surface-bright),var(--cal-surface));border:1px solid var(--cal-border);box-shadow:var(--shadow-sm)}
.rw-coin{width:84px;height:84px;flex:none;border-radius:50%;display:grid;place-items:center;
    background:radial-gradient(circle at 50% 32%,#1b2440,#0b0f1c);
    box-shadow:0 0 26px rgba(92,225,230,.35),inset 0 0 0 2px rgba(92,225,230,.45)}
.rw-coin img{width:58px;height:58px}
.rw-tokenhero .sym{font-size:22px;font-weight:800;letter-spacing:.5px;color:var(--cal-ink)}
.rw-tokenhero .lbl{font-size:12.5px;color:var(--cal-ink-muted);margin-top:2px;max-width:520px}

/* full-width vehicle photo hero on the edit page */
.veh-hero{max-width:720px;height:230px;margin:0 0 18px;border-radius:var(--r-lg);border:1px solid var(--cal-border);
    background-size:cover;background-position:center;box-shadow:var(--shadow-md)}

.rw-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.rw-stat{position:relative;overflow:hidden;padding:18px 18px 16px;border-radius:var(--r-lg);
    background:linear-gradient(160deg,var(--cal-surface-bright),var(--cal-surface));
    border:1px solid var(--cal-border);box-shadow:var(--shadow-md)}
.rw-stat::before{content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(140px 90px at 92% -20%,rgba(92,225,230,.20),transparent 70%)}
.rw-stat .v{font-size:30px;font-weight:800;letter-spacing:-.02em;color:var(--cal-ink);line-height:1}
.rw-stat .k{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--cal-ink-muted);font-weight:700;margin-top:8px}
.rw-stat .ic{position:absolute;top:14px;right:14px;font-size:20px;opacity:.6;color:var(--ch-1)}

.rw-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:16px;margin-top:16px}
@media(max-width:820px){.rw-grid{grid-template-columns:1fr}}

.rw-bars{display:flex;flex-direction:column;gap:13px}
.rw-bar .lab{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--cal-ink-soft);margin-bottom:5px}
.rw-bar .lab span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rw-bar .lab b{color:var(--cal-ink);font-weight:800;flex:none}
.rw-track{height:12px;border-radius:999px;background:var(--cal-surface-sunk);overflow:hidden}
.rw-fill{height:100%;border-radius:999px;min-width:6px;
    background:linear-gradient(90deg,var(--ch-2),var(--ch-1));
    box-shadow:0 0 14px var(--ch-glow);transition:width .7s var(--ease)}

.rw-donut-wrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.rw-donut{width:140px;height:140px;border-radius:50%;display:grid;place-items:center;flex:none;
    box-shadow:0 0 26px rgba(92,225,230,.25)}
.rw-donut-hole{width:96px;height:96px;border-radius:50%;background:var(--cal-surface);display:grid;
    place-items:center;text-align:center;box-shadow:inset 0 0 0 1px var(--cal-border)}
.rw-donut-hole span{font-size:24px;font-weight:800;color:var(--cal-ink);line-height:1}
.rw-donut-hole small{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--cal-ink-muted);margin-top:3px}
.rw-legend{font-size:13px;color:var(--cal-ink-soft)}
.rw-legend .dot{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:7px;vertical-align:middle}
.rw-legend b{color:var(--cal-ink)}

.rw-spark{display:flex;align-items:flex-end;gap:5px;height:120px}
.rw-spark .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;height:100%}
.rw-spark .bar{width:100%;border-radius:6px 6px 0 0;min-height:3px;
    background:linear-gradient(180deg,var(--ch-3),var(--ch-4));transition:height .7s var(--ease)}
.rw-spark .d{font-size:9px;color:var(--cal-ink-faint);white-space:nowrap}

.rw-modal-backdrop{position:fixed;inset:0;z-index:1150;background:rgba(0,0,0,.55);display:grid;place-items:center;padding:20px}
.rw-modal{width:100%;max-width:560px;max-height:82vh;overflow:auto;padding:20px;border-radius:var(--r-lg);
    background:var(--cal-surface);border:1px solid var(--cal-border);box-shadow:var(--shadow-lg)}

/* ---- Hero Cards storefront (Magic-style) ------------------------------ */
.hc-hero{display:flex;flex-direction:column;gap:8px;margin:4px 0 6px}
.hc-pill{align-self:flex-start;font-size:10px;letter-spacing:1.6px;font-weight:800;text-transform:uppercase;
    padding:4px 11px;border-radius:999px;color:#0B0B12;background:linear-gradient(90deg,#5CE1E6,#828ff0)}
.hc-title{font-size:36px;font-weight:800;letter-spacing:-.02em;line-height:1;margin:2px 0;
    background:linear-gradient(90deg,#828ff0,#5CE1E6 55%,#f5b041);-webkit-background-clip:text;background-clip:text;color:transparent}

/* alien-space backdrop (only on the Hero Cards page) */
.hc-space{position:fixed;inset:0;z-index:0;pointer-events:none;
    background:
      radial-gradient(900px 620px at 82% -8%, rgba(130,143,240,.20), transparent 60%),
      radial-gradient(760px 540px at 8% 18%, rgba(92,225,230,.14), transparent 60%),
      radial-gradient(680px 760px at 55% 112%, rgba(200,107,255,.16), transparent 62%),
      radial-gradient(1px 1px at 18% 28%, #fff, transparent), radial-gradient(1px 1px at 72% 62%, #cdd6ff, transparent),
      radial-gradient(1px 1px at 41% 81%, #fff, transparent), radial-gradient(1px 1px at 86% 22%, #9fb0c4, transparent),
      radial-gradient(2px 2px at 57% 13%, #fff, transparent), radial-gradient(1px 1px at 31% 54%, #cdd6ff, transparent),
      radial-gradient(1px 1px at 64% 88%, #fff, transparent), radial-gradient(1px 1px at 9% 70%, #aab4e6, transparent)}

.hc-hero{position:relative;z-index:1}
.hc-wallet{position:relative;z-index:1;display:inline-flex;align-items:center;gap:12px;margin:14px 0 0;text-decoration:none;
    background:linear-gradient(135deg,color-mix(in srgb,var(--ch-1) 16%,var(--cal-surface)),var(--cal-surface));
    border:1px solid var(--cal-border);border-radius:14px;padding:9px 14px;box-shadow:var(--shadow-sm);transition:box-shadow .15s var(--ease)}
.hc-wallet:hover{box-shadow:var(--shadow-md)}
.hc-wallet-coin{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
    background:radial-gradient(circle at 38% 32%,#222a3a,#0a0e16);box-shadow:0 0 16px var(--ch-glow)}
.hc-wallet-coin img{width:24px;height:24px}
.hc-wallet-txt{display:flex;flex-direction:column;line-height:1.12}
.hc-wallet-k{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--cal-ink-faint);font-weight:700}
.hc-wallet-v{font-size:19px;font-weight:800;color:var(--cal-ink)}
.hc-wallet-v b{font-size:11px;font-weight:700;color:var(--cal-ink-muted)}
.hc-wallet-go{color:var(--cal-ink-faint);font-size:20px}
.hc-set{position:relative;z-index:1;font-size:13px;font-weight:800;letter-spacing:2px;text-transform:uppercase;
    color:var(--cal-ink-soft);margin:22px 0 4px;padding-bottom:6px;border-bottom:1px solid var(--cal-border)}
.hc-set-tag{font-weight:600;letter-spacing:0;text-transform:none;font-size:12px;color:var(--cal-ink-muted);margin-left:8px}
.hc-tabs{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 4px}
.hc-tab{cursor:pointer;text-align:left;border:1px solid var(--cal-border);border-radius:12px;padding:9px 14px;
    background:var(--cal-surface);transition:all var(--dur-fast) var(--ease);min-width:130px}
.hc-tab:hover{border-color:var(--cal-border-strong)}
.hc-tab .t{display:block;font-size:14px;font-weight:800;color:var(--cal-ink)}
.hc-tab .s{display:block;font-size:11px;color:var(--cal-ink-muted);margin-top:1px}
.hc-tab.active{background:linear-gradient(120deg,rgba(92,225,230,.16),rgba(130,143,240,.16));
    border-color:#5CE1E6;box-shadow:0 0 16px rgba(92,225,230,.25)}
.mtg-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px;margin-top:18px}
.mtg-cell{display:flex;flex-direction:column;gap:10px}

.mtg{position:relative;aspect-ratio:2.5/3.5;border-radius:16px;padding:9px;overflow:hidden;isolation:isolate;
    display:flex;flex-direction:column;gap:7px;box-shadow:0 14px 34px rgba(0,0,0,.42);will-change:transform;
    transition:transform .14s var(--ease),box-shadow .25s var(--ease)}
.mtg:hover{transform:translateY(-6px)}
/* holographic cursor tilt (vars set by vmCardTiltInit) */
.mtg.tilting{transform:perspective(950px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px) scale(1.02);
    box-shadow:0 24px 54px rgba(0,0,0,.5),0 0 30px rgba(92,225,230,.35)}
.mtg-glare{position:absolute;inset:0;z-index:6;pointer-events:none;border-radius:16px;opacity:0;transition:opacity .2s;
    mix-blend-mode:screen;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.40),rgba(92,225,230,.12) 32%,transparent 62%)}
.mtg.tilting .mtg-glare{opacity:1}

/* rarity frame (metallic) shows through the 9px padding + 7px panel gaps */
.mtg.hc-common{background:linear-gradient(160deg,#9aa6b5,#5b6573)}
.mtg.hc-rare{background:linear-gradient(160deg,#7fe9ec,#2f6df0)}
.mtg.hc-epic{background:linear-gradient(160deg,#d49bff,#7b3ff2);box-shadow:0 14px 40px rgba(146,84,222,.34)}
.mtg.hc-legendary{background:linear-gradient(160deg,#ffe9a8,#f5b041 55%,#b8801f);box-shadow:0 16px 44px rgba(245,176,65,.40)}

/* legendary: rotating conic foil rim */
.mtg.hc-legendary::after{content:"";position:absolute;inset:-45%;z-index:0;
    background:conic-gradient(from 0deg,transparent,rgba(255,236,170,.9),transparent 38%);animation:hc-rotate 6s linear infinite}
@keyframes hc-rotate{to{transform:rotate(360deg)}}

/* holographic sheen sweep on hover */
.mtg::before{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;
    background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.5) 50%,transparent 68%);transform:translateX(-120%)}
.mtg:hover::before{opacity:.7;animation:hc-shine 1.15s var(--ease)}
@keyframes hc-shine{to{transform:translateX(120%)}}

/* panels sit above the frame + foil */
.mtg-name,.mtg-art,.mtg-type,.mtg-text{position:relative;z-index:1}
.mtg-name{display:flex;align-items:center;justify-content:space-between;gap:6px;
    background:rgba(8,12,20,.82);border-radius:9px;padding:5px 6px 5px 10px}
.mtg-name .nm{font-weight:800;font-size:13.5px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mtg-cost{flex:none;font-weight:800;font-size:11.5px;color:#0B0B12;border-radius:999px;padding:2px 8px;
    background:linear-gradient(90deg,#5CE1E6,#828ff0)}
.mtg-art{flex:1 1 auto;min-height:0;border-radius:9px;overflow:hidden;display:grid;place-items:center;
    background:radial-gradient(120px 90px at 50% 30%,rgba(255,255,255,.10),transparent 70%),#0a0e16}
/* square art fills the window edge-to-edge, subject centered (no crop of portraits anymore) */
.mtg-art-img{width:100%;height:100%;object-fit:cover}
.mtg-art .ph{font-size:58px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.5))}
.mtg-art .ph-note{position:absolute;bottom:6px;font-size:9px;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.35)}
/* HUD corner brackets on the art window */
.mtg-art::before{content:"";position:absolute;inset:5px;z-index:2;pointer-events:none;opacity:.85;
    filter:drop-shadow(0 0 3px rgba(92,225,230,.6));
    background:
      linear-gradient(#5CE1E6,#5CE1E6) 0 0/13px 2px no-repeat, linear-gradient(#5CE1E6,#5CE1E6) 0 0/2px 13px no-repeat,
      linear-gradient(#5CE1E6,#5CE1E6) 100% 0/13px 2px no-repeat, linear-gradient(#5CE1E6,#5CE1E6) 100% 0/2px 13px no-repeat,
      linear-gradient(#5CE1E6,#5CE1E6) 0 100%/13px 2px no-repeat, linear-gradient(#5CE1E6,#5CE1E6) 0 100%/2px 13px no-repeat,
      linear-gradient(#5CE1E6,#5CE1E6) 100% 100%/13px 2px no-repeat, linear-gradient(#5CE1E6,#5CE1E6) 100% 100%/2px 13px no-repeat}
/* faint scanlines over the art */
.mtg-art::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:9px;mix-blend-mode:screen;
    background:repeating-linear-gradient(transparent 0 3px,rgba(92,225,230,.05) 3px 4px)}
.mtg-type{display:flex;align-items:center;justify-content:space-between;gap:6px;
    background:rgba(8,12,20,.82);border-radius:8px;padding:3px 9px;font-size:9.5px;letter-spacing:.3px;
    text-transform:uppercase;font-weight:700;color:#cdd6ff}
.mtg-rar{flex:none;font-weight:800}
.mtg-text{background:rgba(8,12,20,.9);border-radius:9px;padding:9px 11px 10px;min-height:60px;color:#eaeef6}
.mtg-ability{font-size:12px;line-height:1.36;font-weight:600;color:#f2f5fb}
.mtg-flavor{margin-top:6px;font-style:italic;font-size:11px;line-height:1.36;color:#b6c0d6;padding-right:44px}
.mtg-pt{position:absolute;right:8px;bottom:7px;font-weight:800;font-size:13px;color:#0B0B12;border-radius:8px;
    padding:2px 9px;background:linear-gradient(90deg,#ffe082,#f5b041);box-shadow:0 2px 8px rgba(0,0,0,.4)}

.hc-buy{border:0;cursor:pointer;border-radius:11px;padding:9px 15px;font-weight:800;font-size:13px;color:#0B0B12;
    background:linear-gradient(90deg,#5CE1E6,#828ff0);transition:filter .15s var(--ease)}
.hc-buy:hover{filter:brightness(1.08)}
.hc-buy:disabled{opacity:.6;cursor:default;filter:none}

/* Purchase modal */
.hc-modal-backdrop{position:fixed;inset:0;z-index:1200;background:rgba(0,0,0,.72);
    display:grid;place-items:center;padding:20px;backdrop-filter:blur(3px)}
.hc-modal{position:relative;width:100%;max-width:380px;background:var(--cal-surface);
    border:1px solid var(--cal-border);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
    padding:26px 24px 24px;text-align:center;animation:hc-pop .22s var(--ease)}
@keyframes hc-pop{from{opacity:0;transform:scale(.92) translateY(8px)}to{opacity:1;transform:none}}
.hc-modal-x{position:absolute;top:10px;right:10px;width:32px;height:32px;border:0;background:transparent;
    cursor:pointer;color:var(--cal-ink-faint);display:grid;place-items:center;border-radius:8px}
.hc-modal-x:hover{background:var(--cal-surface-hover);color:var(--cal-ink)}
.hc-modal-art{width:190px;height:190px;margin:0 auto 16px;border-radius:16px;overflow:hidden;
    display:grid;place-items:center;background:#0a0e16}
.hc-modal-art img{width:100%;height:100%;object-fit:cover}
.hc-modal-emoji{font-size:78px;line-height:1}
.hc-modal-name{font-size:21px;font-weight:800;color:var(--cal-ink);line-height:1.15}
.hc-modal-rar{font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;margin-top:3px}
.hc-modal-price{font-size:30px;font-weight:800;color:var(--cal-ink);margin:18px 0}
.hc-modal-price .hc-modal-sym{font-size:13px;color:var(--cal-ink-muted);font-weight:700;margin-left:2px}
.hc-modal-err{color:var(--cal-warning,#e0a042);font-size:13px;font-weight:600;margin:0 0 14px}
.hc-modal-actions{display:flex;gap:10px;justify-content:center}
.hc-modal-actions .hc-buy{padding:10px 18px}
.hc-modal-done{font-size:24px;font-weight:800;color:var(--cal-success,#3fbf7f);margin:18px 0 4px}
.hc-modal-sub{font-size:13px;color:var(--cal-ink-muted);margin-bottom:18px;line-height:1.4}

/* ===== Alien blockchain "minting" theatrics ===== */
.hc-modal.bc-active{max-width:472px;overflow:hidden}
.bc-stage{position:relative;color:#cfe9ee;text-align:center;padding-top:2px}
.bc-stage::before{content:"";position:absolute;inset:-26px -24px;z-index:0;pointer-events:none;
    background:
        radial-gradient(120% 80% at 50% 0%,rgba(92,225,230,.12),transparent 60%),
        repeating-linear-gradient(0deg,rgba(92,225,230,.05) 0 1px,transparent 1px 26px),
        repeating-linear-gradient(90deg,rgba(130,143,240,.05) 0 1px,transparent 1px 26px),
        #060912}
.bc-scan{position:absolute;left:-24px;right:-24px;top:-26px;height:48px;z-index:1;pointer-events:none;
    background:linear-gradient(180deg,transparent,rgba(92,225,230,.22),transparent);animation:bc-scan 2.4s linear infinite}
@keyframes bc-scan{0%{transform:translateY(0)}100%{transform:translateY(460px)}}
.bc-stage>*{position:relative;z-index:2}

.bc-core{width:122px;height:122px;margin:6px auto 12px;position:relative}
.bc-ring{position:absolute;inset:0;border-radius:50%;border:2px solid transparent}
.bc-ring1{border-top-color:#5CE1E6;border-right-color:#5CE1E6;animation:bc-spin 1.5s linear infinite;box-shadow:0 0 18px rgba(92,225,230,.45)}
.bc-ring2{inset:16px;border-bottom-color:#828ff0;border-left-color:#828ff0;animation:bc-spin 2.1s linear infinite reverse}
.bc-ring3{inset:32px;border-top-color:#44e0a0;border-left-color:#44e0a0;animation:bc-spin 1.05s linear infinite}
@keyframes bc-spin{to{transform:rotate(360deg)}}
.bc-hex{position:absolute;inset:42px;background:linear-gradient(160deg,#5CE1E6,#828ff0);
    clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);
    animation:bc-pulse 1.3s ease-in-out infinite;filter:drop-shadow(0 0 10px rgba(92,225,230,.7))}
@keyframes bc-pulse{0%,100%{transform:scale(.8);opacity:.7}50%{transform:scale(1);opacity:1}}
.bc-glyph{position:absolute;inset:0;display:grid;place-items:center;font-size:25px;color:#04121a;font-weight:900;z-index:3}
.bc-orbit{position:absolute;inset:0;animation:bc-spin 3s linear infinite}
.bc-orbit i{position:absolute;top:-3px;left:50%;width:7px;height:7px;border-radius:50%;margin-left:-3px;background:#5CE1E6;box-shadow:0 0 10px #5CE1E6}
.bc-orbit i:nth-child(2){top:50%;left:auto;right:-3px;margin:-3px 0 0;background:#828ff0;box-shadow:0 0 10px #828ff0}
.bc-orbit i:nth-child(3){top:auto;bottom:-3px;left:50%;background:#44e0a0;box-shadow:0 0 10px #44e0a0}

.bc-eq{display:flex;gap:4px;justify-content:center;align-items:flex-end;height:24px;margin:0 0 10px}
.bc-eq span{width:5px;height:100%;border-radius:2px;transform-origin:bottom;
    background:linear-gradient(180deg,#5CE1E6,#828ff0);animation:bc-eq .9s ease-in-out infinite}
@keyframes bc-eq{0%,100%{transform:scaleY(.22)}50%{transform:scaleY(1)}}

.bc-title{font-size:13px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:#5CE1E6;
    text-shadow:0 0 12px rgba(92,225,230,.6);margin-bottom:12px}
.bc-dots::after{content:"";animation:bc-dots 1.2s steps(1) infinite}
@keyframes bc-dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}

.bc-telem{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:12px}
.bc-telem div{background:rgba(92,225,230,.06);border:1px solid rgba(92,225,230,.18);border-radius:8px;padding:5px 3px}
.bc-telem span{display:block;font-size:8px;letter-spacing:1px;text-transform:uppercase;color:#6f93a0}
.bc-telem b{font-family:ui-monospace,Consolas,monospace;font-size:11.5px;color:#bfeef2}

.bc-log{font-family:ui-monospace,Consolas,monospace;font-size:11px;text-align:left;
    background:rgba(0,0,0,.35);border:1px solid rgba(92,225,230,.14);border-radius:10px;
    padding:8px 10px;max-height:158px;overflow:hidden;margin-bottom:8px}
.bc-line{display:flex;align-items:center;gap:7px;line-height:1.65;white-space:nowrap}
.bc-line .bc-tick{width:10px;flex:none;text-align:center}
.bc-line .bc-txt{flex:1;overflow:hidden;text-overflow:ellipsis}
.bc-line.run{color:#bfeef2;animation:bc-blink 1s steps(2) infinite}
.bc-line.run .bc-tick{color:#5CE1E6}
.bc-line.done{color:#5e7d86}
.bc-line.done .bc-tick{color:#44e0a0}
.bc-meta{flex:none;color:#4a6b74;font-size:10px}
@keyframes bc-blink{50%{opacity:.55}}

.bc-hexdump{font-family:ui-monospace,Consolas,monospace;font-size:9px;line-height:1.5;color:#305862;
    word-break:break-all;text-align:left;max-height:28px;overflow:hidden;margin-bottom:10px}

.bc-hashrow{display:flex;align-items:center;gap:8px;font-size:10px;min-width:0}
.bc-hashrow>span{color:#6f93a0;text-transform:uppercase;letter-spacing:1px;flex:none}
.bc-hash{flex:1;min-width:0;font-family:ui-monospace,Consolas,monospace;font-size:11px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    background:linear-gradient(90deg,#5CE1E6,#828ff0,#44e0a0,#5CE1E6);background-size:200% auto;
    -webkit-background-clip:text;background-clip:text;color:transparent;animation:bc-sheen 3s linear infinite}
@keyframes bc-sheen{to{background-position:200% center}}
.bc-hashrow-done{justify-content:center;margin:10px 0 14px}

/* ===== My Hero Cards collection (renders full .mtg cards via HeroCardView) ===== */
.mc-owned-badge{position:absolute;top:12px;right:12px;z-index:7;font-size:13px;font-weight:800;color:#fff;
    padding:4px 11px;border-radius:999px;background:rgba(8,11,18,.85);
    border:1px solid rgba(255,255,255,.4);box-shadow:0 2px 10px rgba(0,0,0,.5)}
.mc-acq{text-align:center;font-size:11px;color:var(--cal-ink-muted);margin-top:9px;letter-spacing:.02em}

.mc-empty{margin-top:22px;text-align:center;padding:44px 24px}
.mc-empty-ic{margin-bottom:4px}
.mc-empty-ic .material-symbols-outlined{font-size:42px;color:var(--ch-1)}
.mc-empty-title{font-size:18px;font-weight:800;color:var(--cal-ink)}
a.hc-buy{display:inline-block;text-decoration:none}
.mc-clickable{cursor:pointer;outline:none}

/* ===== Card details modal (info overload + trade/sell) ===== */
.cd-backdrop{position:fixed;inset:0;z-index:1300;background:rgba(0,0,0,.72);display:grid;place-items:center;
    padding:18px;backdrop-filter:blur(3px)}
.cd-modal{position:relative;width:100%;max-width:940px;max-height:92vh;overflow:hidden;
    background:var(--cal-surface);border:1px solid var(--cal-border);border-radius:var(--r-lg);
    box-shadow:var(--shadow-lg);animation:hc-pop .22s var(--ease)}
.cd-body{display:flex;gap:22px;padding:24px;max-height:92vh;overflow:hidden}
.cd-left{flex:none;width:280px;display:flex;flex-direction:column;gap:14px}
.cd-right{flex:1;min-width:0;overflow-y:auto;padding-right:6px}
@media(max-width:760px){
    .cd-body{flex-direction:column;overflow-y:auto}
    .cd-left{width:100%;max-width:280px;margin:0 auto}
    .cd-right{overflow:visible}
}
.cd-actions{display:flex;gap:10px}
.cd-actions .hc-buy{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.cd-actions .material-symbols-outlined{font-size:18px}
.cd-btn-sell{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;cursor:pointer;
    border-radius:11px;padding:9px 15px;font-weight:800;font-size:13px;color:#0B0B12;
    background:linear-gradient(90deg,#ffb74d,#ff6fa5);transition:filter .15s var(--ease)}
.cd-btn-sell:hover{filter:brightness(1.07)}
.cd-btn-sell .material-symbols-outlined{font-size:18px}
.cd-mini{display:flex;gap:8px}
.cd-mini-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:5px;cursor:pointer;
    font-size:11px;font-weight:700;color:var(--cal-ink-muted);background:var(--cal-surface-sunk);
    border:1px solid var(--cal-border);border-radius:9px;padding:7px 8px}
.cd-mini-btn:hover{color:var(--cal-ink);border-color:var(--cal-border-medium)}
.cd-mini-btn .material-symbols-outlined{font-size:15px}
.cd-explorer{font-size:11px;color:var(--cal-ink-faint);text-align:center}
.cd-mock{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#ffb74d;
    background:rgba(255,183,77,.14);padding:1px 7px;border-radius:999px;margin-left:6px}

.cd-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.cd-title{font-size:23px;font-weight:800;color:var(--cal-ink);line-height:1.1}
.cd-sub{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin-top:4px}
.cd-serial{flex:none;font-family:ui-monospace,Consolas,monospace;font-size:12px;font-weight:700;color:var(--cal-ink-muted);
    background:var(--cal-surface-sunk);border:1px solid var(--cal-border);border-radius:8px;padding:5px 9px}

.cd-attrs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.cd-attr{background:var(--cal-surface-sunk);border:1px solid var(--cal-border);border-radius:10px;padding:9px 10px}
.cd-attr span{display:block;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--cal-ink-faint);font-weight:700}
.cd-attr b{font-size:16px;font-weight:800;color:var(--cal-ink)}

.cd-callout{background:linear-gradient(160deg,var(--cal-primary-wash),transparent);border:1px solid var(--cal-border);
    border-radius:12px;padding:12px 14px;margin-bottom:18px}
.cd-callout-k{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--cal-ink-faint);font-weight:800}
.cd-callout-v{font-size:14px;font-weight:700;color:var(--cal-ink);margin:3px 0 6px;line-height:1.35}
.cd-callout-f{font-size:12.5px;font-style:italic;color:var(--cal-ink-muted)}

.cd-h{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--cal-ink-soft);
    margin:0 0 9px;padding-top:4px;display:flex;align-items:center}
.cd-kv{display:grid;grid-template-columns:1fr 1fr;gap:7px 18px;margin-bottom:18px}
.cd-kv>div{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:12.5px;min-width:0;
    border-bottom:1px dashed var(--cal-border);padding-bottom:5px}
.cd-kv span{color:var(--cal-ink-muted);flex:none}
.cd-kv b{color:var(--cal-ink);font-weight:700;text-align:right}
.cd-kv i{color:var(--cal-ink-faint);font-style:normal;font-size:11px;margin-left:6px}
.cd-kv code{font-family:ui-monospace,Consolas,monospace;font-size:11.5px;color:var(--ch-2);cursor:pointer;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cd-kv code:hover{text-decoration:underline}
.cd-ok{color:var(--cal-success)!important}

.cd-timeline{position:relative;padding-left:4px}
.cd-ev{display:flex;gap:11px;padding-bottom:14px;position:relative}
.cd-ev:not(:last-child)::before{content:"";position:absolute;left:13px;top:26px;bottom:0;width:2px;background:var(--cal-border)}
.cd-ev-dot{flex:none;width:27px;height:27px;border-radius:50%;display:grid;place-items:center;font-size:14px;
    background:var(--cal-surface-sunk);border:1px solid var(--cal-border)}
.cd-ev-t{font-size:13px;font-weight:800;color:var(--cal-ink)}
.cd-ev-d{font-size:11.5px;color:var(--cal-ink-muted)}

/* transfer / sell sub-panel */
.cd-section .cd-h{font-size:16px;letter-spacing:0;text-transform:none;color:var(--cal-ink);margin-bottom:14px}
.cd-pay{display:flex;gap:12px;align-items:flex-end;margin-top:12px}
.cd-cur{display:flex;gap:6px}
.cd-cur-opt{cursor:pointer;border:1px solid var(--cal-border);background:var(--cal-surface);border-radius:9px;
    padding:9px 11px;font-weight:800;font-size:12px;color:var(--cal-ink-muted)}
.cd-cur-opt.on{border-color:var(--ch-2);color:var(--cal-ink);box-shadow:0 0 0 2px color-mix(in srgb,var(--ch-2) 30%,transparent)}
.cd-cur-gas.on{border-color:#ffb74d;box-shadow:0 0 0 2px rgba(255,183,77,.3)}
.cd-note{font-size:12px;color:var(--cal-ink-muted);background:var(--cal-surface-sunk);border:1px solid var(--cal-border);
    border-radius:10px;padding:10px 12px;margin-top:12px;line-height:1.45}
.cd-note b{color:var(--cal-ink)}
.cd-section-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}

.cd-stage{padding-top:6px}
.cd-done{text-align:center;padding:20px 8px}
.cd-done-ic{font-size:46px}
.cd-done-title{font-size:24px;font-weight:800;color:var(--cal-success);margin:6px 0 6px}
.cd-done-sub{font-size:13px;color:var(--cal-ink-muted);margin:0 auto 16px;max-width:320px;line-height:1.45}

/* ===== Marketplace ===== */
.mc-listed{position:absolute;top:44px;left:12px;z-index:7;font-size:11px;font-weight:800;color:#06101a;
    padding:3px 9px;border-radius:999px;background:linear-gradient(90deg,#ffb74d,#ff6fa5);box-shadow:0 2px 10px rgba(0,0,0,.45)}
.mk-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:18px 0 4px}
.mk-chips{display:flex;gap:8px;flex-wrap:wrap}
.mk-chip{cursor:pointer;border:1px solid var(--cal-border);background:var(--cal-surface);border-radius:999px;
    padding:6px 14px;font-size:12px;font-weight:700;color:var(--cal-ink-muted)}
.mk-chip:hover{color:var(--cal-ink)}
.mk-chip.on{background:var(--cal-primary);color:var(--cal-ink-inverse);border-color:var(--cal-primary)}
.mk-sort{width:auto;min-width:170px}
.mk-price{position:absolute;top:12px;right:12px;z-index:7;font-size:13px;font-weight:800;color:#06101a;
    padding:4px 11px;border-radius:999px;background:linear-gradient(90deg,#5CE1E6,#828ff0);box-shadow:0 2px 10px rgba(0,0,0,.5)}
.mk-mine{position:absolute;top:12px;left:12px;z-index:7;font-size:10px;font-weight:800;letter-spacing:.04em;
    text-transform:uppercase;color:#fff;padding:3px 8px;border-radius:999px;background:rgba(10,14,22,.82);border:1px solid rgba(255,255,255,.35)}
.mk-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px}
.mk-seller{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:var(--cal-ink-muted);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.mk-seller .material-symbols-outlined{font-size:15px;flex:none}
.mk-buy{flex:none;border:0;cursor:pointer;border-radius:10px;padding:8px 13px;font-weight:800;font-size:12.5px;color:#0B0B12;
    background:linear-gradient(90deg,#5CE1E6,#828ff0);transition:filter .15s var(--ease)}
.mk-buy:hover:not(:disabled){filter:brightness(1.08)}
.mk-buy:disabled{opacity:.5;cursor:default;filter:none;background:var(--cal-surface-sunk);color:var(--cal-ink-muted)}
.mk-cancel{flex:none;border:1px solid var(--cal-border);cursor:pointer;border-radius:10px;padding:8px 13px;
    font-weight:700;font-size:12.5px;color:var(--cal-ink-muted);background:transparent}
.mk-cancel:hover{color:var(--cal-error);border-color:var(--cal-error)}
.mk-gas{text-align:right;font-size:10.5px;color:var(--cal-ink-faint);margin-top:4px}

/* ===== My Wallet ===== */
.wl-hero{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:18px;padding:22px 24px;
    border-radius:var(--r-lg);border:1px solid var(--cal-border);box-shadow:var(--shadow-md);
    background:linear-gradient(135deg,color-mix(in srgb,var(--ch-1) 14%,var(--cal-surface)),var(--cal-surface))}
.wl-coin{flex:none;width:74px;height:74px;border-radius:50%;display:grid;place-items:center;
    background:radial-gradient(circle at 38% 32%,#222a3a,#0a0e16);box-shadow:0 0 26px var(--ch-glow),inset 0 0 0 2px rgba(255,255,255,.08)}
.wl-coin img{width:48px;height:48px}
.wl-bal{flex:1;min-width:200px}
.wl-amt{font-size:38px;font-weight:800;letter-spacing:-.02em;color:var(--cal-ink);line-height:1}
.wl-amt span{font-size:15px;font-weight:700;color:var(--cal-ink-muted);margin-left:4px}
.wl-addr{display:inline-flex;align-items:center;gap:6px;margin-top:8px;cursor:pointer;color:var(--cal-ink-muted);
    background:var(--cal-surface-sunk);border:1px solid var(--cal-border);border-radius:999px;padding:5px 12px}
.wl-addr:hover{color:var(--cal-ink)}
.wl-addr code{font-family:ui-monospace,Consolas,monospace;font-size:12px;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wl-addr .material-symbols-outlined{font-size:16px}
.wl-addr .wl-copy{font-size:14px;opacity:.7}
.wl-withdraw{flex:none;display:inline-flex;align-items:center;gap:6px}
.wl-withdraw .material-symbols-outlined{font-size:18px}
.wl-tx{font-family:ui-monospace,Consolas,monospace;font-size:11px;color:var(--ch-2)}
.wl-tabs{display:flex;gap:6px;margin:16px 0 4px;border-bottom:1px solid var(--cal-border);flex-wrap:wrap}
.wl-tab{display:inline-flex;align-items:center;gap:7px;cursor:pointer;border:0;background:transparent;
    color:var(--cal-ink-muted);font-size:14px;font-weight:700;padding:10px 14px;border-bottom:2px solid transparent;margin-bottom:-1px}
.wl-tab:hover{color:var(--cal-ink)}
.wl-tab.on{color:var(--cal-primary);border-bottom-color:var(--cal-primary)}
.wl-tab .material-symbols-outlined{font-size:18px}
.wl-tab-badge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;
    background:var(--ch-4,#ff6fa5);color:#fff;font-size:11px;font-weight:800;line-height:1}

/* ===== Trade proposal (in card details) ===== */
.tr-give{display:flex;align-items:stretch;gap:10px;margin-top:14px}
.tr-side{flex:1;min-width:0;background:var(--cal-surface-sunk);border:1px solid var(--cal-border);border-radius:12px;padding:11px}
.tr-side-h{font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:var(--cal-ink-faint);margin-bottom:7px}
.tr-card{font-size:13px;font-weight:700;color:var(--cal-ink);background:var(--cal-surface);border:1px solid var(--cal-border);
    border-radius:8px;padding:8px 10px;margin-bottom:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tr-card.tr-muted{color:var(--cal-ink-faint);font-weight:500}
.tr-swap{display:grid;place-items:center;color:var(--ch-2)}
.tr-swap .material-symbols-outlined{font-size:24px}

/* ===== Broker (Trades tab) ===== */
.tr-list{display:flex;flex-direction:column;gap:12px;margin-top:10px}
.tr-offer{background:var(--cal-surface);border:1px solid var(--cal-border);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow-sm)}
.tr-offer-head{font-size:12px;color:var(--cal-ink-muted);margin-bottom:10px}
.tr-offer-head b{color:var(--cal-ink)}
.tr-offer-body{display:flex;align-items:center;gap:14px}
.tr-leg{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.tr-leg-h{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:800}
.tr-get{color:var(--cal-success)}
.tr-give-h{color:var(--ch-4,#ff6fa5)}
.tr-tile{width:140px;border-radius:11px;overflow:hidden;background:#0b0f18;text-align:left;
    border:1px solid color-mix(in srgb,var(--rar) 50%,#1b2230);
    box-shadow:0 0 16px color-mix(in srgb,var(--rar) 22%,transparent),0 6px 16px rgba(0,0,0,.35)}
.tr-tile img{width:100%;height:100px;object-fit:cover;display:block}
.tr-tile-ph{width:100%;height:100px;display:grid;place-items:center;font-size:42px;background:#0a0e16}
.tr-tile-info{padding:7px 9px 9px;border-top:2px solid var(--rar)}
.tr-tile-name{font-size:12px;font-weight:800;color:#e9eff7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tr-tile-meta{font-size:9px;color:#8499ab;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase;letter-spacing:.04em}
.tr-rar{font-weight:800}
.tr-tile-stats{font-family:ui-monospace,Consolas,monospace;font-size:10px;color:#a9c4d4;margin-top:4px;letter-spacing:.02em}
.tr-tile-token{font-family:ui-monospace,Consolas,monospace;font-size:8.5px;color:#5CE1E6;margin-top:4px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.85}
.tr-tok-k{display:inline-block;background:rgba(92,225,230,.14);color:#5CE1E6;font-weight:700;
    padding:0 4px;border-radius:4px;font-size:8px;letter-spacing:.06em}
.tr-onlywrench{width:140px;height:152px;display:grid;place-items:center;align-content:center;gap:6px;border-radius:11px;
    background:#0b0f18;border:1px dashed var(--cal-border);color:var(--cal-ink-muted);font-size:34px}
.tr-gift{font-size:10px;font-weight:700}
.tr-wrench{display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:800;padding:3px 9px;border-radius:999px}
.tr-coin{width:14px;height:14px}
.tr-coin-lg{width:42px;height:42px}
.tr-plus{color:var(--cal-success);background:var(--cal-success-wash)}
.tr-minus{color:var(--ch-4,#ff6fa5);background:color-mix(in srgb,var(--ch-4,#ff6fa5) 14%,transparent)}
.tr-offer-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:12px}
.tr-pending{margin-right:auto;font-size:12px;color:var(--cal-ink-muted)}

/* ===== Backup & Restore ===== */
.bk-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:860px){.bk-grid{grid-template-columns:1fr}}
.bk-danger{border-color:color-mix(in srgb,var(--cal-error) 40%,var(--cal-border))}
.bk-warn{display:flex;gap:10px;align-items:flex-start}
.bk-warn .material-symbols-outlined{flex:none;color:var(--cal-warning);font-size:20px}
.bk-counts{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;max-height:230px;overflow-y:auto}
.bk-count{display:flex;justify-content:space-between;gap:8px;font-size:12px;padding:5px 9px;border-radius:7px;
    background:var(--cal-surface-sunk);border:1px solid var(--cal-border)}
.bk-count span{color:var(--cal-ink-muted);font-family:ui-monospace,Consolas,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bk-count b{color:var(--cal-ink);flex:none}
.bk-restore-btn{background:var(--cal-error);display:inline-flex;align-items:center;gap:6px}
.bk-restore-btn:hover:not(:disabled){background:var(--cal-error);filter:brightness(1.08)}
.bk-restore-btn .material-symbols-outlined{font-size:18px}
.bk-result{margin-top:14px;font-size:13px;font-weight:600;padding:10px 12px;border-radius:9px}
.bk-result.ok{color:var(--cal-success);background:var(--cal-success-wash)}
.bk-result.err{color:var(--cal-error);background:var(--cal-error-wash)}

/* Mythic rarity (the apex card): radiant white-gold frame */
.mtg.hc-mythic{background:linear-gradient(160deg,#ffffff,#ffe9a8 45%,#cdd6ff);
    box-shadow:0 16px 46px rgba(255,255,255,.28),0 0 32px rgba(255,233,170,.5)}
.mtg.hc-mythic::after{content:"";position:absolute;inset:-45%;z-index:0;
    background:conic-gradient(from 0deg,transparent,rgba(255,255,255,.95),transparent 36%);animation:hc-rotate 7s linear infinite}
.mtg-pt-inf{font-size:17px!important;background:linear-gradient(90deg,#fff,#ffe9a8)!important}
.hc-priceless{text-align:center;font-weight:800;font-size:12.5px;letter-spacing:.5px;text-transform:uppercase;
    padding:9px 12px;border-radius:11px;color:#ffe9a8;background:rgba(8,12,20,.55);border:1px solid rgba(255,233,170,.4)}

/* Service gauge (web mirror of the app's ring — see Components/ServiceGauge.razor) */
.vm-gauge-glow{filter:blur(2.5px)}
.vm-gauge-glow.vm-gauge-pulse{animation:vm-gauge-pulse 1.6s ease-in-out infinite}
@keyframes vm-gauge-pulse{0%,100%{opacity:.32}50%{opacity:.62}}

/* Service-health interval cards (vehicles/{id}/intervals) — each card is a "gauge pod":
   the ring up front, the row's ServiceHealth color carried on --vmi (top edge, due text,
   hover ring). Worst-first sort puts the hottest pods top-left. */
.vmi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.vmi-card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;
    padding:22px 16px 14px;border-radius:var(--r-lg);border:1px solid var(--cal-border);
    background:var(--cal-surface);box-shadow:var(--shadow-inset-top);overflow:hidden;
    transition:transform var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),
        box-shadow var(--dur-fast) var(--ease)}
.vmi-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--vmi)}
.vmi-card:hover{transform:translateY(-2px);border-color:var(--vmi);
    box-shadow:0 12px 26px -16px var(--vmi),var(--shadow-inset-top)}
/* overdue pods glow from within (the gauge's pulse animation already breathes) */
.vmi-hot{background:linear-gradient(180deg,color-mix(in srgb,var(--vmi) 7%,transparent),transparent 55%),var(--cal-surface)}
.vmi-name{font-weight:700;font-size:15px;letter-spacing:-.01em;margin-top:4px}
.vmi-meta{font-size:12px;line-height:1.45;color:var(--cal-ink-muted)}
.vmi-due{font-size:13px;font-weight:650;color:var(--vmi)}
.vmi-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:auto;padding-top:10px}
.vmi-form{width:100%;display:flex;flex-direction:column;gap:8px;margin-top:auto;padding-top:12px;
    border-top:1px solid var(--cal-border);text-align:left}
.vmi-form-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.vmi-form-actions{display:flex;gap:6px}
@media (prefers-reduced-motion:reduce){.vmi-card,.vmi-card:hover{transform:none;transition:none}}