:root{
 --bg:#0b1220;
 --card:#0f1b33;
 --text:#eaf0ff;
 --muted:#a9b6d3;
 --line:rgba(255,255,255,.10);
 --primary:#4f8cff;
 --primary2:#2f6bff;
 --danger:#ff5a7a;
 --ok:#35d07f;
 --shadow: 0 18px 50px rgba(0,0,0,.45);
 --radius:16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
 margin:0;
 font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
 color:var(--text);
 background:
 radial-gradient(1200px 600px at 20% 10%, rgba(79,140,255,.22), transparent 60%),
 radial-gradient(900px 500px at 90% 0%, rgba(53,208,127,.16), transparent 55%),
 radial-gradient(900px 600px at 70% 90%, rgba(255,90,122,.12), transparent 60%),
 var(--bg);
}

a{color:var(--text); text-decoration:none}
a:hover{color:white; text-decoration:underline}

.container{
 min-height:100%;
 display:grid;
 place-items:center;
 padding:32px 16px;
}

.card{
 width:min(920px, 100%);
 background: rgba(15,27,51,.86);
 border:1px solid var(--line);
 border-radius: var(--radius);
 box-shadow: var(--shadow);
 overflow:hidden;
}

.card-inner{padding:26px 24px}

.header{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:16px;
 padding:18px 24px;
 border-bottom:1px solid var(--line);
 background: linear-gradient(180deg, rgba(255,255,255,.06), transparent);
}

.brand{
 display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.2px;
}
.badge{font-size:12px; color:var(--muted); border:1px solid var(--line); padding:4px 10px; border-radius:999px}

.nav{display:flex; gap:14px; flex-wrap:wrap}
.nav a{color:var(--muted)}
.nav a:hover{color:var(--text); text-decoration:none}

h1{margin:0; font-size:22px}
p{margin:10px 0; color:var(--muted)}

.alert{
 padding:12px 14px;
 border-radius:12px;
 border:1px solid var(--line);
 background: rgba(255,255,255,.04);
 margin:14px 0;
}
.alert.ok{border-color: rgba(53,208,127,.35); background: rgba(53,208,127,.08); color:#d7ffe8}
.alert.err{border-color: rgba(255,90,122,.35); background: rgba(255,90,122,.08); color:#ffe1e8}

.form{
 display:grid;
 gap:14px;
 margin-top:14px;
}
label{display:grid; gap:6px; color:var(--muted); font-size:14px}

input{
 width:100%;
 padding:12px 12px;
 border-radius:12px;
 border:1px solid var(--line);
 background: rgba(0,0,0,.18);
 color:var(--text);
 outline:none;
}
input:focus{border-color: rgba(79,140,255,.55); box-shadow:0 0 0 4px rgba(79,140,255,.18)}

.row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:720px){ .row{grid-template-columns:1fr} }

.btn{
 border:0;
 padding:12px 14px;
 border-radius:12px;
 cursor:pointer;
 font-weight:650;
 color:white;
 background: linear-gradient(135deg, var(--primary), var(--primary2));
}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform:translateY(1px)}

.actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:10px}
.actions a{color:var(--muted)}
.actions a:hover{color:var(--text)}

.table-wrap{overflow:auto; border:1px solid var(--line); border-radius:14px; margin-top:14px}
table{width:100%; border-collapse:collapse; min-width:520px; background: rgba(0,0,0,.10)}
th,td{padding:12px 12px; border-bottom:1px solid var(--line); text-align:left}
th{color:var(--text); font-size:13px; letter-spacing:.3px; text-transform:uppercase; background: rgba(255,255,255,.04)}
tr:hover td{background: rgba(255,255,255,.03)}

.footer{
 padding:16px 24px;
 border-top:1px solid var(--line);
 color:var(--muted);
 display:flex;
 justify-content:space-between;
 gap:12px;
 flex-wrap:wrap;
 font-size:13px;
}