:root{--bg:#0B0D17;--card:#121527;--line:#23284a;--tx:#E8EAFF;--mu:#8A90B8;--a:#7CFFCB;--b:#7B61FF;--bad:#FF6B8B;--warn:#FFC86B}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(1200px 600px at 80% -10%,#2a1f6b55,transparent),radial-gradient(900px 500px at -10% 10%,#0f5a4a44,transparent),var(--bg);color:var(--tx);font:15px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;min-height:100vh}
header{display:flex;justify-content:space-between;align-items:center;padding:16px clamp(14px,4vw,40px);position:sticky;top:0;background:#0B0D17cc;backdrop-filter:blur(10px);z-index:5}
.brand{display:flex;gap:10px;align-items:center;color:var(--tx);text-decoration:none;font-weight:800;font-size:20px;letter-spacing:-.02em}.brand em{font-style:normal;font-size:11px;font-weight:600;color:var(--a);border:1px solid #7CFFCB55;border-radius:99px;padding:1px 8px}
main{max-width:680px;margin:0 auto;padding:0 14px 60px}.hero{text-align:center;padding:28px 0 18px}.hero h1{font-size:clamp(30px,7vw,46px);line-height:1.08;margin:0 0 12px;letter-spacing:-.03em}.hero p{color:var(--mu);max-width:540px;margin:0 auto}
.grad{background:linear-gradient(90deg,var(--a),var(--b));-webkit-background-clip:text;background-clip:text;color:transparent}
.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:4px;margin:10px 0 14px}.tabs button{background:none;border:0;color:var(--mu);font:inherit;font-weight:600;padding:10px 0;border-radius:10px;cursor:pointer}.tabs button.on{background:linear-gradient(135deg,#7B61FF33,#7CFFCB22);color:var(--tx)}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:clamp(16px,4vw,24px)}.card h2{margin:0 0 6px;font-size:20px}
label{display:block;font-size:12px;color:var(--mu);margin:14px 0 6px}input,select{width:100%;background:#0B0D17;border:1px solid var(--line);color:var(--tx);border-radius:12px;padding:12px;font:inherit;outline:0}input:focus,select:focus{border-color:var(--b)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}.end{display:flex;align-items:flex-end;justify-content:flex-end}
.btn{background:linear-gradient(135deg,var(--b),#5a8bff);color:#fff;border:0;border-radius:12px;padding:11px 18px;font:inherit;font-weight:700;cursor:pointer}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.ghost{background:none;border:1px solid var(--line);color:var(--tx)}.btn.sm{padding:6px 12px;font-size:13px}.btn.wide{width:100%;margin-top:16px;padding:14px}
.muted{color:var(--mu)}.err{color:var(--bad);font-size:13px;min-height:1em;word-break:break-word}.ok{color:var(--a)}.bad{color:var(--bad)}.warn{color:var(--warn)}
.copyrow{display:flex;gap:8px;align-items:center}code{background:#0B0D17;border:1px solid var(--line);border-radius:10px;padding:10px;font-size:12px;word-break:break-all;flex:1}
.breakdown{margin-top:16px;border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:#0e1122}.kv{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px dashed #23284a88}.kv:last-of-type{border:0}.kv.big{font-size:18px;border-top:1px solid var(--line);margin-top:4px;padding-top:10px}.kv.big b{color:var(--a)}.kv.sub{font-size:13px;color:var(--mu)}
.chk{display:flex;gap:8px;align-items:center;color:var(--tx);font-size:14px;margin-top:12px}.chk input{width:auto}
.tok{display:grid;grid-template-columns:auto auto 1fr auto;gap:10px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:12px;margin-top:8px;cursor:pointer}.tok.on{border-color:var(--b);background:#7B61FF14}.tok.off{opacity:.55;cursor:default}.tok input{width:auto}
.av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#7B61FF55,#7CFFCB33);font-size:12px;font-weight:700}.sym{font-weight:700}.sub{font-size:12px;color:var(--mu)}.val{text-align:right;font-size:13px}.val span{display:block;color:var(--mu);font-size:12px}
.tag{display:inline-block;font-size:11px;border-radius:99px;padding:1px 8px;margin:3px 4px 0 0;border:1px solid var(--line)}.tag.ok{color:var(--a)}.tag.warn{color:var(--warn)}.tag.bad{color:var(--bad)}
.hit{border:1px solid var(--line);border-radius:12px;padding:12px;margin-top:10px;display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}
.skel i{display:block;height:54px;border-radius:12px;margin-top:8px;background:linear-gradient(90deg,#1a1e38,#23284a,#1a1e38);background-size:200%;animation:sh 1.2s infinite}@keyframes sh{to{background-position:-200% 0}}
a{color:var(--a)}.foot{font-size:12px;text-align:center;margin-top:22px}
@media(max-width:520px){.hide-m{display:none}.row2{grid-template-columns:1fr}.hero{padding-top:14px}}
/* ===== Cream · Teal · Black theme ===== */
:root{--bg:#F6F0E1;--card:#FFFBF1;--line:#1A1A1A;--soft:#E4DAC3;--tx:#111111;--mu:#5E5A50;--a:#0E9F8E;--a2:#0B7F72;--b:#0E9F8E;--bad:#C2362B;--warn:#A86A00}
body{background:radial-gradient(900px 480px at 85% -10%,#0E9F8E1f,transparent),radial-gradient(700px 420px at -10% 0%,#0E9F8E14,transparent),var(--bg);color:var(--tx)}
header{background:#F6F0E1e6;border-bottom:2px solid var(--tx)}
.brand{color:var(--tx)}.brand em{color:var(--a2);border:1.5px solid var(--a);background:#0E9F8E14}
.hero h1{color:var(--tx)}.grad{background:none;color:var(--a);-webkit-text-fill-color:var(--a)}
.tabs{background:var(--card);border:2px solid var(--tx);box-shadow:4px 4px 0 var(--tx)}.tabs button{color:var(--mu)}.tabs button.on{background:var(--tx);color:#F6F0E1}
.card{background:var(--card);border:2px solid var(--tx);box-shadow:6px 6px 0 var(--tx)}
label{color:var(--mu);font-weight:600}input,select{background:#fff;border:1.5px solid var(--tx);color:var(--tx)}input:focus,select:focus{border-color:var(--a);box-shadow:0 0 0 3px #0E9F8E33}
.btn{background:var(--a);color:#fff;border:2px solid var(--tx);box-shadow:3px 3px 0 var(--tx);transition:transform .08s,box-shadow .08s}.btn:hover:not(:disabled){transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--tx)}.btn:active:not(:disabled){transform:translate(2px,2px);box-shadow:1px 1px 0 var(--tx)}
.btn:disabled{background:#CFC6B0;color:#5E5A50;opacity:1;box-shadow:none}.btn.ghost{background:#fff;color:var(--tx);border:2px solid var(--tx)}
code{background:#fff;border:1.5px solid var(--tx);color:var(--tx)}
.breakdown{background:#fff;border:2px solid var(--tx)}.kv{border-bottom:1px dashed var(--soft)}.kv.big{border-top:2px solid var(--tx)}.kv.big b{color:var(--a2)}
.chk{color:var(--tx)}input[type=checkbox]{accent-color:var(--a)}
.tok{border:1.5px solid var(--soft);background:#fff}.tok.on{border:2px solid var(--a);background:#0E9F8E12}
.av{background:var(--tx);color:#F6F0E1}
.tag{border:1px solid var(--soft);background:#F6F0E1}.tag.ok{color:var(--a2);border-color:var(--a)}
.hit{border:1.5px solid var(--tx);background:#fff}
.skel i{background:linear-gradient(90deg,#EDE5D2,#E0D6BE,#EDE5D2);background-size:200%}
a{color:var(--a2)}.ok{color:var(--a2)}

.hist{margin-top:22px;border-top:2px solid var(--tx);padding-top:14px}.hhead{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}.hhead h3{margin:0;font-size:16px}
.lock{font-size:11px;font-weight:700;color:var(--a2);border:1.5px solid var(--a);background:#0E9F8E14;border-radius:99px;padding:2px 9px}
.hrow{display:flex;justify-content:space-between;gap:12px;padding:11px 12px;margin-top:8px;background:#fff;border:1.5px solid var(--tx);border-radius:12px;box-shadow:2px 2px 0 var(--tx)}
.hmain{min-width:0;display:flex;flex-direction:column;gap:2px}.hmain b{font-size:14px;overflow-wrap:anywhere}.hkv{font-size:12px;color:var(--mu)}
.hval{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:3px;font-size:13px;white-space:nowrap}.hval a{font-size:12px;font-weight:700}
.hempty{margin:10px 0 0;padding:14px;border:1.5px dashed var(--soft);border-radius:12px;color:var(--mu);font-size:13px;text-align:center;background:#FFFBF1}
@media(max-width:520px){.hrow{flex-direction:column}.hval{flex-direction:row;justify-content:space-between;align-items:center;text-align:left}}

.hscroll{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-right:6px;margin-right:-6px;scrollbar-width:thin;scrollbar-color:var(--a) transparent;border-bottom:2px solid var(--tx)}
.hscroll::-webkit-scrollbar{width:6px}.hscroll::-webkit-scrollbar-thumb{background:var(--a);border-radius:9px}.hscroll::-webkit-scrollbar-track{background:transparent}
.hhead{position:sticky;top:0}.hcount{font-size:11px;color:var(--mu);font-weight:600}

.brand img.logo{width:38px;height:38px;border-radius:10px;border:2px solid var(--tx);box-shadow:2px 2px 0 var(--tx);display:block;object-fit:cover;background:#0b0d10}
.brand img.logo{border:0;border-radius:0;box-shadow:none;background:transparent;object-fit:contain;width:40px;height:40px;filter:drop-shadow(0 1px 1px #0002)}
.soon{display:flex;flex-direction:column;gap:4px;border:2px solid var(--tx);background:#0E9F8E14;border-radius:14px;padding:12px 14px;margin:8px 0 14px;box-shadow:3px 3px 0 var(--tx)}.soon b{color:var(--a2)}.soon span{font-size:13px;color:var(--tx)}
.soon[hidden]{display:none}