/* ============================================================
   Brykam — дизайн-токени v2.0 (2026-09-11)
   ТОЧНО з живого plan2skill (https://roadmap.plan2skill.com/, computed :root).
   v1.1 (зелений = гроші) СКАСОВАНО — власник хоче візуальну єдність із
   plan2skill: помаранчевий Forge Flame як primary-акцент (outline-first кнопки,
   без journey-градієнту).
   Канонічне джерело: docs/branding/brykam-tokens.css
   ============================================================ */

:root {
  /* --- Фони і поверхні (1:1 з живим plan2skill) --- */
  --bg: #0c0f15;                 /* page background */
  --surface: #161b24;            /* картки, панелі (chrome-surface) */
  --surface-2: #1c2230;          /* elevated / hover (chrome-elevated) */
  --ink-deep: #0e131c;           /* найглибший фон (вкладені input) */
  --border: #272e3b;
  --border-interactive: #616c80;   /* 3.6:1 on bg — SC 1.4.11 for control outlines */             /* усі бордери (chrome-border) */

  /* --- Бренд-акценти plan2skill --- */
  --orange: #f06830;             /* Forge Flame — PRIMARY акцент, CTA, лого */
  --blue: #4b7ef5;               /* Tempered Steel — активні стани, лінки, secondary */
  --gold: #f5b020;               /* Forge Gold — третій акцент, нагороди/увага */
  --orange-glow: rgba(240, 104, 48, 0.28);
  --blue-glow: rgba(75, 126, 245, 0.28);

  /* --- Текст --- */
  --text: #d8dee8;               /* основний */
  --ink: #e8ecf2;                /* яскравіший (заголовки) */
  --muted: #8a94a6;              /* другорядний (кегль ≥11px!) */
  --text-on-accent: #ffffff;     /* білий на градієнті/помаранчевому */

  /* --- Семантика (маржа/статуси) --- */
  --success: #2ecc71;            /* прибуток/позитив (семантичний зелений) */
  --danger:  #ff5964;            /* збиток/ургентність */
  --margin-good: var(--success);
  --margin-mid:  var(--muted);
  --margin-bad:  var(--danger);
  --pill-good-bg: rgba(46, 204, 113, 0.14);
  --pill-mid-bg:  rgba(245, 176, 32, 0.14);
  --pill-bad-bg:  rgba(255, 89, 100, 0.14);

  /* --- Стани поверхонь --- */
  --hover-bg: rgba(255, 255, 255, 0.03);
  --row-border: rgba(39, 46, 59, 0.6);
  --accent-dim-bg: rgba(240, 104, 48, 0.10);

  /* --- Типографіка (plan2skill: Rubik скрізь; mono лише для числових даних) --- */
  --font-ui: 'Rubik', system-ui, -apple-system, sans-serif;
  --font-display: 'Rubik', system-ui, sans-serif;              /* аліас — plan2skill без окремого display */
  --font-data: 'Source Code Pro', 'JetBrains Mono', Consolas, monospace;

  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-base: 13px;
  --fs-md: 15px;
  --fs-lg: 20px;
  --fs-xl: 28px;

  /* --- Геометрія (plan2skill: картки 16px, кнопки 10px) --- */
  --radius-xs: 6px;
  --radius: 10px;                /* кнопки/контроли */
  --radius-md: 10px;
  --radius-lg: 16px;             /* картки (card-radius) */
  --radius-pill: 999px;
  --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.38);
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px;
  --touch-target: 44px;

  /* --- Рух: фірмова пружина (= plan2skill --ease-forge) --- */
  --ease-bryk: cubic-bezier(0.34, 1.56, 0.64, 1);  /* пружина/overshoot — лише святкові моменти */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);       /* плавне гальмування — модалки/тости */
  --dur-fast: 0.15s;
  --dur-base: 0.22s;
  --dur-bryk: 0.35s;

  /* -------------------------------------------------------------------
     АЛІАСИ ЗВОРОТНОЇ СУМІСНОСТІ
     Старі імена, які вживає решта dashboard.css — тепер маппяться на v2.0
     ------------------------------------------------------------------- */
  --brand: var(--orange);            /* було зелений #38C866, тепер помаранчевий #f06830 */
  --hammer: var(--orange);           /* palette reduced to orange+grey (brand board) */
  --alarm: var(--danger);            /* було #E03030, тепер #ff5964 */
  --info: var(--text);               /* palette reduced to orange+grey (brand board) */
  --text-heading: var(--ink);        /* було #F0F4F8, тепер #e8ecf2 */
  --brand-dim-bg: var(--accent-dim-bg); /* dim-фон для акцентних станів */
}

@media (prefers-reduced-motion: reduce) {
  :root { --ease-bryk: ease-out; --ease-out: ease-out; --dur-bryk: 0.01s; --dur-base: 0.01s; }
  /* Keyframe entrances/pops carry their own hardcoded timing — cut them outright. */
  #modal-overlay.open, #modal-overlay.open .modal-box,
  .toast, .toast.toast--out, .reg-check, .reg-check .icon { animation: none !important; }
  .btn:active { transform: none; }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.5;
}
/* App shell owns the viewport: the window must not scroll, only #main does.
   Without this the whole grid could be dragged up into empty space (scoped to
   the dashboard via :has so the login page, which shares this stylesheet, still
   scrolls normally). */
html:has(#app-shell), body:has(#app-shell) {
  height: 100%;
  overflow: hidden;
}
a { color: var(--text); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── APP-SHELL GRID ─────────────────────────────────────── */
#app-shell {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: 52px 1fr auto;
  grid-template-areas:
    "left top  top"
    "left main right"
    "left bot  bot";
  height: 100vh;
  overflow: hidden;
}
#topbar      { grid-area: top; }
#sidebar-left  { grid-area: left; }
#main        { grid-area: main; overflow-y: auto; min-height: 0; padding-bottom: 12px; }
#sidebar-right { grid-area: right; }
#bottombar   { grid-area: bot; }

/* grid placement — visual styling below */
/* TOP BAR */
#topbar {
  z-index: 100;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
#topbar .logo {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-heading);
  font-family: var(--font-display);
  text-transform: lowercase;
  letter-spacing: -0.02em;
  margin-right: 8px;
}
.icon { width: 15px; height: 15px; vertical-align: -3px; }
.stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.stat-chip .label { color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.stat-chip .val { font-family: var(--font-data); color: var(--text); font-weight: 600; }
.budget-wrap { display: flex; align-items: center; gap: 6px; }
.budget-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.budget-bar-track {
  width: 60px; height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}
.budget-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--brand);
  transition: width 0.3s;
}
.budget-bar-fill.warn { background: var(--orange); }
.budget-bar-fill.crit { background: var(--alarm); }
.budget-count { font-family: var(--font-data); font-size: 10px; color: var(--muted); }
#alive-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
#alive-dot.alive { background: var(--brand); box-shadow: 0 0 6px var(--brand); }
#alive-dot.dead { background: var(--alarm); box-shadow: 0 0 6px var(--alarm); }
#last-scan { font-size: 11px; color: var(--muted); font-family: var(--font-data); }

/* TOP BAR — context label */
.topbar-context {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-heading);
  white-space: nowrap;
  flex-shrink: 0;
}

/* TOP BAR — search input (moved from filter-row) */
.topbar-search {
  flex: 0 0 240px;
  background: var(--ink-deep);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 5px 10px;
  font-size: 12px;
  font-family: var(--font-ui);
}
.topbar-search:focus { outline: none; border-color: var(--orange); }
.topbar-search::placeholder { color: var(--muted); }

/* TOP BAR — right cluster */
#topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.topbar-chips { display: flex; align-items: center; gap: 4px; }
.topbar-credits { color: var(--orange); font-weight: 600; }
.topbar-freshness { font-size: 11px; color: var(--muted); font-family: var(--font-data); white-space: nowrap; }

/* TOP BAR — icon button (bell, right-reopen) */
.topbar-icon-btn {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 15px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--radius-xs);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  transition: color 0.15s, background 0.15s;
}
.topbar-icon-btn:hover { color: var(--text); background: var(--hover-bg); }

