:root {
  /* ===== Design tokens (см. .claude/skills/dashboard-design/SKILL.md) ===== */

  /* ---- Brand (identity only: logo, active nav) ---- */
  --color-brand:        #1f5b3a; /* TODO: сверить с исходником логотипа */
  --color-brand-strong: #18482e;
  --color-brand-tint:   #e8f1ec; /* active nav background */
  --color-brand-border: #cfe3d7;

  /* ---- Primary (main actions, links, focus, accents) ---- */
  --color-primary:        #2563eb;
  --color-primary-hover:  #1d4ed8;
  --color-primary-active: #1d4ed8;
  --color-primary-tint:   #dbeafe;
  --color-primary-soft:   #eff6ff;
  --color-primary-border: #bfdbfe;

  /* ---- Neutral scale: SLATE (cold) — the only neutral scale ---- */
  --color-bg:            #ffffff;
  --color-surface:       #f8fafc; /* cards, panels */
  --color-surface-2:     #f1f5f9; /* nested / inset surfaces */
  --color-border:        #e2e8f0;
  --color-border-strong: #cbd5e1; /* inputs, dividers needing contrast */
  --color-text:          #0f172a; /* headings, key numbers */
  --color-text-body:     #334155; /* default body text */
  --color-text-muted:    #64748b; /* labels, captions */
  --color-text-subtle:   #94a3b8; /* hints, timestamps, footnotes */
  --color-text-inverse:  #ffffff;

  /* ---- Semantic: danger / discount (ONE red set) ---- */
  --color-danger:        #dc2626;
  --color-danger-strong: #b91c1c;
  --color-danger-tint:   #fee2e2;
  --color-danger-border: #fecaca;

  /* ---- Semantic: success ---- */
  --color-success:        #16a34a;
  --color-success-strong: #15803d;
  --color-success-tint:   #dcfce7;

  /* ---- Semantic: warning ---- */
  --color-warn:        #f59e0b;
  --color-warn-strong: #92400e;
  --color-warn-tint:   #fef3c7;

  /* ---- Semantic: info ---- */
  --color-info:        #4f46e5;
  --color-info-strong: #3730a3;
  --color-info-tint:   #e0e7ff;

  /* ---- Typography ---- */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
               "Inter", "Open Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --tracking-tight:  -0.022em; /* large headings */
  --tracking-snug:   -0.012em; /* section titles, prices */
  --tracking-normal:  0;
  --tracking-wide:    0.04em;  /* eyebrows, table th uppercase */

  --fs-2xs:  11px; /* chip, badge, table th, source-pill count */
  --fs-xs:   12px; /* labels, captions, eyebrow */
  --fs-sm:   13px; /* secondary text, table cells */
  --fs-base: 15px; /* body default */
  --fs-lg:   17px; /* topbar h1, panel h3 (was 16/18) */
  --fs-xl:   20px; /* modal h2 (was 19/20) */
  --fs-2xl:  22px; /* listing price */
  --fs-3xl:  26px; /* metric value, page h2 (was 25/26) */

  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;

  --lh-none:   1;
  --lh-tight:  1.15;
  --lh-snug:   1.25;
  --lh-normal: 1.45;
  --lh-loose:  1.55;

  /* ---- Spacing scale (4/8/12/16/24/32/42 + micro 2/6) ---- */
  --sp-1: 2px;   /* micro */
  --sp-2: 4px;
  --sp-3: 6px;   /* micro */
  --sp-4: 8px;
  --sp-5: 12px;
  --sp-6: 16px;
  --sp-7: 24px;
  --sp-8: 32px;
  --sp-9: 42px;

  /* ---- Radii (consolidated: 7->8, 10->12, 14/18->16) ---- */
  --radius-sm:     6px;  /* chips, ranks */
  --radius-md:     8px;  /* buttons, inputs, nav-item, cards */
  --radius-lg:     12px; /* modals, feature tiles */
  --radius-xl:     16px; /* large/elevated cards */
  --radius-pill:   999px;
  --radius-circle: 50%;

  /* ---- Shadows (layered, soft — Apple-style depth) ---- */
  --shadow-xs:    0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm:    0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 14px rgba(15, 23, 42, 0.06);
  --shadow-md:    0 2px 4px rgba(15, 23, 42, 0.04), 0 12px 28px rgba(15, 23, 42, 0.08);
  --shadow-lg:    0 4px 10px rgba(15, 23, 42, 0.08), 0 32px 64px rgba(15, 23, 42, 0.18);
  --shadow-float: 0 6px 18px rgba(37, 99, 235, 0.30), 0 2px 6px rgba(37, 99, 235, 0.18);
  --focus-ring:   0 0 0 4px rgba(37, 99, 235, 0.16);   /* input focus halo */
  --ring-primary: 0 0 0 4px rgba(37, 99, 235, 0.22);   /* button :focus-visible */

  /* ---- Layout & motion ---- */
  --sidebar-width: 256px;
  --topbar-height: 72px;
  --page-max:      1260px;
  --insight-col:   340px;
  --ease-apple:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-quick:    cubic-bezier(0.32, 0.72, 0, 1);
  --transition:    0.22s var(--ease-apple);
  --glass-blur:    saturate(180%) blur(20px);

  /* ===== Applied to document root ===== */
  color: var(--color-text);
  background: var(--color-bg);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background:
    radial-gradient(1200px 600px at 100% -10%, rgba(37, 99, 235, 0.05), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(31, 91, 58, 0.05), transparent 60%),
    var(--color-bg);
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: progress;
  opacity: 0.62;
}

/* ===== Icon system — SF Symbols-style inline SVG ===== */
.icon-sprite {
  height: 0;
  position: absolute;
  width: 0;
}

.ic {
  display: inline-block;
  fill: none;
  flex: 0 0 auto;
  height: 1.15em;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
  vertical-align: -0.18em;
  width: 1.15em;
}

