/* AIpediya interface v6 ("Neural Atlas"): approved prototype prototypes/redesign-2026 @ 4570186,
   integrated into the Django templates. Loaded after site.css, accounts.css and rating.css.
   Dark first: deep space navy with mint/turquoise light. No inline styles (CSP). */

:root {
  --bg: #03060b; --bg-2: #070c14; --bg-top: #03060b;
  --panel: rgba(9, 15, 24, .965); --panel-solid: #0a1019; --panel-2: #0d1520;
  --surface: #0b1320; --surface-2: #101a29; --surface-3: #162334;
  --line: rgba(84, 170, 200, .14); --line-soft: rgba(84, 170, 200, .09); --line-strong: rgba(84, 190, 215, .28);
  --glow-line: rgba(62, 224, 200, .35);
  --fg: #e6f0f5; --fg-2: #a9bccb; --muted: #6f8597;
  --text: var(--fg); --text-soft: var(--fg-2);
  --accent: #3ee0c8; --accent-2: #2fb5f5; --accent-ink: #022620;
  --accent-soft: rgba(62, 224, 200, .1); --accent-glow: rgba(62, 224, 200, .35);
  --mint: var(--accent); --mint-text: var(--accent); --mint-line: rgba(62, 224, 200, .5);
  --mint-dim: var(--accent-soft); --mint-glow: rgba(62, 224, 200, .18); --on-mint: var(--accent-ink);
  --link: #4fd8ef;
  --warn: #d4b36a; --good: #4fe3a2; --bad: #d47668; --archive: #8796a3;
  --m-text: #7cc8ff; --m-image: #b8a2ff; --m-audio: #f5c36a; --m-video: #ff9ccb; --m-files: #8fe3c0;
  --m-embedding: #7fa8ff; --m-actions: #ffb083; --m-other: #9fb3c2;
  --shadow: 0 24px 60px -24px rgba(0, 0, 0, .8);
  --scrim: rgba(2, 5, 9, .6); --glass: rgba(4, 8, 14, .8);
  --font-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, Menlo, monospace;
  --r: 12px; --rl: 62%; --rs: 56%;
  --top-h: 54px;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #eef3f6; --bg-2: #e4ecf1; --bg-top: #eef3f6;
  --panel: rgba(255, 255, 255, .975); --panel-solid: #ffffff; --panel-2: #f6f9fb;
  --surface: #ffffff; --surface-2: #f3f7fa; --surface-3: #e7eef3;
  --line: rgba(20, 70, 95, .12); --line-soft: rgba(20, 70, 95, .08); --line-strong: rgba(20, 70, 95, .22);
  --glow-line: rgba(0, 150, 130, .3);
  --fg: #0a1a24; --fg-2: #344a58; --muted: #5d7181;
  --accent: #009c86; --accent-2: #0a83c2; --accent-ink: #ffffff;
  --accent-soft: rgba(0, 156, 134, .09); --accent-glow: rgba(0, 156, 134, .22);
  --mint-line: rgba(0, 156, 134, .45); --mint-glow: rgba(0, 156, 134, .14); --link: #0a6f9c;
  --warn: #a86400; --good: #12865a; --bad: #c8422c; --archive: #6a7a82;
  --m-text: #1f6fb2; --m-image: #6a4fd1; --m-audio: #a26a00; --m-video: #b8357a; --m-files: #1d8a63;
  --m-embedding: #3a5fc4; --m-actions: #b65a22; --m-other: #556b7b;
  --shadow: 0 24px 60px -26px rgba(10, 40, 60, .3); --scrim: rgba(10, 25, 35, .3); --glass: rgba(238, 243, 246, .82);
  --rl: 36%; --rs: 75%;
  color-scheme: light;
}

/* Space background: reveal the WebGL canvas quickly once it is ready so navigating between pages
   continues the scene rather than slowly fading it back in (the #space-bg only exists here). */
.space-bg .space-bg__canvas { transition-duration: .4s; }
/* The previous page's last frame, shown over the poster until the live canvas is ready (space-sky.js). */
.space-bg .space-bg__frame { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

body {
  background:
    radial-gradient(1200px 520px at 78% -8%, color-mix(in oklab, var(--accent-2) 12%, transparent), transparent 70%),
    radial-gradient(900px 600px at 0% 100%, color-mix(in oklab, var(--accent) 6%, transparent), transparent 70%),
    var(--bg);
  background-attachment: fixed;
  color: var(--fg);
}
:root[data-theme="light"] body { background: var(--bg); }
body::before { content: none; }
a { color: var(--link); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
svg.i { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
svg.flag, .flag { width: 17px; height: 11px; border-radius: 2px; overflow: hidden; display: block; flex: none; box-shadow: 0 0 0 1px var(--line); }
[dir="rtl"] svg.i.flip-rtl, svg.i.flip { transform: scaleX(-1); }
[dir="rtl"] svg.i.flip { transform: none; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.hint { font-size: 11px; color: var(--muted); line-height: 1.45; margin: 6px 0 0; }
.dim { color: var(--muted); font-size: 11px; }
/* Live space background (static/space-background/, PR #45): above the body colour, below the shell. */
.atlas-page .space-bg { z-index: 0; }

/* ---------------------------------------------------------------- top bar */
.topbar.site-header {
  display: block; position: relative; z-index: 40; padding: 0;
  background: var(--glass); -webkit-
  border-bottom: 1px solid var(--line);
}
.tb-row { display: flex; align-items: center; gap: 10px; height: var(--top-h); max-width: 1680px; margin: 0 auto;
  padding-inline: max(14px, env(safe-area-inset-left, 0px)) max(14px, env(safe-area-inset-right, 0px)); }
.tb-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; flex: none; color: var(--fg); }
.tb-brand:hover { text-decoration: none; }
.tb-brand img { width: 28px; height: 28px; filter: drop-shadow(0 0 10px var(--accent-glow)); }
.tb-brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.tb-brand-text b { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.tb-brand-text b span { color: var(--accent); font-weight: 500; }
.tb-brand-text small { font-size: 10.5px; color: var(--muted); margin-top: 3px; white-space: nowrap; }
.tb-seg { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); flex: none; }
.tb-seg .type-tab { border: 0; height: auto; background: transparent; padding: 4px 10px; border-radius: 7px; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; justify-content: center; white-space: nowrap; font-weight: 500; font-size: 12.5px; text-decoration: none; box-shadow: none; }
.tb-seg .type-tab:hover { color: var(--fg); text-decoration: none; }
.tb-seg .type-tab.is-active { background: var(--surface-3); color: var(--fg); box-shadow: inset 0 0 0 1px var(--line-strong); }
.tb-seg .cnt, .tb-seg .type-tab > span { font: 500 10.5px var(--font-mono); color: var(--muted); background: none; padding: 0; }
.tb-seg .type-tab.is-active > span { color: var(--accent); }
.tb-search { position: relative; flex: 1; min-width: 0; max-width: 500px; margin: 0; }
.tb-search input { width: 100%; height: 34px; min-height: 34px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); padding-inline: 34px 36px; outline: none; font-size: 12.5px; color: var(--fg); transition: border-color .2s, box-shadow .2s; }
.tb-search input::placeholder { color: var(--muted); }
.tb-search input:focus { border-color: color-mix(in oklab, var(--accent) 60%, transparent); box-shadow: 0 0 0 3px var(--accent-soft); }
.tb-search > svg.i { position: absolute; inset-inline-start: 11px; top: 10px; color: var(--accent); width: 14px; height: 14px; }
.tb-search .search-kbd { position: absolute; inset-inline-end: 8px; top: 7px; font: 500 10.5px var(--font-mono); border: 1px solid var(--line-strong); border-radius: 5px; padding: 1px 6px; color: var(--muted); background: none; height: auto; }
.tb-end.header-controls { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; flex-wrap: nowrap; }
.tb-end .env-nav { height: 30px; }
.tb-ctl, .lang-menu > summary.tb-ctl { height: 34px; min-height: 34px; display: inline-flex; align-items: center; gap: 6px; padding-inline: 9px 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); cursor: pointer; list-style: none; }
.lang-menu > summary.tb-ctl::-webkit-details-marker { display: none; }
.tb-ctl:hover, .lang-menu[open] > summary.tb-ctl { border-color: var(--line-strong); }
.tb-ctl .code { font: 500 11.5px var(--font-mono); text-transform: uppercase; max-width: none; }
.tb-ctl .chev { width: 11px; height: 11px; color: var(--muted); }
.globe { width: 17px; height: 17px; color: var(--muted); }
.languages { position: relative; }
.languages .lang-popover { position: absolute; top: 40px; inset-inline-end: 0; inset-inline-start: auto; width: 250px; max-height: min(440px, 70vh); overflow-y: auto; z-index: 70; background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: 12px; padding: 5px; box-shadow: var(--shadow); }
.languages .lang-popover ul { list-style: none; margin: 0; padding: 0; display: block; columns: auto; }
.languages .lang-popover a { width: 100%; display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 8px; text-align: start; font-size: 12.5px; color: var(--fg-2); text-decoration: none; }
.languages .lang-popover a:hover, .languages .lang-popover a:focus-visible { background: var(--surface-3); color: var(--fg); text-decoration: none; }
.languages .lang-popover a[aria-current] { color: var(--fg); background: var(--accent-soft); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 40%, transparent); }
.languages .lang-popover .code { margin-inline-start: auto; font: 400 10.5px var(--font-mono); color: var(--muted); text-transform: uppercase; }
.theme-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 2px; gap: 2px; }
.theme-seg button { width: 29px; height: 28px; min-height: 28px; padding: 0; border: 0; background: none; border-radius: 8px; display: grid; place-items: center; color: var(--muted); }
.theme-seg button[aria-pressed="true"] { background: var(--surface-3); color: var(--accent); box-shadow: inset 0 0 0 1px var(--line-strong); }
#account-control .account-login { height: 34px; min-height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid color-mix(in oklab, var(--accent) 60%, transparent); background: linear-gradient(180deg, var(--accent-soft), transparent), var(--surface); color: var(--accent); display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 12.5px; white-space: nowrap; box-shadow: 0 0 20px -10px var(--accent-glow); text-decoration: none; }
#account-control .account-login:hover { box-shadow: 0 0 24px -6px var(--accent-glow); }
#account-control .account-menu > summary { height: 34px; min-height: 34px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); padding-inline: 3px 10px; }
.lang-offer { font-size: 12px; white-space: nowrap; }

