:root{
 --navy:#020617;--navy2:#071a3d;--navy3:#0f2247;
 --blue:#063d8f;--blue2:#0b57bd;
 --yellow:#f6c343;--yellow2:#ffe08a;
 --text:#ffffff;--muted:#b9c7df;--line:rgba(255,255,255,.14);
 --danger:#ef4444;--ok:#22c55e;--warn:#f59e0b;
}
*{box-sizing:border-box}
html,body{margin:0;font-family:Segoe UI,Arial,sans-serif;background:radial-gradient(circle at top right,rgba(246,195,67,.16),transparent 28%),linear-gradient(135deg,#020617,#071a3d 60%,#061225)!important;color:white!important}
.app{display:flex;min-height:100vh;background:transparent!important}
.sidebar{width:285px!important;position:fixed!important;inset:0 auto 0 0!important;overflow:auto!important;padding:22px 16px!important;background:linear-gradient(180deg,#031a42,#020617)!important;border-right:1px solid var(--line)!important;box-shadow:12px 0 35px rgba(0,0,0,.45)!important;z-index:100!important}
.brand{display:flex;gap:12px;align-items:center;margin-bottom:24px}
.logo{width:54px;height:54px;border-radius:18px;background:linear-gradient(135deg,var(--yellow),var(--yellow2));display:grid;place-items:center;color:#071a3d;font-weight:1000}
.brand h2{margin:0;font-size:22px;color:white!important}.brand small{color:var(--muted)!important}
nav a,.sidebar a{display:block;color:white!important;text-decoration:none;padding:12px 14px;border-radius:14px;margin:5px 0;font-weight:800;border:1px solid transparent}
nav a:hover,.sidebar a:hover{background:rgba(246,195,67,.12)!important;border-color:rgba(246,195,67,.28)!important;color:var(--yellow)!important}
.main{margin-left:285px!important;width:calc(100% - 285px)!important;background:transparent!important}
.topbar{position:sticky;top:0;z-index:50;background:rgba(2,6,23,.90)!important;backdrop-filter:blur(12px);border-bottom:1px solid var(--line)!important;padding:22px 30px!important;display:flex;justify-content:space-between;align-items:center}
.topbar h1{margin:0;color:var(--yellow)!important;font-size:28px!important}.topbar p{margin:5px 0 0;color:var(--muted)!important}
.tag,.pill{background:rgba(246,195,67,.15)!important;color:var(--yellow)!important;padding:10px 14px;border-radius:999px;font-weight:900}
.content{padding:30px!important;background:transparent!important}
.page-card,.card{background:linear-gradient(180deg,rgba(19,43,89,.98),rgba(15,34,71,.98))!important;border:1px solid var(--line)!important;border-radius:26px!important;padding:24px!important;box-shadow:0 18px 50px rgba(0,0,0,.30)!important;color:white!important}
.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.toolbar h3,.card h3{margin:0;color:var(--yellow)!important;font-size:22px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.num{font-size:40px;font-weight:1000;color:var(--yellow)!important}
.btn{border:0;border-radius:13px;padding:11px 16px;cursor:pointer;font-weight:1000;text-decoration:none;display:inline-block;background:linear-gradient(135deg,var(--blue),var(--blue2))!important;color:white!important}
.btn.yellow{background:linear-gradient(135deg,var(--yellow),var(--yellow2))!important;color:#061225!important}
.btn.danger{background:linear-gradient(135deg,#ef4444,#991b1b)!important}.btn.gray{background:#475569!important}.btn.small{padding:7px 10px;font-size:12px;border-radius:9px}
table{width:100%;border-collapse:separate;border-spacing:0;background:rgba(2,6,23,.42)!important;border-radius:18px;overflow:hidden;border:1px solid var(--line)!important;color:white!important}
th,td{padding:13px;border-bottom:1px solid var(--line)!important;text-align:left;color:white!important}
th{background:rgba(246,195,67,.14)!important;color:var(--yellow)!important;font-weight:1000}
tr:hover td{background:rgba(255,255,255,.05)!important}
.form{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.form label{font-weight:900;color:white!important}
.form input,.form select,.form textarea,input,select,textarea{width:100%;padding:12px;border:1px solid rgba(255,255,255,.18)!important;border-radius:12px;margin-top:6px;background:#071a3d!important;color:white!important}
.full{grid-column:1/-1}
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.74)!important;z-index:99999;align-items:center;justify-content:center;padding:25px;backdrop-filter:blur(6px)}
.modal.open{display:flex!important}.modal-box{width:min(1120px,96vw);max-height:92vh;overflow:auto;background:linear-gradient(180deg,#0f2247,#071a3d)!important;border:1px solid rgba(246,195,67,.28)!important;border-radius:28px;box-shadow:0 40px 110px rgba(0,0,0,.55)}
.modal-head{position:sticky;top:0;background:#071a3d!important;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:22px 24px;border-bottom:1px solid var(--line)}
.modal-head h2{margin:0;color:var(--yellow)!important}.modal-body{padding:24px}.modal-foot{position:sticky;bottom:0;background:#071a3d!important;border-top:1px solid var(--line);padding:18px 24px;display:flex;justify-content:flex-end;gap:10px}
.close{background:#7f1d1d;color:#fff;border:0;border-radius:12px;padding:10px 14px;font-weight:1000;cursor:pointer}
.badge{padding:7px 11px;border-radius:999px;font-weight:1000;display:inline-block}.ok{background:rgba(34,197,94,.18)!important;color:#86efac!important}.bad{background:rgba(239,68,68,.18)!important;color:#fca5a5!important}.warn{background:rgba(245,158,11,.18)!important;color:#fcd34d!important}
.camera{background:#020617!important;border:3px solid var(--yellow)!important;border-radius:26px;min-height:360px;display:grid;place-items:center;position:relative;overflow:hidden}
.camera video{width:100%;max-height:420px}.faceGuide{position:absolute;width:240px;height:310px;border:5px solid var(--yellow);border-radius:50%;box-shadow:0 0 0 999px rgba(0,0,0,.35),0 0 35px rgba(246,195,67,.65)}
.login{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at top right,rgba(246,195,67,.16),transparent 28%),linear-gradient(135deg,#020617,#063d8f)!important}
.loginbox{width:440px;background:linear-gradient(180deg,#0f2247,#071a3d)!important;border:1px solid rgba(246,195,67,.28);border-radius:30px;padding:36px;box-shadow:0 35px 90px rgba(0,0,0,.55)}
.loginbox h1{margin:0;color:var(--yellow)!important;font-size:34px}
.audio-mini{width:160px}
@media(max-width:900px){.sidebar{position:relative!important;width:100%!important}.main{margin-left:0!important;width:100%!important}.app{display:block}.grid,.form{grid-template-columns:1fr}}