:root{
  --bg:#07111f; --panel:#0f1b2d; --panel2:#13243b; --text:#f7fbff; --muted:#a9b7c9;
  --accent:#7dd3fc; --accent2:#a7f3d0; --warn:#fbbf24; --danger:#fca5a5; --line:#253856;
  --page-gradient:radial-gradient(circle at top left,#153252 0,#07111f 38%,#050b14 100%);
  --overlay-bg:#ffffff0a; --overlay-bg-strong:#ffffff14;
  --overlay-border:#ffffff16; --overlay-border-strong:#ffffff22;
  --shadow-card:0 22px 48px #0006; --shadow-card-hover:0 26px 64px #0008,0 0 28px #7dd3fc22;
  color-scheme: dark;
}
html[data-theme="light"]{
  --bg:#eef2f8; --panel:#ffffff; --panel2:#f5f8fc; --text:#101828; --muted:#5c6b82;
  --accent:#0284c7; --accent2:#0d9488; --warn:#b45309; --danger:#b91c1c; --line:#dde5f0;
  --page-gradient:radial-gradient(circle at top left,#ffffff 0,#f0f4fa 45%,#e6ecf5 100%);
  --overlay-bg:#0000000a; --overlay-bg-strong:#00000012;
  --overlay-border:#00000014; --overlay-border-strong:#0000001f;
  --shadow-card:0 14px 34px #0001; --shadow-card-hover:0 18px 40px #00000014,0 0 0 1px #0284c722;
  color-scheme: light;
}
*{box-sizing:border-box}
body{
  margin:0; font-family:Inter,Segoe UI,Arial,sans-serif;
  background:var(--page-gradient);
  color:var(--text); min-height:100vh;
  transition:background .2s ease, color .2s ease;
}
a{color:inherit}

/* ---------- Top nav ---------- */
.topnav{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 6vw; border-bottom:1px solid var(--line); gap:16px; flex-wrap:wrap;
}
.brand{font-weight:950; font-size:22px; letter-spacing:-.5px; text-decoration:none}
.brand span{color:var(--accent)}
.nav-actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.user-pill{
  border:1px solid var(--line); border-radius:999px; padding:8px 14px; font-size:13px;
  color:var(--muted); background:var(--overlay-bg);
}
.user-pill strong{color:var(--text)}
.clock-pill{font-variant-numeric:tabular-nums; font-family:"SF Mono",Consolas,Menlo,monospace; letter-spacing:.02em}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; border:0; border-radius:14px;
  padding:12px 18px; font-weight:900; font-size:14px; cursor:pointer; text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn-primary{background:linear-gradient(90deg,#7dd3fc,#a7f3d0); color:#06131f}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 10px 26px #7dd3fc33}
.btn-outline{background:var(--overlay-bg); color:var(--text); border:1px solid var(--line)}
.btn-outline:hover{border-color:var(--accent)}
.btn-danger{background:#3a1420; color:#fca5a5; border:1px solid #5c1f2c}
.btn-danger:hover{border-color:#fca5a5}
.btn-sm{padding:8px 12px; font-size:12px; border-radius:10px}
.theme-switch{white-space:nowrap}
.btn:disabled{opacity:.5; cursor:not-allowed}

/* ---------- Header / hero ---------- */
header.hero{padding:44px 6vw 26px}
h1{font-size:clamp(32px,4.4vw,58px); line-height:.98; margin:0 0 12px; letter-spacing:-1.5px}
.subtitle{font-size:17px; color:var(--muted); max-width:900px}
main{padding:30px 6vw 70px}

/* ---------- Section head ---------- */
.section-head{display:flex; justify-content:space-between; gap:20px; align-items:end; margin-bottom:20px; flex-wrap:wrap}
.section-head h2{font-size:26px; margin:0}
.count{color:var(--muted); font-weight:700}

/* ---------- Card grid (modules) ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:18px}
.card{
  position:relative; display:block; text-decoration:none; color:inherit;
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line); border-radius:26px; padding:26px;
  box-shadow:var(--shadow-card); overflow:hidden;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.card:hover{transform:translateY(-4px); border-color:var(--accent); box-shadow:var(--shadow-card-hover)}
.card:before{
  content:""; position:absolute; right:-70px; top:-70px; width:190px; height:190px;
  border-radius:50%; background:radial-gradient(circle,#7dd3fc33 0,#7dd3fc00 68%);
}
.badge{
  display:inline-flex; align-items:center; gap:8px; border:1px solid var(--overlay-border-strong); border-radius:999px;
  padding:7px 11px; color:var(--accent2); font-size:12px; font-weight:900; text-transform:uppercase;
  letter-spacing:.08em; background:var(--overlay-bg);
}
.badge.warn{color:var(--warn)}
.card-title{font-size:28px; font-weight:950; margin:20px 0 8px; letter-spacing:-1px}
.card-meta{color:var(--muted); line-height:1.45; margin-bottom:20px; min-height:22px}
.stats{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:16px 0}
.stat{background:var(--overlay-bg); border:1px solid var(--overlay-bg-strong); border-radius:16px; padding:12px}
.stat span{display:block; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.08em}
.stat strong{display:block; font-size:16px; margin-top:4px; word-break:break-word}
.open{display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--overlay-border); padding-top:16px; color:var(--accent); font-weight:900}
.arrow{font-size:24px; line-height:1}
.empty{margin-top:22px; color:var(--muted); border:1px dashed var(--overlay-border-strong); border-radius:22px; padding:24px; background:#ffffff07}
footer{color:var(--muted); padding:22px 6vw; border-top:1px solid var(--line); font-size:13px}

/* ---------- Auth / login card ---------- */
.auth-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:28px}
.auth-card{width:min(440px,100%); background:linear-gradient(180deg,var(--panel2),var(--panel)); border:1px solid var(--line); border-radius:28px; padding:32px; box-shadow:0 28px 80px #0009}
.auth-card h2{margin:0 0 8px; font-size:28px; letter-spacing:-.5px}
.auth-card p.lead{margin:0 0 22px; color:var(--muted); line-height:1.45}

/* ---------- Forms ---------- */
label{display:block; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.09em; margin:0 0 8px; font-weight:900}
input[type=text], input[type=password], input[type=file], select, textarea{
  width:100%; border:1px solid var(--line); background:var(--bg); color:var(--text);
  border-radius:14px; padding:13px 14px; font-size:15px; outline:none; font-family:inherit;
}
input:focus, select:focus, textarea:focus{border-color:var(--accent); box-shadow:0 0 0 4px #7dd3fc22}
.field{margin-bottom:16px}
.form-row{display:flex; gap:14px; flex-wrap:wrap}
.form-row .field{flex:1; min-width:200px}
.form-card{
  background:linear-gradient(180deg,var(--panel2),var(--panel)); border:1px solid var(--line);
  border-radius:24px; padding:26px; margin-bottom:24px;
}
.form-card h3{margin:0 0 4px; font-size:20px}
.form-card .hint{color:var(--muted); font-size:13px; margin:0 0 18px}
.alert{border-radius:14px; padding:13px 16px; margin-bottom:16px; font-size:14px; font-weight:700}
.alert-error{background:#3a1420; color:#fca5a5; border:1px solid #5c1f2c}
.alert-success{background:#0f2b22; color:#a7f3d0; border:1px solid #1e4d3d}

/* ---------- Tables ---------- */
table{width:100%; border-collapse:collapse; font-size:14px}
th, td{text-align:left; padding:13px 12px; border-bottom:1px solid var(--line)}
th{color:var(--muted); text-transform:uppercase; font-size:11px; letter-spacing:.08em}
tr:hover td{background:#ffffff05}
.pill{display:inline-block; border-radius:999px; padding:4px 10px; font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.05em}
.pill-active{background:#0f2b22; color:var(--accent2)}
.pill-disabled{background:#3a1420; color:var(--danger)}
.pill-role{background:#12283f; color:var(--accent)}
.checkbox-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px}
.checkbox-item{display:flex; align-items:center; gap:10px; background:var(--overlay-bg); border:1px solid var(--line); border-radius:12px; padding:10px 12px}
.checkbox-item input{width:auto}
.actions-inline{display:flex; gap:8px; flex-wrap:wrap}
.tabs{display:flex; gap:10px; margin-bottom:22px; flex-wrap:wrap}
.tab-link{padding:10px 16px; border-radius:12px; border:1px solid var(--line); text-decoration:none; color:var(--muted); font-weight:800; font-size:13px}
.tab-link.active{background:#ffffff0f; color:var(--text); border-color:var(--accent)}
.module-back{display:inline-flex; align-items:center; gap:8px; margin-bottom:20px}