/* Right-reopen button: hidden by default, shown when right sidebar is collapsed */
.topbar-right-reopen { display: none; }
#app-shell.right-collapsed .topbar-right-reopen { display: inline-flex; }

/* LANG SELECTOR */
#lang-select {
  background: var(--ink-deep);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 3px 6px;
  font-size: 12px;
  font-family: var(--font-ui);
  cursor: pointer;
  height: 26px;
}
#lang-select:focus { outline: none; border-color: var(--orange); }

/* ACCOUNT MENU */
.account-menu { position: relative; }
.account-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}
.account-avatar:hover { background: var(--border); border-color: var(--orange); }
.account-dropdown {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);   /* opens UPWARD from the bottom-left profile hub */
  left: 8px;
  right: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  min-width: 180px;
  box-shadow: var(--card-shadow);
  z-index: 200;
  overflow: hidden;
}
.account-dropdown.open { display: block; }
.account-email {
  padding: 8px 12px;
  font-size: 11px;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.account-dropdown-item {
  display: block;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text);
  text-decoration: none;
  transition: background 0.12s;
}
.account-dropdown-item:hover { background: var(--hover-bg); text-decoration: none; }
button.account-dropdown-item { width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer; font: inherit; }

.account-block:hover { background: var(--hover-bg); }
.account-block .account-avatar { width: 26px; height: 26px; font-size: 12px; flex: 0 0 auto; }
.account-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.account-name { color: var(--text); font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.account-sub { color: var(--muted); font-size: 10px; overflow: hidden; text-overflow: ellipsis; }

/* Settings modal (profile configuration) */
.settings-section { padding: 4px 0 8px; }
.settings-label { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.settings-options { display: flex; flex-direction: column; gap: 6px; }
.settings-option {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.settings-option:hover { background: var(--hover-bg); border-color: var(--muted); }
.settings-option.active { border-color: var(--orange); color: var(--orange); background: var(--accent-dim-bg); }
.settings-option-name { flex: 1; text-align: left; }
.settings-option-code { color: var(--muted); font-size: 11px; }
.settings-option.active .settings-option-code { color: var(--orange); }
.settings-option-check { display: inline-flex; }
.settings-option-check .icon { width: 14px; height: 14px; }
.settings-hint { margin-top: 10px; font-size: 11px; color: var(--muted); line-height: 1.5; }

/* Settings modal — preference-center extras */
.settings-section--permissions { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 12px; }
.settings-toggle-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 0; cursor: pointer;
}
.settings-toggle-row input[type="checkbox"] { flex-shrink: 0; margin-top: 2px; width: 16px; height: 16px; accent-color: var(--orange); cursor: pointer; }
.settings-toggle-text { display: flex; flex-direction: column; gap: 2px; }
.settings-toggle-label { font-size: 13px; color: var(--text); }
.settings-toggle-hint { font-size: 11px; color: var(--muted); line-height: 1.4; }
.settings-perm-warn {
  font-size: 11px; color: var(--orange);
  padding: 4px 8px; background: var(--accent-dim-bg);
  border-radius: 4px; margin-bottom: 4px;
}
.settings-save-msg { font-size: 12px; color: var(--muted); margin-top: 6px; }
.settings-quiet-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.settings-quiet-lbl { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.settings-time-input {
  border: 1px solid var(--border); border-radius: 4px;
  padding: 3px 6px; font-size: 13px; background: var(--bg); color: var(--text);
}
.settings-select {
  border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 10px; font-size: 13px; background: var(--bg); color: var(--text);
  width: 100%; cursor: pointer;
}
.settings-tg-linked { font-size: 13px; color: #22c55e; font-weight: 500; }


/* BOTTOM BAR */
#bottombar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  height: 32px;
  overflow: hidden;         /* one clean line; the long AI disclaimer truncates (below)
                              instead of wrapping inside its span and overlapping */
  border-top: 1px solid var(--border);
  background: var(--surface);
  font-size: 11px;
  color: var(--muted);
  flex-shrink: 0;
}
.footer-brand {
  font-weight: 700;
  color: var(--orange);
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  font-size: 11px;
}
.footer-sep { color: var(--border); user-select: none; }
.footer-spacer { flex: 0 0 4px; }
.footer-link { font-size: 11px; color: var(--muted); }
.footer-link:hover { color: var(--text); }
.footer-freshness { font-size: 11px; color: var(--muted); font-family: var(--font-data); }
.footer-copy { font-size: 11px; color: var(--muted); white-space: nowrap; }
.footer-version { font-size: 11px; color: var(--muted); opacity: .55; white-space: nowrap; font-family: var(--font-data); }

/* SIDEBAR LEFT */
#sidebar-left {
  width: 230px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width 0.25s var(--ease-bryk);
  flex-shrink: 0;
}
.sidebar-logo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  min-height: 52px;
}
.sidebar-logo .logo {
  font-size: 16px;
  font-weight: 700;
  color: var(--orange);
  font-family: var(--font-display);
  text-transform: lowercase;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
}
.left-toggle {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--radius-xs);
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
  line-height: 1;
}
.left-toggle:hover { color: var(--text); background: var(--hover-bg); }
.sidebar-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  overflow-y: auto;
  overflow-x: hidden;
}
.account-menu { position: relative; margin-top: auto; }
.account-block {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-top: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
  text-align: left;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  transition: background 0.12s;
}

/* NAV ITEMS (tab buttons in sidebar) */
.tab-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: none;
  border-left: 3px solid transparent;
  background: none;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  white-space: nowrap;
  width: 100%;
  text-align: left;
}
.tab-btn:hover { color: var(--text); background: var(--hover-bg); }
.tab-btn.active {
  color: var(--orange);
  border-left-color: var(--orange);
  background: var(--surface-2);
}
.nav-label { overflow: hidden; transition: opacity 0.2s; }
.tab-badge {
  display: inline-block;
  background: var(--orange);
  color: var(--bg);
  border-radius: 8px;
  font-size: 10px;
  padding: 0 5px;
  margin-left: 4px;
  font-weight: 700;
  vertical-align: middle;
}

/* COLLAPSED LEFT SIDEBAR */
#app-shell.left-collapsed #sidebar-left { width: 56px; }
#app-shell.left-collapsed .sidebar-logo .logo { opacity: 0; width: 0; overflow: hidden; }
#app-shell.left-collapsed .sidebar-logo { justify-content: center; }
#app-shell.left-collapsed .nav-label { opacity: 0; width: 0; overflow: hidden; }
#app-shell.left-collapsed .account-block .nav-label { opacity: 0; width: 0; overflow: hidden; }

/* RIGHT SIDEBAR */
#sidebar-right {
  width: 260px;
  background: var(--surface);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width 0.25s var(--ease-bryk);
  flex-shrink: 0;
}
#app-shell.right-collapsed #sidebar-right { width: 0; overflow: hidden; }
.sidebar-right-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  min-height: 52px;
  white-space: nowrap;
  overflow: hidden;
}
.sidebar-right-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-heading);
  overflow: hidden;
}
.right-toggle {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--radius-xs);
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
  line-height: 1;
}
.right-toggle:hover { color: var(--text); background: var(--hover-bg); }
#top-okazje {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}
.okazja-row {
  display: flex;
  gap: 8px;
  padding: 8px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  align-items: flex-start;
  transition: background 0.12s;
}
.okazja-row:hover { background: var(--hover-bg); }
.okazja-body {
  flex: 1;
  min-width: 0;
}
.okazja-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px;
}
.alerts-block {
  border-top: 1px solid var(--border);
  padding: 10px 12px;
  white-space: nowrap;
  overflow: hidden;
}
.alerts-block-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  margin-bottom: 6px;
}
.alerts-upsell {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4;
}
.alerts-upsell a {
  color: var(--orange);
  font-weight: 700;
}
.alerts-coming-soon {
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
}

/* SECTIONS */
.section {
  margin: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.section-header {
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--brand);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
}
.section-header .count {
  color: var(--muted);
  font-family: var(--font-data);
}
.empty-state {
  padding: 24px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}

