:root{
  --bg:#0e1325;
  --card:#131938;
  --muted:#9aa2b1;
  --text:#e7ecf5;
  --accent:#27e0a6;
  --danger:#ff5861;
  --primary:#1f8cff;
  --border:#232a4e;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}
a{color:inherit;text-decoration:none}
small{font-size:.85rem}
.muted{color:var(--muted)}
.small{font-size:.9rem}
.topbar{position:sticky;top:0;z-index:5;background:linear-gradient(180deg,#0f1530,#0d1228);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:.8rem 1rem}
.brand{display:flex;gap:.75rem;align-items:center}
.logo{width:36px;height:36px;border-radius:12px;background:radial-gradient( circle at 30% 30%, #2df0b7, #1b8fd3 );display:grid;place-items:center;font-weight:700;color:#0e1325}
.title{font-weight:700}
.subtitle{font-size:.85rem;color:var(--muted)}
.btn{background:#20284d;border:1px solid var(--border);color:var(--text);padding:.6rem 1rem;border-radius:.75rem;cursor:pointer}
.btn:hover{filter:brightness(1.1)}
.btn.primary{background:var(--primary);border-color:transparent;color:white}
.btn.danger{background:var(--danger);border-color:transparent;color:#fff}
.btn.sm{padding:.3rem .6rem;border-radius:.5rem}
.btn.plain{background:transparent}
main{padding:1rem 1rem 7rem;max-width:1060px;margin:0 auto}
.page{display:none}
.page.active{display:block}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:1rem;margin-bottom:1rem}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem}
label{display:block}
input,select{width:100%;background:#0d1228;border:1px solid var(--border);color:var(--text);padding:.6rem .7rem;border-radius:.6rem;margin-top:.35rem}
.copyline{display:flex;gap:.5rem;align-items:center}
.qrwrap{display:grid;place-items:center;margin:.5rem 0}
.qrwrap img{width:160px;height:160px;border-radius:12px;border:1px solid var(--border);background:#0d1228}
.balances{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.balances .label{color:var(--muted);font-size:.9rem}
.balances .value{font-size:1.25rem;font-weight:700}
.split{display:flex;align-items:center;gap:.75rem}
.split .spacer{flex:1}
.switchlbl{display:flex;align-items:center;gap:.5rem;margin-top:1.2rem}
.btnrow{display:flex;gap:.6rem}
.partners{display:flex;flex-wrap:wrap;gap:.6rem}
.partners span{background:#0d1228;border:1px solid var(--border);padding:.35rem .6rem;border-radius:999px}
.advantages{margin:0;padding-left:1rem}
.tabbar{position:fixed;left:0;right:0;bottom:0;background:#0b1024;border-top:1px solid var(--border);display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem;padding:.35rem .5rem}
.tabbar button{background:transparent;border:1px solid var(--border);border-radius:12px;color:var(--text);padding:.4rem .5rem;display:flex;gap:.4rem;align-items:center;justify-content:center}
.tabbar button.active{outline:2px solid var(--accent);border-color:#1e6048}
.iconbtn{display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:.75rem;border:1px solid var(--border);border-radius:12px;background:#101633}
.iconbtn.card{background:#101633}
.profile .avatar{width:44px;height:44px;border-radius:14px;background:#0d1228;border:1px solid var(--border);display:grid;place-items:center;font-weight:700;margin-right:.75rem}
.tagrow{display:flex;gap:.5rem;margin:.5rem 0}
.tag{background:#0d1228;border:1px solid var(--border);color:var(--text);padding:.2rem .5rem;border-radius:999px;font-size:.85rem}
/* modal */
.modal.hidden{display:none}
.modal{position:fixed;inset:0;z-index:20}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.modal-card{position:relative;margin:6vh auto 0;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:1rem;max-width:420px}
.tabs.small{display:flex;gap:.35rem;margin-bottom:.5rem}
.tabs.small button{background:#0d1228;color:var(--text);border:1px solid var(--border);border-radius:10px;padding:.35rem .6rem}
.tabs.small button.active{background:#1b2562}
.calc-output{display:flex;align-items:center;gap:.75rem;margin-top:.75rem}
@media (max-width:780px){
  .grid2,.grid3,.grid4{grid-template-columns:1fr}
}