:root{
  --primary:#4f46e5; --primary-d:#4338ca;
  --border:#e2e8f0; --text:#0f172a; --text-dim:#64748b; --bg:#f1f5f9;
}
*{box-sizing:border-box}
body{margin:0;font-family:'Sarabun','Segoe UI',system-ui,sans-serif;color:var(--text);background:var(--bg)}
a{color:inherit}

/* ---------- login ---------- */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;
  background:linear-gradient(135deg,#312e81,#4f46e5 60%,#06b6d4)}
.login-card{background:#fff;border-radius:20px;padding:38px 34px;width:340px;
  box-shadow:0 25px 60px rgba(0,0,0,.3);text-align:center}
.login-logo{font-size:46px}
.login-card h1{margin:6px 0 2px;font-size:24px;color:#1e293b}
.login-card .sub{margin:0 0 20px;color:var(--text-dim);font-size:13px}
.login-card label{display:block;text-align:left;font-size:12.5px;font-weight:600;color:#475569;margin:12px 0 5px}
.login-card input{width:100%;padding:11px 13px;border:1.5px solid var(--border);border-radius:10px;font-size:15px}
.login-card input:focus{outline:none;border-color:var(--primary)}
.login-card button{width:100%;margin-top:20px;padding:12px;border:none;border-radius:10px;
  background:var(--primary);color:#fff;font-size:15px;font-weight:700;cursor:pointer}
.login-card button:hover{background:var(--primary-d)}
.login-err{background:#fef2f2;color:#dc2626;border:1px solid #fecaca;border-radius:9px;padding:9px;font-size:13px;margin-bottom:6px}
.login-foot{margin-top:18px;font-size:11px;color:#94a3b8}

/* ---------- layout ---------- */
.sidebar{position:fixed;top:0;left:0;width:240px;height:100vh;background:#0f172a;color:#cbd5e1;
  display:flex;flex-direction:column;z-index:50}
.brand{display:flex;align-items:center;gap:11px;padding:18px 18px 14px}
.brand .logo{font-size:28px}
.brand .bn{font-size:18px;font-weight:800;color:#fff}
.brand .bs{font-size:11px;color:#94a3b8}
.sidebar nav{flex:1;overflow:auto;padding:6px 10px}
.sidebar .sec{font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:#64748b;margin:14px 8px 6px;font-weight:700}
.sidebar nav a{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;
  text-decoration:none;color:#cbd5e1;font-size:14px;margin-bottom:2px}
.sidebar nav a .i{font-size:16px}
.sidebar nav a:hover{background:#1e293b;color:#fff}
.sidebar nav a.active{background:var(--primary);color:#fff;font-weight:700}
.sidebar nav a.muted{color:#64748b;cursor:default}
.sidebar nav a.muted em{font-size:10px;font-style:normal;opacity:.7}
.userbox{display:flex;align-items:center;gap:10px;padding:13px 16px;border-top:1px solid #1e293b}
.userbox .ua{width:34px;height:34px;border-radius:50%;background:var(--primary);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700}
.userbox .un{font-size:13px;font-weight:600;color:#fff}
.userbox .ur{font-size:11px;color:#94a3b8}
.userbox .logout{margin-left:auto;color:#94a3b8;font-size:18px;text-decoration:none}
.userbox .logout:hover{color:#f87171}

.content{margin-left:240px;min-height:100vh}
.topbar{position:sticky;top:0;background:rgba(255,255,255,.85);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);padding:13px 24px;display:flex;align-items:center;gap:12px;z-index:30}
.topbar .tt{font-size:17px;font-weight:700}
.burger{display:none;font-size:20px;cursor:pointer}
.page{padding:22px 24px;max-width:1280px}

/* ---------- dashboard ---------- */
.dash-hero{background:linear-gradient(135deg,#4f46e5,#06b6d4);color:#fff;border-radius:18px;
  padding:26px 28px;margin-bottom:20px}
.dash-hero h1{margin:0 0 4px;font-size:24px}
.dash-hero p{margin:0;opacity:.9}
.dash-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:24px}
.dstat{background:#fff;border:1px solid var(--border);border-radius:14px;padding:16px 20px}
.dstat .dn{font-size:26px;font-weight:800;color:var(--primary)}
.dstat .dl{font-size:13px;color:var(--text-dim)}
.dash-h2{font-size:16px;margin:0 0 12px}
.mod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.modcard{background:#fff;border:1px solid var(--border);border-radius:16px;padding:20px;
  text-decoration:none;color:inherit;display:block;transition:.15s;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.modcard:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.1);border-color:var(--primary)}
.modcard.soon{opacity:.55;pointer-events:none}
.modcard .mi{font-size:32px}
.modcard .mt{font-size:16px;font-weight:700;margin-top:8px}
.modcard .md{font-size:12.5px;color:var(--text-dim);margin-top:3px;min-height:32px}
.modcard .mgo{margin-top:10px;font-size:13px;font-weight:700;color:var(--primary)}
.modcard .mgo.soon{color:#94a3b8}

.btn{padding:8px 14px;border-radius:9px;border:1px solid var(--border);background:#fff;
  font-size:13px;cursor:pointer;text-decoration:none;color:var(--text)}
.btn-sec{background:#f1f5f9}
.btn:hover{background:#eef2ff}

/* ---------- responsive ---------- */
@media(max-width:860px){
  .sidebar{transform:translateX(-100%);transition:.2s}
  #navtoggle:checked ~ .sidebar{transform:none}
  .content{margin-left:0}
  .burger{display:block}
}