.ic-sm { height: 14px; width: 14px; }
.ic-md { height: 18px; width: 18px; }
.ic-lg { height: 22px; width: 22px; }
.ic-xl { height: 26px; width: 26px; }

/* Sections + buttons get a slightly larger icon for visual balance. */
.section-title .ic { height: 18px; width: 18px; }
.btn .ic,
.icon-button .ic,
.source-pill .ic { height: 16px; width: 16px; vertical-align: -0.22em; }
.scroll-top .ic { height: 22px; width: 22px; vertical-align: middle; }
.nav-item > span:first-child .ic { height: 18px; width: 18px; vertical-align: middle; }
.metric-icon .ic { height: 24px; width: 24px; stroke-width: 1.75; vertical-align: middle; }
.task-card-meta .ic,
.listing-facts .ic { height: 13px; width: 13px; vertical-align: -0.18em; }
.onb-ic .ic,
.history-icon .ic { height: 15px; width: 15px; vertical-align: middle; }
.empty-state .ic { color: var(--color-text-subtle); height: 40px; width: 40px; stroke-width: 1.4; }

.app-shell {
  background: transparent;
  display: grid;
  grid-template-columns: 256px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(248, 250, 252, 0.85) 220px),
    var(--color-surface);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: sticky;
  top: 0;
}

.brand {
  align-items: center;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  gap: 10px;
  min-height: 72px;
  padding: var(--sp-6);
  text-decoration: none;
}

.brand:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.brand .brand-name strong {
  color: var(--color-text);
  display: block;
  font-size: var(--fs-3xl);
  font-weight: var(--fw-extra);
  letter-spacing: -0.03em;
  line-height: var(--lh-none);
  white-space: nowrap;
}

.brand-name span {
  margin-top: var(--sp-3);
}

.brand-mark,
.metric-icon {
  align-items: center;
  border-radius: var(--radius-md);
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: center;
}

.brand-mark {
  background: #2563eb;
  color: #ffffff;
  height: 34px;
  width: 34px;
}

.brand-logo {
  border-radius: var(--radius-md);
  display: block;
  flex: 0 0 auto;
  height: 40px;
  width: 40px;
  object-fit: contain;
}

.brand strong,
.brand span,
.nav-item strong,
.nav-item small {
  display: block;
}

.brand strong {
  font-size: var(--fs-sm);
  font-weight: var(--fw-extra);
  letter-spacing: var(--tracking-snug);
  line-height: 1.2;
}

.brand span,
.nav-list p,
.nav-item small,
.sidebar-foot,
.muted-text {
  color: var(--color-text-muted);
}

.brand span,
.nav-item small,
.sidebar-foot {
  font-size: var(--fs-xs);
}

.nav-list {
  display: grid;
  gap: var(--sp-2);
  padding: 14px 10px;
}

.nav-list p {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-extra);
  letter-spacing: var(--tracking-wide);
  margin: var(--sp-3) var(--sp-4);
  text-transform: uppercase;
}

.nav-item {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--color-text-body);
  display: flex;
  gap: 10px;
  min-height: 48px;
  padding: var(--sp-4) 10px;
  text-align: left;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), transform 0.18s var(--ease-apple);
  width: 100%;
}

.nav-item > span:first-child {
  align-items: center;
  background: rgba(15, 23, 42, 0.04);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: var(--fs-base);
  height: 32px;
  justify-content: center;
  transition: background var(--transition), color var(--transition);
  width: 32px;
}

.nav-item:hover {
  background: rgba(15, 23, 42, 0.04);
  color: var(--color-text);
}

.nav-item:hover > span:first-child {
  background: var(--color-bg);
  color: var(--color-text);
}

.nav-item.active {
  background: var(--color-primary-soft);
  border-color: var(--color-primary-border);
  color: var(--color-primary-hover);
}

.nav-item.active > span:first-child {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

.nav-item.active strong {
  color: var(--color-primary-hover);
}

.nav-item:active {
  transform: scale(0.98);
}

.nav-item:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.nav-badge {
  align-items: center;
  background: var(--color-danger);
  border-radius: var(--radius-pill);
  color: #ffffff;
  display: inline-flex;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  justify-content: center;
  margin-left: auto;
  min-width: 20px;
  padding: var(--sp-1) var(--sp-3);
}

.sidebar-foot {
  align-items: flex-start;
  border-top: 1px solid var(--color-border);
  display: flex;
  gap: var(--sp-4);
  line-height: 1.4;
  margin-top: auto;
  padding: var(--sp-6);
}

.main-shell {
  min-width: 0;
}

.view {
  display: none;
}

.view.active {
  display: block;
}

.topbar {
  align-items: center;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  display: flex;
  gap: var(--sp-6);
  justify-content: space-between;
  min-height: 72px;
  padding: var(--sp-5) var(--sp-7);
  position: sticky;
  top: 0;
  z-index: 10;
}

.eyebrow {
  color: #2563eb;
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-extra);
  margin-bottom: var(--sp-1);
  text-transform: uppercase;
}

.topbar h1,
.page-heading h2,
.insight-panel h3,
.empty-state h3 {
  margin: 0;
}

.topbar h1 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-snug);
  line-height: var(--lh-snug);
}

.topbar-actions,
.page-actions,
.filter-actions,
.row-actions,
.chips,
.quick-filters,
.section-title {
  align-items: center;
  display: flex;
}

.topbar-actions,
.page-actions,
.filter-actions,
.row-actions,
.chips {
  gap: var(--sp-4);
}

.row-actions {
  flex-wrap: wrap;
}

.status {
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-snug);
  padding: 7px var(--sp-5);
}

.status.loading {
  background: var(--color-primary-soft);
  border-color: var(--color-primary-border);
  color: var(--color-primary-hover);
}

/* Button system: .btn + .btn-primary / .btn-secondary / .btn-ghost.
   .icon-button and `.quick-filters button` keep their own selectors. */
