:root {
  color-scheme: light;
  --bg:#f3f6fa; --surface:#fff; --ink:#0e1d34; --muted:#52647b; --line:#dbe4ef;
  --nav:#101d31; --blue:#205bd7; --blue-soft:#eaf1ff; --green:#087745; --red:#b82847;
  --sans: Inter, "Segoe UI", system-ui, sans-serif;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.55 var(--sans); }
a { color:inherit; text-decoration:none; }
button,input,select { font:inherit; }
button { cursor:pointer; }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible { outline:2px solid var(--blue); outline-offset:3px; }
.wrap { width:min(1280px, calc(100% - 64px)); margin-inline:auto; }
.skip { position:fixed; top:-80px; left:15px; z-index:10; background:var(--surface); padding:10px; }
.skip:focus { top:10px; }
header { background:var(--nav); color:#f3f7ff; }
.bar,.foot,.section-head,.card-end,.market-top,.chart-head,.chart-foot { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.bar { min-height:68px; padding-block:9px; }
.brand { display:inline-flex; align-items:center; gap:10px; white-space:nowrap; font-size:1.11rem; font-weight:760; letter-spacing:-.03em; line-height:1.1; }
.brand-mark { width:32px; height:32px; display:grid; place-items:center; color:#0e1d34; background:#80aaff; border-radius:7px; font-size:22px; }
.brand small { display:block; color:#9fb2ce; font-size:.58rem; font-weight:700; letter-spacing:.12em; margin-top:5px; }
nav,.filters,.pages,.ranges { display:flex; align-items:center; flex-wrap:wrap; gap:18px; }
nav a { font-size:.88rem; font-weight:700; }
header nav a:not(.pill):hover { color:#9dbbff; }
.nav-login { border-left:1px solid #3b4a63; padding-left:17px; }
.pill,.outline { min-height:36px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--blue); border-radius:7px; padding:6px 13px; font-weight:720; }
.pill { color:white; background:var(--blue); }
.pill:hover { background:#174ab4; }
.outline { color:var(--blue); background:var(--surface); }
.label { color:#38547a; font-size:.67rem; letter-spacing:.12em; font-weight:800; }
.label i { display:inline-block; width:7px; height:7px; margin-right:6px; border-radius:50%; background:var(--blue); vertical-align:1px; }
.market { padding:25px 0 6px; }
.market-top { align-items:flex-end; margin-bottom:17px; }
.market-top h1,.block h1 { margin:3px 0; font-size:clamp(2rem,4vw,3.3rem); letter-spacing:-.052em; line-height:1.08; }
.market-top p { color:var(--muted); margin:7px 0 0; }
.market-source { color:var(--muted); white-space:nowrap; font-size:.77rem; padding-bottom:4px; }
.market-source strong { color:var(--blue); }
.quotes { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:11px; margin-bottom:12px; }
.quote { min-width:0; display:flex; align-items:center; text-align:left; gap:9px; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:9px; min-height:67px; padding:9px 11px; }
.quote:hover { border-color:#91acd8; }
.quote[aria-pressed=true] { border-color:var(--blue); box-shadow:inset 0 0 0 1px var(--blue); }
.coin-tag { display:grid; flex:0 0 28px; place-items:center; height:28px; border-radius:50%; font-size:.8rem; font-weight:800; background:#eaf0fa; color:#30486c; }
.coin-tag.btc { background:#fff1db; color:#8c4d06; }
.coin-tag.eth { background:#eceaff; color:#4949a2; }
.coin-tag.sol { background:#e1f7ef; color:#075b46; }
.quote-meta,.quote-value { display:grid; gap:0; min-width:0; }
.quote-value { margin-left:auto; text-align:right; font-variant-numeric:tabular-nums; }
.quote-value strong { font-size:clamp(.74rem,1.2vw,.94rem); white-space:nowrap; }
.quote small,.chart-foot,.updated { color:var(--muted); font-size:.72rem; }
.quote small.positive,.positive { color:var(--green); }
.quote small.negative,.negative { color:var(--red); }
.market-grid { display:grid; grid-template-columns:minmax(0,2.85fr) minmax(240px,1fr); gap:12px; }
.chart-panel,.market-detail { background:var(--surface); border:1px solid var(--line); border-radius:10px; min-width:0; }
.chart-panel { padding:15px 17px 11px; }
.chart-head h2,.market-detail h2 { margin:1px 0 0; font-size:1.16rem; letter-spacing:-.025em; }
.chart-head h2 span { margin-left:5px; color:var(--muted); font-size:.71rem; font-weight:670; }
.ranges { gap:3px; background:#edf2f9; border:1px solid var(--line); border-radius:7px; padding:3px; flex-wrap:nowrap; }
.ranges button { border:0; border-radius:4px; background:transparent; color:var(--muted); font-size:.72rem; font-weight:750; padding:4px 8px; }
.ranges button[aria-pressed=true] { background:var(--surface); color:var(--blue); box-shadow:0 1px 3px #13244224; }
.chart-stage { display:grid; min-height:210px; place-items:center; margin-top:10px; }
.chart-stage svg { display:block; width:100%; height:auto; overflow:visible; }
.chart-stage p { color:var(--muted); text-align:center; }
.chart-stage text { fill:#52647b; font:650 13px var(--sans); }
.chart-gridline { stroke:#e1e8f1; stroke-width:1; }
.price-line { fill:none; stroke:#2563eb; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.price-dot { fill:#2563eb; stroke:white; stroke-width:1.5; }
.chart-foot { border-top:1px solid var(--line); padding-top:7px; }
.market-detail { padding:16px; }
.market-price { display:block; font-size:clamp(1.48rem,2.65vw,2.15rem); letter-spacing:-.05em; line-height:1.22; font-variant-numeric:tabular-nums; margin-top:5px; }
.market-change { display:block; font-size:.84rem; font-weight:750; }
.market-detail dl { margin:13px 0 7px; }
.market-detail dl div { display:flex; justify-content:space-between; align-items:center; gap:6px; padding:7px 0; border-top:1px solid var(--line); }
.market-detail dt { color:var(--muted); font-size:.76rem; }
.market-detail dd { margin:0; font-size:.79rem; font-weight:750; font-variant-numeric:tabular-nums; }
.updated { margin:8px 0 0; }
.block { padding:24px 0 12px; }
.block h2 { margin:3px 0 5px; font-size:clamp(1.45rem,2.8vw,2rem); line-height:1.18; letter-spacing:-.045em; }
.block>p,.card p,.foot p { color:var(--muted); }
.section-head { margin-bottom:10px; align-items:flex-end; }
.section-head>a,.reading>a,.auth-panel a { color:var(--blue); font-weight:730; font-size:.85rem; }
.section-head>a:hover,.reading>a:hover,.auth-panel a:hover { text-decoration:underline; }
.cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; }
.card { display:flex; flex-direction:column; min-width:0; min-height:165px; padding:13px 15px; background:var(--surface); border:1px solid var(--line); border-radius:9px; overflow-wrap:anywhere; }
.card:hover { border-color:#8daee4; }
.card .label { color:#194da9; letter-spacing:.06em; }
.card h3 { margin:5px 0 6px; font-size:1.05rem; letter-spacing:-.02em; line-height:1.25; }
.card p { margin:0 0 11px; font-size:.81rem; }
.card-end { margin-top:auto; color:var(--muted); font-size:.72rem; font-variant-numeric:tabular-nums; }
.card-end b { color:var(--blue); }
.reading { width:min(100%,820px); margin:24px auto 0; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:clamp(16px,4vw,36px); overflow-wrap:anywhere; }
.reading h1 { margin-top:14px; }
.reading>p { color:#243850; line-height:1.8; }
.notice { padding:9px 13px; border-left:3px solid var(--blue); background:var(--blue-soft); border-radius:0 5px 5px 0; }
.filters { align-items:flex-end; gap:9px; margin:16px 0 12px; }
.filters label,.auth-panel label { display:grid; gap:4px; font-size:.83rem; font-weight:720; }
.filters input,.filters select,.auth-panel input { width:100%; min-height:36px; padding:5px 9px; background:var(--surface); color:var(--ink); border:1px solid #aabbd1; border-radius:6px; }
.pages { gap:6px; margin-top:14px; }
.pages a { border:1px solid var(--line); background:var(--surface); border-radius:6px; padding:4px 10px; }
.pages a[aria-current] { background:var(--blue); color:white; }
.auth-panel { width:min(100%,470px); margin:28px auto 0; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:19px 23px; }
.auth-panel h1 { font-size:clamp(1.8rem,4vw,2.5rem); }
.auth-panel form { display:grid; gap:10px; margin:11px 0; }
.auth-panel button { justify-self:start; }
footer { margin-top:32px; background:#e9eff7; border-top:1px solid var(--line); padding:14px 0; }
.foot { flex-wrap:wrap; }
.foot p { margin:0; font-size:.79rem; }
@media(max-width:950px) {
  .wrap { width:calc(100% - 36px); }
  .market-grid { grid-template-columns:minmax(0,2.2fr) minmax(190px,1fr); }
  .quote { gap:6px; padding:8px; }
  .coin-tag { flex-basis:23px; height:23px; }
}
@media(max-width:710px) {
  .wrap { width:calc(100% - 24px); }
  .bar { flex-direction:column; align-items:flex-start; gap:9px; }
  .bar nav { width:100%; justify-content:space-between; gap:7px; }
  .bar nav a { font-size:.77rem; }
  .nav-login { border:0; padding-left:0; }
  .bar .pill { min-height:29px; padding:3px 7px; }
  .market { padding-top:17px; }
  .market-top { align-items:flex-start; flex-direction:column; gap:5px; }
  .quotes { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
  .quote { min-height:49px; }
  .market-grid { grid-template-columns:1fr; gap:8px; }
  .chart-panel,.market-detail { padding:10px; }
  .chart-stage { min-height:135px; }
  .chart-stage text { font-size:17px; }
  .cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
}
@media(max-width:440px) {
  .cards { grid-template-columns:1fr; }
  .card { min-height:120px; }
  .filters label { width:100%; }
}