/* shelfy // trade — моноширинный терминал, мягкая палитра, крупный кегль.
   Всё в rem: кнопки A−/A+ меняют html font-size, масштабируется вся сетка. */

:root{
  --bg:#121413;
  --bg-deep:#0e100f;
  --panel:#181b19;
  --panel-hi:#1d211e;
  --row:#1f2421;
  --line:#252a27;
  --line-soft:#1e2321;
  --line-hi:#333a36;

  --fg:#dde2de;
  --fg2:#b3bab5;
  --dim:#868f89;
  --dim2:#5f6863;

  --up:#82c592;
  --dn:#d98a8a;
  --warn:#cfab73;
  --info:#95abc1;

  --up-soft:rgba(130,197,146,.10);
  --dn-soft:rgba(217,138,138,.10);
  --warn-soft:rgba(207,171,115,.10);

  --r:2px;
}

*{box-sizing:border-box}
html{font-size:16.5px}
@media (max-width:640px){html{font-size:15px}}

html,body{margin:0;padding:0}
/* горизонтальный «хвост» не должен рождать скроллбар; clip не ломает sticky */
body{overflow-x:clip}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:"Berkeley Mono","JetBrains Mono","IBM Plex Mono","SF Mono",Menlo,Consolas,"DejaVu Sans Mono",monospace;
  font-size:.875rem;
  line-height:1.5;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"zero" 1,"tnum" 1;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:#2b4438;color:#f2fff6}
button{font:inherit;color:inherit}

.up{color:var(--up)} .dn{color:var(--dn)} .warn{color:var(--warn)}
.dim{color:var(--dim)} .dim2{color:var(--dim2)} .flat{color:var(--fg2)}

/* ============================================================== topbar */
.head{
  position:sticky;top:0;z-index:30;
  background:var(--bg-deep);
  border-bottom:1px solid var(--line-soft);
}
.topbar{
  display:flex;align-items:center;gap:1.1rem;
  padding:.55rem clamp(.9rem,1.6vw,2.2rem) .5rem;
}
.brand{
  font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--fg2);white-space:nowrap;
}
.brand .sl{color:var(--dim2);margin:0 .1em}
.tb-mid{
  flex:1;min-width:0;
  color:var(--dim);font-size:.72rem;letter-spacing:.05em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tb-right{display:flex;align-items:center;gap:.9rem;white-space:nowrap;flex:0 0 auto}

.chip{display:flex;align-items:baseline;gap:.4rem}
.chip i{
  font-style:normal;font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim2);
}
.chip b{font-weight:400;font-size:.86rem;color:var(--fg)}
@media (max-width:820px){.chip{display:none}}

.clock{color:var(--dim);font-size:.72rem;letter-spacing:.06em}
@media (max-width:560px){.clock{display:none}}