.btn,
.icon-button,
.quick-filters button {
  align-items: center;
  border-radius: var(--radius-md);
  display: inline-flex;
  font-weight: var(--fw-bold);
  gap: 7px;
  justify-content: center;
  letter-spacing: var(--tracking-snug);
  min-height: 38px;
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition),
              box-shadow var(--transition), transform 0.18s var(--ease-apple),
              color var(--transition);
}

.btn:active,
.icon-button:active,
.quick-filters button:active {
  transform: scale(0.97);
}

.btn-primary {
  background: linear-gradient(180deg, #3b82f6, var(--color-primary));
  border: 1px solid var(--color-primary-hover);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 1px 2px rgba(37, 99, 235, 0.25),
    0 6px 16px rgba(37, 99, 235, 0.22);
  color: var(--color-text-inverse);
  padding: 0 var(--sp-6);
}

.btn-primary:hover {
  background: linear-gradient(180deg, var(--color-primary), var(--color-primary-hover));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 2px 4px rgba(37, 99, 235, 0.28),
    0 10px 24px rgba(37, 99, 235, 0.28);
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: translateY(0) scale(0.98);
}

.btn-secondary {
  background: linear-gradient(180deg, #1f2937, var(--color-text));
  border: 1px solid var(--color-text);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 1px 2px rgba(15, 23, 42, 0.2),
    0 6px 16px rgba(15, 23, 42, 0.18);
  color: var(--color-text-inverse);
  padding: 0 var(--sp-6);
}

.btn-secondary:hover {
  background: linear-gradient(180deg, var(--color-text), #020617);
  transform: translateY(-1px);
}

.btn-ghost,
.quick-filters button {
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-xs);
  color: var(--color-text-body);
  padding: 0 var(--sp-5);
}

.btn-ghost:hover,
.quick-filters button:hover,
.icon-button:hover {
  background: var(--color-bg);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-sm);
}

.btn:focus-visible,
.icon-button:focus-visible,
.quick-filters button:focus-visible {
  box-shadow: var(--shadow-sm), var(--ring-primary);
  outline: none;
}

.btn-block {
  width: 100%;
}

.icon-button {
  aspect-ratio: 1;
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-xs);
  color: var(--color-text-body);
  padding: 0;
  width: 38px;
}

.icon-button.favorite.active {
  background: var(--color-danger-tint);
  border-color: var(--color-danger-border);
  color: var(--color-danger-strong);
}

.page {
  margin: 0 auto;
  max-width: 1260px;
  padding: var(--sp-7);
}

.page-heading {
  align-items: flex-start;
  display: flex;
  gap: var(--sp-6);
  justify-content: space-between;
  margin-bottom: 18px;
}

.page-heading h2 {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-extra);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
}

.page-heading p {
  color: var(--color-text-muted);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  margin: var(--sp-4) 0 0;
  max-width: 56ch;
}

.stats-grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 18px;
}

.stats-grid.stats-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.metric-card-button {
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: border-color var(--transition), transform var(--transition),
              box-shadow var(--transition);
  width: 100%;
}

.metric-card-button:hover {
  border-color: var(--color-primary-border);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.metric-card-button:active {
  transform: translateY(0) scale(0.99);
}

.metric-card-button:focus-visible {
  box-shadow: var(--shadow-sm), var(--ring-primary);
  outline: none;
}

.metric-card span small {
  color: var(--color-text-subtle);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  margin-left: 3px;
}

.source-pill {
  align-items: center;
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-xs);
  color: var(--color-text-body);
  display: inline-flex;
  font-weight: var(--fw-bold);
  gap: var(--sp-3);
  letter-spacing: var(--tracking-snug);
  min-height: 34px;
  padding: 0 var(--sp-5);
  transition: background var(--transition), border-color var(--transition),
              color var(--transition), box-shadow var(--transition),
              transform 0.18s var(--ease-apple);
}

.source-pill small {
  background: var(--color-surface-2);
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  font-size: var(--fs-2xs);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-bold);
  padding: 1px 7px;
  transition: background var(--transition), color var(--transition);
}

.source-pill:hover {
  background: var(--color-bg);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-sm);
}

.source-pill:active {
  transform: scale(0.97);
}

.source-pill.active {
  background: linear-gradient(180deg, #3b82f6, var(--color-primary-hover));
  border-color: var(--color-primary-hover);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 4px 12px rgba(37, 99, 235, 0.30);
  color: var(--color-text-inverse);
}

.source-pill.active small {
  background: rgba(255, 255, 255, 0.22);
  color: var(--color-text-inverse);
}

.source-pill:focus-visible {
  outline: none;
  box-shadow: var(--shadow-sm), var(--ring-primary);
}

/* Shared card surface — single source of truth. */
.metric-card,
.metric-card-button,
.filter-panel,
.listing-card,
.insight-panel,
.admin-card,
.empty-state,
.cma-summary,
.reg-features li {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

.metric-card {
  align-items: center;
  display: flex;
  justify-content: space-between;
  min-height: 96px;
  padding: var(--sp-6) var(--sp-7);
}

.metric-card span {
  color: var(--color-text-muted);
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--sp-3);
  text-transform: uppercase;
}

.metric-card strong {
  color: var(--color-text);
  font-feature-settings: "tnum" on, "lnum" on;
  font-size: var(--fs-3xl);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-none);
}

.metric-icon {
  font-size: var(--fs-lg);
  font-weight: var(--fw-extra);
  height: 48px;
  width: 48px;
}

.metric-icon.blue {
  background: linear-gradient(135deg, var(--color-primary-tint), var(--color-primary-soft));
  box-shadow: inset 0 0 0 1px var(--color-primary-border);
  color: var(--color-primary-hover);
}

