/* MRKT up — a fictional trading app. */
:root{--ink:#e9edf2;--muted:#8b95a3;--page:#0d1117;--card:#151b23;--line:#222a35;--up:#2ecc71;--down:#e74c3c;--brand:#2ecc71}
body{background:var(--page);color:var(--ink)}a{color:var(--brand)}
.top{display:flex;align-items:center;gap:18px;padding:12px clamp(14px,3vw,28px);border-bottom:1px solid var(--line)}
.mark{font-weight:800;font-size:19px;letter-spacing:-.02em}.mark i{font-style:normal;color:var(--brand)}
.top .search input{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:7px 12px;font:inherit;font-size:13px;color:var(--muted);width:min(220px,30vw)}
.top nav{margin-left:auto;display:flex;gap:16px;font-size:13px;color:var(--muted)}
@media(max-width:760px){.top nav{display:none}}
.shell{max-width:1080px;margin:0 auto;padding:24px clamp(14px,3vw,28px) 44px;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:26px;align-items:start}
@media(max-width:880px){.shell{grid-template-columns:1fr}}
.tick{font-size:13px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.name{font-size:15px;color:var(--muted);margin:2px 0 10px}
.px{font-size:clamp(30px,5vw,42px);font-weight:800;letter-spacing:-.025em;margin:0}
.chg{font-size:14px;color:var(--up);margin:4px 0 20px}
.chart{height:clamp(170px,26vw,260px);border-radius:8px;background:var(--card);border:1px solid var(--line);position:relative;overflow:hidden;margin-bottom:10px}
.chart svg{position:absolute;inset:0;width:100%;height:100%}
.ranges{display:flex;gap:6px;margin-bottom:24px}
.ranges span{font-size:12.5px;color:var(--muted);padding:5px 11px;border-radius:5px}
.ranges span.on{background:rgba(46,204,113,.14);color:var(--up)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-bottom:24px}
.stat{background:var(--page);padding:12px 14px}
.stat .k{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.stat .v{font-size:15px;font-weight:600;margin-top:3px;font-variant-numeric:tabular-nums}
.sec h2{font-size:16px;margin:0 0 10px}
.sec p{font-size:14.5px;line-height:1.65;color:#b7c0cb;margin:0 0 12px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:18px;position:sticky;top:18px}
.panel h2{margin:0 0 14px;font-size:15px}
.fld{margin-bottom:12px}
.fld label{display:block;font-size:12px;color:var(--muted);margin-bottom:5px}
.fld input{width:100%;background:var(--page);border:1px solid var(--line);border-radius:6px;padding:9px 11px;font:inherit;font-size:14px;color:var(--ink)}
.row{display:flex;justify-content:space-between;font-size:13.5px;color:var(--muted);padding:7px 0;border-top:1px solid var(--line)}
.row b{color:var(--ink)}
.review{width:100%;background:var(--brand);color:#06240f;border:0;border-radius:8px;padding:12px;font-weight:800;font-size:15px;margin-top:14px}
.about-body{background:var(--page);color:var(--ink)}
.about-body .about-page a{color:#6fd39a}