/* FILTER ROW */
.filter-row {
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  align-items: center;
  flex-wrap: wrap;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  margin: 0 16px;
  margin-top: 12px;
  border-radius: 6px 6px 0 0;
}
.filter-row input[type=text] {
  background: var(--ink-deep);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 5px 10px;
  font-size: 12px;
  width: 200px;
}
.filter-row input[type=text]:focus { outline: none; border-color: var(--orange); }
.filter-row select {
  background: var(--ink-deep);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 5px 10px;
  font-size: 12px;
}
.filter-row select:focus { outline: none; border-color: var(--orange); }
.chip-group { display: flex; gap: 4px; }
.chip {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 11px;
  cursor: pointer;
  background: var(--bg);
  color: var(--muted);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  user-select: none;
}
.chip:hover { background: var(--border); }
.chip.active { border-color: var(--orange); color: var(--orange); background: var(--accent-dim-bg); }
.toggle-chip {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  background: var(--bg);
  color: var(--muted);
  user-select: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.toggle-chip:hover { background: var(--border); }
.toggle-chip.active { border-color: var(--orange); color: var(--orange); background: var(--accent-dim-bg); }

/* NEW ROW HIGHLIGHT */
tr.row-new td { border-left: none; }
tr.row-new td:first-child { border-left: 3px solid var(--orange); padding-left: 7px; }
tr.row-new { background: var(--hover-bg); }

/* SORTABLE COLUMN HEADERS */
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--text); }
th.sort-asc::after { content: ' \2191'; color: var(--brand); }
th.sort-desc::after { content: ' \2193'; color: var(--brand); }