/* Clock: the visitor's local time; its popover lists the latest real catalog update. */
.topbar .catalog-freshness-shell { position: relative; flex: none; }
.topbar .catalog-freshness { display: inline-flex; align-items: center; gap: 6px; height: 34px; min-height: 34px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--line); background: color-mix(in oklab, var(--surface) 80%, transparent); color: var(--fg-2); font: 500 11.5px var(--font-mono); white-space: nowrap; max-width: none; }
.topbar .catalog-freshness:hover, .topbar .catalog-freshness-shell.is-open .catalog-freshness { border-color: var(--line-strong); color: var(--fg); }
.topbar .catalog-freshness .freshness-date, .topbar .catalog-freshness .freshness-time { font: inherit; color: inherit; }
.topbar .catalog-freshness .freshness-age { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.clock-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--good); box-shadow: 0 0 8px var(--good); animation: atlas-pulse 2.6s infinite; flex: none; }
.catalog-freshness.is-amber .clock-dot { background: var(--warn); box-shadow: 0 0 8px var(--warn); }
@keyframes atlas-pulse { 50% { opacity: .35; } }
.topbar .catalog-freshness-popover { top: calc(100% + 6px); inset-inline-end: 0; inset-inline-start: auto; background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: var(--shadow); z-index: 70; }

/* ---------------------------------------------------------------- shell */
body.atlas-page { display: block; min-height: 100vh; }
.atlas-shell { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 100vh; }
.atlas-ws { position: relative; display: flex; gap: 10px; width: 100%; max-width: 1680px; margin: 0 auto; padding: 12px max(14px, env(safe-area-inset-right, 0px)) 0 max(14px, env(safe-area-inset-left, 0px)); min-height: 0; }

@media (min-width: 821px) {
  body.atlas-page { height: 100%; }
  body.atlas-page { overflow: hidden; }
  .atlas-shell { height: 100vh; height: 100dvh; min-height: 0; }
  .atlas-ws { flex: 1; }
}
.side { flex: none; width: 0; min-width: 0; overflow: hidden; height: 100%;  }
.side.left { --w: 268px; margin-inline-end: -10px; }
.pane, .side > .panel-inner { width: var(--w); height: 100%; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: 0 0 0 1px rgba(0, 0, 0, .2), 0 0 30px -18px var(--accent-glow); }
@media (min-width: 1200px) {
  body.filters-auto:not(.filters-off) .side.left, body.filters-on .side.left { width: var(--w); margin-inline-end: 0; }
}
#model-panel.side.right { --w: 420px; display: block; margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none; padding: 0; position: static; }
#model-panel.side.right[hidden] { display: none; }
#model-panel.side.right.is-open { width: var(--w); }
#model-panel .panel-error { padding: 16px; color: var(--muted); }
#model-panel[aria-busy="true"] .panel-inner { opacity: .55; transition: opacity .2s; }
.atlas-main { position: relative; flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; container: cat / inline-size; box-shadow: 0 0 0 1px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(120, 220, 230, .05); }
.atlas-main::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, var(--glow-line), transparent); pointer-events: none; z-index: 6; }
.atlas-main > .hub-header { padding: 10px 12px 4px; }
.atlas-main > .hub-header h1 { font-size: 17px; }

/* Catalog toolbar: filters, quick categories, sort, subscribe */
.toolbar.catalog-toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin: 0; border-bottom: 1px solid var(--line); flex-wrap: nowrap; }
.fbtn { position: relative; width: 32px; height: 32px; min-height: 32px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); color: var(--fg-2); display: grid; place-items: center; flex: none; padding: 0; transition: color .2s, border-color .2s, box-shadow .2s; }
.fbtn:hover, .fbtn[aria-expanded="true"] { color: var(--accent); border-color: color-mix(in oklab, var(--accent) 50%, transparent); box-shadow: 0 0 16px -6px var(--accent-glow); }
.fbtn .badge { position: absolute; top: -5px; inset-inline-end: -5px; min-width: 16px; height: 16px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); font: 600 9.5px/16px var(--font-mono); padding: 0 4px; text-align: center; }
.cats { display: flex; gap: 4px; min-width: 0; flex: 1; overflow-x: auto; scrollbar-width: none; }
.cats::-webkit-scrollbar { display: none; }
.cat { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--fg-2); font-weight: 500; font-size: 12px; white-space: nowrap; text-decoration: none; transition: color .15s, background .15s, border-color .15s; }
.cat svg.i { width: 13px; height: 13px; color: var(--muted); }
.cat .n { font: 500 10.5px var(--font-mono); color: var(--muted); }
.cat:hover { color: var(--fg); background: var(--surface-2); text-decoration: none; }
.cat[aria-current="true"] { color: var(--fg); border-color: color-mix(in oklab, var(--accent) 55%, transparent); background: linear-gradient(180deg, var(--accent-soft), transparent); box-shadow: 0 0 18px -8px var(--accent-glow); }
.cat[aria-current="true"] svg.i, .cat[aria-current="true"] .n { color: var(--accent); }
.cat[data-empty="true"] { opacity: .45; }
.tb-right { display: flex; align-items: center; gap: 6px; flex: none; margin: 0; }
.sel-wrap { position: relative; display: inline-flex; align-items: center; height: 32px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); padding-inline: 10px 26px; font-size: 12px; color: var(--muted); gap: 6px; }
.sel-wrap select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: var(--fg); font-weight: 500; font-size: 12px; outline: none; cursor: pointer; padding: 0; min-height: 0; height: 30px; max-width: 200px; }
.sel-wrap select option { background: var(--surface-2); color: var(--fg); }
.sel-wrap svg.i { position: absolute; inset-inline-end: 8px; width: 12px; height: 12px; pointer-events: none; }
.icon-btn { width: 32px; height: 32px; min-height: 32px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); display: inline-grid; place-items: center; color: var(--fg-2); flex: none; padding: 0; text-decoration: none; }
.icon-btn:hover { border-color: var(--line-strong); color: var(--fg); text-decoration: none; }
.icon-btn[aria-pressed="true"] { color: var(--accent); border-color: color-mix(in oklab, var(--accent) 50%, transparent); background: var(--accent-soft); }
.chiprow { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; padding: 6px 10px; margin: 0; border-bottom: 1px solid var(--line); list-style: none; }
.chiprow li { display: contents; }
.af { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding-inline: 8px 5px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-size: 11px; color: var(--fg-2); text-decoration: none; }
.af:hover { color: var(--fg); border-color: var(--line-strong); text-decoration: none; }
.af svg.i { width: 11px; height: 11px; color: var(--muted); }
.linkish { border: 0; background: none; color: var(--accent); font-size: 11.5px; padding: 3px 5px; min-height: 0; cursor: pointer; text-decoration: none; }
.comparison-basis { margin: 0; padding: 6px 10px; font-size: 11.5px; color: var(--muted); border-bottom: 1px solid var(--line); }
.atlas-main .commercial-placement { margin: 8px 10px; }
.atlas-main .catalog-card { display: flex; flex-direction: column; flex: 1; min-height: 0; min-width: 0; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: hidden; }
.scroller.table-scroll { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; position: relative; }
.scroller::-webkit-scrollbar { width: 9px; height: 9px; }
.scroller::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 9px; border: 2px solid transparent; background-clip: padding-box; }
.foot-line.pagination { display: flex; align-items: center; gap: 10px; padding: 5px 10px; margin: 0; border-top: 1px solid var(--line); font-size: 11px; color: var(--muted); background: color-mix(in oklab, var(--bg-2) 80%, transparent); min-height: 0; }
.foot-line .bar { width: 120px; height: 2px; border-radius: 2px; background: var(--surface-3); overflow: hidden; flex: none; }
.foot-line .bar i { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left center; background: linear-gradient(90deg, var(--accent-2), var(--accent)); transition: transform .15s linear; will-change: transform; }
[dir="rtl"] .foot-line .bar i { transform-origin: right center; }
.foot-line .count-note { margin-inline-start: auto; font-size: 10.5px; }
.foot-line .page-numbers { display: flex; gap: 4px; }
.foot-line .page-numbers .icon-btn { width: 24px; height: 24px; min-height: 24px; }
.infinite-scroll { text-align: center; padding: 6px; }
.infinite-scroll:empty { padding: 0; }

