:root { --ink:#172033; --muted:#667085; --line:#e5e7eb; --surface:#fff; --canvas:#f6f8fc; --brand:#2457d6; --brand-dark:#183d9f; --success:#087f5b; --danger:#c02d3a; --radius:12px; }
* { box-sizing:border-box; }
body { margin:0; padding:28px; background:var(--canvas); color:var(--ink); font:14px/1.5 Inter,Segoe UI,Arial,sans-serif; }
h1,h2,h3,h4 { margin:0 0 14px; color:#13203a; line-height:1.25; } h1{font-size:26px} h2{font-size:22px} h3{font-size:17px}
a { color:var(--brand); text-decoration:none; } a:hover { color:var(--brand-dark); }
.app-header { position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:22px; min-height:66px; margin:-28px -28px 30px; padding:0 28px; background:#101a30; color:white; box-shadow:0 3px 18px rgba(16,26,48,.18); }
.brand { display:flex; align-items:center; gap:9px; color:#fff; font-size:18px; font-weight:750; letter-spacing:-.4px; white-space:nowrap; } .brand:hover{color:#fff}.brand-mark{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#5d8cff,#3261e2);font-size:16px}.brand-muted{color:#91a7e8}
.app-nav { display:flex; align-items:center; gap:3px; flex:1; } .app-nav>a,.app-nav summary { display:block; padding:22px 10px; color:#dce5fb; font-weight:600; cursor:pointer; list-style:none; } .app-nav summary::-webkit-details-marker { display:none; }.app-nav summary::after{content:'⌄';margin-left:5px;color:#92a4d3}.app-nav>a:hover,.app-nav summary:hover{color:#fff;background:rgba(255,255,255,.06)}
.app-nav details { position:relative; }.nav-menu { position:absolute; top:58px; left:0; min-width:205px; padding:8px; border:1px solid #e8ecf5; border-radius:10px; background:white; box-shadow:0 14px 32px rgba(18,32,61,.18); }.nav-menu a { display:block; padding:9px 10px; border-radius:7px; color:#344054; white-space:nowrap; }.nav-menu a:hover{background:#eef3ff;color:var(--brand)}
.user-menu{display:flex;align-items:center;gap:9px;font-size:13px;white-space:nowrap}.user-menu>a{color:#dce5fb;border-left:1px solid #435171;padding-left:10px}.user-avatar{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#354875;font-weight:700}.nav-toggle{display:none}
form { max-width:760px; margin:0 0 24px; padding:24px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:0 3px 12px rgba(17,24,39,.04); } label { display:block; margin:10px 0 5px; color:#344054; font-weight:650; } input,select,textarea { width:100%; min-height:40px; margin:0 0 10px; padding:9px 11px; border:1px solid #cfd5df; border-radius:8px; background:#fff; color:var(--ink); font:inherit; } input:focus,select:focus,textarea:focus { outline:3px solid rgba(36,87,214,.14); border-color:var(--brand); } textarea{min-height:90px;resize:vertical}
button,.btn { display:inline-flex; align-items:center; justify-content:center; min-height:38px; padding:8px 14px; border:0; border-radius:8px; background:var(--brand); color:#fff; font:inherit; font-weight:650; cursor:pointer; box-shadow:0 1px 2px rgba(16,24,40,.12); } button:hover,.btn:hover{background:var(--brand-dark);color:white}.btn{margin-right:6px}
table { width:100%; margin:14px 0 24px; border-collapse:separate; border-spacing:0; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:0 3px 12px rgba(17,24,39,.04); } th,td{padding:11px 13px;border-bottom:1px solid var(--line);text-align:left}th{background:#f1f4fb;color:#344054;font-size:12px;text-transform:uppercase;letter-spacing:.04em}tr:last-child td{border-bottom:0}tbody tr:hover{background:#f8faff}
.alert,.msg { margin:0 0 16px; padding:11px 13px; border-radius:9px; }.alert-success{background:#ecfdf3;color:#067647}.alert-error{background:#fff1f3;color:#b42336}
.login-page{display:grid;min-height:100vh;padding:24px;place-items:center;background:radial-gradient(circle at 15% 15%,#dce7ff 0,transparent 29%),radial-gradient(circle at 90% 85%,#e7ecff 0,transparent 27%),#f6f8fc}.login-card{width:min(100%,420px);padding:34px;border:1px solid #e2e7f0;border-radius:18px;background:#fff;box-shadow:0 22px 52px rgba(22,35,65,.13)}.login-card form{margin:20px 0 0;padding:0;border:0;box-shadow:none}.login-card button{width:100%;margin-top:8px}.login-brand{display:flex;align-items:center;gap:10px;margin-bottom:28px;font-size:20px;color:#172033}.login-brand strong span{color:var(--brand)}.login-kicker{margin:0 0 6px;color:var(--brand);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.08em}.login-card h2{margin-bottom:6px}
@media (max-width:960px){body{padding:18px}.app-header{margin:-18px -18px 24px;padding:0 18px;flex-wrap:wrap}.nav-toggle{display:inline-flex;margin-left:auto;background:#25365e}.app-nav{display:none;order:4;width:100%;padding:0 0 12px;flex-direction:column;align-items:stretch}.app-nav.is-open{display:flex}.app-nav>a,.app-nav summary{padding:10px}.app-nav details{width:100%}.nav-menu{position:static;margin:0 10px}.user-name,.user-menu>a{display:none}.user-menu{margin-left:0}table{display:block;overflow-x:auto}form{padding:18px;max-width:none}}