/* TRACKED CARDS */
#tracked-cards {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.tracked-card {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  align-items: flex-start;
  transition: opacity 0.3s, background 0.3s;
}
.tracked-card:last-child { border-bottom: none; }
.tracked-card.fade-out { opacity: 0; }
.card-thumb {
  width: 96px; height: 72px;
  object-fit: cover;
  border-radius: 3px;
  background: var(--border);
  flex-shrink: 0;
}
.card-thumb-placeholder {
  width: 96px; height: 72px;
  background: var(--border);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 20px;
  flex-shrink: 0;
}
.card-body { flex: 1; min-width: 0; }
.card-title {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}
.card-meta {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 6px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.card-prices {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  margin-bottom: 6px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.price-item { display: flex; flex-direction: column; gap: 1px; }
.price-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.price-val { font-size: 14px; font-weight: 600; }
.card-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.countdown {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 700;
}
.countdown.urgent { color: var(--alarm); animation: pulse 1s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.countdown.normal { color: var(--brand); }
.countdown.warning { color: var(--orange); }
.countdown.muted { color: var(--muted); font-weight: 400; font-size: 12px; }

/* MARGIN PILL — V8: green-intensity number + 3-slot bar indicator */
/* Colour is never the only channel: bars encode band shape (WCAG 1.4.1). */
.margin-pill { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-family: var(--font-data); font-size: 11px; }
.margin-pill .num { font-weight: 700; font-variant-numeric: tabular-nums; }
.margin-pill .num.loss { color: var(--danger); }
.margin-pill .num.thin { color: #7fbf95; }
.margin-pill .num.ok   { color: #3fc07a; }
.margin-pill .num.good { color: var(--success); }
.margin-pill .pct { font-size: 10px; opacity: 0.75; font-variant-numeric: tabular-nums; }
.margin-pill .bars { display: inline-flex; gap: 2px; margin-left: 3px; align-items: center; }
.margin-pill .bar { width: 4px; height: 12px; border-radius: 1px; background: var(--border); }
.margin-pill .bar.on-loss { background: var(--danger); }
.margin-pill .bar.on-thin { background: #7fbf95; }
.margin-pill .bar.on-ok   { background: #3fc07a; }
.margin-pill .bar.on-good { background: var(--success); }

/* DEMAND PILL */
.demand-pill {
  display: inline-block;
  border-radius: 6px;
  padding: 2px 6px;
  font-family: var(--font-data);
  font-size: 11px;
  font-weight: 700;
  background: transparent;
}
.demand-pill.high { color: var(--success); border: 1px solid var(--success); }
.demand-pill.mid  { color: var(--gold, #f5b020); border: 1px solid var(--gold, #f5b020); }
.demand-pill.low  { color: var(--danger); border: 1px solid var(--danger); }

/* ACTION BUTTONS — outline-first */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
  min-height: 34px;
  transition: background 0.12s, border-color 0.12s, color 0.12s, transform var(--dur-fast) var(--ease-out);
}
.btn:hover { background: var(--hover-bg); border-color: var(--muted); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn.primary { background: var(--orange); border-color: var(--orange); color: #0c0f15; font-weight: 600; }
.btn.primary:hover { background: #d9591f; border-color: #d9591f; color: #0c0f15; }
.btn.accept { border-color: var(--success); color: var(--success); }
.btn.accept:hover { background: rgba(46,204,113,0.10); }
.btn.ignore { border-color: var(--danger); color: var(--danger); }
.btn.ignore:hover { background: rgba(255,89,100,0.10); }
.btn.untrack { border-color: var(--muted); color: var(--muted); }
.btn.untrack:hover { background: var(--hover-bg); }
.btn.analyze { border-color: var(--orange); color: var(--orange); }
.btn.analyze:hover { background: var(--accent-dim-bg); }

/* Scrollbars — plan2skill style: thin, transparent track, --border thumb.
   Applied to the shell scroll containers so the seam between #main and the
   right sidebar reads as one calm surface instead of a chunky OS bar. */
#main, #sidebar-left, #sidebar-right, .modal-body, .potential-wrap {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
#main::-webkit-scrollbar,
#sidebar-left::-webkit-scrollbar,
#sidebar-right::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,
.potential-wrap::-webkit-scrollbar { width: 6px; height: 6px; }
#main::-webkit-scrollbar-track,
#sidebar-left::-webkit-scrollbar-track,
#sidebar-right::-webkit-scrollbar-track,
.modal-body::-webkit-scrollbar-track,
.potential-wrap::-webkit-scrollbar-track { background: transparent; }
#main::-webkit-scrollbar-thumb,
#sidebar-left::-webkit-scrollbar-thumb,
#sidebar-right::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb,
.potential-wrap::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
#main::-webkit-scrollbar-thumb:hover,
#sidebar-left::-webkit-scrollbar-thumb:hover,
#sidebar-right::-webkit-scrollbar-thumb:hover,
.modal-body::-webkit-scrollbar-thumb:hover,
.potential-wrap::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* Labeled row actions (icon + text) — clarity for non-technical resellers.
   2×2 grid keeps labels visible while staying compact (dense table). */
.row-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; min-width: 168px; }
.btn-act { font-size: 11px; padding: 4px 8px; min-height: 26px;
  display: inline-flex; align-items: center; justify-content: flex-start;
  gap: 5px; line-height: 1; }
.btn-act .icon { width: 13px; height: 13px; flex: 0 0 auto; }
.btn-act .btn-lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* TABLES */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.data-table th {
  padding: 7px 10px;
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  white-space: nowrap;
}
.data-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--row-border);
  vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr { transition: opacity 0.3s, background 0.3s; }
.data-table tr.fade-out { opacity: 0; }
.data-table tr:hover td { background: var(--hover-bg); }
.mini-thumb {
  width: 48px; height: 36px;
  object-fit: cover;
  border-radius: 2px;
  background: var(--border);
}
.mini-thumb-placeholder {
  width: 48px; height: 36px;
  background: var(--border);
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 14px;
}
.mono { font-family: var(--font-data); font-variant-numeric: tabular-nums; }
.wadium-near { color: var(--alarm); font-weight: 700; }
.type-badge {
  display: inline-block;
  padding: 1px 5px;
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* HISTORY STATS */
.stats-row {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.delta-pos { color: var(--brand); font-family: var(--font-data); }
.delta-neg { color: var(--alarm); font-family: var(--font-data); }

/* SOURCE BADGE */
.source-badge {
  display: inline-block;
  padding: 1px 5px;
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
  letter-spacing: 0.03em;
}

/* PAGINATION */
.pagination {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: 12px;
  color: var(--muted);
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.pagination button {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text);
  padding: 4px 10px;
  cursor: pointer;
  font-size: 12px;
}
.pagination button:disabled { opacity: 0.4; cursor: not-allowed; }
.pagination button:not(:disabled):hover { background: var(--border); }

/* TOAST */
#toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 12px;
  color: var(--text);
  max-width: 340px;
  box-shadow: var(--card-shadow);
  animation: toast-in var(--dur-base) var(--ease-out);
}
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.toast.toast--out { animation: toast-out var(--dur-base) var(--ease-out) forwards; }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }
.toast-msg { flex: 1 1 auto; min-width: 0; }
.toast-ic { flex: 0 0 auto; display: inline-flex; }
.toast-ic .icon { width: 16px; height: 16px; }
.toast-success { border-left-color: var(--success); }
.toast-success .toast-ic { color: var(--success); }
.toast-error { border-left-color: var(--alarm); }
.toast-error .toast-ic { color: var(--alarm); }
.toast-info { border-left-color: var(--border-interactive); }
.toast-undo-btn { margin-left: 8px; background: none; border: 1px solid var(--orange); color: var(--orange); border-radius: 3px; cursor: pointer; padding: 1px 8px; }

/* STALE BANNER */
#stale-banner { background: var(--pill-bad-bg); color: var(--alarm); padding: 6px 16px;
  font-size: 12px; text-align: center; }

/* POTENTIAL TABLE WRAPPER */
.potential-wrap {
  margin: 0 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 6px 6px;
  overflow: hidden;
}

/* MODAL OVERLAY */
#modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
#modal-overlay.open { display: flex; animation: overlay-in var(--dur-fast) ease-out; }
#modal-overlay.open .modal-box { animation: modal-in var(--dur-bryk) var(--ease-out); }
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
.modal-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  max-width: 860px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
.modal-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.modal-title {
  flex: 1;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.modal-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 3px;
  flex-shrink: 0;
}
.modal-close:hover { color: var(--text); background: var(--border); }
.modal-body {
  overflow-y: auto;
  flex: 1;
  padding: 16px;
}
.modal-footer {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
  flex-shrink: 0;
}
/* Opening the auction is the product's end goal — the dominant footer action, but
   proportionate: a bit larger and always first, not stretched across the whole row. */
.modal-footer .btn.footer-cta {
  flex: 0 0 auto; justify-content: center;
  min-height: 40px; min-width: 200px; padding: 9px 20px; font-size: 13.5px; font-weight: 700;
}
/* Weighted CTA sits apart, pushed to the right edge; subordinate actions stay left. */
.modal-footer .btn.cta-right { margin-left: auto; }

/* Compact auth-card variant — a focused ~420px dialog, not the 860px data box.
   The header bar collapses to just the close control; branding lives in the body. */
.modal-box--sm { max-width: 420px; }
.modal-box--md { max-width: 560px; }
.modal-box--sm .modal-header { padding: 0; border-bottom: none; min-height: 0; }
.modal-box--sm .modal-title {  /* kept for aria-labelledby, hidden visually */
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.modal-box--sm .modal-close { position: absolute; top: 14px; right: 14px; z-index: 2; }
.modal-box--sm .modal-body { padding: 30px 26px 24px; }

/* DETAIL BUTTON */
.btn.detail { border-color: var(--muted); color: var(--muted); }
.btn.detail:hover { background: var(--hover-bg); }

/* REPORT BUTTON */
.btn.report { border-color: var(--muted); color: var(--text); }
.btn.report:hover { background: rgba(75,126,245,0.1); }

/* REPORT MODAL */
.report-section { margin-bottom: 16px; }
.report-section h3 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand);
  margin-bottom: 8px;
  font-weight: 700;
}
.cost-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.cost-table td { padding: 4px 8px; border-bottom: 1px solid var(--row-border); }
.cost-table td:last-child { text-align: right; font-family: var(--font-data); }
.cost-table tr:last-child td { border-bottom: none; font-weight: 700; color: var(--brand); }
.cost-table tr.total-row td { border-top: 1px solid var(--border); }
.verdict-pass { color: var(--brand); font-weight: 700; font-size: 14px; }
.verdict-fail { color: var(--alarm); font-weight: 700; font-size: 14px; }


/* Analysis in progress: the primary action stays visibly busy across re-renders */
.btn-act.is-analyzing { opacity: 0.75; cursor: progress; }
.btn-act.is-analyzing .icon { animation: brykam-spin 1.4s linear infinite; }
@keyframes brykam-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn-act.is-analyzing .icon { animation: none; }
}


/* Mobile: the facet panel is ~677px tall and pushed the lots two screens down,
   so it starts collapsed behind an explicit toggle. */
#filters-toggle { display: none; }
@media (max-width: 768px) {
  #filters-toggle { display: inline-flex; margin: 0 0 8px; }
  #facet-panel { display: none; }
  #app-shell.filters-open #facet-panel { display: block; }
}


/* Brand lockup: full wordmark in the expanded sidebar, mark only when collapsed. */
/* Brand rules: compact lockup min height 32px; square icon min 32px in UI. */
.logo-img { height: 32px; width: auto; max-width: 160px; object-fit: contain; display: block; }
.logo-mark { height: 32px; width: 32px; object-fit: contain; display: none; }
#app-shell.left-collapsed .logo-img { display: none; }
#app-shell.left-collapsed .logo-mark { display: block; }


/* AI transparency (AI Act Art. 50): visible notice on generated content. */
.ai-notice {
  display: flex; align-items: flex-start; gap: 8px;
  background: var(--accent-dim-bg);
  border: 1px solid var(--orange);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 14px;
  font-size: 11px; line-height: 1.45; color: var(--text);
}
.ai-notice .icon { width: 14px; height: 14px; flex: 0 0 auto; color: var(--orange); margin-top: 1px; }
.footer-ai {
  color: var(--muted);
  flex: 1 1 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* R3: MF attribution — present + visible (ellipsized, full text in title). */
.footer-attr {
  color: var(--faint); flex: 1 1 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: help;
}
.ai-value { cursor: help; }


/* Runs status: the one condition fact worth its own column (ecarstrade-style). */
.runs-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; white-space: nowrap; }
.runs-badge .icon { width: 12px; height: 12px; flex: 0 0 auto; }
.runs-badge.no { color: var(--danger); font-weight: 600; }
.runs-badge.yes { color: var(--muted); }
.runs-badge.unknown { color: var(--muted); }
.ai-tag {
  font-size: 8.5px; font-weight: 700; letter-spacing: .04em;
  color: var(--orange); border: 1px solid var(--orange);
  border-radius: 3px; padding: 0 3px; line-height: 1.35; opacity: .8;
}


/* Row action hierarchy (research: exactly ONE differentiated action per row —
   Polaris "avoid more than two filled buttons", Carbon). «Aukcja» is that action:
   it is the product's end goal, taking the dealer to the auction to bid.
   Position is NOT justified by scan-pattern claims — every one of those was
   refuted — but by grouping and staying stable across tabs. */
.row-actions { grid-template-columns: 1fr 1fr; }
.row-actions .btn-act { justify-content: center; }
.row-actions .btn-act.act-go { grid-column: 1 / -1; }
.btn.act-go { background: var(--orange); border-color: var(--orange); color: #0c0f15; font-weight: 600; }
.btn.act-go:hover { background: #d9591f; border-color: #d9591f; color: #0c0f15; }
.btn.act-analyze-2 { border-color: var(--orange); color: var(--orange); background: transparent; }
.btn.act-analyze-2:hover { background: var(--accent-dim-bg); }
.btn.act-track { border-color: var(--border-interactive); color: var(--text); }
.btn.act-track:hover { background: var(--hover-bg); border-color: var(--muted); }
/* Destructive: ghost + pulled away from the rest (convention + existing undo,
   not a normative rule — the WCAG-based justification for separation was refuted). */
.btn.act-hide { border-color: transparent; color: var(--muted); grid-column: 1 / -1; margin-top: 2px; }
.btn.act-hide:hover { border-color: var(--danger); color: var(--danger); background: transparent; }

/* AI action: sparkle glyph + a restrained shimmer that sweeps the button on hover/focus.
   Signals "this is AI" in our orange, not the purple cliché; idle state stays calm so the
   row doesn't twinkle. Respects reduced-motion. */
.btn.ai-action { position: relative; overflow: hidden; }
.btn.ai-action .icon:first-child { transition: transform .2s ease; }
.btn.ai-action:hover .icon:first-child,
.btn.ai-action:focus-visible .icon:first-child { transform: rotate(-8deg) scale(1.12); }
.btn.ai-action::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(240,104,48,.28), transparent);
  transform: skewX(-18deg); opacity: 0; pointer-events: none;
}
.btn.ai-action:hover::after,
.btn.ai-action:focus-visible::after { animation: ai-shimmer 1.1s ease; }
@keyframes ai-shimmer { 0% { left: -60%; opacity: 0; } 12% { opacity: 1; } 100% { left: 130%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .btn.ai-action::after { display: none; }
  .btn.ai-action:hover .icon:first-child, .btn.ai-action:focus-visible .icon:first-child { transform: none; }
}

/* Report confirm step */
.confirm-ai { display: flex; flex-direction: column; gap: 10px; }
.confirm-lead { font-size: 14px; color: var(--text); }
.confirm-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text); }
.confirm-row .icon { width: 16px; height: 16px; flex: 0 0 auto; color: var(--orange); }
.confirm-disclaimer {
  margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--border);
  font-size: 11.5px; line-height: 1.5; color: var(--muted);
}

/* Vehicle identity cell: derived headline + compact text metadata.
   Raw KAS announcement title stays in the detail modal (legally identifying). */
.vehicle-cell {
  display: flex; flex-direction: column; gap: 2px;
  background: none; border: 0; padding: 0; cursor: pointer;
  text-align: left; font: inherit; color: inherit; width: 100%;
  text-decoration: none;   /* never underline the whole compound cell */
}
.vehicle-head { color: var(--text); font-size: 12px; font-weight: 600; line-height: 1.3; }
.vehicle-cell:hover .vehicle-head,
.vehicle-cell:focus-visible .vehicle-head { text-decoration: underline; }
.vehicle-meta {
  color: var(--muted); font-size: 10.5px; line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

/* Demand: signal bars are redundant coding; the text label carries the meaning. */
.demand-pill { display: inline-flex; align-items: center; gap: 5px; }
.demand-bars { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 10px; }
.demand-bar { width: 3px; background: currentColor; opacity: 0.25; border-radius: 1px; }
.demand-bar.b1 { height: 4px; }
.demand-bar.b2 { height: 7px; }
.demand-bar.b3 { height: 10px; }
.demand-bar.on { opacity: 1; }

.verdict-criteria { margin-top: 8px; display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; color: var(--muted); }
.comparables-list { list-style: none; padding: 0; margin: 0; }
.comparables-list li { padding: 3px 0; }
.comparables-list a { font-size: 12px; color: var(--text); text-decoration: underline; }

/* PHOTO GALLERY */
/* gallery-root: outermost wrapper for the full gallery block */
.gallery-root { }
/* gallery-wrap: PhotoSwipe anchor container — position:relative for potential overlays */
.gallery-wrap { position: relative; display: block; }
/* pswp-item: each <a> wrapping a photo for PhotoSwipe; only first is visually shown inline */
.gallery-wrap a.pswp-item { display: none; }
.gallery-wrap a.pswp-item:first-child { display: block; cursor: zoom-in; }
.gallery-main {
  width: 100%;
  height: 260px;
  object-fit: contain;
  background: var(--bg);
  border-radius: 4px;
  border: 1px solid var(--border);
  display: block;
}
.gallery-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.gallery-nav button {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text);
  padding: 4px 10px;
  cursor: pointer;
  font-size: 14px;
}
.gallery-nav button:disabled { opacity: 0.35; cursor: not-allowed; }
.gallery-nav button:not(:disabled):hover { background: var(--border); }
.gallery-counter { font-size: 12px; color: var(--muted); font-family: var(--font-data); }
.gallery-thumbs {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.gallery-thumb {
  width: 56px;
  height: 42px;
  object-fit: cover;
  border-radius: 2px;
  border: 2px solid transparent;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s, border-color 0.15s;
}
.gallery-thumb:hover { opacity: 1; }
.gallery-thumb.active { border-color: var(--brand); opacity: 1; }
.gallery-empty {
  padding: 32px;
  text-align: center;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 12px;
}

/* FACTS GRID */
.facts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
  margin-top: 14px;
  margin-bottom: 14px;
}
.fact-item {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 10px;
}
.fact-label {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 3px;
}
.fact-val {
  font-family: var(--font-data);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

/* PARAMS TABLE */
.params-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 10px; }
.params-table td { padding: 4px 8px; border-bottom: 1px solid var(--row-border); }
.params-table td:first-child { color: var(--muted); width: 40%; }
.params-table tr:last-child td { border-bottom: none; }
.attr-badge-ai { display: inline-block; font-size: 9px; font-weight: 700; color: var(--bg); background: var(--accent); border-radius: 3px; padding: 0 4px; vertical-align: middle; letter-spacing: 0.03em; cursor: default; }
.attr-chip { display: inline-block; font-size: 11px; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; margin: 1px 2px; color: var(--text); }

/* DESCRIPTION BLOCK */
.description-block {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px 12px;
  font-size: 12px;
  color: var(--text);
  max-height: 140px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  margin-top: 10px;
}

/* ============ A11Y ============ */
.chip, .toggle-chip { font: inherit; }
.lot-link {
  background: none;
  border: none;
  color: var(--text);
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  font: inherit;
  text-align: left;
}
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .countdown.urgent { animation: none; }
}

/* ============ BURGER BUTTON (mobile-only nav trigger) ============ */
#nav-burger {
  display: none;
  background: none;
  border: none;
  color: var(--text);
  font-size: 20px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--radius-xs);
  line-height: 1;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}
#nav-burger:hover { color: var(--orange); background: var(--hover-bg); }

/* ============ RESPONSIVE ============ */

/* 1100px: auto-collapse right sidebar */
@media (max-width: 1100px) {
  #app-shell { grid-template-columns: auto 1fr 0; }
  #sidebar-right { width: 0; overflow: hidden; }
}

/* 768px: single-column, left sidebar as off-canvas drawer */
@media (max-width: 768px) {
  /* Prevent horizontal overflow on mobile */
  html, body { overflow-x: hidden; }
  #app-shell { overflow-x: hidden; }

  #nav-burger { display: inline-flex; align-items: center; }

  #app-shell {
    grid-template-columns: 1fr;
    /* Rows must be redeclared here too: the desktop 3-row template plus the
       right sidebar (still a grid item) produced five implicit rows, and the
       phantom one swallowed ~400px, squeezing the lot list to ~100px. */
    grid-template-rows: 52px 1fr auto;
    grid-template-areas:
      "top"
      "main"
      "bot";
  }
  #sidebar-right { display: none; }

  #sidebar-left {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 200;
    transform: translateX(-100%);
    transition: transform 0.2s;
    width: 230px;
  }
  #app-shell.drawer-open #sidebar-left { transform: none; }

  /* Neutralise desktop left-collapse state inside mobile drawer */
  #app-shell.left-collapsed #sidebar-left { width: 230px; }
  #app-shell.left-collapsed .nav-label,
  #app-shell.left-collapsed .account-block .nav-label { opacity: 1; width: auto; overflow: visible; }
  #app-shell.left-collapsed .sidebar-logo .logo { opacity: 1; width: auto; overflow: visible; }
  #app-shell.left-collapsed .sidebar-logo { justify-content: flex-start; }

  /* Drawer overlay backdrop */
  #app-shell.drawer-open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 199;
    pointer-events: auto;
  }

  /* Right sidebar stays hidden at mobile */
  #sidebar-right { width: 0; overflow: hidden; }

  /* Table hidden on mobile; cards shown */
  .potential-wrap, #analyzed-table { display: none; }
  #potential-cards { display: block !important; margin: 0 8px; }

  /* Topbar: shrink search, allow wrap, hide secondary items */
  #topbar { padding: 6px 8px; gap: 6px; flex-wrap: wrap; }
  .topbar-search { flex: 1 1 120px; min-width: 0; max-width: 100%; }
  #topbar-right { flex-shrink: 1; gap: 4px; }
  #stat-chips { display: none; } /* hide stat chips on mobile — too many chips */
  #budgets { display: none; } /* owner telemetry not needed on mobile */
  .topbar-freshness { display: none; } /* hide freshness text on mobile */

  /* Footer: allow wrap on narrow screens */
  #bottombar { flex-wrap: wrap; height: auto; min-height: 32px; padding: 4px 12px; }

  .filter-row { margin: 8px; padding: 8px; flex-wrap: wrap; }
  .filter-row input[type=text] { width: 100%; flex: 1 1 100%; }
  .chip-group { flex-wrap: wrap; }
  .section { margin: 8px; }
  .btn, .chip, .toggle-chip { min-height: 40px; display: inline-flex; align-items: center; }
  .tracked-card { flex-wrap: wrap; }
  .modal-box { max-height: 96vh; }
  .facet-panel { margin: 0 8px; }
  .facet-row { flex-wrap: wrap; }
}