/* ---------------------------------------------------------------- table */
table.cat-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 12px; }
.cat-table thead { position: sticky; top: 0; z-index: 4; }
.cat-table thead th { position: static; height: auto; background: var(--bg-2); text-align: start; font: 500 10px/1.2 inherit; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 9px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.cat-table thead th a[data-sort] { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.cat-table thead th a[data-sort]:hover { color: var(--fg); }
.cat-table thead th[aria-sort="ascending"] a[data-sort], .cat-table thead th[aria-sort="descending"] a[data-sort] { color: var(--accent); }
.cat-table th .arr { font-size: 8px; }
.cat-table th.num, .cat-table td.c-num { text-align: end; }
.cat-table .th-rating { display: inline-flex; align-items: center; gap: 4px; }
.cat-table .rating-header-info { min-height: 0; height: 16px; width: 16px; padding: 0; border: 0; background: none; color: var(--muted); font-size: 11px; line-height: 1; }
.cat-table tbody th, .cat-table tbody td { padding: 10px 9px; border-bottom: 1px solid color-mix(in oklab, var(--line) 70%, transparent); vertical-align: middle; font-size: 12px; line-height: 1.35; color: var(--fg-2); min-width: 0; height: auto; max-height: none; overflow: hidden; text-align: start; font-weight: 400; text-transform: none; letter-spacing: 0; white-space: normal; background: transparent; }
.cat-table tbody tr:last-child > * { border-bottom: 0; }
.cat-table tr.row { cursor: pointer; transition: background .15s; }
.cat-table tr.row > :first-child { box-shadow: inset 2px 0 0 transparent; }
.cat-table tbody tr.row:hover > * { background: var(--surface-2); }
.cat-table tbody tr.row:hover > :first-child, .cat-table tbody tr.row.is-selected > :first-child { box-shadow: inset 2px 0 0 var(--accent); }
[dir="rtl"] .cat-table tbody tr.row:hover > :first-child, [dir="rtl"] .cat-table tbody tr.row.is-selected > :first-child { box-shadow: inset -2px 0 0 var(--accent); }
.cat-table tbody tr.row.is-selected > * { background: linear-gradient(90deg, var(--accent-soft), transparent 70%); }
.cat-table tbody tr.rec-dup { display: none; }
/* Recommended first row: it scrolls with the list; same background as the other rows,
   a thin translucent turquoise frame and the "Recommended" label only. */
.cat-table tbody tr.rec > * { border-top: 1px solid color-mix(in oklab, var(--accent) 34%, transparent); border-bottom: 1px solid color-mix(in oklab, var(--accent) 34%, transparent); }
.cat-table tbody tr.rec > :first-child { border-inline-start: 1px solid color-mix(in oklab, var(--accent) 34%, transparent); box-shadow: inset 2px 0 0 color-mix(in oklab, var(--accent) 70%, transparent); border-start-start-radius: 8px; border-end-start-radius: 8px; }
[dir="rtl"] .cat-table tbody tr.rec > :first-child { box-shadow: inset -2px 0 0 color-mix(in oklab, var(--accent) 70%, transparent); }
.cat-table tbody tr.rec > :last-child { border-inline-end: 1px solid color-mix(in oklab, var(--accent) 34%, transparent); border-start-end-radius: 8px; border-end-end-radius: 8px; }
.rec-badge { display: block; margin-top: 2px; font-size: 10.5px; line-height: 1.2; color: var(--accent); white-space: nowrap; }
.cat-table .empty { text-align: center; padding: 40px 20px; color: var(--muted); white-space: normal; }
.cat-table .empty b { display: block; color: var(--fg); font-size: 15px; font-weight: 500; margin-bottom: 6px; }

/* Entity: mark and name only; NEW is a small superscript that never widens the row. */
a.model-name.ent { display: flex; align-items: center; gap: 9px; min-width: 0; color: inherit; text-decoration: none; }
a.model-name.ent:hover { text-decoration: none; }
.ent-copy { min-width: 0; flex: 1; display: block; }
.ent-name { color: var(--fg); font-weight: 600; font-size: 12.5px; line-height: 1.3; display: flex; align-items: flex-start; min-width: 0; }
.ent-name .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.model-name.ent:hover .nm { color: var(--accent); }
.new-tag, sup.new-tag.catalog-update-badge { flex: none; margin: -4px 0 0 3px; font: 600 7.5px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); border: 1px solid color-mix(in oklab, var(--accent) 50%, transparent); border-radius: 3px; padding: 1.5px 2.5px; background: none; height: auto; vertical-align: super; }
[dir="rtl"] .new-tag { margin: -4px 3px 0 0; }
/* Official logos sit directly on the row, larger, with their own proportions; only
   records without a logo keep a quiet initials disc. */
.cat-table .model-mark { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; background: var(--surface-3); border: 1px solid var(--line); display: grid; place-items: center; overflow: visible; font-size: 11px; color: var(--fg-2); }
.cat-table .model-mark.has-logo { background: none; border: 0; border-radius: 0; box-shadow: none; }
.cat-table .model-mark.has-logo svg, .cat-table .model-mark.has-logo img { width: 28px; height: 28px; max-width: 28px; object-fit: contain; display: block; }

/* Release with status dot; the word is in the tooltip. */
.relc { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; }
.rel { white-space: nowrap; color: var(--fg); font-variant-numeric: tabular-nums; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; }
.rel.approx { color: var(--fg-2); }
.sdot { display: inline-grid; place-items: center; width: 12px; height: 14px; flex: none; cursor: help; outline-offset: 1px; }
.sdot i { width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 6px color-mix(in oklab, var(--good) 70%, transparent); }
.sdot.archive i { background: var(--bad); box-shadow: 0 0 6px color-mix(in oklab, var(--bad) 60%, transparent); }
.sdot.deprecated i { background: var(--warn); box-shadow: none; }
.sdot.unknown i { background: transparent; border: 1px dashed var(--muted); box-shadow: none; }
.st-pill { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: 999px; border: 1px solid color-mix(in oklab, var(--good) 45%, transparent); background: color-mix(in oklab, var(--good) 10%, transparent); font-size: 11px; color: var(--good); white-space: nowrap; }
.st-pill.archive { color: var(--archive); border-color: var(--line-strong); background: transparent; }
.st-pill.deprecated { color: var(--warn); border-color: color-mix(in oklab, var(--warn) 45%, transparent); background: color-mix(in oklab, var(--warn) 10%, transparent); }
.st-pill.unknown { color: var(--muted); border-style: dashed; border-color: var(--line-strong); background: none; }

/* Developer with every confirmed country flag; unknown origin is a neutral dashed mark. */
.dev.developer-with-country { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--fg-2); font-size: 11.5px; flex-wrap: nowrap; }
.dev .dev-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.dev .flags { display: inline-flex; gap: 3px; flex: none; flex-wrap: wrap; max-width: 60%; }
.dev .country-badge { display: inline-flex; }
.dev .country-flag { width: 17px; height: 11px; border-radius: 2px; box-shadow: 0 0 0 1px var(--line); }
.unknown-origin { width: 17px; height: 11px; border-radius: 2px; border: 1px dashed var(--line-strong); display: inline-block; flex: none; padding: 0; font-size: 0; background: none; }

