/* =========================================================================
   Play4up — brand wordmark (#11) + dark-theme contrast fixes (#10)
   Loaded AFTER ui.css so it can safely override.
   ========================================================================= */

/* ---------- #11 brand wordmark (crown removed) ---------- */
.sh-brand{display:flex;align-items:center;gap:11px;min-width:0}
.sh-brandtext{min-width:0}

.sh-wordmark{
  display:flex;align-items:baseline;gap:1px;
  font-family:'Russo One','Manrope','Inter',system-ui,sans-serif;
  font-size:27px;line-height:1.02;letter-spacing:.4px;
  font-weight:800;
  user-select:none;
}
.sh-wordmark .wm-play,
.sh-wordmark .wm-4up{display:inline-block}

/* light theme: white would be invisible on the light background,
   so "play" uses deep ink with a soft blue halo; "4up" stays blue. */
.sh-wordmark .wm-play{
  color:#0f1e33;
  text-shadow:0 1px 0 rgba(255,255,255,.85), 0 0 8px rgba(120,170,255,.26);
}
.sh-wordmark .wm-4up{
  color:var(--c-blue);
  text-shadow:0 0 5px rgba(47,125,251,.3), 0 0 11px rgba(47,125,251,.16);
}

/* dark theme: exactly what was asked — glowing white "play" + blue "4up" */
html[data-theme="dark"] .sh-wordmark .wm-play{
  color:#ffffff;
  text-shadow:
    0 0 4px rgba(255,255,255,.6),
    0 0 10px rgba(255,255,255,.28);
}
html[data-theme="dark"] .sh-wordmark .wm-4up{
  color:#5aa2ff;
  text-shadow:
    0 0 4px rgba(90,162,255,.55),
    0 0 11px rgba(90,162,255,.3);
}

.sh-brand small{
  display:block;font-size:11.5px;font-weight:600;
  color:var(--c-text-3);margin-top:2px;
  letter-spacing:1.4px;text-transform:uppercase;
}

/* p.3: postoyannaya animaciya filter:brightness ubrana —
   ona zastavlyala brauzer pererisovyvat' logotip 60 raz v sekundu
   i davala izlishne sil'noe svechenie. */
.sh-wordmark{animation:none}

/* =========================================================================
   #10 — dark-theme contrast fixes
   ========================================================================= */

/* --- sliders: the project had NO range styling at all (native = invisible
       track on dark backgrounds). Give them an explicit, themed look. --- */
input[type="range"]{
  -webkit-appearance:none;appearance:none;
  width:100%;height:26px;margin:0;padding:0;
  background:transparent;cursor:pointer;
  accent-color:var(--c-blue);
}
input[type="range"]::-webkit-slider-runnable-track{
  height:7px;border-radius:999px;
  background:linear-gradient(90deg,var(--c-blue),var(--c-blue-2));
  border:1px solid var(--c-line);
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:20px;height:20px;border-radius:50%;
  margin-top:-7px;
  background:#fff;
  border:2px solid var(--c-blue);
  box-shadow:0 2px 8px rgba(20,54,110,.35);
}
input[type="range"]::-moz-range-track{
  height:7px;border-radius:999px;
  background:linear-gradient(90deg,var(--c-blue),var(--c-blue-2));
  border:1px solid var(--c-line);
}
input[type="range"]::-moz-range-thumb{
  width:20px;height:20px;border-radius:50%;
  background:#fff;border:2px solid var(--c-blue);
  box-shadow:0 2px 8px rgba(20,54,110,.35);
}
input[type="range"]:focus-visible::-webkit-slider-thumb{
  outline:3px solid rgba(79,149,255,.45);outline-offset:2px;
}