/* ============ FACET PANEL ============ */
.facet-panel {
  margin: 0 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.facet-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.facet-row-ranges {
  border-top: 1px solid var(--border);
  padding-top: 8px;
  margin-top: 2px;
}
.facet-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 110px;
}
.facet-field-narrow {
  min-width: 90px;
  max-width: 130px;
}
.facet-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 600;
  font-family: var(--font-display);
}
.facet-select {
  background: var(--ink-deep);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--text);
  padding: 5px 8px;
  font-size: 12px;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: border-color var(--dur-fast);
  min-width: 0;
}
.facet-select:focus {
  outline: none;
  border-color: var(--orange);
}
.facet-input {
  background: var(--ink-deep);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--text);
  padding: 5px 8px;
  font-size: 12px;
  font-family: var(--font-data);
  width: 100%;
  transition: border-color var(--dur-fast);
}
.facet-input:focus {
  outline: none;
  border-color: var(--orange);
}
.facet-input::placeholder { color: var(--muted); }
.facet-reset-btn {
  font-size: 11px;
  color: var(--muted);
  border-color: var(--border);
  white-space: nowrap;
  align-self: flex-end;
}
.facet-reset-btn:hover { color: var(--text); background: var(--border); }

/* ============ FACET LOCK BANNER ============ */
.facet-lock {
  margin: 0 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: none;
  padding: 12px 16px;
}
.facet-lock-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  position: relative;
  overflow: hidden;
}
.facet-lock-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--orange);
  opacity: 0.05;
  pointer-events: none;
}
.facet-lock-icon {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
}
.facet-lock-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
}
.facet-lock-desc {
  font-size: 11px;
  color: var(--muted);
}
.facet-lock-cta {
  margin-left: auto;
  flex-shrink: 0;
}