/* Type: plain label, then quiet in -> out icons */
.tyc { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ty { color: var(--fg); font-size: 11.5px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flowi { display: inline-flex; align-items: center; gap: 3px; color: var(--muted); flex-wrap: wrap; }
.flowi .m { width: 12px; height: 12px; display: grid; place-items: center; color: var(--muted); }
.flowi .m svg.i { width: 11px; height: 11px; }
.flowi .to { font-size: 10px; color: var(--muted); padding: 0 1px; opacity: .7; }
[dir="rtl"] .flowi .to { transform: scaleX(-1); }
.m-text { --mc: var(--m-text); } .m-image { --mc: var(--m-image); } .m-audio { --mc: var(--m-audio); } .m-video { --mc: var(--m-video); }
.m-files { --mc: var(--m-files); } .m-embedding { --mc: var(--m-embedding); } .m-actions { --mc: var(--m-actions); } .m-other { --mc: var(--m-other); }
tr.row:hover .flowi .m { color: var(--mc); }
/* Access: plain words with a small icon */
.accs { display: flex; flex-wrap: wrap; gap: 3px 10px; min-width: 0; }
.acc-c { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; line-height: 1.3; color: var(--fg-2); white-space: nowrap; }
.acc-c svg.i { width: 11px; height: 11px; color: var(--muted); }
.acc-c[data-k="api"] svg.i { color: var(--accent); }
/* Capabilities: every task as text, tighter when there are many */
.caps { margin: 0; font-size: 11.5px; line-height: 1.38; color: var(--fg-2); overflow-wrap: anywhere; }
.caps.sm { font-size: 11px; line-height: 1.33; }
.caps.xs { font-size: 10.5px; line-height: 1.3; letter-spacing: -.005em; }
.plain { color: var(--fg-2); font-size: 11.5px; }
/* Price: label, amount, unit */
.price { display: grid; grid-template-columns: auto auto minmax(0, 1fr); column-gap: 5px; row-gap: 2px; align-items: baseline; font-size: 11px; }
.price .k { color: var(--muted); font-size: 10.5px; }
.price .v { font: 600 11.5px var(--font-mono); color: var(--fg); white-space: nowrap; }
.price .u { color: var(--fg-2); font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.price .v.free { color: var(--good); font-family: inherit; font-weight: 500; }
.price .na { grid-column: 2 / 4; color: var(--muted); font-size: 10.5px; font-style: italic; }
.price.one { display: block; }
.price.one .u { white-space: normal; }
.price .note { color: var(--muted); font-size: 11px; line-height: 1.3; }
.free-tier-note { display: block; font-size: 10.5px; color: var(--good); margin-bottom: 2px; }
@container cat (max-width: 1260px) { .price .u .lg { display: none; } }
@container cat (min-width: 1261px) { .price .u .sh { display: none; } }
.ctx { font: 500 11.5px var(--font-mono); color: var(--fg); white-space: nowrap; font-variant-numeric: tabular-nums; }
.numcell { font: 400 11px var(--font-mono); color: var(--muted); white-space: nowrap; }
.cat-table .check-badge { font-size: 11px; }

/* Rating: one fixed coral -> amber -> mint scale over the published min..max (classes rh-0..rh-20). */
.rating { --tc: hsl(var(--rh, 44) var(--rs) var(--rl)); display: flex; align-items: center; gap: 6px; color: var(--tc); min-width: 0; font-size: inherit; }
.rating .bar { position: relative; flex: 1; max-width: 42px; min-width: 12px; height: 4px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.rating .bar i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--tc); box-shadow: 0 0 8px var(--tc); }
[dir="rtl"] .rating .bar i { inset: 0 0 0 auto; }
.rating .rating-value-wrap { display: inline-flex; }
.rating .rating-trigger.rating-score { min-height: 0; height: auto; padding: 0; border: 0; background: none; color: var(--tc); font: 600 12px var(--font-mono); white-space: nowrap; }
.rating .rating-annotation { color: var(--muted); font-size: 9px; vertical-align: super; }

/* In-feed ad rows keep a reserved height so loading never shifts the list. */
tr.ad-row > td { padding: 3px 8px; background: color-mix(in oklab, var(--bg-2) 70%, transparent); cursor: default; }
.ad-slot.infeed { min-height: 50px; height: 50px; padding-block: 0; margin: 0; border-top: 1px solid var(--line); }
.ad-wrap { width: 100%; max-width: 1680px; margin: 0 auto; padding: 8px max(14px, env(safe-area-inset-right, 0px)) 0 max(14px, env(safe-area-inset-left, 0px)); flex: none; }
.ad-slot { position: relative; min-height: 60px; border-radius: 10px; border: 1px solid var(--line); background: repeating-linear-gradient(135deg, transparent 0 10px, color-mix(in oklab, var(--line) 35%, transparent) 10px 11px), color-mix(in oklab, var(--surface) 70%, transparent); display: flex; align-items: center; justify-content: center; gap: 4px 12px; padding: 6px 14px; color: var(--muted); font-size: 11.5px; flex-wrap: wrap; text-align: center; margin: 0; }
.ad-slot > span { display: inline; margin: 0; font-size: inherit; }
.ad-label { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 5px; border: 1px solid var(--line-strong); color: var(--muted); font: 600 9.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.ad-slot b { color: var(--fg-2); font-weight: 500; }
.ad-slot .dims { font: 500 10.5px var(--font-mono); }
.atlas-shell > .site-footer { width: 100%; max-width: 1680px; margin: 0 auto; border-top: 0; padding: 8px max(14px, env(safe-area-inset-right, 0px)) 8px max(14px, env(safe-area-inset-left, 0px)); font-size: 11.5px; min-height: 0; flex: none; }
.atlas-shell > .commercial-ad-preview, .atlas-shell > aside.ad-slot { max-width: 1680px; margin: 8px auto 0; width: calc(100% - 28px); }

/* ---------------------------------------------------------------- filters pane */
.fp-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px 8px; }
.fp-head .fp-title { margin: 0; font-size: 13px; font-weight: 600; flex: 1; display: flex; align-items: center; gap: 7px; color: var(--fg); }
.fp-head .fp-title svg.i { color: var(--accent); }
.paid-beyond-note { display: block; font-size: 10.5px; color: var(--muted); }
.fp-head .icon-btn { width: 26px; height: 26px; min-height: 26px; border-radius: 7px; }
.fp-search { position: relative; margin: 0 12px 6px; display: block; }
.fp-search input { width: 100%; height: 30px; min-height: 30px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); padding-inline: 28px 8px; outline: none; font-size: 12px; }
.fp-search input:focus { border-color: color-mix(in oklab, var(--accent) 55%, transparent); }
.fp-search svg.i { position: absolute; inset-inline-start: 9px; top: 9px; width: 13px; height: 13px; color: var(--muted); }
.fp-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 12px 10px; overscroll-behavior: contain; }
.fp-body::-webkit-scrollbar { width: 6px; }
.fp-body::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 6px; }
details.fg { border-bottom: 1px solid var(--line); padding: 7px 0; }
details.fg:last-child { border-bottom: 0; }
details.fg > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--fg); padding: 3px 0; }
details.fg > summary::-webkit-details-marker { display: none; }
details.fg > summary .cnum { font: 500 9.5px var(--font-mono); color: var(--muted); }
details.fg > summary .on { font: 600 9.5px/15px var(--font-mono); min-width: 15px; text-align: center; border-radius: 8px; background: var(--accent); color: var(--accent-ink); padding: 0 4px; }
details.fg > summary svg.i { margin-inline-start: auto; width: 12px; height: 12px; color: var(--muted); transition: transform .2s; }
details.fg[open] > summary svg.i { transform: rotate(180deg); }
.fg-body { padding: 6px 0 2px; }
.opt { display: flex; align-items: center; gap: 7px; padding: 3px 4px; border-radius: 6px; font-size: 12px; color: var(--fg-2); text-decoration: none; min-height: 24px; }
.opt:hover { background: var(--surface-2); color: var(--fg); text-decoration: none; }
.opt .box { width: 13px; height: 13px; border-radius: 3px; border: 1.5px solid var(--line-strong); flex: none; display: grid; place-items: center; }
.opt[aria-current="true"] { color: var(--fg); }
.opt[aria-current="true"] .box { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 8px -2px var(--accent-glow); }
.opt[aria-current="true"] .box::after { content: ""; width: 6px; height: 3px; border: solid var(--accent-ink); border-width: 0 0 1.6px 1.6px; transform: rotate(-45deg) translate(0, -1px); }
.opt .ol { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opt .c, .chip .c, .sw .c { margin-inline-start: auto; font: 400 10px var(--font-mono); color: var(--muted); background: var(--surface-2); border-radius: 5px; padding: 1px 5px; }
.chip .c { margin-inline-start: 0; background: none; padding: 0; }
.fg-body .more-opt { display: none; }
.fg-body.show-all .more-opt { display: flex; }
.showmore { border: 0; background: none; color: var(--accent); font-size: 11px; padding: 3px 4px; min-height: 0; cursor: pointer; }
.fg-body.chips, .fg-body .chips { display: flex; flex-wrap: wrap; gap: 4px; }
.fg-body .chip, .fg-body.chips .chip { min-height: 26px; height: auto; padding: 0 8px; border-radius: 7px; border: 1px solid var(--line); background: var(--surface); color: var(--fg-2); display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; white-space: nowrap; text-decoration: none; }
.fg-body .chip:hover { border-color: var(--line-strong); color: var(--fg); text-decoration: none; }
.fg-body .chip[aria-current="true"] { border-color: color-mix(in oklab, var(--accent) 55%, transparent); color: var(--accent); background: var(--accent-soft); }
.fg-body .chip svg.i { width: 12px; height: 12px; color: var(--mc, var(--muted)); }
.sw { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 12px; color: var(--fg-2); text-decoration: none; }
.sw:hover { color: var(--fg); text-decoration: none; }
.sw .track { width: 28px; height: 16px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--line-strong); position: relative; flex: none; transition: background .2s; }
.sw .track::after { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--muted); transition: inset-inline-start .2s, background .2s; }
.sw[aria-current="true"] .track { background: var(--accent-soft); border-color: var(--accent); }
.sw[aria-current="true"] .track::after { inset-inline-start: 14px; background: var(--accent); }
.sw .c:empty { display: none; }
.seg.segw { display: flex; width: 100%; padding: 3px; gap: 2px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); flex-wrap: wrap; }
.seg.segw a { flex: 1; padding: 4px; font-size: 11.5px; text-align: center; border-radius: 7px; color: var(--muted); text-decoration: none; white-space: nowrap; }
.seg.segw a:hover { color: var(--fg); text-decoration: none; }
.seg.segw a[aria-current="true"] { background: var(--surface-3); color: var(--fg); box-shadow: inset 0 0 0 1px var(--line-strong); }
.fields { display: flex; flex-direction: column; gap: 7px; }
.fields label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--muted); }
.fields label.evaluated-only { flex-direction: row; align-items: center; gap: 6px; color: var(--fg-2); }
.fields select, .fields input:not([type=checkbox]) { min-height: 30px; height: 30px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); font-size: 12px; color: var(--fg); width: 100%; }
.fields.basis { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.fields .sub { margin: 0; font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.fp-foot { display: flex; gap: 6px; padding: 8px 12px 10px; border-top: 1px solid var(--line); }
.fp-foot .btn { flex: 1; }
.fp-foot .btn.primary { display: none; }
.btn { height: 32px; min-height: 32px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; font-weight: 500; font-size: 12px; text-decoration: none; cursor: pointer; }
.btn:hover { border-color: var(--line-strong); text-decoration: none; }
.btn.primary { background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 92%, white), var(--accent)); color: var(--accent-ink); border-color: transparent; box-shadow: 0 8px 22px -12px var(--accent-glow); }
.btn.primary:hover { filter: brightness(1.05); }
.btn.ghost { background: transparent; }
.btn svg.i { width: 13px; height: 13px; }
.fg-hidden { display: none !important; }

