/* ============================================================
   CleverAI console — "Ledger Paper" design system (ui.css)
   Light-first editorial console: paper canvas, ink text,
   cobalt accent, Playfair Display headlines + Inter body +
   JetBrains Mono code (numbers use Inter tabular via .tnum). Dark theme stays available via the same vars.
   Colors are "R G B" triplets so rgb(var(--x) / a) works.
   ============================================================ */

:root{
    --canvas: 246 247 249;     /* paper page background */
    --surface: 255 255 255;    /* cards, sidebar */
    --inset: 238 240 244;      /* fields, recessed areas */
    --edge: 226 229 235;       /* 1px hairlines */
    --edge2: 190 197 208;      /* strong borders */
    --pri: 13 20 36;           /* ink text */
    --sec: 90 98 112;          /* secondary text */
    --ter: 138 146 160;        /* faint text */
    --accent: 36 64 245;       /* cobalt */
    --accent-deep: 24 45 168;
    --accent-soft: 235 238 254;/* cobalt tint */
    --ok: 30 122 76;
    --bad: 195 52 52;
    --warn: 160 106 16;
    --info: 59 107 214;
    --card-shadow: 0 1px 2px rgb(16 24 40 / .05), 0 8px 28px rgb(16 24 40 / .06);
    --slab: 13 20 36;          /* dark slab (code) */
    --slab-ink: 232 235 243;
    color-scheme: light;
}
html[data-theme="dark"]{
    --canvas: 12 16 23;
    --surface: 20 26 38;
    --inset: 15 20 31;
    --edge: 40 47 62;
    --edge2: 62 71 88;
    --pri: 232 235 241;
    --sec: 152 161 176;
    --ter: 98 108 126;
    --accent: 90 110 255;
    --accent-deep: 70 92 235;
    --accent-soft: 36 52 130;
    --ok: 52 168 110;
    --bad: 229 83 75;
    --warn: 217 154 43;
    --info: 107 154 232;
    --card-shadow: 0 12px 32px rgb(0 0 0 / .28);
    --slab: 15 20 31;
    --slab-ink: 232 235 243;
    color-scheme: dark;
}

/* ---------- base ---------- */
body{ background:rgb(var(--canvas)); color:rgb(var(--pri)); font-family:'Inter',system-ui,-apple-system,sans-serif; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
.mono{ font-family:'JetBrains Mono',ui-monospace,monospace; font-variant-numeric:tabular-nums; }
/* Табличные цифры Inter: суммы, токены, даты, счётчики. Моноширинный JetBrains оставляем только для кода/ключей/ID. */
.tnum{ font-family:'Inter',system-ui,-apple-system,sans-serif; font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1, 'lnum' 1; }
.display{ font-family:'Playfair Display',Georgia,serif; }
::selection{ background:rgb(var(--accent) / .22); }

*{ scrollbar-width:thin; scrollbar-color:rgb(var(--edge2)) transparent; }
*::-webkit-scrollbar{ width:8px; height:8px; }
*::-webkit-scrollbar-thumb{ background:rgb(var(--edge2)); border-radius:4px; }
*::-webkit-scrollbar-track{ background:transparent; }

:focus-visible{ outline:2px solid rgb(var(--accent)); outline-offset:2px; border-radius:4px; }
.field:focus, .cmd-input:focus{ outline:none; }

summary{ list-style:none; }
summary::-webkit-details-marker{ display:none; }

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

/* ---------- brand ---------- */
.brand{ font-family:'Playfair Display',Georgia,serif; font-size:21px; font-weight:600; letter-spacing:-.01em; color:rgb(var(--pri)); line-height:1; }
.brand-acc{ color:rgb(var(--accent)); font-style:italic; }

/* ---------- cards ---------- */
.card{ background:rgb(var(--surface)); border:1px solid rgb(var(--edge)); border-radius:16px; box-shadow:var(--card-shadow); }
.card-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 22px; border-bottom:1px solid rgb(var(--edge)); }
.card-title{ font-size:15px; font-weight:650; color:rgb(var(--pri)); letter-spacing:-.005em; }
.card-sub{ font-size:12.5px; color:rgb(var(--ter)); margin-top:3px; }
.tbl-wrap{ overflow-x:auto; scrollbar-width:thin; }
.tbl-foot{ padding:14px 22px; border-top:1px solid rgb(var(--edge)); font-size:12.5px; color:rgb(var(--sec)); }

/* ---------- page header ---------- */
.page-head{ margin-bottom:28px; max-width:720px; }
.page-title{ font-family:'Playfair Display',Georgia,serif; font-size:32px; font-weight:500; letter-spacing:-.015em; line-height:1.1; color:rgb(var(--pri)); }
.page-sub{ font-size:14.5px; color:rgb(var(--sec)); margin-top:8px; line-height:1.6; }

