/* =====================================================================
 * GoldMaker — "Titanium Deck" redesign override layer
 * ---------------------------------------------------------------------
 * Loads AFTER auction-app.css. Re-themes the shell (full-width top bar,
 * centered command bar, meta row) and the data table to a black / deep-blue
 * metallic look: brushed titanium + polished chrome surfaces, ice-blue
 * interactive accent, a touch of gold (brand + GPH). Markup is generated by
 * auction-app.js (untouched); this file only restyles it. Everything is
 * scoped under body.td-theme so overrides win specificity over the base.
 * ===================================================================== */

.td-theme{
  --black:#05080d; --bg:#070b12; --navy:#0c1626; --glass:#0b1422;
  --chrome-hi:#f2f6fa; --chrome:#c8d2dc; --chrome-mid:#97a3af; --chrome-lo:#d6dee6;
  --titanium:#9aa6b2; --titanium-dim:#6b7782; --steel:#3a4856;
  --ice:#7fb4e6; --ice-bright:#bfe0ff; --ice-deep:#3f6f9e;
  --tgold:#e8c87a; --tgold-bright:#ffe6a8; --tgold-soft:#b6975a;
  --ttext:#eef3f8; --tmuted:#93a1ad; --tfaint:#5e6c78;
  --tgreen:#7fe3b0; --tred:#ff9b9b; --edge:#a6c0d6; --sheen:#e6f2ff;
  --chrome-face:linear-gradient(180deg,#f2f6fa 0%,#c2ccd6 46%,#97a3af 54%,#d6dee6 100%);
  --titanium-face:linear-gradient(180deg,rgba(48,62,78,.74),rgba(15,26,40,.74));
  --glass-face:linear-gradient(160deg,rgba(230,242,252,.06) 0%,rgba(230,242,252,.012) 20%,rgba(0,0,0,.12) 100%);
  --ease:cubic-bezier(.22,.61,.36,1);
  /* Remap the legacy warm/gold base tokens (auction-app.css :root) to the
     Titanium Deck palette, so any component that still reads them (recipe
     spoiler, chain tree, scrollbars, glass tiles…) stays on-theme. */
  --panel:#0b1422; --panel2:#0c1626;
  --border:#26323f; --border-soft:rgba(150,175,200,.22);
  --gold:#e8c87a; --gold-soft:#b6975a;
  --text:#eef3f8; --muted:#93a1ad;
  --green:#7fe3b0; --green-muted:#4f8f74; --red:#ff9b9b;
  --table-row-zebra:rgba(160,185,210,.025);
  --scrollbar-track:rgba(6,11,18,.9); --scrollbar-thumb:rgba(58,72,86,.85);
  --scrollbar-thumb-hover:rgba(127,180,230,.5); --scrollbar-thumb-border:rgba(127,180,230,.22);
  --glass-fill:linear-gradient(157deg, rgba(40,55,72,.30) 0%, rgba(13,24,40,.30) 55%, rgba(8,14,24,.40) 100%);
  --glass-border:rgba(160,185,210,.2); --glass-highlight:rgba(225,240,252,.1);
  --tile-fill:linear-gradient(157deg, rgba(220,235,250,.05), rgba(220,235,250,.012));
  --tile-border:rgba(160,185,210,.16);
}

/* ---- base / backdrop ---- */
/* Base auction-app.css pins html,body to height:100% + overflow:hidden (legacy fixed
   grid). The Titanium Deck is a normal-flow document — let the page scroll vertically
   when the table is taller than the viewport, keep horizontal overflow clipped. */
html{ height:auto; overflow-x:hidden; overflow-y:auto; }
body.td-theme{ background:var(--bg); color:var(--ttext); font-family:'Inter',system-ui,sans-serif;
  height:auto; min-height:100vh; overflow-x:hidden; overflow-y:auto; }
.td-theme .app{ display:block; width:100%; max-width:none; margin:0; padding:0; background:none; height:auto; min-height:100vh; }
.td-deck{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  background:radial-gradient(120% 85% at 50% -12%, #142234 0%, #0a121e 45%, #05080d 100%); }
.td-halo{ position:absolute; border-radius:50%; filter:blur(90px); }
.td-halo-ice{ width:980px; height:980px; left:-200px; top:-360px; background:radial-gradient(closest-side, rgba(127,180,230,.14), transparent); }
.td-halo-gold{ width:760px; height:760px; right:-180px; bottom:-280px; background:radial-gradient(closest-side, rgba(232,200,122,.07), transparent); }
.td-vignette{ position:absolute; inset:0; background:radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0,0,0,.45) 100%); }
.td-theme .app, .td-theme .td-topbar, .td-theme .main{ position:relative; z-index:1; }
/* The topbar hosts the realm combobox dropdown (a position:absolute child). It must stack
   ABOVE .main — otherwise the dropdown paints UNDER the recipe/signals panels: the shared
   rule above put both .td-topbar and .main at z-index:1, and .main comes later in the DOM,
   so it (and its backdrop-filter panels) won over the topbar's whole stacking context.
   This override wins by being later + equal specificity. Below modals (9500) / toasts (1000). */
.td-theme .td-topbar{ z-index:40; }
.td-theme svg{ display:block; }

/* ===== FULL-WIDTH TOP BAR ===== */
.td-topbar{ width:100%; height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
  background:linear-gradient(180deg, rgba(16,28,46,.7), rgba(7,11,18,.55)); backdrop-filter:blur(16px) saturate(1.2);
  border-bottom:1px solid rgba(150,175,200,.14); position:sticky; top:0; z-index:20; }
.td-topbar::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(191,224,255,.55) 35%, rgba(232,200,122,.4) 65%, transparent); }
.td-brand{ display:flex; align-items:center; gap:12px; }
.td-mark{ width:34px; height:34px; border-radius:9px; display:grid; place-items:center;
  background:none; box-shadow:0 2px 8px rgba(0,0,0,.5); overflow:hidden; }