/* ---------------------------------------------------------------- card pane */
#model-panel .panel-inner.pane { position: relative; }
.c-scroll { position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.c-scroll::-webkit-scrollbar { width: 6px; }
.c-scroll::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 6px; }
.cover.panel-top { position: relative; height: 112px; overflow: hidden; border-bottom: 1px solid var(--line); background: #050a12; padding: 0; display: block; margin: 0; }
.cover canvas, .cover svg.art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cover::after { content: ""; position: absolute; inset: auto 0 0; height: 50px; background: linear-gradient(to bottom, transparent, var(--panel-solid)); pointer-events: none; }
.cover .acts { position: absolute; z-index: 2; top: 8px; inset-inline-end: 8px; display: flex; gap: 5px; }
.cover .acts .icon-btn { width: 28px; height: 28px; min-height: 28px; border-radius: 8px; background: rgba(4, 9, 15, .55); border-color: rgba(140, 220, 235, .2); color: #d8eef4; }
.cover .acts .icon-btn:hover { color: #fff; border-color: rgba(140, 220, 235, .5); }
.cover .acts .icon-btn[aria-pressed="true"] { color: #3ee0c8; border-color: rgba(62, 224, 200, .6); }
.cover .no { position: absolute; z-index: 2; top: 10px; inset-inline-start: 12px; font: 500 10px var(--font-mono); color: rgba(220, 238, 244, .75); letter-spacing: .06em; text-transform: uppercase; }
.card-pane .share-status, .card-pane .share-fallback { margin: 8px 14px 0; }
.c-head.panel-heading { position: relative; display: block; padding: 0 14px; margin: -30px 0 0; z-index: 1; border: 0; }
.c-id { display: flex; gap: 10px; align-items: flex-end; }
.c-id .model-mark { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line-strong); display: grid; place-items: center; overflow: visible; font-size: 15px; }
.c-id .model-mark.has-logo { background: none; border: 0; border-radius: 0; }
.c-id .model-mark.has-logo svg, .c-id .model-mark.has-logo img { width: 46px; height: 46px; object-fit: contain; display: block; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .45)); }
.c-id .panel-titles { min-width: 0; flex: 1; }
.c-id h1 { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.2; letter-spacing: -.015em; overflow-wrap: anywhere; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; color: var(--fg); }
.c-meta { display: flex; align-items: center; gap: 5px 8px; flex-wrap: wrap; margin: 4px 0 0; font-size: 11.5px; color: var(--fg-2); }
.c-meta .dev.developer-with-country { flex-wrap: wrap; }
.c-meta .dev .flags { max-width: none; }
.c-sub { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; min-width: 0; }
.c-sub code { font: 400 10.5px var(--font-mono); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pill-ow { font: 500 9px/1 var(--font-mono); color: var(--accent-2); border: 1px solid color-mix(in oklab, var(--accent-2) 45%, transparent); border-radius: 3px; padding: 2px 4px; flex: none; }
.c-tags.panel-tags { display: flex; gap: 4px; flex-wrap: wrap; margin: 10px 0 0; }
.c-tags span { font-size: 11px; padding: 3px 8px; border-radius: 7px; border: 1px solid var(--line-strong); color: var(--fg-2); background: var(--surface); }
.c-desc.description { color: var(--fg-2); font-size: 12.5px; line-height: 1.55; margin: 9px 0 0; padding: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.c-desc.open { -webkit-line-clamp: unset; display: block; }
.c-desc + .linkish { padding-inline: 0; }
.c-cta { display: flex; gap: 6px; margin-top: 10px; }
.c-cta .btn.primary { flex: 1; }
.card-pane .breadcrumbs { margin: 10px 14px 0; font-size: 11px; }
.card-pane .panel-scroll { padding: 0; overflow: visible; flex: none; }
.c-tabs.panel-tabs { display: flex; gap: 16px; border-bottom: 1px solid var(--line); margin-top: 12px; padding-inline: 14px; position: sticky; top: 0; z-index: 3; background: var(--panel-solid); overflow-x: auto; scrollbar-width: none; }
.c-tabs .panel-tab { border: 0; background: none; padding: 8px 0 9px; color: var(--muted); font-weight: 500; font-size: 12px; position: relative; white-space: nowrap; text-decoration: none; }
.c-tabs .panel-tab:hover { color: var(--fg); text-decoration: none; }
.c-tabs .panel-tab.is-active, .c-tabs .panel-tab[aria-selected="true"] { color: var(--accent); border: 0; box-shadow: none; }
.c-tabs .panel-tab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); border-radius: 2px; box-shadow: 0 0 10px var(--accent-glow); }
.c-tabs .last { margin-inline-start: auto; }
.c-body.tab-panel { padding: 12px 14px 4px; }
.c-body h2, .c-body .panel-block h2, .reviews h3 { font: 600 10px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 14px 0 7px; }
.c-body > h2:first-child { margin-top: 0; }
.c-body .panel-block { margin: 0; padding: 0; border: 0; }
.c-body .panel-block + .panel-block { margin-top: 4px; border: 0; padding-top: 0; }
.kpis.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 0; }
.kpi.stat-card { position: relative; border: 1px solid var(--line); border-radius: 11px; padding: 10px 11px; min-height: 0; background: linear-gradient(160deg, color-mix(in oklab, var(--tc, var(--accent)) 9%, transparent), transparent 70%), var(--surface); min-width: 0; overflow: hidden; }
.kpi.rated { --tc: hsl(var(--rh, 44) var(--rs) var(--rl)); }
.kpi .stat-head { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--muted); margin: 0; }
.kpi .stat-head h2 { margin: 0; font: 400 10.5px inherit; font-size: 10.5px; letter-spacing: 0; text-transform: none; color: var(--muted); }
.kpi .stat-head svg.i { width: 12px; height: 12px; color: var(--tc, var(--accent)); }
.kpi .stat-value { display: block; font-size: 20px; font-weight: 500; line-height: 1.15; letter-spacing: -.02em; margin-top: 5px; font-variant-numeric: tabular-nums; color: var(--tc, var(--fg)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi .stat-value .rating-score { color: inherit; font: inherit; }
.kpi .stat-value small { display: block; font-size: 10.5px; font-weight: 400; color: var(--muted); letter-spacing: 0; margin-top: 2px; }
.kpi .stat-value.dim-value { font-size: 14px; color: var(--muted); }
.kpi .kbar { display: block; height: 4px; border-radius: 3px; background: var(--surface-3); margin-top: 7px; overflow: hidden; }
.kpi .kbar i { display: block; height: 100%; background: var(--tc); box-shadow: 0 0 8px var(--tc); }
.kpi em { display: block; font-style: normal; color: var(--muted); font-size: 10.5px; margin-top: 4px; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 7px; }
.fact { border: 1px solid var(--line); border-radius: 10px; padding: 7px 9px; background: var(--surface); min-width: 0; }
.fact > span { display: block; font-size: 10px; color: var(--muted); margin-bottom: 2px; }
.fact > b { font-size: 11px; font-weight: 500; line-height: 1.35; color: var(--fg); hyphens: auto; overflow-wrap: break-word; display: block; }
.fact-price { grid-column: span 2; }
.fact-price .price { font-size: 11px; }
.flow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.flow .side-list { display: flex; gap: 4px; flex-wrap: wrap; }
.mchip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border-radius: 7px; background: color-mix(in oklab, var(--mc) 12%, transparent); border: 1px solid color-mix(in oklab, var(--mc) 30%, transparent); font-size: 11.5px; color: var(--fg); }
.mchip svg.i { width: 12px; height: 12px; color: var(--mc); }
.flow .arrow { color: var(--accent); display: grid; }
.card-pane .fit-list { display: flex; flex-wrap: wrap; gap: 4px; padding: 0; margin: 0; list-style: none; }
.card-pane .fit-list li { font-size: 11px; padding: 3px 8px; border-radius: 7px; border: 1px solid var(--line); background: var(--surface); color: var(--fg-2); display: inline-flex; gap: 4px; align-items: center; min-height: 0; }
.card-pane .fit-check { width: auto; height: auto; background: none; border: 0; color: var(--accent); display: inline-grid; }
.card-pane .fit-check svg.i { width: 11px; height: 11px; }
.card-pane .essentials { font-size: 12px; }
.card-pane .rating-panel { border: 1px solid var(--line); border-radius: 11px; padding: 10px 11px; background: var(--surface); margin-top: 10px; }
.card-pane .rating-panel h2 { margin-top: 0; }
.price-list { display: flex; flex-direction: column; gap: 6px; }
.pl { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--surface); }
.pl .h { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--fg); font-weight: 500; }
.pl .h b { font-weight: 600; white-space: nowrap; }
.pl .h small { color: var(--fg-2); font-weight: 400; font-family: inherit; }
.pl p { margin: 5px 0 0; font-size: 10.5px; color: var(--muted); line-height: 1.45; }
.card-pane .evaluation, .card-pane .evaluation-group { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--surface); margin-bottom: 6px; }
.card-pane .detail-source { display: flex; gap: 10px; font-size: 11.5px; color: var(--muted); margin: 12px 0 6px; }
/* Community reviews: design kept; posting needs a server implementation (not demo data). */
.reviews { margin-top: 14px; border-top: 1px solid var(--line); padding: 12px 14px 14px; }
.rv-head { display: flex; align-items: center; gap: 8px; }
.reviews .rv-head h3 { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--fg); font-family: inherit; }
.rv-head .n { font: 500 10.5px var(--font-mono); color: var(--accent); }
.rv-note { font-size: 10.5px; color: var(--muted); display: flex; gap: 5px; align-items: flex-start; margin: 5px 0 0; line-height: 1.45; }
.rv-note svg.i { width: 12px; height: 12px; margin-top: 1px; }

/* ---------------------------------------------------------------- overlays */
.atlas-scrim { position: fixed; inset: 0; z-index: 45; background: var(--scrim); }

/* ---------------------------------------------------------------- rating scale classes */
.rh-0 { --rh: 8; } .rh-1 { --rh: 12; } .rh-2 { --rh: 15; } .rh-3 { --rh: 19; } .rh-4 { --rh: 22; }
.rh-5 { --rh: 26; } .rh-6 { --rh: 30; } .rh-7 { --rh: 33; } .rh-8 { --rh: 37; } .rh-9 { --rh: 40; }
.rh-10 { --rh: 44; } .rh-11 { --rh: 55; } .rh-12 { --rh: 66; } .rh-13 { --rh: 78; } .rh-14 { --rh: 89; }
.rh-15 { --rh: 100; } .rh-16 { --rh: 111; } .rh-17 { --rh: 122; } .rh-18 { --rh: 134; } .rh-19 { --rh: 145; } .rh-20 { --rh: 156; }
.rw-0 { width: 6%; } .rw-1 { width: 6%; } .rw-2 { width: 10%; } .rw-3 { width: 15%; } .rw-4 { width: 20%; }
.rw-5 { width: 25%; } .rw-6 { width: 30%; } .rw-7 { width: 35%; } .rw-8 { width: 40%; } .rw-9 { width: 45%; }
.rw-10 { width: 50%; } .rw-11 { width: 55%; } .rw-12 { width: 60%; } .rw-13 { width: 65%; } .rw-14 { width: 70%; }
.rw-15 { width: 75%; } .rw-16 { width: 80%; } .rw-17 { width: 85%; } .rw-18 { width: 90%; } .rw-19 { width: 95%; } .rw-20 { width: 100%; }

