/* Новая подача приложения: глубокий фиолетовый, стекло, крупная типографика.
   Подключается последней. Палитра: #9286EA, #EF6794, #18142D, #F3F3F1. */
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('/static/fonts/onest-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('/static/fonts/onest-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --sans: 'Onest', system-ui, sans-serif;
  --mono: 'Onest', system-ui, sans-serif;
  --bg: #18142d;
  --sidebar: rgba(21, 17, 42, .66);
  --panel: rgba(32, 26, 62, .62);
  --panel-solid: #211b40;
  --panel-2: rgba(52, 44, 92, .66);
  --panel-hover: rgba(76, 66, 128, .72);
  --border: rgba(200, 190, 255, .14);
  --border-strong: rgba(200, 190, 255, .3);
  --text: #f3f3f1;
  --head: #fff;
  --text-2: #cbc6e2;
  --text-3: #a39dc2;
  --accent: #a79cf2;
  --accent-2: #ef6794;
  --accent-soft: #c6bff8;
  --accent-dim: rgba(146, 134, 234, .22);
  --good: #6fe3b4;
  --good-bg: rgba(111, 227, 180, .15);
  --bad: #ff8aa0;
  --bad-bg: rgba(239, 103, 148, .16);
  --gold: #f7c56e;
  --violet: #b9aff7;
  --up: #6fe3b4;
  --down: #ff8aa0;
  --radius: 12px;
  --radius-lg: 20px;
  --ease: cubic-bezier(.2, .75, .2, 1);
  --scene: url('/static/img/bg-sky.jpg') center 40% / cover no-repeat;
  --veil: linear-gradient(180deg, rgba(24, 20, 45, .34), rgba(24, 20, 45, .58));
  --scene-blur: 12px;
  --glass: blur(14px) saturate(1.25);
  --bar: rgba(21, 17, 42, .74);
  --dialog: rgba(33, 27, 64, .94);
  --tile: rgba(40, 33, 76, .55);
  --tint-violet: rgba(146, 134, 234, .36);
  --tint-pink: rgba(239, 103, 148, .36);
  --tint-gold: rgba(247, 197, 110, .26);
  --tint-good: rgba(111, 227, 180, .2);
  --sell: rgba(46, 38, 86, .55);
  --field: rgba(24, 20, 45, .55);
  --seg: rgba(24, 20, 45, .5);
  --hover: rgba(146, 134, 234, .16);
  --cta-bg: #f3f3f1; --cta-hover: #fff; --cta-fg: #18142d;
  --accent-text: #e4dffc;
  --glow-low: rgba(111, 227, 180, .08); --glow-high: rgba(111, 227, 180, .24);
  --card-shadow: 0 14px 40px rgba(10, 6, 28, .34), inset 0 1px 0 rgba(255, 255, 255, .07);
  --chart-grid: rgba(200, 190, 255, .09); --chart-grid-day: rgba(200, 190, 255, .18);
  --chart-text: #a39dc2; --chart-text-2: #cbc6e2; --chart-bar: rgba(167, 156, 242, .32);
  --chart-guide: rgba(203, 198, 226, .45); --chart-dot-edge: rgba(24, 20, 45, .85);
  --chart-tip-bg: rgba(33, 27, 64, .96); --chart-tip-text: #f3f3f1;
}

