:root { --bg:#f8fafc; --ink:#0f172a; --muted:#64748b; --line:#e2e8f0; --accent:#0ea5e9; --side:#0f172a; }
* { box-sizing:border-box; }
body { margin:0; font-family:"Segoe UI",system-ui,sans-serif; background:var(--bg); color:var(--ink); }
a { color:#0369a1; text-decoration:none; }
.layout { display:flex; min-height:100vh; }
.side { width:230px; background:var(--side); color:#cbd5e1; }
.side a { display:block; padding:10px 16px; color:#cbd5e1; }
.side a.active,.side a:hover { background:#1e293b; color:#fff; }
.side .brand { padding:18px 16px; color:#fff; font-weight:700; }
.main { flex:1; padding:22px; }
.card { background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px; margin-bottom:14px; }
.btn { background:var(--accent); color:#042f2e; border:0; border-radius:10px; padding:8px 14px; font-weight:700; cursor:pointer; }
.btn.sec { background:#fff; border:1px solid var(--line); color:var(--ink); }
table { width:100%; border-collapse:collapse; font-size:14px; }
th,td { text-align:left; padding:8px; border-bottom:1px solid var(--line); }
.badge { padding:2px 8px; border-radius:99px; font-size:12px; background:#e2e8f0; }
.form label { display:block; margin:8px 0 4px; font-size:13px; color:var(--muted); }
.form input,.form select,.form textarea { width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:8px; }
.flash { padding:10px; border-radius:8px; margin-bottom:10px; }
.flash.success { background:#d1fae5; }
.flash.error { background:#fee2e2; }
.login-wrap { min-height:100vh; display:grid; place-items:center; background:#0f172a; }
.login-card { background:#fff; width:360px; padding:24px; border-radius:16px; }
@media(max-width:800px){ .layout{display:block;} .side{width:100%;} }