/* ---------------------------------------------------------------- column widths by catalog width
   Order: model, developer, release, type, access, capabilities, price, context, rating, №.
   The key columns (model, developer, release, type, price, context, rating, №) stay visible,
   also with the card open; the capabilities column goes first, then access — their content
   stays in the card. Phones use their own compact card layout. */
.cat-table { min-width: 1080px; }
.cat-table col.c-entity { width: 15%; } .cat-table col.c-dev { width: 10%; } .cat-table col.c-rel { width: 9.5%; }
.cat-table col.c-type { width: 10.5%; } .cat-table col.c-acc { width: 8%; } .cat-table col.c-caps { width: 15.5%; }
.cat-table col.c-price { width: 13%; } .cat-table col.c-ctx { width: 7%; } .cat-table col.c-rating { width: 8.5%; }
.cat-table col.c-num { width: 3%; } .cat-table col.c-check { width: 7%; }
.cat-table.has-check col.c-caps { width: 11%; } .cat-table.has-check col.c-entity { width: 13.5%; }
.tool-table col.c-entity { width: 20%; } .tool-table col.c-dev { width: 11%; } .tool-table col.c-rel { width: 10%; }
.tool-table col.c-cat { width: 10%; } .tool-table col.c-caps { width: 16%; } .tool-table col.c-plat { width: 12%; }
.tool-table col.c-price { width: 12%; } .tool-table col.c-local { width: 6%; } .tool-table col.c-num { width: 3%; }
@container cat (max-width: 1249px) {
  .cat-table { min-width: 900px; }
  .cat-table .c-caps { display: none; }
  .cat-table col.c-entity { width: 17%; } .cat-table col.c-dev { width: 12%; } .cat-table col.c-rel { width: 10.5%; }
  .cat-table col.c-type { width: 12%; } .cat-table col.c-acc { width: 9%; } .cat-table col.c-price { width: 15%; }
  .cat-table col.c-ctx { width: 8.5%; } .cat-table col.c-rating { width: 11%; } .cat-table col.c-num { width: 5%; }
  .tool-table .c-local { display: none; }
  .tool-table col.c-entity { width: 23%; } .tool-table col.c-dev { width: 12%; } .tool-table col.c-rel { width: 11%; }
  .tool-table col.c-cat { width: 11%; } .tool-table col.c-caps { width: 16%; } .tool-table col.c-plat { width: 13%; } .tool-table col.c-price { width: 14%; }
}
@container cat (max-width: 1039px) {
  .cat-table { min-width: 740px; }
  .cat-table .c-acc { display: none; }
  .cat-table col.c-entity { width: 19%; } .cat-table col.c-dev { width: 13%; } .cat-table col.c-rel { width: 11.5%; }
  .cat-table col.c-type { width: 13%; } .cat-table col.c-price { width: 16.5%; } .cat-table col.c-ctx { width: 9.5%; }
  .cat-table col.c-rating { width: 12%; } .cat-table col.c-num { width: 5.5%; }
  .tool-table .c-caps { display: table-cell; } .tool-table col.c-caps { display: table-column; }
  .tool-table .c-plat { display: none; }
  .tool-table col.c-entity { width: 26%; } .tool-table col.c-dev { width: 14%; } .tool-table col.c-rel { width: 13%; }
  .tool-table col.c-cat { width: 13%; } .tool-table col.c-caps { width: 17%; } .tool-table col.c-price { width: 17%; }
}
@container cat (max-width: 799px) {
  .cat-table { min-width: 640px; }
  .cat-table col.c-entity { width: 21%; } .cat-table col.c-dev { width: 14%; } .cat-table col.c-rel { width: 12%; }
  .cat-table col.c-type { width: 13%; } .cat-table col.c-price { width: 16%; } .cat-table col.c-ctx { width: 9%; }
  .cat-table col.c-rating { width: 10%; } .cat-table col.c-num { width: 5%; }
}
@container cat (max-width: 1180px) { .cat .n { display: none; } .sel-wrap .lbl { display: none; } }
@container cat (max-width: 1000px) { .cat svg.i { display: none; } .cat { padding: 0 8px; } }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1199px) {
  /* Tablet: side panes overlay the catalog instead of docking. */
  .side.left { position: absolute; z-index: 30; top: 12px; bottom: 0; inset-inline-start: 14px; height: auto; margin: 0; }
  body.filters-on .side.left { width: var(--w); }
  body.filters-on .side.left .pane { box-shadow: var(--shadow); }
  #model-panel.side.right.is-open { position: fixed; top: calc(env(safe-area-inset-top, 0px) + var(--top-h) + 8px); bottom: max(10px, env(safe-area-inset-bottom, 0px)); inset-inline-end: max(10px, env(safe-area-inset-right, 0px)); z-index: 50; height: auto; }
  #model-panel.side.right .panel-inner { box-shadow: var(--shadow); background: var(--panel-solid); }
  .topbar .catalog-freshness .freshness-date { display: none; }
  .tb-search { max-width: none; }
}
@media (max-width: 820px) {
  .tb-row { gap: 6px; height: 50px; }
  :root { --top-h: 50px; }
  .tb-brand-text { display: none; }
  .tb-row > .kind-seg { display: none; }
  .tb-search .search-kbd { display: none; }
  #account-control .account-login span, #account-control .account-name { display: none; }
  #account-control .account-login { padding: 0 9px; }
  .tb-ctl .chev { display: none; }
  .topbar .catalog-freshness .freshness-time { display: none; }
  .topbar .catalog-freshness { padding: 0 11px; }
  .tb-end .env-nav { display: none; }
  .atlas-ws { display: block; padding-top: 8px; }
  .atlas-main { height: auto; }
  .scroller.table-scroll { height: 70vh; flex: none; }
  .toolbar.catalog-toolbar { flex-wrap: wrap; }
  .cats { order: 3; flex-basis: 100%; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); padding-inline-end: 24px; }
  [dir="rtl"] .cats { -webkit-mask-image: linear-gradient(270deg, #000 88%, transparent); mask-image: linear-gradient(270deg, #000 88%, transparent); }
  .cat { height: 34px; }
  .tb-right { margin-inline-start: auto; }
  .side.left { position: fixed; inset: 0; inset-inline-start: 0; top: 0; width: 0; z-index: 56; }
  body.filters-on .side.left { width: min(360px, 100vw); }
  .side.left .pane { --w: min(360px, 100vw); border-radius: 0; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .fp-foot .btn.primary { display: inline-flex; }
  #model-panel.side.right.is-open { top: calc(env(safe-area-inset-top, 0px) + 26px); bottom: 0; inset-inline: 0; width: 100%; z-index: 55; }
  #model-panel.side.right .panel-inner { --w: 100%; border-radius: 18px 18px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi .stat-value { font-size: 17px; }
  .opt, .fg-body .chip { min-height: 32px; }
  .foot-line .count-note { display: none; }
  /* Phone: rows become compact cards; the table keeps its markup and links. */
  .cat-table { min-width: 0; table-layout: auto; }
  .cat-table colgroup, .cat-table thead tr.hrow { display: none; }
  .cat-table, .cat-table thead, .cat-table tbody { display: block; }
  .cat-table thead { position: sticky; top: 0; }
  .cat-table tr.row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
  .cat-table tr.row > * { display: block; padding: 0; border: 0; overflow: visible; background: none; box-shadow: none !important; }
  .cat-table tr.row > .c-entity { grid-column: 1 / -1; }
  .cat-table tr.row > .c-caps { display: block; grid-column: 1 / -1; }
  .cat-table tr.row > .c-price { grid-column: 1 / -1; }
  .cat-table tr.row > .c-num, .cat-table tr.row > .c-acc, .cat-table tr.row > .c-check { display: none; }
  .cat-table tr.row > .c-ctx { justify-self: start; }
  .cat-table tr.row > .c-rating { justify-self: end; }
  .cat-table tr.row > .c-dev { display: block; }
  .tool-table tr.row > .c-plat, .tool-table tr.row > .c-local { display: none; }
  .cat-table tbody tr.rec { box-shadow: inset 2px 0 0 color-mix(in oklab, var(--accent) 70%, transparent); outline: 1px solid color-mix(in oklab, var(--accent) 34%, transparent); outline-offset: -1px; }
  .cat-table tbody tr.rec > * { background: none; border: 0; }
  .cat-table tbody tr.ad-row, .cat-table tbody tr.ad-row > td { display: block; }
  .cat-table tbody tr:not(.row):not(.ad-row) { display: block; }
  .cat-table tbody tr:not(.row):not(.ad-row) > td { display: block; }
}
@media (max-width: 600px) {
  .topbar .catalog-freshness-shell { display: none; }
  .foot-line { white-space: nowrap; gap: 8px; }
  .foot-line .bar { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .side, .clock-dot, .foot-line .bar i { transition: none; animation: none; }
}
/* Card and phone: the catalog container query does not apply; use the short unit. */
.card-pane .price .u .lg { display: none; }
@media (max-width: 820px) { .price .u .lg { display: none; } .price .u .sh { display: inline; } }
@media (max-width: 820px) {
  .cat-table tr.row { grid-template-areas: "ent ent" "rel dev" "type type" "caps caps" "price price" "ctx rating"; }
  .cat-table tr.row > .c-entity { grid-area: ent; }
  .cat-table tr.row > .c-rel { grid-area: rel; }
  .cat-table tr.row > .c-dev { grid-area: dev; justify-self: end; }
  .cat-table tr.row > .c-type { grid-area: type; }
  .cat-table tr.row > .c-caps { grid-area: caps; }
  .cat-table tr.row > .c-price { grid-area: price; }
  .cat-table tr.row > .c-ctx { grid-area: ctx; align-self: center; }
  .cat-table tr.row > .c-rating { grid-area: rating; justify-self: end; }
  .tool-table tr.row { grid-template-areas: "ent ent" "rel dev" "cat cat" "caps caps" "price price"; }
  .tool-table tr.row > .c-cat { grid-area: cat; }
  .cat-table tr.row .tyc { flex-direction: row; align-items: center; gap: 8px; }
  .cat-table tr.row .dev .dev-name { max-width: 40vw; }
}
/* Phones and narrow tablets scroll the page itself (site.css locks it from 721px). */
@media (max-width: 820px) {
  html, body.atlas-page { height: auto; }
  body.atlas-page { overflow: visible; }
  body.atlas-page { overflow-x: hidden; }
}
@media (max-width: 820px) {
  .cat-table tbody tr.row > *, .cat-table tr.row > th:first-child, .cat-table tr.row > td:first-child { padding: 0 !important; }
}

/* ---------------------------------------------------------------- owner review fixes (20.10.2026) */
.cat-table thead th .th-f { min-height: 0; width: 18px; height: 18px; padding: 0; margin-inline-start: 3px; border: 0; border-radius: 5px; background: none; color: var(--muted); display: inline-grid; place-items: center; vertical-align: middle; opacity: .55; transition: opacity .15s, color .15s; }
.cat-table thead th .th-f svg.i { width: 11px; height: 11px; }
.cat-table thead th:hover .th-f, .cat-table thead th .th-f:focus-visible { opacity: 1; }
.cat-table thead th .th-f:hover { color: var(--accent); background: var(--accent-soft); }
details.fg.fg-focus { box-shadow: inset 2px 0 0 var(--accent); background: linear-gradient(90deg, var(--accent-soft), transparent 60%); }
[dir="rtl"] details.fg.fg-focus { box-shadow: inset -2px 0 0 var(--accent); }
.opt .opt-flags { display: inline-flex; gap: 2px; flex: none; }
.opt .opt-flags .country-badge { display: inline-flex; }
.opt .opt-flags .country-flag { width: 15px; height: 10px; border-radius: 2px; box-shadow: 0 0 0 1px var(--line); display: block; }
.fg-body .sub { margin: 6px 0 4px; font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.fg-body .sub:first-child { margin-top: 0; }
/* Two-thumb ranges */
.range { margin: 2px 2px 10px; }
.range-vals { display: flex; justify-content: space-between; gap: 8px; font: 500 11px var(--font-mono); color: var(--fg); margin-bottom: 4px; }
.dual { position: relative; height: 22px; }
.dual .track { position: absolute; top: 9px; inset-inline: 0; height: 4px; border-radius: 3px; background: var(--surface-3); }
.dual .fill { position: absolute; top: 9px; height: 4px; border-radius: 3px; background: linear-gradient(90deg, var(--accent-2), var(--accent)); box-shadow: 0 0 10px var(--accent-glow); }
.dual input[type=range] { position: absolute; inset: 0; width: 100%; height: 22px; min-height: 0; margin: 0; padding: 0; border: 0; -webkit-appearance: none; appearance: none; background: none; pointer-events: none; }
.dual input[type=range]::-webkit-slider-runnable-track { background: none; border: 0; }
.dual input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg); box-shadow: 0 0 0 1px var(--accent), 0 0 10px var(--accent-glow); cursor: pointer; }
.dual input[type=range]::-moz-range-thumb { pointer-events: auto; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg); cursor: pointer; }
.dual input[type=range]::-moz-range-track { background: none; }
.dual input[type=range]:focus-visible { outline: none; }
.dual input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--accent-soft), 0 0 0 1px var(--accent); }
@media (pointer: coarse) { .dual { height: 32px; } .dual .track, .dual .fill { top: 14px; } .dual input[type=range] { height: 32px; } .dual input[type=range]::-webkit-slider-thumb { width: 24px; height: 24px; } }
/* Independent benchmark bars on the absolute 0-100 % scale */
.pct-bar { --tc: hsl(var(--rh, 44) var(--rs) var(--rl)); display: block; height: 6px; border-radius: 4px; background: var(--surface-3); margin: 6px 0 4px; overflow: hidden; }
.pct-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in oklab, var(--tc) 45%, transparent), var(--tc)); box-shadow: 0 0 10px -2px var(--tc); }
.pct-bar.rh-0 i, .pct-bar.rh-1 i, .pct-bar.rh-2 i, .pct-bar.rh-3 i, .pct-bar.rh-4 i, .pct-bar.rh-5 i, .pct-bar.rh-6 i, .pct-bar.rh-7 i { opacity: .75; box-shadow: none; }
.card-pane .evaluation-row .evaluation-heading b { color: var(--fg); white-space: nowrap; }
/* Reviews */
/* Header filter shortcuts appear on hover/focus, so short headers are never truncated. */
@media (hover: hover) {
  .cat-table thead th .th-f { width: 0; margin: 0; overflow: hidden; opacity: 0; }
  .cat-table thead th:hover .th-f, .cat-table thead th:focus-within .th-f { width: 18px; margin-inline-start: 3px; opacity: 1; }
}

