:root{
  --bg:#0a0a0f;--card:rgba(255,255,255,.03);--border:rgba(255,255,255,.08);
  --text:#e8e8f0;--muted:rgba(255,255,255,.55);--accent:#c09a35;--accent2:#f2c14e;
  --err:#f87171;--ok:#4ade80;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans SC",Roboto,sans-serif;
  background:linear-gradient(160deg,#0b1030 0%,#101638 45%,#1a1245 100%);
  min-height:100vh;color:var(--text);line-height:1.6;
}
a{color:var(--accent2)}
.app{max-width:720px;margin:0 auto;padding:0 20px}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:22px 0 18px;border-bottom:1px solid var(--border);margin-bottom:28px;flex-wrap:wrap;gap:10px}
.brand{display:flex;align-items:baseline;gap:6px}
.brand b{font-size:1.7rem;font-weight:700;background:linear-gradient(135deg,var(--accent),var(--accent2),#f4a5c0,var(--accent));background-size:300% 300%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:flow 8s ease infinite}
.brand span{font-size:.62rem;color:var(--muted);letter-spacing:2px}
@keyframes flow{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}
.nav{display:flex;gap:8px;align-items:center}
.muted{color:var(--muted);font-size:.82rem}
.small{font-size:.8rem}
.ghost{background:transparent;border:1px solid var(--border);color:var(--text);padding:6px 14px;border-radius:8px;cursor:pointer;font-size:.82rem;transition:.2s}
.ghost:hover{border-color:var(--accent)}
.wrap{display:flex;flex-direction:column;gap:20px}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:28px}
.card.hidden,.panel.hidden,#result{display:none}
.hidden{display:none!important}
.title{font-size:1.4rem;font-weight:600;margin-bottom:18px}
form{display:flex;flex-direction:column;gap:8px}
label{font-size:.8rem;color:var(--muted)}
input,select{background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:11px 12px;font-size:.92rem;outline:none;font-family:inherit}
input:focus,select:focus{border-color:var(--accent)}
.btn{background:linear-gradient(135deg,var(--accent),var(--accent2));border:none;color:#0a0a0f;font-weight:600;padding:12px;border-radius:8px;cursor:pointer;font-size:.95rem;transition:.2s;font-family:inherit}
.btn:hover{filter:brightness(1.08)}
.btn.small{padding:11px;font-size:.88rem}
.btn:disabled{opacity:.5;cursor:not-allowed}
.msg{padding:12px 16px;border-radius:8px;font-size:.86rem;border:1px solid var(--border)}
.msg.err{color:var(--err);border-color:rgba(248,113,113,.3)}
.msg.ok{color:var(--ok);border-color:rgba(74,222,128,.3)}
.devlink{margin-top:12px;font-size:.8rem;color:var(--accent2);word-break:break-all}
.quota{text-align:center;padding:18px;border:1px solid var(--border);border-radius:12px;margin-bottom:16px}
.quota-num{font-size:3rem;font-weight:700;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.quota-label{color:var(--muted);font-size:.82rem}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.panel{border:1px solid var(--border);border-radius:12px;padding:18px}
.panel h2{font-size:1rem;font-weight:600;margin-bottom:12px;color:var(--text)}
#result{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:18px}
#result h3{font-size:1.1rem;margin-bottom:8px}
#result .meta{color:var(--muted);font-size:.86rem;margin-bottom:8px}
@media(max-width:640px){.grid{grid-template-columns:1fr}}