/* ===== Invest Tracker — Noir theme ============================== */
/* Direct adoption of design/Invest Tracker/styles.css from the     */
/* Claude-design prototype. The Atelier and Velour variants from    */
/* that file are dropped — Noir is the canonical theme — and the    */
/* boot splash + tweaks-panel CSS that belonged to the React        */
/* prototype are removed. Everything else (layout primitives, KPI   */
/* cards, tables, calendar, modal, drawer) is intentionally kept    */
/* identical to the prototype so font sizes and grid proportions    */
/* are exactly what the design was tuned for.                       */
/* Legacy aliases for SSR-side concerns (.flash, .datatable,        */
/* .auth-page, .public-page, .prose, scrollbar, sync overlay) live  */
/* at the bottom of this file.                                      */

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{background:var(--bg);color:var(--text)}
body{
  font-family:'Manrope',ui-sans-serif,system-ui,sans-serif;
  font-size:14px;line-height:1.45;
  color:var(--text);
  background:var(--bg);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}

/* Scrollbar — thin, theme-matching */
html{scrollbar-color:var(--surface-3) var(--bg);scrollbar-width:thin}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:var(--bg)}
*::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:6px;border:2px solid var(--bg)}
*::-webkit-scrollbar-thumb:hover{background:var(--gold-deep)}
*::-webkit-scrollbar-corner{background:var(--bg)}

/* ===== Theme tokens — Noir ====================================== */
:root{
  --bg:           #050505;
  --bg-deep:      #000000;
  --surface-1:    #0C0C0C;
  --surface-2:    #131313;
  --surface-3:    #1A1A1A;
  --border:       rgba(212,175,55,0.22);
  --border-soft:  rgba(255,255,255,0.05);
  --hairline:     rgba(212,175,55,0.4);

  --text:         #F5F2EA;
  --text-strong:  #FFFFFF;
  --text-dim:     #8F8A7E;
  --text-faint:   #524E45;

  --gold:         #D4AF37;
  --gold-bright:  #F0CE53;
  --gold-deep:    #8A6F1C;
  --purple:       #C77DFF;
  --purple-deep:  #7B2CBF;
  --purple-soft:  rgba(199,125,255,0.14);

  --pos:          #4ADE80;
  --pos-bg:       rgba(74,222,128,0.10);
  --neg:          #F87171;
  --neg-bg:       rgba(248,113,113,0.10);
  --warn:         #E8B36A;

  /* JetBrains Mono first; SF Mono / Menlo on macOS, Cascadia/Consolas on
     Windows as the narrowest system mono options for the moment the
     web font hasn't finished loading. ui-monospace catches Safari iOS. */
  --font-display: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', 'Menlo', ui-monospace, 'Consolas', monospace;
  --font-sans:    'Manrope', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', 'Cascadia Code', 'Menlo', ui-monospace, 'Consolas', monospace;

  --radius:       4px;
  --radius-sm:    3px;
  --pad:          24px;

  --shadow-card:  0 1px 0 rgba(255,255,255,.03) inset, 0 24px 60px -30px rgba(0,0,0,.7);
}

/* Density */
[data-density="cozy"]   { --pad:28px; --row-pad:18px; }
[data-density="regular"]{ --pad:24px; --row-pad:14px; }
[data-density="compact"]{ --pad:18px; --row-pad:10px; }

/* ===== App shell ================================================ */
.app{
  display:grid;
  grid-template-columns:auto 1fr;
  min-height:100vh;
  background:
    radial-gradient(900px 500px at 100% -20%, rgba(212,175,55,0.06), transparent 60%),
    var(--bg);
}

/* ===== Sidebar ================================================== */
.sidebar{
  width:260px;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent 30%), var(--bg-deep);
  border-right:1px solid var(--border-soft);
  padding:28px 18px;
  display:flex;flex-direction:column;gap:8px;
  position:sticky;top:0;align-self:start;
  height:100vh;
  overflow-y:auto;
  transition:width .25s ease;
}
.sidebar.collapsed{width:78px}
.sidebar.collapsed .nav-label,
.sidebar.collapsed .brand-text,
.sidebar.collapsed .nav-group-label{display:none}
.sidebar.collapsed .brand{justify-content:center;padding:0}

.brand{
  display:flex;align-items:center;gap:12px;
  padding:6px 8px;margin-bottom:24px;
  font-family:var(--font-sans);font-style:normal;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;
  font-size:14px;color:var(--text-strong);
}
.brand-mark{
  width:32px;height:32px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--gold);
  filter:drop-shadow(0 0 8px rgba(212,175,55,.35));
}
.brand-mark svg{width:32px;height:32px;display:block}
.brand-text{line-height:1.2}
.brand-sub{
  display:block;
  font-size:11px;letter-spacing:.22em;color:var(--gold);
  text-transform:uppercase;margin-top:2px;font-weight:600;
}

.nav-group-label{
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-faint);padding:18px 12px 6px;
  font-weight:600;
}
.nav-item{
  display:flex;align-items:center;gap:14px;
  padding:11px 14px;border-radius:var(--radius-sm);
  color:var(--text-dim);
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
  font-weight:500;font-size:14px;
  position:relative;
  border:1px solid transparent;
}
.nav-item:hover{color:var(--text);background:rgba(255,255,255,.03)}
.nav-item.is-active,
.nav-item.active{
  color:var(--text-strong);
  background:linear-gradient(90deg, var(--purple-soft), transparent 80%);
  border-color:var(--border);
}
.nav-item.is-active::before,
.nav-item.active::before{
  content:"";position:absolute;left:-18px;top:10px;bottom:10px;width:2px;
  background:var(--gold);
  border-radius:2px;
}
.nav-icon{width:18px;height:18px;flex-shrink:0;opacity:.8;
  stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.nav-item.is-active .nav-icon,
.nav-item.active .nav-icon{opacity:1;color:var(--gold)}
.nav-label{white-space:nowrap}

.sidebar-spacer{flex:1}

.sidebar-foot{
  padding:14px 12px;border-top:1px solid var(--border-soft);
  display:flex;align-items:center;gap:10px;
  color:var(--text-dim);font-size:12px;
}
.sb-avatar{
  width:28px;height:28px;border-radius:50%;
  background:linear-gradient(135deg, var(--purple-deep), var(--gold-deep));
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:600;color:var(--text-strong);
  flex-shrink:0;
}
.sb-meta{line-height:1.3;min-width:0}
.sb-meta strong{color:var(--text);font-weight:500;display:block;overflow:hidden;text-overflow:ellipsis}
.sb-meta span{color:var(--text-faint);font-size:11px}
.side-logout{background:transparent;border:0;padding:0;color:inherit;cursor:pointer;font:inherit}

/* ===== Main area ================================================ */
.main{
  min-width:0;
  /* Minimal horizontal padding so the KPI row and cards below it
     sit shoulder-to-shoulder with the sidebar. The 24px on the
     right is just a small visual breathing strip. */
  padding:32px 24px 80px 16px;
  width:100%;
}
[data-density="compact"] .main{padding:24px 32px 60px}

/* page header */
.page-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:32px;flex-wrap:wrap;
  margin-bottom:32px;
}
.page-head > .actions{flex-shrink:0;padding-top:8px;display:flex;gap:10px;flex-wrap:wrap}
.page-title{
  font-family:var(--font-sans);font-size:28px;font-weight:600;
  text-transform:uppercase;letter-spacing:.05em;
  color:var(--text-strong);
  margin:0;line-height:1;
  white-space:nowrap;
}
.page-title em{font-style:normal;font-weight:400;color:var(--gold);margin-left:.18em;text-transform:none;letter-spacing:0}
.page-sub{
  color:var(--text-dim);font-size:13px;margin-top:10px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  line-height:1.4;
}
.page-sub a{color:var(--gold);border-bottom:1px solid currentColor;padding-bottom:1px;cursor:pointer}
.page-sub strong{color:var(--text);font-weight:500}

/* ===== Tabs ===================================================== */
.tabs{
  display:flex;gap:2px;align-items:stretch;
  border-bottom:1px solid var(--border-soft);
  margin-bottom:28px;
  overflow-x:auto;
  scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.tab{
  appearance:none;border:0;background:transparent;
  padding:14px 18px;cursor:pointer;
  color:var(--text-dim);font-size:14px;font-weight:500;
  border-bottom:2px solid transparent;
  white-space:nowrap;
  transition:color .15s, border-color .15s;
}
.tab:hover{color:var(--text)}
.tab.is-active,
.tab.active{color:var(--text-strong);border-bottom-color:var(--gold)}

/* ===== Cards ==================================================== */
.card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), transparent 40%),
    var(--surface-1);
  border:1px solid var(--border-soft);
  border-radius:var(--radius);
  padding:var(--pad);
  position:relative;
  box-shadow:var(--shadow-card);
}
.card.elev{border-color:var(--border)}
.card + .card{margin-top:18px}
/* Глобальное правило выше даёт зазор между двумя card, идущими подряд
   в вертикальном потоке. Но внутри CSS-grid (`.grid-2/3/4`) gap уже
   задан через grid-`gap`, а наследуемое margin-top:18px сдвигает 2-ю,
   3-ю, 4-ю карточки вниз внутри их ячеек → 1-я визуально выше.
   Сбрасываем margin для card-сиблингов внутри сеток. */