/* ============ COUNTRY BADGE ============ */
.country-badge {
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  vertical-align: middle;
  margin-left: 2px;
}

/* ============ TEASER ROW ============ */
.row-teaser td {
  background: var(--surface-2);
  opacity: 0.85;
}
.row-teaser:hover td { background: var(--surface-2); }
/* Pinned lot (deep-linked from the marketing showcase): revealed + highlighted,
   full opacity, an orange accent, and a brief flash to catch the eye on arrival. */
.row-teaser.row-pinned td { opacity: 1; background: rgba(240, 104, 48, 0.09); animation: row-pin-flash 1.6s ease-out; }
.row-teaser.row-pinned td:first-child { box-shadow: inset 3px 0 0 var(--orange); }
@keyframes row-pin-flash { from { background: rgba(240, 104, 48, 0.30); } to { background: rgba(240, 104, 48, 0.09); } }
@media (prefers-reduced-motion: reduce) { .row-teaser.row-pinned td { animation: none; } }
/* Pinned-row card trigger */
.anon-card-trigger { background: none; border: none; padding: 0; margin: 0; font: inherit;
  color: inherit; text-align: left; cursor: pointer; }
.anon-card-trigger:hover .vehicle-head { text-decoration: underline; }
.card-hint { display: inline-block; margin-left: 6px; color: var(--orange); font-size: 11px; font-weight: 600; white-space: nowrap; }

/* Anonymous lot card (deep-linked showcase car): specs + real numbers + AI-analysis hook. */
.anon-card { display: flex; flex-direction: column; gap: 16px; }
.ac-hero { display: flex; gap: 12px; align-items: flex-start; }
.ac-hero img { width: 88px; height: 66px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; }
.ac-id { min-width: 0; }
.ac-loc { color: var(--muted); font-size: 12px; margin-top: 4px; }
.ac-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 14px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.ac-metric { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ac-metric-l { font-size: 10px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }
.ac-metric-v { font-size: 13px; }
.ac-ai { border: 1px solid var(--border-interactive); border-radius: 12px; padding: 14px 16px;
  background: linear-gradient(180deg, rgba(240, 104, 48, 0.07), transparent); }
.ac-ai-head { display: flex; gap: 10px; align-items: flex-start; }
.ac-ai-head > .icon { width: 20px; height: 20px; color: var(--orange); flex: 0 0 auto; margin-top: 1px; }
.ac-ai-title { font-weight: 700; font-size: 14px; }
.ac-ai-lead { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.ac-ai-list { list-style: none; margin: 12px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ac-ai-item { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.ac-ai-item .icon { width: 14px; height: 14px; color: var(--muted); flex: 0 0 auto; }
.ac-ai-cta { width: 100%; justify-content: center; min-height: 46px; font-size: 14px; font-weight: 700;
  animation: ac-cta-glow 2.4s ease-in-out infinite; }
.ac-ai-cta .icon { width: 16px; height: 16px; }
@keyframes ac-cta-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(240, 104, 48, 0); }
  50% { box-shadow: 0 0 0 4px rgba(240, 104, 48, 0.18); } }
.ac-ai-note { text-align: center; color: var(--muted); font-size: 11.5px; margin: 8px 0 0; }
.ac-source { color: var(--faint); font-size: 10.5px; line-height: 1.4; margin: 14px 0 0; text-align: center; }
@media (prefers-reduced-motion: reduce) { .ac-ai-cta { animation: none; } }
@media (max-width: 480px) { .ac-metrics { grid-template-columns: repeat(2, 1fr); } }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Finished tab: ended lots are past-tense — dim them and swap the countdown for a flag. */
.finished-row { opacity: .72; }
.finished-row:hover { opacity: 1; }
.ended-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); white-space: nowrap; }
.ended-badge .icon { width: 13px; height: 13px; flex: 0 0 auto; }

/* Source ("auction name") inside the identity cell — small, muted, under the meta line. */
.vehicle-src { display: block; margin-top: 2px; }
.source-badge.sm { font-size: 9.5px; padding: 0 5px; }

/* Detail modal — verdict-first layout (redesign 2026-09-14).
   The five decision metrics lead in a prominent strip; clerical facts sit below, muted. */
