*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:Segoe UI,system-ui,-apple-system,sans-serif;background:#f4f6f9;color:#1a1a2e;line-height:1.5}:root{--brand-navy: #1a1a5e;--brand-blue: #1565c0;--brand-orange: #e87a1e;--brand-gold: #f5a623;--brand-gradient: linear-gradient(135deg, #1a1a5e 0%, #2a3a8e 50%, #e87a1e 100%);--sidebar-bg: #2c3e6b;--sidebar-hover: #3a5080;--sidebar-active: #e87a1e;--header-height: 64px;--sidebar-width: 220px;--content-bg: #ffffff;--border-color: #e0e4ea;--text-muted: #6b7280;--pass-green: #2e7d32;--fail-red: #c62828;--partial-amber: #f57c00}.app-layout{display:flex;min-height:100vh}.sidebar{width:var(--sidebar-width);background:var(--sidebar-bg);color:#fff;display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:100;overflow-y:auto}.sidebar-brand{padding:16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(255,255,255,.15);min-height:var(--header-height)}.sidebar-brand img{height:40px;width:auto;border-radius:6px}.sidebar-brand-text{display:flex;flex-direction:column}.sidebar-brand-name{font-size:15px;font-weight:700;color:#fff;letter-spacing:.3px}.sidebar-brand-sub{font-size:10px;color:var(--brand-gold);letter-spacing:.5px}.sidebar-nav{flex:1;padding:8px 0;list-style:none}.sidebar-nav-item{display:block;width:100%;padding:10px 20px;background:none;border:none;color:#ffffffd9;font-size:13px;text-align:left;cursor:pointer;transition:all .15s ease;border-left:3px solid transparent}.sidebar-nav-item:hover{background:var(--sidebar-hover);color:#fff}.sidebar-nav-item.active{background:var(--sidebar-hover);color:var(--brand-gold);border-left-color:var(--brand-orange);font-weight:600}.sidebar-section-label{padding:16px 20px 6px;font-size:10px;text-transform:uppercase;letter-spacing:1.2px;color:#ffffff8c;font-weight:600}.sidebar-footer{padding:12px 16px;border-top:1px solid rgba(255,255,255,.15);font-size:11px;color:#fff9;text-align:center}.main-area{flex:1;margin-left:var(--sidebar-width);display:flex;flex-direction:column}.top-header{height:var(--header-height);background:#fff;border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between;padding:0 24px;position:sticky;top:0;z-index:50}.top-header-left{display:flex;align-items:center;gap:12px}.top-header-title{font-size:18px;font-weight:600;color:var(--brand-navy)}.client-logo{height:32px;width:auto;border-radius:4px;border:1px solid var(--border-color);padding:2px}.top-header-right{display:flex;align-items:center;gap:16px}.user-badge{display:flex;align-items:center;gap:8px;padding:6px 12px;background:#f0f4ff;border-radius:20px;font-size:12px;color:var(--brand-navy)}.user-badge-role{font-weight:600;color:var(--brand-blue)}.btn-logout{padding:6px 14px;font-size:12px;cursor:pointer;border:1px solid #dc3545;border-radius:4px;background:#fff;color:#dc3545;transition:all .15s ease}.btn-logout:hover{background:#dc3545;color:#fff}.content-area{flex:1;padding:24px}.login-container{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--brand-gradient)}.login-card{background:#fff;border-radius:12px;padding:40px;width:100%;max-width:440px;box-shadow:0 20px 60px #0000004d;text-align:center}.login-logo{height:80px;margin-bottom:16px}.login-title{font-size:24px;font-weight:700;color:var(--brand-navy);margin-bottom:4px}.login-subtitle{font-size:14px;color:var(--text-muted);margin-bottom:32px}.login-buttons{display:flex;flex-direction:column;gap:10px}.btn-login{padding:12px;font-size:14px;font-weight:500;cursor:pointer;border:none;border-radius:6px;color:#fff;transition:opacity .15s ease}.btn-login:hover{opacity:.9}.btn-login-admin{background:var(--brand-navy)}.btn-login-engineer{background:var(--brand-blue)}.btn-login-auditor{background:var(--brand-orange)}.btn-login-readonly{background:#6b7280}.login-divider{margin:24px 0 16px;font-size:12px;color:var(--text-muted);position:relative}.login-divider:before,.login-divider:after{content:"";position:absolute;top:50%;width:40%;height:1px;background:var(--border-color)}.login-divider:before{left:0}.login-divider:after{right:0}.text-pass{color:var(--pass-green)}.text-fail{color:var(--fail-red)}.text-partial{color:var(--partial-amber)}