.grid-2 > .card + .card,
.grid-3 > .card + .card,
.grid-4 > .card + .card{margin-top:0}
.card-label{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-faint);font-weight:600;
  margin:0 0 14px;
  display:flex;align-items:center;gap:10px;
}
.card-label .dot{
  width:6px;height:6px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 8px var(--gold);
}
.card-label .dot.dot-neg{background:var(--neg);box-shadow:0 0 8px var(--neg)}
.card-title{
  font-family:var(--font-sans);font-weight:600;font-size:22px;
  color:var(--text-strong);line-height:1.1;letter-spacing:.01em;margin:0 0 6px;
}

/* ===== KPI cards =================================================
   Direct copy of the Noir block from design/Invest Tracker/styles.css.
   The earlier iterations bolted on clamps, width:100%, border colour
   overrides etc. trying to fix overflow — that's solved upstream now
   by kpi_money skipping kopecks on ≥10 000 ₽ amounts, so this section
   can match the prototype 1:1 again. */
.kpis{
  display:grid;
  /* Hero column ~2.8× базовой ширины — крупная цифра «3 555 799,91 ₽»
     должна стоять с заметным запасом от правого края тайла. */
  grid-template-columns:2.8fr 1fr 1fr 1fr 1fr;
  gap:14px;
  margin-bottom:28px;
}
.kpis.kpis-4{grid-template-columns:1.6fr 1fr 1fr 1fr}
.kpis.kpis-3{grid-template-columns:1.6fr 1fr 1fr}
.kpi{
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 30%),
    var(--surface-1);
  border:1px solid var(--border-soft);
  border-radius:var(--radius);
  /* Slightly tighter horizontal padding (24→20) so the KPI value
     gets ~8px more breathing room inside each tile. */
  padding:22px 20px;
  position:relative;
  min-height:170px;
  display:flex;flex-direction:column;justify-content:space-between;
}
.kpi.hero{
  border-color:var(--border);
  background:
    radial-gradient(600px 200px at 100% 0%, var(--purple-soft), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 40%),
    var(--surface-1);
}
.kpi-label{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-faint);font-weight:600;
  /* Резервируем место под две строки заголовка, чтобы значения во всех
     KPI-карточках вставали на один уровень: «Доходность годовая» /
     «Доходность активов» переносятся на 2 строки, а «Сумма вложений»
     и «Прибыль/убыток» — нет, и без min-height цифры соседних карточек
     прыгают по вертикали. */
  line-height:1.45;min-height:calc(11px * 1.45 * 2);
}
.kpi-value{
  font-family:var(--font-mono);font-weight:500;font-size:26px;
  line-height:1;
  color:var(--text-strong);
  letter-spacing:-.01em;
  font-feature-settings:"tnum" 1;
  margin-top:6px;
}
/* Hero font ~1.7× regular — visibly the headline value, with plenty
   of horizontal room (it sits in a column twice as wide as the
   small tiles). */
.kpi.hero .kpi-value{font-size:48px}
/* Hero layout наследует от .kpi (space-between → foot прижимается
   к низу, как у соседей). Отдельно подбираем верхний padding и
   убираем у hero резерв на двухстрочный label: «Текущая стоимость»
   занимает одну строку, и без этих правок крупная цифра hero (48 px)
   уезжает вниз и не попадает на нижнюю линию цифр соседей (26 px).
   Padding-top 16 + 1-строчный label 16 + gap 6 + 48 = 86, что в
   точности совпадает с padding-top 22 + 2-строчный label 32 + gap 6
   + 26 = 86 у соседних карточек. */
/* Сбрасываем max-width:720px / margin:0 auto, которые KPI hero
   ошибочно наследует от лендингового .hero (.hero{...padding:40px 0...}
   ниже в этом файле). text-align:center от того же правила оставляем —
   в hero-карточке всё содержимое центрируем по горизонтали. */
.kpi.hero{padding:16px 10px 22px;max-width:none;margin:0;text-align:center}
.kpi.hero .kpi-label{min-height:0}
.kpi.hero > div:first-child{display:flex;flex-direction:column;gap:6px}
/* margin-top:auto на пилюле почему-то не срабатывает в этой связке
   (вложенный flex-column на первом ребёнке мешает space-between).
   Поэтому позиционируем foot абсолютно — .kpi уже relative, так что
   left/right/bottom вписывают пилюлю в padding-границы карточки и
   она встаёт на ту же горизонталь, что подписи соседей. */
