/* ============================================================================
 *  SPAN app — визуальный язык главной (sleep-well): кремовая бумага, синие чернила,
 *  тонкие линии, пилюли, Editorial + NM. Никаких теней, градиентов и стекла.
 * ========================================================================== */
@font-face{font-family:Editorial;src:url(/assets/fonts/editorial.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:NM;src:url(/assets/fonts/nm-light.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:NM;src:url(/assets/fonts/nm-regular.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:NM;src:url(/assets/fonts/nm-medium.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --soft:#fef1d0;            /* бумага (как на главной) */
  --soft-2:#fbe9bf;          /* чуть темнее — подложки */
  --ink:#0042af;             /* чернила */
  --ink-2:#2451b5;           /* ссылки/вторичный */
  --ink-3:#4589f7;           /* светлый акцент */
  --night:#010d6e;
  --veil:#002e77;            /* оверлей «closed» — как insights на главной */
  --line:rgba(0,66,175,.2);
  --line-2:rgba(0,66,175,.45);
  --serif:Editorial,Georgia,serif;
  --sans:NM,Arial,sans-serif;
  --pad:4rem;
  --max:144rem;
}
*,*::before,*::after{box-sizing:border-box}
html{font-size:62.5%;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--soft);color:var(--ink);font:400 1.6rem/1.45 var(--sans);-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
main{flex:1;min-width:0;width:100%}
html,body{overflow-x:clip}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit;background:none;border:0;margin:0}
button{cursor:pointer}
button:disabled{cursor:default}
::selection{background:var(--ink);color:var(--soft)}
:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
.num{font-variant-numeric:tabular-nums}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.serif{font-family:var(--serif);font-weight:400}

/* ---------- типографика главной ---------- */
.t-stack{margin:0}
.t-serif,.t-sans{display:block;font-size:clamp(5.2rem,7.4vw,11.2rem);line-height:1.02;font-weight:400}
.t-serif{font-family:var(--serif);letter-spacing:-.025em}
.t-sans{font-family:var(--sans);letter-spacing:-.015em;margin-left:clamp(2.4rem,7vw,13rem)}
.descr{font-family:var(--serif);font-size:clamp(2.4rem,2.4vw,3.4rem);line-height:1.3;letter-spacing:-.01em}
.sub{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.4rem;font-size:1.6rem}
.sub .dot{width:5px;height:5px;border-radius:50%;background:var(--ink);flex:none}
.sub .m{font-weight:500}
.sub .it{display:inline-flex;align-items:center;gap:1.4rem}
.lined{font-weight:500;color:var(--ink-2);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.35em}
.lined:hover{color:var(--ink)}
.label{font-size:1.4rem;font-weight:500;color:var(--ink-2)}
.muted{color:var(--ink-2);opacity:.8}

/* ---------- пилюли ---------- */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:1rem;border:1px solid var(--ink);border-radius:50px;padding:1.1rem 2.6rem;font:400 1.9rem/1 var(--serif);background:var(--soft);color:var(--ink);transition:background .25s,color .25s;white-space:nowrap}
.pill:hover:not(:disabled){background:var(--ink);color:var(--soft)}
.pill.fill{background:var(--ink);color:var(--soft)}
.pill.fill:hover:not(:disabled){background:var(--night);border-color:var(--night)}
.pill.sm{padding:.8rem 1.8rem;font-size:1.6rem}
.pill.sans{font:500 1.4rem/1 var(--sans);padding:1.1rem 2rem}
.pill:disabled{opacity:.4}
.pill .arr{font-family:var(--sans);transition:transform .25s}
.pill:hover .arr{transform:translateX(3px)}

.seg{display:inline-flex;border:1px solid var(--ink);border-radius:50px;padding:.3rem}
.seg button,.seg a{padding:.8rem 1.8rem;border-radius:50px;font:500 1.4rem/1 var(--sans);color:var(--ink);transition:background .2s,color .2s;white-space:nowrap}
.seg button:hover:not(.on),.seg a:hover:not(.on){background:rgba(0,66,175,.08)}
.seg .on{background:var(--ink);color:var(--soft)}

/* статус */
.st{display:inline-flex;align-items:center;gap:.8rem;font-weight:500;font-size:1.4rem;white-space:nowrap}
.st i{width:8px;height:8px;border-radius:50%;border:1px solid var(--ink);flex:none}
.st.open i{background:var(--ink);animation:pulse 2s ease-in-out infinite}
.st.closed{color:var(--ink-2)}
@keyframes pulse{50%{box-shadow:0 0 0 4px rgba(0,66,175,.15)}}

/* ---------- шапка ---------- */
.hdr{position:relative;z-index:30;background:var(--soft);border-bottom:1px solid var(--line)}
.hdr-in{height:7.6rem;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:2rem;max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.wordmark{font:italic 400 3.4rem/1 var(--serif);justify-self:start;letter-spacing:-.01em}
.hdr-right{justify-self:end;display:flex;align-items:center;gap:2.2rem}
.now{font:400 1.7rem/1 var(--serif);white-space:nowrap}
.now small{font:500 1.2rem var(--sans);color:var(--ink-2);margin-left:.6rem}
.wallet{position:relative}
.wallet-menu{position:absolute;right:0;top:calc(100% + 1rem);width:28rem;background:var(--soft);border:1px solid var(--ink);border-radius:2rem;padding:1rem;display:none}
.wallet-menu.show{display:block;animation:drop .2s ease}
@keyframes drop{from{opacity:0;transform:translateY(-6px)}}
.wallet-menu .wm-t{font-size:1.3rem;color:var(--ink-2);padding:.8rem 1.2rem 1.2rem}
.wallet-menu button{display:flex;align-items:center;gap:1.2rem;width:100%;padding:1.1rem 1.2rem;border-radius:1.2rem;font-size:1.6rem;text-align:left}
.wallet-menu button:hover{background:rgba(0,66,175,.08)}
.wallet-menu .mono{width:3rem;height:3rem;border-radius:50%;border:1px solid var(--ink);display:grid;place-items:center;font:1.5rem/1 var(--serif);flex:none}
.wallet-menu .tag{margin-left:auto;font-size:1.2rem;color:var(--ink-2)}
.mob-tabs{display:none}

/* ---------- футер ---------- */
.ftr{border-top:1px solid var(--line);margin-top:12rem}
.ftr-in{max-width:var(--max);margin:0 auto;padding:6rem var(--pad) 3rem;display:flex;justify-content:space-between;align-items:flex-end;gap:4rem;flex-wrap:wrap}
.ftr-lead{font:400 clamp(3.2rem,4vw,5.6rem)/1.05 var(--serif);letter-spacing:-.02em}
.ftr-lead span{display:block;font-family:var(--sans);margin-left:3.2rem}
.ftr-links{display:flex;gap:3.2rem;flex-wrap:wrap}
.ftr-meta{max-width:var(--max);margin:0 auto;padding:2.4rem var(--pad) 3.2rem;display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;font-size:1.3rem;color:var(--ink-2);border-top:1px solid var(--line)}

/* ---------- монетная метка (циферблат 24ч) ---------- */
.mark{flex:none;display:block}
.mark img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:1px solid var(--ink)}

/* ---------- полоска дня (24 часа) ---------- */
.strip{position:relative;height:2.2rem}
.strip .base{position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line-2)}
.strip .seg-on{position:absolute;top:50%;height:1rem;margin-top:-.5rem;background:var(--ink);border-radius:2px}
.strip .needle{position:absolute;width:1px;background:var(--ink-3);top:calc(-1 * var(--rp,2.6rem));bottom:calc(-1 * var(--rp,2.6rem));z-index:1}

/* ---------- недельное расписание (точность до минуты) ---------- */
.wk{display:grid;grid-template-columns:4.4rem 1fr;row-gap:.6rem;column-gap:1.2rem;align-items:center}
.wk .dn{font-size:1.3rem;font-weight:500;color:var(--ink-2)}
.wk .dn.today{color:var(--ink)}
.wk-row{position:relative;height:2.4rem;border:1px solid var(--line-2);border-radius:.6rem;overflow:hidden}
.wk-row .g{position:absolute;top:0;bottom:0;width:1px;background:var(--line);opacity:.6}
.wk-row .g6{opacity:1;background:var(--line-2)}
.wk-row .on{position:absolute;top:0;bottom:0;background:var(--ink);min-width:2px}
.wk-row .now{position:absolute;top:-1px;bottom:-1px;width:2px;margin-left:-1px;background:var(--ink-3);z-index:1}
.wk-scale{display:flex;justify-content:space-between;font-size:1.1rem;color:var(--ink-2)}

/* ---------- бейджи ---------- */
.tag{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--ink-2);border-radius:50px;padding:.15rem .8rem;font:500 1.1rem/1.4 var(--sans);color:var(--ink-2);white-space:nowrap;vertical-align:middle}
.tag.solid{background:var(--ink);border-color:var(--ink);color:var(--soft)}

