/* vvinvest — общие стили, токены из VV-STYLE-GUIDE.md */

:root {
  --bg: #f8f8f8;
  --card: #fff;
  --panel: #f6f6f6;
  --ink: #000;
  --muted: rgba(0,0,0,0.65);
  --border: #8f8f8f;
  --grid-line: rgba(0,0,0,0.06);
  --green: #2e9e5b;
  --red: #d9534f;
  --blue: #3576d1;
}

html.dark {
  --bg: #111;
  --card: #1b1b1b;
  --panel: #1e1e1e;
  --ink: #fff;
  --muted: rgba(255,255,255,0.5);
  --border: #444;
  --grid-line: rgba(255,255,255,0.08);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Inter', 'Nunito Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--bg);
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 22px 22px;
  color: var(--ink);
  min-height: 100vh;
}

a { color: var(--blue); }

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--card);
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 18px;
  text-decoration: none;
  color: var(--ink);
}

.logo-badge {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #000;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
}

html.dark .logo-badge { background: #fff; color: #000; }

.btn {
  display: inline-block;
  border: 1px solid var(--accent, var(--blue));
  color: var(--accent, var(--blue));
  border-radius: 14px;
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  background: transparent;
  cursor: pointer;
  box-sizing: border-box;
  text-align: center;
  font-family: inherit;
}

.btn:hover { opacity: 0.8; }

.btn-primary { --accent: var(--blue); background: var(--blue); color: #fff; }
.btn-danger { --accent: var(--red); }
.btn-block { display: block; width: 100%; }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
}

.auth-wrap {
  max-width: 380px;
  margin: 60px auto;
  padding: 0 16px;
}

.auth-wrap h1, .auth-wrap .auth-title {
  font-size: 22px;
  text-align: center;
  margin-bottom: 24px;
}

.field {
  margin-bottom: 14px;
}

.field label {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 6px;
}

.field input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  font-size: 15px;
  font-family: inherit;
}

.field input:focus { outline: 2px solid var(--blue); outline-offset: -1px; }

.error-msg {
  color: var(--red);
  font-size: 13px;
  margin-bottom: 12px;
  min-height: 16px;
}

.switch-link {
  text-align: center;
  margin-top: 16px;
  font-size: 14px;
  color: var(--muted);
}

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px 16px 60px;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.kpi-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
}

.kpi-card .kpi-label {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 6px;
}

.kpi-card .kpi-value {
  font-size: 22px;
  font-weight: 800;
}

.up { color: var(--green); }
.down { color: var(--red); }

table.assets-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

table.assets-table th, table.assets-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--grid-line);
  font-size: 14px;
}

table.assets-table th {
  color: var(--muted);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
}

table.assets-table tr:last-child td { border-bottom: none; }

.section-title {
  font-size: 16px;
  font-weight: 800;
  margin: 24px 0 12px;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 12px; /* окно не прилипает к краям и не вылезает за экран на ноутбуке */
  overflow-y: auto;
}

.modal-backdrop.open { display: flex; }

.modal {
  background: var(--card);
  border-radius: 10px;
  padding: 24px;
  width: 100%;
  max-width: 360px;
  max-height: calc(100vh - 24px); /* длинная форма прокручивается внутри окна, кнопки всегда достижимы */
  overflow-y: auto;
  border: 1px solid var(--border);
}
@media (max-width: 560px) {
  /* выше нижней панели приложения (z 1100), кнопки чата (9000) и темы: иначе кнопки формы остаются под ними и до них не дотянуться */
  .modal-backdrop { padding: 0; z-index: 9100; }
  .modal-backdrop .modal { max-height: 100vh; max-height: 100dvh; border-radius: 0; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
}

.modal h2 { margin-top: 0; font-size: 18px; }

.form-row { display: flex; gap: 10px; }
.form-row .field { flex: 1; }

.empty-state {
  text-align: center;
  padding: 40px 16px;
  color: var(--muted);
}

.top-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.back-link{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--muted);text-decoration:none;margin:20px 0 8px;}
.back-link:hover{color:var(--ink);}
.asset-header{margin-bottom:20px;}
.asset-title-row{display:flex;align-items:center;gap:14px;}
.asset-icon-lg{width:48px;height:48px;border-radius:10px;object-fit:cover;}
.asset-icon-lg-fallback{width:48px;height:48px;border-radius:10px;background:#eef1f5;color:#7a8291;display:none;align-items:center;justify-content:center;font-weight:700;font-size:14px;}
.asset-name{font-size:22px;font-weight:700;color:var(--ink);}
.asset-ticker{color:var(--muted);font-size:14px;margin-top:2px;}
.asset-price-row{display:flex;align-items:baseline;gap:12px;margin-top:14px;}
.asset-price{font-size:32px;font-weight:700;color:var(--ink);}
.asset-change{font-size:15px;font-weight:600;}
.asset-change.up{color:#16a34a;}
.asset-change.down{color:#dc2626;}
.chart-card{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:20px;margin-top:20px;}
.tx-empty{color:var(--muted);font-size:14px;padding:20px 0;text-align:center;}

/* ===== Asset detail page — visual polish ===== */
body[data-page="asset"] {
  background-image: none;
  background-color: #f6f7f9;
}
body[data-page="asset"] .container {
  max-width: 960px;
}
body[data-page="asset"] .back-link {
  margin: 24px 0 16px;
  font-weight: 600;
}
body[data-page="asset"] .asset-header {
  background: #ffffff;
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 16px;
  padding: 24px 28px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(15,23,42,0.04);
}
body[data-page="asset"] .asset-icon-lg,
body[data-page="asset"] .asset-icon-lg-fallback {
  width: 52px;
  height: 52px;
  border-radius: 12px;
}
body[data-page="asset"] .asset-name {
  font-size: 20px;
}
body[data-page="asset"] .asset-price {
  font-size: 34px;
}
body[data-page="asset"] .asset-price-row {
  align-items: center;
}
body[data-page="asset"] .asset-change {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
}
body[data-page="asset"] .asset-change.up {
  background: rgba(22,163,74,0.1);
  color: #16a34a;
}
body[data-page="asset"] .asset-change.down {
  background: rgba(220,38,38,0.1);
  color: #dc2626;
}
body[data-page="asset"] .kpi-grid {
  margin-bottom: 20px;
}
body[data-page="asset"] .kpi-card {
  background: #ffffff;
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(15,23,42,0.04);
}
body[data-page="asset"] .chart-card {
  background: #ffffff;
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 16px;
  padding: 24px 28px;
  margin-top: 20px;
  box-shadow: 0 1px 3px rgba(15,23,42,0.04);
  text-align: left;
}
body[data-page="asset"] .section-title {
  margin: 0 0 16px;
  font-size: 16px;
}
body[data-page="asset"] table.assets-table {
  border: 1px solid rgba(15,23,42,0.08);
  box-shadow: none;
}
body[data-page="asset"] .tx-empty {
  padding: 32px 0;
  text-align: center;
}
body[data-page="asset"] #priceChart {
  border-radius: 8px;
  overflow: hidden;
}
@media (max-width: 640px) {
  body[data-page="asset"] .asset-header,
  body[data-page="asset"] .chart-card {
    padding: 18px;
  }
  body[data-page="asset"] .asset-price {
    font-size: 26px;
  }
}

/* ===== Asset detail page — financials / dividends / company ===== */
body[data-page="asset"] .fin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
}
body[data-page="asset"] .fin-item {
  background: #f6f7f9;
  border-radius: 10px;
  padding: 12px 14px;
}
body[data-page="asset"] .fin-label {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}
body[data-page="asset"] .fin-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}
body[data-page="asset"] #divCard .fin-grid {
  margin-bottom: 16px;
}
body[data-page="asset"] .company-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
}