.metric-icon.red {
  background: linear-gradient(135deg, var(--color-danger-tint), #fff1f1);
  box-shadow: inset 0 0 0 1px var(--color-danger-border);
  color: var(--color-danger-strong);
}

.metric-icon.green {
  background: linear-gradient(135deg, var(--color-success-tint), #f0fdf4);
  box-shadow: inset 0 0 0 1px rgba(22, 163, 74, 0.18);
  color: var(--color-success-strong);
}

.metric-icon.violet {
  background: linear-gradient(135deg, var(--color-info-tint), #f5f3ff);
  box-shadow: inset 0 0 0 1px rgba(79, 70, 229, 0.18);
  color: var(--color-info-strong);
}

.quick-filters {
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 18px;
}

.quick-filters span {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  margin-right: var(--sp-1);
}

.content-grid {
  align-items: start;
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: minmax(0, 1fr) 340px;
}

.deal-list {
  display: grid;
  gap: 10px;
}

.section-title {
  color: var(--color-text-body);
  font-weight: var(--fw-extra);
  gap: var(--sp-4);
  letter-spacing: var(--tracking-snug);
  margin-bottom: var(--sp-5);
}

.listing-card {
  cursor: pointer;
  display: grid;
  gap: 0;
  grid-template-columns: 168px minmax(0, 1fr);
  min-height: 156px;
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition),
              transform var(--transition);
}

.listing-card:hover,
.listing-card.selected {
  border-color: var(--color-primary-border);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.listing-card:active {
  transform: translateY(0) scale(0.995);
}

.listing-media {
  align-items: center;
  background:
    linear-gradient(135deg, var(--color-surface), var(--color-surface-2));
  color: var(--color-text-subtle);
  display: flex;
  justify-content: center;
  min-height: 156px;
  overflow: hidden;
  position: relative;
}

.listing-media img {
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--ease-apple);
  width: 100%;
}

.listing-card:hover .listing-media img {
  transform: scale(1.03);
}

.listing-body {
  min-width: 0;
  padding: 14px;
}

.chips {
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}

.chip,
.rank {
  align-items: center;
  border-radius: var(--radius-sm);
  display: inline-flex;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-extra);
  gap: var(--sp-2);
  min-height: 22px;
  padding: 0 7px;
}

.rank {
  background: linear-gradient(180deg, #3b82f6, var(--color-primary-hover));
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.32);
  color: var(--color-text-inverse);
  font-variant-numeric: tabular-nums;
  min-width: 24px;
  justify-content: center;
}

.chip {
  background: var(--color-surface-2);
  color: var(--color-text-body);
}

.chip.danger {
  background: var(--color-danger);
  color: #ffffff;
}

.chip.muted {
  background: var(--color-surface-2);
  color: var(--color-text-muted);
}

.chip.success {
  background: #dcfce7;
  color: #15803d;
}

.listing-body h3 {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-snug);
  line-height: 1.32;
  margin: 0 0 var(--sp-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.listing-subtitle {
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  margin: 0 0 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.listing-facts {
  color: var(--color-text-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--fs-xs);
  gap: var(--sp-4) 14px;
  margin-bottom: var(--sp-5);
}

.listing-facts span {
  align-items: center;
  display: inline-flex;
  gap: 5px;
}

.listing-bottom {
  align-items: flex-end;
  display: flex;
  gap: var(--sp-5);
  justify-content: space-between;
}

.listing-bottom strong,
.large-price {
  color: var(--color-text);
  display: block;
  font-feature-settings: "tnum" on, "lnum" on;
  font-size: var(--fs-2xl);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-extra);
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
}

.listing-bottom span {
  color: var(--color-text-muted);
  display: block;
  font-size: var(--fs-xs);
  margin-top: 3px;
}

.insight-panel,
.admin-card {
  padding: var(--sp-7);
}

.insight-panel {
  position: sticky;
  top: 96px;
}

.insight-panel h3 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-extra);
  letter-spacing: var(--tracking-snug);
  line-height: 1.35;
  margin-bottom: var(--sp-5);
}

.large-price {
  margin-bottom: 14px;
}

dl {
  display: grid;
  gap: var(--sp-4) var(--sp-5);
  grid-template-columns: 112px 1fr;
  margin: 0 0 var(--sp-6);
}

dt {
  color: var(--color-text-muted);
}

dd {
  font-weight: var(--fw-bold);
  margin: 0;
}

/* .primary-link -> .btn .btn-secondary .btn-block (see app.js).
   min-height unified 38px -> 36px via .btn base. */

.filter-panel {
  margin-bottom: var(--sp-6);
  padding: var(--sp-6);
}

.filter-grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

label,
.range-field,
.filter-field {
  color: var(--color-text-muted);
  display: grid;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  gap: var(--sp-3);
}

input,
select {
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  height: 40px;
  min-width: 0;
  padding: 0 var(--sp-5);
  transition: border-color var(--transition), box-shadow var(--transition),
              background var(--transition);
  width: 100%;
}

input::placeholder {
  color: var(--color-text-subtle);
}

input:hover,
select:hover {
  border-color: var(--color-text-subtle);
}

input:focus,
select:focus {
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
  outline: none;
}

.range-field div {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr 1fr;
}

.filter-actions {
  justify-content: flex-end;
  margin-top: 14px;
}

.multi-select {
  position: relative;
}

.multi-select-trigger {
  align-items: center;
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-text);
  cursor: pointer;
  display: flex;
  font: inherit;
  font-weight: var(--fw-medium);
  gap: var(--sp-4);
  height: 40px;
  justify-content: space-between;
  padding: 0 var(--sp-5);
  text-align: left;
  transition: border-color var(--transition), box-shadow var(--transition);
  width: 100%;
}

.multi-select-trigger:hover {
  border-color: var(--color-text-subtle);
}

.multi-select.open .multi-select-trigger,
.multi-select-trigger:focus-visible {
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
  outline: none;
}