/* ---------- kicker / label / hint ---------- */
.kicker{ font-family:'JetBrains Mono',ui-monospace,monospace; font-size:10.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:rgb(var(--ter)); }
.label{ display:block; font-size:13px; font-weight:600; color:rgb(var(--pri)); margin-bottom:7px; }
.hint{ font-size:12.5px; color:rgb(var(--ter)); line-height:1.55; }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:40px; padding:0 18px; border-radius:10px; border:1px solid transparent; font-size:13.5px; font-weight:600; font-family:'Inter',system-ui,sans-serif; color:rgb(var(--pri)); background:transparent; cursor:pointer; white-space:nowrap; transition:background .15s, border-color .15s, color .15s, box-shadow .15s; user-select:none; text-decoration:none; }
.btn svg{ width:16px; height:16px; flex:none; }
.btn:disabled{ opacity:.5; cursor:default; }
.btn-primary{ background:rgb(var(--accent)); border-color:rgb(var(--accent)); color:#fff; box-shadow:0 1px 2px rgb(var(--accent) / .4); }
.btn-primary:hover{ background:rgb(var(--accent-deep)); border-color:rgb(var(--accent-deep)); }
.btn-ghost{ background:rgb(var(--surface)); border-color:rgb(var(--edge)); color:rgb(var(--pri)); }
.btn-ghost:hover{ background:rgb(var(--inset)); border-color:rgb(var(--edge2)); }
.btn-danger{ background:transparent; border-color:rgb(var(--bad) / .35); color:rgb(var(--bad)); }
.btn-danger:hover{ background:rgb(var(--bad) / .08); border-color:rgb(var(--bad) / .5); }
.btn-sm{ height:33px; padding:0 13px; font-size:12.5px; border-radius:9px; }
.btn-icon{ width:40px; padding:0; }
.btn-icon.btn-sm{ width:33px; }

/* text action link */
.link{ font-size:13px; font-weight:600; color:rgb(var(--accent)); text-decoration:none; }
.link:hover{ text-decoration:underline; text-underline-offset:3px; }

/* ---------- form fields ---------- */
.field{ width:100%; height:42px; background:rgb(var(--surface)); border:1px solid rgb(var(--edge)); border-radius:10px; padding:0 14px; font-size:14px; font-family:'Inter',system-ui,sans-serif; color:rgb(var(--pri)); transition:border-color .15s, box-shadow .15s; }
.field::placeholder{ color:rgb(var(--ter)); }
textarea.field{ height:auto; padding:12px 14px; line-height:1.6; resize:vertical; }
select.field{ appearance:none; -webkit-appearance:none; padding-right:36px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a93a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 9l-7 7-7-7'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 13px center; }
select.field option{ color:#1a1f27; background:#fff; }
.field:focus{ border-color:rgb(var(--accent)); box-shadow:0 0 0 3px rgb(var(--accent) / .16); }
.field.field-mono{ font-family:'JetBrains Mono',ui-monospace,monospace; font-size:13px; }

.select{ position:relative; }
.select .field{ background-image:none; }
.select > svg{ position:absolute; right:13px; top:50%; transform:translateY(-50%); width:15px; height:15px; color:rgb(var(--ter)); pointer-events:none; }

.search{ position:relative; }
.search .field{ padding-left:38px; }
.search > svg{ position:absolute; left:13px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:rgb(var(--ter)); pointer-events:none; }

/* checkbox */
.chk{ width:16px; height:16px; accent-color:rgb(var(--accent)); }

/* ---------- stat card ---------- */
.stat{ display:flex; flex-direction:column; gap:8px; padding:22px; }
.stat-value{ font-family:'Inter',system-ui,sans-serif; font-size:30px; font-weight:700; letter-spacing:-.02em; line-height:1; color:rgb(var(--pri)); font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1, 'lnum' 1; }
.stat-value .unit{ font-family:'Inter',system-ui,sans-serif; font-size:13px; font-weight:600; color:rgb(var(--ter)); letter-spacing:0; margin-left:3px; }
.stat-delta{ font-size:12.5px; color:rgb(var(--sec)); }
.stat-ic{ width:36px; height:36px; border-radius:11px; background:rgb(var(--accent-soft)); color:rgb(var(--accent)); display:inline-flex; align-items:center; justify-content:center; flex:none; }
.stat-ic svg{ width:18px; height:18px; }

/* ---------- data table ---------- */
.tbl{ width:100%; border-collapse:collapse; font-size:13.5px; }
.tbl thead th{ font-family:'JetBrains Mono',ui-monospace,monospace; font-size:10.5px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:rgb(var(--ter)); text-align:left; padding:12px 22px; border-bottom:1px solid rgb(var(--edge2)); white-space:nowrap; position:sticky; top:0; background:rgb(var(--surface)); z-index:1; }
.tbl thead th.num{ text-align:right; }
.tbl thead th.ctr{ text-align:center; }
.tbl tbody td{ padding:14px 22px; border-bottom:1px solid rgb(var(--edge)); color:rgb(var(--pri)); vertical-align:middle; }
.tbl tbody tr:last-child td{ border-bottom:none; }
.tbl tbody tr{ transition:background .1s; }
.tbl tbody tr:hover{ background:rgb(var(--inset) / .6); }
.tbl .num{ font-family:'Inter',system-ui,-apple-system,sans-serif; font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1, 'lnum' 1; font-size:13px; text-align:right; color:rgb(var(--pri)); }
.tbl .ctr{ text-align:center; }
.tbl .strong{ font-weight:650; }
.tbl .mut{ color:rgb(var(--sec)); }
.tbl .dim{ color:rgb(var(--ter)); }
.tbl .ok{ color:rgb(var(--ok)); font-weight:650; }
.tbl .bad{ color:rgb(var(--bad)); font-weight:650; }

/* ---------- badges ---------- */
.badge{ display:inline-flex; align-items:center; gap:7px; height:24px; padding:0 11px; border-radius:999px; border:1px solid rgb(var(--edge)); background:rgb(var(--surface)); color:rgb(var(--sec)); font-family:'JetBrains Mono',ui-monospace,monospace; font-size:11px; font-weight:500; white-space:nowrap; }
.badge .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
.badge-ok{ color:rgb(var(--ok)); background:rgb(var(--ok) / .09); border-color:rgb(var(--ok) / .3); }
.badge-bad{ color:rgb(var(--bad)); background:rgb(var(--bad) / .09); border-color:rgb(var(--bad) / .3); }
.badge-warn{ color:rgb(var(--warn)); background:rgb(var(--warn) / .1); border-color:rgb(var(--warn) / .32); }
.badge-acc{ color:rgb(var(--accent)); background:rgb(var(--accent) / .09); border-color:rgb(var(--accent) / .32); }

/* ---------- pills / chips (tabs & filters) ---------- */
.pill{ display:inline-flex; align-items:center; height:32px; padding:0 15px; border-radius:999px; border:1px solid rgb(var(--edge)); background:rgb(var(--surface)); color:rgb(var(--sec)); font-size:13px; font-weight:500; text-decoration:none; cursor:pointer; transition:color .12s, background .12s, border-color .12s; }
.pill:hover{ color:rgb(var(--pri)); border-color:rgb(var(--edge2)); }
.pill.on{ background:rgb(var(--pri)); border-color:rgb(var(--pri)); color:rgb(var(--canvas)); font-weight:600; }
.chip{ display:inline-flex; align-items:center; height:27px; padding:0 12px; border-radius:999px; border:1px solid rgb(var(--edge)); background:transparent; color:rgb(var(--sec)); font-size:12px; font-weight:500; cursor:pointer; transition:color .12s, background .12s, border-color .12s; }
.chip:hover{ color:rgb(var(--pri)); border-color:rgb(var(--edge2)); background:rgb(var(--inset)); }
.chip.on{ color:rgb(var(--accent)); border-color:rgb(var(--accent) / .4); background:rgb(var(--accent) / .08); font-weight:600; }

/* ---------- alerts ---------- */
.alert{ display:flex; align-items:flex-start; gap:12px; border-radius:12px; padding:14px 16px 14px 14px; font-size:13.5px; line-height:1.55; border:1px solid rgb(var(--edge)); border-left:3px solid rgb(var(--ter)); background:rgb(var(--surface)); color:rgb(var(--pri)); box-shadow:var(--card-shadow); }
.alert svg{ flex:none; margin-top:1px; width:17px; height:17px; }
.alert-bad{ border-left-color:rgb(var(--bad)); }
.alert-bad svg{ color:rgb(var(--bad)); }
.alert-ok{ border-left-color:rgb(var(--ok)); }
.alert-ok svg{ color:rgb(var(--ok)); }
.alert-info{ border-left-color:rgb(var(--info)); }
.alert-info svg{ color:rgb(var(--info)); }

/* ---------- code blocks: dark slab in both themes ---------- */
.codebox{ background:rgb(var(--slab)); border:1px solid rgb(var(--slab)); border-radius:12px; padding:16px 18px; font-family:'JetBrains Mono',ui-monospace,monospace; font-size:12.5px; line-height:1.7; color:rgb(var(--slab-ink) / .75); overflow-x:auto; white-space:pre; }
.codebox .cx-dim{ color:rgb(var(--slab-ink) / .4); }
.codebox .cx-acc{ color:#9FE8B8; }
.codebox .cx-ok{ color:#9FE8B8; }
.codebox .cx-warn{ color:#F2C879; }
.codebox .cx-pri{ color:rgb(var(--slab-ink)); font-weight:600; }

/* key display */
.keybox{ flex:1; min-width:0; display:flex; align-items:center; gap:10px; background:rgb(var(--slab)); border:1px solid rgb(var(--slab)); border-radius:10px; padding:11px 15px; }
.keybox code{ font-family:'JetBrains Mono',ui-monospace,monospace; font-variant-numeric:tabular-nums; font-size:13px; color:rgb(var(--slab-ink) / .85); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.keybox code.show{ color:#9FE8B8; }

/* ---------- empty state ---------- */
.empty{ padding:56px 24px; text-align:center; }
.empty-ic{ width:44px; height:44px; margin:0 auto 16px; border-radius:12px; background:rgb(var(--inset)); border:1px solid rgb(var(--edge)); display:flex; align-items:center; justify-content:center; color:rgb(var(--ter)); }
.empty-t{ font-family:'Playfair Display',Georgia,serif; font-size:19px; font-weight:500; color:rgb(var(--pri)); }
.empty-s{ font-size:13px; color:rgb(var(--sec)); margin-top:6px; line-height:1.55; }

/* ---------- avatar ---------- */
.avatar{ width:34px; height:34px; border-radius:50%; background:rgb(var(--inset)); border:1px solid rgb(var(--edge)); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:rgb(var(--pri)); flex:none; }
.avatar-acc{ background:rgb(var(--accent)); border-color:rgb(var(--accent)); color:#fff; }

/* ---------- progress ---------- */
.progress{ height:7px; border-radius:999px; background:rgb(var(--inset)); border:1px solid rgb(var(--edge)); overflow:hidden; }
.progress span{ display:block; height:100%; background:rgb(var(--accent)); border-radius:999px; transition:width .3s ease; }

/* ---------- chat bubbles (support) ---------- */
.bubble{ border-radius:14px; padding:12px 16px; font-size:13.5px; line-height:1.6; white-space:pre-wrap; word-break:break-word; }
.bubble-u{ background:rgb(var(--surface)); border:1px solid rgb(var(--edge)); color:rgb(var(--pri)); border-top-left-radius:4px; box-shadow:var(--card-shadow); }
.bubble-s{ background:rgb(var(--accent-soft)); border:1px solid rgb(var(--accent) / .2); color:rgb(var(--pri)); border-top-right-radius:4px; }
.pg-typing::after{ content:''; display:inline-block; width:.55em; height:.55em; margin-left:.5em; border-radius:50%; background:currentColor; opacity:.35; animation:pg-blink 1s ease-in-out infinite; vertical-align:baseline; }
@keyframes pg-blink{ 0%,100%{ opacity:.2; } 50%{ opacity:1; } }

/* ---------- playground rich messages ---------- */
.bubble{ position:relative; }
.pg-has-copy{ padding-right:34px; }

/* Brand chips for model catalogue categories: real logo SVGs on a
   neutral tile, glyph fallback for brands without an icon. */
.brand-chip{ width:24px; height:24px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; flex:none; background:rgb(var(--inset)); border:1px solid rgb(var(--edge)); overflow:hidden; }
.brand-chip img{ width:14px; height:14px; display:block; }
/* White marks stay visible in both themes on a dark tile. */
.brand-chip-openai, .brand-chip-xai{ background:#0B0B0C; border-color:rgb(255 255 255 / .14); }
.brand-glyph{ width:24px; height:24px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; flex:none; font-size:12px; font-weight:800; line-height:1; color:#fff; font-family:'Inter',system-ui,sans-serif; background:rgb(var(--ter)); }
.brand-glyph-xai{ background:#334155; }
.brand-glyph-glm{ background:#2563EB; }
.cat-pill{ gap:8px; white-space:nowrap; flex:none; }
.cat-pill .cnt{ font-size:10.5px; color:rgb(var(--ter)); }
.cat-scroll{ display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; scrollbar-width:thin; }

/* Brand catalogue group headers (admin models table). */
.cat-group-cell{ background:rgb(var(--inset) / .55) !important; padding-top:9px !important; padding-bottom:9px !important; }

/* Admin modal: forms open over the list instead of a separate page. */
#adminModal.hidden{ display:none; }
.modal-overlay{ position:fixed; inset:0; z-index:100; background:rgba(13,20,36,.55); backdrop-filter:blur(4px); display:flex; align-items:flex-start; justify-content:center; padding:24px 16px; overflow-y:auto; }
.modal-box{ width:100%; max-width:640px; }
.modal-box.wide{ max-width:760px; }
#adminModalBox{ position:relative; }
#adminModalBox > .card{ position:relative; margin-left:auto; margin-right:auto; }
.modal-x{ position:absolute; top:12px; right:12px; z-index:2; }
.modal-spin{ padding:48px 0; text-align:center; color:rgb(var(--ter)); }

.up-wrap{ position:relative; }
.uplist{ position:absolute; top:calc(100% + 6px); left:0; right:0; max-height:240px; overflow-y:auto; background:rgb(var(--surface)); border:1px solid rgb(var(--edge)); border-radius:12px; padding:6px; box-shadow:var(--card-shadow); z-index:60; transform:translateZ(0); }
.uplist-item{ display:block; width:100%; text-align:left; padding:8px 10px; border-radius:8px; font-family:'JetBrains Mono',ui-monospace,monospace; font-size:12.5px; color:rgb(var(--pri)); background:none; border:0; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.uplist-item:hover{ background:rgb(var(--inset)); }
.uplist-empty{ padding:8px 10px; font-size:12.5px; color:rgb(var(--ter)); }

/* Row kebab menu (admin tables): actions hidden behind ⋯. */
.rowmenu{ position:relative; display:inline-block; }
.rowmenu summary{ list-style:none; cursor:pointer; }
.rowmenu summary::-webkit-details-marker{ display:none; }
.rowmenu summary::marker{ content:''; }
.rowmenu-list{ position:absolute; right:0; top:calc(100% + 6px); min-width:200px; background:rgb(var(--surface)); border:1px solid rgb(var(--edge)); border-radius:12px; padding:6px; box-shadow:var(--card-shadow); z-index:40; display:flex; flex-direction:column; gap:2px; }
.rowmenu-list form{ display:contents; }
.rowmenu-list .btn{ justify-content:flex-start; width:100%; }

/* Spacing utilities missing from the frozen prebuilt app.css */
.gap-1{ gap:.25rem; }
.mb-2{ margin-bottom:.5rem; }
.mb-3{ margin-bottom:.75rem; }
.mb-5{ margin-bottom:1.25rem; }
.mb-10{ margin-bottom:2.5rem; }
.mt-10{ margin-top:2.5rem; }
.pg-row-user .bubble-u{ border-top-left-radius:14px; border-top-right-radius:4px; }
.pg-row-ai .bubble-s{ border-top-right-radius:14px; border-top-left-radius:4px; }
.pg-copy{ position:absolute; top:6px; right:6px; width:26px; height:26px; display:flex; align-items:center; justify-content:center; border-radius:8px; border:1px solid rgb(var(--edge)); background:rgb(var(--surface) / .9); color:rgb(var(--ter)); cursor:pointer; opacity:.55; padding:0; }
.pg-copy:hover{ opacity:1; color:rgb(var(--accent)); border-color:rgb(var(--accent) / .4); }
.pg-copy svg{ width:13px; height:13px; }
.pg-md{ padding-right:26px; }
.pg-md p{ margin:0 0 .55em; }
.pg-md p:last-child{ margin-bottom:0; }
.pg-h{ font-weight:700; margin:.55em 0 .3em; font-size:14.5px; }
.pg-md ul, .pg-md ol{ margin:.25em 0 .55em; padding-left:1.35em; }
.pg-md li{ margin:.18em 0; }
.pg-md li::marker{ color:rgb(var(--accent)); }
.pg-md blockquote{ border-left:3px solid rgb(var(--accent) / .5); padding:2px 0 2px .7em; margin:.4em 0; color:rgb(var(--sec)); }
.pg-md code.pg-ic{ font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.86em; background:rgb(var(--inset)); border:1px solid rgb(var(--edge)); border-radius:6px; padding:1px 5px; }
.pg-md hr{ border:0; border-top:1px solid rgb(var(--edge)); margin:.6em 0; }
.pg-md table{ border-collapse:collapse; margin:.5em 0; font-size:12.5px; max-width:100%; display:block; overflow-x:auto; }
.pg-md th, .pg-md td{ border:1px solid rgb(var(--edge)); padding:5px 9px; text-align:left; white-space:nowrap; }
.pg-md th{ background:rgb(var(--inset)); font-weight:600; }
.pg-md a{ color:rgb(var(--accent)); }
.pg-code{ margin:.45em 0; border:1px solid rgb(var(--edge)); border-radius:10px; overflow:hidden; background:rgb(var(--inset)); }
.pg-code-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 8px 6px 12px; font-family:'JetBrains Mono',ui-monospace,monospace; font-size:11px; color:rgb(var(--ter)); border-bottom:1px solid rgb(var(--edge)); }
.pg-codecopy{ display:inline-flex; align-items:center; gap:6px; background:none; border:1px solid rgb(var(--edge)); border-radius:7px; color:rgb(var(--sec)); font-family:'JetBrains Mono',ui-monospace,monospace; font-size:11px; padding:4px 9px; cursor:pointer; }
.pg-codecopy:hover{ color:rgb(var(--accent)); border-color:rgb(var(--accent) / .4); }
.pg-codecopy svg{ width:12px; height:12px; }
.pg-code pre{ margin:0; padding:10px 12px; overflow-x:auto; font-family:'JetBrains Mono',ui-monospace,monospace; font-size:12.3px; line-height:1.65; }
.pg-code code{ white-space:pre; }

/* ---------- sidebar navigation ---------- */
.app-sidebar{ background:rgb(var(--surface)); }
.sb-brand{ padding:22px 20px 6px; }
.sb-nav{ padding:10px 14px; }
.nav-item{ position:relative; display:flex; align-items:center; gap:12px; height:42px; padding:0 14px; border-radius:11px; font-size:14px; font-weight:500; color:rgb(var(--sec)); text-decoration:none; transition:background .12s, color .12s; }
.nav-item:hover{ color:rgb(var(--pri)); background:rgb(var(--inset)); }
.nav-item.on{ color:rgb(var(--canvas)); background:rgb(var(--pri)); font-weight:600; }
.nav-item.on .nav-ico{ color:inherit; }
.nav-item.on:hover{ background:rgb(var(--pri)); color:rgb(var(--canvas)); }
.nav-ico{ width:20px; height:20px; flex:none; }
.nav-badge{ margin-left:auto; font-family:'Inter',system-ui,sans-serif; font-variant-numeric:tabular-nums; font-size:10.5px; font-weight:700; background:rgb(var(--accent)); color:#fff; border-radius:999px; min-width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; padding:0 6px; flex:none; }
.nav-item.on .nav-badge{ background:rgb(var(--canvas)); color:rgb(var(--pri)); }
.nav-group{ padding:0 14px; margin:24px 0 8px; }
.nav-group:first-child{ margin-top:8px; }
/* ---------- sidebar user card ---------- */
.sb-user{ margin:12px 14px 14px; padding:10px 12px; border:1px solid rgb(var(--edge)); border-radius:12px; background:rgb(var(--surface)); }
.sb-profile{ min-width:0; flex:1; text-decoration:none; color:inherit; border-radius:8px; }
.sb-profile:hover .sb-uname{ color:rgb(var(--accent)); }
.sb-uname{ transition:color .12s; }
/* ---------- confirm modal ---------- */
.confirm-title{ font-family:'Playfair Display',Georgia,serif; font-size:19px; font-weight:600; letter-spacing:-.01em; color:rgb(var(--pri)); }
.confirm-msg{ font-size:13.5px; line-height:1.6; color:rgb(var(--sec)); margin-top:8px; }
/* ---------- collapsed sidebar fixes ---------- */
#sidebar.collapsed, #sidebarAdmin.collapsed{ overflow:hidden; }
#sidebar.collapsed .sb-brand-link, #sidebarAdmin.collapsed .sb-brand-link{ display:none; }
#sidebar.collapsed .sb-close, #sidebarAdmin.collapsed .sb-close{ display:none !important; }
#sidebar.collapsed .sb-user, #sidebarAdmin.collapsed .sb-user{ justify-content:center; margin:12px 10px; padding:10px 0; border-color:transparent; }
#sidebar.collapsed .sb-user .sb-profile, #sidebarAdmin.collapsed .sb-user .sb-profile,
#sidebar.collapsed .sb-user a.tb-btn, #sidebarAdmin.collapsed .sb-user a.tb-btn{ display:none; }
/* ---------- topbar ---------- */
.topbar{ border-bottom:1px solid rgb(var(--edge)); background:rgb(var(--canvas) / .85); backdrop-filter:blur(12px); }
.tb-title{ font-family:'Playfair Display',Georgia,serif; font-size:21px; font-weight:600; letter-spacing:-.01em; color:rgb(var(--pri)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tb-btn{ width:37px; height:37px; border-radius:10px; background:rgb(var(--surface)); border:1px solid rgb(var(--edge)); display:inline-flex; align-items:center; justify-content:center; color:rgb(var(--sec)); cursor:pointer; transition:background .12s, color .12s, border-color .12s; text-decoration:none; }
.tb-btn:hover{ background:rgb(var(--inset)); color:rgb(var(--pri)); border-color:rgb(var(--edge2)); }
.tb-btn svg{ width:17px; height:17px; }
.tb-pill{ display:inline-flex; align-items:center; gap:8px; height:37px; padding:0 14px; border-radius:10px; background:rgb(var(--surface)); border:1px solid rgb(var(--edge)); font-size:13px; font-weight:500; color:rgb(var(--sec)); text-decoration:none; cursor:pointer; transition:background .12s, color .12s; }
.tb-pill:hover{ background:rgb(var(--inset)); color:rgb(var(--pri)); }
.tb-pill kbd{ font-family:'JetBrains Mono',monospace; font-size:10.5px; color:rgb(var(--ter)); border:1px solid rgb(var(--edge)); background:rgb(var(--inset)); border-radius:6px; padding:2px 6px; }
.notif-badge{ position:absolute; top:-5px; right:-5px; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:rgb(var(--accent)); color:#fff; font-family:'Inter',system-ui,sans-serif; font-variant-numeric:tabular-nums; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; border:2px solid rgb(var(--canvas)); }

/* notification dropdown rows */
.nd-item{ display:flex; gap:12px; padding:14px 20px; transition:background .1s; }
.nd-item:hover{ background:rgb(var(--inset)); }
.nd-item.unread{ background:rgb(var(--accent) / .07); }

/* ---------- locale switch (EN/RU segmented control) ---------- */
.locale-switch{ display:inline-flex; align-items:center; gap:2px; height:37px; padding:3px; border-radius:10px; background:rgb(var(--surface)); border:1px solid rgb(var(--edge)); }
.locale-switch a{ display:inline-flex; align-items:center; height:29px; padding:0 10px; border-radius:7px; font-size:11.5px; font-weight:700; letter-spacing:.04em; color:rgb(var(--ter)); text-decoration:none; transition:background .12s, color .12s; }
.locale-switch a:hover{ color:rgb(var(--pri)); }
.locale-switch a.on{ background:rgb(var(--pri)); color:rgb(var(--canvas)); }

/* ---------- command palette ---------- */
.cmd-input{ width:100%; background:transparent; border:none; font-size:14.5px; color:rgb(var(--pri)); font-family:'Inter',system-ui,sans-serif; }
.cmd-input::placeholder{ color:rgb(var(--ter)); }
.cmd-item{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px; text-decoration:none; color:rgb(var(--pri)); transition:background .1s; }
.cmd-item:hover{ background:rgb(var(--inset)); }

/* ---------- toasts ---------- */
#toastContainer{ position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:999; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
.toast{ pointer-events:auto; display:flex; align-items:center; gap:10px; background:rgb(var(--pri)); color:rgb(var(--canvas)); padding:11px 17px; border-radius:11px; font-size:13px; font-weight:600; box-shadow:0 8px 24px rgb(0 0 0 / .3); animation:toast-in .22s ease, toast-out .22s ease 2.4s forwards; }
.toast .t-ic{ width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex:none; }
.toast .t-ic.ok{ background:rgb(var(--ok)); color:#fff; }
.toast .t-ic.bad{ background:rgb(var(--bad)); color:#fff; }
@keyframes toast-in{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }
@keyframes toast-out{ from{ opacity:1;} to{ opacity:0; transform:translateY(-8px);} }

/* ---------- skeleton ---------- */
.skeleton{ background:linear-gradient(90deg, rgb(var(--inset)) 25%, rgb(var(--surface)) 50%, rgb(var(--inset)) 75%); background-size:200% 100%; animation:shimmer 1.2s infinite; border-radius:8px; }
@keyframes shimmer{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }

/* ---------- floating copy button for code slabs ---------- */
.codebox{ position:relative; }
.copy-float{ position:absolute; top:10px; right:10px; display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 10px; border-radius:8px; background:rgb(var(--slab)); border:1px solid rgb(var(--slab-ink) / .22); color:rgb(var(--slab-ink) / .75); font-family:'Inter',system-ui,sans-serif; font-size:11.5px; font-weight:600; cursor:pointer; white-space:nowrap; transition:color .12s, border-color .12s; }
.copy-float:hover{ color:rgb(var(--slab-ink)); border-color:rgb(var(--slab-ink) / .45); }
.copy-float svg{ width:13px; height:13px; flex:none; }

/* ---------- inline copy rows (endpoint / key): перенос длинных строк ---------- */
.codebox-flat{ white-space:normal; padding-top:12px; padding-bottom:12px; }
.codebox-flat .cx-wrap{ flex:1 1 auto; min-width:0; overflow-wrap:anywhere; word-break:break-all; }
/* Single-line rows (URL, header, command): wrap instead of sideways scroll. */
.codebox-wrap{ white-space:normal; }
.codebox-wrap .cx-wrap{ flex:1 1 auto; min-width:0; overflow-wrap:anywhere; word-break:break-all; }

/* ---------- responsive shell ---------- */
@media (max-width:1023px){
    .app-sidebar{ transform:translateX(-100%); box-shadow:none; }
    .app-sidebar.open{ transform:translateX(0); box-shadow:8px 0 32px rgb(0 0 0 / .18); }
}
@media (max-width:640px){
    .page-title{ font-size:26px; }
    .tbl{ font-size:12.5px; }
    .tbl thead th, .tbl tbody td{ padding:10px 14px; }
    .card-head{ padding:14px 16px; }
    .stat-value{ font-size:26px; }
}

/* ---------- spend chart tooltip ---------- */
.spend-tip{ position:absolute; z-index:5; pointer-events:none; background:rgb(var(--pri)); color:rgb(var(--canvas)); font-size:11.5px; font-weight:600; font-variant-numeric:tabular-nums; padding:6px 10px; border-radius:8px; white-space:nowrap; transform:translate(-50%,-135%); box-shadow:0 6px 18px rgb(0 0 0 / .25); }
.spend-tip small{ display:block; font-weight:500; opacity:.65; }
@media (min-width:1024px){
    /* Collapsed = icon rail: roomy centered tiles, no text, no badges */
    #sidebar{ transition:width .25s ease; }
    #sidebar.collapsed{ width:88px !important; }
    #sidebar.collapsed .sidebar-label, #sidebar.collapsed .nav-group, #sidebar.collapsed .sb-user, #sidebar.collapsed .sb-expand{ opacity:0; pointer-events:none; }
    #sidebar.collapsed .nav-group{ display:none !important; }
    #sidebar.collapsed .sb-nav{ padding:8px 14px; }
    #sidebar.collapsed .nav-item{ justify-content:center; padding:0; height:50px; border-radius:15px; margin-bottom:4px; }
    #sidebar.collapsed .nav-item .nav-ico{ width:22px; height:22px; }
    #sidebar.collapsed .nav-item .sidebar-label{ display:none; }
    #sidebar.collapsed .nav-badge{ display:none !important; }
    #sidebar.collapsed .nav-item.on::before{ display:none; }
    #sidebar.collapsed .sb-brand{ padding:20px 0 8px; justify-content:center; }
    #sidebar.collapsed #sidebarCollapseBtn{ transform:rotate(180deg); }
    #sidebar .expand-bottom{ display:none; }
    #sidebar.collapsed .expand-bottom{ display:flex !important; }
    #mainWrap.collapsed{ margin-left:88px !important; }
    #sidebarAdmin{ transition:width .25s ease; }
    #sidebarAdmin.collapsed{ width:88px !important; }
    #sidebarAdmin.collapsed .sidebar-label, #sidebarAdmin.collapsed .nav-group, #sidebarAdmin.collapsed .sb-user{ opacity:0; pointer-events:none; }
    #sidebarAdmin.collapsed .nav-group{ display:none !important; }
    #sidebarAdmin.collapsed .sb-nav{ padding:8px 14px; }
    #sidebarAdmin.collapsed .nav-item{ justify-content:center; padding:0; height:50px; border-radius:15px; margin-bottom:4px; }
    #sidebarAdmin.collapsed .nav-item .nav-ico{ width:22px; height:22px; }
    #sidebarAdmin.collapsed .nav-item .sidebar-label{ display:none; }
    #sidebarAdmin.collapsed .nav-item.on::before{ display:none; }
    #sidebarAdmin.collapsed .sb-brand{ padding:20px 0 8px; justify-content:center; }
    #sidebarAdmin.collapsed #sidebarCollapseBtnA{ transform:rotate(180deg); }
    #sidebarAdmin .expand-bottom{ display:none; }
    #sidebarAdmin.collapsed .expand-bottom{ display:flex !important; }
    #mainWrapAdmin.collapsed{ margin-left:88px !important; }
}

/* ========================================================================
   Model catalogue (/models) — "instrument panel" cards
   Job of the page: pick a model in <30s and copy its ID.
   Signature: ID is a single full-width copy field (terminal chip),
   price reads as a ledger ($ first, tabular), tier is a coloured dot —
   no meaningless blue progress bars.
   ======================================================================== */
.mcat-grid{ gap:16px; }
.mcat-toolbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-width:0; }
.mcat-line{ display:flex; align-items:center; gap:10px; margin-top:10px; min-width:0; }
.mcat-line .kicker,.mcat-line .lbl{ flex:none; }
.mcat-line .cat-scroll{ flex:1 1 0; min-width:0; }
.mcat-sort{ flex:1 1 190px; min-width:0; }
.mcat-sort .field{ width:100%; }
.mcat-view{ flex:none; display:inline-flex; border:1px solid rgb(var(--edge)); border-radius:10px; overflow:hidden; background:rgb(var(--surface)); }
.mcat-view button{ background:transparent; border:0; padding:7px 13px; font-size:12.5px; font-weight:600; color:rgb(var(--sec)); cursor:pointer; }
.mcat-view button.on{ background:rgb(var(--accent)); color:#fff; }

.mcat-hint{ display:flex; align-items:flex-start; gap:10px; border:1px solid rgb(var(--accent) / .25);
    background:rgb(var(--accent) / .06); border-radius:12px; padding:11px 14px;
    font-size:12.5px; line-height:1.55; color:rgb(var(--sec)); margin-bottom:18px; }
.mcat-hint b{ color:rgb(var(--pri)); }
.mcat-hint svg{ flex:none; width:16px; height:16px; margin-top:2px; color:rgb(var(--accent)); }

.mcat-card{ display:flex; flex-direction:column; position:relative; border-radius:18px;
    overflow:hidden; transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.mcat-card:hover{ transform:translateY(-2px); border-color:rgb(var(--edge2));
    box-shadow:0 2px 4px rgb(16 24 40 / .06), 0 16px 40px rgb(16 24 40 / .12); }
html[data-theme="dark"] .mcat-card:hover{ box-shadow:0 16px 44px rgb(0 0 0 / .45); }
.mcat-card.picked{ border-color:rgb(var(--accent)); box-shadow:inset 0 0 0 1px rgb(var(--accent) / .55), 0 12px 32px rgb(var(--accent) / .14); }
/* Tier stripe — the single colour accent per card. */
.mcat-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:2px; z-index:1;
    background:rgb(var(--edge)); }
.mcat-card.t-tier1::before{ background:rgb(var(--ok)); }
.mcat-card.t-tier2::before{ background:rgb(var(--accent)); }
.mcat-card.t-tier3::before{ background:rgb(var(--warn)); }
.mcat-card.t-tier4::before{ background:rgb(168 85 247); }
.mcat-card.t-img::before{ background:rgb(var(--ter)); }
.mcat-top{ padding:16px 16px 12px; }
.mcat-name{ display:flex; align-items:center; gap:8px; min-width:0; padding-right:38px; }
.mcat-name .t{ font-size:14px; font-weight:650; letter-spacing:-.005em; color:rgb(var(--pri));
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mcat-id{ margin-top:9px; display:flex; align-items:center; gap:8px; width:100%;
    font-family:'JetBrains Mono',ui-monospace,monospace; font-size:12.5px; font-weight:500;
    color:rgb(var(--sec)); background:rgb(var(--inset)); border:1px solid rgb(var(--edge));
    border-radius:10px; padding:7px 8px 7px 11px; cursor:pointer; text-align:left;
    transition:background .15s, color .15s, border-color .15s, transform .1s; }
.mcat-id .v{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mcat-id svg{ width:14px; height:14px; flex:none; opacity:.7; }
.mcat-id:hover{ border-color:rgb(var(--accent) / .45); color:rgb(var(--pri)); background:rgb(var(--accent) / .06); }
.mcat-id:hover svg{ opacity:1; color:rgb(var(--accent)); }
.mcat-id:active{ transform:scale(.985); }
.mcat-id:focus-visible{ outline:2px solid rgb(var(--accent)); outline-offset:2px; }
.mcat-id.copied{ color:rgb(var(--ok)); border-color:rgb(var(--ok) / .5); background:rgb(var(--ok) / .1); }
.mcat-id.copied svg{ color:rgb(var(--ok)); opacity:1; }
.mcat-id .ic-ok{ display:none; }
.mcat-id.copied .ic-copy{ display:none; }
.mcat-id.copied .ic-ok{ display:block; }
.mcat-card .mcat-desc{ font-size:12.5px; line-height:1.5; color:rgb(var(--sec)); margin-top:8px; min-height:36px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.mcat-prices{ display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:13px 16px 4px;
    margin-top:12px; border-top:1px solid rgb(var(--edge)); }
.mcat-prices .mcat-k{ font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:rgb(var(--ter)); font-weight:700; }
.mcat-prices .mcat-v{ font-size:17px; font-weight:750; letter-spacing:-.01em; margin-top:3px;
    font-variant-numeric:tabular-nums; color:rgb(var(--pri)); }
.mcat-prices .mcat-v.out{ color:rgb(var(--accent)); }
.mcat-meta{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 16px 12px; }
.mcat-tier{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; color:rgb(var(--sec)); }
.mcat-tier i{ width:6px; height:6px; border-radius:50%; flex:none; }
.t-tier1 .mcat-tier i{ background:rgb(var(--ok)); }
.t-tier2 .mcat-tier i{ background:rgb(var(--accent)); }
.t-tier3 .mcat-tier i{ background:rgb(var(--warn)); }
.t-tier4 .mcat-tier i{ background:rgb(168 85 247); }
.t-img .mcat-tier i{ background:rgb(var(--ter)); }
.mcat-per{ font-size:11px; color:rgb(var(--ter)); font-variant-numeric:tabular-nums; }
.mcat-foot{ margin-top:auto; padding:11px 16px 13px; border-top:1px solid rgb(var(--edge));
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    background:rgb(var(--inset) / .4); }
.mcat-status{ display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600; color:rgb(var(--sec)); }
.mcat-status i{ width:7px; height:7px; border-radius:50%; flex:none; background:rgb(var(--ter)); }
.mcat-status.s-ok{ color:rgb(var(--ok)); }
.mcat-status.s-ok i{ background:rgb(var(--ok)); box-shadow:0 0 0 3px rgb(var(--ok) / .15); }
.mcat-status.s-warn{ color:rgb(var(--warn)); }
.mcat-status.s-warn i{ background:rgb(var(--warn)); box-shadow:0 0 0 3px rgb(var(--warn) / .15); }
.mcat-status.s-bad{ color:rgb(var(--bad)); }
.mcat-status.s-bad i{ background:rgb(var(--bad)); box-shadow:0 0 0 3px rgb(var(--bad) / .15); }
.mcat-up{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.mcat-up .pct{ font-size:12px; font-weight:600; color:rgb(var(--sec)); font-variant-numeric:tabular-nums; }
.mcat-bars{ display:flex; gap:2px; align-items:flex-end; }
.mcat-bars i{ width:3px; height:12px; border-radius:2px; opacity:.9; }

/* Compare toggle: hidden until hover on precise pointers to declutter the corner. */
.mcat-pick{ position:absolute; top:12px; right:12px; z-index:2; width:28px; height:28px;
    display:inline-flex; align-items:center; justify-content:center; border:1px solid rgb(var(--edge));
    border-radius:9px; background:rgb(var(--surface)); cursor:pointer; color:rgb(var(--ter));
    transition:background .15s, color .15s, border-color .15s, opacity .15s, transform .1s; }
.mcat-pick:hover{ color:rgb(var(--pri)); border-color:rgb(var(--edge2)); }
.mcat-pick:active{ transform:scale(.92); }
.mcat-pick:focus-visible{ outline:2px solid rgb(var(--accent)); outline-offset:2px; opacity:1 !important; }
.mcat-pick[aria-checked="true"]{ background:rgb(var(--accent)); border-color:rgb(var(--accent)); color:#fff; opacity:1 !important; }
.mcat-pick svg{ width:14px; height:14px; }
.mcat-pick .ic-on{ display:none; }
.mcat-pick[aria-checked="true"] .ic-off{ display:none; }
.mcat-pick[aria-checked="true"] .ic-on{ display:block; }
@media (hover:hover) and (pointer:fine){
    .mcat-card .mcat-pick{ opacity:0; }
    .mcat-card:hover .mcat-pick, .mcat-card:focus-within .mcat-pick{ opacity:1; }
}

/* Icon buttons + clipboard confirmation (no "Copied" text: it did not fit). */
.mcat-ibtn{ display:inline-flex; align-items:center; justify-content:center; background:transparent;
    border:1px solid rgb(var(--edge)); border-radius:7px; padding:5px; color:rgb(var(--sec)); cursor:pointer; }
.mcat-ibtn:hover{ background:rgb(var(--inset)); color:rgb(var(--pri)); }
.mcat-ibtn:focus-visible{ outline:2px solid rgb(var(--accent)); outline-offset:1px; }
.mcat-ibtn svg{ width:15px; height:15px; }
.mcat-ibtn .ic-ok{ display:none; }
.mcat-ibtn.copied{ color:rgb(var(--ok)); border-color:rgb(var(--ok) / .45); background:rgb(var(--ok) / .1); }
.mcat-ibtn.copied .ic-copy{ display:none; }
.mcat-ibtn.copied .ic-ok{ display:block; }
.mcat-copyable{ cursor:pointer; border-radius:6px; padding:1px 5px; margin:0 -5px;
    transition:background .15s, color .15s; }
.mcat-copyable:hover{ background:rgb(var(--inset)); color:rgb(var(--accent)); }
.mcat-copyable:focus-visible{ outline:2px solid rgb(var(--accent)); outline-offset:1px; }
.mcat-copyable.copied{ color:rgb(var(--ok)); background:rgb(var(--ok) / .1); }

.mcat-table{ overflow-x:auto; border-radius:16px; }
.mcat-table table{ width:100%; min-width:820px; border-collapse:collapse; font-size:13px; }
.mcat-table th{ text-align:left; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
    color:rgb(var(--ter)); font-weight:700; padding:10px 12px; border-bottom:1px solid rgb(var(--edge)); white-space:nowrap; }
.mcat-table td{ padding:12px; border-bottom:1px solid rgb(var(--edge)); vertical-align:middle; }
.mcat-table tbody tr{ transition:background .1s; }
.mcat-table tbody tr:hover{ background:rgb(var(--accent) / .04); }
.mcat-table tbody tr:last-child td{ border-bottom:0; }
.mcat-num{ font-variant-numeric:tabular-nums; font-weight:600; }

/* Comparison tray. Capped number of chips so it cannot grow with the
   selection and develop its own scrollbar. */
.mcat-tray{ position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:40;
    display:flex; align-items:center; gap:8px; padding:9px 12px; border:1px solid rgb(var(--edge2));
    border-radius:12px; background:rgb(var(--surface)); box-shadow:0 12px 40px rgb(0 0 0 / .35);
    max-width:calc(100vw - 24px); overflow:hidden; }
.mcat-tray > .kicker,.mcat-tray > .btn{ flex:none; }
.mcat-tray .chip{ display:inline-flex; align-items:center; gap:5px; font-size:12px; padding:3px 4px 3px 7px;
    border-radius:7px; background:rgb(var(--inset)); border:1px solid rgb(var(--edge)); flex:none; max-width:132px; }
.mcat-tray .chip .trunc{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mcat-tray .chip .mcat-ibtn{ padding:2px; width:18px; height:18px; }
.mcat-tray .chip .mcat-ibtn svg{ width:11px; height:11px; }
.mcat-tray .chip.more{ padding:3px 8px; color:rgb(var(--sec)); font-variant-numeric:tabular-nums; }

.mcat-sheet{ position:fixed; inset:0; z-index:50; background:rgb(0 0 0 / .55);
    display:flex; align-items:center; justify-content:center; padding:20px; }
.mcat-sheet .card{ max-width:960px; width:100%; max-height:86vh; display:flex; flex-direction:column; }
.mcat-sheet .sheetbody{ padding:0 18px 18px; overflow:auto; }
.mcat-sheet table{ width:100%; border-collapse:collapse; font-size:13px; }
.mcat-sheet th{ text-align:left; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
    color:rgb(var(--ter)); font-weight:700; padding:10px 12px; border-bottom:1px solid rgb(var(--edge)); }
.mcat-sheet td{ padding:11px 12px; border-bottom:1px solid rgb(var(--edge)); }
.mcat-sheet tbody tr:last-child td{ border-bottom:0; }
.mcat-sheet tr.best td{ color:rgb(var(--ok)); font-weight:700; }

/* Specificity must beat the element's own display:flex, otherwise the
   .hidden utility loses the cascade order and the dialog never closes. */
.mcat-sheet.hidden,.mcat-tray.hidden{ display:none !important; }

/* Same reason, for the card grid: .hidden{display:none} is declared BEFORE
   .grid{display:grid} in the prebuilt app.css, so a container carrying both
   classes stayed visible and the table view could never take over. */
.mcat-grid.hidden{ display:none !important; }

/* And for the cards themselves: .mcat-card{display:flex} beats the generic
   .hidden utility on equal specificity (this file loads later), so filtered
   cards stayed visible and grid filtering looked broken. */
.mcat-card.hidden{ display:none !important; }