/* ===== Analytics page ===== */
.chip {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 20px;
  background: var(--panel);
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 700;
  margin: 0 6px 6px 0;
}
.mini-bar-row { margin-bottom: 10px; }
.mini-bar-label {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  margin-bottom: 4px;
  color: var(--ink);
}
.mini-bar-track {
  height: 8px;
  background: var(--panel);
  border-radius: 4px;
  overflow: hidden;
}
.mini-bar-fill {
  height: 100%;
  background: var(--blue);
  border-radius: 4px;
}

/* Base (unscoped) fin-grid styles so it also works outside the asset page,
   e.g. on analytics.html. The body[data-page="asset"] rules above still
   override these for the asset page specifically. */
.fin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
}
.fin-item {
  background: var(--panel);
  border-radius: 10px;
  padding: 12px 14px;
}
.fin-label {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}
.fin-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}

/* ===== Ticker icons (Аналитика / Портфель) ===== */
.ticker-icon, .ticker-icon-fallback {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  vertical-align: middle;
  margin-right: 8px;
}
.ticker-icon { object-fit: cover; }
.ticker-icon-fallback {
  background: #eef1f5;
  color: #7a8291;
  font-size: 9px;
  font-weight: 700;
  align-items: center;
  justify-content: center;
  display: none;
}
html.dark .ticker-icon-fallback { background: #2a2a2a; color: #9aa0aa; }
.ticker-icon.ticker-icon-sm, .ticker-icon-fallback.ticker-icon-sm {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  font-size: 8px;
  margin-right: 5px;
}
.ticker-cell { display: inline-flex; align-items: center; white-space: nowrap; }

/* ===== Table numeric-column alignment ===== */
table.assets-table th.num,
table.assets-table td.num {
  text-align: right;
}
table.assets-table td {
  vertical-align: middle;
}

/* ===== Chart boxes (Диверсификация / Валюта) ===== */
.chart-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin: 20px 0;
}
.chart-box {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
}
.chart-box .section-title {
  margin-top: 0;
  text-align: center;
}
.chart-box canvas {
  max-height: 220px;
}

/* ===== Redesign additions (Главная / Диверсификация / Дивиденды) ===== */

.btn-pill { border-radius: 30px !important; }

/* stat-card hover lift for kpi-card */
.kpi-card {
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  transition: transform .15s ease, box-shadow .15s ease;
}
.kpi-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

/* Distribution grid (Главная) */
.distribution-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 20px 0;
}
@media (max-width: 850px) { .distribution-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 550px) { .distribution-grid { grid-template-columns: 1fr; } }

.dist-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.dist-card .section-title { margin-top: 0; text-align: center; }
.dist-card canvas { max-height: 220px; }

/* Single-currency symbol display */
.currency-display { text-align: center; padding: 24px 0 10px; }
.currency-symbol { font-size: 48px; font-weight: 800; color: var(--blue); line-height: 1; }
.currency-code { font-size: 14px; color: var(--muted); margin-top: 10px; font-weight: 700; letter-spacing: .5px; }
.currency-note { font-size: 12px; color: var(--muted); margin-top: 10px; }

