/* Терминал Т-Инвестиции — тёмная тема (v3: глубже фон, стеклянные панели,
   градиентные акценты, новый комбобокс и полоса интервалов) */
:root {
  --bg: #0a0d12;
  --bg-2: #0d1117;
  --panel: rgba(21, 27, 36, 0.86);
  --panel-solid: #151b24;
  --panel-2: #1a222d;
  --panel-3: #212b38;
  --border: #26303d;
  --border-soft: #1f2833;
  --text: #e8edf3;
  --muted: #93a1b0;
  --muted-2: #6b7987;
  --accent: #4da3ff;
  --accent-dim: #2b6cb0;
  --accent-glow: rgba(77, 163, 255, 0.16);
  --green: #2ea043;
  --green-soft: rgba(46, 160, 67, 0.14);
  --red: #f85149;
  --red-soft: rgba(248, 81, 73, 0.14);
  --yellow: #f5a623;
  --yellow-soft: rgba(245, 166, 35, 0.12);
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 10px 32px rgba(0, 0, 0, 0.42);
  --shadow-soft: 0 4px 18px rgba(0, 0, 0, 0.28);
  --mono: "SF Mono", "Cascadia Code", Consolas, "JetBrains Mono", Menlo, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background:
    radial-gradient(1100px 600px at 78% -12%, rgba(77, 163, 255, 0.075), transparent 55%),
    radial-gradient(900px 500px at -10% 108%, rgba(46, 160, 67, 0.05), transparent 50%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font: 14px/1.55 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  letter-spacing: .1px;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #2c3846; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #3a4859; }
::-webkit-scrollbar-track { background: transparent; }
::selection { background: rgba(77, 163, 255, 0.28); }

/* ---------- Загрузочный экран ---------- */
.boot-splash { display: flex; height: 100vh; align-items: center; justify-content: center; }
.boot-logo { text-align: center; }
.boot-title { margin-top: 14px; font-size: 17px; font-weight: 600; }
.boot-sub { color: var(--muted); margin-top: 4px; }

/* ---------- Экраны входа ---------- */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: radial-gradient(1200px 700px at 70% -10%, rgba(77, 163, 255, 0.09), transparent 60%), var(--bg); }
.auth-card { width: 400px; max-width: 100%; background: linear-gradient(180deg, rgba(26, 34, 45, .92), rgba(21, 27, 36, .94));
  border: 1px solid var(--border); border-radius: 18px; padding: 34px 34px 28px;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.035); }
.auth-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.auth-logo h1 { font-size: 18px; font-weight: 700; }
.auth-sub { color: var(--muted); margin-bottom: 22px; font-size: 13px; }
.auth-card .field { margin-bottom: 14px; }
.auth-actions { margin-top: 20px; }
.auth-error { background: var(--red-soft); border: 1px solid rgba(248, 81, 73, 0.35); color: #ffb4ae;
  border-radius: var(--radius-sm); padding: 10px 12px; font-size: 13px; margin-bottom: 14px; display: none; }