/* ---------- разбивка комиссии ---------- */
.feebar{display:flex;height:3.6rem;border:1px solid var(--ink);border-radius:50px;overflow:hidden}
.feebar>div{display:flex;align-items:center;justify-content:center;font:500 1.2rem var(--sans);white-space:nowrap;overflow:hidden;padding:0 .6rem}
.feebar .fp{background:var(--night);color:var(--soft)}
.feebar .fc{background:var(--ink);color:var(--soft)}
.feebar .fm{background:var(--soft-2);color:var(--ink-2)}
.feelegend{display:flex;gap:2rem;flex-wrap:wrap;margin-top:1rem;font-size:1.3rem;color:var(--ink-2)}
.feelegend i{display:inline-block;width:1rem;height:1rem;border-radius:50%;margin-right:.6rem;vertical-align:-1px;border:1px solid var(--ink)}

/* ---------- калькулятор заработка ---------- */
.calc{border-top:1px solid var(--line);padding-top:2.4rem}
.calc .big{font:400 2.6rem/1.3 var(--serif);letter-spacing:-.01em}
.calc .big b{font-weight:400;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.range{-webkit-appearance:none;appearance:none;width:100%;height:1px;background:var(--ink);margin:2.4rem 0 1rem;outline:none}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:2.2rem;height:2.2rem;border-radius:50%;background:var(--soft);border:1px solid var(--ink);cursor:pointer}
.range::-moz-range-thumb{width:2.2rem;height:2.2rem;border-radius:50%;background:var(--soft);border:1px solid var(--ink);cursor:pointer}
.range-l{display:flex;justify-content:space-between;font-size:1.2rem;color:var(--ink-2)}