/* Progress group (Диверсификация) */
.progress-group { display: flex; flex-direction: column; gap: 14px; }
.progress-item .label { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px; color: var(--ink); }
.progress-item .label .value { font-weight: 700; }
.progress-bar-bg { height: 8px; border-radius: 6px; background: var(--panel); overflow: hidden; }
.progress-bar-fill { height: 100%; border-radius: 6px; transition: width .4s ease; }

/* Metric card with accent border (Диверсификация KPIs) */
.metric-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.metric-card-accent {
  background: var(--panel);
  border-left: 4px solid var(--blue);
  border-radius: 8px;
  padding: 14px 16px;
}
.metric-card-accent .number { font-size: 22px; font-weight: 800; color: var(--ink); }
.metric-card-accent .desc { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* Weight indicator inline bar (positions table) */
.weight-indicator {
  display: inline-block;
  width: 70px;
  height: 6px;
  border-radius: 4px;
  background: var(--panel);
  overflow: hidden;
  vertical-align: middle;
  margin-right: 8px;
}
.weight-indicator .fill { display: block; height: 100%; border-radius: 4px; background: var(--blue); }

/* Event card (upcoming dividends) */
.event-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 8px;
  background: var(--panel);
}
.event-card .ticker { font-weight: 700; margin-left: 4px; }
.event-card .date { font-size: 12px; color: var(--muted); margin-top: 2px; }
.event-card .amount {
  background: rgba(53,118,209,0.12);
  color: var(--blue);
  border-radius: 30px;
  padding: 4px 14px;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
}

/* Dividend forecast gradient card + 2-col grid (Дивиденды) */
.grid-2col { display: grid; grid-template-columns: 1fr 2fr; gap: 20px; }
@media (max-width: 700px) { .grid-2col { grid-template-columns: 1fr; } }

.forecast-card {
  background: linear-gradient(145deg, var(--panel), var(--card));
  border-left: 4px solid var(--blue);
  border-radius: 12px;
  padding: 20px;
}
.forecast-card .forecast-label { font-size: 12px; color: var(--muted); font-weight: 700; text-transform: uppercase; }
.forecast-card .forecast-number { font-size: 26px; font-weight: 800; color: var(--blue); margin-top: 4px; }

.weight-table { width: 100%; font-size: 13px; margin-top: 8px; border-collapse: collapse; }
.weight-table td { padding: 7px 0; border-bottom: 1px solid var(--grid-line); }
.weight-table tr:last-child td { border-bottom: none; }

