:root{ --bg:#0b1247; --card:#141a56; --card-2:#1a2064; --ring:#2b3387; --text:#f4f7ff; --muted:#c5caea; --accent:#e52b39; --good:#2ecc71; --warn:#f39c12; --bad:#e74c3c }
*{box-sizing:border-box} html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Inter,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
.app{min-height:100svh;display:grid;grid-template-rows:auto 1fr auto}
header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--ring);background:linear-gradient(180deg,var(--card),var(--card-2))}
main{padding:12px}
footer{display:flex;gap:10px;justify-content:center;padding:10px;border-top:1px solid var(--ring);background:var(--card)}
.card{background:linear-gradient(180deg,var(--card),var(--card-2));border:1px solid var(--ring);border-radius:16px;padding:12px}
button{padding:10px 14px;border-radius:12px;border:1px solid var(--ring);background:var(--card);color:var(--text);font-weight:700;cursor:pointer}
button.primary{background:var(--accent);border-color:transparent}
.grid{display:grid;gap:10px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.scroller{display:grid;grid-auto-flow:column;grid-auto-columns:30%;overflow-x:auto;gap:12px;scroll-snap-type:x mandatory}
.grid.scroller > *{scroll-snap-align:start}
.row{display:flex;gap:10px;align-items:center}
.space{flex:1}
.hr{height:1px;background:var(--ring);margin:10px 0}
.muted{color:var(--muted)} .big{font-size:1.6rem;font-weight:700}
.notice{padding:10px;border-radius:12px;background:rgba(255,255,255,.06);border:1px dashed var(--ring)}
img.icon{width:64px;height:64px;border-radius:16px;object-fit:cover}
.hidden{display:none!important}
.center{text-align:center}
input,select{width:100%;padding:12px;border-radius:12px;border:1px solid var(--ring);background:rgba(0,0,0,.15);color:var(--text)}