.pill{
  font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid var(--line-hi);color:var(--dim);
  padding:.15rem .45rem;border-radius:var(--r);
}
.pill.ok{color:var(--up);border-color:#2f4a39}
.pill.warn{color:var(--warn);border-color:#4c3f27}
.pill.bad{color:var(--dn);border-color:#513232}

.fsz{display:flex;gap:.2rem}
.fsz button{
  background:transparent;border:1px solid var(--line);border-radius:var(--r);
  color:var(--dim);cursor:pointer;
  font-size:.7rem;line-height:1;padding:.2rem .4rem;
}
.fsz button:hover{color:var(--fg);border-color:var(--line-hi)}

.barline{height:2px;background:#161a18;overflow:hidden}
.barline-fill{height:2px;background:#3c6b52;width:0%;transition:width .9s linear}

/* ================================================================ tabs */
.tabs{
  display:flex;gap:.25rem;flex-wrap:wrap;
  padding:.35rem clamp(.9rem,1.6vw,2.2rem) 0;
}
.tabs button{
  background:transparent;border:0;border-bottom:2px solid transparent;
  padding:.5rem .85rem .55rem;
  color:var(--dim);cursor:pointer;
  font-size:.78rem;letter-spacing:.06em;
  white-space:nowrap;
  display:flex;align-items:baseline;gap:.4rem;
}
.tabs button:hover{color:var(--fg2)}
.tabs button.on{color:var(--fg);border-bottom-color:var(--up)}
.tabs em{
  font-style:normal;font-size:.62rem;color:var(--dim2);
  letter-spacing:.04em;
}
.tabs button.on em{color:var(--dim)}

/* ================================================================ layout */
/* контент на всю ширину экрана; поля только по краям */
.wrap{
  width:100%;max-width:none;margin:0;
  padding:1.25rem clamp(.9rem,1.6vw,2.2rem) 3rem;
}
@media (min-width:2000px){
  /* на очень широких мониторах не растягиваем до бесконечности, но и не центруем */
  .wrap{padding-right:4vw;padding-left:4vw}
}
.tab[hidden]{display:none}
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:1rem;align-items:start}
.grid2.solo{grid-template-columns:1fr}
@media (max-width:1020px){.grid2{grid-template-columns:1fr}}

/* ================================================================ hero */
.hero{
  border:1px solid var(--line);
  border-left:2px solid var(--dim2);
  background:var(--panel);
  padding:1.1rem 1.15rem 1.15rem;
  margin-bottom:1rem;
}
.hero .kicker{
  font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim2);
  display:flex;gap:.75rem;flex-wrap:wrap;
}
.hero .kicker span{color:var(--dim)}
.hero .kicker span::before{content:'\00b7';margin:0 .5rem 0 .05rem;color:#3a4340}
.hero .title{
  font-size:1.42rem;line-height:1.25;letter-spacing:.01em;
  margin:.45rem 0 .35rem;
  color:var(--fg);
}
.hero .note{font-size:.82rem;color:var(--fg2);line-height:1.55;max-width:62ch}
.hero.in_position{border-left-color:var(--info)}
.hero.in_position .title{color:var(--info)}
.hero.waiting{border-left-color:var(--warn)}
.hero.waiting .title{color:var(--warn)}
.hero.idle .title{color:var(--fg2)}

/* ================================================================= kpis */
.kpis{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;background:var(--line-soft);
  border:1px solid var(--line);
  margin-bottom:1rem;
}
@media (max-width:720px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kpi{background:var(--panel);padding:.8rem 1rem .85rem}
.kpi .k{
  font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--dim2);
}
.kpi .v{
  font-size:1.55rem;line-height:1.15;margin-top:.3rem;color:var(--fg);
  letter-spacing:-.01em;
}
.kpi .s{font-size:.72rem;color:var(--dim);margin-top:.15rem}
.kq{font-size:.62em;color:var(--dim2);margin-left:.1em}

/* =============================================================== panels */
.panel{border:1px solid var(--line);background:var(--panel);margin-bottom:1rem}
.sect{
  display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  padding:.6rem 1rem;border-bottom:1px solid var(--line-soft);
}
.sect-t{
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg2);white-space:nowrap;
}
.sect-n{font-size:.7rem;color:var(--dim2)}
.sect-r{flex:1;height:1px;min-width:1rem;background:var(--line-soft)}
.sect-ctl{display:flex;gap:.3rem;align-items:center;flex-wrap:wrap}
.ctl{
  background:transparent;border:1px solid var(--line);border-radius:var(--r);
  color:var(--dim);cursor:pointer;
  font-size:.68rem;letter-spacing:.06em;padding:.2rem .55rem;
}
.ctl:hover{color:var(--fg);border-color:var(--line-hi)}
.ctl.on{color:var(--fg);border-color:#3d5a49;background:var(--up-soft)}
.body{padding:.85rem 1rem 1rem}
.empty{
  padding:1.4rem 1rem;color:var(--dim);font-size:.82rem;line-height:1.6;
}
.empty b{color:var(--fg2);font-weight:400}

/* ================================================================ tables */
.tw{overflow-x:auto;overflow-y:hidden;min-width:0}
table.t{width:100%;border-collapse:collapse;font-size:.8rem}
table.t th{
  font-weight:400;font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--dim2);text-align:left;
  padding:.5rem .7rem;border-bottom:1px solid var(--line);
  white-space:nowrap;
}
table.t td{
  padding:.55rem .7rem;border-bottom:1px solid var(--line-soft);
  white-space:nowrap;vertical-align:middle;
}
table.t tbody tr:last-child td{border-bottom:0}
table.t tbody tr[data-jump]{cursor:pointer}
table.t tbody tr:hover td{background:var(--row)}
table.t .num{text-align:right}
table.t tfoot td{
  border-top:1px solid var(--line);border-bottom:0;
  padding:.55rem .7rem;color:var(--fg2);font-size:.78rem;
}
.sym{color:var(--fg);letter-spacing:.02em}
.sub{display:block;font-size:.66rem;color:var(--dim2);margin-top:.1rem}
.side-long{color:var(--up)} .side-short{color:var(--dn)}
.tag{
  display:inline-block;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--line-hi);border-radius:var(--r);
  padding:.05rem .34rem;color:var(--dim);
}
.tag.sig{color:var(--warn);border-color:#4c3f27;background:var(--warn-soft)}
.tag.pos{color:var(--info);border-color:#2f4356;background:rgba(149,171,193,.09)}

/* ================================================================ signals */
.sigc{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:.6rem 1rem;align-items:start;
  padding:.9rem 1rem;border-bottom:1px solid var(--line-soft);
}
.sigc:last-child{border-bottom:0}
.sig-l{min-width:0}
.sig-h{display:flex;align-items:baseline;gap:.55rem;flex-wrap:wrap}
.sig-sym{font-size:1rem;letter-spacing:.02em}
.sig-side{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.sig-why{
  font-size:.74rem;color:var(--dim);margin-top:.35rem;line-height:1.55;
  display:flex;gap:.9rem;flex-wrap:wrap;
}
.sig-why b{font-weight:400;color:var(--fg2)}
.sig-r{text-align:right;white-space:nowrap}
.sig-r .big{font-size:1.15rem;line-height:1.2}
.sig-r .lbl{font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:var(--dim2)}
@media (max-width:560px){.sigc{grid-template-columns:1fr}}

/* ============================================================== positions */
.pos{
  padding:.9rem 1rem;border-bottom:1px solid var(--line-soft);
}
.pos:last-child{border-bottom:0}
.pos-h{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.pos-h .sym{font-size:1rem}
.pos-h .r{margin-left:auto;font-size:.9rem}
.pos-m{
  display:flex;gap:1.1rem;flex-wrap:wrap;
  font-size:.72rem;color:var(--dim);margin-top:.4rem;
}
.pos-m b{font-weight:400;color:var(--fg2)}
/* шкала SL .. TP с маркером текущего R */
.rbar{position:relative;height:6px;margin:.8rem 0 .35rem;background:var(--bg-deep);border:1px solid var(--line-soft)}
.rbar .fill{position:absolute;left:0;top:0;bottom:0;background:#2f5241}
.rbar .fill.dn{background:#5c3535}
.rbar .ent{position:absolute;top:-2px;bottom:-2px;width:1px;background:#3d4844}
.rbar .mk{position:absolute;top:-4px;width:2px;height:14px;background:var(--fg)}
.rbar-l{position:relative;display:flex;justify-content:space-between;font-size:.6rem;color:var(--dim2);letter-spacing:.06em}
.rbar-l .mid{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap;color:var(--dim)}

/* ================================================================== near */
.gap{display:flex;flex-direction:column;gap:.22rem;min-width:5.5rem}
.gap-v{font-size:.82rem}
.gap-v u{text-decoration:none;font-size:.62rem;color:var(--dim2);margin-left:.2rem}
.gapb{height:5px;background:#141816;border:1px solid var(--line-soft);position:relative}
.gapb i{position:absolute;left:0;top:0;bottom:0;background:#3c6b52}
.gapb i.dn{background:#6e3f3f}
.gapb i.hot{background:#8a6a33}
svg.spark{display:block;opacity:.95}
table.t th.fl,table.t td.fl{width:1%;text-align:right}
table.t th.colspark,table.t td.colspark{text-align:right}

/* --- на всю ширину: колонки жмутся влево, правый край — пустой «хвост» --- */
table.t.wide{table-layout:fixed}
table.t.wide th.fill,table.t.wide td.fill{width:auto;border-bottom-color:transparent}
table.t.wide th,table.t.wide td{overflow:hidden;text-overflow:ellipsis}

/* список «ближе к пробою»: 6 строк; в полноширинной панели — двумя колонками */
.near2{display:grid;grid-template-columns:1fr 1fr;gap:0 1.2rem}
.near2 table.t.wide{table-layout:auto}
.near2 table.t.wide th.fill,.near2 table.t.wide td.fill{display:none}
@media (max-width:1400px){.near2{grid-template-columns:1fr}}
#p-near table.t.wide th:nth-child(1),#p-near table.t.wide td:nth-child(1){width:8.5rem}
#p-near table.t.wide th:nth-child(2),#p-near table.t.wide td:nth-child(2){width:7.5rem}
#p-near table.t.wide th:nth-child(3),#p-near table.t.wide td:nth-child(3){width:11rem}
#p-near table.t.wide th:nth-child(4),#p-near table.t.wide td:nth-child(4){width:6.2rem}
#p-trades table.t.wide th:nth-child(1),#p-trades table.t.wide td:nth-child(1){width:8rem}
#p-trades table.t.wide th:nth-child(2),#p-trades table.t.wide td:nth-child(2){width:6rem}
#p-trades table.t.wide th:nth-child(3),#p-trades table.t.wide td:nth-child(3){width:12rem}
#p-trades table.t.wide th:nth-child(4),#p-trades table.t.wide td:nth-child(4){width:10rem}
#p-trades table.t.wide th:nth-child(5),#p-trades table.t.wide td:nth-child(5){width:10rem}
#p-trades table.t.wide th:nth-child(6),#p-trades table.t.wide td:nth-child(6){width:10rem}
#p-trades table.t.wide th:nth-child(7),#p-trades table.t.wide td:nth-child(7){width:6rem}
@media (max-width:1100px){
  table.t.wide{table-layout:auto}
  table.t.wide th,table.t.wide td{width:auto!important}
  table.t.wide th.fill,table.t.wide td.fill{display:none}
}

/* --- карточки в несколько колонок на широком экране --- */
.siglist,.mulist{display:block}
.siglist>*,.mulist>*{min-width:0}
@media (min-width:1180px){
  .siglist{display:grid;grid-template-columns:repeat(auto-fill,minmax(26rem,1fr))}
  .mulist{display:grid;grid-template-columns:repeat(auto-fill,minmax(22rem,1fr))}
  .siglist .sigc,.mulist .pos{border-right:1px solid var(--line-soft)}
}
@media (max-width:600px){
  .colspark{display:none}
  .sect-n{display:none}
  .hero .kicker .opt{display:none}
  table.t th,table.t td{padding:.45rem .5rem}
  .hero .title{font-size:1.2rem}
}

/* =============================================================== breadth */
.bh{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;flex-wrap:wrap;max-width:64rem}
.bh-v{font-size:.84rem}
.bh-v b{font-weight:400}
.meter{display:flex;gap:3px;margin-top:.45rem;max-width:60rem}
.meter i{
  flex:0 0 1.1rem;height:8px;background:var(--bg-deep);
  border:1px solid var(--line-soft);
}
.meter i.on{background:#4a7a5d;border-color:#3d5f4b}
.meter i.need{border-color:#6b5836}
.bnote{font-size:.74rem;color:var(--dim);margin-top:.6rem;line-height:1.65;max-width:78ch}

/* ================================================================ charts */
.charts{display:grid;grid-template-columns:repeat(auto-fill,minmax(26rem,1fr));gap:.9rem}
@media (max-width:820px){.charts{grid-template-columns:1fr}}
.chart{border:1px solid var(--line);background:var(--panel)}
.chart-h{
  display:flex;align-items:center;gap:.55rem;
  padding:.55rem .7rem;cursor:pointer;user-select:none;
  background:var(--panel-hi);
}
.chart-h:hover{background:var(--row)}
.chart-h .cv{color:var(--dim2);width:.7em;font-size:.7rem}
.chart-h .csym{font-size:.86rem;color:var(--fg);letter-spacing:.02em}
.chart-h .cgap{margin-left:auto;font-size:.72rem;color:var(--dim)}
.chart-b{padding:.35rem .5rem .5rem}
.chart.collapsed .chart-b{display:none}
.chart-meta{
  display:flex;gap:.9rem;flex-wrap:wrap;
  padding:.15rem .35rem 0;font-size:.66rem;color:var(--dim2);
}
.legend{display:flex;gap:.9rem;flex-wrap:wrap;font-size:.66rem;padding:.25rem .35rem 0;color:var(--dim2)}
.legend s{text-decoration:none;color:var(--up)}
.legend u{text-decoration:none;color:var(--dn)}
svg.chart-svg{display:block;width:100%;height:auto;overflow:visible}
svg.chart-svg text{fill:var(--dim2);font-size:8.5px;font-family:inherit}

/* ================================================================= week */
.wkbody{padding:.75rem 1rem .85rem}
.wksum{
  display:flex;gap:1.4rem;flex-wrap:wrap;
  font-size:.74rem;color:var(--dim);margin-bottom:.55rem;
}
.wksum b{font-weight:400;color:var(--fg)}
.wksum u{text-decoration:none;color:var(--dim2);font-size:.94em}
svg.chart-svg.wk{max-height:230px}
.wkdays{display:flex;flex-direction:column;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
.wkr{
  display:grid;grid-template-columns:1fr auto auto;gap:.8rem;align-items:baseline;
  background:var(--panel);padding:.4rem .1rem;
}
.wkr-d{color:var(--fg2);font-size:.76rem}
.wkr-d u{text-decoration:none;color:var(--dim2);font-size:.9em;margin-left:.25em}
.wkr-t{color:var(--dim);font-size:.76rem;text-align:right}
.wkr-t u{text-decoration:none;font-size:.82em;color:var(--dim2)}
.wkr-p{font-size:.78rem;min-width:3.6rem;text-align:right}

/* ============================================================== warnings */.warnings{display:flex;flex-direction:column;gap:.45rem}
.warnings:empty{display:none}
.wn,.er{
  border:1px solid #463b22;border-left:2px solid var(--warn);
  background:#191710;color:var(--warn);
  font-size:.76rem;padding:.45rem .75rem;
}
.er{
  border-color:#4b3030;border-left-color:var(--dn);
  background:#181312;color:var(--dn);white-space:pre-wrap;
}

::-webkit-scrollbar{height:9px;width:9px}
::-webkit-scrollbar-thumb{background:#242a27}
::-webkit-scrollbar-track{background:var(--bg-deep)}