:root{color-scheme:dark;--bg:#0b1424;--panel:#111e31;--panel2:#17263a;--stroke:#28415b;--muted:#96adc1;--text:#e7f1fa;--green:#74e2bc;--red:#f4a7ac;--cyan:#84c2f8;--gold:#e8bb6b;--radius:18px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-width:280px;background:radial-gradient(ellipse at 80% -12%,#203e59 0,transparent 42%),linear-gradient(180deg,#0b1424,#0b1525);color:var(--text);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:15px;line-height:1.5}
button{font:inherit}
.app-shell{max-width:1180px;margin:auto;padding:0 clamp(16px,4vw,36px) max(28px,env(safe-area-inset-bottom))}
.app-header{display:flex;align-items:center;gap:11px;min-height:86px;padding:14px 0;border-bottom:1px solid var(--stroke)}
.brandmark{width:43px;height:43px;flex:none;display:grid;place-items:center;color:#061624;border-radius:13px;font-size:25px;font-weight:900;background:linear-gradient(145deg,#86cdfd,#4ea5d5)}
.brand-text{display:flex;flex-direction:column;line-height:1.15;gap:5px;min-width:0}
.brand-text strong{font-size:24px;letter-spacing:-1.3px}.brand-text strong span{color:#8ec9ed}.brand-text small{color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.10em}
.read-only{margin-left:auto;flex:none;border:1px solid #426e78;background:#122d36;color:#a1e7c3;padding:6px 10px;border-radius:20px;font-size:10px;font-weight:800;letter-spacing:.09em}
.intro{padding:31px 0 21px}.eyebrow{display:flex;align-items:center;gap:8px;color:var(--cyan);font-size:11px;font-weight:800;letter-spacing:.15em}
.pulse{width:7px;height:7px;background:#63d3a9;border-radius:50%;box-shadow:0 0 12px #54eab27f}
h1{font-size:clamp(30px,5vw,48px);letter-spacing:-.055em;line-height:1.1;margin:16px 0 11px;font-weight:820}h1 span{color:var(--cyan)}
.intro>p{color:var(--muted);margin:0 0 20px;max-width:620px}
.status-panel{display:flex;align-items:center;gap:12px;justify-content:space-between;border:1px solid var(--stroke);border-radius:13px;background:#14253a;padding:10px 12px}
.status-title{display:flex;align-items:center;gap:10px;min-width:0}.status-title strong{font-size:13px;font-weight:700;overflow-wrap:anywhere}
.dot{height:9px;width:9px;flex:none;background:#9eacb9;border-radius:50%}.dot.online{background:#71dab2;box-shadow:0 0 12px #52eab96e}.dot.error{background:#e5a56e}
.refresh-button{background:#1c344e;border:1px solid #3c6582;border-radius:9px;padding:8px 14px;color:var(--text);white-space:nowrap;cursor:pointer;font-size:13px;font-weight:750;touch-action:manipulation}
.refresh-button:disabled{opacity:.5;cursor:default}.refresh-button:focus-visible{outline:2px solid #a1d1ff;outline-offset:2px}
.update-line{font-size:12px;color:var(--muted);padding:8px 2px}
.market-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px;margin-bottom:19px}
.market-card{min-width:0;background:linear-gradient(145deg,#17263a,#101e31);border:1px solid var(--stroke);border-radius:var(--radius);padding:19px;box-shadow:0 8px 25px #02091425}
.market-header{display:flex;align-items:center;gap:11px;min-width:0}.coin-icon{width:41px;height:41px;border-radius:13px;display:grid;place-items:center;flex:none;font-weight:800;font-size:23px}.btc-icon{background:#513b27;color:#ffd18d}.eth-icon{background:#2d395b;color:#bcd1ff}
.market-name{min-width:0}.coin-label{font-size:10px;letter-spacing:.13em;color:var(--muted);font-weight:800}.market-name h2{margin:0;font-size:20px;letter-spacing:-.03em;line-height:1.3}.market-name h2 span{font-size:10px;color:var(--muted);white-space:nowrap;letter-spacing:.04em}
.market-state{border:1px solid #4a6074;border-radius:8px;color:#bfccda;padding:5px 7px;font-size:10px;letter-spacing:.04em;font-weight:800;margin-left:auto;white-space:nowrap}.market-state.open{border-color:#3e866b;color:#93ebbd;background:#153529}.market-state.unavailable{border-color:#805547;color:#f1b9a0}
.market-title{font-size:12px;color:var(--muted);margin:12px 0 9px;min-height:18px;line-height:1.4}
.market-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 10px;padding:8px 0 14px;border-bottom:1px solid var(--stroke);font-size:11px;color:var(--muted);overflow-wrap:anywhere}.market-meta span:last-child{color:#c7d8e6}
.market-info{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px 0}
.market-info>div{display:flex;flex-direction:column;gap:2px;min-width:0}.market-info span{color:var(--muted);font-size:11px}.market-info strong{font-size:20px;letter-spacing:-.03em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.direction-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.direction{min-width:0;border:1px solid var(--stroke);background:#122239;border-radius:12px;padding:12px}.direction-title{display:block;font-size:12px;font-weight:900;letter-spacing:.08em;margin-bottom:11px}.up-direction .direction-title{color:var(--green)}.down-direction .direction-title{color:var(--red)}
.quote-line{display:flex;justify-content:space-between;align-items:baseline;gap:5px;padding:3px 0;font-size:11px;color:var(--muted)}.quote-line strong{font-size:20px;color:var(--text);font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums}.quote-line span:last-child{color:#c3d4e2;font-variant-numeric:tabular-nums}
.card-note{font-size:11px;color:var(--muted);margin-top:14px;padding-top:13px;border-top:1px solid var(--stroke);min-height:44px;overflow-wrap:anywhere}
.account-note{display:flex;gap:16px;align-items:flex-start;padding:21px;border:1px solid #2a5065;border-radius:16px;background:linear-gradient(120deg,#13293c,#112237)}
.lock-icon{display:grid;place-items:center;flex:none;width:35px;height:35px;border-radius:10px;background:#243f54;color:#8cc5ed;font-size:24px}
.account-note h2{font-size:17px;margin:0 0 6px;letter-spacing:-.02em}.account-note p{color:#b6c8d8;margin:0 0 8px;font-size:13px}.account-note p:last-child{margin-bottom:0}.account-note .small-note{font-size:11px;color:var(--muted)}
footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;color:#7d97ac;font-weight:700;font-size:10px;letter-spacing:.1em;padding-top:23px}
@media(max-width:850px){.market-grid{grid-template-columns:1fr}.market-card{padding:17px}.market-name h2{font-size:21px}.direction{padding:14px}.quote-line strong{font-size:23px}}
@media(max-width:375px){.app-header{gap:8px}.brand-text strong{font-size:21px}.brand-text small{font-size:8px}.read-only{font-size:9px;padding:5px 7px}.app-shell{padding-left:12px;padding-right:12px}.market-card{padding:13px}.market-name h2{font-size:18px}.market-state{font-size:9px;padding:4px 5px}.market-info strong{font-size:19px}.direction-grid{gap:7px}.direction{padding:10px}.quote-line{font-size:10px}.quote-line strong{font-size:19px}.account-note{padding:14px;gap:11px}.refresh-button{padding:7px 10px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important}}