/* ===== Snowball-style dashboard (Главная v2) ===== */
.sb-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.sb-kpi {
  background: var(--card);
  border: 1px solid #f0f2f5;
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
  transition: transform .15s ease, box-shadow .15s ease;
}
.sb-kpi:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0,0,0,0.07); }
.sb-kpi-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.sb-kpi-ico {
  width: 26px; height: 26px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
}
.sb-kpi-ico.blue { background: rgba(37,99,235,0.12); }
.sb-kpi-ico.green { background: rgba(22,163,74,0.12); }
.sb-kpi-ico.purple { background: rgba(124,58,237,0.12); }
.sb-kpi-ico.teal { background: rgba(8,145,178,0.12); }
.sb-kpi-title { font-size: 13px; color: #6b7a8f; font-weight: 600; }
.sb-kpi-value { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.sb-kpi-value .delta { font-size: 13px; font-weight: 700; margin-left: 6px; }
.sb-kpi-sub { font-size: 13px; color: #8a97a8; margin-top: 4px; }
.sb-kpi-sub .delta { font-weight: 700; }
.delta.up { color: #16a34a; }
.delta.down { color: #dc2626; }
.eye-btn {
  background: none; border: none; cursor: pointer; padding: 2px 6px;
  color: #8a97a8; font-size: 14px; vertical-align: middle;
}
.money-hidden .money { filter: blur(9px); }

.sb-portfolio-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 2fr;
  gap: 16px;
  margin-bottom: 24px;
}
@media (max-width: 800px) { .sb-portfolio-grid { grid-template-columns: 1fr; } }
.sb-panel {
  background: var(--card);
  border: 1px solid #f0f2f5;
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}
.sb-panel-title { font-size: 15px; font-weight: 700; margin-bottom: 12px; }
.sb-donut-wrap { max-width: 260px; margin: 0 auto; }

table.cat-table { width: 100%; border-collapse: collapse; }
table.cat-table th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  color: #8a97a8; font-weight: 700; padding: 8px 10px; border-bottom: 1px solid #eef1f5;
}
table.cat-table th.num, table.cat-table td.num { text-align: right; }
table.cat-table td {
  padding: 12px 10px; font-size: 14px; border-bottom: 1px solid #f3f5f8;
  vertical-align: middle;
}
table.cat-table tr:last-child td { border-bottom: none; }
table.cat-table tbody tr { cursor: pointer; transition: background .1s ease; }
table.cat-table tbody tr:hover { background: #f6f9ff; }
.cat-name-cell { display: flex; align-items: center; gap: 10px; }
.cat-bar { width: 4px; height: 34px; border-radius: 3px; flex-shrink: 0; }
.cat-chip {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 13px;
}
.cat-title { font-weight: 600; color: var(--ink); }
.cat-count { font-size: 12px; color: #8a97a8; }
.cell-main { font-weight: 700; color: var(--ink); }
.cell-sub { font-size: 12px; color: #8a97a8; margin-top: 2px; }

.logo-svg { display: block; }

/* ===== Кольца распределения (Главная, по мотивам demo-preview12) ===== */
.rings-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 24px; }
@media (max-width: 850px) { .rings-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 550px) { .rings-grid { grid-template-columns: 1fr; } }
.ring-card {
  background: var(--card); border: 1px solid #f0f2f5; border-radius: 16px;
  padding: 18px; box-shadow: 0 4px 12px rgba(0,0,0,0.04);
  display: flex; flex-direction: column; align-items: center;
}
.ring-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #6b7a8f; margin-bottom: 10px; }
.ring-wrap { width: 100%; max-width: 190px; position: relative; }
.chart-center-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; pointer-events: none; line-height: 1.2; }
.chart-center-text .big { font-size: 18px; font-weight: 800; color: #0b1a33; }
.chart-center-text .small { font-size: 10px; color: #6b7a8f; font-weight: 600; }
.ring-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 12px; margin-top: 10px; font-size: 11px; color: #1f2a41; }
.ring-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.ring-cur { text-align: center; padding: 8px 0; }
.ring-cur .sym { font-size: 44px; font-weight: 300; color: #0b1a33; line-height: 1.1; }
.ring-cur .code { font-size: 18px; font-weight: 700; color: #0b1a33; }
.ring-cur .note { font-size: 13px; color: #6b7a8f; margin-top: 4px; }
.ring-cur-footer { margin-top: auto; font-size: 12px; color: #6b7a8f; text-align: center; border-top: 1px solid #f0f2f5; padding-top: 10px; width: 100%; }

/* ===== Детальный дизайн по согласованным демо: чистый фон, лёгкие рамки ===== */
body {
  background-color: #f5f7fa;
  background-image: none;
  color: #1a2634;
}
:root {
  --bg: #f5f7fa;
  --panel: #f6f8fa;
  --border: #e9ecf0;
  --muted: #6b7a8f;
}
.header { border-bottom: 1px solid #e9ecf0; }
.card {
  border: 1px solid #f0f2f5;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}
.modal { border-radius: 16px; border: 1px solid #f0f2f5; }
.chart-box, .chart-card {
  background: #ffffff;
  border: 1px solid #f0f2f5;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}
.fin-item, .metric-card-accent, .forecast-card { border-radius: 12px; }
.chip { border: 1px solid #e9ecf0; background: #f6f8fa; }
.field input, .top-actions select, .top-actions input {
  border-color: #e9ecf0 !important;
  background: #fafbfc !important;
}

/* Таблица активов в стиле демо: строки-плашки */
table.assets-table {
  border-collapse: separate;
  border-spacing: 0 8px;
  background: transparent;
  border: none;
  overflow: visible;
}
table.assets-table th {
  border-bottom: 1px solid #e9ecf0;
  color: #5a6d86;
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 8px 12px;
}
table.assets-table td {
  background: #fafbfc;
  border-bottom: none;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  transition: background .1s ease;
}
table.assets-table td:first-child { border-radius: 10px 0 0 10px; }
table.assets-table td:last-child { border-radius: 0 10px 10px 0; }
table.assets-table tbody tr:hover td { background: #f0f4fe; }
.tx-empty { background: transparent !important; }

/* Кнопки помягче */
.btn { border-radius: 12px; }
.btn-pill { border-radius: 30px !important; }

/* ===== Точное соответствие demo-preview12 ===== */
.container { max-width: 1200px; }
.nav-link { color: #4a5a72 !important; font-weight: 500; }
.nav-item.active .nav-link, .nav-link:hover { color: #0b1a33 !important; }

/* KPI-карточки как в демо: цифра сверху, подпись капсом снизу, без иконок */
.sb-kpi { display: flex; flex-direction: column; padding: 1.2rem 1.2rem 1rem; }
.sb-kpi-head { order: 2; margin-bottom: 0; margin-top: 0.2rem; }
.sb-kpi-value { order: 1; font-size: 1.7rem; letter-spacing: -0.02em; color: #0b1a33; }
.sb-kpi-sub { order: 3; margin-top: 0.2rem; font-size: 0.8rem; }
.sb-kpi-ico { display: none; }
.eye-btn { display: none; }
.sb-kpi-title {
  font-size: 0.75rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.03em; color: #6b7a8f;
}

/* Кнопка добавления — тёмно-синяя пилюля как в демо */
#addAssetBtn {
  background: #0b1a33 !important;
  border-color: #0b1a33 !important;
  color: #fff !important;
  font-weight: 500;
  font-size: 0.85rem;
  padding: 0.45rem 1.2rem;
}
#addAssetBtn:hover { background: #1e3a5f !important; border-color: #1e3a5f !important; opacity: 1; }

/* Крестик удаления как в демо */
.btn-delete {
  background: transparent; border: none; color: #6b7a8f; cursor: pointer;
  font-size: 0.9rem; padding: 0.2rem 0.5rem; border-radius: 6px;
  transition: background .1s ease, color .1s ease; font-family: inherit;
}
.btn-delete:hover { background: #fef2f2; color: #dc2626; }

.section-title { font-size: 1.2rem; font-weight: 600; color: #0b1a33; }

/* ===== KPI-карточки на Аналитике/Портфеле в стиле демо (цифра сверху) ===== */
.kpi-card { display: flex; flex-direction: column; padding: 1.2rem 1.2rem 1rem; }
.kpi-card .kpi-label {
  order: 2; margin-bottom: 0; margin-top: 0.2rem;
  font-size: 0.75rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.03em; color: #6b7a8f;
}
.kpi-card .kpi-value { order: 1; font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; }
.kpi-card .kpi-value:not(.up):not(.down) { color: #0b1a33; }

.card h2 { font-size: 1.2rem; font-weight: 600; color: #0b1a33; }
.page-title { font-size: 1.5rem; font-weight: 700; color: #0b1a33; }

/* ===== Метрики-шкалы, вердикты, баннер роста, рейтинг дивидендов ===== */
.metrics-scale-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.metric-scale-card {
  background: var(--card); border: 1px solid #f0f2f5; border-radius: 16px;
  padding: 18px 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}
.msc-title { font-weight: 700; font-size: 15px; color: #0b1a33; }
.msc-desc { font-size: 12.5px; color: #8a97a8; margin: 4px 0 10px; }
.msc-value { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; color: #0b1a33; margin-bottom: 8px; }
.verdict { display: inline-block; border-radius: 30px; padding: 3px 12px; font-size: 12px; font-weight: 700; margin-left: 10px; vertical-align: middle; }
.verdict.good { background: rgba(22,163,74,.1); color: #16a34a; }
.verdict.warn { background: rgba(217,119,6,.12); color: #d97706; }
.verdict.bad { background: rgba(220,38,38,.08); color: #dc2626; }
.scale-wrap { position: relative; margin: 30px 8px 34px; }
.scale-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, #16a34a, #d97706, #dc2626); }
.scale-track.rev { background: linear-gradient(90deg, #dc2626, #d97706, #16a34a); }
.scale-marker { position: absolute; top: 50%; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%,-50%); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.scale-chip { position: absolute; transform: translateX(-50%); font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
.scale-chip.port { top: -24px; background: #0b1a33; color: #fff; }
.scale-chip.mkt { top: 12px; background: #eef2f7; color: #3b4a5e; }
.growth-banner { border-radius: 12px; padding: 12px 16px; font-size: 14px; margin-bottom: 14px; font-weight: 600; display: none; }
.growth-banner.good { background: rgba(22,163,74,.08); color: #166534; }
.growth-banner.bad { background: rgba(220,38,38,.07); color: #991b1b; }
.score-num { background: #0b1a33; color: #fff; border-radius: 6px; padding: 2px 8px; font-weight: 800; font-size: 12px; margin-right: 8px; display: inline-block; }

.cchip{border:1px solid #e2e6ea;background:#fff;border-radius:20px;padding:6px 13px;font-size:13px;font-family:inherit;cursor:pointer;color:#41506b;}
.cchip:hover{border-color:#c7d9fb;}
.cchip-on{background:#2563eb;border-color:#2563eb;color:#fff;font-weight:600;}

.ccard{transition:box-shadow .15s,transform .15s;}
.ccard:hover{box-shadow:0 6px 20px rgba(11,26,51,0.10);transform:translateY(-2px);}

/* === Обновление визуала по демо-карточке: мягкие карточки, плитки, пилюли, врезки === */
.sb-panel, .sb-kpi {
  border-radius: 24px;
  border-color: #eef1f6;
  box-shadow: 0 18px 36px -18px rgba(0,20,40,.16), 0 6px 16px -10px rgba(0,0,0,.05);
}
.sb-panel { padding: 22px 24px 24px; }
.sb-kpi { padding: 18px 20px; }
.sb-kpi:hover {
  transform: translateY(-3px);
  box-shadow: 0 26px 46px -20px rgba(0,20,40,.22), 0 8px 20px -10px rgba(0,0,0,.07);
}

/* пилюля с процентом */
.vv-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; font-size: 13px; line-height: 1;
  padding: 6px 12px; border-radius: 40px; white-space: nowrap;
}
.vv-pill.up { background: rgba(34,197,94,.10); color: #0f973d; }
.vv-pill.down { background: rgba(239,68,68,.10); color: #dc2626; }
.vv-pill .rub { font-weight: 500; opacity: .75; }

/* врезка-пояснение с левой полоской */
.vv-note {
  font-size: 14px; color: #4b5a72; background: #f0f5fe;
  padding: 12px 18px; border-radius: 16px; line-height: 1.45;
  border-left: 3px solid #3468d9;
}
.vv-note b, .vv-note strong { color: #0b1a2f; font-weight: 600; }
.vv-note a { color: #1d4ed8; font-weight: 700; }
.vv-note.warn { background: #fff7ed; border-left-color: #f59e0b; }

/* строка-плитка вместо плотного списка */
.vv-tile {
  display: flex; align-items: center; gap: 10px;
  background: #f9faff; border: 1px solid transparent; border-radius: 18px;
  padding: 12px 16px; margin-bottom: 8px;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.vv-tile:hover { background: #fff; border-color: #e9edf4; box-shadow: 0 6px 14px rgba(0,20,40,.05); }


/* === Столбики будущих выплат: дорожка + сегменты по типам выплат === */
.vv-bars {
  display: flex; align-items: flex-end; gap: 10px;
  margin: 18px 0 2px; overflow-x: auto; padding: 4px 0 6px;
}
.vv-bar-col {
  display: flex; flex-direction: column; align-items: center;
  flex: 1 1 0; min-width: 46px; cursor: default;
}
.vv-bar-sum {
  font-size: 12px; font-weight: 700; color: #0b1a33;
  margin-bottom: 6px; white-space: nowrap; letter-spacing: -0.01em;
}
.vv-bar-track {
  width: 34px; height: 150px; background: #eef2f8;
  border-radius: 18px 18px 8px 8px; overflow: hidden;
  display: flex; flex-direction: column-reverse;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.03);
}
.vv-bar-fill {
  width: 100%; display: flex; flex-direction: column-reverse;
  border-radius: 18px 18px 4px 4px; overflow: hidden; transition: height .25s ease;
}
.vv-bar-seg { width: 100%; }
.seg-coupon { background: linear-gradient(180deg, #34d399, #10b981); }
.seg-div    { background: linear-gradient(180deg, #3b82f6, #2563eb); }
.seg-divf   { background: linear-gradient(180deg, #bfdbfe, #93c5fd); }
.seg-nom    { background: linear-gradient(180deg, #fbbf24, #f59e0b); }
.vv-bar-col:hover .vv-bar-track { box-shadow: inset 0 1px 3px rgba(0,0,0,.03), 0 4px 12px rgba(0,20,40,.10); }
.vv-bar-month { font-size: 12px; font-weight: 600; color: #6b7a8f; margin-top: 8px; }
.vv-bar-legend {
  display: flex; flex-wrap: wrap; gap: 12px 22px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid #eef2f8;
  font-size: 13px; font-weight: 500; color: #1f2a41;
}
.vv-bar-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 6px; margin-right: 8px; vertical-align: -1px; }
@media (max-width: 760px) {
  .vv-bars { gap: 6px; }
  .vv-bar-col { min-width: 38px; }
  .vv-bar-track { width: 26px; height: 120px; }
  .vv-bar-sum { font-size: 11px; }
}


/* === Поиск, меню строки и пагинация в «Моих активах» === */
.vv-search { position: relative; flex: 1; max-width: 420px; margin: 0 16px; }
.vv-search svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.vv-search input {
  width: 100%; padding: 11px 16px 11px 42px;
  border: 1px solid transparent; border-radius: 40px;
  background: #f0f3f9; color: var(--ink);
  font-family: inherit; font-size: 14px; outline: none;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.vv-search input::placeholder { color: #8a97a8; }
.vv-search input:focus {
  background: #fff; border-color: #2563eb;
  box-shadow: 0 0 0 4px rgba(37,99,235,.10);
}
.vv-icon-btn {
  width: 32px; height: 32px; border-radius: 10px; border: 1px solid transparent;
  background: transparent; color: #6b7a8f; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.vv-icon-btn:hover { background: #eef2f8; border-color: #e2e8f2; color: #2563eb; }
.vv-menu {
  position: absolute; z-index: 60; min-width: 210px;
  background: #fff; border: 1px solid #e6ebf3; border-radius: 16px;
  box-shadow: 0 18px 36px -12px rgba(0,20,40,.22);
  padding: 6px; font-size: 14px;
}
.vv-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; border: 0; background: transparent; border-radius: 10px;
  font: inherit; color: #1f2a41; text-align: left; cursor: pointer;
}
.vv-menu button:hover { background: #f2f6fd; }
.vv-menu button.danger { color: #dc2626; }
.vv-menu button.danger:hover { background: #fef2f2; }
.vv-menu hr { border: 0; border-top: 1px solid #eef2f8; margin: 5px 8px; }
.vv-pager {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  margin-top: 14px; font-size: 13px; color: #6b7a8f;
}
.vv-pager button {
  min-width: 32px; height: 32px; padding: 0 10px; border-radius: 10px;
  border: 1px solid #e2e8f2; background: #fff; color: #1f2a41;
  font: inherit; cursor: pointer; transition: .15s;
}
.vv-pager button:hover:not(:disabled) { background: #f2f6fd; border-color: #2563eb; color: #2563eb; }
.vv-pager button:disabled { opacity: .4; cursor: default; }


/* === Столбики выплат: объём, свечение, живость (из демо-3, радиус наш) === */
.vv-bar-col { transition: transform .2s ease; }
.vv-bar-col:hover { transform: translateY(-4px); }
.vv-bar-sum {
  font-size: 13px; background: #f4f7fd; padding: 2px 9px; border-radius: 12px;
}
.vv-bar-track {
  width: 38px; height: 156px; background: #eaf0f8;
  border-radius: 20px 20px 10px 10px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.03);
}
.vv-bar-fill {
  border-radius: 18px 18px 4px 4px;
  box-shadow: 0 6px 16px rgba(11,26,51,.16);
  transition: height .45s cubic-bezier(.22,1,.36,1);
}
.vv-bar-month {
  background: #f4f7fd; padding: 3px 12px; border-radius: 40px;
  color: #1e293b; margin-top: 10px; font-weight: 600;
}
.vv-bar-legend i { width: 13px; height: 13px; box-shadow: 0 2px 6px rgba(0,0,0,.06); }
@media (max-width: 760px) {
  .vv-bar-track { width: 28px; height: 118px; }
  .vv-bar-sum { font-size: 11px; padding: 1px 7px; }
  .vv-bar-month { padding: 2px 9px; }
}


/* === Переключатель операции в модалке сделки === */
.vv-seg { display: inline-flex; background: #f0f3f9; border-radius: 40px; padding: 4px; gap: 2px; }
.vv-seg button {
  border: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 600;
  color: #6b7a8f; padding: 8px 20px; border-radius: 40px; cursor: pointer; transition: .15s;
}
.vv-seg button:hover { color: #1f2a41; }
.vv-seg button.active { background: #fff; color: #0b1a33; box-shadow: 0 2px 6px rgba(11,26,51,.10); }
.vv-seg button.active[data-op="sell"] { color: #dc2626; }


/* ===== Блок «Моя цель»: кольцо, шкала, сценарии ===== */
.g-ringbox { display:flex; align-items:center; gap:26px; background:#f9fcff; border:1px solid #edf2f9; border-radius:24px; padding:20px 24px; margin:14px 0 18px; flex-wrap:wrap; }
.g-ring { position:relative; width:104px; height:104px; flex-shrink:0; }
.g-ring svg { transform:rotate(-90deg); width:104px; height:104px; }
.g-ring .bg { fill:none; stroke:#e6edf6; stroke-width:9; }
.g-ring .fg { fill:none; stroke:#2563eb; stroke-width:9; stroke-linecap:round; stroke-dasharray:276.46; stroke-dashoffset:276.46; transition:stroke-dashoffset .6s ease; }
.g-ring .pct { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:28px; font-weight:800; color:#0b1a33; letter-spacing:-.02em; }
.g-ring .pct small { font-size:14px; font-weight:500; color:#8a97a8; }
.g-info { flex:1; min-width:210px; }
.g-info .head { font-size:18px; font-weight:700; color:#0b1a33; margin-bottom:6px; }
.g-info .line { font-size:14px; color:#5b6a7d; font-weight:500; margin-bottom:4px; }
.g-info .line b { color:#0b1a33; font-weight:700; }
.g-info .soon { font-size:13px; color:#8a97a8; }
.g-scale { margin:18px 0 16px; }
.g-scale-head { display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:6px 12px; margin-bottom:12px; }
.g-scale-head .t { font-size:15px; font-weight:700; color:#0b1a33; }
.g-scale-head .h { font-size:12px; color:#8a97a8; font-weight:500; }
.g-row { display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.g-row:last-child { margin-bottom:0; }
.g-row .nm { width:136px; font-size:12px; font-weight:600; color:#5b6a7d; flex-shrink:0; text-align:right; }
.g-row .tr { flex:1; height:28px; background:#eef4fa; border-radius:40px; overflow:hidden; }
.g-row .fl { height:100%; border-radius:40px; min-width:5px; transition:width .5s ease; }
.g-row .fl.now { background:linear-gradient(90deg,#2563eb,#60a5fa); }
.g-row .fl.fc { background:linear-gradient(90deg,#0ea5e9,#7dd3fc); }
.g-row .fl.safe { background:linear-gradient(90deg,#94a3b8,#cbd5e1); }
.g-row .fl.goal { background:linear-gradient(90deg,#16a34a,#4ade80); }
.g-row .vl { font-size:12px; font-weight:600; color:#0b1a33; width:120px; flex-shrink:0; }
.g-row .vl small { font-weight:400; color:#8a97a8; font-size:11px; }
.g-sc { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:16px 0 14px; }
.g-sc-card { background:#f9fcff; border:1px solid #edf2f9; border-radius:20px; padding:18px 20px; }
.g-sc-card .lb { font-size:12px; font-weight:600; color:#8a97a8; }
.g-sc-card .dt { font-size:24px; font-weight:800; color:#0b1a33; margin-top:4px; letter-spacing:-.02em; }
.g-sc-card .dt small { font-size:13px; font-weight:500; color:#8a97a8; margin-left:6px; }
.g-sc-card .bd { display:inline-block; margin-top:8px; font-size:11px; font-weight:600; color:#2563eb; background:#eef4ff; padding:4px 12px; border-radius:40px; }
.g-sc-card .bd.gray { color:#5b6a7d; background:#eef2f7; }
@media (max-width:640px) { .g-sc { grid-template-columns:1fr; } .g-row .nm { width:92px; font-size:11px; } .g-row .vl { width:94px; font-size:11px; } .g-ring, .g-ring svg { width:84px; height:84px; } }
.g-more { margin-top:16px; border-top:1px solid #eef2f7; padding-top:12px; }
.g-more > summary { cursor:pointer; font-size:13px; font-weight:600; color:#2563eb; list-style:none; padding:6px 0; }
.g-more > summary::-webkit-details-marker { display:none; }
.g-more > summary::before { content:'▸ '; }
.g-more[open] > summary::before { content:'▾ '; }
.g-progbox { background:#f9fcff; border:1px solid #edf2f9; border-radius:24px; padding:18px 24px; margin:14px 0 12px; }
.g-prog-top { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.g-prog-top .lbl { font-size:14px; font-weight:700; color:#0b1a33; }
.g-prog-top .pct { font-size:30px; font-weight:800; color:#2563eb; letter-spacing:-.02em; }
.g-bar { height:14px; background:#e6edf6; border-radius:40px; overflow:hidden; margin:8px 0 14px; }
.g-bar-fill { height:100%; border-radius:40px; background:linear-gradient(90deg,#2563eb,#60a5fa); width:0%; transition:width .5s ease; min-width:4px; }
.g-play { display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:#fff; border:1px solid #e6edf6; border-radius:18px; padding:12px 18px; margin-bottom:14px; }
.g-play label { font-size:14px; font-weight:600; color:#0b1a33; }
.g-play-input { display:inline-flex; align-items:center; gap:6px; border:1px solid #dbe3ee; border-radius:12px; padding:6px 12px; background:#f9fbff; }
.g-play-input input { width:104px; border:0; background:transparent; font-family:inherit; font-size:15px; font-weight:700; color:#0b1a33; outline:none; text-align:right; }
.g-play-input span { font-size:14px; color:#8a97a8; font-weight:600; }
.g-play button { border:0; background:transparent; color:#2563eb; font:inherit; font-size:13px; font-weight:600; cursor:pointer; padding:4px 6px; }
.g-play button:hover { text-decoration:underline; }
.g-play button[hidden] { display:none; }
.g-play .g-preset { border:1px solid #dbe3ee; background:#fff; color:#0b1a33; border-radius:999px; padding:5px 12px; font-size:13px; font-weight:600; }
.g-play .g-preset:hover { text-decoration:none; border-color:#2563eb; color:#2563eb; }
.g-play .g-preset.on { background:#2563eb; border-color:#2563eb; color:#fff; }
#goalPlayHint { font-size:13px; color:#8a97a8; font-weight:500; }
#goalPlayHint b { color:#0b1a33; font-weight:700; }
.g-bar { position:relative; }
.g-tick { position:absolute; top:0; width:2px; height:100%; background:rgba(11,26,51,.18); }
.g-tick.done { background:rgba(255,255,255,.85); }
.g-ticklabels { position:relative; height:16px; margin:-8px 0 14px; }
.g-ticklabels span { position:absolute; transform:translateX(-50%); font-size:11px; color:#8a97a8; white-space:nowrap; }
.g-ticklabels span b { color:#5b6a7d; font-weight:700; }
.g-ticklabels span.done b, .g-ticklabels span.done { color:#16a34a; }
.g-ticklabels { height:32px; margin:-6px 0 14px; }
.g-ticklabels span { text-align:center; line-height:1.35; }
.g-ticklabels span i { display:block; font-style:normal; color:#8a97a8; }
.g-ticklabels span.done i { color:#16a34a; }
@media (max-width:560px) {
  .g-ticklabels span { font-size:10px; }
  .g-ticklabels span:nth-child(1), .g-ticklabels span:nth-child(3) { display:none; }
}
/* ===== Справка «Как считаем» ===== */
.calc-modal { max-width:720px; width:100%; max-height:86vh; display:flex; flex-direction:column; padding:0; }
.calc-head { display:flex; align-items:center; justify-content:space-between; padding:20px 26px 14px; border-bottom:1px solid #eef2f7; }
.calc-title { font-size:20px; font-weight:800; color:#0b1a33; letter-spacing:-.01em; }
.calc-head button { border:0; background:transparent; font-size:26px; line-height:1; color:#8a97a8; cursor:pointer; padding:0 4px; }
.calc-head button:hover { color:#0b1a33; }
.calc-body { overflow-y:auto; padding:18px 26px 8px; }
.calc-body h3 { font-size:15px; font-weight:700; color:#0b1a33; margin:22px 0 8px; }
.calc-body h3:first-of-type { margin-top:6px; }
.calc-body p { font-size:14px; line-height:1.6; color:#3f4d60; margin:0 0 10px; }
.calc-body b { color:#0b1a33; font-weight:700; }
.calc-body ol, .calc-body ul { margin:0 0 12px; padding-left:22px; }
.calc-body li { font-size:14px; line-height:1.6; color:#3f4d60; margin-bottom:6px; }
.calc-formula { background:#f6f9ff; border:1px solid #e4ecf9; border-radius:12px; padding:12px 14px; font-size:13px; color:#1d4ed8; font-weight:600; line-height:1.5; }
.calc-live { background:#f9fcff; border:1px solid #edf2f9; border-radius:16px; padding:14px 16px; margin-bottom:18px; font-size:13px; color:#3f4d60; line-height:1.6; }
.calc-live b { color:#0b1a33; }
.calc-live .t { font-size:12px; font-weight:700; color:#8a97a8; text-transform:uppercase; letter-spacing:.03em; margin-bottom:6px; }
.calc-note { background:#fff8ed; border:1px solid #fbe3c0; border-radius:12px; padding:12px 14px; font-size:13px; color:#8a6320; line-height:1.5; margin:18px 0 4px; }
.calc-foot { padding:14px 26px 20px; border-top:1px solid #eef2f7; text-align:right; }
#goalHow { border:0; background:transparent; color:#2563eb; font:inherit; font-size:13px; font-weight:600; cursor:pointer; padding:6px 0; }
#goalHow:hover { text-decoration:underline; }
@media (max-width:640px) { .calc-modal { max-height:92vh; } .calc-head, .calc-body, .calc-foot { padding-left:16px; padding-right:16px; } }

.btn:disabled, .btn-primary:disabled { opacity: .45; cursor: not-allowed; }


/* Ручные записи в списке операций: метка «вручную» рядом с типом операции */
.op-manual { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 10px; font-size: 11px; font-weight: 600; color: #8a97a8; background: #f0f3f9; vertical-align: middle; white-space: nowrap; cursor: help; }

/* Переключатель операций в окне сделки: четыре пункта не влезают в узкое окно — переносим на вторую строку */
.vv-seg { flex-wrap: wrap; max-width: 100%; }

/* polish-1 */
.cchip{border:1px solid transparent;background:#f1f4f8;border-radius:10px;padding:6px 12px;font-size:13px;font-weight:600;color:#41506b}
.cchip:hover{background:#e6ebf2;border-color:transparent}
.cchip-on{background:#0b1a33;border-color:#0b1a33;color:#fff}
.header a[href="profile.html"] span:last-child{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;vertical-align:middle}
.vv-net{width:20px;height:20px;border-radius:6px;background:#e9edf3;color:#41506b;display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;flex:none;line-height:1}
.pf-badge svg,.u-badge svg{width:14px;height:14px}
.vv-net{padding:0 !important;box-sizing:border-box;width:22px;height:22px}
.pf-in{width:100%;padding:10px 12px;border:1px solid #e2e6ea;border-radius:10px;font-family:inherit;font-size:14px;box-sizing:border-box}
.pf-in:focus{outline:none;border-color:#2563eb}