:root{
  --bg:#0b1220; --panel:#121a2a; --panel2:#0f1726; --border:#1f2840; --text:#dbe5ff;
  --muted:#9db1ff; --accent:#ffd200; --ok:#16a34a; --bad:#ef4444;
  --brand:#d9b559; --brand-2:#bf9a2f; --brand-3:#ffde78;
}
*{box-sizing:border-box}
body.bg{background:radial-gradient(1200px 800px at 50% -200px, rgba(78,93,163,.25), transparent), var(--bg); color:var(--text); margin:0; font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
.container{max-width:1100px;margin:64px auto;padding:0 16px}
.topbar{position:sticky;top:0;z-index:20;backdrop-filter:blur(8px); background:linear-gradient(180deg, rgba(12,18,31,.72), rgba(8,12,22,.55)); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; padding:10px 16px}
.brand-logo{width:22px;height:22px;vertical-align:-4px;margin-right:8px;filter: drop-shadow(0 1px 0 rgba(0,0,0,.4))}
.brand-name{font-weight:700;letter-spacing:.2px}
.nav .nav-link{color:var(--muted); text-decoration:none; margin-right:8px; padding:6px 10px; border:1px solid transparent; border-radius:999px}
.nav .nav-link.active{border-color:#5533ff; box-shadow:inset 0 0 0 1px rgba(95,24,237,.35)}
.card{background:linear-gradient(180deg, rgba(33,42,78,.38), rgba(12,18,31,.6)); border:1px solid var(--border); border-radius:16px; padding:16px; box-shadow: 0 10px 30px rgba(0,0,0,.25)}
.card .title{font-weight:700}
.meta{color:var(--muted); font-size:12px}
.hr{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent); margin:12px 0}
.grid{display:grid; gap:12px}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.row{display:flex; gap:8px; align-items:center}
.stack{display:flex; flex-direction:column; gap:12px}
.kicker{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em}
.btn{background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:10px; padding:8px 12px; color:var(--text); cursor:pointer}
.btn.primary{background:linear-gradient(180deg, var(--brand-3), var(--brand-2)); color:#181510; border:1px solid rgba(255,255,255,.08); box-shadow: 0 6px 18px rgba(191,154,47,.35), inset 0 0 0 1px rgba(255,255,255,.1)}
.btn.primary:hover{filter:brightness(1.05)}
.input{background:rgba(255,255,255,.03); color:var(--text); border:1px solid var(--border); border-radius:10px; padding:10px 12px; outline:none}
.slider{width:100%}
.badge{font-size:12px; padding:4px 10px; border-radius:999px; border:1px solid var(--border); background:rgba(255,255,255,.04)}
.badge.green{background:rgba(34,197,94,.14); border-color:#1e5b37}
.badge.red{background:rgba(239,68,68,.1); border-color:#582020}
.sheet{background:var(--panel); border:1px solid var(--border); border-radius:18px; padding:12px}
.modal{position:fixed; inset:0; display:grid; place-items:center; background:radial-gradient(1200px 800px at 50% -200px, rgba(78,93,163,.2), transparent), rgba(0,0,0,.45)}
.sheet-head,.sheet-foot{display:flex; justify-content:space-between; align-items:center; gap:8px}
.sheet-body .cols{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.color-row{display:grid; grid-template-columns:150px 1fr; gap:12px; align-items:center}
.swatch{width:32px;height:24px;border-radius:8px;border:1px solid var(--border);box-shadow: inset 0 0 0 1px rgba(0,0,0,.35), 0 2px 10px rgba(0,0,0,.25)}
.switch{width:44px;height:26px;border-radius:999px;background:rgba(255,255,255,.08);position:relative;border:1px solid var(--border)}
.switch::after{content:"";position:absolute;left:2px;top:2px;width:22px;height:22px;border-radius:50%;background:#cbd5e1;transition:transform .2s}
.switch.active{background:linear-gradient(180deg,#22c55e,#16a34a)}
.switch.active::after{transform:translateX(18px); background:white}
.value-badge{min-width:64px;text-align:center;border:1px solid var(--border);border-radius:10px;padding:6px 8px;background:rgba(255,255,255,.035)}
.preset{display:flex; flex-wrap:wrap; gap:6px}
.chip{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--border); padding:6px 8px; border-radius:999px; cursor:pointer}
.dot{width:10px;height:10px;border-radius:50%}
.alert{background:rgba(255,255,255,.04); border:1px dashed var(--border); border-radius:12px; padding:8px 12px; font-size:13px; color:var(--muted)}
/* Collapsible */
.collapsible{overflow:hidden; max-height:0; opacity:.0; pointer-events:none; transition:max-height .35s ease, opacity .25s ease}
.collapsible.open{max-height:1200px; opacity:1; pointer-events:auto}
.section.header-row{cursor:pointer}
.section.header-row .label{font-weight:600; background:linear-gradient(90deg, var(--brand-3), #ffffff); -webkit-background-clip:text; background-clip:text; color:transparent}
.section.header-row .chev{transition:transform .25s ease; display:inline-block}
.section.header-row.open .chev{transform:rotate(90deg)}
/* ===== Splash Screen ===== */
@keyframes logoPop { 0% { transform: scale(.94); filter: drop-shadow(0 0 0 rgba(217,181,89,0)); } 60% { transform: scale(1.02); filter: drop-shadow(0 8px 40px rgba(217,181,89,.45)); } 100% { transform: scale(1); filter: drop-shadow(0 6px 26px rgba(217,181,89,.35)); } }
@keyframes shimmer { 0% { background-position: -200% 0 } 100% { background-position: 200% 0 } }
.splash{position:fixed;inset:0;display:grid;place-items:center;background:radial-gradient(1200px 800px at 50% -200px, rgba(78,93,163,.25), transparent), rgba(7,10,18,.92); z-index:999}
.splash.fade{opacity:0;transition:opacity .6s ease}
.splash-inner{display:flex;flex-direction:column;align-items:center;gap:14px}
.splash-logo{width:120px;height:120px;animation:logoPop .9s ease forwards;border-radius:24px}
.splash-title{font-size:28px;font-weight:800;letter-spacing:.3px;
  background:linear-gradient(90deg,var(--brand-3),#fff,var(--brand-3)); -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size:200% 100%; animation:shimmer 2.2s linear infinite .6s;}
.splash-sub{font-size:12px;color:var(--muted);letter-spacing:.15em;text-transform:uppercase;opacity:.8}

/* Toast */
.toast-wrap{ position: fixed; right: 16px; bottom: 16px; display: grid; gap: 8px; z-index: 1000 }
.toast{ background: rgba(22,26,40,.98); border:1px solid var(--border); color: var(--text); padding:10px 14px; border-radius:10px; box-shadow:0 8px 30px rgba(0,0,0,.35) }
.toast.ok{ border-color:#1e5b37; }
.toast.err{ border-color:#582020; }

/* OTP modal */
.otp-wrap{ display:flex; gap:8px; justify-content:center; }
.otp-box{ width:44px; height:48px; text-align:center; font-size:20px; border:1px solid var(--border); background:rgba(255,255,255,.03); color:var(--text); border-radius:10px; outline:none }
.otp-box:focus{ box-shadow:0 0 0 2px rgba(95,24,237,.35) }
.footer{opacity:.6; text-align:center; padding:24px 0}