:root { --orange:#f45b05; --ink:#101010; --muted:#60708a; --line:#d8e0ec; --bg:#f4f7fb; }
* { box-sizing:border-box; }
body { margin:0; font-family:Arial, Helvetica, sans-serif; color:#071a3b; background:var(--bg); }
.shell { min-height:100vh; display:flex; }
.sidebar { width:240px; flex:0 0 240px; background:linear-gradient(180deg,#151515,#080808); color:#d9d9d9; }
.brand { height:112px; padding:22px 28px; border-bottom:1px solid #282828; display:flex; align-items:center; gap:16px; }
.brand-logo { display:block; width:120px; height:auto; max-height:68px; object-fit:contain; }
.brand-copy { font-size:7px; line-height:1.25; color:var(--orange); white-space:nowrap; }
.menu-toggle { margin-left:auto; border:1px solid #444; border-radius:9px; color:#fff; background:#242424; font-size:20px; width:35px; height:35px; }
.nav { padding:12px 0; }
.nav-link,.nav-group-title { display:flex; align-items:center; gap:12px; padding:12px 20px; color:#c8c8c8; text-decoration:none; font-size:12px; font-weight:700; }
.nav-link.active { margin:0 0; background:#2e2e2e; color:#fff; border-radius:0 9px 9px 0; }
.nav-icon { color:#f2c300; font-size:16px; width:14px; text-align:center; }
.nav-icon svg { display:block; width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.nav-group-title { width:100%; border:0; background:transparent; justify-content:space-between; padding-top:16px; padding-bottom:10px; color:#fff; text-align:left; cursor:pointer; }
.nav-group-title:hover { background:#202020; }
.nav-group-title .group-label { display:flex; gap:12px; align-items:center; }
.submenu { display:none; }
.submenu.open { display:block; }
.submenu .nav-link { padding:10px 20px 10px 47px; font-size:11px; font-weight:600; }
.submenu .nav-link.active { border-radius:0; background:#292929; }
.main { flex:1; min-width:0; }
.topbar { height:82px; background:#fff; border-bottom:1px solid var(--line); padding:17px 28px; display:flex; align-items:center; justify-content:space-between; }
.title { margin:0; font-size:20px; } .subtitle { margin:5px 0 0; color:var(--muted); font-size:11px; }
.logout { border:1px solid #ccd6e5; background:white; border-radius:8px; padding:10px 18px; color:#152844; font-size:12px; text-decoration:none; }
.content { padding:22px 24px; }
.page-empty { min-height:calc(100vh - 130px); }
.login-page { min-height:100vh; display:grid; place-items:center; background:linear-gradient(135deg,#101010,#252525); }
.login-card { width:min(420px,calc(100% - 32px)); padding:38px; background:#fff; border-radius:14px; box-shadow:0 20px 60px #0008; }
.login-logo { display:block; width:210px; max-width:100%; height:auto; margin:0 auto 10px; }
.login-card h1 { margin:14px 0 4px; } .login-card p { color:var(--muted); margin:0 0 24px; font-size:13px; }
.login-card label { display:block; margin:15px 0; font-size:12px; font-weight:700; color:#233653; }
.login-card input { display:block; width:100%; margin-top:7px; padding:12px; border:1px solid var(--line); border-radius:7px; font-size:14px; }
.login-card button { width:100%; margin-top:10px; padding:13px; border:0; border-radius:7px; background:var(--orange); color:#fff; font-weight:700; cursor:pointer; }
.login-error { padding:10px; border-radius:6px; background:#fff0ed; color:#b42318; font-size:12px; }
@media (max-width:800px) { .sidebar { width:72px; flex-basis:72px; } .brand { padding:18px; } .brand-copy,.nav-link span:not(.nav-icon),.nav-group-title .group-label span:last-child,.nav-group-title > span:last-child { display:none; } .nav-link,.nav-group-title { padding:14px 24px; } .submenu .nav-link { padding:14px 24px; } .menu-toggle { display:none; } .topbar { padding:16px; } .content { padding:16px; } }