:root{
 --bg:#0b0d12;--surface:#151922;--surface2:#1a1e28;--line:#2d3340;
 --text:#f8f8fb;--muted:#a4acb9;--purple:#7020ef;--purple2:#9829ff;
 --orange:#ff9c00;--yellow:#ffbf20;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
 margin:0;color:var(--text);
 background:radial-gradient(circle at 8% 0%,rgba(112,32,239,.18),transparent 28%),var(--bg);
 font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}
a{color:inherit;text-decoration:none}
.nav{
 position:sticky;top:0;z-index:50;background:rgba(11,13,18,.91);
 backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.06)
}
.navin{
 max-width:1200px;margin:auto;padding:12px 20px;
 display:flex;align-items:center;justify-content:space-between;gap:15px
}
.nav-logo{height:48px;width:auto;display:block;border-radius:8px}
.links{display:flex;gap:8px;flex-wrap:wrap}
.links a{padding:9px 12px;border-radius:11px;color:#e1e4eb}
.links a:hover{background:#1a1f28}
.container{max-width:1200px;margin:auto;padding:24px}
.card{
 background:linear-gradient(180deg,var(--surface2),var(--surface));
 border:1px solid rgba(255,255,255,.07);border-radius:22px;padding:20px;
 box-shadow:0 18px 45px rgba(0,0,0,.18)
}
.btn{
 display:inline-flex;align-items:center;justify-content:center;gap:8px;
 padding:12px 16px;border:0;border-radius:14px;
 background:linear-gradient(135deg,var(--purple),var(--purple2));
 color:#fff;font-weight:850;box-shadow:0 10px 28px rgba(112,32,239,.24)
}
.muted{color:var(--muted)}
label{display:block;margin-top:12px;font-weight:700}
input,select,textarea{
 width:100%;margin-top:6px;padding:12px 13px;border-radius:13px;
 border:1px solid #303744;background:#0f1218;color:#fff
}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.c3{grid-column:span 3}.c4{grid-column:span 4}.c6{grid-column:span 6}.c8{grid-column:span 8}.c12{grid-column:span 12}
.alert{padding:13px;border-radius:13px;background:#2c2440;border:1px solid #51416f;margin:12px 0}
.login{min-height:100vh;display:grid;place-items:center;padding:22px}
@media(max-width:800px){
 .navin{flex-direction:column;align-items:flex-start}
 .nav-logo{height:42px}
 .c3,.c4,.c6,.c8{grid-column:span 12}
}