/* ---------- прогресс кривой ---------- */
.prog{height:1rem;border:1px solid var(--ink);border-radius:50px;overflow:hidden}
.prog i{display:block;height:100%;background:var(--ink)}

/* ---------- таблица сделок ---------- */
.tt{width:100%;border-collapse:collapse;font-size:1.4rem}
.tt th{text-align:left;font-weight:500;font-size:1.25rem;color:var(--ink-2);padding:1.2rem 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}
.tt td{padding:1.2rem 0;border-bottom:1px solid var(--line);white-space:nowrap}
.tt .r{text-align:right}
.tt .sell{color:var(--ink-2)}
.tt .you{font-weight:500}

/* ---------- плашка статуса (мобила) ---------- */
.dock{display:none}
@media (max-width:900px){
  .dock{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:25;background:var(--soft);border-top:1px solid var(--ink);padding:1.2rem var(--pad);align-items:center;justify-content:space-between;gap:1.6rem;font-size:1.4rem}
  .dock.closed{background:var(--veil);color:#fff;border-top-color:var(--veil)}
  .dock .pill{padding:.8rem 1.8rem;font-size:1.6rem}
  .dock.closed .pill{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
  body.has-dock{padding-bottom:6.4rem}
}

/* ---------- поля ---------- */
.fld{margin-bottom:3.6rem}
.fld>.label{display:block;margin-bottom:1rem}
.inp{width:100%;border-bottom:1px solid var(--ink);padding:.6rem 0 1rem;font:400 3.2rem/1.2 var(--serif);outline:none;border-radius:0;letter-spacing:-.01em}
.inp::placeholder{color:var(--ink);opacity:.28}
.inp:focus{border-bottom-color:var(--ink-3)}
textarea.inp{resize:none;font-size:2.4rem;min-height:9rem}
.hint{font-size:1.3rem;color:var(--ink-2);margin-top:.8rem}
.err{font-size:1.3rem;color:#b3261e;margin-top:.8rem;min-height:1.8rem}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:4rem}

/* ---------- закрыто (оверлей-стиль главной) ---------- */
.veil{background:var(--veil);color:#fff;border-radius:2.4rem}
.veil .pill{background:transparent;border-color:rgba(255,255,255,.6);color:#fff}
.veil .pill:hover:not(:disabled){background:#fff;color:var(--veil)}
.veil .soft{color:var(--ink-3)}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(14px);animation:rv .8s cubic-bezier(.2,.7,.2,1) forwards}
.rv.d1{animation-delay:.08s}.rv.d2{animation-delay:.16s}.rv.d3{animation-delay:.24s}.rv.d4{animation-delay:.32s}
@keyframes rv{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.rv{animation:none;opacity:1;transform:none}.st.open i{animation:none}}

/* ---------- адаптив ---------- */
@media (max-width:900px){
  :root{--pad:2rem}
  .hdr-in{grid-template-columns:1fr auto;height:6.4rem}
  .hdr .tabs-desk,.now{display:none}
  .mob-tabs{display:flex;justify-content:center;padding:0 var(--pad) 1.2rem}
  .mob-tabs .seg{width:100%}
  .mob-tabs .seg a{flex:1;text-align:center}
  .grid2{grid-template-columns:1fr;gap:0}
  .ftr{margin-top:8rem}
  .ftr-lead span{margin-left:2rem}
}