html, body { margin:0; padding:0; font-family:Segoe UI, Arial, sans-serif; background:#f4f6f8; color:#212529; }
.app-shell { min-height:100vh; display:flex; }
.sidebar { width:245px; background:#18212b; color:#fff; position:fixed; top:0; bottom:0; overflow:auto; }
.brand { padding:18px 18px 12px; font-size:18px; font-weight:600; border-bottom:1px solid rgba(255,255,255,.08); }
.brand small { display:block; opacity:.7; font-size:11px; margin-top:4px; font-weight:400; }
.nav { padding:10px; }
.nav a { display:block; color:#dce4eb; text-decoration:none; padding:9px 10px; border-radius:6px; margin:2px 0; font-size:13px; }
.nav a:hover { background:rgba(255,255,255,.08); color:#fff; }
.main { margin-left:245px; width:calc(100% - 245px); }
.topbar { min-height:58px; background:#fff; border-bottom:1px solid #e3e6e9; display:flex; align-items:center; justify-content:space-between; padding:0 18px; position:sticky; top:0; z-index:10; }
.content { padding:18px; }
.page-title { font-size:22px; font-weight:600; margin:0 0 14px; }
.card { background:#fff; border:1px solid #e3e6e9; border-radius:8px; padding:14px; margin-bottom:14px; }
.kpi-grid { display:grid; grid-template-columns:repeat(4,minmax(150px,1fr)); gap:12px; }
.kpi { background:#fff; border:1px solid #e3e6e9; border-radius:8px; padding:14px; }
.kpi .value { font-size:24px; font-weight:700; }
.kpi .label { color:#6c757d; font-size:12px; margin-top:4px; }
.form-row { display:flex; gap:12px; flex-wrap:wrap; align-items:end; }
.form-field { min-width:190px; flex:1; }
.muted { color:#6c757d; font-size:12px; }
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.login-card { width:390px; max-width:100%; background:#fff; border:1px solid #e1e5e8; border-radius:10px; padding:24px; box-shadow:0 8px 30px rgba(0,0,0,.08); }
@media(max-width:900px){ .sidebar{width:68px}.brand{font-size:0;padding:18px 10px}.brand:before{content:'V';font-size:20px}.brand small{display:none}.nav a{font-size:0;text-align:center}.nav a:before{content:'•';font-size:20px}.main{margin-left:68px;width:calc(100% - 68px)}.kpi-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:600px){ .content{padding:10px}.topbar{padding:0 10px}.kpi-grid{grid-template-columns:1fr 1fr}.page-title{font-size:18px} }
.nav-group { color:#93a4b3; font-size:10px; text-transform:uppercase; letter-spacing:.08em; padding:14px 10px 5px; font-weight:600; }
@media(max-width:900px){ .nav-group{display:none} }
.setup-button { display:inline-block; padding:8px 12px; margin:4px 2px; border:1px solid #d7dde3; border-radius:5px; text-decoration:none; color:#243447; background:#fff; font-size:13px; }
.setup-button:hover { background:#f5f7f9; }