:root{ --gold:#d4a017; --gold2:#f5c542; --bg:#0f0f12; --card:#1a1a20; }
*{ font-family:'Prompt','Segoe UI',system-ui,sans-serif; }
body{ background:var(--bg); }
.gold-text{ background:linear-gradient(135deg,#f5c542,#d4a017); -webkit-background-clip:text; background-clip:text; color:transparent; }
.gold-btn{ background:linear-gradient(135deg,#f5c542,#c9920a); color:#111; font-weight:700; transition:.2s; }
.gold-btn:hover{ transform:translateY(-1px); box-shadow:0 8px 24px rgba(212,160,23,.4); }
.card{ background:var(--card); border:1px solid #2a2a33; border-radius:1rem; }
.inp{ width:100%; background:#101014; border:1px solid #33333e; border-radius:.65rem; padding:.7rem .9rem; color:#fff; outline:none; }
.inp:focus{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(212,160,23,.2); }
.lbl{ font-size:.85rem; color:#c9c9d4; margin-bottom:.35rem; display:block; }
.navlink{ color:#d6d6de; } .navlink:hover,.navlink.active{ color:var(--gold2); }
.slot{ border:1px solid #33333e; border-radius:.6rem; padding:.55rem .3rem; font-size:.85rem; text-align:center; cursor:pointer; background:#141419; transition:.15s; }
.slot:hover:not(.taken):not(.sel){ border-color:var(--gold); }
.slot.sel{ background:linear-gradient(135deg,#f5c542,#c9920a); color:#111; font-weight:700; border-color:transparent; }
.slot.taken{ opacity:.35; text-decoration:line-through; cursor:not-allowed; }
.badge{ font-size:.72rem; padding:.15rem .6rem; border-radius:999px; font-weight:600; }
.b-amber{ background:#3a2c07; color:#f5c542; } .b-blue{ background:#0e2a52; color:#7db4ff; }
.b-violet{ background:#2c1445; color:#c4a5ff; } .b-green{ background:#0c3320; color:#5eeaa0; } .b-red{ background:#3d0f14; color:#ff8f9a; }
.svc-pick{ cursor:pointer; transition:.15s; } .svc-pick.sel{ border-color:var(--gold)!important; box-shadow:0 0 0 3px rgba(212,160,23,.25); }
.tabbtn{ padding:.55rem 1rem; border-radius:.7rem; font-size:.9rem; color:#c9c9d4; white-space:nowrap; }
.tabbtn.active{ background:linear-gradient(135deg,#f5c542,#c9920a); color:#111; font-weight:700; }
table{ width:100%; font-size:.88rem; } th{ color:#9a9aa8; text-align:left; padding:.6rem; border-bottom:1px solid #2a2a33; white-space:nowrap;}
td{ padding:.6rem; border-bottom:1px solid #22222a; vertical-align:middle; }
.hero-bg{ background: radial-gradient(800px 400px at 20% 10%, rgba(212,160,23,.18), transparent), radial-gradient(700px 380px at 90% 20%, rgba(212,160,23,.12), transparent), linear-gradient(#0f0f12,#0f0f12); }
.toast{ position:fixed; bottom:1.2rem; right:1.2rem; z-index:99; }