/* ===== LETF: чёрно-золотая тема (каркас и пропорции — как у «Дома») =====
   Телефон: шапка, лента карточек, нижняя панель вкладок; компьютер: боковое меню слева. */
:root{
  --bg:#0A0907; --surface:#14120E; --surface-2:#1C1914; --surface-3:#26221A; --ink:#F3EBDC; --muted:#A0957F; --faint:#6E6555;
  --line:#2A251C; --track:#211D16;
  --gold:#D9B45A; --gold-hi:#F2D68E; --gold-deep:#A9842F; --gold-ink:#16110A; --gold-soft:rgba(217,180,90,.13); --gold-line:rgba(217,180,90,.28);
  --pos:#D9B45A; --neg:#E0675C; --neg-soft:rgba(224,103,92,.14);
  --ok:#6FC48C; --ok-soft:rgba(111,196,140,.13); --warn:#E8A33D; --warn-soft:rgba(232,163,61,.14); --bad:#E0675C; --bad-soft:rgba(224,103,92,.14);
  --f-display:'Unbounded', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --f-body:'Onest', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --r:20px; --r-sm:14px;
  --sh:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --sh-up:0 -6px 28px rgba(0,0,0,.5);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--bg); overflow-x:clip}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--f-body); font-size:15.5px; line-height:1.45; -webkit-tap-highlight-color:transparent;
  padding-top:env(safe-area-inset-top,0px)}
h1,h2,h3{font-family:var(--f-display); font-weight:500; letter-spacing:-.01em; margin:0; text-wrap:balance}
h2{font-size:1.35rem} h3{font-size:1rem}
p{margin:0}
.num{font-variant-numeric:tabular-nums; font-weight:600}
.muted{color:var(--muted)} .faint{color:var(--faint)}
.pos{color:var(--pos)} .neg{color:var(--neg)}
.grow{flex:1}
[hidden]{display:none!important}
svg.lucide{flex:none; width:1.15em; height:1.15em; vertical-align:-.2em; stroke-width:2}
button{font:inherit; color:inherit}
:focus-visible{outline:3px solid var(--gold-line); outline-offset:2px}

/* --- вход --- */
.lock{position:fixed; inset:0; display:grid; place-items:center; padding:24px;
  background:radial-gradient(120% 80% at 50% 0%, rgba(217,180,90,.14), transparent 60%), var(--bg)}
.lock-in{display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; max-width:34ch}
.lock-x{display:flex; flex-direction:column; align-items:stretch; gap:14px; width:100%}
.lock-x:empty{display:none}
.code-form{display:flex; gap:8px; margin-top:6px}
.code-in{flex:1; min-width:0; min-height:44px; border:1px solid var(--line); background:var(--surface-2); color:var(--ink); border-radius:14px;
  padding:10px 14px; font:inherit; font-size:1rem; letter-spacing:.12em; text-align:center}
.code-in:focus{outline:none; border-color:var(--gold-line)}
.lock h1{font-size:1.8rem; background:linear-gradient(180deg,var(--gold-hi),var(--gold-deep)); -webkit-background-clip:text; background-clip:text; color:transparent}

/* --- знак --- */
.logo-mark{display:grid; place-items:center; width:38px; height:38px; border-radius:12px; color:var(--gold-ink);
  background:linear-gradient(145deg,var(--gold-hi),var(--gold) 45%,var(--gold-deep)); box-shadow:0 4px 16px rgba(217,180,90,.25)}
.logo-mark svg{width:20px; height:20px}
.logo-mark.sm{width:30px; height:30px; border-radius:10px} .logo-mark.sm svg{width:16px; height:16px}
.logo-mark.big{width:72px; height:72px; border-radius:22px} .logo-mark.big svg{width:36px; height:36px}

/* --- каркас --- */
.wrap{width:100%; max-width:1180px; margin:0 auto; padding-inline:16px}
.side{display:none}
.top{position:sticky; top:env(safe-area-inset-top,0px); z-index:15; background:color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px)}
.top-in{display:flex; align-items:center; gap:10px; padding-block:12px}
.top h1{font-size:1.1rem; font-weight:600}
main.wrap{display:flex; flex-direction:column; gap:16px; padding-block:6px calc(110px + env(safe-area-inset-bottom,0px))}
.live-dot{width:8px; height:8px; border-radius:99px; background:var(--faint); transition:background .3s}
.live-dot.on{background:var(--gold); box-shadow:0 0 0 4px var(--gold-soft)}
.live-dot.err{background:var(--bad)}