.kpi.hero .kpi-foot{
  position:absolute;
  left:10px;right:10px;bottom:22px;
  margin:0;
  /* Пилюля внутри — inline-flex, text-align:center её центрирует. */
  text-align:center;
}
.kpi-value.is-empty{color:var(--text-dim)}
.kpi-value .int{white-space:nowrap}
.kpi-value .cents{font-size:.55em;color:var(--text-dim)}
.kpi-value .ccy{font-size:.5em;color:var(--text-dim);margin-left:4px}
.kpi-foot{
  color:var(--text-dim);font-size:12px;line-height:1.4;
  /* Резервируем место под две строки подписи: в узких карточках
     длинные пояснения вроде «текущая стоимость минус вложения» или
     «без учёта Ваших пополнений» переносятся на 2 строки, а короткие
     («пополнения минус выводы») — на одну. Без min-height однострочные
     подписи прижимаются к низу карточки, а двухстрочные «всплывают»
     выше — первые строки текстов оказываются на разных уровнях. */
  min-height:2.8em;
}
.kpi-foot strong{color:var(--text);font-weight:500}
.kpi-warn{color:var(--amber,#f59e0b);font-size:11px}
.kpi-trend{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-weight:500;font-size:12px;
  padding:3px 8px;border-radius:99px;
}
/* Текст-пояснение внутри пилюли — чуть приглушённее цифры и без
   моноширинного шрифта, чтобы цифра оставалась главной. */
.kpi-trend-note{
  font-family:var(--font-sans,inherit);font-weight:500;
  opacity:.75;margin-left:2px;
}
.kpi-trend.pos{background:var(--pos-bg);color:var(--pos)}
.kpi-trend.neg{background:var(--neg-bg);color:var(--neg)}
.kpi-trend.dim{background:rgba(255,255,255,.04);color:var(--text-dim)}

.kpi-spark{
  position:absolute;right:18px;top:18px;
  width:88px;height:32px;opacity:.6;
}

/* ===== Helpers ================================================== */
.row{display:flex;align-items:center;gap:10px}
.row-h{justify-content:space-between}
.row-end{justify-content:flex-end}
.row-wrap{flex-wrap:wrap}
.col{display:flex;flex-direction:column;gap:8px}
.muted{color:var(--text-dim)}
.faint{color:var(--text-faint)}
.mono{font-family:var(--font-mono);font-feature-settings:"tnum" 1}
.pos{color:var(--pos)}
.neg{color:var(--neg)}
.small{font-size:12px}
.text-strong{color:var(--text-strong)}
.gold{color:var(--gold)}
.center{text-align:center}
.right{text-align:right}
.nowrap{white-space:nowrap}

/* Двухстрочный вывод <time data-local> после конвертации местной TZ:
   дата основная, время — приглушённо ниже маленьким шрифтом. */
time[data-local] .dt-date{display:block;line-height:1.2}
time[data-local] .dt-time{display:block;color:var(--text-dim);font-size:11px;line-height:1.2;margin-top:2px}
.mt-0{margin-top:0}.mt-8{margin-top:8px}.mt-14{margin-top:14px}.mt-22{margin-top:22px}
.mb-0{margin-bottom:0}.mb-14{margin-bottom:14px}.mb-22{margin-bottom:22px}

.pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 9px;border-radius:99px;
  font-size:11px;font-weight:500;
  background:rgba(255,255,255,.04);
  color:var(--text-dim);
  border:1px solid var(--border-soft);
}
.pill.gold{background:rgba(212,175,55,.10);color:var(--gold);border-color:var(--hairline)}
.pill.purple{background:var(--purple-soft);color:var(--purple);border-color:rgba(199,125,255,.3)}
.pill.pos{background:var(--pos-bg);color:var(--pos);border-color:rgba(74,222,128,.3)}
.pill.neg{background:var(--neg-bg);color:var(--neg);border-color:rgba(248,113,113,.3)}
/* Credit-rating tiers (АКРА/Эксперт РА).
   tier 1 (AAA — A+):    зелёный
   tier 2 (A — BBB+):    оливково-зелёный
   tier 3 (BBB — BB+):   оранжевый
   tier 4 (BB и ниже):   красный */
.pill.rating-tier-1{background:rgba(74,222,128,.10);color:var(--pos);border-color:rgba(74,222,128,.35);font-weight:600}
.pill.rating-tier-2{background:rgba(168,202,80,.10);color:#c9d97e;border-color:rgba(168,202,80,.30);font-weight:600}
.pill.rating-tier-3{background:rgba(245,158,11,.12);color:#f59e0b;border-color:rgba(245,158,11,.35);font-weight:600}
.pill.rating-tier-4{background:rgba(248,113,113,.12);color:var(--neg);border-color:rgba(248,113,113,.35);font-weight:600}
.pill .pdot{width:6px;height:6px;border-radius:50%;background:currentColor}

.divider{height:1px;background:var(--border-soft);margin:24px 0}

/* ===== Buttons ================================================== */
.btn{
  appearance:none;border:1px solid var(--border-soft);
  background:rgba(255,255,255,.03);color:var(--text);
  padding:10px 18px;border-radius:var(--radius-sm);
  font-size:13px;font-weight:500;cursor:pointer;
  transition:background .15s, border-color .15s, transform .1s;
  display:inline-flex;align-items:center;gap:8px;
  text-decoration:none;
}
.btn:hover{background:rgba(255,255,255,.06);border-color:var(--border)}
.btn:active{transform:translateY(1px)}
.btn:disabled,.btn[disabled]{opacity:.5;pointer-events:none}
.btn.gold,
a.btn.gold,a.btn.gold:link,a.btn.gold:visited{
  background:linear-gradient(180deg, var(--gold-bright), var(--gold) 60%, var(--gold-deep));
  border-color:var(--gold);
  color:#1A1207;
  font-weight:600;
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 8px 20px -8px rgba(212,175,55,.5);
}
.btn.gold:hover{filter:brightness(1.05)}
.btn.ghost{background:transparent}
.btn.danger{color:var(--neg);border-color:rgba(248,113,113,.25)}
.btn.danger:hover{background:var(--neg-bg)}
.btn.sm{padding:6px 12px;font-size:12px}
.btn .nav-icon{width:14px;height:14px;opacity:1}
.link-button{
  background:none;border:0;padding:0;
  color:var(--gold);text-decoration:none;
  border-bottom:1px solid currentColor;
  cursor:pointer;font:inherit;
}
.link-button:hover{color:var(--gold-bright)}
.inline-form{display:inline}

/* ===== Tables =================================================== */
.tbl, .datatable{
  width:100%;border-collapse:separate;border-spacing:0;
  font-size:13.5px;
}
.tbl-wrap{overflow-x:auto;margin:0 calc(var(--pad) * -1);padding:0 var(--pad)}
.tbl-wrap::-webkit-scrollbar{height:6px}
.tbl-wrap::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.tbl thead th, .datatable thead th{
  text-align:left;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-faint);font-weight:600;
  padding:14px 16px 14px 0;
  border-bottom:1px solid var(--border-soft);
  white-space:nowrap;
}
.tbl thead th:last-child{text-align:right}
.tbl thead th.ta-right{text-align:right}
.tbl thead th.sortable{cursor:pointer}
.tbl thead th.sortable:hover{color:var(--text)}
/* sortable-table.js: помечаем заголовки, по которым можно кликнуть,
   и резервируем место под стрелку индикатора. */
.tbl thead th.sortable-th{cursor:pointer;user-select:none;transition:color .12s}
.tbl thead th.sortable-th:hover{color:var(--text)}
.tbl thead th.sortable-th .sort-indicator{
  display:inline-block;width:10px;margin-left:4px;color:var(--gold);font-weight:700;
}
/* Иконка-предупреждение для высокорискованных бумаг в каталоге
   (цена сильно ниже номинала ИЛИ аномально высокая доходность —
   признак того, что рынок ждёт проблем у эмитента). Помечаем тёплым
   янтарным цветом, без обводки/фона — чтобы не превращалось в плашку. */
.risk-warning{
  display:inline-block;margin-left:6px;color:#f59e0b;font-size:14px;
  cursor:help;line-height:1;
}
/* Кликабельное имя эмитента в каталоге — стиль ссылки, но без подчёркивания. */
.issuer-trigger{
  background:none;border:0;color:inherit;font:inherit;padding:0;text-align:left;
  cursor:pointer;border-bottom:1px dashed transparent;transition:border-color .12s;
}
.issuer-trigger:hover{border-bottom-color:var(--gold)}
/* Popover карточка с инфо об эмитенте. Абсолютно позиционирована,
   JS вычисляет top/left от target'а. Z-index выше остальных карточек. */
.issuer-popover{
  position:absolute;z-index:1000;
  min-width:320px;max-width:480px;
  background:var(--surface,#1a2030);color:var(--text);
  border:1px solid var(--border);border-radius:8px;
  box-shadow:0 12px 40px rgba(0,0,0,0.5);
  padding:14px 16px;line-height:1.5;font-size:13px;
}
.issuer-popover .popover-head{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:10px;margin-bottom:10px;
}
.issuer-popover .popover-close{
  background:none;border:0;color:var(--text-dim);font-size:18px;
  cursor:pointer;padding:0 4px;line-height:1;
}
.issuer-popover .popover-close:hover{color:var(--text)}
.issuer-popover .popover-ratings{width:100%;border-collapse:collapse;margin-bottom:10px}
.issuer-popover .popover-ratings td{padding:4px 6px;border:0;font-size:12.5px}
.issuer-popover .popover-ratings td:first-child{width:80px;white-space:nowrap}
.issuer-popover .popover-desc{
  margin-top:8px;color:var(--text-dim);font-size:12.5px;
  max-height:200px;overflow-y:auto;
}
.tbl tbody td, .datatable tbody td{
  padding:var(--row-pad,14px) 16px var(--row-pad,14px) 0;
  border-bottom:1px solid var(--border-soft);
  color:var(--text);
  vertical-align:middle;
}
.tbl tbody td:last-child{text-align:right}
.tbl tbody tr{transition:background .12s}
.tbl tbody tr:hover{background:rgba(255,255,255,.025)}
.tbl tbody tr:last-child td, .datatable tbody tr:last-child td{border-bottom:0}
.tbl .ttl, .datatable .ttl{color:var(--text-strong);font-weight:500}
.tbl .sub, .datatable .sub{color:var(--text-dim);font-size:12px;font-family:var(--font-mono)}
.tbl tfoot td{padding-top:18px;color:var(--text-dim);font-size:12px;border-top:1px solid var(--border-soft)}

/* ===== Logo bubble for tickers ================================== */
.tick{
  width:32px;height:32px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;letter-spacing:-.02em;
  flex-shrink:0;
  background:var(--surface-3);color:var(--text);
  border:1px solid var(--border-soft);
  overflow:hidden;
}
.tick.sm{width:22px;height:22px;font-size:9px}
.tick.lg{width:40px;height:40px;font-size:13px}
.tick img{width:100%;height:100%;object-fit:cover}
.tick.gold{background:linear-gradient(135deg,var(--gold-bright),var(--gold-deep));color:#1A1207}
.tick.purple{background:linear-gradient(135deg,var(--purple),var(--purple-deep));color:#fff}
.tick.green{background:linear-gradient(135deg,#3DCC8F,#0F6F47);color:#fff}
.tick.red{background:linear-gradient(135deg,#FF6B6B,#8C2424);color:#fff}
.tick.blue{background:linear-gradient(135deg,#5B95F0,#1E3A8A);color:#fff}
.tick.cyan{background:linear-gradient(135deg,#5BD9D9,#1B7F7F);color:#fff}

/* ===== Layout grids ============================================= */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
/* Pie-карточки в .grid-4: фиксированная высота 360px у всех 4.
   Раньше `grid-auto-rows: 1fr` стрэтчил карточки до самой высокой —
   у «По секторам» длинная легенда (12+ отраслей × 2-3 строки) дёргала
   все остальные карты в чудовищный размер. Теперь карты ровно одной
   высоты, легенда секторов сокращена до топ-7 + «Прочее» в коде
   (см. PortfolioCalculator::breakdown), так что укладывается. */
.grid-4 > .card{height:360px !important;overflow:hidden}
.grid-12{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.span-7{grid-column:span 7}
.span-5{grid-column:span 5}
.span-8{grid-column:span 8}
.span-4{grid-column:span 4}
.span-6{grid-column:span 6}

/* Mobile/tablet fallback only. The original 1100px breakpoint was
   too aggressive — a 1366px laptop with the browser not fully
   maximised, or any browser zoom past 125%, ended up below 1100
   and got the 2-column KPI grid (the user reported this as a
   visible jump in layout). 760px keeps the prototype's 5-up
   layout in every reasonable desktop window. */
/* .grid-4 — 4 равных колонки на широком экране, на средних
   ноутбуках/планшетах прыгаем сначала на 2×2, потом на 1 столбик.
   Без этого 4-я карточка pie-чарта уезжала за правый край вьюпорта. */
@media (max-width:1280px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .kpis{grid-template-columns:1fr 1fr;gap:12px}
  .grid-4{grid-template-columns:1fr}
  .grid-12 > *{grid-column:span 12 !important}
  .main{padding:24px 12px 60px}
}

/* ===== Form controls ============================================ */
.field{display:flex;flex-direction:column;gap:6px}
.field-row{display:flex;gap:14px;flex-wrap:wrap}
.field-row > .field{flex:1;min-width:160px}
.field-label{
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-faint);font-weight:600;
}
.input,.select,.textarea{
  appearance:none;-webkit-appearance:none;
  background:var(--surface-2);
  border:1px solid var(--border-soft);
  color:var(--text);
  padding:11px 14px;border-radius:var(--radius-sm);
  font:14px var(--font-sans);
  transition:border-color .15s, background .15s;
  width:100%;
}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--gold)}
.input::placeholder,.textarea::placeholder{color:var(--text-faint)}
.textarea{min-height:120px;resize:vertical;font-family:inherit;line-height:1.5}
.select{
  background-image:linear-gradient(45deg, transparent 50%, var(--text-dim) 50%),
                   linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);
  background-position:calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size:5px 5px, 5px 5px;background-repeat:no-repeat;
  padding-right:36px;
}
.field-error{color:var(--neg);font-size:12px;margin-top:4px}
.field-hint{color:var(--text-dim);font-size:12px;margin-top:4px}
label.check{display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none}
label.check input{accent-color:var(--gold)}

/* ===== Chart ==================================================== */
.chart-legend{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;color:var(--text-dim);margin-bottom:14px}
.chart-legend .sw{width:14px;height:10px;border-radius:2px;display:inline-block;margin-right:6px;vertical-align:middle}
.chart-legend .ln{width:18px;height:0;border-top:2px solid var(--gold);display:inline-block;margin-right:6px;vertical-align:middle}
.chart-box{position:relative}
/* Pie/doughnut-чарты в .grid-4 — фиксированная высота 200px только
   для самого круга. Легенда отдельным HTML-блоком ниже (.pie-legend),
   её высота определяется числом подписей. .card в grid выравниваются
   по высоте grid-row автоматически. */
.chart-box.pie-box{height:200px}

/* Кастомная HTML-легенда под pie-диаграммой. Wrap по словам,
   маленькая точка цвета сектора. Контролируем размер мы, а не
   Chart.js — никаких сюрпризов с наезжающим текстом на круг. */
.pie-legend{
  display:flex;flex-wrap:wrap;gap:6px 12px;
  margin-top:12px;font-size:11px;color:var(--text-dim);line-height:1.4;
}
.pie-legend .pie-legend-item{
  display:inline-flex;align-items:center;gap:5px;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pie-legend .dot{
  width:8px;height:8px;border-radius:50%;flex-shrink:0;
}

/* ===== Animations =============================================== */
@keyframes shimmer{
  0%{background-position:-200% 0}
  100%{background-position:200% 0}
}
.shimmer{
  background:linear-gradient(90deg, transparent 0, rgba(212,175,55,.25) 50%, transparent 100%);
  background-size:200% 100%;
  animation:shimmer 1.6s ease-in-out infinite;
}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:translateY(0)}
}
.fade-in{animation:fadeUp .35s ease both}
.delay-1{animation-delay:.05s}
.delay-2{animation-delay:.1s}
.delay-3{animation-delay:.15s}
.delay-4{animation-delay:.2s}

/* ===== Modal ==================================================== */
.modal-back{
  position:fixed;inset:0;background:rgba(0,0,0,.7);
  display:flex;align-items:center;justify-content:center;
  z-index:1000;animation:fadeUp .2s ease;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.modal{
  width:min(440px,92vw);
  background:var(--surface-1);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:32px;
  box-shadow:0 40px 80px rgba(0,0,0,.6);
}
.modal h3{font-family:var(--font-sans);font-size:18px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin:0 0 8px;color:var(--text-strong)}
.modal p{color:var(--text-dim);margin:0 0 24px;font-size:13.5px;line-height:1.5}
.modal-foot{display:flex;gap:10px;justify-content:flex-end}

/* Sync flash */
@keyframes syncpulse{
  0%{box-shadow:0 0 0 0 rgba(212,175,55,.4)}
  100%{box-shadow:0 0 0 16px rgba(212,175,55,0)}
}
.syncing{animation:syncpulse 1.2s ease-out infinite}

/* ===== Calendar ================================================= */
.cal-grid{
  display:grid;grid-template-columns:repeat(7,1fr);
  border:1px solid var(--border-soft);border-radius:var(--radius-sm);
  overflow:hidden;
}
.cal-grid .cal-h{
  background:var(--surface-2);color:var(--text-faint);
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:600;text-align:center;padding:8px 0;
  border-right:1px solid var(--border-soft);
  border-bottom:1px solid var(--border-soft);
}
.cal-grid .cal-h:last-child{border-right:0}
.cal-cell{
  min-height:78px;
  border-right:1px solid var(--border-soft);
  border-bottom:1px solid var(--border-soft);
  padding:8px;display:flex;flex-direction:column;gap:6px;
  background:var(--surface-1);
}
.cal-cell.empty{background:transparent}
.cal-num{font-size:11px;color:var(--text-dim);font-family:var(--font-mono)}
.cal-cell.has-evt{background:linear-gradient(180deg, rgba(212,175,55,.05), transparent), var(--surface-1)}
.cal-cell.today{outline:2px solid var(--gold);outline-offset:-1px;z-index:1}
/* Прошедшие дни: чтобы пользователь видел, что выплата состоялась,
   а не «потерялась», ячейка не пропадает, а отрисовывается с лёгкой
   диагональной штриховкой и приглушённым контентом. Сам контент
   остаётся читаемым (контраст не убиваем в ноль). */
.cal-cell.is-past{
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0,
      transparent 6px,
      rgba(255,255,255,.025) 6px,
      rgba(255,255,255,.025) 7px
    ),
    var(--surface-1);
}
.cal-cell.is-past .cal-num{color:var(--text-faint)}
.cal-cell.is-past .cal-evt{opacity:.45;filter:saturate(.6)}
.cal-cell.is-past.has-evt{
  /* Перекрываем золотой градиент has-evt — для прошедшего он только мешает,
     потому что подсказывает "ожидается". Заменяем его той же штриховкой. */
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0,
      transparent 6px,
      rgba(255,255,255,.03) 6px,
      rgba(255,255,255,.03) 7px
    ),
    var(--surface-1);
}
.cal-evt{display:flex;align-items:center;margin-top:auto;flex-wrap:wrap;gap:2px}
/* Раньше тики были 18px — практически нечитаемо в плотной сетке
   календаря. 36px (×2) — золотая середина: эмитент чётко узнаваем,
   но при этом в день умещается до 3-4 тиков без переноса. Overlap
   при наезде увеличен пропорционально (−10px) — чтобы при множестве
   событий все логотипы оставались видны хотя бы наполовину. */
.cal-evt .tick{width:36px;height:36px;font-size:13px;margin-right:-10px;border:2px solid var(--bg-deep)}
.cal-evt .tick img{width:100%;height:100%;object-fit:cover}
.cal-month-total{color:var(--text-dim);font-size:12px}

/* Цветовая кодировка типов событий в календарной сетке и легенде.
   Каждому event_type соответствует свой акцентный цвет — рамка у иконки
   бумаги в ячейке + точка в легенде. Логотип/буква внутри тика не
   меняются, чтобы инструмент оставался узнаваемым. */
/* Семантические группы:
   • зелёный  — купон (доход);
   • золотой  — амортизация (возврат номинала частями);
   • красный  — оферта put/call и погашение (важное действие или
     конечная точка облигации);
   • голубой  — конвертация (редкое корпоративное действие);
   • серый    — прочее. */
.cal-evt .tick.evt-coupon{       box-shadow:0 0 0 2.5px var(--pos),  0 0 0 4.5px var(--bg-deep);}
.cal-evt .tick.evt-amortization{ box-shadow:0 0 0 2.5px var(--gold), 0 0 0 4.5px var(--bg-deep);}
.cal-evt .tick.evt-maturity,
.cal-evt .tick.evt-offer_put,
.cal-evt .tick.evt-offer_call{   box-shadow:0 0 0 2.5px var(--neg),  0 0 0 4.5px var(--bg-deep);}
.cal-evt .tick.evt-conversion{   box-shadow:0 0 0 2.5px #4a9eda, 0 0 0 4.5px var(--bg-deep);}
.cal-evt .tick.evt-other{        box-shadow:0 0 0 2.5px var(--text-faint), 0 0 0 4.5px var(--bg-deep);}

/* Точки в легенде — те же цвета, что у обводки тика. */
.cal-legend-dot{
  display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--text-faint);
}
.cal-legend-dot.evt-coupon{       background:var(--pos);}
.cal-legend-dot.evt-amortization{ background:var(--gold);}
.cal-legend-dot.evt-maturity,
.cal-legend-dot.evt-offer_put,
.cal-legend-dot.evt-offer_call{   background:var(--neg);}
.cal-legend-dot.evt-conversion{   background:#4a9eda;}
.cal-legend-dot.evt-other{        background:var(--text-faint);}

/* ===== QR ======================================================= */
.qr-frame{
  width:240px;height:240px;
  background:#fff;border-radius:var(--radius);
  padding:18px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 32px rgba(0,0,0,.4);
}

/* ===== Misc ===================================================== */
.copy-input{
  display:flex;align-items:center;gap:10px;
  background:var(--bg-deep);border:1px solid var(--border-soft);
  border-radius:var(--radius-sm);padding:10px 14px;
  font-family:var(--font-mono);font-size:13px;color:var(--gold);
  letter-spacing:.08em;
}
.copy-input code{flex:1;color:inherit;background:transparent;padding:0;overflow-x:auto;white-space:nowrap}
.copy-input button{margin-left:auto;background:transparent;border:0;color:var(--text-dim);cursor:pointer;font-size:11px}
.copy-input button:hover{color:var(--text)}

.token-row{
  display:grid;grid-template-columns:1fr 1fr .8fr .8fr 1.4fr 1.2fr auto;
  gap:18px;align-items:center;padding:14px 0;border-bottom:1px solid var(--border-soft);
}
.token-row:last-child{border-bottom:0}

/* ===== Flash messages =========================================== */
.flash-wrap{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.flash{
  padding:12px 16px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border-soft);
  font-size:13.5px;
  background:var(--surface-1);
  color:var(--text);
}
.flash.flash-success{border-color:rgba(74,222,128,.3);background:var(--pos-bg);color:var(--pos)}
.flash.flash-error{border-color:rgba(248,113,113,.3);background:var(--neg-bg);color:var(--neg)}
.flash.flash-info{border-color:var(--border);background:var(--purple-soft);color:var(--purple)}

/* ===== Auth page (full-screen card) ============================= */
.auth-page{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:32px;
  background:
    radial-gradient(900px 500px at 0% 0%, rgba(199,125,255,0.10), transparent 60%),
    radial-gradient(900px 500px at 100% 100%, rgba(212,175,55,0.08), transparent 60%),
    var(--bg);
}
.auth-card{
  width:100%;max-width:420px;
  background:var(--surface-1);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:32px;
  box-shadow:0 40px 80px rgba(0,0,0,.6);
}
.auth-card .brand{margin-bottom:28px;padding:0}
.auth-card h1{
  font-family:var(--font-sans);font-size:18px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;
  margin:0 0 6px;color:var(--text-strong);
}
.auth-card p.lead{color:var(--text-dim);margin:0 0 24px;font-size:13.5px;line-height:1.5}
.auth-card form .field + .field{margin-top:16px}
.auth-card .btn{width:100%;justify-content:center;margin-top:22px}
.auth-foot{margin-top:22px;text-align:center;color:var(--text-dim);font-size:13px}
.auth-foot a{color:var(--gold);border-bottom:1px solid currentColor}

/* ===== Cabinet footer =========================================== */
.cabinet-footer{
  margin-top:48px;padding-top:24px;
  border-top:1px solid var(--border-soft);
  display:flex;align-items:center;gap:24px;
  color:var(--text-faint);font-size:12px;
}
.cabinet-footer a{color:inherit}
.cabinet-footer a:hover{color:var(--text-dim)}
.cabinet-footer .build-tag{margin-left:auto;font-family:var(--font-mono);font-size:11px}

/* ===== Public layout (home / legal) ============================= */
.public-page{min-height:100vh;display:flex;flex-direction:column}
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:24px 48px;border-bottom:1px solid var(--border-soft);
  background:var(--bg-deep);
}
.topbar nav{display:flex;gap:18px;align-items:center}
.topbar nav a{color:var(--text-dim);font-size:13px;padding:6px 12px;border-radius:var(--radius-sm)}
.topbar nav a:hover{color:var(--text);background:rgba(255,255,255,.04)}
.container{max-width:980px;margin:0 auto;padding:60px 32px;flex:1}
.hero{text-align:center;max-width:720px;margin:0 auto;padding:40px 0}
.hero h1{
  font-family:var(--font-sans);font-size:40px;font-weight:700;
  letter-spacing:.02em;text-transform:uppercase;
  color:var(--text-strong);margin:0 0 18px;line-height:1.1;
}
.hero .lead{font-size:16px;color:var(--text);line-height:1.55;margin:0 auto 32px}
.hero .actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.footer{padding:32px 48px;border-top:1px solid var(--border-soft);color:var(--text-faint);font-size:12px}
.footer .footer-links{display:flex;gap:18px;margin-bottom:8px}
.footer .footer-links a{color:var(--text-dim)}
.prose{max-width:720px;margin:0 auto;color:var(--text);line-height:1.7}
.prose h1{font-family:var(--font-sans);font-size:32px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-strong)}
.prose h2{font-family:var(--font-sans);font-size:18px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text-strong);margin-top:32px}
.prose p,.prose li{color:var(--text-dim);font-size:14.5px}
.prose ul,.prose ol{padding-left:22px}
.prose a{color:var(--gold);border-bottom:1px solid currentColor}

/* ===== Landing (главная для незалогиненных) ===================== */
/* Делаем контейнер на главной шире обычного — сетка фич помещается
   в 3 колонки. Остальные публичные страницы (about/privacy/terms)
   используют узкий .container из правила выше. */
.public-page main.container:has(.landing-hero){max-width:1180px;padding:32px 32px 0}

.landing-hero{
  text-align:center;max-width:780px;margin:48px auto 96px;
  position:relative;
}
.landing-hero::before{
  content:"";position:absolute;inset:-120px -200px auto -200px;height:560px;z-index:-1;
  background:
    radial-gradient(620px 280px at 50% 30%, rgba(212,175,55,.10), transparent 70%),
    radial-gradient(420px 220px at 20% 60%, rgba(199,125,255,.06), transparent 70%),
    radial-gradient(420px 220px at 80% 60%, rgba(74,222,128,.04), transparent 70%);
  pointer-events:none;
}
.landing-hero-eyebrow{
  display:inline-block;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold);
  padding:6px 14px;border:1px solid var(--border);border-radius:999px;
  background:rgba(212,175,55,.04);
  margin-bottom:24px;
}
.landing-hero-title{
  font-family:var(--font-sans);
  font-size:64px;line-height:1.05;letter-spacing:-.01em;
  font-weight:700;color:var(--text-strong);
  margin:0 0 24px;
}
.landing-hero-title .gold-text{
  background:linear-gradient(120deg, var(--gold-bright) 10%, var(--gold) 50%, #B8923A 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.landing-hero-lead{
  font-size:17px;line-height:1.6;color:var(--text-dim);
  max-width:620px;margin:0 auto 36px;
}
/* Inline-ссылка в hero-lead «как защищены Ваши цифры» — золотой
   подчёркнутый текст, по клику плавно скроллит к блоку #security.
   Подчёркивание толще обычного и слегка отступает от базовой
   линии, чтобы выделяться на фоне обычного текста. */
.landing-hero-link{
  color:var(--gold);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:4px;
  text-decoration-color:rgba(212,175,55,.45);
  transition:color .15s ease, text-decoration-color .15s ease;
}
.landing-hero-link:hover,
.landing-hero-link:focus{
  color:var(--gold-bright);
  text-decoration-color:var(--gold-bright);
}
/* Smooth-scroll для якорей внутри лендинга. Скролл-margin даёт
   воздух сверху, чтобы целевой блок не вплотную упирался
   в шапку при позиционировании по якорю. */
html{scroll-behavior:smooth}
#security{scroll-margin-top:32px}
.landing-hero-actions{
  display:flex;gap:14px;justify-content:center;flex-wrap:wrap;
  margin-bottom:28px;
}
.landing-hero-actions .btn{padding:13px 28px;font-size:14px}
.landing-hero-meta{
  display:inline-flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;
  font-size:12.5px;color:var(--text-dim);
}
.landing-hero-meta .dot-mark{
  display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 6px var(--gold);
  margin-right:6px;
}
.landing-hero-meta .dot-sep{color:var(--text-faint);margin:0 4px}

/* ----- Эпиграф / цитата ---------------------------------------
   Один блок с рандомной цитатой из home_quotes. Стоит между hero
   и манифестом, работает как эмоциональный «вздох» — даёт паузу
   перед плотными блоками фич. Тон минималистичный: одна короткая
   цитата + автор моноширинным в gold-deep.                       */
.landing-quote{
  max-width:760px;margin:8px auto 56px;
  padding:48px 32px 56px;text-align:center;
  position:relative;
}
.landing-quote-mark{
  font-family:Georgia,'Times New Roman',serif;
  font-size:44px;line-height:1;color:var(--gold);
  margin-bottom:18px;opacity:.7;
}
.landing-quote-text{
  font-family:var(--font-sans);
  font-size:22px;line-height:1.5;letter-spacing:.005em;
  font-weight:400;color:var(--text-strong);
  margin:0 auto 22px;max-width:640px;
  transition:opacity .32s ease;
}
.landing-quote-attribution{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold-deep);
  transition:opacity .32s ease;
}
/* Класс навешивается JS перед сменой текста и снимается сразу
   после — даёт fade-out/fade-in. .32s совпадает с setTimeout
   в assets/landing-quote.js. */
.landing-quote.is-fading .landing-quote-text,
.landing-quote.is-fading .landing-quote-attribution{
  opacity:0;
}
@media (max-width:680px){
  .landing-quote{padding:32px 20px 40px;margin-bottom:40px}
  .landing-quote-text{font-size:18px;line-height:1.45}
  .landing-quote-mark{font-size:36px}
}

/* ----- Манифест / расшифровка имени бренда -------------------- */
.landing-manifesto{
  max-width:760px;margin:-32px auto 96px;text-align:center;
  padding:36px 32px 40px;
  border-top:1px solid var(--border-soft);
  border-bottom:1px solid var(--border-soft);
  position:relative;
}
.landing-manifesto .landing-section-eyebrow{
  display:inline-block;margin-bottom:18px;color:var(--text-faint);
}
.landing-manifesto .landing-section-eyebrow .gold-text{
  background:linear-gradient(120deg, var(--gold-bright), var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.landing-manifesto-text{
  font-family:var(--font-sans);
  font-size:18px;line-height:1.6;letter-spacing:.005em;
  color:var(--text);margin:0;
  max-width:640px;margin-left:auto;margin-right:auto;
}
.landing-manifesto-text em{
  font-style:normal;color:var(--gold);font-weight:500;
}

.landing-section{margin:0 auto 96px;max-width:1180px}
.landing-section-head{text-align:center;margin-bottom:48px}
.landing-section-eyebrow{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold-deep);margin-bottom:12px;
}
.landing-section-title{
  font-family:var(--font-sans);font-size:36px;line-height:1.15;letter-spacing:-.005em;
  font-weight:700;color:var(--text-strong);margin:0;
}
.landing-section-title em{
  font-style:normal;color:var(--gold);font-weight:600;
}

/* ----- Feature grid ------------------------------------------- */
.landing-features{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}
.feature-card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 35%),
    var(--surface-1);
  border:1px solid var(--border-soft);
  border-radius:var(--radius);
  padding:28px 26px;
  transition:transform .2s ease, border-color .2s ease, background .2s ease;
  position:relative;
}
.feature-card:hover{
  transform:translateY(-2px);
  border-color:var(--border);
  background:
    linear-gradient(180deg, rgba(212,175,55,.04), transparent 50%),
    var(--surface-2);
}
.feature-icon{
  width:42px;height:42px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:10px;
  background:linear-gradient(135deg, rgba(212,175,55,.12), rgba(212,175,55,.04));
  border:1px solid var(--border);
  color:var(--gold);
  margin-bottom:18px;
}
.feature-icon svg{width:22px;height:22px}
.feature-card h3{
  font-family:var(--font-sans);font-size:16px;font-weight:600;
  letter-spacing:.01em;color:var(--text-strong);
  margin:0 0 10px;
}
.feature-card p{
  font-size:13.5px;line-height:1.55;color:var(--text-dim);
  margin:0;
}

/* ----- How-it-works steps ------------------------------------- */
.landing-steps{
  list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(3, 1fr);gap:20px;
  counter-reset:step;
}
.landing-steps .step{
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), transparent 30%),
    var(--surface-1);
  border:1px solid var(--border-soft);
  border-radius:var(--radius);
  padding:32px 28px;
  position:relative;
}
.landing-steps .step-num{
  font-family:var(--font-mono);font-size:34px;line-height:1;
  font-weight:600;letter-spacing:-.02em;
  background:linear-gradient(120deg, var(--gold-bright), var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:20px;display:inline-block;
}
.landing-steps .step h3{
  font-family:var(--font-sans);font-size:16px;font-weight:600;
  color:var(--text-strong);margin:0 0 10px;
}
.landing-steps .step p{
  font-size:13.5px;line-height:1.55;color:var(--text-dim);margin:0;
}

/* ----- Token how-to (для /cabinet/tokens и /cabinet/tokens/add) - */
.token-howto-steps{
  list-style:none;padding:0;margin:0;
  display:flex;flex-direction:column;gap:14px;
}
.token-howto-steps li{
  display:flex;gap:16px;align-items:flex-start;
  padding:14px 16px;border:1px solid var(--border-soft);
  border-radius:var(--radius-sm);background:var(--surface-1);
}
.token-howto-num{
  flex-shrink:0;width:30px;height:30px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-weight:600;font-size:14px;
  background:linear-gradient(135deg, var(--gold-bright), var(--gold-deep));
  color:#000;
}
.token-howto-body{flex:1;min-width:0}
.token-howto-body h4{
  font-family:var(--font-sans);font-size:14.5px;font-weight:600;
  letter-spacing:.01em;color:var(--text-strong);
  margin:0 0 6px;
}
.token-howto-body p{
  font-size:13.5px;line-height:1.55;color:var(--text-dim);
  margin:0 0 6px;
}
.token-howto-body p:last-child{margin-bottom:0}
.token-howto-body a{color:var(--gold)}
.token-howto-safety{
  padding:14px 16px;border-radius:var(--radius-sm);
  background:var(--purple-soft);color:var(--text-dim);
  font-size:13px;line-height:1.55;
  border:1px solid var(--purple-soft);
}
.token-howto-safety strong{color:var(--text-strong)}

/* Скриншоты под телом шага. Лежат сеткой 2-3 в ряд, при клике
   открываются в новой вкладке (натуральный размер). loading=lazy
   снимает нагрузку с первой отрисовки страницы. */
.token-howto-shots{
  display:flex;flex-wrap:wrap;gap:10px;
  margin-top:10px;
}
.token-howto-shots figure{
  margin:0;flex:0 1 auto;max-width:280px;
}
.token-howto-shots img{
  display:block;max-width:100%;height:auto;
  border-radius:6px;border:1px solid var(--border-soft);
  background:var(--bg-deep);
  cursor:zoom-in;
  transition:border-color .15s ease;
}
.token-howto-shots img:hover{border-color:var(--gold-deep)}
.token-howto-shots figcaption{
  font-size:12px;color:var(--text-faint);
  margin-top:4px;line-height:1.4;
}

/* ----- Trust block -------------------------------------------- */
.landing-trust{padding:48px 44px}
.landing-trust-head{text-align:center;margin-bottom:36px;max-width:680px;margin-left:auto;margin-right:auto}
.landing-trust-head .landing-section-title{font-size:28px}
.landing-trust-lead{
  font-size:14.5px;line-height:1.6;color:var(--text-dim);
  margin:14px auto 0;max-width:560px;
}
.landing-trust-list{
  list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(2, 1fr);gap:22px 36px;
}
.landing-trust-list li{
  display:flex;flex-direction:column;gap:6px;
  padding-left:20px;position:relative;
}
.landing-trust-list li::before{
  content:"";position:absolute;left:0;top:6px;
  width:8px;height:8px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 8px rgba(212,175,55,.5);
}
.landing-trust-list strong{
  font-family:var(--font-sans);font-size:13.5px;font-weight:600;
  color:var(--text-strong);letter-spacing:.01em;
}
.landing-trust-list span{
  font-size:12.5px;color:var(--text-dim);line-height:1.5;
}

/* ----- Final CTA ---------------------------------------------- */
.landing-cta{
  text-align:center;
  max-width:640px;margin:0 auto 80px;
  padding:64px 32px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:
    radial-gradient(500px 200px at 50% 0%, rgba(212,175,55,.10), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 50%),
    var(--surface-1);
}
.landing-cta h2{
  font-family:var(--font-sans);font-size:28px;line-height:1.2;
  font-weight:700;color:var(--text-strong);margin:0 0 14px;
}
.landing-cta p{font-size:14.5px;color:var(--text-dim);margin:0 0 28px}

/* ----- About page (/about) ------------------------------------ */
.public-page main.container:has(.legal-page){max-width:1100px;padding:32px 32px 0}
.legal-page{margin:0 auto}
.legal-head{text-align:center;max-width:760px;margin:32px auto 56px;position:relative}
.legal-head::before{
  content:"";position:absolute;inset:-80px -160px auto -160px;height:380px;z-index:-1;
  background:radial-gradient(520px 220px at 50% 30%, rgba(212,175,55,.08), transparent 70%);
  pointer-events:none;
}
.legal-eyebrow{
  display:inline-block;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold);
  padding:6px 14px;border:1px solid var(--border);border-radius:999px;
  background:rgba(212,175,55,.04);margin-bottom:24px;
}
.legal-title{
  font-family:var(--font-sans);font-size:44px;line-height:1.1;letter-spacing:-.005em;
  font-weight:700;color:var(--text-strong);margin:0 0 20px;
}
.legal-title .gold-text{
  background:linear-gradient(120deg, var(--gold-bright) 10%, var(--gold) 50%, #B8923A 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.legal-lead{
  font-size:16px;line-height:1.6;color:var(--text-dim);
  max-width:640px;margin:0 auto;
}
.legal-lead a{color:var(--gold);border-bottom:1px solid currentColor}

.legal-grid{
  display:grid;grid-template-columns:repeat(2, 1fr);gap:20px;
  margin-bottom:64px;
}
.legal-card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), transparent 35%),
    var(--surface-1);
  border:1px solid var(--border-soft);
  border-radius:var(--radius);
  padding:28px 30px;
  position:relative;
}
.legal-card-num{
  font-family:var(--font-mono);font-size:24px;line-height:1;
  font-weight:600;letter-spacing:-.02em;
  background:linear-gradient(120deg, var(--gold-bright), var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:12px;display:inline-block;
}
.legal-card h2{
  font-family:var(--font-sans);font-size:17px;font-weight:600;
  letter-spacing:.01em;color:var(--text-strong);
  margin:0 0 14px;
}
.legal-card p{
  font-size:13.5px;line-height:1.6;color:var(--text-dim);
  margin:0 0 12px;
}
.legal-card p:last-child{margin-bottom:0}
.legal-card code{
  font-family:var(--font-mono);font-size:12.5px;
  background:rgba(212,175,55,.06);
  color:var(--gold);
  padding:1px 6px;border-radius:3px;
  border:1px solid var(--border-soft);
  word-break:break-all;
}
.legal-card b{color:var(--text);font-weight:600}
.legal-card ul{list-style:none;padding:0;margin:0 0 12px;display:flex;flex-direction:column;gap:10px}
.legal-card ul:last-child{margin-bottom:0}
.legal-card li{
  font-size:13.5px;line-height:1.55;color:var(--text-dim);
  padding-left:18px;position:relative;
}
.legal-card li::before{
  content:"";position:absolute;left:0;top:8px;
  width:6px;height:6px;border-radius:50%;background:var(--gold-deep);
}
.legal-meta{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-faint);
  margin:24px 0 0;
}
.legal-disclaimer{
  max-width:760px;margin:0 auto 40px;
  font-size:12.5px;line-height:1.55;color:var(--text-faint);
  text-align:center;font-style:italic;
  padding:0 24px;
}