.multi-select-label {
  color: var(--color-text-subtle);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.multi-select-label.has-value {
  color: var(--color-text);
  font-weight: var(--fw-bold);
}

.multi-select-caret {
  color: var(--color-text-subtle);
  flex-shrink: 0;
  transform: rotate(90deg);
  transition: transform var(--transition);
}

.multi-select.open .multi-select-caret {
  transform: rotate(-90deg);
}

.multi-select-panel {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  display: grid;
  gap: var(--sp-4);
  left: 0;
  margin-top: var(--sp-2);
  padding: var(--sp-5);
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 20;
}

.multi-select-panel[hidden] {
  display: none;
}

.multi-select-search {
  height: 36px;
}

.multi-select-actions {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.multi-select-link {
  background: transparent;
  border: 0;
  color: var(--color-primary);
  cursor: pointer;
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  padding: 0;
}

.multi-select-link:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

.multi-select-link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.multi-select-count {
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}

.multi-select-options {
  display: grid;
  gap: var(--sp-1);
  max-height: 240px;
  overflow-y: auto;
}

.multi-select-option {
  align-items: center;
  border-radius: var(--radius-sm);
  color: var(--color-text-body);
  cursor: pointer;
  display: flex;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
}

.multi-select-option:hover {
  background: var(--color-surface-2);
}

.multi-select-option input[type="checkbox"] {
  accent-color: var(--color-primary);
  cursor: pointer;
  height: 16px;
  margin: 0;
  padding: 0;
  width: 16px;
}

.multi-select-empty {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  margin: 0;
  padding: var(--sp-4);
  text-align: center;
}

.multi-select-done {
  width: 100%;
}

.admin-grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 360px minmax(0, 1fr);
}

.admin-card-wide {
  grid-column: 1 / -1;
}

.scan-actions,
.source-picker,
.auto-row,
.source-row {
  align-items: center;
  display: flex;
}

.scan-actions {
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: var(--sp-5);
}

.scan-button {
  font-size: var(--fs-lg);
  min-height: 52px;
  padding: 0 22px;
}

.scan-note {
  color: var(--color-text-muted);
  line-height: var(--lh-normal);
  margin: 0 0 14px;
}

.source-picker {
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-bottom: 14px;
}

.source-picker label {
  align-items: center;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  display: inline-flex;
  font-size: var(--fs-sm);
  min-height: 38px;
  padding: 0 var(--sp-5);
}

.source-picker input {
  height: 16px;
  margin: 0;
  width: 16px;
}

.auto-row {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  gap: 10px;
  justify-content: space-between;
  padding: 10px var(--sp-5);
}

.auto-row strong {
  color: var(--color-text);
}

.source-stats {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}

.source-row {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  justify-content: space-between;
  padding: 10px;
}

.source-row strong,
.source-row span {
  display: block;
}

.source-row span {
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  margin-top: var(--sp-1);
}

.source-row b {
  color: #2563eb;
  white-space: nowrap;
}

.pipeline {
  color: var(--color-text-body);
  line-height: var(--lh-loose);
  margin: 0;
  padding-left: 20px;
}

.run-list {
  display: grid;
  gap: var(--sp-4);
}

.run-row {
  align-items: center;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  display: flex;
  justify-content: space-between;
  padding: 10px;
}

.run-row strong,
.run-row span,
.run-row small {
  display: block;
}

.run-row span,
.run-row small {
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
}

.empty-state {
  color: var(--color-text-muted);
  display: grid;
  justify-items: center;
  padding: var(--sp-9) 20px;
  text-align: center;
}

.empty-state h3 {
  color: var(--color-text);
  margin-top: var(--sp-5);
}

.empty-state p {
  margin: var(--sp-3) 0 0;
}

@media (max-width: 1100px) {
  .stats-grid,
  .stats-grid.stats-grid-3,
  .filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .content-grid,
  .admin-grid {
    grid-template-columns: 1fr;
  }

  .insight-panel {
    position: static;
  }
}

@media (max-width: 780px) {
  .app-shell {
    display: block;
  }

  .sidebar {
    min-height: auto;
    position: static;
  }

  .brand {
    min-height: 56px;
    padding: var(--sp-4) var(--sp-5);
  }

  .brand-logo {
    height: 32px;
    width: 32px;
  }

  .nav-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-3);
    padding: 10px 8px;
  }

  .nav-list p,
  .sidebar-foot {
    display: none;
  }

  .nav-item {
    justify-content: center;
    min-height: 42px;
    padding: var(--sp-3) 8px;
  }

  .nav-item small {
    display: none;
  }

  .topbar,
  .page-heading,
  .listing-bottom {
    align-items: flex-start;
    flex-direction: column;
  }

  .topbar {
    gap: var(--sp-3);
    min-height: 0;
    padding: var(--sp-4) var(--sp-5);
  }

  .topbar h1 {
    font-size: var(--fs-base);
  }

  .topbar-actions,
  .page-actions,
  .auto-row,
  .row-actions {
    flex-wrap: wrap;
  }

  .auth-box {
    flex-wrap: wrap;
  }

  .topbar .tg-cta {
    align-items: flex-start;
  }

  .topbar .tg-promo-text {
    text-align: left;
  }

  .topbar .tg-promo-text strong {
    justify-content: flex-start;
  }

  .page-heading h2 {
    font-size: var(--fs-xl);
  }

  .page-heading p {
    font-size: var(--fs-sm);
  }

  .scan-button {
    width: 100%;
  }

  .page {
    padding: 18px 14px;
  }

  .stats-grid,
  .stats-grid.stats-grid-3,
  .filter-grid {
    grid-template-columns: 1fr;
  }

  .listing-card {
    grid-template-columns: 1fr;
  }

  .listing-media {
    min-height: 170px;
  }

  .row-actions .btn,
  .row-actions a.btn {
    flex: 1 1 calc(50% - var(--sp-4));
    min-width: 0;
    padding: 0 var(--sp-4);
  }
}