/* тёмная: спокойная, без картинки и стекла */
html[data-theme="dark"] {
  --bg: #0c0c1c; --sidebar: rgba(17, 16, 32, .74); --panel: rgba(22, 21, 40, .7); --panel-solid: #1a1930;
  --panel-2: #272530; --panel-hover: #312f3c;
  --border: rgba(255, 255, 255, .09); --border-strong: rgba(255, 255, 255, .2);
  --text: #ecebf2; --head: #fff; --text-2: #b0aebf; --text-3: #85838f;
  --scene: url('/static/img/bg-dark.jpg') center 45% / cover no-repeat;
  --veil: linear-gradient(180deg, rgba(10, 10, 24, .26), rgba(10, 10, 24, .44));
  --bar: rgba(15, 14, 30, .84); --dialog: rgba(26, 25, 48, .95); --tile: rgba(36, 34, 58, .62);
  --tint-violet: rgba(146, 134, 234, .16); --tint-pink: rgba(239, 103, 148, .13);
  --tint-gold: rgba(247, 197, 110, .1); --tint-good: rgba(111, 227, 180, .1);
  --sell: rgba(36, 34, 58, .62); --field: rgba(12, 12, 28, .62); --seg: rgba(12, 12, 28, .62); --hover: rgba(255, 255, 255, .07);
  --card-shadow: none;
  --chart-grid: rgba(255, 255, 255, .07); --chart-grid-day: rgba(255, 255, 255, .15);
  --chart-text: #85838f; --chart-text-2: #b0aebf; --chart-bar: rgba(167, 156, 242, .3);
  --chart-guide: rgba(255, 255, 255, .35); --chart-dot-edge: rgba(18, 17, 23, .85); --chart-tip-bg: rgba(29, 28, 37, .97);
}