.td-mark svg{ width:21px; height:21px; }
.td-mark-img{ width:34px; height:34px; border-radius:9px; display:block; }
.td-wordmark{ display:flex; flex-direction:column; line-height:1; }
.td-theme .td-wordmark .title{ font-family:'Chakra Petch',sans-serif; font-weight:600; font-size:18px; letter-spacing:3px;
  color:#dfe9f2; background:linear-gradient(180deg,#fff,#aab8c6); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; margin:0; }
.td-wordmark .td-sub{ font-size:8px; letter-spacing:3px; color:var(--ice); opacity:.7; margin-top:3px; }
.td-topbar-right{ display:flex; align-items:center; gap:14px; }
/* ── Topbar chips + hover dropdowns ─────────────────────────────────────────
   .td-chip — the shared 32px chip; .td-dd wraps a chip + .td-dd-menu that opens
   on hover (pure CSS) or via .is-open (click toggle for touch, wired in
   initTopbarDropdowns_). Two dropdowns live in the topbar: the globe
   (язык + регион + реалм) and the user menu (профиль/настройки/выход). */
.td-theme .td-chip{ display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 12px; border-radius:10px;
  background:var(--titanium-face); border:1px solid rgba(150,175,200,.18); color:var(--tmuted);
  font-size:12px; font-family:inherit; box-shadow:inset 0 1px 0 rgba(220,235,250,.08);
  cursor:pointer; user-select:none; white-space:nowrap; transition:border-color .2s var(--ease), color .2s var(--ease); }
.td-theme .td-chip:hover{ border-color:rgba(127,180,230,.5); }
.td-theme .td-chip:focus-visible{ outline:2px solid rgba(127,180,230,.6); outline-offset:2px; }
.td-theme .td-chip-ico{ width:15px; height:15px; color:var(--titanium); flex:0 0 auto; }
.td-theme .td-chip-caret{ width:10px; height:10px; color:var(--tfaint); flex:0 0 auto; transition:transform .2s var(--ease); }
.td-theme .td-dd:hover .td-chip-caret, .td-theme .td-dd.is-open .td-chip-caret{ transform:rotate(180deg); }

.td-theme .td-dd{ position:relative; }
.td-theme .td-dd-menu{ position:absolute; top:calc(100% + 6px); right:0; z-index:70; min-width:100%;
  background:#0c1626; border:1px solid rgba(127,180,230,.28); border-radius:12px; padding:6px;
  box-shadow:0 14px 34px rgba(0,0,0,.55), inset 0 1px 0 rgba(220,235,250,.05);
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .16s var(--ease), transform .16s var(--ease), visibility .16s; }
/* Invisible bridge between the chip and the menu so hover doesn't drop in the gap. */
.td-theme .td-dd-menu::before{ content:''; position:absolute; top:-8px; left:0; right:0; height:8px; }
.td-theme .td-dd:hover .td-dd-menu,
.td-theme .td-dd.is-open .td-dd-menu{ opacity:1; visibility:visible; transform:translateY(0); }
/* Touch devices: no hover — only the click-driven .is-open state opens the menu. */
@media (hover:none){
  .td-theme .td-dd:not(.is-open) .td-dd-menu{ opacity:0; visibility:hidden; transform:translateY(-4px); }
}
.td-theme .td-dd-sep{ height:1px; margin:5px 8px; background:linear-gradient(90deg,transparent,rgba(166,192,214,.22),transparent); }
.td-theme .td-dd-item{ display:flex; align-items:center; gap:9px; width:100%; padding:8px 11px; border-radius:8px; border:0;
  background:none; color:var(--ttext); font-size:12.5px; font-family:inherit; cursor:pointer; text-align:left;
  white-space:nowrap; transition:background-color .12s var(--ease), color .12s var(--ease); }
.td-theme .td-dd-item:hover{ background-color:#16283a; color:var(--ice-bright); }
.td-theme .td-dd-ico{ width:15px; height:15px; color:var(--titanium); flex:0 0 auto; }
.td-theme .td-dd-item:hover .td-dd-ico{ color:var(--ice); }
.td-theme .td-dd-item.is-soon{ opacity:.5; cursor:default; }
.td-theme .td-dd-item.is-soon:hover{ background:none; color:var(--ttext); }
.td-theme .td-soon{ margin-left:auto; padding-left:12px; font-size:9px; font-weight:700; letter-spacing:.8px;
  text-transform:uppercase; color:var(--tfaint); }
.td-theme .td-dd-item.is-danger{ color:var(--tred); }
.td-theme .td-dd-item.is-danger .td-dd-ico{ color:var(--tred); opacity:.75; }
.td-theme .td-dd-item.is-danger:hover{ background-color:rgba(232,122,122,.12); color:#ffc2c2; }

/* ── Globe chip: current market value + language flag badge ── */
.td-theme .td-world-ico{ position:relative; width:18px; height:18px; flex:0 0 auto; }
.td-theme .td-world-ico .td-chip-ico{ width:18px; height:18px; }
.td-theme .td-flag{ display:inline-flex; width:18px; height:13px; border-radius:2.5px; overflow:hidden; flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(255,255,255,.14); }
.td-theme .td-flag svg{ display:block; width:100%; height:100%; }
.td-theme .td-flag-badge{ position:absolute; right:-6px; bottom:-4px; width:12px; height:9px; border-radius:2px;
  box-shadow:0 0 0 1.5px #0d1828; }
/* Вариант А: чип-глобус показывает только иконку с флаг-бейджем языка —
   текущий рынок (region · realm) виден в шапке dropdown, не в самом чипе. */
.td-theme .td-world-value{ display:none; }
.td-theme .td-world-menu{ min-width:266px; padding:11px; }
.td-theme .td-world-current{ display:flex; align-items:center; gap:8px; padding:2px 2px 9px; font-size:12px; color:var(--tmuted);
  border-bottom:1px solid rgba(166,192,214,.14); }
.td-theme .td-world-current b{ color:var(--ice-bright); font-weight:600; font-family:'Roboto Mono',monospace; }
.td-theme .td-world-current span{ margin-left:auto; color:var(--tfaint); font-size:11px; }
.td-theme .td-world-label{ font-size:9.5px; font-weight:700; letter-spacing:1.1px; text-transform:uppercase; color:var(--tfaint);
  margin:11px 2px 6px; }
.td-theme .td-world-langs{ display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.td-theme .td-world-lang{ display:flex; align-items:center; justify-content:center; gap:7px; height:30px; border-radius:8px;
  border:1px solid rgba(150,175,200,.18); background:var(--titanium-face); color:var(--tmuted);
  font-size:12px; font-family:inherit; cursor:pointer; transition:.15s var(--ease); }
.td-theme .td-world-lang:hover{ border-color:rgba(127,180,230,.5); color:var(--ttext); }
.td-theme .td-world-lang.is-active{ background:linear-gradient(180deg,rgba(63,111,158,.55),rgba(22,40,58,.8));
  border-color:rgba(127,180,230,.6); color:var(--ice-bright); box-shadow:0 0 10px rgba(127,180,230,.18); }
.td-theme .td-world-regions{ display:grid; grid-template-columns:repeat(4,1fr); gap:5px; }
.td-theme .td-world-region{ height:30px; border-radius:8px; border:1px solid rgba(150,175,200,.18); background:var(--titanium-face);
  color:var(--tmuted); font-size:11.5px; font-weight:700; font-family:'Roboto Mono',monospace; letter-spacing:.5px;
  cursor:pointer; transition:.15s var(--ease); }
.td-theme .td-world-region:hover{ border-color:rgba(127,180,230,.5); color:var(--ttext); }
.td-theme .td-world-region.is-active{ background:linear-gradient(180deg,rgba(63,111,158,.55),rgba(22,40,58,.8));
  border-color:rgba(127,180,230,.6); color:var(--ice-bright); box-shadow:0 0 10px rgba(127,180,230,.18); }

/* ── Searchable realm combobox (246–267 realms → native <select> is unusable) ──
   Lives INSIDE the globe dropdown (.td-world-menu): the input spans the menu
   width and the options list flows statically below it (the menu grows), instead
   of the old absolutely-positioned popover next to a standalone topbar input. */
.td-theme .realm-combo{ position:relative; }
.td-theme .realm-combo-input{ width:100%; height:32px; padding:0 12px 0 30px; border-radius:9px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa6b2' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.2-3.2'/%3E%3C/svg%3E") no-repeat left 9px center / 14px,
    rgba(5,10,17,.7);
  border:1px solid rgba(150,175,200,.18); color:var(--ttext); font-size:12px; box-shadow:inset 0 1px 0 rgba(220,235,250,.05);
  -webkit-appearance:none; appearance:none; cursor:text; transition:.2s var(--ease); }
.td-theme .realm-combo-input::placeholder{ color:var(--tmuted); }
.td-theme .realm-combo-input:hover{ border-color:rgba(127,180,230,.5); }
.td-theme .realm-combo-input:focus-visible{ outline:2px solid rgba(127,180,230,.6); outline-offset:2px; }
.td-theme .realm-combo-list{ position:static; width:100%; max-width:none;
  max-height:200px; overflow-y:auto; margin:6px 0 0; padding:2px; list-style:none;
  background:none; border:0; border-radius:8px; box-shadow:none; }
.td-theme .realm-combo-option{ padding:7px 10px; border-radius:8px; font-size:12px; color:var(--ttext); cursor:pointer;
  white-space:nowrap; transition:background-color .12s var(--ease), color .12s var(--ease); }
.td-theme .realm-combo-option:hover,
.td-theme .realm-combo-option.is-active{ background-color:#16283a; color:var(--ice-bright); }
.td-theme .realm-combo-option.is-current{ color:var(--ice-bright); }
.td-theme .realm-combo-option.is-current::after{ content:'✓'; float:right; margin-left:14px; color:var(--ice); opacity:.8; }
.td-theme .realm-combo-empty{ padding:8px 10px; font-size:12px; color:var(--tmuted); }
.td-theme .online-indicator{ display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 12px; border-radius:10px;
  background:var(--titanium-face); border:1px solid rgba(143,227,176,.22); color:var(--tmuted); font-size:12px; }
.td-theme .online-indicator-dot{ width:8px; height:8px; border-radius:50%; background:var(--tgreen); box-shadow:0 0 8px rgba(127,227,176,.9); }
.td-theme .online-indicator-count{ color:var(--ttext); font-family:'Roboto Mono',monospace; }
.td-theme .auth-topbar{ display:flex; align-items:center; gap:12px; background:none; border:0; padding:0; margin:0;
  height:auto; box-shadow:none; overflow:visible; backdrop-filter:none; -webkit-backdrop-filter:none; }
/* Kill the legacy decorative bar (gold top line + texture) that spanned the whole
   strip and overlapped the login button. */
.td-theme .auth-topbar::before, .td-theme .auth-topbar::after{ display:none; content:none; }
.td-theme .auth-topbar-login{ padding:9px 20px; border-radius:11px; font-weight:600; font-size:13px; color:var(--black);
  background:var(--chrome-face); border:1px solid rgba(255,255,255,.5); cursor:pointer; transition:.25s var(--ease);
  box-shadow:0 2px 8px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.8); }
.td-theme .auth-topbar-login:hover{ transform:translateY(-1px); box-shadow:0 4px 16px rgba(127,180,230,.4), inset 0 1px 0 rgba(255,255,255,.9); }
/* Logged-in cluster: portfolio chip + user dropdown side by side (display:flex is
   toggled by updateAuthUi_). */
.td-theme #authTopbarUserPanel{ align-items:center; gap:10px; }
/* User chip: avatar initials + name; the dropdown holds профиль/настройки/выход. */
.td-theme .td-user{ padding:0 12px 0 5px; gap:8px; }
.td-theme .td-user > b{ color:var(--ice-bright); font-weight:600; max-width:150px; overflow:hidden; text-overflow:ellipsis; }
.td-theme .td-avatar{ width:24px; height:24px; border-radius:7px; flex:0 0 auto; display:grid; place-items:center;
  font-size:10.5px; font-weight:800; color:var(--black); letter-spacing:.3px;
  background:linear-gradient(160deg,#bfe0ff,#7fb4e6 60%,#3f6f9e); box-shadow:inset 0 1px 0 rgba(255,255,255,.6); }
.td-theme .td-user-menu{ min-width:200px; }
.td-theme .td-user-head{ padding:9px 11px 7px; }
.td-theme .td-user-head-name{ font-size:12.5px; font-weight:700; color:var(--ttext); }
.td-theme .td-user-head-mail{ font-size:10.5px; color:var(--tfaint); font-family:'Roboto Mono',monospace; margin-top:1px; }
/* Portfolio chip with the live PnL value (renderPfChip_). */
.td-theme .td-portfolio{ border-color:rgba(232,200,122,.28); }
.td-theme .td-portfolio:hover{ border-color:rgba(232,200,122,.55); color:var(--ttext); }
.td-theme .td-portfolio .td-chip-ico{ color:var(--tgold-soft); }
.td-theme .td-pnl{ font-family:'Roboto Mono',monospace; font-weight:600; font-size:11.5px; letter-spacing:.2px; }
.td-theme .td-pnl.is-up{ color:var(--tgreen); }
.td-theme .td-pnl.is-down{ color:var(--tred); }
.td-theme .td-pnl.is-flat{ color:var(--tfaint); }

/* ===== STAGE / centered column ===== */
.td-theme main.main.td-stage{ display:flex; flex-direction:column; align-items:center; width:100%; max-width:none;
  margin:0; padding:30px 24px 60px; gap:0; background:none; }
/* margin-top separates the rail from the ticker above — without it the search field's
   ice glow bleeds up onto the .buy-signals strip (they sit flush in the stage). */
/* Rail pulled up tight under the ticker (the search no longer takes its own top row —
   it now lives inline in the controls row, between analysis and budget). */
.td-command{ display:flex; flex-direction:column; align-items:center; gap:12px; width:100%; max-width:1340px; margin-top:12px; }

/* category chips (.cat injected by buildCategories). #categoryList included to
   beat base rules like `#categoryList .cat` (id specificity). */
.td-theme #categoryList.td-cats{ display:flex; flex-wrap:wrap; justify-content:center; align-content:flex-start;
  gap:8px; width:100%; max-width:1340px; padding:0; margin:0; background:none; border:0; max-height:none; overflow:visible; }
.td-theme #categoryList.td-cats .cat{ display:inline-flex; align-items:center; width:auto; height:34px; padding:0 14px; border-radius:10px;
  cursor:pointer; font-size:12.5px; color:var(--tmuted); background:var(--titanium-face); border:1px solid rgba(150,175,200,.16);
  box-shadow:inset 0 1px 0 rgba(220,235,250,.07); transition:.2s var(--ease); white-space:nowrap; text-align:center; }
.td-theme #categoryList.td-cats .cat:hover{ color:var(--ice-bright); border-color:rgba(127,180,230,.5);
  box-shadow:0 0 16px rgba(127,180,230,.22), inset 0 1px 0 rgba(220,235,250,.12); transform:translateY(-1px); }
.td-theme #categoryList.td-cats .cat:active{ transform:translateY(0) scale(.97); }
.td-theme #categoryList.td-cats .cat.active{ color:var(--black); font-weight:600; border-color:rgba(255,255,255,.5);
  background:var(--chrome-face); box-shadow:0 2px 10px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.8); }
/* Drop the legacy gold vertical bar — the chrome active fill is the indicator now. */
.td-theme #categoryList.td-cats .cat::before{ display:none; }

/* controls row — analysis · search · budget stay on ONE line (no wrap); only the
   search flexes (grows/shrinks) so the budget never drops to a second row. The
   <=760px media query switches this to a stacked column. */
.td-controls{ display:flex; flex-wrap:nowrap; align-items:center; justify-content:center; gap:12px; }
.td-theme .td-controls .td-analysis,
.td-theme .td-controls .td-budget{ flex:0 0 auto; }
.td-theme .calc-mode-panel.td-analysis{ display:flex; align-items:center; gap:10px; margin:0; padding:0; background:none; border:0; }
.td-theme .td-analysis .calc-mode-label{ font-size:10px; letter-spacing:2px; color:var(--ice-bright); text-transform:uppercase; margin:0; font-weight:600; }
.td-theme .calc-mode-toggle{ display:flex; gap:4px; padding:4px; border-radius:13px; background:rgba(7,13,22,.6);
  border:1px solid rgba(150,175,200,.18); box-shadow:inset 0 2px 6px rgba(0,0,0,.5); }
/* JS toggles `is-active` (not `active`) — стилизуем именно его, иначе активная кнопка
   рендерится базовой золотой темой (тёмная на тёмном) и плохо читается. */
.td-theme .calc-mode-btn{ display:inline-flex; align-items:center; gap:7px; padding:9px 12px; border-radius:9px; border:0;
  cursor:pointer; font-size:12.5px; font-family:inherit; color:var(--tmuted); background:transparent; transition:.2s var(--ease); }
.td-theme .calc-mode-ico{ width:15px; height:15px; stroke:var(--titanium); flex:none; }
.td-theme .calc-mode-btn:hover{ color:var(--ice-bright); }
.td-theme .calc-mode-btn:hover .calc-mode-ico{ stroke:var(--ice-bright); }
.td-theme .calc-mode-btn.is-active{ color:var(--black); font-weight:600; background:var(--chrome-face);
  box-shadow:0 2px 8px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.8); }
.td-theme .calc-mode-btn.is-active .calc-mode-ico{ stroke:#11202e; }

/* glass fields (budget + search) */
.td-theme .td-field{ display:inline-flex; align-items:center; gap:9px; height:44px; padding:0 16px; border-radius:12px;
  background:var(--glass-face), rgba(13,24,40,.55); border:1px solid rgba(150,175,200,.22);
  backdrop-filter:blur(12px); box-shadow:inset 0 1px 0 rgba(220,235,250,.08); transition:.2s var(--ease); margin:0; }
.td-theme .td-field:focus-within{ border-color:rgba(127,180,230,.55); box-shadow:0 0 16px rgba(127,180,230,.16), inset 0 1px 0 rgba(220,235,250,.1); }
.td-theme .td-field-ico{ display:inline-flex; color:var(--ice); }
.td-theme .td-field-ico svg{ width:17px; height:17px; }
.td-theme .td-budget .budget-label{ font-size:13px; color:var(--tmuted); margin:0; }
.td-theme .td-budget .budget-input{ background:transparent; border:0; outline:0; width:96px; color:var(--tgold-bright);
  font-family:'Roboto Mono',monospace; font-weight:500; font-size:13.5px; padding:0; }
.td-theme .td-budget .budget-input::placeholder{ color:var(--tfaint); font-family:'Inter',sans-serif; font-weight:400; }
.td-theme .td-budget .budget-tag{ display:inline-flex; align-items:center; gap:6px; padding:3px 8px; border-radius:8px;
  background:rgba(127,180,230,.14); border:1px solid rgba(127,180,230,.4); color:var(--ice-bright); font-size:12px; }
.td-theme .td-budget .budget-tag.is-hidden{ display:none; }
.td-theme .td-budget .budget-tag-clear{ background:none; border:0; color:var(--ice-bright); cursor:pointer; font-size:14px; line-height:1; }
/* search = "slim hero": same 44px height as the other fields, but wider and with an
   accent ice glow so it stands out as the rail's shared control (ticker + table). */
.td-theme .td-search{ width:540px; max-width:100%; border-color:rgba(127,180,230,.5);
  box-shadow:0 0 0 1px rgba(127,180,230,.1), 0 0 26px -8px rgba(127,180,230,.4), inset 0 1px 0 rgba(220,235,250,.1); }
/* In the controls row the search flexes between analysis and budget instead of being a
   fixed hero — it grows to fill the middle but stays within a sane hero width. */
.td-theme .td-controls .td-search{ flex:1 1 460px; width:auto; min-width:280px; max-width:640px; }
/* Below ~980px the wide analysis toggle + budget + search no longer fit on one row
   without squeezing the search to nothing — stack them (search full-width) before the
   smaller phone breakpoint kicks in. Keeps desktop as a single non-wrapping line. */
@media (max-width:980px){
  .td-theme .td-controls{ flex-direction:column; align-items:stretch; gap:10px; width:100%; }
  .td-theme .td-controls .calc-mode-panel.td-analysis{ width:100%; justify-content:space-between; }
  .td-theme .td-controls .td-budget,
  .td-theme .td-controls .td-search{ flex:none; width:100%; min-width:0; max-width:none; }
}
.td-theme .td-search:focus-within{ border-color:rgba(127,180,230,.7);
  box-shadow:0 0 0 1px rgba(127,180,230,.16), 0 0 30px -6px rgba(127,180,230,.5), inset 0 1px 0 rgba(220,235,250,.12); }
.td-theme .td-search .td-field-ico{ color:var(--ice-bright); }
.td-theme .td-search input{ background:transparent; border:0; outline:0; width:100%; color:var(--ttext); font-size:13.5px; font-family:inherit; }
.td-theme .td-search input::placeholder{ color:var(--tfaint); }
/* Clear-search "×" — appears only when the field has text. */
.td-theme .td-search-clear{ -webkit-appearance:none; appearance:none; cursor:pointer; flex:0 0 auto;
  width:20px; height:20px; border-radius:50%; border:0; padding:0; line-height:1; font-size:16px;
  background:rgba(160,185,210,.12); color:var(--titanium);
  display:inline-flex; align-items:center; justify-content:center;
  transition:color .15s var(--ease), background .15s var(--ease); }
.td-theme .td-search-clear:hover{ color:var(--ice-bright); background:rgba(127,180,230,.2); }
.td-theme .td-search-clear[hidden]{ display:none; }

/* ===== TOASTS — concept-03 «system window» game alert (design/system-window) =====
 * Upgrade of the old flat .td-toast: same bottom-right slot, but wrapped in the
 * Titanium-Deck system-window shell (corner brackets, ice→gold rim, SYSTEM kicker,
 * auto-dismiss timer bar). Variants: success (green) · info (ice) · error (red). */
.td-toasts{ position:fixed; right:20px; bottom:20px; z-index:1000; display:flex; flex-direction:column; gap:12px;
  align-items:flex-end; pointer-events:none; max-width:min(94vw,340px); }

.sys-toast{ pointer-events:auto; width:320px; max-width:100%; position:relative; border-radius:14px; padding:2px;
  background:linear-gradient(180deg, rgba(127,180,230,.55), rgba(127,180,230,.12) 40%, rgba(232,200,122,.18) 100%);
  box-shadow:0 0 0 1px rgba(7,13,22,.9) inset, 0 24px 60px -16px rgba(0,0,0,.8), 0 0 36px -8px rgba(127,180,230,.28);
  isolation:isolate; animation:sysToastIn .42s var(--ease) both; }
.sys-toast.is-leaving{ animation:sysToastOut .22s var(--ease) both; }
@keyframes sysToastIn{ from{ opacity:0; transform:translateY(10px) scale(.985); filter:blur(2px);} to{ opacity:1; transform:none; filter:none;} }
@keyframes sysToastOut{ to{ opacity:0; transform:translateY(8px) scale(.98); } }

.sys-toast .sys-inner{ position:relative; border-radius:12px; overflow:hidden;
  background:var(--glass-face), linear-gradient(180deg, rgba(13,24,40,.92), rgba(8,14,24,.96));
  backdrop-filter:blur(14px) saturate(1.2); }
.sys-toast .sys-inner::after{ content:""; position:absolute; left:0; right:0; top:0; height:1px; z-index:2;
  background:linear-gradient(90deg, transparent, rgba(191,224,255,.7) 38%, rgba(232,200,122,.4) 62%, transparent); }
.sys-toast .sys-body{ position:relative; z-index:1; }
.sys-toast .sys-corner{ position:absolute; width:16px; height:16px; z-index:3; pointer-events:none;
  border-color:var(--ice-bright); opacity:.85; filter:drop-shadow(0 0 4px rgba(127,180,230,.5)); }
.sys-toast .sys-corner.tl{ top:6px; left:6px; border-top:2px solid; border-left:2px solid; border-top-left-radius:5px; }
.sys-toast .sys-corner.tr{ top:6px; right:6px; border-top:2px solid; border-right:2px solid; border-top-right-radius:5px; }
.sys-toast .sys-corner.bl{ bottom:6px; left:6px; border-bottom:2px solid; border-left:2px solid; border-bottom-left-radius:5px; }
.sys-toast .sys-corner.br{ bottom:6px; right:6px; border-bottom:2px solid; border-right:2px solid; border-bottom-right-radius:5px; }

.toast-row{ display:flex; gap:12px; padding:14px 15px; align-items:flex-start; }
.toast-ico{ width:36px; height:36px; flex:none; border-radius:10px; display:grid; place-items:center;
  background:radial-gradient(120% 120% at 30% 20%, rgba(127,227,176,.25), rgba(10,18,28,.6));
  border:1px solid rgba(127,227,176,.45); color:var(--tgreen); box-shadow:0 0 14px rgba(127,227,176,.3); }
.toast-ico svg{ width:19px; height:19px; }
.toast-txt{ min-width:0; flex:1 1 auto; }
.toast-kicker{ font-family:'Chakra Petch','Inter',sans-serif; font-size:9px; letter-spacing:2.5px; text-transform:uppercase; color:var(--tgreen); }
.toast-title{ font-size:14px; font-weight:600; color:var(--ttext); margin:3px 0 2px; }
.toast-sub{ font-size:11.5px; color:var(--tmuted); line-height:1.45; }
.toast-sub b{ color:var(--tgold-bright); font-family:'Roboto Mono',monospace; }
.toast-en{ font-size:9.5px; color:var(--tfaint); letter-spacing:.5px; margin-top:5px; }
.toast-bar{ height:2px; margin:0 4px 4px; border-radius:2px; overflow:hidden; background:rgba(160,185,210,.12); }
.toast-bar i{ display:block; height:100%; width:100%; transform-origin:left center;
  background:linear-gradient(90deg, var(--tgreen), rgba(127,227,176,.3)); }

.sys-toast.is-info .toast-ico{ background:radial-gradient(120% 120% at 30% 20%, rgba(127,180,230,.25), rgba(10,18,28,.6));
  border-color:rgba(127,180,230,.45); color:var(--ice-bright); box-shadow:0 0 14px rgba(127,180,230,.3); }
.sys-toast.is-info .toast-kicker{ color:var(--ice-bright); }
.sys-toast.is-info .toast-bar i{ background:linear-gradient(90deg, var(--ice), rgba(127,180,230,.3)); }
.sys-toast.is-error .toast-ico{ background:radial-gradient(120% 120% at 30% 20%, rgba(255,155,155,.25), rgba(10,18,28,.6));
  border-color:rgba(255,155,155,.5); color:var(--tred); box-shadow:0 0 14px rgba(255,155,155,.28); }
.sys-toast.is-error .toast-kicker{ color:var(--tred); }
.sys-toast.is-error .toast-bar i{ background:linear-gradient(90deg, var(--tred), rgba(255,155,155,.3)); }

.td-toast-action{ -webkit-appearance:none; appearance:none; cursor:pointer; margin:2px 15px 12px; align-self:flex-start;
  padding:6px 13px; border-radius:8px; border:1px solid rgba(127,180,230,.4); background:rgba(127,180,230,.12);
  color:var(--ice-bright); font:600 11.5px/1 'Inter',sans-serif; letter-spacing:.3px;
  transition:background .15s var(--ease), border-color .15s var(--ease); }
.td-toast-action:hover{ background:rgba(127,180,230,.22); border-color:var(--ice); }

@media (prefers-reduced-motion: reduce){
  .sys-toast, .sys-toast.is-leaving{ animation-duration:.001s; }
  .toast-bar i{ transition:none !important; }
}
@media (max-width:760px){ .td-toasts{ right:12px; left:12px; bottom:12px; align-items:stretch; max-width:none; }
  .sys-toast{ width:100%; } }

/* ===== FREEMIUM PAYWALL — locked Pro block + «Разбор дня» badge ===== */
.paywall-lock{ position:relative; min-height:104px; border-radius:10px; overflow:hidden; }
.paywall-blur{ filter:blur(6px); opacity:.4; pointer-events:none; user-select:none; padding:6px 2px; }
.pw-skel-row{ height:12px; margin:9px 6px; border-radius:6px;
  background:linear-gradient(90deg, rgba(160,185,210,.2), rgba(160,185,210,.05)); }
.paywall-overlay{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; text-align:center; padding:14px; background:radial-gradient(120% 100% at 50% 40%, rgba(7,13,22,.5), rgba(7,13,22,.82)); }
.paywall-ico{ width:26px; height:26px; color:var(--tgold-bright); filter:drop-shadow(0 0 8px rgba(232,200,122,.4)); }
.paywall-title{ font-family:'Chakra Petch','Inter',sans-serif; font-size:13px; font-weight:600; letter-spacing:.4px; color:var(--ttext); }
.paywall-sub{ font-size:11px; color:var(--tmuted); line-height:1.45; max-width:300px; }
.paywall-cta{ -webkit-appearance:none; appearance:none; cursor:pointer; margin-top:3px;
  padding:8px 18px; border-radius:10px; border:1px solid rgba(232,200,122,.5);
  background:linear-gradient(180deg, rgba(232,200,122,.22), rgba(232,200,122,.08));
  color:var(--tgold-bright); font:600 12px/1 'Inter',sans-serif; letter-spacing:.3px;
  transition:background .15s var(--ease), border-color .15s var(--ease), transform .1s var(--ease); }
.paywall-cta:hover{ background:linear-gradient(180deg, rgba(232,200,122,.34), rgba(232,200,122,.14)); border-color:var(--tgold-bright); }
.paywall-cta:active{ transform:translateY(1px); }
.paywall-cta-alt{ -webkit-appearance:none; appearance:none; cursor:pointer; margin-top:1px; padding:3px 6px;
  background:none; border:0; color:var(--ice); font:500 10.5px/1.3 'Inter',sans-serif; letter-spacing:.3px;
  text-decoration:underline; text-underline-offset:2px; text-decoration-color:rgba(127,180,230,.4);
  transition:color .15s var(--ease); }
.paywall-cta-alt:hover{ color:var(--ice-bright); text-decoration-color:var(--ice-bright); }

.daily-free-badge{ display:inline-flex; align-items:center; gap:6px; margin:0 0 12px; padding:6px 12px; border-radius:999px;
  background:rgba(127,227,176,.12); border:1px solid rgba(127,227,176,.4); color:var(--tgreen);
  font-family:'Chakra Petch','Inter',sans-serif; font-size:10px; letter-spacing:1.5px; text-transform:uppercase; }
.daily-free-badge svg{ width:13px; height:13px; }

/* ===== META ROW ===== */
.td-meta{ width:100%; max-width:1340px; display:flex; align-items:center; justify-content:space-between; margin:26px 0 10px; }
.td-meta-left{ display:inline-flex; align-items:center; gap:16px; flex-wrap:wrap; }
.td-section-title{ font-family:'Chakra Petch',sans-serif; font-size:12px; letter-spacing:3px; color:var(--titanium); text-transform:uppercase; }
.td-result-count{ font:500 11.5px/1 'Inter',sans-serif; letter-spacing:.3px; color:var(--tfaint); }
/* Profitable-only toggle — a compact custom switch. */
.td-profit-toggle{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; user-select:none;
  font:500 11.5px/1 'Inter',sans-serif; letter-spacing:.3px; color:var(--tmuted); }
.td-profit-toggle input{ position:absolute; opacity:0; width:0; height:0; }
.td-profit-toggle-box{ position:relative; width:30px; height:17px; border-radius:999px; flex:0 0 auto;
  background:rgba(160,185,210,.14); border:1px solid rgba(150,175,200,.2); transition:background .16s var(--ease), border-color .16s var(--ease); }
.td-profit-toggle-box::after{ content:''; position:absolute; top:1px; left:1px; width:13px; height:13px; border-radius:50%;
  background:var(--titanium); transition:transform .16s var(--ease), background .16s var(--ease); }
.td-profit-toggle input:checked + .td-profit-toggle-box{ background:rgba(127,227,176,.28); border-color:rgba(127,227,176,.5); }
.td-profit-toggle input:checked + .td-profit-toggle-box::after{ transform:translateX(13px); background:var(--tgreen); }
.td-profit-toggle input:focus-visible + .td-profit-toggle-box{ box-shadow:0 0 0 3px rgba(127,180,230,.3); }
.td-profit-toggle:hover{ color:var(--ttext); }
/* Чип «Обновлено» живёт в верхней панели рядом со счётчиком онлайна — высота
   рамки совпадает с .online-indicator / .locale-select (32px). */
.td-updated{ display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 12px; border-radius:10px; font-size:11.5px; color:var(--tmuted);
  white-space:nowrap; background:var(--titanium-face); border:1px solid rgba(150,175,200,.16); box-shadow:inset 0 1px 0 rgba(220,235,250,.07); }
.td-updated b{ color:var(--ice-bright); font-weight:600; font-family:'Roboto Mono',monospace; }
.td-updated-ico{ width:14px; height:14px; color:var(--titanium); flex:0 0 auto; }
.td-pulse{ width:7px; height:7px; border-radius:50%; background:var(--tgreen); box-shadow:0 0 0 0 rgba(127,227,176,.6); animation:tdpulse 2s infinite; }
@keyframes tdpulse{ 0%{box-shadow:0 0 0 0 rgba(127,227,176,.5)} 70%{box-shadow:0 0 0 7px rgba(127,227,176,0)} 100%{box-shadow:0 0 0 0 rgba(127,227,176,0)} }

/* ===== GLASS / TITANIUM TABLE ===== */
.td-theme .td-table-card{ width:100%; max-width:1340px; margin:0; border-radius:16px; overflow:hidden; position:relative;
  background:var(--glass-face), rgba(11,20,34,.62); border:1px solid rgba(160,185,210,.2);
  box-shadow:0 26px 56px -10px rgba(0,0,0,.75), inset 0 1px 0 rgba(225,240,252,.14);
  backdrop-filter:blur(18px) saturate(1.25); }
.td-theme .td-table-card::before{ content:""; position:absolute; left:0; right:0; top:0; height:1px; z-index:3;
  background:linear-gradient(90deg, transparent, rgba(225,240,252,.5) 40%, rgba(232,200,122,.35) 60%, transparent); }
.td-theme .td-table-card .table-tab-panel{ padding:0; background:none; border:0; }
.td-theme .td-table-card .load-region{ background:none; border:0; padding:0; }
.td-theme .table-scroll{ overflow-x:auto; }
.td-theme .dash-table{ width:100%; border-collapse:collapse; table-layout:fixed; min-width:720px; background:none; }
.td-theme .dash-table col.col-recipe{ width:320px; } .td-theme .dash-table col.col-profit{ width:270px; }
.td-theme .dash-table col.col-num{ width:230px; } .td-theme .dash-table col.col-rating{ width:250px; }

/* ── Favourite star (pin recipe to top) ────────────────────────────────── */
.td-theme .fav-btn{ -webkit-appearance:none; appearance:none; cursor:pointer; flex:0 0 auto; order:-1;
  width:22px; height:22px; padding:0; border:0; background:none; border-radius:6px;
  color:var(--titanium-dim); font-size:14px; line-height:1; opacity:.45;
  display:inline-flex; align-items:center; justify-content:center;
  transition:color .15s var(--ease), opacity .15s var(--ease), transform .15s var(--ease); }
.td-theme .fav-btn:hover{ opacity:1; color:var(--tgold); transform:scale(1.12); }
.td-theme .fav-btn.is-fav{ opacity:1; color:var(--tgold-bright); text-shadow:0 0 10px rgba(232,200,122,.5); }

/* ── «🔥 Лучшее» badge on the top-GPH row ──────────────────────────────── */
.td-theme .best-badge{ display:inline-flex; align-items:center; gap:4px; margin-left:8px; flex:0 0 auto;
  padding:2px 8px 2px 6px; border-radius:999px; vertical-align:middle;
  background:linear-gradient(180deg, rgba(232,200,122,.22), rgba(232,200,122,.08));
  border:1px solid rgba(232,200,122,.45); color:var(--tgold-bright);
  font:700 9px/1 'Inter',sans-serif; letter-spacing:.6px; text-transform:uppercase; white-space:nowrap;
  box-shadow:0 0 14px rgba(232,200,122,.18); }
.td-theme .best-badge-ico{ font-size:10px; line-height:1; filter:saturate(1.1); }

/* ── Heat wash on GPH / profit cells: brighter = closer to the set's best ── */
.td-theme .dash-table tbody td.col-gph.has-heat{
  background-image:linear-gradient(90deg, transparent 26%, rgba(232,200,122, calc(var(--heat, 0) * .17))); }
.td-theme .dash-table tbody td.col-profit.has-heat.is-pos{
  background-image:linear-gradient(90deg, transparent 26%, rgba(127,227,176, calc(var(--heat, 0) * .15))); }

.td-theme .dash-table thead th{ font-family:'Inter'; font-weight:600; font-size:9.5px; letter-spacing:.7px; color:var(--titanium);
  text-transform:uppercase; padding:13px 10px; text-align:left; vertical-align:middle; white-space:normal; line-height:1.25;
  background:linear-gradient(180deg, rgba(20,34,52,.6), rgba(10,18,30,.4)); border:0;
  background-image:linear-gradient(90deg, transparent, rgba(160,185,210,.4), transparent); background-position:bottom; background-size:100% 1px; background-repeat:no-repeat; }
/* Числовые заголовки — по центру, чтобы совпадать с данными своих колонок
   (профит/GPH/рейтинг центрируются в теле таблицы). */
.td-theme .dash-table thead th.th-num{ text-align:center; }
.td-theme .dash-table tbody td.td-num.td-profit-col{ text-align:center; }
.td-theme .dash-table thead th:first-child{ padding-left:22px; } .td-theme .dash-table thead th:last-child{ padding-right:22px; }
.td-theme .dash-table thead th.sortable{ cursor:pointer; } .td-theme .dash-table thead th.sortable:hover{ color:var(--ice-bright); }
/* Active-sort indicator: highlight + a direction arrow (▴ asc / ▾ desc). */
.td-theme .dash-table thead th.sortable.is-sorted{ color:var(--ice-bright); }
.td-theme .dash-table thead th.sortable.is-sorted .th-h::after{ content:'▾'; font-size:8px; line-height:1; margin-left:2px; color:var(--ice); }
.td-theme .dash-table thead th.sortable[aria-sort="ascending"] .th-h::after{ content:'▴'; }

/* ── Header label + metric tooltip ─────────────────────────────────────── */
.td-theme .dash-table thead th .th-h{ display:inline-flex; align-items:center; gap:5px; }
.td-theme .dash-table thead th.th-num .th-h{ justify-content:center; }
.td-theme .th-info{
  -webkit-appearance:none; appearance:none; cursor:help; position:relative;
  width:13px; height:13px; padding:0; border-radius:50%; flex:0 0 auto;
  border:1px solid rgba(160,185,210,.4); background:rgba(160,185,210,.08);
  color:var(--titanium); font:600 9px/1 'Inter',sans-serif; text-transform:none;
  letter-spacing:0; display:inline-flex; align-items:center; justify-content:center;
  transition:color .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease); }
.td-theme .th-info:hover, .td-theme .th-info:focus-visible, .td-theme .th-info.is-open{
  color:var(--ice-bright); border-color:var(--ice); background:rgba(127,180,230,.16); outline:none; }
/* The bubble itself is a body-level position:fixed .metric-tip (see below + auction-app.js
   showMetricTip_): a CSS pseudo bubble can't escape the «Производство» frame's
   .pp-inner{overflow:hidden} / .table-scroll{overflow:auto} clips. */

/* ── Inflated-OUT warning marker (profit columns) ──────────────────────────
   The produced item's ask price is wildly above its baseline (thin / bought-out
   book), so the shown profit is unrealisable. A red ⚠ next to the profit value,
   carrying a styled warning tooltip (mirrors the .th-info bubble, red-tinted). */
/* Value + warning icon share one centred flex line so the triangle aligns to the
   number/coin baseline (the number is itself an inline-flex, so a bare sibling
   icon would otherwise sit low). */
.td-theme .dash-table tbody td.td-profit-col .td-profit-inner{
  display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; }
.td-theme .profit-warn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  margin-right:5px; cursor:help; outline:none; }
.td-theme .profit-warn svg{ width:14px; height:14px; display:block;
  filter:drop-shadow(0 0 5px rgba(255,93,93,.45)); transition:filter .15s var(--ease); }