.legal-cta{
  display:flex;gap:14px;justify-content:center;flex-wrap:wrap;
  margin:0 auto 64px;
}
.legal-cta .btn{padding:13px 28px;font-size:14px}

/* ----- Mobile / tablet ---------------------------------------- */
@media (max-width: 960px){
  .landing-hero-title{font-size:48px}
  .landing-features,
  .landing-steps,
  .landing-trust-list{grid-template-columns:repeat(2, 1fr)}
  .legal-grid{grid-template-columns:1fr}
  .legal-title{font-size:36px}
}
@media (max-width: 640px){
  .public-page main.container:has(.landing-hero),
  .public-page main.container:has(.legal-page){padding:16px 18px 0}
  .landing-hero{margin:24px auto 64px}
  .landing-hero-title{font-size:36px}
  .landing-hero-lead{font-size:15px}
  .landing-section{margin-bottom:64px}
  .landing-section-title{font-size:26px}
  .landing-features,
  .landing-steps,
  .landing-trust-list{grid-template-columns:1fr}
  .landing-trust{padding:32px 22px}
  .landing-cta{padding:40px 22px}
  .landing-cta h2{font-size:22px}
  .legal-head{margin:16px auto 40px}
  .legal-title{font-size:28px}
  .legal-card{padding:22px 20px}
  .landing-manifesto{margin:-16px auto 64px;padding:28px 18px}
  .landing-manifesto-text{font-size:16px}
}

