:root{color-scheme:dark;--bg:#070707;--card:#0e0e0e;--bd:#1b1b1b;--ink:#e9ecef;--mut:#7d8790;--up:#3ddc84;--dn:#e0524e;--mint:#7bf0b0;--yel:#f5c518;--grid:#141414;--tick:#6f7a84;--tt:#1b1b1b}
:root[data-theme=light]{color-scheme:light;--bg:#eef1f4;--card:#ffffff;--bd:#d9e0e6;--ink:#14222e;--mut:#5d6f7e;--up:#0f9d58;--dn:#d1403b;--mint:#12a37a;--yel:#a87400;--grid:#e6ebef;--tick:#5d6f7e;--tt:#ffffff}
*{box-sizing:border-box;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Montserrat,system-ui,sans-serif;padding:max(16px,env(safe-area-inset-top)) 16px 32px}
main{max-width:980px;margin:0 auto}
header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}
h1{font-size:18px;margin:0;font-weight:700}
#status{font-size:12px;color:var(--mut);display:flex;align-items:center;gap:8px}
#status.demo{color:var(--yel)}
#dot{width:9px;height:9px;border-radius:50%;background:var(--mut)}
#dot.on{background:var(--up);animation:p 1.6s infinite}
#status.demo #dot{background:var(--yel);animation:none}
@keyframes p{50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){#dot.on{animation:none}}
.right{display:flex;align-items:center;gap:14px}
#theme{font:inherit;font-size:16px;line-height:1;width:36px;height:36px;color:var(--ink);background:var(--card);border:1px solid var(--bd);border-radius:8px;cursor:pointer}
#theme:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.hero{background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:20px 20px 12px}
.top{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
#name{font-size:15px;font-weight:500;color:var(--mut)}
#price{font-size:clamp(32px,7vw,54px);font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
#chg{font-size:16px;font-weight:600}
.up{color:var(--up)}.down{color:var(--dn)}
.wrap{height:340px;margin-top:8px}
.list{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:10px;margin-top:14px}
.list button{font:inherit;color:inherit;text-align:left;background:var(--card);border:1px solid var(--bd);border-radius:10px;padding:12px 14px;cursor:pointer}
.list button[aria-pressed=true]{border-color:var(--mint);box-shadow:inset 0 0 0 1px var(--mint)}
.list button:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.list b{display:block;font-size:13px;font-weight:600}
.list span{font-variant-numeric:tabular-nums;font-size:15px;font-weight:500}
.list small{display:block;font-size:12px;margin-top:2px;font-weight:500}
input{-webkit-user-select:text;user-select:text}
.hh{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.per{display:flex;gap:6px}
.per button{font:inherit;font-size:12px;font-weight:600;color:var(--ink);background:var(--bg);border:1px solid var(--bd);border-radius:6px;padding:6px 10px;cursor:pointer}
.per button[aria-pressed=true]{border-color:var(--mint);color:var(--mint)}
.per button:focus-visible,#swap:focus-visible,input:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.sp{display:block;width:100%;height:28px;margin-top:8px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
@media (max-width:720px){.grid2{grid-template-columns:1fr}}
.panel{background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:16px 18px}
.panel h2{font-size:14px;font-weight:700;margin:0 0 12px}
.panel h3{font-size:12px;font-weight:600;color:var(--mut);margin:0 0 6px}
.crow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#amt{font:inherit;font-size:18px;font-weight:600;width:130px;color:var(--ink);background:var(--bg);border:1px solid var(--bd);border-radius:8px;padding:8px 10px}
.cc{font-weight:600;font-size:14px;color:var(--mut)}
#swap{font:inherit;font-size:16px;width:36px;height:36px;color:var(--ink);background:var(--bg);border:1px solid var(--bd);border-radius:8px;cursor:pointer}
.big{font-size:clamp(26px,5vw,36px);font-weight:700;margin-top:14px;font-variant-numeric:tabular-nums}
.mut{font-size:12px;color:var(--mut);margin-top:6px}
.seg{display:flex;gap:6px;margin-top:12px}
.seg button{font:inherit;font-size:12px;font-weight:600;color:var(--ink);background:var(--bg);border:1px solid var(--bd);border-radius:6px;padding:6px 12px;cursor:pointer}
.seg button[aria-pressed=true]{border-color:var(--mint);color:var(--mint)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
ul{list-style:none;margin:0;padding:0}
li{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--bd);font-size:13px;font-variant-numeric:tabular-nums}
li:last-child{border-bottom:0}
.code{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default;cursor:text;background:var(--bg);border:1px solid var(--bd);border-radius:8px;padding:12px 14px;margin:10px 0;font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow:auto;white-space:pre;max-height:260px}
.api table{width:100%;border-collapse:collapse;font-size:13px;margin-top:6px}
.api td{padding:7px 0;border-bottom:1px solid var(--bd);vertical-align:top}
.api td:first-child{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--mint);width:120px}
.api tr:last-child td{border-bottom:0}
.api summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:700;border-radius:6px}
.api summary::-webkit-details-marker{display:none}
.api summary::after{content:"";width:8px;height:8px;margin-right:4px;border-right:2px solid var(--mut);border-bottom:2px solid var(--mut);transform:rotate(45deg);transition:transform .2s}
.api[open] summary::after{transform:rotate(-135deg)}
.api summary:focus-visible{outline:2px solid var(--mint);outline-offset:4px}
.apibody{margin-top:12px}
@media (prefers-reduced-motion:reduce){.api summary::after{transition:none}}
.api .seg button{position:relative;overflow:hidden;transition:border-color .4s ease,color .4s ease,background-color .4s ease,box-shadow .4s ease,transform .4s cubic-bezier(.22,1,.36,1)}
.api .seg button::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 20%,color-mix(in srgb,var(--mint) 30%,transparent) 50%,transparent 80%);transform:translateX(-110%)}
@media (hover:hover){
  .api .seg button:hover{border-color:var(--mint);color:var(--mint);background-color:color-mix(in srgb,var(--mint) 8%,var(--bg));transform:translateY(-1px);box-shadow:0 6px 16px -8px var(--mint)}
  .api .seg button:hover::before{transform:translateX(110%);transition:transform 1.1s cubic-bezier(.4,0,.2,1)}
}
.api .seg button:active{transform:translateY(0) scale(.97);transition-duration:.12s}
@media (prefers-reduced-motion:reduce){
  .api .seg button{transition:none}
  .api .seg button:hover{transform:none}
  .api .seg button:hover::before{transition:none;opacity:0}
}
footer{margin-top:14px;font-size:12px;color:var(--mut);line-height:1.5}