.bnav{position:fixed; left:0; right:0; bottom:0; z-index:20; display:grid; grid-template-columns:repeat(4,1fr); background:var(--surface);
  border-top:1px solid var(--line); box-shadow:var(--sh-up); border-radius:22px 22px 0 0;
  padding:6px max(6px, env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(6px, env(safe-area-inset-left,0px))}
.bn-i{position:relative; border:0; background:none; display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 2px; color:var(--muted); font-size:.7rem; cursor:pointer; border-radius:14px}
.bn-i svg{width:24px; height:24px}
.bn-i[aria-current="true"]{color:var(--gold)}
.bn-i[aria-current="true"] .bn-ic{background:var(--gold-soft); border-radius:999px}
.bn-ic{display:grid; place-items:center; width:54px; height:30px}
.nb{position:absolute; top:2px; left:calc(50% + 8px); min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--gold); color:var(--gold-ink); font-size:.68rem; line-height:18px; text-align:center; font-weight:700}
@media (min-width:960px){
  .side{display:flex; flex-direction:column; gap:4px; position:fixed; left:0; top:0; bottom:0; width:248px; padding:22px 14px; background:var(--surface); border-right:1px solid var(--line); z-index:20}
  .app{margin-left:248px}
  .bnav{display:none}
  .top .logo-mark{display:none}
  main.wrap{padding-bottom:48px}
}
.brand{display:flex; align-items:center; gap:12px; padding:4px 8px 20px}
.brand b{font-family:var(--f-display); font-size:1.15rem; display:block; color:var(--gold-hi)}
.brand small{color:var(--muted); font-size:.75rem}
.nav-i{position:relative; display:flex; align-items:center; gap:12px; border:0; background:none; font-size:.95rem; padding:10px 12px; border-radius:14px; cursor:pointer; text-align:left; width:100%}
.nav-i svg{width:21px; height:21px; color:var(--muted)}
.nav-i:hover{background:var(--surface-2)}
.nav-i[aria-current="true"]{background:var(--gold-soft); color:var(--gold-hi); font-weight:600}
.nav-i[aria-current="true"] svg{color:var(--gold)}
.nav-i .nb{position:static; margin-left:auto}
.side-foot{margin-top:auto; padding:12px 8px 0; border-top:1px solid var(--line); font-size:.8rem}