html[data-theme="dark"] input[type="range"]::-webkit-slider-runnable-track{
  background:linear-gradient(90deg,#4f95ff,#75b1ff);
  border-color:#2b4a7a;
}

/* --- text that blended into the dark background --- */
html[data-theme="dark"] .sh-brand small,
html[data-theme="dark"] .muted,
html[data-theme="dark"] small{color:var(--c-text-2)}

/* inputs / selects / textareas */
html[data-theme="dark"] input:not([type="range"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{
  background:var(--c-surface-2);
  color:var(--c-text);
  border:1px solid var(--c-line);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{color:var(--c-text-3)}

/* generic dark-theme legibility guards */
html[data-theme="dark"] .sh-card,
html[data-theme="dark"] .pf-card,
html[data-theme="dark"] .dp-card,
html[data-theme="dark"] .set-row{border-color:var(--c-line)}


/* ================= #12 BTC chart ================= */
.exc-wrap{margin-top:12px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);
  border-radius:14px;padding:10px 12px 8px;backdrop-filter:blur(4px)}
.exc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px}
.exc-ttl{font-size:12px;font-weight:600;opacity:.85;letter-spacing:.2px}
.exc-badge{font-size:12px;font-weight:800;padding:3px 9px;border-radius:20px;
  background:rgba(255,255,255,.18);white-space:nowrap}
.exc-badge i{font-style:normal;font-weight:600;opacity:.85}
.exc-wrap.up .exc-badge{color:#c8ffdd}
.exc-wrap.down .exc-badge{color:#ffd6d2}
.exc-svg{display:block;width:100%;height:104px;overflow:visible}
.exc-grid{stroke:rgba(255,255,255,.16);stroke-width:1;stroke-dasharray:3 4}
.exc-foot{display:flex;justify-content:space-between;font-size:11px;opacity:.8;margin-top:2px}
.exc-foot b{font-weight:700}

/* liniya risuetsya sleva napravo pri poyavlenii */
.exc-line{stroke-dasharray:1400;stroke-dashoffset:1400;animation:excDraw 1.05s cubic-bezier(.22,.61,.36,1) forwards}
@keyframes excDraw{to{stroke-dashoffset:0}}
.exc-ping{transform-box:fill-box;transform-origin:center;animation:excPing 1.9s ease-out infinite}
@keyframes excPing{0%{r:3.6;opacity:.9}70%{r:11;opacity:0}100%{r:11;opacity:0}}
@media (prefers-reduced-motion:reduce){
  .exc-line{animation:none;stroke-dashoffset:0}
  .exc-ping{animation:none;opacity:0}
}


/* ============== #2 Kvesty / Bank / Birzha - ubiraem serye knopki ============== */

/* --- vtorichnaya knopka: bylo rgba(120,150,200,.16) + seryy tekst --- */
.btn.secondary{
  background:linear-gradient(180deg,#f4f8ff,#e4edff);
  color:var(--c-blue-deep);
  border:1.5px solid rgba(47,125,251,.28);
  box-shadow:0 4px 12px rgba(47,125,251,.14);
  font-weight:700;
}
.btn.secondary:active{box-shadow:0 2px 6px rgba(47,125,251,.16)}
html[data-theme="dark"] .btn.secondary{
  background:linear-gradient(180deg,#1b3055,#152744);
  color:var(--c-blue-2);
  border-color:rgba(117,177,255,.34);
  box-shadow:0 4px 14px rgba(0,0,0,.32);
}

/* --- segmentnye pereklyuchateli (bank + kvesty) --- */
.bk-tabs,.q-tabs{
  background:rgba(120,150,200,.12);
  padding:4px;border-radius:16px;gap:4px;
}
html[data-theme="dark"] .bk-tabs,
html[data-theme="dark"] .q-tabs{background:rgba(255,255,255,.06)}
.bk-tab,.q-tab{
  background:transparent;color:var(--c-text-2);
  border-radius:12px;transition:background .18s var(--ease),color .18s var(--ease),box-shadow .18s var(--ease);
}
.bk-tab.on,.q-tab.on{
  background:linear-gradient(180deg,var(--c-blue-2),var(--c-blue));
  color:#fff;box-shadow:0 6px 16px rgba(47,125,251,.32);
}
html[data-theme="dark"] .bk-tab:not(.on),
html[data-theme="dark"] .q-tab:not(.on){color:var(--c-text-2)}

/* --- vybor sroka vklada --- */
.bk-term{
  background:var(--c-surface);
  border:1.5px solid var(--c-line);
  box-shadow:0 2px 8px rgba(60,100,180,.06);
}
.bk-term b{color:var(--c-text)}
.bk-term small{color:var(--c-blue)}
.bk-term.on{
  border-color:var(--c-blue);
  background:linear-gradient(180deg,rgba(47,125,251,.14),rgba(47,125,251,.06));
  box-shadow:0 6px 16px rgba(47,125,251,.2);
}
html[data-theme="dark"] .bk-term{background:var(--c-surface);border-color:var(--c-line)}
html[data-theme="dark"] .bk-term.on{background:linear-gradient(180deg,rgba(79,149,255,.22),rgba(79,149,255,.08))}

/* --- kartochki vkladov / kvestov --- */
.bk-item,.q-item,.pf-act{
  background:var(--c-surface);
  border:1px solid var(--c-line);
}
.bk-item-top b,.bk-item-row b,.bk-sav-head b,.q-desc,.pf-act{color:var(--c-text)}
.bk-item-row,.bk-sav-head span{color:var(--c-text-2)}
.bk-empty,.bk-hint,.bk-sav-sub,.q-meta,.q-empty,.q-load{color:var(--c-text-3)}

/* --- kvesty: list + knopka "Zabrat" --- */
.q-sheet{background:var(--c-bg-2)}
html[data-theme="dark"] .q-sheet{background:var(--c-bg-2)}
.q-head b{color:var(--c-text)}
.q-close{
  background:rgba(120,150,200,.16);color:var(--c-text-2);
  transition:background .15s var(--ease);
}
.q-close:active{background:rgba(120,150,200,.28)}
html[data-theme="dark"] .q-close{background:rgba(255,255,255,.09);color:var(--c-text)}
.q-bar{background:rgba(120,150,200,.2)}
html[data-theme="dark"] .q-bar{background:rgba(255,255,255,.1)}
.q-bar i{
  background:linear-gradient(90deg,var(--c-blue-2),var(--c-blue));
  box-shadow:0 0 8px rgba(47,125,251,.5);
  transition:width .5s var(--ease-out);
}
.q-item.done .q-bar i{background:linear-gradient(90deg,#3ddc91,#17b26a);box-shadow:0 0 8px rgba(23,178,106,.5)}
.q-claim{
  background:linear-gradient(180deg,#3ddc91,#12a15e);
  box-shadow:0 6px 16px rgba(23,178,106,.34);
  transition:transform .12s var(--ease),box-shadow .15s var(--ease);
}
.q-claim:active{transform:scale(.96)}
.q-claim.done{animation:qGlow 1.9s ease-in-out infinite}
@keyframes qGlow{
  0%,100%{box-shadow:0 6px 16px rgba(23,178,106,.34)}
  50%{box-shadow:0 6px 22px rgba(23,178,106,.62)}
}
.q-rew{color:var(--c-blue)}
.q-claimed,.q-check{color:var(--c-green)}
.q-item.done{opacity:1;border-color:rgba(23,178,106,.34);background:linear-gradient(180deg,rgba(23,178,106,.07),transparent)}

/* --- birzha: kartochka kursa + balansy --- */
.ex-price-card{
  background:linear-gradient(135deg,#2f6bff 0%,#1e50d8 55%,#1741ad 100%);
  position:relative;overflow:hidden;
}
.ex-price-card::after{
  content:"";position:absolute;top:-40%;right:-18%;width:190px;height:190px;
  background:radial-gradient(circle,rgba(255,255,255,.22),transparent 68%);
  pointer-events:none;
}
.ex-bal{background:var(--c-surface);border:1px solid var(--c-line)}
.ex-bal small{color:var(--c-text-2)}
.ex-bal b{color:var(--c-text)}

/* --- knopki profilya --- */
.pf-act{transition:transform .12s var(--ease),box-shadow .15s var(--ease)}
.pf-act:active{transform:scale(.97)}
@media (prefers-reduced-motion:reduce){
  .q-claim.done{animation:none}
  .q-bar i{transition:none}
}


/* ============ #7: obyazatelnye usloviya kolesa fortuny ============ */
.fw-tasks{
  width:100%;
  margin:2px 0 10px;
  padding:12px;
  border-radius:var(--r-lg,16px);
  background:var(--c-surface,#fff);
  border:1px solid var(--c-line,#dfe8f7);
  box-shadow:var(--sh-1,0 2px 8px rgba(20,40,80,.06));
}
.fw-tasks[hidden]{display:none}
.fw-thead{
  font-size:12px;font-weight:700;letter-spacing:.02em;
  text-transform:uppercase;color:var(--c-text-3,#8b9db8);
  margin:0 2px 10px;
}
.fw-task{
  display:flex;align-items:center;gap:10px;
  padding:9px 10px;margin-bottom:6px;
  border-radius:var(--r-md,12px);
  background:var(--c-surface-2,#f4f8ff);
  border:1px solid transparent;
  transition:background var(--t-fast,.16s) var(--ease,ease),border-color var(--t-fast,.16s) var(--ease,ease);
}
.fw-task:last-of-type{margin-bottom:10px}
.fw-task.done{
  background:rgba(23,178,106,.10);
  border-color:rgba(23,178,106,.32);
}
.fw-tick{
  flex:0 0 22px;width:22px;height:22px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  font-size:13px;font-weight:800;line-height:1;
  color:#fff;
  background:var(--c-line,#dfe8f7);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.04);
}
.fw-task.done .fw-tick{
  background:linear-gradient(160deg,#2ad183,var(--c-green,#17b26a));
  box-shadow:0 2px 8px rgba(23,178,106,.45);
}
.fw-tinfo{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.fw-tinfo b{font-size:14px;font-weight:650;color:var(--c-text,#0f1e33);line-height:1.2}
.fw-tinfo small{
  font-size:11.5px;color:var(--c-text-2,#5b6f8c);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.fw-tact{flex:0 0 auto}
.fw-tbtn{
  display:inline-block;
  padding:6px 12px;
  border:0;border-radius:999px;
  font:inherit;font-size:12.5px;font-weight:700;
  color:#fff;text-decoration:none;cursor:pointer;
  background:linear-gradient(160deg,var(--c-blue-2,#57a6ff),var(--c-blue,#2f7dfb));
  box-shadow:0 3px 10px rgba(47,125,251,.38);
  transition:transform var(--t-fast,.16s) var(--ease,ease),box-shadow var(--t-fast,.16s) var(--ease,ease);
}
.fw-tbtn:active{transform:scale(.94);box-shadow:0 1px 5px rgba(47,125,251,.3)}
.fw-recheck{
  width:100%;
  padding:10px;
  border:1px solid var(--c-line,#dfe8f7);
  border-radius:var(--r-md,12px);
  background:transparent;
  font:inherit;font-size:13px;font-weight:700;
  color:var(--c-blue,#2f7dfb);
  cursor:pointer;
  transition:background var(--t-fast,.16s) var(--ease,ease);
}
.fw-recheck:active{background:var(--c-blue-soft,#e6f0ff)}

html[data-theme="dark"] .fw-tick{background:#2a4066}
html[data-theme="dark"] .fw-task.done{
  background:rgba(42,209,131,.14);
  border-color:rgba(42,209,131,.34);
}
html[data-theme="dark"] .fw-recheck:active{background:rgba(79,149,255,.16)}

/* NFT-bejdzh na avatare profilya udalyon po pros'be (p.2) */
.pf-ava-wrap { position: relative; }


/* =========================================================================
   v216 — 1) brand wordmark redesign  2) home screen polish
           3) full dark-theme contrast pass  4) BTC chart (birzha)
   ========================================================================= */

/* ---------------- 1. BRAND WORDMARK (bez korony) ---------------- */
/* na glavnom ekrane korony net voobshche: badge/logo skryt */
.screen-home .sh-brand .sh-logo{display:none!important}
.screen-home .sh-brand::before,
.screen-home .sh-wordmark::before,
.screen-home .sh-wordmark::after{content:none!important}

.sh-head-home{align-items:flex-start;margin-bottom:18px}

.sh-wordmark{
  position:relative;
  display:inline-flex;align-items:baseline;gap:0;
  font-family:'Russo One','Manrope','Inter',system-ui,sans-serif;
  font-size:30px;line-height:1;letter-spacing:.2px;font-weight:800;
  text-transform:lowercase;
  padding-bottom:2px;
}
/* "play" — belyy i svetitsya (v svetloy teme — chernila s halo) */
.sh-wordmark .wm-play{
  color:#0d1a2e;
  text-shadow:0 1px 0 rgba(255,255,255,.9),0 0 18px rgba(120,170,255,.5);
}
/* "4up" — siniy s neonovym svecheniem */
.sh-wordmark .wm-4up{
  color:#2f7dfb;
  background:linear-gradient(180deg,#5aa2ff 0%,#2f7dfb 55%,#1b5fd0 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 4px rgba(47,125,251,.3));
}
/* tonkaya svetyashchayasya linia pod logotipom */
.sh-wordmark::before{
  content:"";position:absolute;left:1px;right:1px;bottom:-3px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,rgba(47,125,251,0),#2f7dfb 45%,#8fc6ff 70%,rgba(143,198,255,0));
  opacity:.75;
}

html[data-theme="dark"] .sh-wordmark .wm-play{
  color:#fff;
  text-shadow:
    0 0 4px rgba(255,255,255,.95),
    0 0 14px rgba(255,255,255,.6),
    0 0 30px rgba(170,205,255,.45);
}
html[data-theme="dark"] .sh-wordmark .wm-4up{
  background:linear-gradient(180deg,#8cc0ff 0%,#4f95ff 55%,#2f7dfb 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 5px rgba(90,162,255,.45));
}

/* podpis' "web casino" s zhivoy tochkoy */
.sh-brand small{
  display:flex;align-items:center;gap:6px;
  font-size:10.5px;font-weight:700;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--c-text-3);margin-top:7px;
}
.wm-dot{
  width:6px;height:6px;border-radius:50%;flex:0 0 auto;
  background:var(--c-green);box-shadow:0 0 0 3px rgba(23,178,106,.18);
  animation:wmDot 1.9s var(--ease) infinite;
}
@keyframes wmDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.82)}}
html[data-theme="dark"] .sh-brand small{color:#9db2d4}

@media (max-width:360px){ .sh-wordmark{font-size:26px} }
@media (prefers-reduced-motion:reduce){ .wm-dot{animation:none} }

/* ---------------- 2. HOME SCREEN POLISH ---------------- */
/* balans-karta: chishche, glubzhe, bez "kolhoza" */
.screen-home .sh-balance{
  border-radius:26px;padding:18px 20px 20px;
  background:
    radial-gradient(120% 120% at 12% 0%,rgba(255,255,255,.28),rgba(255,255,255,0) 55%),
    linear-gradient(146deg,#2f7dfb 0%,#3f8dff 45%,#63aeff 100%);
  box-shadow:0 14px 34px rgba(29,86,175,.28),inset 0 0 0 1px rgba(255,255,255,.18);
}
html[data-theme="dark"] .screen-home .sh-balance{
  background:
    radial-gradient(120% 120% at 12% 0%,rgba(255,255,255,.16),rgba(255,255,255,0) 55%),
    linear-gradient(146deg,#14417f 0%,#1d54a8 45%,#2f7dfb 100%);
  box-shadow:0 16px 38px rgba(0,0,0,.45),inset 0 0 0 1px rgba(140,190,255,.18);
}
.sh-online-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:999px;margin-bottom:14px;
  background:rgba(255,255,255,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
  font-size:11.5px;font-weight:700;color:#fff;letter-spacing:.2px;
}
.sh-online-chip i{width:7px;height:7px;border-radius:50%;background:#43e08a;box-shadow:0 0 8px #43e08a}
.sh-online-chip span{opacity:.82;font-weight:600}
.screen-home .sh-bal-btn{
  border-radius:16px;font-weight:750;min-height:46px;
  background:rgba(255,255,255,.16);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.26);
}
.screen-home .sh-bal-btn.primary{
  background:#fff;color:#1b5fd0;box-shadow:0 8px 20px rgba(6,32,80,.24);
}
.screen-home .sh-bal-btn svg{width:18px;height:18px}

/* bystrye deystviya pod balansom */
.sh-quick{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:-8px 0 20px;
}
.sh-qbtn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:12px 4px 10px;border:1px solid var(--c-line);border-radius:18px;
  background:var(--c-surface);color:var(--c-text-2);cursor:pointer;
  font-size:11.5px;font-weight:700;
  box-shadow:var(--sh-1);
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.sh-qbtn svg{width:22px;height:22px;fill:none;stroke:var(--c-blue);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sh-qbtn:active{transform:scale(.95);box-shadow:0 2px 6px rgba(20,54,110,.1)}
.sh-qbtn span{color:var(--c-text)}
html[data-theme="dark"] .sh-qbtn{background:var(--c-surface-2);border-color:var(--c-line)}
html[data-theme="dark"] .sh-qbtn svg{stroke:var(--c-blue-2)}

/* zagolovki sekciy */
.sh-sec{
  display:flex;align-items:center;justify-content:space-between;
  font-size:15px;font-weight:750;color:var(--c-text);margin:0 2px 12px;letter-spacing:-.2px;
}
.sh-sec .more{
  font-size:12.5px;font-weight:700;color:var(--c-blue);cursor:pointer;
  padding:5px 10px;border-radius:999px;background:var(--c-blue-soft);
}
html[data-theme="dark"] .sh-sec{color:var(--c-text)}
html[data-theme="dark"] .sh-sec .more{background:rgba(79,149,255,.16);color:var(--c-blue-2)}

/* kartochki igr: rovnee i akkuratnee */
.gcard{border-radius:20px;box-shadow:var(--sh-1);overflow:hidden}
.gcard:active{transform:scale(.975)}
html[data-theme="dark"] .gcard{box-shadow:0 6px 20px rgba(0,0,0,.4)}

/* ---------------- 3. DARK THEME: POLZUNKI + TEKST ---------------- */
/* native range: v tyomnoy teme trek byl nevidim */
input[type="range"]::-webkit-slider-runnable-track{
  background:linear-gradient(90deg,var(--c-blue),var(--c-blue-2));
  border:1px solid var(--c-line);
}
html[data-theme="dark"] input[type="range"]{accent-color:var(--c-blue-2)}
html[data-theme="dark"] input[type="range"]::-webkit-slider-runnable-track{
  background:linear-gradient(90deg,#4f95ff,#8cc0ff);border-color:#33578c;
}
html[data-theme="dark"] input[type="range"]::-moz-range-track{
  background:linear-gradient(90deg,#4f95ff,#8cc0ff);border-color:#33578c;
}
html[data-theme="dark"] input[type="range"]::-webkit-slider-thumb{
  background:#f2f8ff;border-color:#8cc0ff;box-shadow:0 2px 10px rgba(0,0,0,.55),0 0 0 4px rgba(140,192,255,.18);
}
html[data-theme="dark"] input[type="range"]::-moz-range-thumb{
  background:#f2f8ff;border-color:#8cc0ff;box-shadow:0 2px 10px rgba(0,0,0,.55);
}

/* kastomnyy polzunok kubikov (dice): trek i ruchka na tyomnom fone */
html[data-theme="dark"] .dc-track{
  background:#0b1526;border-color:#33578c;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.6),0 0 0 1px rgba(140,192,255,.1);
}
html[data-theme="dark"] .dc-handle{
  border-color:#0b1526;
  box-shadow:0 4px 16px rgba(120,170,255,.55),0 0 0 3px rgba(140,192,255,.18);
}
html[data-theme="dark"] .dc-pin i{background:#f2f8ff;border-color:#f2f8ff}

/* pereklyuchateli nastroyek: vyklyuchennoe sostoyanie bylo nevidimo */
html[data-theme="dark"] .set-toggle{
  background:#2a4066;box-shadow:inset 0 0 0 1px rgba(140,192,255,.22);
}
html[data-theme="dark"] .set-toggle.on{background:var(--c-blue);box-shadow:0 0 0 1px rgba(140,192,255,.35),0 0 12px rgba(79,149,255,.45)}
html[data-theme="dark"] .set-toggle i{background:#f2f8ff;box-shadow:0 1px 4px rgba(0,0,0,.6)}
html[data-theme="dark"] .set-row{background:var(--c-surface)}
html[data-theme="dark"] .set-ic{background:rgba(79,149,255,.16);color:var(--c-blue-2)}
html[data-theme="dark"] .set-tx b{color:var(--c-text)}
html[data-theme="dark"] .set-tx small{color:var(--c-text-2)}

/* progress-bary i shkaly */
html[data-theme="dark"] .q-bar,
html[data-theme="dark"] .pf-lvlbar,
html[data-theme="dark"] .bk-bar{background:rgba(140,192,255,.16)}

/* tekst, kotoryy slivalsya s fonom (obshchiy prohod po vsem ekranam) */
html[data-theme="dark"]{
  --c-text:#eaf2ff;
  --c-text-2:#a9bede;
  --c-text-3:#8298bb;
}
html[data-theme="dark"] .sh-uinfo .nm{color:var(--c-text)}
html[data-theme="dark"] .sh-uinfo .tag,
html[data-theme="dark"] .gcard .sub,
html[data-theme="dark"] .dp-lbl,
html[data-theme="dark"] .dp-rate span,
html[data-theme="dark"] .bk-hint,
html[data-theme="dark"] .bk-sav-sub,
html[data-theme="dark"] .bk-empty,
html[data-theme="dark"] .q-meta,
html[data-theme="dark"] .q-empty,
html[data-theme="dark"] .q-load,
html[data-theme="dark"] .ex-sub,
html[data-theme="dark"] .pf-mini small,
html[data-theme="dark"] .fw-tinfo small,
html[data-theme="dark"] .navbtn{color:var(--c-text-2)}
html[data-theme="dark"] .gcard .name,
html[data-theme="dark"] .dp-rate b,
html[data-theme="dark"] .bk-item-top b,
html[data-theme="dark"] .q-desc,
html[data-theme="dark"] .fw-tinfo b,
html[data-theme="dark"] .pf-mini b,
html[data-theme="dark"] .sh-brand b{color:var(--c-text)}
html[data-theme="dark"] .navbtn.active{color:var(--c-blue-2)}
html[data-theme="dark"] .dp-card,
html[data-theme="dark"] .bk-item,
html[data-theme="dark"] .q-item,
html[data-theme="dark"] .ex-bal,
html[data-theme="dark"] .fw-tasks{background:var(--c-surface);border-color:var(--c-line)}
html[data-theme="dark"] .fw-task{background:var(--c-surface-2)}
html[data-theme="dark"] .dp-input{background:var(--c-surface-2);border-color:var(--c-line)}
html[data-theme="dark"] .dp-input .cur{color:var(--c-text-2)}
html[data-theme="dark"] .pf-act{background:var(--c-surface-2);color:var(--c-text)}
html[data-theme="dark"] .pf-act svg{stroke:var(--c-blue-2)}
/* ssylki i podskazki */
html[data-theme="dark"] a{color:var(--c-blue-2)}
html[data-theme="dark"] .bk-hint.err,
html[data-theme="dark"] .ex-hint.err{color:#ff8f8f}
html[data-theme="dark"] .bk-hint.ok{color:#4fe3a1}

/* ---------------- 4. BIRZHA: krasivyy grafik ---------------- */
.ex-price-card{border-radius:24px;padding:18px 18px 14px;color:#fff}
.ex-price{font-size:32px;font-weight:800;letter-spacing:-.8px;line-height:1.1;margin:2px 0 2px;font-variant-numeric:tabular-nums}
.ex-sub{font-size:11.5px;opacity:.82;margin-bottom:4px}
.ex-chg{font-weight:800;font-size:13px;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.18)}
.ex-chg.up{color:#c9ffe1}
.ex-chg.down{color:#ffd7d3}

/* karkas grafika */
.exc-wrap{
  margin-top:14px;padding:12px 12px 8px;border-radius:18px;
  background:linear-gradient(180deg,rgba(3,13,33,.62),rgba(3,13,33,.44));
  border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.exc-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.exc-ttl{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;letter-spacing:.2px;opacity:.9}
.exc-ttl i{font-style:normal;font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:999px;background:rgba(255,255,255,.16);opacity:.9}
.exc-badge{
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  font-size:12.5px;font-weight:800;padding:4px 10px;border-radius:999px;
  background:rgba(255,255,255,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
}
.exc-badge i{font-style:normal;font-weight:600;opacity:.85}
.exc-wrap.up .exc-badge{color:#c8ffdd}
.exc-wrap.down .exc-badge{color:#ffd6d2}

.exc-svg{display:block;width:100%;height:150px;overflow:visible}
.exc-grid{stroke:rgba(255,255,255,.14);stroke-width:1;stroke-dasharray:3 5}
.exc-axis{fill:rgba(255,255,255,.6);font-size:7.4px;font-weight:700;font-family:'Inter',system-ui,sans-serif}
.exc-lastlbl{fill:#fff;font-size:8.4px;font-weight:800;font-family:'Inter',system-ui,sans-serif}
.exc-candle-up{fill:#25d07a}
.exc-candle-dn{fill:#ff6b6b}
.exc-wick{stroke-width:.9;opacity:.75}

.exc-line{stroke-dasharray:1600;stroke-dashoffset:1600;animation:excDraw 1.15s cubic-bezier(.22,.61,.36,1) forwards}
@keyframes excDraw{to{stroke-dashoffset:0}}
.exc-ping{transform-box:fill-box;transform-origin:center;animation:excPing 2s ease-out infinite}
@keyframes excPing{0%{r:4;opacity:.85}70%{r:13;opacity:0}100%{r:13;opacity:0}}
.exc-rise{animation:excRise .5s var(--ease-out) both}
@keyframes excRise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* legenda / itogi pod grafikom */
.exc-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px;font-size:11px}
.exc-foot span{opacity:.85}
.exc-foot b{font-weight:800}
.exc-trend{
  display:flex;align-items:center;gap:7px;margin-top:8px;padding:8px 10px;border-radius:13px;
  background:rgba(255,255,255,.12);font-size:11.5px;font-weight:650;line-height:1.35;
}
.exc-trend .ar{font-size:14px;font-weight:900;line-height:1}
.exc-wrap.up .exc-trend .ar{color:#8affc4}
.exc-wrap.down .exc-trend .ar{color:#ffb3ae}
.exc-tf{display:flex;gap:6px;margin-top:8px}
.exc-tf button{
  flex:1;padding:6px 0;border:0;border-radius:10px;cursor:pointer;
  font:inherit;font-size:11.5px;font-weight:750;color:rgba(255,255,255,.78);
  background:rgba(255,255,255,.12);
}
.exc-tf button.on{background:#fff;color:#1b5fd0}

@media (prefers-reduced-motion:reduce){
  .exc-line{animation:none;stroke-dashoffset:0}
  .exc-ping{animation:none;opacity:0}
  .exc-rise{animation:none}
}