/* Скрытый noscript-пиксель Яндекс.Метрики — нельзя позиционировать
   через inline style (CSP блокирует), нужен class. */
.metrika-pixel{position:absolute;left:-9999px;width:1px;height:1px}

/* Подсказка приглашённому о доступном бонусе — лёгкая золотая полоска
   над таблицей тарифов. Не «уведомление об инвайте», а «факт о доступной
   выгоде». Используется на /cabinet/billing. */
.referral-bonus-hint{
  display:flex;align-items:flex-start;gap:10px;
  padding:12px 14px;
  border:1px solid var(--border);
  background:rgba(212,175,55,.06);
  border-radius:var(--radius-sm);
  font-size:13.5px;line-height:1.5;color:var(--text);
}
.referral-bonus-icon{
  color:var(--gold);font-size:16px;line-height:1;
  flex-shrink:0;padding-top:2px;
}

/* ===== Utilities ================================================ */
/* Compact set used to retire inline-style attributes (см. ревью
   2026-05-18 — CSP без 'unsafe-inline' блокировал бы дизайн). */
.u-mt-0{margin-top:0}
.u-mt-4{margin-top:4px}
.u-mt-6{margin-top:6px}
.u-mt-8{margin-top:8px}
.u-mt-10{margin-top:10px}
.u-mt-14{margin-top:14px}
.u-mt-18{margin-top:18px}
.u-mt-22{margin-top:22px}
.u-mb-0{margin-bottom:0}
.u-mb-6{margin-bottom:6px}
.u-mb-10{margin-bottom:10px}
.u-mb-14{margin-bottom:14px}
.u-flex{display:flex}
.u-flex-col{display:flex;flex-direction:column}
.u-row{display:flex;flex-direction:row;align-items:center}
.u-row-wrap{display:flex;flex-direction:row;flex-wrap:wrap}
.u-gap-4{gap:4px}
.u-gap-8{gap:8px}
.u-gap-10{gap:10px}
.u-gap-14{gap:14px}
.u-gap-16{gap:16px}
.u-gap-22{gap:22px}
.u-gap-28{gap:28px}
.u-w-90{width:90px}
.u-w-120{width:120px}
.u-w-200{width:200px}
.u-w-260{width:260px}
.u-maxw-60ch{max-width:60ch}
.u-maxw-70ch{max-width:70ch}