/* --- блоки --- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:16px; box-shadow:var(--sh); display:flex; flex-direction:column; gap:12px; min-width:0}
.card-h{display:flex; align-items:center; gap:10px; min-height:30px}
.card-h h3{flex:1}
.grid2{display:grid; grid-template-columns:minmax(0,1fr); gap:16px}
@media (min-width:1100px){ .grid2{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)} }
.col{display:flex; flex-direction:column; gap:16px; min-width:0}

.hero{position:relative; overflow:hidden; border:1px solid var(--gold-line);
  background:radial-gradient(90% 120% at 100% 0%, rgba(217,180,90,.20), transparent 55%), linear-gradient(160deg,#1D1912 0%,#110F0B 70%)}
.hero::after{content:""; position:absolute; inset:auto -40px -60px auto; width:200px; height:200px; border-radius:50%; border:1px solid var(--gold-line); opacity:.5; pointer-events:none}
.hero-label{font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.hero-val{font-family:var(--f-display); font-size:clamp(2rem, 8vw, 2.7rem); font-weight:600; line-height:1.05;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold) 60%,var(--gold-deep)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero-sub{display:flex; gap:8px 18px; flex-wrap:wrap; font-size:.92rem}
.hero-sub span b{font-weight:600}

.tiles{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
@media (min-width:700px){ .tiles{grid-template-columns:repeat(4,minmax(0,1fr))} }
.tile{background:var(--surface-2); border-radius:var(--r-sm); padding:12px 14px; display:flex; flex-direction:column; gap:2px; min-width:0}
.tile small{color:var(--muted); font-size:.78rem; display:flex; align-items:center; gap:6px}
.tile small svg{width:14px; height:14px}
.tile b{font-size:1.15rem; font-variant-numeric:tabular-nums; font-weight:600; overflow-wrap:anywhere}
.tile i{font-style:normal; color:var(--faint); font-size:.78rem}

.status-row{display:flex; flex-wrap:wrap; gap:8px; min-width:0}
.status-row .pill{white-space:normal; max-width:100%; line-height:1.3}
.pill{display:inline-flex; align-items:center; gap:6px; font-size:.8rem; padding:4px 11px; border-radius:999px; background:var(--surface-2); color:var(--muted); white-space:nowrap; font-weight:500}
.pill svg{width:14px; height:14px}
.pill.ok{background:var(--ok-soft); color:var(--ok)} .pill.warn{background:var(--warn-soft); color:var(--warn)}
.pill.bad{background:var(--bad-soft); color:var(--bad)} .pill.gold{background:var(--gold-soft); color:var(--gold)}
/* потоки (3-й, 4-й, 5-й в строке статуса): Стаканы — синий, Исполнения — фиолетовый, Торговый WS — бирюзовый; при обрыве остаётся .bad */
.status-row .pill:nth-child(3):not(.bad){background:rgba(122,162,230,.13); color:#8FB0EC}
.status-row .pill:nth-child(4):not(.bad){background:rgba(176,140,230,.13); color:#BBA0EE}
.status-row .pill:nth-child(5):not(.bad){background:rgba(86,196,196,.13); color:#6CCFCB}
.banner{display:flex; gap:10px; align-items:flex-start; border-radius:var(--r-sm); padding:12px 14px; font-size:.92rem}
.banner svg{margin-top:2px}
.banner.bad{background:var(--bad-soft); color:var(--ink); border:1px solid rgba(224,103,92,.3)} .banner.bad svg{color:var(--bad)}
.banner.warn{background:var(--warn-soft); border:1px solid rgba(232,163,61,.3)} .banner.warn svg{color:var(--warn)}

.list{display:flex; flex-direction:column}
.li{display:flex; align-items:center; gap:12px; padding:11px 0; border-top:1px solid var(--line); min-width:0}
.list > .li:first-child{border-top:0; padding-top:2px}
.li.unread{background:var(--surface-2); border-radius:12px; margin:0 -8px; padding-left:8px; padding-right:8px; box-shadow:inset 3px 0 0 var(--gold)}
.list > .li.unread:first-child{padding-top:11px}
.li.unread + .li{border-top-color:transparent}
.li-ic{display:grid; place-items:center; width:36px; height:36px; border-radius:12px; background:var(--surface-2); color:var(--muted); flex:none}
.li-ic svg{width:18px; height:18px}
.li-ic.gold{background:var(--gold-soft); color:var(--gold)} .li-ic.bad{background:var(--bad-soft); color:var(--bad)}
.li-ic.ok{background:var(--ok-soft); color:var(--ok)} .li-ic.warn{background:var(--warn-soft); color:var(--warn)}
.li-main{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1}
.li-main b{font-weight:600; overflow-wrap:anywhere}
.li-main small{color:var(--muted); line-height:1.35; overflow-wrap:anywhere}
.li-r{display:flex; flex-direction:column; align-items:flex-end; gap:2px; text-align:right; flex:none}
.li-r small{color:var(--faint); font-size:.78rem}
.tag{display:inline-flex; align-items:center; font-size:.72rem; padding:1px 8px; border-radius:999px; background:var(--surface-3); color:var(--muted); margin-left:6px; vertical-align:2px; font-weight:500}
.tag.gold{background:var(--gold-soft); color:var(--gold)} .tag.bad{background:var(--bad-soft); color:var(--bad)} .tag.warn{background:var(--warn-soft); color:var(--warn)}
.day-h{font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); padding:14px 0 4px; display:flex; justify-content:space-between}
.day-h:first-child{padding-top:0}
.empty{display:flex; flex-direction:column; align-items:center; gap:8px; padding:22px 10px; color:var(--muted); text-align:center}
.empty svg{width:28px; height:28px; color:var(--faint)}

/* --- кнопки --- */
.actions{display:flex; gap:8px; flex-wrap:wrap} .actions.end{justify-content:flex-end}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--line); background:var(--surface-2); border-radius:14px; padding:10px 16px; font-size:.95rem; font-weight:500; min-height:44px; cursor:pointer; transition:transform .08s, filter .15s}
.btn:hover{filter:brightness(1.12)} .btn:active{transform:scale(.97)}
.btn[disabled]{opacity:.5; cursor:default}
.btn.primary{border:0; color:var(--gold-ink); font-weight:600; background:linear-gradient(145deg,var(--gold-hi),var(--gold) 50%,var(--gold-deep)); box-shadow:0 6px 18px rgba(217,180,90,.22)}
.btn.danger{color:var(--bad); border-color:rgba(224,103,92,.35); background:var(--bad-soft)}
.btn.ghost{background:none; border-color:transparent; color:var(--muted)}
.btn svg{width:18px; height:18px}
.btn.grow{flex:1}
.seg{display:flex; background:var(--surface-2); border-radius:14px; padding:4px; gap:4px; overflow-x:auto}
.seg button{flex:1; border:0; background:none; padding:8px 12px; border-radius:10px; color:var(--muted); cursor:pointer; white-space:nowrap; font-size:.88rem; font-weight:500}
.seg button[aria-pressed="true"]{background:var(--surface-3); color:var(--gold-hi); box-shadow:inset 0 0 0 1px var(--gold-line)}