/* светлая */
html[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f1f8; --sidebar: rgba(255, 255, 255, .72); --panel: rgba(255, 255, 255, .78); --panel-solid: #fff;
  --panel-2: #efecf8; --panel-hover: #e4dff4;
  --border: rgba(40, 30, 90, .12); --border-strong: rgba(40, 30, 90, .26);
  --text: #221c3d; --head: #15102b; --text-2: #565070; --text-3: #6f6a8a;
  --accent: #6251d4; --accent-2: #d63f78; --accent-soft: #4f40bd; --accent-dim: rgba(98, 81, 212, .12);
  --good: #0c7f57; --good-bg: rgba(12, 127, 87, .12); --bad: #c9285a; --bad-bg: rgba(201, 40, 90, .1);
  --gold: #946000; --violet: #6251d4; --up: #0c7f57; --down: #c9285a;
  --scene: url('/static/img/bg-light.jpg') center / cover no-repeat;
  --veil: none; --glass: blur(14px) saturate(1.1); --bar: rgba(255, 255, 255, .85); --dialog: #fff; --tile: rgba(255, 255, 255, .78);
  --tint-violet: rgba(146, 134, 234, .3); --tint-pink: rgba(239, 103, 148, .24);
  --tint-gold: rgba(247, 197, 110, .36); --tint-good: rgba(12, 127, 87, .13);
  --sell: rgba(255, 255, 255, .78); --field: #fff; --seg: #ece9f5; --hover: rgba(98, 81, 212, .09);
  --cta-bg: #18142d; --cta-hover: #2b2450; --cta-fg: #f3f3f1;
  --accent-text: #4a3bb6;
  --glow-low: rgba(12, 127, 87, .05); --glow-high: rgba(12, 127, 87, .16);
  --card-shadow: 0 10px 30px rgba(60, 45, 130, .1);
  --chart-grid: rgba(40, 30, 90, .08); --chart-grid-day: rgba(40, 30, 90, .17);
  --chart-text: #6f6a8a; --chart-text-2: #453f60; --chart-bar: rgba(98, 81, 212, .26);
  --chart-guide: rgba(40, 30, 90, .4); --chart-dot-edge: rgba(255, 255, 255, .9);
  --chart-tip-bg: rgba(255, 255, 255, .97); --chart-tip-text: #15102b;
}
html[data-theme="light"] .q1 { color: #2e9b45; } html[data-theme="light"] .q2 { color: #0a86c4; }
html[data-theme="light"] .q3 { color: #6a4fc0; } html[data-theme="light"] .q4 { color: #d32f3f; }
html[data-theme="light"] .q5 { color: #946000; } html[data-theme="light"] .q6 { color: #d9591f; }
html[data-theme="light"] .rank-RANK_NEWBIE { color: #4f8a17; } html[data-theme="light"] .rank-RANK_STALKER { color: #1673c4; }
html[data-theme="light"] .rank-RANK_VETERAN { color: #6a3fd0; } html[data-theme="light"] .rank-RANK_MASTER { color: #d32f3f; }
html[data-theme="light"] .rank-RANK_LEGEND { color: #946000; } html[data-theme="light"] .rank-QUEST_ITEM { color: #137f73; }
html[data-theme="light"] .badge.neutral { background: rgba(40, 30, 90, .07); }
html[data-theme="light"] .beta-tag { background: rgba(247, 197, 110, .3); border-color: rgba(148, 96, 0, .4); }
html[data-theme="light"] tbody tr:hover { background: var(--hover); }

html[data-theme="light"] .btn.buy, html[data-theme="light"] .btn.buy:hover { color: var(--head) !important; }
html[data-theme="light"] .cat-dd-btn, html[data-theme="light"] .cat-dd > button { background: var(--field) !important; color: var(--text) !important; }

/* ── задник ───────────────────────────────────────────────────────── */
html { background: var(--bg); }
body { background: transparent !important; }
body::before {
  content: "" !important; display: block !important; position: fixed !important; inset: -60px !important;   /* запас, иначе размытие даёт светлую кайму */
  z-index: -2 !important; opacity: 1 !important; pointer-events: none;
  background: var(--scene) !important;
  filter: blur(var(--scene-blur));
}
body::after {
  content: "" !important; display: block !important; position: fixed !important; inset: 0 !important;
  z-index: -1 !important; pointer-events: none;
  background: var(--veil) !important;
}
#app, #tab-content, #tab-content > section { background: transparent !important; }


/* ── стекло ───────────────────────────────────────────────────────── */
.card, .kpi, .stat, #item-panel, .nav, nav, #sidebar, #statusbar, dialog,
.sell-opt, .sell-block, .lot-insight, .q-breakdown, .catch-block, .find-toast {
  -webkit-backdrop-filter: var(--glass) !important;
  backdrop-filter: var(--glass) !important;
}
.card, .kpi {
  background: var(--panel) !important; border-color: var(--border) !important; border-radius: var(--radius-lg) !important;
  box-shadow: var(--card-shadow) !important;
}
#item-panel, #sidebar, nav, .nav { background: var(--sidebar) !important; }
#statusbar { background: var(--bar) !important; }
dialog { background: var(--dialog) !important; border-radius: var(--radius-lg) !important; }

/* ── типографика ──────────────────────────────────────────────────── */
body { font-feature-settings: "tnum" 1; }
.page-head h2 { font-size: calc(34px * var(--fs)) !important; font-weight: 300 !important; letter-spacing: -.025em; line-height: 1.08; color: var(--head); }
.page-head p.muted, .page-head .muted { font-size: calc(14px * var(--fs)) !important; color: var(--text-2); max-width: 70ch; margin-top: 6px; }
.card-title span { font-size: 1.3em; font-weight: 500; letter-spacing: -.015em; }
h3 { font-weight: 500; letter-spacing: -.01em; }
.muted { font-size: calc(13.5px * var(--fs)); color: var(--text-2); }
th { font-weight: 500 !important; }
.nav-lbl { font-weight: 500; }
.stat .lbl, .kpi-lbl { font-size: calc(12.5px * var(--fs)) !important; color: var(--text-2) !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 400 !important; }
.stat .val, .stat b, .kpi-val { font-weight: 600 !important; letter-spacing: -.02em; }
.kpi-val { font-size: calc(30px * var(--fs)) !important; font-weight: 300 !important; }
.med-note, .sell-price small { text-transform: none !important; letter-spacing: 0 !important; }

/* показатели как мягкие цветные плашки */
.stat, .kpi { position: relative; overflow: hidden; border-radius: 16px !important; border: 1px solid var(--border) !important; }
.stat { background: radial-gradient(120% 130% at 100% 0, var(--tint-violet), transparent 62%), var(--tile) !important; }
.stat:nth-child(3n+2), .kpi:nth-child(2) { background: radial-gradient(120% 130% at 100% 0, var(--tint-pink), transparent 62%), var(--tile) !important; }
.stat:nth-child(3n), .kpi:nth-child(3) { background: radial-gradient(120% 130% at 100% 0, var(--tint-gold), transparent 62%), var(--tile) !important; }
.kpi:nth-child(1) { background: radial-gradient(120% 130% at 100% 0, var(--tint-violet), transparent 62%), var(--tile) !important; }
.sell-opt { border-radius: 16px !important; background: var(--sell) !important; }
.sell-opt:first-child { background: radial-gradient(130% 150% at 0 100%, var(--tint-good), transparent 60%), var(--sell) !important; }

/* ── кнопки и навигация ───────────────────────────────────────────── */
.btn, .btn-primary, .btn-sniper, .btn-sold, .seg, .cf-chip, .side-btn { transition: background .2s var(--ease), border-color .2s var(--ease), color .2s, transform .2s var(--ease) !important; }
.btn, .btn-primary, .btn-sniper, .btn-sold { border-radius: 999px !important; }
.btn:hover, .btn-primary:hover, .btn-sniper:hover { transform: translateY(-1px); }
.btn:active, .btn-primary:active, .btn-sniper:active { transform: scale(.97) !important; }
.btn.primary, .btn-primary { background: var(--cta-bg) !important; border-color: var(--cta-bg) !important; color: var(--cta-fg) !important; font-weight: 600 !important; }
.btn.primary:hover, .btn-primary:hover { background: var(--cta-hover) !important; border-color: var(--cta-hover) !important; }
.btn.accent, .btn-sniper { background: var(--accent-dim) !important; border-color: rgba(167, 156, 242, .4) !important; color: var(--accent-text) !important; }
.btn.accent:hover, .btn-sniper:hover { background: rgba(146, 134, 234, .36) !important; }
.seg { background: var(--seg) !important; border-radius: 999px !important; }
.seg button { border-radius: 999px !important; }
.cf-chip { border-radius: 999px !important; }
input, select { border-radius: 12px !important; background: var(--field) !important; border-color: var(--border) !important; color: var(--text) !important; }
input:focus, select:focus { border-color: var(--accent) !important; }
select option { background: var(--panel-solid); }
.nav button, .side-btn, .switch-row { border-radius: 14px !important; transition: background .2s var(--ease), transform .2s var(--ease); }
.nav button.active, #tabs button.active {
  background: linear-gradient(95deg, rgba(146, 134, 234, .42), rgba(239, 103, 148, .2)) !important;
  box-shadow: inset 0 0 0 1px var(--border-strong) !important; color: var(--head) !important;
}
#tabs button.active::before { display: none !important; }
.nav button:hover:not(.active), .item-row:hover { background: var(--hover) !important; }
.nav-axel img.axel { transition: transform .28s var(--ease); }
.nav button:hover .nav-axel img.axel, .switch-row:hover .nav-axel img.axel, .side-btn:hover .nav-axel img.axel { transform: scale(1.14) rotate(-4deg); }
.item-row { border-radius: 12px; transition: background .16s var(--ease); }
.item-row.selected { background: var(--accent-dim) !important; box-shadow: inset 0 0 0 1px var(--border-strong) !important; }
tbody tr { transition: background .16s var(--ease); }

/* ── плавность ────────────────────────────────────────────────────── */
#tab-content > section.active { animation: rise .36s var(--ease) both; }
#item-card:not(.empty) { animation: rise .3s var(--ease) both; }
.sell-block, .lot-insight, .catch-block, .q-breakdown { animation: rise .34s var(--ease) both; }
.loot-row { animation: rise .26s var(--ease) both; }
dialog[open] { animation: pop .24s var(--ease) both; }
dialog::backdrop { background: rgba(14, 10, 30, .6) !important; }
.toast { animation: rise .24s var(--ease) both !important; border-radius: 999px !important; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes pop { from { opacity: 0; transform: scale(.96); } }

/* выгодный лот мягко светится */
tr.cheap td { animation: cheap-glow 3.2s ease-in-out infinite; }
@keyframes cheap-glow { 0%, 100% { background: var(--glow-low); } 50% { background: var(--glow-high); } }
.badge.good { box-shadow: 0 0 14px rgba(111, 227, 180, .32) !important; }

/* находка снайпера */
.find-toast { background: var(--dialog) !important; border-radius: 18px !important; border-color: rgba(167, 156, 242, .5) !important; animation: toast-in .42s var(--ease) both !important; }
@keyframes toast-in { from { opacity: 0; transform: translateX(44px); } }
.axel-cheer { position: fixed; z-index: 305; right: 26px; bottom: 46px; display: flex; flex-direction: column; align-items: center; pointer-events: none; animation: cheer-in .5s cubic-bezier(.3, 1.5, .5, 1) both; }
.axel-cheer.out { animation: cheer-out .3s ease-in both; }
.axel-cheer img { width: 168px; height: 168px; object-fit: contain; animation: cheer-jump .62s ease-in-out 3; filter: drop-shadow(0 12px 22px rgba(10, 6, 28, .5)); }
.axel-cheer b { padding: 7px 16px; border-radius: 999px; background: #f3f3f1; color: #18142d; font-weight: 600; font-size: calc(15px * var(--fs)); white-space: nowrap; }
@keyframes cheer-in { from { opacity: 0; transform: translateY(46px) scale(.7); } }
@keyframes cheer-out { to { opacity: 0; transform: translateY(26px) scale(.86); } }
@keyframes cheer-jump { 50% { transform: translateY(-20px) rotate(-3deg); } }

@media (max-width: 900px) {
  .card, .kpi, .stat, #item-panel, .nav, nav, #sidebar, #statusbar, .sell-opt, .sell-block, .lot-insight, .q-breakdown, .catch-block {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  .card, .kpi { background: var(--panel-solid) !important; }
  #item-panel, #sidebar, nav, .nav { background: var(--panel-solid) !important; }
  .page-head h2 { font-size: calc(26px * var(--fs)) !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* переключатель темы: тёмная, пурпурная (по умолчанию), светлая */
.theme-toggle { --stop: 24px; position: relative; display: inline-flex; flex: none; padding: 2px; height: 26px; border-radius: 999px; background: var(--seg); box-shadow: inset 0 0 0 1px var(--border-strong) !important; }
.theme-toggle i { position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #6b5fc4, #352d6b); box-shadow: 0 2px 7px rgba(20, 12, 50, .4) !important; transition: transform .32s cubic-bezier(.3, 1.35, .5, 1), background .3s; }
.theme-toggle[data-at="1"] i { transform: translateX(var(--stop)); background: linear-gradient(135deg, #9286ea, #ef6794); }
.theme-toggle[data-at="2"] i { transform: translateX(calc(var(--stop) * 2)); background: linear-gradient(135deg, #ffd98c, #f7a95f); }
.theme-toggle button { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: 2px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--text-3); cursor: pointer; transition: color .2s var(--ease), transform .2s var(--ease); }
.theme-toggle button:last-of-type { margin-right: 0; }
.theme-toggle button:hover { color: var(--head); transform: scale(1.12); }
.theme-toggle button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.theme-toggle button[aria-checked="true"] { color: #fff; }
.theme-toggle[data-at="2"] button[aria-checked="true"] { color: #5a3600; }
.theme-toggle svg { width: 13px; height: 13px; fill: currentColor; }
@media (max-width: 600px) { #sb-plan { display: none; } }