.detail-verdict {
  margin: 14px 0 6px; padding: 14px 16px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.dv-ident { margin-bottom: 12px; }
.dv-head { font-size: 16px; font-weight: 700; color: var(--ink); }
/* dv-kas-title: raw KAS bureaucratic announcement name — shown small/muted below the headline (Option C). */
.dv-kas-title { display: block; margin-top: 3px; font-size: 11px; color: var(--faint); line-height: 1.4; }
.dv-meta { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.dv-metrics {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;
}
.dv-metric {
  display: flex; flex-direction: column; gap: 5px;
  padding: 8px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
}
.dv-mlabel { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.dv-mval { font-size: 14px; color: var(--text); }
.dv-ai { margin-top: 12px; font-size: 11px; line-height: 1.5; color: var(--muted); }
.facts-grid.secondary .fact-label { color: var(--muted); }
.facts-grid.secondary { opacity: .9; }
@media (max-width: 680px) {
  .dv-metrics { grid-template-columns: repeat(2, 1fr); }
}

/* Data-freshness footer: clock icon + humanized age; amber when the feed is stale (>2h). */
.footer-freshness .icon { width: 12px; height: 12px; vertical-align: -2px; opacity: .8; }
.footer-freshness.stale { color: var(--gold); }

/* Anonymous freemium preview: register banner + topbar CTA. */
#anon-banner {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin: 16px 16px 12px; padding: 12px 16px;
  background: var(--accent-dim-bg); border: 1px solid var(--orange); border-radius: var(--radius-lg);
}
/* Align the lot table to the same 16px gutter as the banner/filters (consistent rhythm). */
.potential-wrap { margin: 0 16px; }
#anon-banner-text { flex: 1 1 auto; font-size: 13px; color: var(--text); }
#anon-banner .btn { flex: 0 0 auto; text-decoration: none; }
.stat-chip.anon-cta { background: var(--orange); border-color: var(--orange); color: #0c0f15; font-weight: 700; }
.stat-chip.anon-cta:hover { background: #d9591f; }

/* Teaser lock CTA: SVG lock (matches the icon system, no raw emoji). */
.btn.teaser-cta { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; }
.btn.teaser-cta .icon { width: 12px; height: 12px; }

/* Blurred teaser cells: real-styled FAKE pills, unreadable but shaped like data. */
.teaser-cell .teaser-fake {
  display: inline-flex; align-items: center;
  filter: blur(4px) saturate(.7); opacity: .55;
  user-select: none; pointer-events: none;
}

/* Registration modal (magic-link, over the blurred preview). */
.reg-modal { display: flex; flex-direction: column; gap: 14px; }
/* Auth tab-toggle (Register | Login) */
.reg-tabs { display: flex; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); margin-bottom: 2px; }
.reg-tab { flex: 1; padding: 8px 4px; font-size: 13px; font-weight: 600; text-align: center;
  background: transparent; color: var(--muted); border: none; cursor: pointer;
  transition: background var(--dur-fast, 0.15s), color var(--dur-fast, 0.15s); }
.reg-tab:first-child { border-right: 1px solid var(--border); }
.reg-tab[aria-selected="true"] { background: var(--orange, #f06830); color: #fff; }
.reg-tab:focus-visible { outline: 2px solid var(--orange, #f06830); outline-offset: -2px; }
.reg-logo { height: 30px; width: auto; display: block; margin: 0 auto; }
.reg-heading { text-align: center; font-size: 19px; font-weight: 700; color: var(--text);
  margin: 2px 0 0; line-height: 1.25; }
.reg-slogan { text-align: center; font-size: 13px; color: var(--muted); margin: -6px 0 2px;
  line-height: 1.5; }
.reg-sub { font-size: 13px; color: var(--muted); margin: 0; }
.reg-tg { display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; min-height: 42px; background: var(--surface-2);
  border: 1px solid var(--border-interactive); color: var(--text); text-decoration: none;
  font-weight: 600; }
.reg-tg:hover { background: var(--hover-bg); border-color: #28a8e9; }
.reg-tg .tg-logo { flex: 0 0 auto; border-radius: 50%; }
.tg-slot { display: flex; justify-content: center; min-height: 42px; }
.tg-slot iframe { border-radius: 8px !important; }
.reg-or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 11px; }
.reg-or::before, .reg-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
#reg-form { display: flex; flex-direction: column; gap: 8px; }
.reg-label { font-size: 12px; color: var(--muted); }
.reg-input { background: var(--ink-deep); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); padding: 9px 12px; font-size: 14px; }
.reg-input:focus { outline: none; border-color: var(--orange); }
.reg-consent { display: flex; align-items: flex-start; gap: 8px; font-size: 11.5px;
  color: var(--muted); line-height: 1.5; }
.reg-consent a { color: var(--orange); }
.reg-consent input { margin-top: 2px; flex: 0 0 auto; }
.reg-error { color: var(--danger); font-size: 12px; }
.reg-submit { min-height: 42px; justify-content: center; font-weight: 600; }
.reg-note { font-size: 11px; color: var(--muted); text-align: center; margin: 2px 0 0; }
.reg-sent { text-align: center; display: flex; flex-direction: column; gap: 12px;
  align-items: center; max-width: 360px; margin: 0 auto; }
.reg-check { width: 48px; height: 48px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success);
  animation: reg-pop var(--dur-bryk) var(--ease-bryk) both; }
.reg-check .icon { width: 24px; height: 24px;
  animation: reg-check-in var(--dur-base) var(--ease-out) 0.1s both; }
@keyframes reg-pop { 0% { transform: scale(0.2); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(1); } }
@keyframes reg-check-in { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: none; } }
.reg-sent p { color: var(--muted); font-size: 13px; line-height: 1.6; margin: 0; }
.reg-sent-actions { display: flex; gap: 8px; }
.btn.ghost { border-color: transparent; color: var(--muted); }
/* R6: photo source caption (hotlink) + link-out button (linkout mode) */
.photo-source { color: var(--faint); font-size: 10.5px; margin: 4px 0 0; text-align: center; }
.photos-linkout { width: 100%; justify-content: center; }

/* ============================================================
   NOTIFICATION BELL — Task 11
   ============================================================ */

/* Bell wrapper: relative anchor for dropdown */
.bell-wrap { position: relative; display: inline-flex; align-items: center; }

/* Bell button: inherits .topbar-icon-btn; badge sits in top-right corner */
.bell-btn { position: relative; }

/* Unread badge */
.bell-badge {
  position: absolute;
  top: 1px;
  right: 1px;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: var(--danger);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  padding: 0 3px;
  pointer-events: none;
  font-family: var(--font-ui);
}

/* ---- Desktop dropdown ---- */
.bell-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 340px;
  max-height: 420px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.48);
  display: flex;
  flex-direction: column;
  z-index: 1200;
  overflow: hidden;
}

/* ---- Shared head/footer/list styles ---- */
.bell-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.bell-head-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.bell-mark-read {
  background: none;
  border: none;
  font-size: 11px;
  color: var(--blue);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  font-family: var(--font-ui);
}
.bell-mark-read:hover { text-decoration: underline; }

.bell-list {
  overflow-y: auto;
  flex: 1;
}
.bell-loading, .bell-empty {
  padding: 24px 14px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

/* Notification item */
.bell-item {
  padding: 10px 14px;
  border-bottom: 1px solid var(--row-border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bell-item:last-child { border-bottom: none; }
.bell-item--unread { background: var(--accent-dim-bg); }
.bell-item-body { display: flex; flex-direction: column; gap: 2px; }
.bell-item-title { font-size: 13px; font-weight: 500; color: var(--text); }
.bell-item-sub { font-size: 12px; color: var(--muted); line-height: 1.4; }
.bell-item-time { font-size: 10px; color: var(--muted); font-family: var(--font-data); }
.bell-item-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.bell-item-btn { font-size: 11px; padding: 3px 8px; min-height: 26px; }

.bell-footer {
  padding: 8px 14px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.bell-manage {
  font-size: 12px;
  color: var(--blue);
  text-decoration: none;
}
.bell-manage:hover { text-decoration: underline; }

/* ---- Mobile bottom-sheet ---- */
.bell-sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 1300;
}
.bell-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 75vh;
  background: var(--surface);
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -4px 32px rgba(0,0,0,0.5);
  z-index: 1301;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.32,0,0,1);
}
.bell-sheet--open { transform: translateY(0); }
.bell-sheet-handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  margin: 10px auto 2px;
  flex-shrink: 0;
}

/* Desktop: hide the sheet; mobile: hide the dropdown */
@media (max-width: 768px) {
  .bell-dropdown { display: none !important; }
}
@media (min-width: 768px) {
  .bell-sheet, .bell-sheet-overlay { display: none !important; }
}

/* ---- Channel-missing banner (Task 11) ---- */
.channel-missing-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  margin: 8px 16px 0;
  background: color-mix(in srgb, var(--blue) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--blue) 30%, transparent);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text);
}
.channel-missing-banner .icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.channel-missing-banner span { flex: 1; }
.channel-missing-cta { white-space: nowrap; font-size: 12px; padding: 4px 10px; min-height: 28px; }