/* ===== Allocation page =========================================== */
.alloc-classes{display:flex;flex-direction:column;gap:20px}
.alloc-class{}
.alloc-class-head{
  display:flex;align-items:center;gap:10px;
  margin-bottom:8px;flex-wrap:wrap;
}
.alloc-class-name{
  font-weight:600;font-size:14px;min-width:100px;flex-shrink:0;
}
.alloc-fact-pct{font-size:13px;color:var(--text-dim)}
.alloc-input-group{display:flex;align-items:center;gap:6px;margin-left:auto}
.alloc-input{width:70px;padding:6px 8px;text-align:right}
.alloc-input.alloc-over{border-color:var(--neg);background:rgba(239,68,68,0.06)}

/* Deviation badges */
.alloc-badge{
  font-size:11px;font-weight:600;letter-spacing:.04em;
  padding:2px 7px;border-radius:4px;white-space:nowrap;
}
.alloc-badge-ok  {color:var(--pos);background:var(--pos-bg)}
.alloc-badge-warn{color:var(--warn);background:rgba(232,179,106,.12)}
.alloc-badge-crit{color:var(--neg);background:var(--neg-bg)}

/* Progress bar */
.alloc-bar{
  position:relative;height:6px;
  background:var(--surface-3);border-radius:3px;
  overflow:visible;
}
.alloc-bar-fact{
  height:100%;border-radius:3px;
  background:var(--gold);transition:width .3s ease;
}
.alloc-bar-goal{
  position:absolute;top:-4px;bottom:-4px;width:2px;
  background:var(--text-strong);border-radius:1px;
  transform:translateX(-50%);opacity:.7;
}
.alloc-bar-meta{
  display:flex;gap:8px;flex-wrap:wrap;
  margin-top:5px;font-size:12px;color:var(--text-dim);
}
.alloc-bar-meta .pos{color:var(--pos)}
.alloc-bar-meta .neg{color:var(--neg)}