/* --- графики --- */
.chart{position:relative; width:100%}
.chart svg{display:block; width:100%; height:auto; overflow:visible}
.chart .grid line{stroke:var(--line); stroke-width:1}
.chart .axis text{fill:var(--faint); font-size:11px; font-family:var(--f-body)}
.chart .zero{stroke:var(--faint); stroke-width:1}
.chart .ln{fill:none; stroke:var(--gold); stroke-width:2; stroke-linejoin:round; stroke-linecap:round}
.chart .ar{fill:url(#gGold)}
.chart .xh{stroke:var(--gold-line); stroke-width:1}
.chart .dot{fill:var(--gold); stroke:var(--surface); stroke-width:2}
.chart .bp{fill:var(--pos)} .chart .bn{fill:var(--neg)}
.chart .hit{fill:transparent; cursor:crosshair}
.chart .hit:hover + .bar-hl, .chart .bar-hl{pointer-events:none}
.tip{position:fixed; z-index:50; pointer-events:none; background:#221E17; border:1px solid var(--gold-line); color:var(--ink); border-radius:10px; padding:7px 10px; font-size:.82rem; box-shadow:var(--sh); white-space:nowrap}
.tip b{font-variant-numeric:tabular-nums}
.pbar{position:relative; height:8px; background:var(--track); border-radius:99px; overflow:hidden; margin-top:6px}
.pbar i{position:absolute; top:0; bottom:0; border-radius:99px}
.pbar .mid{position:absolute; left:50%; top:-2px; bottom:-2px; width:1px; background:var(--faint)}

/* --- всплывающее --- */
.toast{position:fixed; z-index:60; left:50%; transform:translateX(-50%); bottom:calc(92px + env(safe-area-inset-bottom,0px)); background:var(--surface-3); border:1px solid var(--gold-line); padding:10px 16px; border-radius:14px; box-shadow:var(--sh); max-width:calc(100% - 32px); font-size:.92rem}
@media (min-width:960px){ .toast{bottom:28px} }
.sheet-bg{position:fixed; inset:0; z-index:70; background:rgba(0,0,0,.6); display:grid; align-items:end; justify-items:center}
.sheet{width:min(100%,460px); background:var(--surface); border:1px solid var(--gold-line); border-radius:22px 22px 0 0; padding:20px 16px calc(16px + env(safe-area-inset-bottom,0px)); display:flex; flex-direction:column; gap:10px}
@media (min-width:700px){ .sheet-bg{align-items:center} .sheet{border-radius:22px} }