.td-theme .profit-warn:hover svg, .td-theme .profit-warn:focus-visible svg{
  filter:drop-shadow(0 0 8px rgba(255,93,93,.7)); }
.td-theme .profit-warn svg path:first-child{ fill:#ff4d4d; }
.td-theme .profit-warn svg path:nth-child(2){ stroke:#1a0c0c; stroke-width:2.2; }
.td-theme .profit-warn svg circle{ fill:#1a0c0c; }
/* The warning bubble is the same body-level .metric-tip (red .is-warn theme). */

/* ── Body-level metric tooltip (column «i» + inflated-OUT ⚠) ────────────────
   position:fixed on <body> (JS-positioned, always ABOVE the marker), so it is
   never clipped by the panel frame's overflow and can leave the form entirely.
   z-index above everything; mirrors the .spark-tip / .bs-name-tip bubble. */
.metric-tip{ position:fixed; z-index:9000; left:0; top:0; max-width:240px; padding:9px 11px;
  background:linear-gradient(180deg,#101d2c,#0a131f); border:1px solid rgba(160,185,210,.28); border-radius:9px;
  box-shadow:0 12px 32px rgba(0,0,0,.6); color:#eef3f8; font:400 11px/1.45 'Inter',sans-serif;
  text-align:left; white-space:normal; pointer-events:none; opacity:0; transform:translateY(4px);
  transition:opacity .14s cubic-bezier(.22,.61,.36,1), transform .14s cubic-bezier(.22,.61,.36,1); }
.metric-tip.is-warn{ background:linear-gradient(180deg,#2a1414,#1a0c0c); border-color:rgba(255,120,120,.34); }
.metric-tip.is-on{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){ .metric-tip{ transition:opacity .14s; transform:none; } }

/* ── Legend button + popover ───────────────────────────────────────────── */
.td-legend-btn{
  -webkit-appearance:none; appearance:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px 5px 8px; border-radius:999px; border:1px solid rgba(160,185,210,.24);
  background:rgba(160,185,210,.06); color:var(--titanium);
  font:600 10px/1 'Inter',sans-serif; letter-spacing:.6px; text-transform:uppercase;
  transition:color .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease); }
.td-legend-btn:hover{ color:var(--ice-bright); border-color:var(--ice); background:rgba(127,180,230,.12); }
.td-legend-ico{ width:15px; height:15px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid currentColor; font-size:9px; font-weight:700; }
.td-legend{
  width:100%; max-width:1340px; margin:0 0 14px; padding:16px 18px;
  background:linear-gradient(160deg,rgba(230,242,252,.05),rgba(0,0,0,.16));
  border:1px solid rgba(150,175,200,.18); border-radius:14px;
  box-shadow:0 14px 40px rgba(0,0,0,.4); animation:tdLegendIn .18s var(--ease); }
@keyframes tdLegendIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce){ .td-legend{ animation:none; } }
.td-legend-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.td-legend-title{ font-family:'Chakra Petch',sans-serif; font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--ice-bright); }
.td-legend-close{ -webkit-appearance:none; appearance:none; cursor:pointer; background:none; border:0;
  color:var(--titanium); font-size:20px; line-height:1; padding:0 2px; transition:color .15s var(--ease); }
.td-legend-close:hover{ color:var(--ice-bright); }
.td-legend-grid{ display:grid; grid-template-columns:1.35fr 1fr; gap:18px 28px; }
.td-legend-h{ font:600 10px/1 'Inter',sans-serif; letter-spacing:.8px; text-transform:uppercase; color:var(--titanium); margin:10px 0 6px; }
.td-legend-h:first-child{ margin-top:0; }
.td-legend-row{ font:400 12px/1.5 'Inter',sans-serif; color:var(--tmuted); margin-bottom:5px; }
.td-legend-row b{ color:var(--ttext); font-weight:600; }
@media (max-width:760px){ .td-legend-grid{ grid-template-columns:1fr; gap:8px; } }

/* ===== PRODUCTION PANEL — System Window frame (ice sibling of the Signals panel) =====
   Same primitive as .buy-signals / .bs-*: gradient border, glass inner, corner brackets,
   floating tag. Wraps the former meta row (now .pp-head) + the table, which keeps its own
   column/row styles untouched. concept: design/system-window/concept-production.html. */
.td-theme .prod-panel{ position:relative; display:block; width:100%; max-width:1340px; margin:24px 0 0; border-radius:14px; padding:2px;
  background:linear-gradient(180deg, rgba(127,180,230,.5), rgba(127,180,230,.1) 40%, rgba(232,200,122,.16) 100%);
  box-shadow:0 0 0 1px rgba(7,13,22,.9) inset, 0 26px 60px -20px rgba(0,0,0,.8), 0 0 36px -8px rgba(127,180,230,.24);
  isolation:isolate; }
/* overflow:hidden clips the table/pager to the rounded frame (same trade-off prod's old
   .td-table-card already lived with — column tooltips are lifted to z-index:9000 instead). */
.td-theme .prod-panel .pp-inner{ position:relative; border-radius:12px; overflow:hidden;
  background:var(--glass-face), linear-gradient(180deg, rgba(13,24,40,.86), rgba(8,14,24,.92));
  backdrop-filter:blur(16px) saturate(1.2); }
.td-theme .prod-panel .pp-inner::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.45;
  background:repeating-linear-gradient(0deg, rgba(160,185,210,.045) 0 1px, transparent 1px 4px),
    linear-gradient(118deg, transparent 30%, rgba(230,242,252,.05) 47%, transparent 64%); }
.td-theme .prod-panel .pp-inner::after{ content:""; position:absolute; left:0; right:0; top:0; height:1px; z-index:2;
  background:linear-gradient(90deg, transparent, rgba(191,224,255,.7) 38%, rgba(232,200,122,.4) 62%, transparent); }
.td-theme .prod-panel .pp-body{ position:relative; z-index:1; }
.td-theme .prod-panel .pp-corner{ position:absolute; width:16px; height:16px; z-index:4; pointer-events:none;
  border-color:var(--ice-bright); opacity:.85; filter:drop-shadow(0 0 4px rgba(127,180,230,.5)); }
.td-theme .prod-panel .pp-corner.tl{ top:7px; left:7px; border-top:2px solid; border-left:2px solid; border-top-left-radius:5px; }
.td-theme .prod-panel .pp-corner.tr{ top:7px; right:7px; border-top:2px solid; border-right:2px solid; border-top-right-radius:5px; }
.td-theme .prod-panel .pp-corner.bl{ bottom:7px; left:7px; border-bottom:2px solid; border-left:2px solid; border-bottom-left-radius:5px; }
.td-theme .prod-panel .pp-corner.br{ bottom:7px; right:7px; border-bottom:2px solid; border-right:2px solid; border-bottom-right-radius:5px; }
.td-theme .prod-panel .pp-tag{ position:absolute; top:-10px; left:24px; z-index:5; display:inline-flex; align-items:center; gap:7px;
  padding:4px 14px; border-radius:999px; background:linear-gradient(180deg,#101d2c,#0a131f);
  border:1px solid rgba(127,180,230,.45); box-shadow:0 6px 18px rgba(0,0,0,.5), 0 0 16px rgba(127,180,230,.25);
  font-family:'Chakra Petch',sans-serif; font-size:9.5px; letter-spacing:3px; text-transform:uppercase; color:var(--ice-bright); }
.td-theme .prod-panel .pp-tag-dot{ width:6px; height:6px; border-radius:50%; background:var(--ice-bright); box-shadow:0 0 8px var(--ice-bright);
  animation:bsPulse 1.8s infinite; }

/* head: former meta row, now framed. icon + title(+EN kicker), count chip, controls right. */
.td-theme .prod-panel .pp-head{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:17px 22px 15px;
  border-bottom:1px solid rgba(160,185,210,.1); }
.td-theme .prod-panel .pp-ico{ font-size:16px; line-height:1; filter:drop-shadow(0 0 8px rgba(127,180,230,.5)); }
.td-theme .prod-panel .pp-title{ font-family:'Inter',sans-serif; font-weight:700; font-size:16px; letter-spacing:.6px; color:var(--ttext); text-transform:none; }
.td-theme .prod-panel .pp-title .pp-en{ display:block; font-size:9px; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--ice); opacity:.7; margin-top:3px; font-weight:600; }
.td-theme .prod-panel .pp-count{ font-family:'Roboto Mono',ui-monospace,monospace; font-size:11px; color:var(--tfaint);
  border:1px solid rgba(160,185,210,.18); border-radius:8px; padding:4px 9px; }
.td-theme .prod-panel .pp-count:empty{ display:none; }
.td-theme .prod-panel .pp-controls{ margin-left:auto; display:inline-flex; align-items:center; gap:16px; flex-wrap:wrap; }
@media (max-width:760px){ .td-theme .prod-panel .pp-controls{ width:100%; margin-left:0; justify-content:space-between; } }
/* legend popover: inset within the frame padding instead of the old full-width card */
.td-theme .prod-panel .td-legend{ max-width:none; margin:14px 18px 0; }

.td-theme .dash-table tbody td{ padding:8px 10px; font-size:12.5px; vertical-align:top; border:0; color:var(--ttext);
  border-top:1px solid rgba(160,185,210,.07); }
.td-theme .dash-table tbody td:first-child{ padding-left:22px; } .td-theme .dash-table tbody td:last-child{ padding-right:22px; }
.td-theme .dash-table tbody tr.data-row{ transition:.16s var(--ease); }
.td-theme .dash-table tbody tr.data-row:nth-child(even){ background:rgba(160,185,210,.022); }
.td-theme .dash-table tbody tr.data-row:hover{ background:linear-gradient(90deg, rgba(127,180,230,.1), rgba(127,180,230,.02));
  box-shadow:inset 0 0 0 1px rgba(127,180,230,.32); cursor:pointer; }
.td-theme .dash-table tbody tr.data-row.is-expanded{ background:rgba(127,180,230,.08); }

/* recipe cell */
.td-theme .item-name{ display:flex; align-items:center; gap:9px; min-width:0; }
.td-theme .item-link{ display:flex; align-items:center; gap:9px; min-width:0; text-decoration:none; font-weight:600; }
.td-theme .item-icon-wrap{ width:24px; height:24px; border-radius:6px; overflow:hidden; flex:none; border:1px solid rgba(160,185,210,.22); background:#0a121c; }
.td-theme .item-icon{ width:100%; height:100%; object-fit:cover; display:block; }
.td-theme .item-link > span:last-child{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* quality colours */
.td-theme .q-poor{ color:#8a949e; } .td-theme .q-common{ color:#eef3f8; } .td-theme .q-uncommon{ color:#5fd06a; }
.td-theme .q-rare{ color:#4ea0ff; } .td-theme .q-epic{ color:#b56bff; } .td-theme .q-legendary{ color:#ff9f4a; } .td-theme .q-artifact{ color:#e8c87a; }
.td-theme .b-uncommon{ box-shadow:inset 0 0 0 1px rgba(95,208,106,.5); } .td-theme .b-rare{ box-shadow:inset 0 0 0 1px rgba(78,160,255,.5); }
.td-theme .b-epic{ box-shadow:inset 0 0 0 1px rgba(181,107,255,.5); } .td-theme .b-legendary{ box-shadow:inset 0 0 0 1px rgba(255,159,74,.5); }

/* reagent / produced lists (stacked) */
.td-theme .reagent-line{ display:flex; align-items:center; gap:6px; min-width:0; line-height:1.5; padding:1px 0; }
.td-theme .reagent-icon-wrap{ width:18px; height:18px; border-radius:4px; overflow:hidden; flex:none; border:1px solid rgba(220,235,250,.16); background:#0a121c; }
.td-theme .reagent-icon{ width:100%; height:100%; object-fit:cover; display:block; }
.td-theme .reagent-name{ font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.td-theme .reagent-line-price{ justify-content:flex-end; text-align:right; font-family:'Roboto Mono',monospace; font-size:12px; line-height:1.5; color:var(--ttext); }
.td-theme .reagent-line-price .price-num{ display:inline-flex; align-items:center; gap:3px; }
.td-theme .reagent-line-cost-only{ display:flex; align-items:center; justify-content:flex-end; gap:5px; font-family:'Roboto Mono',monospace; font-size:12px; line-height:1.5; }
.td-theme .reagent-line-cost-only > span:first-child{ color:var(--tmuted); } .td-theme .reagent-line-cost-only .cost-sep{ color:var(--steel); }
.td-theme .reagent-line-cost-only > span:nth-child(3){ color:var(--tgold); }
/* Колонки данных (макет): «Себестоимость» — приглушённая, «Цена» (аукцион) — золото. */
.td-theme td.col-price .reagent-line-cost-only > span:first-child{ color:var(--tgold); }
.td-theme .muted{ color:var(--tmuted); } .td-theme .source-chain{ color:var(--ice); }
.td-theme .wow-coin-wrap{ display:inline-flex; align-items:center; }
.td-theme .wow-coin{ width:13px; height:13px; margin-left:2px; vertical-align:-2px; opacity:.95; }

/* numeric columns */
.td-theme .dash-table tbody td.td-num{ text-align:right; font-family:'Roboto Mono',monospace; font-weight:500; white-space:nowrap; }
.td-theme .td-gold-with-coin{ display:inline-flex; align-items:center; justify-content:flex-end; gap:2px; }
/* GPH (макет): золото. Только в своей колонке — formatGphTdHtml вешает класс
   td-gph-with-coin и на профит, поэтому золото скоупим по td.col-gph. */
.td-theme td.col-gph .td-gold-with-coin{ color:var(--tgold); }
/* Профит (макет): зелёный при ≥0, красный при <0 — по знаку каждой ячейки. */
.td-theme td.col-profit.is-pos .td-gold-with-coin{ color:var(--tgreen); }
.td-theme td.col-profit.is-neg .td-gold-with-coin{ color:var(--tred); }

/* rating */
.td-theme .dash-rating{ display:flex; align-items:center; justify-content:center; gap:8px; }
.td-theme .dash-rating-track{ width:66px; height:7px; border-radius:4px; background:rgba(0,0,0,.5); border:1px solid rgba(160,185,210,.16); overflow:hidden; position:relative; flex:none; }
.td-theme .dash-rating-fill{ display:block; height:100%; border-radius:4px; background-image:linear-gradient(90deg, var(--tred), var(--tgold) 50%, var(--tgreen)); }
.td-theme .dash-rating-val{ font-family:'Roboto Mono',monospace; font-size:11px; color:var(--tmuted); }
.td-theme .rating-empty{ color:var(--tfaint); }

/* Head pager — lives in the .pp-controls cluster (top-right), mirrors the Signals
   «‹ N / M ›» pager exactly. The bottom pager bar is gone (no empty footer space). */
.td-theme .prod-panel .pp-pager{ display:inline-flex; align-items:center; gap:6px; }
.td-theme .prod-panel .pp-pager[hidden]{ display:none; }
.td-theme .prod-panel .pp-pager-btn{ width:26px; height:26px; display:grid; place-items:center; border-radius:8px; cursor:pointer;
  background:var(--titanium-face); border:1px solid rgba(150,175,200,.22); color:var(--ice-bright);
  font-size:16px; line-height:1; transition:.15s var(--ease, ease); }
.td-theme .prod-panel .pp-pager-btn:hover:not(:disabled){ border-color:rgba(127,180,230,.55); color:#fff; }
.td-theme .prod-panel .pp-pager-btn:disabled{ opacity:.35; cursor:default; }
.td-theme .prod-panel .pp-pager-ind{ font-family:'Roboto Mono',ui-monospace,monospace; font-size:11px; color:var(--tmuted); min-width:38px; text-align:center; }
/* a little breathing room at the bottom now the pager bar is gone (the last row no
   longer sits flush against the frame's rounded bottom edge) */
.td-theme .prod-panel #panelProduction{ padding-bottom:10px; }

/* loading shimmer over the table */
.td-theme .load-region.is-loading::after{ background:linear-gradient(90deg, transparent, rgba(160,185,210,.07), transparent); }
/* Base shimmer fill was warm grey-brown (old gold theme) — retheme to deep-navy
   glass with a cool ice-blue sweep so it matches the Titanium Deck. */
.td-theme .load-region.is-loading::before{
  background:linear-gradient(90deg,
    rgba(11,20,34,.82) 0%,
    rgba(11,20,34,.82) 38%,
    rgba(127,180,230,.14) 50%,
    rgba(11,20,34,.82) 62%,
    rgba(11,20,34,.82) 100%);
  background-size:200% 100%;
}
.td-theme .gm-skel-bar{
  background:linear-gradient(90deg, rgba(160,185,210,.10), rgba(127,180,230,.05) 50%, rgba(160,185,210,.10));
  background-size:200% 100%;
}
@media (prefers-reduced-motion: reduce){
  .td-theme .load-region.is-loading::before{ background:rgba(11,20,34,.86); }
}

/* ===== AUTH MODAL ===== */
.td-theme .auth-modal-overlay{ background:rgba(3,6,12,.72); backdrop-filter:blur(6px); }
.td-theme .auth-modal{ background:linear-gradient(180deg, rgba(16,28,46,.96), rgba(8,14,24,.98)); border:1px solid rgba(160,185,210,.22);
  box-shadow:0 30px 70px rgba(0,0,0,.7), inset 0 1px 0 rgba(225,240,252,.12); border-radius:18px; color:var(--ttext); }
.td-theme .auth-tab{ color:var(--tmuted); } .td-theme .auth-tab.is-active{ color:var(--ice-bright); }
.td-theme .auth-input{ background:rgba(7,13,22,.7); border:1px solid rgba(150,175,200,.22); color:var(--ttext); border-radius:11px; }
.td-theme .auth-input::placeholder{ color:var(--tfaint); }
.td-theme .auth-input:focus{ border-color:rgba(127,180,230,.55); outline:none; box-shadow:0 0 0 3px rgba(127,180,230,.14); }
.td-theme .auth-submit{ background:var(--chrome-face); color:var(--black); border:1px solid rgba(255,255,255,.5); font-weight:600;
  border-radius:11px; box-shadow:0 2px 8px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.8); }
.td-theme .auth-link{ color:var(--ice); } .td-theme .auth-message{ color:var(--tmuted); }
.td-theme .auth-provider-btn{ background:var(--titanium-face); border:1px solid rgba(150,175,200,.22); color:var(--ttext); border-radius:11px; }
.td-theme .auth-provider-btn:hover{ border-color:rgba(127,180,230,.5); }
.td-theme .auth-divider{ color:var(--tfaint); } .td-theme .auth-modal-close{ color:var(--tmuted); }
.td-theme .auth-modal-close:hover{ color:var(--ice-bright); }
/* Remaining warm-gold remnants the earlier overrides missed → chrome/ice. */
/* Tab strip + active tab: match the chrome «active segment» of the calc-mode
   toggle / category chips (was a brown-gold fill with gold text). */
.td-theme .auth-modal-tabs{ background:rgba(7,13,22,.6); border:1px solid rgba(150,175,200,.18); }
.td-theme .auth-tab.is-active{ background:var(--chrome-face); color:#11202e;
  box-shadow:0 2px 8px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.8); }
/* Keep the submit chrome on hover (base :hover repainted it gold). */
.td-theme .auth-submit:hover{ background:var(--chrome-face); filter:brightness(1.05);
  box-shadow:0 4px 14px rgba(127,180,230,.3), inset 0 1px 0 rgba(255,255,255,.9); }
.td-theme .auth-divider::before, .td-theme .auth-divider::after{ background:rgba(150,175,200,.2); }
/* «Показать», «Забыли пароль?», «Назад», consent links — gold → ice. */
.td-theme .auth-pw-toggle{ color:var(--ice); }
.td-theme .auth-link:hover, .td-theme .auth-pw-toggle:hover{ color:var(--ice-bright); }
.td-theme .auth-consent-note a{ color:var(--ice); }
.td-theme .auth-consent-note a:hover{ color:var(--ice-bright); }

/* ===== inline recipe spoiler (kept readable on the new theme) ===== */
/* JS class is `recipe-spoiler-row` (was mistargeted as `recipe-spoiler`). */
.td-theme .dash-table tbody tr.spoiler-row > td,
.td-theme .dash-table tbody tr.recipe-spoiler-row > td{ background:rgba(7,13,22,.5);
  border-top:1px solid rgba(127,180,230,.18); border-bottom:1px solid rgba(127,180,230,.12); }
/* Retheme leftover warm borders/values inside the spoiler to titanium. */
.td-theme .spoiler-block-header{ border-bottom-color:rgba(160,185,210,.2); }
/* Shopping block header carries the «Скопировать» button on the right. */
.td-theme .spoiler-block-header--withaction{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.td-theme .shop-copy-btn{ -webkit-appearance:none; appearance:none; cursor:pointer; display:inline-flex; align-items:center; gap:5px;
  padding:3px 9px; border-radius:7px; border:1px solid rgba(160,185,210,.26); background:rgba(160,185,210,.07);
  color:var(--titanium); font:600 9.5px/1 'Inter',sans-serif; letter-spacing:.4px; text-transform:uppercase;
  transition:color .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease); }
.td-theme .shop-copy-btn:hover{ color:var(--ice-bright); border-color:var(--ice); background:rgba(127,180,230,.14); }
.td-theme .shop-copy-ico{ width:12px; height:12px; flex:0 0 auto; }
.td-theme .shop-copy-btn.is-copied{ color:var(--tgreen); border-color:rgba(127,227,176,.5); background:rgba(127,227,176,.14); }
.td-theme .spoiler-subhead{ color:var(--tmuted); border-top-color:rgba(160,185,210,.16); }
.td-theme .spoiler-kv-row,
.td-theme .spoiler-block--stats .spoiler-kv-row:last-child{ border-bottom-color:rgba(160,185,210,.12); }
.td-theme .spoiler-kv-label{ color:var(--tmuted); }
.td-theme .spoiler-kv-value{ color:var(--ttext); }
.td-theme .spoiler-empty{ color:var(--tfaint); }
/* Chain tree (Цепочка производства) — fully warm in the base, bring to titanium. */
.td-theme .chain-box{ color:var(--ttext); scrollbar-color:rgba(58,72,86,.85) transparent; }
.td-theme .chain-box::-webkit-scrollbar-thumb{ background:rgba(58,72,86,.85); }
.td-theme .chain-box::-webkit-scrollbar-thumb:hover{ background:rgba(127,180,230,.5); }
.td-theme .chain-line{ background:rgba(7,13,22,.5); border-color:rgba(160,185,210,.16); }
.td-theme .chain-line::before{ background:linear-gradient(180deg, rgba(127,180,230,.7), rgba(63,111,158,.4)); }
.td-theme .chain-branch-char{ color:rgba(127,180,230,.7); }
.td-theme .chain-arrow{ color:rgba(127,180,230,.9); }
.td-theme .chain-text[data-chain-search]{ text-decoration-color:rgba(127,180,230,.4); }
.td-theme .chain-text[data-chain-search]:hover{ text-decoration-color:rgba(127,180,230,.8); }
.td-theme .chain-tag--auction{ background:rgba(232,200,122,.12); border-color:rgba(232,200,122,.32); color:var(--tgold); }
.td-theme .chain-tag--chain{ background:rgba(127,180,230,.14); border-color:rgba(127,180,230,.4); color:var(--ice-bright); }
.td-theme .shopping-row{ display:flex; align-items:center; gap:7px; line-height:1.6; }
.td-theme .shopping-icon-wrap{ width:18px; height:18px; border-radius:4px; overflow:hidden; border:1px solid rgba(220,235,250,.16); background:#0a121c; flex:none; }
.td-theme .shopping-icon{ width:100%; height:100%; object-fit:cover; } .td-theme .shopping-arrow{ color:var(--steel); }
/* 4-й блок «Данные рецепта»: колонка «Цена» (аукцион) — золото, как в основной таблице. */
.td-theme .spoiler-rcol--price .reagent-line-cost-only > span:first-child{ color:var(--tgold); }
/* Числа в 4-м блоке — по левому краю под своими заголовками (база перебивается td-theme'ом). */
.td-theme .spoiler-recipe-grid .reagent-line-cost-only,
.td-theme .spoiler-recipe-grid .reagent-line-price{ justify-content:flex-start; text-align:left; }
.td-theme .shopping-qty{ font-family:'Roboto Mono',monospace; color:var(--ice-bright); }

/* ── Empty state (no results) ──────────────────────────────────────────── */
.td-theme .table-empty-row > td{ padding:0 !important; }
.td-theme .empty-state{ display:flex; flex-direction:column; align-items:center; gap:9px; padding:48px 20px; text-align:center; }
.td-theme .empty-state-ico{ width:34px; height:34px; color:var(--titanium-dim); opacity:.8; }
.td-theme .empty-state-title{ font:600 15px/1.3 'Inter',sans-serif; color:var(--ttext); }
.td-theme .empty-state-sub{ font:400 12.5px/1.4 'Inter',sans-serif; color:var(--tmuted); }
.td-theme .empty-state-reset{ -webkit-appearance:none; appearance:none; cursor:pointer; margin-top:6px;
  padding:8px 16px; border-radius:10px; border:1px solid rgba(127,180,230,.4); background:rgba(127,180,230,.1);
  color:var(--ice-bright); font:600 12px/1 'Inter',sans-serif; letter-spacing:.3px;
  transition:background .15s var(--ease), border-color .15s var(--ease); }
.td-theme .empty-state-reset:hover{ background:rgba(127,180,230,.2); border-color:var(--ice); }

/* ── Price-trend sparkline (now last column of «Данные рецепта») ────────── */
/* The base grid defines 5 columns; add a 6th for the trend column. */
.td-theme .spoiler-recipe-grid{ grid-template-columns:1.5fr 0.9fr 1.5fr 1fr 1fr 1.1fr; }
@media (max-width:900px){ .td-theme .spoiler-recipe-grid{ grid-template-columns:1.4fr 1fr; } }
.td-theme .spark-box{ display:flex; align-items:center; gap:10px; min-height:34px; }
/* Column variant: stacked + LEFT-aligned so the graph lines up under its left-
   aligned «Динамика цены» subheader (base .spoiler-rcol-body already v-centers). */
.td-theme .spoiler-rcol--trend .spoiler-rcol-body{ align-items:flex-start; }
.td-theme .spark-box--col{ flex-direction:column; align-items:flex-start; justify-content:center; gap:5px; width:100%; }
.td-theme .spark{ display:block; width:100%; max-width:140px; height:30px; overflow:visible; }
.td-theme .spark-line{ stroke-width:1.6; vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round; }
.td-theme .spark.is-up .spark-line{ stroke:var(--tgreen); } .td-theme .spark.is-down .spark-line{ stroke:var(--tred); }
.td-theme .spark.is-up .spark-dot{ fill:var(--tgreen); } .td-theme .spark.is-down .spark-dot{ fill:var(--tred); }
.td-theme .spark-dot{ opacity:.55; } .td-theme .spark-dot--last{ opacity:1; }
.td-theme .spark-hit{ cursor:help; }
.td-theme .spark.is-up .spark-area{ fill:rgba(127,227,176,.14); } .td-theme .spark.is-down .spark-area{ fill:rgba(255,155,155,.12); }
.td-theme .spark-delta{ font-family:'Roboto Mono',monospace; font-size:12px; font-weight:600; }
.td-theme .spark-delta.is-up{ color:var(--tgreen); } .td-theme .spark-delta.is-down{ color:var(--tred); }
.td-theme .spark-empty, .td-theme .spark-loading{ color:var(--tfaint); font-size:11.5px; }
/* Per-point tooltip — same bubble as the column .th-info tips (SVG can't use ::after,
   so it's a shared fixed element positioned in JS). */
.spark-tip{ position:fixed; z-index:9000; left:0; top:0; max-width:240px; padding:9px 11px;
  background:linear-gradient(180deg,#101d2c,#0a131f); border:1px solid rgba(160,185,210,.28); border-radius:9px;
  box-shadow:0 10px 30px rgba(0,0,0,.5); color:#eef3f8; font:400 11px/1.45 'Inter',sans-serif;
  text-align:left; white-space:normal; pointer-events:none; opacity:0; transform:translateY(4px);
  transition:opacity .14s cubic-bezier(.22,.61,.36,1), transform .14s cubic-bezier(.22,.61,.36,1); }
.spark-tip.is-on{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){ .spark-tip{ transition:opacity .14s; transform:none; } }

/* ===== scrollbars ===== */
.td-theme .table-scroll::-webkit-scrollbar, .td-theme ::-webkit-scrollbar{ height:10px; width:10px; }
.td-theme .table-scroll::-webkit-scrollbar-track{ background:rgba(6,11,18,.9); }
.td-theme .table-scroll::-webkit-scrollbar-thumb{ background:rgba(58,72,86,.85); border-radius:6px; border:2px solid rgba(6,11,18,.9); }
.td-theme .table-scroll::-webkit-scrollbar-thumb:hover{ background:rgba(127,180,230,.5); }

/* ===== responsive (desktop/tablet now; phone = horizontal-scroll fallback) ===== */
@media (max-width:1100px){
  .td-topbar{ padding:0 20px; }
  .td-theme main.main.td-stage{ padding:22px 14px 48px; }
  .td-topbar-right{ gap:10px; }
}
@media (max-width:760px){
  .td-wordmark .td-sub{ display:none; }
  /* Command bar: centred wrap left the analysis toggle / budget / search at
     three different widths with ragged edges. Stack them full-width so every
     control lines up with the category grid and the table card below. */
  .td-theme .td-controls{ flex-direction:column; align-items:stretch; gap:10px; width:100%; }
  .td-theme .calc-mode-panel.td-analysis{ width:100%; justify-content:space-between; }
  .td-theme .td-budget{ width:100%; }
  .td-theme .td-search,
  .td-theme .td-controls .td-search{ flex:none; width:100%; max-width:none; }
  /* Meta row: the relocator moves «Обозначения» into .td-meta-left so it shares
     the «Только прибыльные» line (pushed right via margin-left:auto) instead of
     eating its own line. Title + count stay on line 1, toggle + legend on line 2. */
  .td-meta{ flex-direction:column; align-items:flex-start; gap:8px; }
  .td-theme .td-meta-left{ width:100%; }
  .td-theme .td-meta-left > .td-legend-btn{ margin-left:auto; }
  /* Category chips: centred wrap looks ragged on phones (lone «Все позиции»,
     uneven pairs). Lay them out as an even 2-col grid (8 chips → 4 tidy rows),
     each chip full-width with centred label. */
  .td-theme #categoryList.td-cats{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
  .td-theme #categoryList.td-cats .cat{ width:100%; justify-content:center; height:40px; padding:0 10px; font-size:12px; }
  /* phone = card layout (see «CARD LAYOUT» block at the end of this file) */
}

/* ===== Mobile header: second row ==================================
   The phone topbar can't fit the globe chip + «Обновлено» beside the brand and
   login on one line. The relocator script (index.html) moves them into
   #tdTopbarSub — a full-width second header row — so they stay visually attached
   to the header instead of floating above the search field. */
@media (max-width:760px){
  .td-theme .td-topbar{ flex-wrap:wrap; height:auto; row-gap:8px; padding-top:9px; padding-bottom:9px; }
}
.td-theme .td-topbar-sub:not([hidden]){
  flex-basis:100%; width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:8px 16px; padding-top:8px; border-top:1px solid rgba(150,175,200,.14);
  font-size:11px; color:var(--tmuted); }
.td-theme .td-topbar-sub .td-updated{ display:inline-flex; align-items:center; gap:6px; }
/* In the sub row the globe chip sits at the LEFT edge — anchor its menu left so
   it doesn't overflow the viewport's right side. */
.td-theme .td-topbar-sub .td-dd-menu{ right:auto; left:0; }
/* Phones: drop the «GoldMaker» wordmark so the mark + locale + online + login fit
   on header row 1 (the wordmark would overflow it onto another line). */
@media (max-width:520px){
  .td-theme .td-wordmark{ display:none; }
}
/* Base auction-app.css схлопывает средние колонки ≤900px (логика старой 9-колоночной
   таблицы). Для Titanium Deck с 5 колонками это ломает вёрстку — держим все колонки
   видимыми, таблица просто скроллится по горизонтали внутри карточки. */
@media (max-width:900px){
  .td-theme .dash-table col.col-recipe{ width:320px; visibility:visible; }
  .td-theme .dash-table col.col-profit{ width:270px; visibility:visible; }
  .td-theme .dash-table col.col-num{ width:230px; visibility:visible; }
  .td-theme .dash-table col.col-rating{ width:250px; visibility:visible; }
  .td-theme .dash-table thead th, .td-theme .dash-table tbody td{ visibility:visible; }
  .td-theme .dash-table thead th.col-profit, .td-theme .dash-table tbody td.col-profit{
    padding:8px 10px; font-size:12.5px; line-height:1.4; }
  .td-theme .dash-table tbody td.col-profit > *{ display:inline-flex; }
}

/* ===== CARD LAYOUT (phones ≤760px) =====================================
   The JS still emits a <table>; here we re-flow it into stacked cards so the
   dense 5-column grid stays readable without horizontal scrolling. Each row
   becomes a card: recipe name as the title, then «label → value» metric rows
   (labels come from data-label set in renderRows). Placed last so it wins
   source-order ties over the ≤900px desktop-shrink rules above. */
@media (max-width:760px){
  .td-theme .table-scroll{ overflow-x:visible; }
  .td-theme .dash-table{ min-width:0; display:block; }
  .td-theme .dash-table colgroup,
  .td-theme .dash-table thead{ display:none; }
  .td-theme .dash-table tbody{ display:block; }

  /* Each data row → a card. */
  .td-theme .dash-table tbody tr.data-row{
    display:block; margin:0 12px 10px; padding:12px 14px; border-radius:14px;
    background:linear-gradient(160deg, rgba(230,242,252,.05), rgba(0,0,0,.18));
    border:1px solid rgba(160,185,210,.16); box-shadow:0 8px 22px -10px rgba(0,0,0,.6); }
  .td-theme .dash-table tbody tr.data-row.is-expanded{ border-color:rgba(127,180,230,.4); }

  /* Undo the legacy ≤900px collapse of col-profit (old 9-col table) — in the
     5-col Titanium table «Профит/Ед» is a real column we want in the card. */
  .td-theme .dash-table tbody tr.data-row td.col-profit{
    visibility:visible !important; font-size:13px !important; line-height:1.4 !important; padding:7px 0 !important; }
  .td-theme .dash-table tbody tr.data-row td.col-profit > *{ display:inline-flex !important; }

  .td-theme .dash-table tbody tr.data-row td{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    /* Reset the legacy ≤900px column widths (28%/72% from the old 9-col table) —
       in card mode every metric row must span the full card so values line up on
       a single right edge and the title underline runs the full width. */
    width:auto; min-width:0; max-width:none; box-sizing:border-box;
    padding:7px 0; border:0; text-align:right; white-space:normal; }
  .td-theme .dash-table tbody tr.data-row td + td{ border-top:1px solid rgba(160,185,210,.1); }
  /* Metric label from data-label, on the left. */
  .td-theme .dash-table tbody tr.data-row td[data-label]::before{
    content:attr(data-label); flex:0 0 auto; text-align:left;
    color:var(--titanium); font:600 10px/1.3 'Inter',sans-serif; letter-spacing:.5px; text-transform:uppercase; }

  /* Title cell (recipe name) — full-width header of the card, no label. */
  .td-theme .dash-table tbody tr.data-row td.col-item{
    padding:0 0 9px; margin-bottom:3px; border-bottom:1px solid rgba(160,185,210,.16);
    justify-content:flex-start; text-align:left; }
  .td-theme .dash-table tbody tr.data-row td.col-item .item-name{ flex-wrap:wrap; }

  /* Keep value alignment tidy. */
  .td-theme .dash-table tbody tr.data-row td.td-num{ justify-content:space-between; }
  .td-theme .dash-table tbody tr.data-row td .td-gold-with-coin{ justify-content:flex-end; }
  .td-theme .dash-table tbody tr.data-row td.col-rating .dash-rating{ justify-content:flex-end; }
  /* Heat wash reads oddly on a full-width card row — drop it on phones.
     !important beats the more specific .col-profit.has-heat.is-pos wash above. */
  .td-theme .dash-table tbody tr.data-row td.has-heat{ background-image:none !important; }

  /* Spoiler row spans the full card width. */
  .td-theme .dash-table tbody tr.recipe-spoiler-row > td{ display:block; padding:10px 12px; }
  .td-theme .dash-table tbody tr.recipe-spoiler-row{ display:block; margin:-6px 12px 12px; }

  /* «Данные рецепта»: the 2-col mini-table (1.4fr/1fr ≤900px) collapses to
     ~220px on phones, truncating prices («45,81 (аукцион)») and cramping
     reagent names. Stack to a single full-width column, then give each
     subsection (Реагенты, Лучшая цена, Произведено …) its own vertical padding
     and a dashed top divider so the next label can't slip into the previous
     section's data — reads like the «Характеристики» key/value list. */
  .td-theme .spoiler-recipe-grid{ grid-template-columns:1fr; gap:0; }
  .td-theme .spoiler-recipe-grid .spoiler-rcol{ padding:10px 0; border-top:1px dashed rgba(160,185,210,.16); }
  .td-theme .spoiler-recipe-grid .spoiler-rcol:first-child{ padding-top:0; border-top:0; }
  .td-theme .spoiler-recipe-grid .spoiler-rcol:last-child{ padding-bottom:0; }
  /* Section label: ice accent + room above its data for a clear hierarchy. */
  .td-theme .spoiler-recipe-grid .spoiler-subhead{ margin:0 0 7px; color:var(--ice); }

  /* Spoiler blocks stack vertically; pin each to the card width. The chain
     block carries .chain-tree{min-width:max-content}, which otherwise inflates
     the block past the card (~415px) and clips the tree on the right. Cap the
     blocks at 100% and let .chain-box scroll the wide tree horizontally. */
  .td-theme .recipe-spoiler{ flex-direction:column; }
  .td-theme .recipe-spoiler > .spoiler-block{ width:100%; max-width:100%; min-width:0; flex:none; }
  .td-theme .spoiler-block--chain .chain-box{ max-width:100%; min-width:0; overflow-x:auto; }
}

/* ── Focus-visible polish: one consistent keyboard ring across the shell ── */
.td-theme button:focus-visible,
.td-theme a:focus-visible,
.td-theme select:focus-visible,
.td-theme [tabindex]:focus-visible{ outline:2px solid rgba(127,180,230,.65); outline-offset:2px; border-radius:6px; }
.td-theme .dash-table thead th.sortable:focus-visible{ outline:2px solid rgba(127,180,230,.5); outline-offset:-2px; }

/* ============================================================================
   INVESTMENT PORTFOLIO — members-only full-screen view (toggled from the topbar).
   Reuses the .prod-panel frame primitive (.pp-tag/.pp-corner/.pp-inner/.pp-body);
   only the head, table, P&L chip, totals footer and the add/edit modal are new.
   ========================================================================== */

/* View toggle: portfolio replaces the command bar + signals + production stage.
   Visibility is driven purely by the body.pf-view-open class (the .prod-panel
   frame sets display:block, which would otherwise defeat the [hidden] attr). */
.td-theme .pf-panel{ display:none; }
body.pf-view-open .pf-panel{ display:block; }
/* The buy-signals ticker stays visible above the portfolio (same as on the dashboard);
   only the command rail + production table are replaced by the portfolio view. */
body.pf-view-open .td-command,
body.pf-view-open #productionPanel{ display:none !important; }
/* Give the strip a little breathing room above the portfolio panel in this view. */
body.pf-view-open #buySignalsPanel{ margin-bottom:18px; }

/* (The topbar entry button is now the .td-portfolio chip with the live PnL —
   styled in the «Topbar chips + hover dropdowns» block near the top.) */

/* Head: back, title, P&L chip, slots, add. */
.td-theme .pf-panel .pf-head{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:17px 22px 15px;
  border-bottom:1px solid rgba(160,185,210,.1); }
.td-theme .pf-back{ display:inline-flex; align-items:center; gap:4px; padding:6px 13px; border-radius:9px; cursor:pointer;
  font:inherit; font-size:12.5px; color:var(--tmuted); background:var(--titanium-face);
  border:1px solid rgba(150,175,200,.18); transition:.2s var(--ease); }
.td-theme .pf-back:hover{ color:var(--ice-bright); border-color:rgba(127,180,230,.5); }
.td-theme .pf-title{ font-family:'Inter',sans-serif; font-weight:700; font-size:16px; letter-spacing:.6px; color:var(--ttext); }
.td-theme .pf-title .pp-en{ display:block; font-size:9px; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--ice); opacity:.7; margin-top:3px; font-weight:600; }

/* Portfolio P&L chip — profit/loss tinted. */
.td-theme .pf-dyn-chip{ display:inline-flex; flex-direction:column; gap:2px; padding:6px 13px; border-radius:11px;
  border:1px solid rgba(160,185,210,.2); background:rgba(160,185,210,.05); }
.td-theme .pf-dyn-chip .pf-dyn-cap{ font-size:8.5px; letter-spacing:1.6px; text-transform:uppercase; color:var(--tfaint); }
.td-theme .pf-dyn-chip .pf-dyn-val{ font-family:'Roboto Mono',ui-monospace,monospace; font-size:14px; font-weight:700; color:var(--ttext); }
.td-theme .pf-dyn-chip.pf-up{ border-color:rgba(127,227,176,.45); background:rgba(127,227,176,.08); }
.td-theme .pf-dyn-chip.pf-up .pf-dyn-val{ color:var(--tgreen); }
.td-theme .pf-dyn-chip.pf-down{ border-color:rgba(255,155,155,.45); background:rgba(255,155,155,.08); }
.td-theme .pf-dyn-chip.pf-down .pf-dyn-val{ color:var(--tred); }

.td-theme .pf-slots{ font-family:'Roboto Mono',ui-monospace,monospace; font-size:11px; color:var(--tfaint);
  border:1px solid rgba(160,185,210,.18); border-radius:8px; padding:4px 9px; }
.td-theme .pf-add-btn{ display:inline-flex; align-items:center; gap:5px; padding:8px 15px; border-radius:10px; cursor:pointer;
  font:inherit; font-size:12.5px; font-weight:600; color:#0a131f;
  background:linear-gradient(180deg,var(--tgold-bright),var(--tgold)); border:1px solid rgba(232,200,122,.5);
  transition:.2s var(--ease); }
.td-theme .pf-add-btn:hover{ filter:brightness(1.08); box-shadow:0 0 18px -4px rgba(232,200,122,.5); }

/* Head totals: Invested · Commission · Total capital · P&L chip (left group), with the
   slots chip + add button pinned right via .pf-head-right. */
.td-theme .pf-stats{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.td-theme .pf-stat{ display:inline-flex; flex-direction:column; gap:2px; text-align:left; }
.td-theme .pf-stat .pf-stat-cap{ font-size:9px; letter-spacing:1.4px; text-transform:uppercase; color:var(--tfaint); }
.td-theme .pf-stat b{ font-family:'Roboto Mono',ui-monospace,monospace; font-size:14px; color:var(--ttext); font-weight:700; }
.td-theme .pf-stat-capital .pf-stat-cap{ color:var(--tgold); }
.td-theme .pf-stat-capital b{ font-size:16px; color:var(--tgold-bright); }
.td-theme .pf-head-right{ margin-left:auto; display:inline-flex; align-items:center; gap:12px; }

/* Table */
.td-theme .pf-table-scroll{ overflow-x:auto; padding:4px 0 0; }
.td-theme .pf-table{ width:100%; border-collapse:collapse; }
.td-theme .pf-table thead th{ text-align:right; padding:10px 12px; font-size:9.5px; letter-spacing:1.4px; text-transform:uppercase;
  color:var(--tfaint); font-weight:600; border-bottom:1px solid rgba(160,185,210,.12); white-space:nowrap; }
.td-theme .pf-table thead th.pf-th-item{ text-align:left; padding-left:22px; }
.td-theme .pf-table thead th.pf-th-act{ width:106px; }
.td-theme .pf-table tbody td{ padding:9px 12px; font-size:12.5px; border-top:1px solid rgba(160,185,210,.07); color:var(--ttext);
  text-align:right; vertical-align:middle; white-space:nowrap; }
.td-theme .pf-row:hover{ background:linear-gradient(90deg, rgba(127,180,230,.08), rgba(127,180,230,.02)); }
.td-theme .pf-td-item{ display:flex; align-items:center; gap:10px; text-align:left !important; padding-left:22px !important; }
.td-theme .pf-item-icon{ width:30px; height:30px; flex:none; border-radius:7px; overflow:hidden; background:#0c1626;
  border:1px solid rgba(160,185,210,.25); }
.td-theme .pf-item-icon img{ width:100%; height:100%; object-fit:cover; display:block; }
.td-theme .pf-item-icon.q-rare{ border-color:#4ea0ff; } .td-theme .pf-item-icon.q-uncommon{ border-color:#5fd06a; }
.td-theme .pf-item-icon.q-epic{ border-color:#b96bff; } .td-theme .pf-item-icon.q-legendary{ border-color:#ff9d40; }
.td-theme .pf-item-name{ font-weight:600; font-size:12.5px; max-width:240px; overflow:hidden; text-overflow:ellipsis; }
.td-theme .pf-td-num{ font-family:'Roboto Mono',ui-monospace,monospace; }
.td-theme .pf-table tbody td.pf-muted{ color:var(--tmuted); }
/* Profit cell colour. These must out-specify `.td-theme .pf-table tbody td{color:var(--ttext)}`
   (0,2,2) — so scope them under `.pf-table tbody td` too (0,3,2) or the base cell colour wins. */
.td-theme .pf-table tbody td.pf-up{ color:var(--tgreen); font-weight:700; }
.td-theme .pf-table tbody td.pf-down{ color:var(--tred); font-weight:700; }
.td-theme .pf-table tbody td.pf-flat{ color:var(--tmuted); }
.td-theme .pf-td-act{ text-align:right; white-space:nowrap; }
.td-theme .pf-rowbtn{ width:28px; height:28px; border-radius:7px; cursor:pointer; font-size:13px; line-height:1;
  color:var(--tmuted); background:var(--titanium-face); border:1px solid rgba(150,175,200,.18);
  transition:.16s var(--ease); margin-left:4px; }
.td-theme .pf-rowbtn:hover{ color:var(--ice-bright); border-color:rgba(127,180,230,.5); }
.td-theme .pf-addlot{ color:var(--tgreen); }
.td-theme .pf-addlot:hover{ color:var(--tgreen); border-color:rgba(127,227,176,.55); }
.td-theme .pf-del:hover{ color:var(--tred); border-color:rgba(255,155,155,.5); }


/* Empty / loading state */
.td-theme .pf-empty{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:54px 24px; text-align:center; color:var(--tmuted); }
.td-theme .pf-empty-title{ font-size:15px; font-weight:700; color:var(--ttext); }
.td-theme .pf-empty-sub{ font-size:12.5px; max-width:420px; line-height:1.5; }
.td-theme .pf-empty .pf-add-btn{ margin-top:6px; }
.td-theme .pf-spin{ width:22px; height:22px; border-radius:50%; border:2px solid rgba(160,185,210,.25);
  border-top-color:var(--ice-bright); animation:pfSpin .8s linear infinite; }
@keyframes pfSpin{ to{ transform:rotate(360deg); } }

/* ── Add/edit modal ───────────────────────────────────────────────────────── */
.pf-modal-overlay{ position:fixed; inset:0; z-index:9500; display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(6,12,20,.74); backdrop-filter:blur(6px); }
.pf-modal-overlay[hidden]{ display:none; }
.td-theme .pf-modal{ position:relative; width:100%; max-width:440px; border-radius:16px; padding:26px 24px 24px;
  background:linear-gradient(180deg, rgba(18,30,46,.97), rgba(9,16,26,.98)); border:1px solid rgba(127,180,230,.3);
  box-shadow:0 30px 70px -24px rgba(0,0,0,.85), 0 0 40px -10px rgba(127,180,230,.22); color:var(--ttext); }
.pf-modal-close{ position:absolute; top:12px; right:14px; width:30px; height:30px; border:0; background:transparent; cursor:pointer;
  font-size:22px; line-height:1; color:var(--tmuted); }
.pf-modal-close:hover{ color:var(--ice-bright); }
.td-theme .pf-modal-title{ margin:0 0 16px; font-size:17px; font-weight:700; letter-spacing:.4px; color:var(--ttext); }
.td-theme .pf-pick[hidden], .td-theme .pf-chosen[hidden]{ display:none; }
.td-theme .pf-input{ width:100%; box-sizing:border-box; padding:11px 13px; border-radius:10px; font:inherit; font-size:13px;
  color:var(--ttext); background:rgba(10,18,30,.8); border:1px solid rgba(150,175,200,.22); transition:.16s var(--ease); }
.td-theme .pf-input:focus{ outline:none; border-color:rgba(127,180,230,.6); box-shadow:0 0 0 2px rgba(127,180,230,.18); }
.td-theme .pf-search-results{ max-height:230px; overflow-y:auto; margin-top:8px; display:flex; flex-direction:column; gap:3px; }
.td-theme .pf-res{ display:flex; align-items:center; gap:10px; width:100%; padding:7px 9px; border-radius:9px; cursor:pointer;
  font:inherit; text-align:left; color:var(--ttext); background:transparent; border:1px solid transparent; transition:.14s var(--ease); }
.td-theme .pf-res:hover{ background:rgba(127,180,230,.1); border-color:rgba(127,180,230,.3); }
.td-theme .pf-res-icon{ width:28px; height:28px; flex:none; border-radius:6px; overflow:hidden; background:#0c1626; border:1px solid rgba(160,185,210,.25); }
.td-theme .pf-res-icon img{ width:100%; height:100%; object-fit:cover; display:block; }
.td-theme .pf-res-name{ flex:1; min-width:0; font-size:12.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.td-theme .pf-res-px{ font-family:'Roboto Mono',ui-monospace,monospace; font-size:11.5px; color:var(--tgold); white-space:nowrap; }
.td-theme .pf-res-empty{ padding:14px; text-align:center; font-size:12px; color:var(--tmuted); }
.td-theme .pf-chosen{ display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:10px; margin-bottom:14px;
  background:rgba(127,180,230,.07); border:1px solid rgba(127,180,230,.22); }
.td-theme .pf-chosen-icon{ width:32px; height:32px; flex:none; border-radius:7px; overflow:hidden; background:#0c1626; border:1px solid rgba(160,185,210,.25); }
.td-theme .pf-chosen-icon img{ width:100%; height:100%; object-fit:cover; display:block; }
.td-theme .pf-chosen-name{ flex:1; min-width:0; font-weight:600; font-size:13px; overflow:hidden; text-overflow:ellipsis; }
.td-theme .pf-chosen-change{ padding:5px 10px; border-radius:8px; cursor:pointer; font:inherit; font-size:11px; color:var(--tmuted);
  background:var(--titanium-face); border:1px solid rgba(150,175,200,.2); }
.td-theme .pf-chosen-change:hover{ color:var(--ice-bright); border-color:rgba(127,180,230,.5); }
.td-theme .pf-form{ display:flex; flex-direction:column; gap:13px; margin-top:4px; }
.td-theme .pf-field{ display:flex; flex-direction:column; gap:6px; }
.td-theme .pf-field-label{ font-size:11px; letter-spacing:.4px; color:var(--tmuted); }
.td-theme .pf-modal-msg{ min-height:16px; font-size:12px; color:var(--tred); }
.td-theme .pf-modal-msg:empty{ min-height:0; }
.td-theme .pf-submit{ padding:12px 16px; border-radius:11px; cursor:pointer; font:inherit; font-size:13.5px; font-weight:700;
  color:#0a131f; background:linear-gradient(180deg,var(--tgold-bright),var(--tgold)); border:1px solid rgba(232,200,122,.5);
  transition:.18s var(--ease); }
.td-theme .pf-submit:hover:not(:disabled){ filter:brightness(1.08); box-shadow:0 0 22px -6px rgba(232,200,122,.55); }
.td-theme .pf-submit:disabled{ opacity:.55; cursor:default; }

@media (max-width:760px){
  .td-theme .pf-panel .pf-head{ gap:10px 14px; }
  .td-theme .pf-head-right{ margin-left:0; width:100%; justify-content:space-between; }
  .td-theme .pf-stats{ gap:14px; width:100%; }
  .td-theme .pf-item-name{ max-width:150px; }
}

/* ── Portfolio column styling (data readability) ───────────────────────────── */
/* Header cell: label + the shared «i» info button (body-level .th-info tooltip). */
.td-theme .pf-table thead th .pf-th-h{ display:inline-flex; align-items:center; gap:5px; justify-content:flex-end; }
.td-theme .pf-table thead th.pf-th-item .pf-th-h{ justify-content:flex-start; }
.td-theme .pf-table thead th .th-info{ position:static; width:15px; height:15px; min-width:15px; padding:0; font-size:9px;
  line-height:15px; border-radius:50%; cursor:help; color:var(--tfaint); background:rgba(160,185,210,.1);
  border:1px solid rgba(160,185,210,.28); display:inline-grid; place-items:center; }
.td-theme .pf-table thead th .th-info:hover{ color:var(--ice-bright); border-color:rgba(127,180,230,.55); }

/* Qty: number + a small muted unit. */
.td-theme .pf-td-qty .pf-qty-val{ font-weight:600; }
.td-theme .pf-td-qty .pf-unit{ margin-left:4px; font-size:9.5px; color:var(--tfaint); font-family:'Inter',sans-serif; }

/* Avg buy: value tinted by entry quality + a tiny green→red position bar. */
.td-theme .pf-td-avg{ cursor:help; }
.td-theme .pf-td-avg .pf-avg-val{ font-weight:700; }
.td-theme .pf-buybar{ display:block; position:relative; height:4px; margin:5px 0 1px; border-radius:3px;
  background:linear-gradient(90deg, hsl(140,72%,50%), hsl(70,80%,52%), hsl(0,75%,55%)); opacity:.78; }
/* «Price now» bar: inverted scale → low (left) red, high (right) green. */
.td-theme .pf-buybar.pf-buybar-inv{ background:linear-gradient(90deg, hsl(0,75%,55%), hsl(70,80%,52%), hsl(140,72%,50%)); }
.td-theme .pf-buybar-mark{ position:absolute; top:50%; width:7px; height:7px; border-radius:50%; transform:translate(-50%,-50%);
  border:1.5px solid #0a131f; box-shadow:0 0 5px rgba(0,0,0,.6); }

/* Price now / commission readability. The colour comes inline on .pf-now-val (range-tinted),
   so the cell rule only governs weight + the no-price fallback. */
.td-theme .pf-td-now{ cursor:help; }
.td-theme .pf-td-now .pf-now-val{ font-weight:700; }
.td-theme .pf-table tbody td.pf-td-now{ font-weight:600; }
.td-theme .pf-table tbody td.pf-td-now.pf-noprice{ color:var(--tfaint); font-weight:400; font-style:italic; }

/* Duplicate-add choice (rendered inside the modal message area). */
.td-theme .pf-dup{ text-align:left; }
.td-theme .pf-dup-hint{ font-size:12px; color:var(--tmuted); line-height:1.45; margin-bottom:9px; }
/* Live averaging preview for the quick row ＋ flow (held lot → projected merged lot). */
.td-theme .pf-avg-hint{ text-align:left; font-size:12px; color:var(--tmuted); line-height:1.45;
  padding:8px 10px; border-radius:8px; background:rgba(127,227,176,.08); border:1px solid rgba(127,227,176,.22); }
.td-theme .pf-dup-btns{ display:flex; gap:8px; }
.td-theme .pf-dup-btn{ flex:1; padding:9px 10px; border-radius:9px; cursor:pointer; font:inherit; font-size:12px; font-weight:600;
  transition:.16s var(--ease); }
.td-theme .pf-dup-avg{ color:#0a131f; background:linear-gradient(180deg,var(--tgreen),#5fc99a); border:1px solid rgba(127,227,176,.5); }
.td-theme .pf-dup-avg:hover{ filter:brightness(1.07); box-shadow:0 0 16px -5px rgba(127,227,176,.6); }
.td-theme .pf-dup-sep{ color:var(--ttext); background:var(--titanium-face); border:1px solid rgba(150,175,200,.28); }
.td-theme .pf-dup-sep:hover{ color:var(--ice-bright); border-color:rgba(127,180,230,.5); }
/* The duplicate block carries its own colours → don't tint it red like a plain error msg. */
.td-theme .pf-modal-msg:has(.pf-dup){ color:var(--ttext); }