/* Form footer */
.alloc-form-foot{
  display:flex;align-items:center;
  gap:16px;flex-wrap:wrap;
  margin-top:22px;padding-top:18px;
  border-top:1px solid var(--border-soft);
}
.alloc-sum-line{display:flex;align-items:baseline;gap:6px;flex:1}

/* Recommender instrument lines */
.alloc-rec-line{margin-bottom:3px;font-size:13px}
.alloc-rec-line:last-child{margin-bottom:0}

.btn.is-disabled,.btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}

/* ===== Timeline range toolbar =================================== */
/* Compact pill row above the portfolio-by-day chart. Click a pill to
   filter + auto-group the line (handled by dashboard.js). Active pill
   is gold-on-deep so the choice reads at a glance even at 11px. */
.timeline-ranges{
  display:flex;gap:6px;margin:0 0 14px;flex-wrap:wrap;
}
.range-btn{
  font:600 11px/1 var(--font-sans);letter-spacing:.06em;
  padding:7px 11px;
  background:transparent;color:var(--text-dim);
  border:1px solid var(--border-soft);border-radius:4px;
  cursor:pointer;transition:background .15s ease, color .15s ease, border-color .15s ease;
  font-family:inherit;
}
.range-btn:hover{color:var(--text);border-color:var(--border)}
.range-btn.is-active{
  background:rgba(212,175,55,0.12);
  color:var(--gold);
  border-color:var(--gold);
}