@media (max-width: 480px) {
  .nav-item {
    gap: var(--sp-2);
    padding: var(--sp-2) 6px;
  }

  .nav-item strong {
    font-size: var(--fs-xs);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  .nav-item > span:first-child {
    height: 28px;
    width: 28px;
  }

  .nav-badge {
    margin-left: var(--sp-2);
    padding: 1px 5px;
  }

  .page {
    padding: 14px 12px;
  }

  .listing-body {
    padding: 12px;
  }

  .listing-bottom strong,
  .large-price {
    font-size: var(--fs-xl);
  }

  .row-actions {
    gap: var(--sp-3);
    width: 100%;
  }

  .row-actions .btn,
  .row-actions a.btn {
    flex: 1 1 calc(50% - var(--sp-3));
    font-size: var(--fs-xs);
  }

  .row-actions .icon-button {
    flex: 0 0 auto;
  }

  .quick-filters {
    flex-wrap: wrap;
    gap: var(--sp-3);
  }

  .filter-actions .btn {
    flex: 1 1 auto;
  }
}

.task-card {
  display: flex;
  align-items: center;
  gap: var(--sp-7);
  padding: var(--sp-6) var(--sp-7);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xs);
  font-size: var(--fs-base);
  color: var(--color-text);
  flex-wrap: wrap;
}

.task-card[hidden] {
  display: none;
}

.task-card.task-card-active {
  margin: var(--sp-5) var(--sp-7) 0;
  background: linear-gradient(135deg, var(--color-primary-soft), #f5f3ff);
  border-color: var(--color-primary-border);
  box-shadow:
    0 1px 2px rgba(37, 99, 235, 0.08),
    0 14px 32px -16px rgba(79, 70, 229, 0.55);
}

.stop-button {
  align-self: center;
  border-color: var(--color-danger-border);
  color: var(--color-danger-strong);
  background: var(--color-danger-tint);
  font-weight: var(--fw-semibold);
  padding: var(--sp-4) var(--sp-6);
}

.stop-button:hover:not(:disabled) {
  background: var(--color-danger-tint);
  border-color: var(--color-danger-border);
}

.stop-button:disabled {
  opacity: 0.65;
  cursor: progress;
}

.task-card-main {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  flex: 1 1 320px;
  min-width: 220px;
}

.task-card-title {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
}

.task-card-title strong {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
}

.task-card-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

.task-card-stats {
  display: flex;
  gap: 36px;
  margin-left: auto;
  flex-wrap: wrap;
}

.task-card-stats > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 56px;
}

.task-card-stats b {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  line-height: 1.1;
}

.task-card-stats b.accent {
  color: #2563eb;
}

.task-card-stats span {
  font-size: var(--fs-xs);
  color: var(--color-text-subtle);
  margin-top: var(--sp-2);
  text-transform: lowercase;
}

.task-status {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  background: #e0e7ff;
  color: #3730a3;
}

.task-status.success {
  background: #dcfce7;
  color: #166534;
}

.task-status.failed {
  background: var(--color-danger-tint);
  color: var(--color-danger-strong);
}

.task-trigger {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
}

.task-trigger.auto {
  background: #dbeafe;
  color: #1d4ed8;
}

.task-trigger.manual {
  background: #fef3c7;
  color: #92400e;
}

.task-spinner {
  width: 12px;
  height: 12px;
  border: 2px solid #818cf8;
  border-top-color: transparent;
  border-radius: var(--radius-circle);
  animation: task-spin 0.9s linear infinite;
}

@keyframes task-spin {
  to { transform: rotate(360deg); }
}

.task-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: var(--sp-5);
}

.task-list .task-card {
  padding: 14px 20px;
  gap: 18px;
}

.task-list .task-card.task-card-active {
  margin: 0;
}

.task-list .task-card-stats b {
  font-size: var(--fs-lg);
}

.task-empty {
  color: var(--color-text-subtle);
  font-size: var(--fs-sm);
  padding: var(--sp-5) 0;
}

.cma-overlay {
  align-items: flex-start;
  background: rgba(15, 23, 42, 0.42);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  display: none;
  inset: 0;
  justify-content: center;
  overflow-y: auto;
  padding: var(--sp-8) var(--sp-6);
  position: fixed;
  z-index: 100;
}

.cma-overlay.active {
  display: flex;
}

.cma-modal {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 980px;
  width: 100%;
}

.cma-header {
  align-items: flex-start;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  gap: var(--sp-6);
  justify-content: space-between;
  padding: 18px 20px;
}

.cma-header h2 {
  font-size: var(--fs-xl);
  margin: 0 0 var(--sp-2);
}

.cma-header p {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  margin: 0;
}

.cma-header-actions {
  display: flex;
  gap: var(--sp-4);
}

.cma-loading,
.cma-error,
.cma-empty {
  align-items: center;
  color: var(--color-text-muted);
  display: flex;
  gap: 10px;
  justify-content: center;
  padding: 40px;
}

.cma-loading .ic {
  animation: task-spin 1.2s linear infinite;
  color: var(--color-primary);
  height: 18px;
  width: 18px;
}

.cma-error {
  color: var(--color-danger);
}

.cma-body {
  padding: 20px;
}

.cma-summary {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
  padding: 14px var(--sp-6);
}