/* ---------------------------------------------------------------- header in two levels (21.10.2026)
   Level 1: brand · search (centre) · language, theme, account.
   Level 2: Models / Tools · local time with the latest catalogue update. */
.topbar.site-header { background: none; border-bottom: 0; padding-top: 10px; }
.tb-row { display: grid; grid-template-columns: 1fr minmax(0, 600px) 1fr; gap: 14px; height: 46px; }
.tb-row > .tb-brand { justify-self: start; }
.tb-row > .tb-search { max-width: none; width: 100%; }
.tb-row > .tb-end { justify-self: end; margin: 0; }
.tb-search input { height: 38px; min-height: 38px; border-radius: 12px; background: color-mix(in oklab, var(--surface) 92%, transparent); }
.tb-search > svg.i { top: 12px; }
.tb-search .search-kbd { top: 9px; }
.tb-row2 { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 1680px; margin: 10px auto 0;
  padding-inline: max(14px, env(safe-area-inset-left, 0px)) max(14px, env(safe-area-inset-right, 0px)); }
.tb-row2 .tb-clock { display: flex; }
.topbar .catalog-freshness-shell { position: relative; flex: none; }
.atlas-ws { padding-top: 14px; }
/* Light theme: the controls float over the scene, keep them legible. */
:root[data-theme="light"] .tb-brand-text small { color: var(--fg-2); }
@media (max-width: 1100px) { .tb-row { grid-template-columns: auto minmax(0, 1fr) auto; } }
@media (max-width: 820px) {
  .topbar.site-header { padding-top: 6px; }
  .tb-row { gap: 6px; height: 44px; }
  .tb-row2 { margin-top: 8px; }
  .tb-row2 .kind-seg { flex: 1; }
  .tb-row2 .type-tab { flex: 1; height: 32px; }
  .atlas-ws { padding-top: 10px; }
}
@media (max-width: 600px) { .tb-row2 .tb-clock { display: none; } }
@media (min-width: 821px) and (max-width: 1199px) {
  #model-panel.side.right.is-open { top: calc(var(--aip-header-h, 100px) + 8px); }
}

/* ---------------------------------------------------------------- performance (21.10.2026) */
body.atlas-page { background: var(--bg); }
.pane, #model-panel .panel-inner, .atlas-main { contain: layout paint; }
.c-scroll { contain: layout paint; }
/* Card sections below the fold are laid out only when they scroll into view. */
.c-body .panel-block, .c-body .evaluation-layer, .c-body .evaluation-gap, .reviews .cm-list {
  content-visibility: auto; contain-intrinsic-size: auto 260px; }
#filter-pane details.fg:not([open]) { content-visibility: auto; contain-intrinsic-size: auto 34px; }
/* Developer: the confirmed name is never cut to an ellipsis on one line; it wraps to two lines
   (full name in the tooltip). An unconfirmed country is a neutral globe mark, not an empty box. */
/* Country metadata occupies its own line; its 100% basis must be allowed to wrap.
   Keep the neutral icon at its intrinsic width so it cannot consume the name. */
.dev.developer-with-country { align-items: flex-start; flex-wrap: wrap; row-gap: 2px; }
.dev.developer-with-country > .unknown-origin { flex-basis: 17px; }
.dev .dev-name { flex: 1 1 0; }
.dev > .origin-tentative { overflow-wrap: normal; }
/* A two-line confidence label shares the normal table-row height with a single
   name line. The existing title keeps the complete developer name available. */
.cat-table .dev:has(> .origin-tentative) > .dev-name { display: block; white-space: nowrap; text-overflow: ellipsis; }
.cat-table td.developer-col:has(.origin-tentative) { padding-block: 3px; }
@media (max-width: 820px) {
  .cat-table .dev.developer-with-country { max-width: 58vw; }
}
.dev .dev-name { white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; overflow-wrap: anywhere; }
.dev .flags, .dev .unknown-origin { margin-top: 2px; }
.unknown-origin { width: 17px; height: 11px; border: 0; display: inline-grid; place-items: center; color: var(--muted); opacity: .8; }
.unknown-origin svg.i { width: 12px; height: 12px; }

/* ---------------------------------------------------------------- sticky card head (21.10.2026)
   Cover, logo, name, developer and the actions (share, save, follow, close) stay on top of the
   card panel; the version, tags, description, tabs and content scroll under them. */