.auth-error.show { display: block; }
.auth-step { display: none; }
.auth-step.active { display: block; }
.auth-note { font-size: 12px; color: var(--muted); margin-top: 16px; line-height: 1.6; }
.totp-qr { text-align: center; margin: 10px 0; }
.totp-qr img { width: 180px; height: 180px; border-radius: 8px; background: #fff; padding: 6px; }
.secret-code { font-family: var(--mono); font-size: 13px; background: var(--panel-2); border: 1px dashed var(--border);
  border-radius: 6px; padding: 8px; text-align: center; letter-spacing: 1.5px; margin: 8px 0; user-select: all; }

/* ---------- Формы ---------- */
.field label { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 6px; font-weight: 500; }
.input, select.input, textarea.input {
  width: 100%; background: rgba(13, 17, 23, 0.6); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 9px 12px; font-size: 14px; outline: none; transition: border-color .15s, box-shadow .15s, background .15s;
}
.input:hover { border-color: #313d4d; }
.input:focus { border-color: var(--accent-dim); box-shadow: 0 0 0 3px var(--accent-glow); background: rgba(13, 17, 23, 0.85); }
.input::placeholder { color: var(--muted-2); }
textarea.input { resize: vertical; min-height: 70px; }
.hint { font-size: 12px; color: var(--muted-2); margin-top: 5px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; }
.row > * { flex: 1; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 9px 15px; font-size: 13.5px; font-weight: 600;
  cursor: pointer; transition: background .13s, border-color .13s, transform .06s, box-shadow .13s; user-select: none; }
.btn:hover { background: var(--panel-3); border-color: #33404f; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: linear-gradient(135deg, #3b8fe8, #2b6cb0); border-color: #2f74c4; color: #fff;
  box-shadow: 0 3px 14px rgba(59, 143, 232, 0.25); }
.btn.primary:hover { background: linear-gradient(135deg, #4d9bf2, #3483d6); box-shadow: 0 4px 18px rgba(59, 143, 232, 0.36); }
.btn.danger { background: transparent; border-color: rgba(248, 81, 73, 0.4); color: #ff7b72; }
.btn.danger:hover { background: var(--red-soft); }
.btn.ghost { background: transparent; }
.btn.sm { padding: 5px 10px; font-size: 12.5px; }
.btn.wide { width: 100%; }
.btn-row { display: flex; gap: 10px; margin-top: 14px; align-items: center; flex-wrap: wrap; }

.toggle { position: relative; display: inline-block; width: 38px; height: 22px; flex: none; }
.toggle input { display: none; }
.toggle .track { position: absolute; inset: 0; background: #2c3846; border-radius: 20px; cursor: pointer; transition: .18s; }
.toggle .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  background: #aab7c5; border-radius: 50%; transition: .18s; }
.toggle input:checked + .track { background: var(--green); }
.toggle input:checked + .track::after { left: 19px; background: #fff; }

/* ---------- Каркас приложения ---------- */
.layout { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.sidebar { background: linear-gradient(180deg, rgba(23, 30, 40, .96), rgba(16, 21, 28, .98));
  border-right: 1px solid var(--border); padding: 18px 14px;
  display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100vh; }
.sidebar .brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px 16px; }
.sidebar .brand svg { filter: drop-shadow(0 2px 8px rgba(77, 163, 255, .35)); }
.sidebar .brand b { font-size: 14.5px; }
.sidebar .brand small { display: block; color: var(--muted-2); font-size: 11px; font-weight: 500; }
.nav-item { display: flex; align-items: center; gap: 11px; padding: 9.5px 12px; border-radius: var(--radius-sm);
  color: var(--muted); font-weight: 500; cursor: pointer; transition: .13s; border: 1px solid transparent; position: relative; }
.nav-item::before { content: ""; position: absolute; left: -14px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 0; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, #4da3ff, #2b6cb0); transition: height .15s; }
.nav-item:hover { background: rgba(255, 255, 255, 0.04); color: var(--text); }
.nav-item.active { background: linear-gradient(90deg, rgba(77, 163, 255, 0.13), rgba(77, 163, 255, 0.04));
  color: #7fbcff; border-color: rgba(77, 163, 255, 0.22); }
.nav-item.active::before { height: 60%; }
.nav-item svg { flex: none; }
.nav-spacer { flex: 1; }
.sidebar .me { border-top: 1px solid var(--border-soft); padding-top: 12px; margin-top: 8px; }
.me-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #2b6cb0, #1d3f66);
  display: flex; align-items: center; justify-content: center; font-weight: 700; color: #a5cdff; font-size: 13px; flex: none; }
.me-name { font-size: 13px; font-weight: 600; }
.me-role { font-size: 11px; color: var(--muted-2); }

.main { min-width: 0; display: flex; flex-direction: column; }
.page { padding: 20px 24px 40px; max-width: 1560px; width: 100%; margin: 0 auto; }
.page-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.page-title { font-size: 20px; font-weight: 700; display: flex; align-items: center; gap: 10px; letter-spacing: .2px; }
.page-desc { color: var(--muted); font-size: 13px; margin-top: 3px; }

.card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px;
  box-shadow: var(--shadow-soft); backdrop-filter: blur(6px); }
.card + .card { margin-top: 16px; }
.card-title { font-size: 14.5px; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 9px; }
.card-title .right { margin-left: auto; font-weight: 400; font-size: 12.5px; color: var(--muted); display: flex; gap: 8px; align-items: center; }

/* ---------- Тосты ---------- */
.toasts { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 10px; z-index: 200; }
.toast { background: rgba(26, 34, 45, .96); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 10px; padding: 12px 16px; min-width: 260px; max-width: 380px; box-shadow: var(--shadow);
  font-size: 13.5px; animation: slide-in .25s ease; backdrop-filter: blur(8px); }
.toast.ok { border-left-color: var(--green); }
.toast.err { border-left-color: var(--red); }
@keyframes slide-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }

/* ---------- Спиннер ---------- */
.spinner { width: 17px; height: 17px; border: 2px solid #ffffff33; border-top-color: var(--accent);
  border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-block { padding: 46px 0; text-align: center; color: var(--muted); }
.empty-state { padding: 40px 20px; text-align: center; color: var(--muted); }
.empty-state svg { opacity: .4; margin-bottom: 12px; }

/* ---------- Таблицы ---------- */
.table-wrap { overflow-x: auto; }
/* Подсказка горизонтального скролла: тень у края, когда контент шире
   (классы ставит updScrollHints в app.js — только когда есть что скроллить) */
.table-wrap, .tf-pills { position: relative; }
.table-wrap.scroll-r::after, .tf-pills.scroll-r::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 44px; z-index: 4;
  background: linear-gradient(90deg, rgba(21, 27, 36, 0) 0%, rgba(21, 27, 36, 0.92) 55%, #151b24 85%);
  pointer-events: none; }
.table-wrap.scroll-l::before, .tf-pills.scroll-l::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 44px; z-index: 4;
  background: linear-gradient(270deg, rgba(21, 27, 36, 0) 0%, rgba(21, 27, 36, 0.92) 55%, #151b24 85%);
  pointer-events: none; }
/* хвостовой отступ: последний столбец не прячется под тень при скролле */
.table-wrap .tbl td:last-child, .table-wrap .tbl th:last-child { padding-right: 18px; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th { text-align: left; color: var(--muted); font-weight: 600; font-size: 12px;
  padding: 9px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.tbl td { padding: 10px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tr:hover td { background: rgba(255, 255, 255, 0.02); }
.mono { font-family: var(--mono); font-size: 12.5px; }
.num { text-align: right; font-family: var(--mono); white-space: nowrap; }
.up { color: #3fb950; }
.down { color: #ff7b72; }

.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600;
  padding: 2.5px 9px; border-radius: 20px; background: var(--panel-3); color: var(--muted); white-space: nowrap; }
.badge.blue { background: rgba(77, 163, 255, 0.13); color: #7fbcff; }
.badge.green { background: var(--green-soft); color: #56d364; }
.badge.red { background: var(--red-soft); color: #ff7b72; }
.badge.yellow { background: var(--yellow-soft); color: #f5a623; }

/* ---------- Дашборд: верхняя панель ---------- */
.dash-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; row-gap: 10px; margin-bottom: 14px; }

/* Комбобокс выбора акции: тикер · цена · рост за сутки · название */
.stock-combo { position: relative; min-width: 300px; flex: 0 1 auto; }
.combo-btn { display: flex; align-items: center; gap: 10px; width: 100%;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 12px; cursor: pointer; transition: .14s; box-shadow: var(--shadow-soft);
  color: var(--text); font: inherit; text-align: left; }
/* <button> не наследует color от body: без явного цвета тикер в кнопке
   рисовался системным ЧЁРНЫМ (buttontext) на тёмной панели. */
.combo-btn .combo-ticker { color: inherit; }
.combo-btn:hover { border-color: #33404f; background: var(--panel-2); }
.combo-btn.open, .combo-btn:focus-visible { border-color: var(--accent-dim); box-shadow: 0 0 0 3px var(--accent-glow); outline: none; }
.combo-caret { color: var(--muted-2); flex: none; transition: transform .15s; margin-left: 2px; }
.combo-btn.open .combo-caret { transform: rotate(180deg); }
.combo-dd { position: absolute; top: calc(100% + 7px); left: 0; width: max-content; min-width: 100%;
  max-width: 92vw; background: rgba(26, 34, 45, .98); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow); z-index: 60; display: none; overflow: hidden; backdrop-filter: blur(10px); }
.combo-dd.show { display: block; animation: pop .14s ease; }
.combo-search { border: none; border-bottom: 1px solid var(--border-soft); border-radius: 0;
  background: rgba(13, 17, 23, 0.55); padding: 11px 14px; }
.combo-search:focus { box-shadow: none; background: rgba(13, 17, 23, 0.55); }
.combo-list { max-height: 340px; overflow-y: auto; padding: 6px; }
.combo-opt { display: flex; align-items: center; gap: 12px; padding: 9px 11px; border-radius: 8px;
  cursor: pointer; transition: background .1s; }
.combo-opt:hover { background: rgba(255, 255, 255, 0.05); }
.combo-opt.sel { background: linear-gradient(90deg, rgba(77, 163, 255, 0.14), rgba(77, 163, 255, 0.04)); }
.combo-opt.sel .combo-ticker { color: #7fbcff; }
.combo-empty { padding: 16px; text-align: center; color: var(--muted-2); font-size: 13px; }
.combo-ticker { font-weight: 700; font-size: 13.5px; letter-spacing: .3px; min-width: 52px; }
.combo-price { font-family: var(--mono); font-size: 12.5px; color: var(--text); white-space: nowrap; }
.combo-chg { font-family: var(--mono); font-size: 12px; min-width: 58px; text-align: right; white-space: nowrap; }
.combo-opt .combo-name { color: var(--muted-2); }
.combo-btn .combo-name { color: var(--muted); }
.combo-name { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 60px; }
.combo-opt .combo-name { flex: 0 1 auto; }

/* Полоса интервалов */
.tf-pills { display: flex; gap: 3px; background: var(--panel); border: 1px solid var(--border);
  padding: 4px; border-radius: 11px; flex-wrap: wrap; box-shadow: var(--shadow-soft); }
.tf-pill { padding: 6px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--muted);
  cursor: pointer; border: none; background: transparent; transition: .13s; }
.tf-pill:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.tf-pill.active { background: linear-gradient(135deg, #3b8fe8, #2b6cb0); color: #fff;
  box-shadow: 0 2px 10px rgba(59, 143, 232, 0.3); }

.price-box { margin-left: auto; text-align: right; }
.price-box .p { font-size: 21px; font-weight: 700; font-family: var(--mono); letter-spacing: .2px; }
.price-box .d { font-size: 13px; font-family: var(--mono); }

.dash-grid { display: grid; grid-template-columns: minmax(0, 1fr) 348px; gap: 16px; align-items: start; margin-top: 6px; }
.dash-col-main { min-width: 0; }

/* Панель инструментов графика */
.chart-toolbar { display: flex; align-items: center; gap: 6px; padding: 9px 12px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0; flex-wrap: wrap; box-shadow: var(--shadow-soft); }
.tool-btn { width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; transition: .12s; }
.tool-btn:hover { background: var(--panel-3); color: var(--text); }
.tool-btn.active { background: rgba(77, 163, 255, 0.14); color: #7fbcff; border-color: rgba(77, 163, 255, 0.3); }
.tool-btn.danger:hover { background: var(--red-soft); color: #ff7b72; }
.toolbar-sep { width: 1px; height: 22px; background: var(--border); margin: 0 5px; }
.color-dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #ffffff22; cursor: pointer; padding: 0; }
.color-dot.sel { border-color: #fff; transform: scale(1.12); }
.width-btn { font-size: 12px; font-weight: 700; }

.chart-body { position: relative; background: var(--panel-solid); border: 1px solid var(--border); border-top: none;
  border-radius: 0 0 var(--radius) var(--radius); overflow: hidden; }
.chart-main { height: 48vh; min-height: 340px; position: relative; }
.chart-sub { height: 130px; border-top: 1px solid var(--border-soft); position: relative; }
.chart-sub-label { position: absolute; top: 6px; left: 10px; z-index: 5; font-size: 11px; color: var(--muted);
  background: rgba(14, 18, 23, 0.65); padding: 2px 8px; border-radius: 5px; pointer-events: none; }
.draw-canvas { position: absolute; inset: 0; z-index: 20; } /* legacy: рисование теперь примитивом графика */
.chart-hint { position: absolute; bottom: 8px; right: 12px; z-index: 6; font-size: 11px; color: var(--muted-2);
  background: rgba(14, 18, 23, 0.7); padding: 3px 9px; border-radius: 6px; pointer-events: none; display: none; }
.chart-hint.show { display: block; }
.chart-loading { position: absolute; inset: 0; z-index: 30; display: none; align-items: center; justify-content: center;
  background: rgba(14, 18, 23, 0.55); backdrop-filter: blur(2px); }
.chart-loading.show { display: flex; }

/* Слои индикаторов */
.layers { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.layer { display: inline-flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--border);
  padding: 6px 8px 6px 11px; border-radius: 9px; font-size: 12.5px; user-select: none; transition: .12s; }
.layer:hover { border-color: #33404f; }
.layer .dot { width: 10px; height: 10px; border-radius: 3px; }
.layer input[type="color"] { width: 22px; height: 22px; border: none; background: none; cursor: pointer; padding: 0; }
.layer.off { opacity: .45; }
.layer .lname { cursor: pointer; font-weight: 600; }
.layer .lval { font-family: var(--mono); color: var(--muted); font-size: 11.5px; }

/* Карточки значений */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat-card { background: linear-gradient(180deg, rgba(26, 34, 45, .9), rgba(21, 27, 36, .9));
  border: 1px solid var(--border); border-radius: 11px; padding: 12px 14px; transition: .13s; position: relative; overflow: hidden; }
.stat-card::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2.5px;
  background: linear-gradient(180deg, #4da3ff, #2b6cb0); opacity: 0; transition: .13s; }
.stat-card:hover { border-color: #33404f; transform: translateY(-1px); }
.stat-card:hover::after { opacity: 1; }
.stat-card .k { font-size: 10.5px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
  display: flex; align-items: center; gap: 6px; }
.stat-card .k .dot { width: 8px; height: 8px; border-radius: 3px; }
.stat-card .v { font-size: 17px; font-weight: 700; font-family: var(--mono); margin-top: 5px; letter-spacing: .2px; }
.stat-card .v.muted-val { font-size: 12px; color: var(--muted-2); font-family: inherit; font-weight: 500; }

/* Новости */
.news-list { display: flex; flex-direction: column; gap: 4px; max-height: 560px; overflow-y: auto; }
.news-item { padding: 10px 11px; border-radius: 9px; border: 1px solid transparent; transition: .1s; }
.news-item:hover { background: var(--panel-2); border-color: var(--border-soft); }
.news-meta { display: flex; gap: 7px; align-items: center; font-size: 11.5px; color: var(--muted-2); margin-bottom: 3px; flex-wrap: wrap; }
.news-title { font-size: 13px; line-height: 1.45; font-weight: 500; }
.news-title a { color: var(--text); }
.news-title a:hover { color: var(--accent); }
.imp-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.imp-0 { background: var(--muted-2); }
.imp-1 { background: var(--yellow); }
.imp-2 { background: var(--red); }
/* AI-прогноз GLM в карточке новости: заливка зелёная/красная по тренду */
.news-ai { display: flex; gap: 6px; align-items: flex-start; margin-top: 7px;
  font-size: 11.5px; line-height: 1.5; padding: 6px 8px; border-radius: 7px;
  border: 1px solid var(--border-soft); background: var(--panel-2); color: var(--muted); }
.news-ai .ai-ico { flex: none; font-size: 11px; line-height: 1.4; }
.news-ai.ai-up { border-color: rgba(46,160,67,0.35); background: var(--green-soft); color: #a8d5b3; }
.news-ai.ai-down { border-color: rgba(248,81,73,0.35); background: var(--red-soft); color: #f1b0ab; }
.news-tabs { display: inline-flex; background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: 8px; padding: 2px; gap: 2px; }
.news-tab { border: none; background: transparent; color: var(--muted); font-size: 11.5px; font-weight: 600;
  padding: 4px 10px; border-radius: 6px; cursor: pointer; transition: .12s; }
.news-tab:hover { color: var(--text); }
.news-tab.active { background: var(--accent); color: #fff; }
.news-fallback { font-size: 11.5px; color: var(--muted-2); padding: 6px 4px 8px; border-bottom: 1px dashed var(--border-soft); margin-bottom: 6px; }
.news-open { color: var(--muted-2); text-decoration: none; font-weight: 700; }
.news-open:hover { color: var(--accent); }

/* Дивиденды */
.div-table td, .div-table th { font-size: 12px; padding: 8px 6px; }
.div-table th { white-space: normal; }
.div-table .badge { margin-top: 3px; }
.tr-upcoming td { background: var(--green-soft); }
.div-yield { font-weight: 700; color: #56d364; }

/* ---------- Редактор кода ---------- */
.code-wrap { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.CodeMirror { font-family: var(--mono); background: var(--panel-2) !important; }
/* специфичность выше, чем у .CodeMirror в codemirror.min.css (он подключается
   ПОСЛЕ app.css и при равной специфичности перекрывал высоту редактора) */
.code-wrap .CodeMirror { height: 420px; font-size: 13px; }
.cm-s-material-darker .CodeMirror-gutters { background: var(--panel-2) !important; border-right: 1px solid var(--border-soft); }
.test-result { background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px 14px; font-family: var(--mono); font-size: 12.5px; margin-top: 12px; white-space: pre-wrap;
  overflow-wrap: anywhere; display: none; }
.test-result.show { display: block; }
.test-result .err { color: #ff7b72; }
.preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 9px; }
.preset-card { background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px;
  cursor: pointer; transition: .13s; }
.preset-card:hover { border-color: var(--accent-dim); background: var(--panel-3); transform: translateY(-1px); }
.preset-card b { font-size: 13px; }
.preset-card p { color: var(--muted); font-size: 11.5px; margin-top: 4px; line-height: 1.45; }

/* ---------- Алерты ---------- */
.cond-row { display: grid; grid-template-columns: minmax(170px, 1.25fr) minmax(130px, 0.9fr) minmax(170px, 1.25fr) 30px;
  gap: 8px; margin-bottom: 8px; align-items: center; }
.cond-row .del { color: var(--muted); cursor: pointer; text-align: center; font-size: 17px; }
.cond-row .del:hover { color: #ff7b72; }
.rule-card { border-left: 3px solid var(--accent-dim); }
.rule-card.off { border-left-color: var(--muted-2); opacity: .75; }
.rule-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 6px 0; }
.log-item { border-bottom: 1px solid var(--border-soft); padding: 10px 2px; font-size: 12.5px; }
.log-item:last-child { border-bottom: none; }
.log-time { color: var(--muted-2); font-size: 11.5px; font-family: var(--mono); }
.log-msg { white-space: pre-wrap; margin-top: 3px; line-height: 1.5; }

/* ---------- Настройки ---------- */
.set-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; align-items: start; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0;
  border-bottom: 1px solid var(--border-soft); }
.set-row:last-child { border-bottom: none; }
.set-row.multi { align-items: flex-start; }
.set-row .lbl b { font-size: 13.5px; font-weight: 600; display: block; }
.set-row .lbl span { font-size: 12px; color: var(--muted); }

/* ---------- Модальные окна ---------- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(5, 8, 12, 0.74); z-index: 150;
  display: none; align-items: flex-start; justify-content: center; padding: 60px 20px; overflow-y: auto;
  backdrop-filter: blur(3px); }
.modal-backdrop.show { display: flex; }
.modal { background: linear-gradient(180deg, rgba(26, 34, 45, .98), rgba(21, 27, 36, .98));
  border: 1px solid var(--border); border-radius: 16px; width: 560px; max-width: 100%;
  padding: 22px 24px; box-shadow: var(--shadow); animation: pop .18s ease; }
@keyframes pop { from { opacity: 0; transform: translateY(-8px) scale(.985); } to { opacity: 1; transform: none; } }
.modal h3 { font-size: 16px; margin-bottom: 14px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
/* Модалка статистики: широкое окно, но не шире вьюпорта (раньше было
   inline width:860px); «Проверить на акции» — компактный блок справа.
   Объявляем ПОСЛЕ .modal: специфичность одинаковая, решает порядок */
.modal.ind-modal { width: min(860px, 94vw); }
.ind-fields { margin-bottom: 12px; }
.ind-fields .ind-stock { flex: 0 1 300px; }

/* ---------- Адаптив ---------- */
@media (max-width: 1180px) {
  .dash-grid { grid-template-columns: 1fr; }
  .stock-combo { min-width: 240px; flex: 1; }
}
@media (max-width: 900px) {
  .layout { grid-template-columns: 64px 1fr; }
  .sidebar .brand b, .sidebar .brand small, .nav-item span, .me-name, .me-role { display: none; }
  .nav-item { justify-content: center; }
  /* рельс: без аватара (не влезает в 36px контента) — только компактный выход */
  .sidebar .me { display: flex; justify-content: center; padding-top: 10px; }
  .me-row { display: none; }
  .sidebar .me .btn { width: auto; margin: 0; padding: 8px 10px; font-size: 11.5px; }
  .page { padding: 14px 14px 30px; }
  .price-box { margin-left: 0; text-align: left; }
  .dash-top { gap: 10px; }
}

/* ---------- UI-полировка ---------- */
/* Сегментный контрол И/ИЛИ */
.seg { display: inline-flex; background: var(--panel); border: 1px solid var(--border);
  border-radius: 9px; padding: 3px; gap: 3px; }
.seg button { padding: 6px 14px; border-radius: 6px; font-size: 12.5px; font-weight: 600;
  color: var(--muted); cursor: pointer; border: none; background: transparent; transition: .12s; }
.seg button:hover { color: var(--text); }
.seg button.active { background: linear-gradient(135deg, #3b8fe8, #2b6cb0); color: #fff; }

/* Тумблер с подписью */
.toggle-lbl { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; }
.toggle-lbl > span { font-size: 12.5px; color: var(--muted); font-weight: 600; }

/* Редактор правила: сетка полей + нижняя строка */
.rule-modal { width: min(860px, 94vw); }
.rule-edit-grid { display: grid; grid-template-columns: 2fr 1.3fr 0.8fr 1.1fr; gap: 10px; margin-bottom: 12px; }
.rule-edit-bottom { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; padding: 10px 12px; background: var(--panel); border: 1px solid var(--border-soft);
  border-radius: 10px; margin-bottom: 12px; }
@media (max-width: 720px) {
  .rule-edit-grid { grid-template-columns: 1fr 1fr; }
  .cond-row { grid-template-columns: 1fr 1fr; }
  .cond-row .del { grid-column: 2; justify-self: end; }
}

/* Условия правила */
.cond-row .c-right { display: flex; gap: 6px; align-items: center; min-width: 0; }
.cond-row .c-right .input { flex: 1; min-width: 0; }
.cond-row .c-right-toggle { flex: none; }

/* ---------- Мобильная адаптация ----------
   Планшет/узкий десктоп (≤900px): сайдбар уже сжат в иконочный рельс.
   Телефон (≤720px): сайдбар становится нижней панелью-таббаром (иконка +
   подпись), контент занимает всю ширину, тач-таргеты укрупняются,
   поля ввода получают шрифт 16px — iOS Safari не зумит страницу
   при фокусе. Узкие телефоны (≤600/380px): комбобокс во всю ширину,
   интервалы в один скроллируемый ряд, подписи табов скрываются. */
@media (max-width: 720px) {
  .layout { grid-template-columns: 1fr; min-height: 100vh; min-height: 100dvh; }
  .sidebar { position: fixed; top: auto; bottom: 0; left: 0; right: 0; z-index: 120;
    flex-direction: row; align-items: stretch; gap: 2px; height: auto;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    border-right: none; border-top: 1px solid var(--border); border-radius: 18px 18px 0 0;
    background: rgba(14, 18, 24, 0.97); backdrop-filter: blur(14px);
    box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.45); }
  .sidebar .brand { display: none; }
  .nav-spacer { flex: 0 0 4px; }
  .nav-item { flex: 1 1 0; flex-direction: column; gap: 3px; justify-content: center;
    padding: 7px 2px; border-radius: 10px; }
  .nav-item span { display: block; font-size: 10px; font-weight: 600; line-height: 1.25; }
  .nav-item::before { display: none; }
  .nav-item.active { background: rgba(77, 163, 255, 0.16); }
  /* выход из аккаунта — только в Настройках: деструктивная кнопка
     не место в навигации (иначе таб-бар перегружен) */
  .sidebar .me { display: none; }
  .main { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }

  /* тосты — над таббаром, во всю ширину экрана */
  .toasts { left: 12px; right: 12px; bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
  .toast { min-width: 0; max-width: none; }

  /* модалки — почти во весь экран, кнопки растягиваются */
  .modal-backdrop { padding: 18px 10px; }
  .modal { padding: 18px 16px; }
  .modal-actions { flex-wrap: wrap; }
  .modal-actions .btn { flex: 1 1 auto; }

  /* Модалка статистики: поля стопкой (название и акция друг под другом),
     редактор — шрифтом 16px (iOS не приближает страницу при фокусе в код)
     и высотой по экрану, окно не уезжает за края и не требует лишнего скролла */
  .ind-fields { flex-direction: column; gap: 10px; }
  .ind-fields .ind-stock { flex: 1 1 auto; }
  .code-wrap .CodeMirror { font-size: 16px; height: min(420px, 44vh); height: min(420px, 44dvh); }
  .test-result { font-size: 12px; padding: 10px 12px; }

  /* iOS не приближает страницу к полю с мелким шрифтом */
  .input, select.input, textarea.input, .combo-search { font-size: 16px; }

  /* тач-таргеты */
  .tf-pill { padding: 8px 12px; }
  .tool-btn { width: 38px; height: 38px; }
  .toggle { width: 44px; height: 26px; }
  .toggle .track::after { width: 20px; height: 20px; top: 3px; }
  .toggle input:checked + .track::after { left: 21px; }

  /* новости — естественная высота: страница скроллится целиком,
     без «скролла в скролле» */
  .news-list { max-height: none; overflow: visible; }

  /* заголовки карточек: бейджи и кнопки переносятся на следующую строку */
  .card-title { flex-wrap: wrap; row-gap: 8px; }
  .card-title .right { margin-left: 0; flex-wrap: wrap; }

  /* типографика и отступы */
  .page { padding: 12px 12px 28px; }
  .page-title { font-size: 18px; }
  .dash-grid { gap: 12px; margin-top: 10px; }
  .card { padding: 14px; }
  .card + .card { margin-top: 12px; }

  /* таблицы: плавный тач-скролл внутри карточки */
  .table-wrap { -webkit-overflow-scrolling: touch; }
  .table-wrap .tbl { font-size: 12.5px; }

  /* цена — под комбобоксом, слева */
  .price-box { margin-left: 0; text-align: left; }
}

@media (max-width: 600px) {
  /* комбобокс во всю ширину, интервалы — одной скроллируемой строкой ниже */
  .stock-combo { min-width: 0; flex: 1 1 100%; }
  .combo-dd { left: 0; right: 0; width: auto; max-width: none; }
  .dash-top { gap: 8px; }
  .tf-pills { width: 100%; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .stat-card { padding: 10px 11px; }
  .stat-card .v { font-size: 15px; overflow-wrap: anywhere; }
  .auth-wrap { padding: 16px; padding-top: 8vh; align-items: flex-start; }
  .auth-card { padding: 26px 20px 22px; }
}

@media (max-width: 420px) {
  .rule-edit-grid { grid-template-columns: 1fr; }
  .cond-row { grid-template-columns: 1fr; }
  .cond-row .del { grid-column: auto; justify-self: end; }
}

@media (max-width: 380px) {
  /* совсем узкие экраны: таббар без подписей, статы в один столбец */
  .nav-item span { display: none; }
  .stat-grid { grid-template-columns: 1fr; }
}