.cma-summary-row {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.cma-summary-row span {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

.cma-summary-row strong {
  color: var(--color-text);
  font-weight: var(--fw-bold);
}

.cma-verdict {
  border-radius: var(--radius-md);
  display: grid;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding: 10px var(--sp-5);
}

.cma-verdict strong {
  font-size: var(--fs-sm);
}

.cma-verdict span {
  font-size: var(--fs-sm);
}

.cma-verdict.good {
  background: #dcfce7;
  color: #14532d;
}

.cma-verdict.bad {
  background: var(--color-danger-tint);
  color: var(--color-danger-strong);
}

.cma-verdict.neutral {
  background: #e0e7ff;
  color: #1e3a8a;
}

.cma-verdict.warn {
  background: #fef3c7;
  color: #78350f;
}

.cma-verdict.muted {
  background: var(--color-surface-2);
  color: var(--color-text-muted);
}

.history-timeline {
  display: grid;
  gap: var(--sp-1);
}

.history-row {
  align-items: flex-start;
  border-left: 2px solid var(--color-border);
  display: flex;
  gap: var(--sp-5);
  padding: 10px 0 10px 14px;
}

.history-row.good {
  border-left-color: #16a34a;
}

.history-row.bad {
  border-left-color: var(--color-danger);
}

.history-row.warn {
  border-left-color: #f59e0b;
}

.history-row.muted {
  border-left-color: var(--color-border-strong);
}

.history-icon {
  align-items: center;
  background: var(--color-surface-2);
  border-radius: var(--radius-circle);
  color: var(--color-text-muted);
  display: flex;
  flex-shrink: 0;
  font-size: var(--fs-sm);
  height: 26px;
  justify-content: center;
  width: 26px;
}

.history-row.good .history-icon {
  background: #dcfce7;
  color: #14532d;
}

.history-row.bad .history-icon {
  background: var(--color-danger-tint);
  color: var(--color-danger-strong);
}

.history-row.warn .history-icon {
  background: #fef3c7;
  color: #78350f;
}

.history-content {
  display: grid;
  gap: var(--sp-1);
}

.history-title {
  color: var(--color-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

.history-detail {
  color: var(--color-text-body);
  font-size: var(--fs-sm);
}

.history-note {
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
}

.history-date {
  color: var(--color-text-subtle);
  font-size: var(--fs-xs);
}

.cma-chart {
  margin-bottom: 18px;
}

.cma-chart h3,
.cma-table-wrap h3 {
  font-size: var(--fs-base);
  margin: 0 0 10px;
}

.cma-chart-frame {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px;
}

.cma-chart-svg {
  display: block;
  height: 140px;
  width: 100%;
}

.cma-chart-legend {
  color: var(--color-text-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--fs-xs);
  gap: 14px;
  margin-top: var(--sp-4);
}

.cma-chart-legend span {
  align-items: center;
  display: inline-flex;
  gap: var(--sp-3);
}

.cma-chart-legend i {
  border-radius: 2px;
  display: inline-block;
  height: 10px;
  width: 10px;
}

.cma-table-wrap {
  overflow-x: auto;
}

.cma-table {
  border-collapse: collapse;
  font-size: var(--fs-sm);
  width: 100%;
}

.cma-table th,
.cma-table td {
  border-bottom: 1px solid var(--color-border);
  padding: var(--sp-4) 10px;
  text-align: left;
}

.cma-table th {
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
}

.cma-table-link {
  min-height: 28px;
  padding: 0 var(--sp-4);
}

.cma-th-sort {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.cma-th-sort .cma-th-label {
  border-bottom: 1px dashed var(--color-border-strong);
  padding-bottom: 1px;
}

.cma-sort-indicator {
  color: var(--color-text-subtle);
  display: inline-flex;
  flex-direction: column;
  font-size: 8px;
  line-height: 1;
  margin-left: var(--sp-3);
  vertical-align: middle;
}

.cma-sort-indicator .up,
.cma-sort-indicator .down {
  display: block;
  height: 9px;
}

.cma-sort-indicator.asc .up,
.cma-sort-indicator.desc .down {
  color: var(--color-primary);
}

.cma-th-sort:hover {
  background: var(--color-surface-2);
  color: var(--color-text-body);
}

.cma-th-sort:hover .cma-sort-indicator {
  color: var(--color-text-body);
}

.cma-th-sort.active {
  color: var(--color-primary);
}

.cma-th-sort.active .cma-th-label {
  border-bottom-color: var(--color-primary);
  border-bottom-style: solid;
}

.cma-th-sort:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.cma-table-head {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  justify-content: space-between;
  margin-bottom: var(--sp-5);
}

.cma-table-head h3 {
  margin: 0;
}

.cma-table-hint {
  align-items: center;
  color: var(--color-text-muted);
  display: inline-flex;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  gap: var(--sp-3);
}

.cma-table-hint .ic {
  height: 12px;
  width: 12px;
}

.cma-table-address {
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}

.cma-table-address:hover {
  text-decoration: underline;
}

.cma-table-address:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.diff-pos {
  color: var(--color-danger);
  font-weight: var(--fw-bold);
}

.diff-neg {
  color: #16a34a;
  font-weight: var(--fw-bold);
}

@media print {
  @page {
    margin: 12mm;
  }
  body > *:not(.cma-overlay) {
    display: none !important;
  }
  .cma-overlay {
    background: #ffffff;
    display: block !important;
    inset: auto;
    overflow: visible;
    padding: 0;
    position: static;
  }
  .cma-modal {
    border: none;
    box-shadow: none;
    max-width: none;
  }
  .cma-header-actions {
    display: none;
  }
  .cma-summary,
  .cma-chart,
  .cma-table-wrap {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

.pagination {
  align-items: center;
  display: flex;
  gap: var(--sp-5);
  justify-content: center;
  margin-top: 20px;
}

.pagination:empty {
  display: none;
}

.pagination .btn-ghost[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}

.pagination-info {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

.scroll-top {
  align-items: center;
  background: linear-gradient(180deg, #3b82f6, var(--color-primary-hover));
  border: none;
  border-radius: var(--radius-circle);
  bottom: 24px;
  box-shadow: var(--shadow-float);
  color: var(--color-text-inverse);
  cursor: pointer;
  display: flex;
  font-size: var(--fs-2xl);
  height: 48px;
  justify-content: center;
  line-height: var(--lh-none);
  position: fixed;
  right: 24px;
  transition: transform 0.22s var(--ease-apple), box-shadow var(--transition);
  width: 48px;
  z-index: 50;
}

.scroll-top:hover {
  box-shadow:
    0 8px 24px rgba(37, 99, 235, 0.42),
    0 3px 8px rgba(37, 99, 235, 0.24);
  transform: translateY(-2px);
}

.scroll-top:active {
  transform: translateY(0) scale(0.96);
}

.scroll-top[hidden] {
  display: none;
}


/* Telegram login widget */
.tg-cta {
  align-items: center;
  background: var(--color-primary-soft);
  border: 1px solid var(--color-primary-border);
  border-radius: var(--radius-md);
  display: flex;
  gap: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
}
.tg-cta[hidden] {
  display: none;
}
.tg-cta .auth-box {
  flex: 0 0 auto;
  min-height: 0;
}

.tg-promo-text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  line-height: var(--lh-tight);
  text-align: right;
}
.tg-promo-text[hidden] {
  display: none;
}
.tg-promo-text strong {
  align-items: center;
  color: var(--color-text);
  display: inline-flex;
  font-size: var(--fs-sm);
  font-weight: var(--fw-extra);
  gap: var(--sp-3);
  justify-content: flex-end;
}
.tg-promo-text strong .ic {
  color: var(--color-primary);
  height: 16px;
  width: 16px;
}
.tg-promo-text span {
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
}

/* Favorites registration CTA */
.fav-cta {
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  margin-bottom: var(--sp-6);
  padding: var(--sp-8) var(--sp-7);
  text-align: center;
}
.fav-cta[hidden] {
  display: none;
}
.fav-cta-icon {
  align-items: center;
  background: var(--color-primary-tint);
  border-radius: var(--radius-circle);
  color: var(--color-primary);
  display: flex;
  height: 56px;
  justify-content: center;
  width: 56px;
}
.fav-cta-icon .ic {
  height: 28px;
  width: 28px;
}
.fav-cta h3 {
  color: var(--color-text);
  font-size: var(--fs-xl);
  font-weight: var(--fw-extra);
  margin: 0;
  max-width: 30ch;
}
.fav-cta p {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  margin: 0;
  max-width: 460px;
}
.fav-cta-auth {
  min-height: 40px;
}

.auth-box {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
}
.auth-user {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}
.auth-user img {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-circle);
  object-fit: cover;
}
.auth-logout {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  text-decoration: none;
}
.auth-logout:hover {
  color: var(--color-text);
  text-decoration: underline;
}
.auth-hint {
  font-size: var(--fs-xs);
  color: var(--color-text-subtle);
}

/* Admin-panel nav link (shown only to admins) */
a.nav-item {
  text-decoration: none;
}
.nav-item[hidden] {
  display: none;
}

/* Registration gate + onboarding modal (Steps 5 & 6) */
.reg-overlay {
  align-items: center;
  background: rgba(15, 23, 42, 0.5);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  display: none;
  inset: 0;
  justify-content: center;
  overflow-y: auto;
  padding: var(--sp-8) var(--sp-6);
  position: fixed;
  z-index: 200;
}

.reg-overlay.active {
  display: flex;
}

.reg-modal {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  max-width: 460px;
  padding: 26px 26px 22px;
  position: relative;
  width: 100%;
}

.reg-close {
  background: transparent;
  border: 0;
  color: var(--color-text-subtle);
  cursor: pointer;
  font-size: var(--fs-2xl);
  line-height: var(--lh-none);
  position: absolute;
  right: 16px;
  top: 14px;
}

.reg-close:hover {
  color: var(--color-text);
}

.reg-modal h2 {
  font-size: var(--fs-xl);
  margin: 0 var(--sp-4) var(--sp-3) 0;
}

.reg-sub {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  margin: 0 0 14px;
}

.reg-features {
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}

.reg-features li {
  display: grid;
  gap: var(--sp-1);
  padding: 10px var(--sp-5);
}

.reg-features b {
  font-size: var(--fs-sm);
}

.reg-features span {
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
}

.reg-auth {
  display: flex;
  justify-content: center;
  margin-bottom: var(--sp-5);
  min-height: 40px;
}

.reg-hint {
  color: var(--color-text-subtle);
  font-size: var(--fs-xs);
}

.reg-later {
  background: transparent;
  border: 0;
  color: var(--color-text-muted);
  cursor: pointer;
  display: block;
  font-size: var(--fs-sm);
  margin: 0 auto;
  padding: var(--sp-3) 10px;
}

.reg-later:hover {
  color: var(--color-text);
}

/* .reg-primary -> .btn .btn-primary .btn-block (see onboarding.js). */

/* Onboarding welcome window — wider modal, 2-column feature grid */
.onb-modal {
  max-width: 600px;
}

.onb-grid {
  grid-template-columns: 1fr 1fr;
}

.onb-grid li {
  align-content: start;
}

.onb-ic {
  align-items: center;
  background: linear-gradient(135deg, var(--color-primary-tint), var(--color-primary-soft));
  border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 1px var(--color-primary-border);
  color: var(--color-primary-hover);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: var(--fs-sm);
  height: 30px;
  justify-content: center;
  margin-bottom: var(--sp-3);
  width: 30px;
}

.onb-modal .reg-later {
  margin-top: var(--sp-4);
}

/* Permanent "Как это работает" block on the dashboard */
.how-it-works {
  margin-top: var(--sp-7);
}

.how-it-works > p {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  margin: var(--sp-3) 0 0;
}

.how-grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(3, 1fr);
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}

.how-grid li {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-6);
  transition: border-color var(--transition), box-shadow var(--transition),
              transform var(--transition);
}

.how-grid li:hover {
  border-color: var(--color-primary-border);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.how-grid b {
  font-size: var(--fs-sm);
}

.how-grid span:not(.onb-ic) {
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
}

@media (max-width: 880px) {
  .how-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 620px) {
  .onb-grid,
  .how-grid {
    grid-template-columns: 1fr;
  }
}

/* Site footer — legal links + attribution line (Step 7) */
.site-footer {
  border-top: 1px solid var(--color-border);
  margin-top: 28px;
  padding: 22px var(--sp-2) var(--sp-4);
  text-align: center;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
  justify-content: center;
  margin-bottom: 10px;
}

.site-footer nav a {
  color: #2563eb;
  font-size: var(--fs-sm);
  text-decoration: none;
}

.site-footer nav a:hover {
  text-decoration: underline;
}

.site-footer p {
  color: var(--color-text-subtle);
  font-size: var(--fs-xs);
  margin: 0 auto;
  max-width: 640px;
}