/* ===== Sync overlay ============================================= */
.sync-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.75);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  z-index:900;display:flex;align-items:center;justify-content:center;padding:24px;
  animation:fadeUp .2s ease;
}
.sync-overlay .sync-panel,
.sync-overlay .so-card{
  position:relative;
  background:var(--surface-1);border:1px solid var(--border);
  border-radius:var(--radius);padding:28px 32px;
  min-width:340px;max-width:500px;width:100%;
  box-shadow:0 40px 80px rgba(0,0,0,.6);
}
.sync-overlay h2,
.sync-overlay h4{font-family:var(--font-sans);font-size:14px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-strong);margin:0 0 14px}
.sync-overlay .sync-hint{margin-top:18px;font-size:11px;color:var(--text-faint);line-height:1.5}
.sync-overlay ul{list-style:none;padding:0;margin:14px 0 0}
.sync-overlay li{display:flex;align-items:center;gap:10px;padding:8px 0;color:var(--text-dim);font-size:13px}
.sync-overlay li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--text-faint);flex-shrink:0}
.sync-overlay li.is-running,
.sync-overlay li.running{color:var(--text)}
.sync-overlay li.is-running::before,
.sync-overlay li.running::before{background:var(--gold);box-shadow:0 0 8px var(--gold);animation:bootpulse 1.4s ease-in-out infinite}
.sync-overlay li.is-done,
.sync-overlay li.done{color:var(--pos)}
.sync-overlay li.is-done::before,
.sync-overlay li.done::before{background:var(--pos)}
.sync-overlay li.is-failed,
.sync-overlay li.failed{color:var(--neg)}
.sync-overlay li.is-failed::before,
.sync-overlay li.failed::before{background:var(--neg)}
.sync-overlay li .dot{display:none} /* JS-добавленный текстовый ::before заменяется на нашу точку */

/* Прогресс-бар поверх затемнения. Тонкая золотая полоса — даже если
   проценты «прыгают» (когда worker динамически enqueue'ит подзадачи),
   движение есть всегда. */
.sync-progress{
  height:4px;background:var(--surface-3);border-radius:99px;overflow:hidden;
  margin-top:10px;
}
.sync-progress-bar{
  height:100%;width:0;background:linear-gradient(90deg, var(--gold-deep), var(--gold));
  transition:width .4s ease;
}

/* «✕» в правом верхнем углу: пользователь всегда может закрыть оверлей,
   даже если backend завис. Раньше его не было — отсюда жалоба «весь
   сайт некликабелен». */
.sync-overlay .sync-close{
  position:absolute;top:10px;right:10px;
  width:28px;height:28px;padding:0;
  background:transparent;border:0;border-radius:50%;
  color:var(--text-faint);cursor:pointer;
  font-size:16px;line-height:28px;text-align:center;
  transition:color .12s, background-color .12s;
}
.sync-overlay .sync-close:hover{color:var(--gold);background:rgba(212,175,55,.10)}

@keyframes bootpulse{
  0%,100%{opacity:.35;transform:scale(.85)}
  50%{opacity:1;transform:scale(1)}
}

/* Non-blocking тост в углу. Появляется после auto-close оверлея по
   timeout — пользователь видит, что прогресс не пропал, и при желании
   обновляет страницу. */
.sync-toast{
  position:fixed;bottom:20px;right:20px;z-index:850;
  display:flex;align-items:center;gap:12px;
  max-width:380px;padding:12px 14px;
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:10px;box-shadow:0 16px 40px rgba(0,0,0,.5);
  color:var(--text);font-size:13px;line-height:1.5;
  animation:fadeUp .25s ease;
}
.sync-toast a{color:var(--gold);text-decoration:underline}
.sync-toast-close{
  flex-shrink:0;background:transparent;border:0;
  color:var(--text-faint);cursor:pointer;font-size:14px;
  padding:0 4px;
}
.sync-toast-close:hover{color:var(--gold)}

/* ===== Empty states ============================================= */
.empty-state{padding:48px 24px;text-align:center;color:var(--text-dim)}
.empty-state .nav-icon{width:40px;height:40px;opacity:.4;margin-bottom:14px}
.empty-state h3{
  font-family:var(--font-sans);font-size:16px;font-weight:600;
  text-transform:uppercase;letter-spacing:.04em;color:var(--text);margin:0 0 6px;
}

/* ===== Help tooltips (ⓘ + popover) =============================== */
/* Inline-кнопка рядом с заголовком/термином. Клик открывает popover
   через help-tips.js. Цвет приглушённый, чтобы иконка не перетягивала
   внимание с самого числа/значения. На hover/focus подсвечиваем
   золотом, согласно акценту темы. */
.help-tip{
  /* inline-block, чтобы иконка вела себя как «последняя буква»
     текста и не выпадала на отдельную строку при переносе. Размер
     попадает в высоту строки .kpi-label (11px × 1.45 ≈ 16px), так
     что строки не «дёргаются», когда иконка появляется. */
  display:inline-block;
  width:14px;height:14px;padding:0;margin:0;
  background:transparent;border:0;border-radius:50%;
  color:var(--text-dim);cursor:help;
  font-size:12px;line-height:14px;text-align:center;
  vertical-align:middle;
  transition:color .12s ease, background-color .12s ease;
}
.help-tip:hover,.help-tip:focus-visible{
  color:var(--gold);background:rgba(212,175,55,0.10);outline:0;
}
.help-popover{
  position:absolute;z-index:1000;
  max-width:340px;
  padding:12px 14px;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:8px;
  box-shadow:0 12px 32px rgba(0,0,0,.5);
  color:var(--text);font-size:13px;line-height:1.55;
  white-space:normal;
  /* Анимация: лёгкое всплытие, чтобы не было резкого «вспышь» */
  animation:help-pop .12s ease-out;
}
@keyframes help-pop{
  from{opacity:0;transform:translateY(-3px)}
  to  {opacity:1;transform:translateY(0)}
}

/* ── Rates bar (dashboard page header, inline) ───────────────────────── */
.rates-bar{
  display:flex;align-items:center;flex-wrap:wrap;
  gap:2px 14px;
  margin-top:10px;
  padding-top:8px;
  border-top:1px solid var(--border-soft);
  font-size:12.5px;
  color:var(--text-dim);
}
.rates-bar-item{display:inline-flex;align-items:baseline;gap:4px}
.rates-bar-code{
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-faint);font-weight:600;
}
.rates-sep{
  width:1px;height:12px;background:var(--border);
  align-self:center;margin:0 4px;
}

/* ── Section summary (Всего по разделу) ──────────────────────────────── */
.section-summary{
  display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;
  padding:10px 14px;margin:0 0 18px;
  background:rgba(212,175,55,0.04);
  border:1px solid var(--border-soft);
  border-left:2px solid var(--gold);
  border-radius:var(--radius-sm);
  font-size:13px;
}
.section-summary-label{
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-dim);font-weight:600;
}
.section-summary-value{color:var(--text-strong);font-weight:600}

/* ── Cash table — свободные деньги по счетам ─────────────────────────── */
.cash-table .cash-chip{
  display:inline-flex;align-items:baseline;gap:6px;
  margin-right:14px;white-space:nowrap;
}
.cash-table .cash-chip:last-child{margin-right:0}
.cash-table .cash-chip .mono{color:var(--text-strong)}
.cash-table .cash-total-row{
  border-top:1px solid var(--border-soft);
}
.cash-table .cash-total-row td{
  padding-top:12px;font-weight:600;color:var(--text-strong);
}
.ta-right{text-align:right}