/* страница 404 */
body.nf{min-height:100dvh;align-items:center;justify-content:center;text-align:center}
.nf main{max-width:420px}
.nf .c404{font-size:clamp(72px,20vw,120px);font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--mint)}
.nf h1{font-size:20px;margin:12px 0 8px}
.nf p{color:var(--mut);font-size:14px;line-height:1.6;margin:0 0 22px}
.nf a.btn{position:relative;overflow:hidden;display:inline-block;font-size:13px;font-weight:600;color:var(--ink);background:var(--card);border:1px solid var(--bd);border-radius:8px;padding:10px 18px;text-decoration:none;transition:border-color .4s ease,color .4s ease,background-color .4s ease,box-shadow .4s ease,transform .4s cubic-bezier(.22,1,.36,1)}
.nf a.btn::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 20%,color-mix(in srgb,var(--mint) 30%,transparent) 50%,transparent 80%);transform:translateX(-110%)}
.nf a.btn:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
@media (hover:hover){
  .nf a.btn:hover{border-color:var(--mint);color:var(--mint);background-color:color-mix(in srgb,var(--mint) 8%,var(--card));transform:translateY(-1px);box-shadow:0 6px 16px -8px var(--mint)}
  .nf a.btn:hover::before{transform:translateX(110%);transition:transform 1.1s cubic-bezier(.4,0,.2,1)}
}
.nf a.btn:active{transform:translateY(0) scale(.97);transition-duration:.12s}
@media (prefers-reduced-motion:reduce){
  .nf a.btn{transition:none}
  .nf a.btn:hover{transform:none}
  .nf a.btn:hover::before{transition:none;opacity:0}
}