/* ---- Task 12: Стеження — Мої пошуки + Мої лоти ---- */
.tracking-empty {
  padding: 28px 16px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

/* Мої пошуки list */
.my-searches-list {
  list-style: none;
  margin: 0;
  padding: 0 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.my-search-item {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.msi-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.msi-name {
  font-weight: 600;
  font-size: 13px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msi-badge {
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 10px;
  white-space: nowrap;
}
.filter-active-on { background: color-mix(in srgb, var(--brand) 15%, transparent); color: var(--brand); }
.filter-active-off { background: color-mix(in srgb, var(--muted) 15%, transparent); color: var(--muted); }
.msi-meta {
  font-size: 11px;
  color: var(--muted);
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.msi-sep { color: var(--border); }
.msi-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.msi-toggle { font-size: 11px; padding: 2px 8px; min-height: 26px; }
.msi-delete { font-size: 11px; padding: 2px 8px; min-height: 26px; }

/* Tracked lots — deadlines */
.trk-deadlines {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 4px;
}
.trk-deadline, .trk-auction {
  display: flex;
  gap: 3px;
  align-items: center;
}

/* Save-search button + confirm feedback */
.facet-save-row {
  padding: 8px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.save-search-btn {
  align-self: flex-start;
  min-height: 34px;
  font-size: 13px;
}
.save-search-confirm {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
  color: var(--text);
}
.save-search-confirm--warn {
  background: color-mix(in srgb, var(--alarm) 12%, transparent);
  border-color: color-mix(in srgb, var(--alarm) 30%, transparent);
}
.save-search-confirm--error {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  border-color: color-mix(in srgb, var(--danger) 30%, transparent);
}
/* Mobile sticky save-search button */
@media (max-width: 768px) {
  .save-search-btn--sticky {
    position: sticky;
    bottom: 12px;
    z-index: 50;
    box-shadow: 0 2px 12px rgba(0,0,0,0.35);
  }
}

/* Track feedback (inline under modal footer) */
.track-feedback {
  font-size: 12px;
  margin-top: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent);
  color: var(--text);
  width: 100%;
}

/* ── UNLOCK / UPSELL POPUP — Trial-hero restyle (2026-09-18) ─── */
/* All rules scoped under .unlock-popup to avoid global collisions  */

/* When .unlock-popup is the first child in modal-body, collapse the standard
   header bar — the hero head inside the body takes its role.
   The modal-title is kept in DOM (empty) for aria-labelledby continuity. */
.modal-body:has(> .unlock-popup:first-child) ~ * { /* future-proof */ }
.modal-body > .unlock-popup:first-child ~ * { /* noop */ }

/* Collapse the modal-header border+padding for hero popups */
.modal-box--md:has(.unlock-popup) .modal-header {
  padding: 4px 12px 4px;
  border-bottom: none;
  min-height: 0;
}
.modal-box--md:has(.unlock-popup) .modal-title {
  /* visually hidden, kept for aria-labelledby */
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.modal-box--md:has(.unlock-popup) .modal-close {
  margin-left: auto;
}

.unlock-popup .modal-accent {
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--orange), var(--gold));
  margin: -16px -16px 16px;  /* bleed out of modal-body padding */
}

/* Header row: lock chip + title/sub + (optional) close is handled by
   the standard modal header; we add the lock chip inside .m-lock */
.unlock-popup .m-lock {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--orange);
  background: radial-gradient(circle at 30% 25%, rgba(240,104,48,.28), rgba(240,104,48,.08));
  border: 1px solid rgba(240,104,48,.35);
}

.unlock-popup .m-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.unlock-popup .m-title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}

.unlock-popup .m-sub {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--muted);
  font-family: var(--font-data);
}

/* Subscription hero card */
.unlock-popup .sub-card {
  position: relative;
  border-radius: var(--radius);
  padding: 18px 16px 16px;
  background: linear-gradient(165deg, rgba(240,104,48,.14), rgba(245,176,32,.06) 60%, transparent);
  border: 1px solid rgba(240,104,48,.38);
  margin-top: 10px;  /* space for the badge that bleeds above */
}

.unlock-popup .badge {
  position: absolute;
  top: -11px;
  left: 14px;
  background: var(--gold);
  color: #1a1205;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 14px rgba(245,176,32,.22);
  white-space: nowrap;
}

.unlock-popup .sub-h {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 4px;
}

.unlock-popup .sub-price {
  font-size: 12.5px;
  color: var(--muted);
  font-family: var(--font-data);
  margin: 0 0 12px;
}

.unlock-popup .sub-price b {
  color: var(--gold);
}

/* Benefit bullets */
.unlock-popup .benefits {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  gap: 8px;
}

.unlock-popup .benefits li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  color: var(--text);
}

.unlock-popup .benefits .ck {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(46,204,113,.16);
  color: var(--success);
  font-size: 11px;
  font-weight: 700;
}

/* Primary CTA button inside the hero card */
.unlock-popup .btn-hero-primary {
  width: 100%;
  border: none;
  border-radius: var(--radius);
  padding: 12px 14px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-on-accent);
  background: linear-gradient(135deg, var(--orange), #ff824e);
  box-shadow: 0 8px 22px var(--orange-glow);
  transition: transform .08s ease, box-shadow .2s ease;
}

.unlock-popup .btn-hero-primary:hover {
  box-shadow: 0 10px 30px var(--orange-glow);
}

.unlock-popup .btn-hero-primary:active {
  transform: translateY(1px);
}

/* Credit row: ghost button + balance chip */
.unlock-popup .credit-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.unlock-popup .btn-ghost {
  flex: 1;
  border: 1px solid var(--border-interactive);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  color: var(--ink);
  transition: border-color .15s, color .15s;
}

.unlock-popup .btn-ghost:hover {
  border-color: var(--orange);
  color: var(--orange);
}

.unlock-popup .btn-ghost:disabled {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

.unlock-popup .bal {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  font-family: var(--font-data);
  white-space: nowrap;
}

.unlock-popup .bal .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 8px var(--success);
  flex: none;
}

/* Soft "buy credits — soon" hint */
.unlock-popup .soft-hint {
  margin: 12px 0 0;
  text-align: center;
  font-size: 12px;
}

.unlock-popup .soft-hint a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px dashed var(--border-interactive);
  cursor: default;
  pointer-events: none;
}

/* ── END unlock-popup styles ─────────────────────────────────── */

/* ── Tab lock badge (free tier: paid tabs shown but locked) ──── */
.tab-btn.tab-locked {
  opacity: 0.72;
}

.tab-btn.tab-locked:hover {
  opacity: 0.88;
}

.tab-lock {
  display: inline-block;
  font-size: 10px;
  line-height: 1;
  margin-left: 4px;
  vertical-align: middle;
  opacity: 0.8;
  user-select: none;
}
/* ── END tab lock badge ──────────────────────────────────────── */

/* ── UNLOCKED ROW / BADGE (free tier, credit spent) ────────────────────────── */
/* Green left stripe — mirrors row-new orange pattern, semantic green for "paid/ok" */
tr.row-unlocked td { border-left: none; }
tr.row-unlocked td:first-child { border-left: 3px solid var(--success); padding-left: 7px; }
tr.row-unlocked { background: rgba(46, 204, 113, 0.04); }

/* Unlocked badge shown in actions column */
.unlocked-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 4px;
  border: 1px solid var(--success);
  color: var(--success);
  background: rgba(46, 204, 113, 0.10);
  white-space: nowrap;
  vertical-align: middle;
  margin-top: 2px;
}

/* Primary/accent "Звіт" button for unlocked free lots */
.btn.report.btn-unlocked-primary {
  border-color: var(--success);
  color: var(--success);
  background: rgba(46, 204, 113, 0.10);
}
.btn.report.btn-unlocked-primary:hover {
  background: rgba(46, 204, 113, 0.20);
}

/* Card-level unlocked badge */
.card-unlocked-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 4px;
  border: 1px solid var(--success);
  color: var(--success);
  background: rgba(46, 204, 113, 0.10);
  white-space: nowrap;
  margin-top: 4px;
}
/* ── END unlocked row / badge ────────────────────────────────── */