:root { --bg:#0b1220; --card:#121a2b; --b:#243252; --t:#e7eefc; --m:#93a4c7; --acc:#2563eb; --err:#ff5a5f; --ok:#22c55e; }
*{box-sizing:border-box;font-family:system-ui,Segoe UI,Roboto,Arial;}
body{margin:0;background:linear-gradient(180deg,#0a0f1c,#0c1424);color:var(--t);}
a{color:inherit}
.wrap{max-width:1100px;margin:0 auto;padding:16px;}
.top{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.nav{display:flex;gap:10px;flex-wrap:wrap}
.btn{padding:10px 12px;border:1px solid var(--b);border-radius:12px;background:#0e1627;text-decoration:none}
.btn.primary{background:linear-gradient(180deg,#2a6df0,#1d4ed8);border-color:#2a6df0}
.card{background:var(--card);border:1px solid var(--b);border-radius:16px;padding:16px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.grid{display:grid;gap:16px;grid-template-columns:repeat(12,1fr)}
.span6{grid-column:span 6}.span4{grid-column:span 4}.span8{grid-column:span 8}.span12{grid-column:span 12}
@media(max-width:900px){.span6,.span4,.span8{grid-column:span 12}}
label{display:block;margin:8px 0 6px;color:var(--m);font-size:.9rem}
input,select,button{width:100%;padding:11px;border-radius:12px;border:1px solid var(--b);background:#0e1627;color:var(--t)}
button{cursor:pointer;font-weight:700;background:linear-gradient(180deg,#2a6df0,#1d4ed8);border-color:#2a6df0}
table{width:100%;border-collapse:collapse}
th,td{border-bottom:1px solid #1f2a44;padding:8px;text-align:left;font-size:.95rem}
.muted{color:var(--m);font-size:.9rem}
.msg{padding:10px;border-radius:12px;border:1px solid var(--b);margin:10px 0}
.msg.err{border-color:rgba(255,90,95,.6);background:rgba(255,90,95,.12)}
.msg.ok{border-color:rgba(34,197,94,.6);background:rgba(34,197,94,.12)}
.center{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px}