.c-sticky { position: sticky; top: 0; z-index: 4; background: var(--panel-solid); border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.c-sticky .cover.panel-top { height: 64px; border-bottom: 0; }
.c-sticky .cover::after { height: 40px; }
.c-sticky .c-head.panel-heading { margin-top: -20px; }
.c-sticky .c-id .model-mark { width: 40px; height: 40px; flex-basis: 40px; }
.c-sticky .c-id .model-mark.has-logo svg, .c-sticky .c-id .model-mark.has-logo img { width: 38px; height: 38px; }
.c-sticky .c-id h1 { font-size: 16px; }
.c-sticky .c-meta { margin-top: 3px; }
.c-intro { padding: 2px 14px 0; }
.c-intro .c-sub { margin-top: 10px; }
.c-tabs.panel-tabs { top: var(--card-sticky-h, 0px); }
@media (max-width: 820px) {
  .c-sticky { padding-bottom: 8px; }
  .c-sticky .cover.panel-top { height: 48px; }
  .c-sticky .cover::after { height: 26px; }
  .c-sticky .cover .acts { top: 6px; }
  .c-sticky .c-head.panel-heading { margin-top: -16px; }
  .c-sticky .c-id .model-mark { width: 34px; height: 34px; flex-basis: 34px; }
  .c-sticky .c-id .model-mark.has-logo svg, .c-sticky .c-id .model-mark.has-logo img { width: 32px; height: 32px; }
  .c-sticky .c-id h1 { font-size: 15px; }
  .c-sticky .c-meta { font-size: 11px; }
}

/* ---------------------------------------------------------------- community comments (21.10.2026)
   accounts/comments.py: real comments of signed-in accounts, replies one level deep, likes. */
.comments .cm-compose { display: flex; align-items: flex-end; gap: 8px; margin-top: 12px; }
.cm-hp { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; inset-inline-start: -9999px; }
.cm-avatar { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  background: color-mix(in oklab, var(--accent) 16%, var(--surface-2)); color: var(--fg); font-size: 12px; font-weight: 600; line-height: 1; border: 1px solid var(--line); }
.cm-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-avatar svg.i { width: 14px; height: 14px; color: var(--muted); }
.cm-compose textarea { flex: 1; min-width: 0; min-height: 38px; max-height: 180px; resize: none; padding: 9px 12px; border-radius: 19px;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--fg); font: inherit; font-size: 12.5px; line-height: 1.45; overflow-y: auto; }
.cm-compose textarea:focus-visible { outline: 2px solid color-mix(in oklab, var(--accent) 60%, transparent); outline-offset: 1px; border-color: transparent; }
.cm-compose textarea::placeholder { color: var(--muted); }
.cm-send { flex: none; width: 36px; height: 36px; min-height: 36px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer;
  background: var(--accent); color: var(--accent-ink); }
.cm-send:hover { filter: brightness(1.08); }
.cm-send:disabled { opacity: .55; cursor: progress; }
.cm-send svg.i { width: 16px; height: 16px; }
.cm-error { margin: 6px 0 0 38px; font-size: 11.5px; color: var(--bad); }
.cm-list, .cm-replies { list-style: none; margin: 0; padding: 0; }
.cm-list { margin-top: 12px; display: grid; gap: 12px; }
.cm { display: flex; gap: 8px; align-items: flex-start; }
.cm-main { min-width: 0; flex: 1; }
.cm-meta { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cm-author { font-size: 12.5px; font-weight: 600; color: var(--fg); overflow-wrap: anywhere; }
.cm-meta time { font-size: 10.5px; color: var(--muted); }
.cm-text { margin: 3px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--fg-2); overflow-wrap: anywhere; white-space: normal; }
.cm-acts { display: flex; gap: 4px; margin-top: 4px; margin-inline-start: -6px; }
.cm-acts button { display: inline-flex; align-items: center; gap: 4px; height: 26px; min-height: 26px; padding: 0 7px; border: 0; border-radius: 13px;
  background: none; color: var(--muted); font-size: 11.5px; cursor: pointer; }
.cm-acts button:hover { color: var(--fg); background: var(--surface-2); }
.cm-acts svg.i { width: 14px; height: 14px; }
.cm-like[aria-pressed="true"] { color: var(--accent); }
.cm-like[aria-pressed="true"] svg.i { fill: color-mix(in oklab, var(--accent) 30%, transparent); }
.cm-replies { display: grid; gap: 10px; }
.cm-replies:not(:empty) { margin-top: 8px; }
.cm-sub .cm-avatar { flex-basis: 24px; width: 24px; height: 24px; font-size: 10.5px; }
.cm-reply-form { margin: 8px 0 0; }
.cm-reply-form textarea { min-height: 34px; padding: 7px 11px; border-radius: 17px; }
.cm-reply-form .cm-send { width: 32px; height: 32px; min-height: 32px; }
.cm-cancel { flex: none; height: 32px; min-height: 32px; padding: 0 10px; border: 0; background: none; color: var(--muted); font-size: 11.5px; cursor: pointer; border-radius: 16px; }
.cm-cancel:hover { color: var(--fg); background: var(--surface-2); }
.cm-empty { display: grid; justify-items: center; gap: 3px; text-align: center; padding: 16px 8px; color: var(--muted); font-size: 12px;
  border: 1px dashed var(--line-strong); border-radius: 10px; }
.cm-empty b { color: var(--fg); font-weight: 500; }
.cm-empty svg.i { width: 18px; height: 18px; opacity: .7; }
@media (max-width: 820px) {
  .cm-compose textarea { font-size: 16px; } /* no zoom-on-focus on phones */
}

/* ---------------------------------------------------------------- brand caption (21.10.2026)
   "Каталог моделей и инструментов ИИ" stays under the name at every width. On phones the name
   itself gives way to the search, so the caption becomes one small line under the first header
   row (the only extra height, ~12 px). */
.tb-brand-text small { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 820px) {
  .tb-row { position: relative; }
  .tb-brand-text { display: block; position: absolute; top: 100%; inset-inline: max(14px, env(safe-area-inset-left, 0px)) max(14px, env(safe-area-inset-right, 0px)); pointer-events: none; }
  .tb-brand-text b { display: none; }
  .tb-brand-text small { display: block; margin: 1px 0 0; font-size: 10px; line-height: 12px; }
  .tb-row2 { margin-top: 18px; }
}

/* A quick category was pressed: the old results are dimmed until the new page arrives. */
body[data-loading] .table-scroll { opacity: .5; transition: opacity .12s; pointer-events: none; }
/* Phones (≤720 px): site.css moves the search to its own row; the first row then has room for the
   name and the caption next to the logo. The header grows with its rows instead of overflowing. */
@media (max-width: 720px) {
  .tb-row { height: auto; grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 8px; }
  .tb-row > .tb-brand { grid-column: 1 / 3; grid-row: 1; min-width: 0; }
  .tb-row > .tb-end { grid-column: 3; grid-row: 1; }
  .tb-row > .tb-search { grid-column: 1 / -1; grid-row: 2; }
  .tb-brand-text { position: static; display: flex; flex-direction: column; min-width: 0; }
  .tb-brand-text b { display: block; font-size: 15px; }
  .tb-brand-text small { margin: 2px 0 0; font-size: 9.5px; line-height: 11px; white-space: normal; text-wrap: balance;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .tb-row2 { margin-top: 8px; }
}
@media (max-width: 359px) { .tb-brand-text b { display: none; } }

/* The exact context number never wraps (changed-card gate: one line, no K/M). */
.kpi .stat-value .context-value { white-space: nowrap; }

/* Light Space is a bright sky: text that sits directly on it (brand and footer) gets the same
   light surface as the other header controls, so it keeps its contrast at any time of day. */
:root[data-theme="light"] .atlas-page .tb-brand { background: color-mix(in oklab, var(--panel-solid) 88%, transparent);
  border: 1px solid var(--line); border-radius: 12px; padding: 4px 10px 4px 6px; }
:root[data-theme="light"] .atlas-page .atlas-shell > .site-footer { background: color-mix(in oklab, var(--panel-solid) 88%, transparent);
  border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; width: calc(100% - 28px); }
@media (max-width: 820px) {
  :root[data-theme="light"] .atlas-page .tb-brand { padding: 3px; }
  :root[data-theme="light"] .atlas-page .tb-brand-text small { display: inline-block; color: var(--fg-2); background: color-mix(in oklab, var(--panel-solid) 88%, transparent);
    border-radius: 6px; padding: 0 6px; }
}
@media (max-width: 720px) {
  :root[data-theme="light"] .atlas-page .tb-brand { padding: 4px 10px 4px 6px; }
  :root[data-theme="light"] .atlas-page .tb-brand-text small { display: -webkit-box; background: none; padding: 0; }
}

/* ---------------------------------------------------------------- wide and ultrawide monitors (21.10.2026)
   No fixed 1680 px column: the shell uses the window width with a moderate gutter that grows a
   little on large screens (space stays visible at the edges). The extra width goes to the
   panes (filters, card) and to the table columns; text sizes do not change. */
:root { --gutter: clamp(14px, 1.25vw, 64px); }
.tb-row, .tb-row2, .atlas-ws, .ad-wrap, .atlas-shell > .site-footer { max-width: none;
  padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px)); }
.atlas-shell > .commercial-ad-preview, .atlas-shell > aside.ad-slot { max-width: none; width: calc(100% - 2 * var(--gutter)); }
:root[data-theme="light"] .atlas-page .atlas-shell > .site-footer { width: calc(100% - 2 * var(--gutter)); }
.side.left { --w: clamp(268px, 14vw, 400px); }
#model-panel.side.right { --w: clamp(420px, 25vw, 760px); }
/* About uses the existing site palette and typography, with a readable measure. */
.policy.about-page { max-width: 780px; margin-inline: auto; padding-block: 40px 56px; }
.about-page p { line-height: 1.75; }
.about-page .about-lead { font-size: 1.08rem; color: var(--muted); }
.about-page h2 { margin-block: 32px 10px; }
.about-counts { display: flex; gap: 40px; padding-block: 20px; margin-block: 24px; border-block: 1px solid var(--line); }
.about-counts > div { display: flex; flex-direction: column-reverse; gap: 4px; }
.about-counts dt { font-size: .875rem; }
.about-counts dd { margin: 0; font-size: 1.75rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.about-page .information-link { margin-block: 10px; }
.about-page .information-related { border-top: 1px solid var(--line); padding-top: 24px; margin-top: 32px; }
@media (max-width: 600px) {
  .policy.about-page { padding-block: 24px 36px; }
  .about-page .about-lead { font-size: 1rem; }
  .about-counts { gap: 32px; }
}