:root{--nav:#101922;--nav2:#172430;--ink:#18212b;--muted:#687684;--line:#dfe5e9;--bg:#f4f6f8;--accent:#e9b949;--good:#17835d;--bad:#c13d4a}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",sans-serif}.sidebar{position:fixed;inset:0 auto 0 0;width:248px;background:var(--nav);color:#fff;padding:24px 16px;display:flex;flex-direction:column;z-index:20}.brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;padding:0 8px 28px}.brand-mark{display:inline-grid;place-items:center;width:38px;height:38px;border:2px solid var(--accent);border-radius:8px;color:var(--accent);font-weight:800}.brand b,.brand small{display:block;letter-spacing:.12em}.brand small{font-size:.68rem;color:#93a3af}.sidebar nav{display:flex;flex-direction:column;gap:4px}.sidebar nav a{color:#cfdae2;text-decoration:none;padding:10px 12px;border-radius:7px;font-size:.92rem}.sidebar nav a:hover{background:var(--nav2);color:#fff}.nav-label{padding:20px 12px 5px;color:#6f8291;text-transform:uppercase;font-size:.66rem;font-weight:700;letter-spacing:.12em}.muted-link{opacity:.5}.logout{margin-top:auto}.logout button{width:100%;border:1px solid #334552;background:transparent;color:#cbd5dc;padding:9px;border-radius:7px}.app-main{margin-left:248px;padding:32px;max-width:1680px}.mobile-header{display:none}.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px}.page-head h1{font-size:1.65rem;margin:0}.page-head p{color:var(--muted);margin:5px 0 0}.btn-primary{background:#1b6b5c;border-color:#1b6b5c}.kpi-grid{display:grid;grid-template-columns:repeat(5,minmax(130px,1fr));gap:16px;margin-bottom:28px}.kpi{background:#fff;border:1px solid var(--line);border-radius:10px;padding:18px}.kpi span{color:var(--muted);font-size:.8rem}.kpi strong{font-size:1.75rem;display:block;margin-top:6px}.kpi.good strong{color:var(--good)}.kpi.bad strong{color:var(--bad)}.panel{background:#fff;border:1px solid var(--line);border-radius:10px;margin-bottom:20px;overflow:hidden}.panel-head{padding:16px 20px;border-bottom:1px solid var(--line);font-weight:700}.table{margin:0}.table th{font-size:.72rem;text-transform:uppercase;color:#6b7782;letter-spacing:.04em;background:#fafbfc}.table td,.table th{padding:13px 18px;vertical-align:middle}.badge-status{border-radius:999px;padding:5px 9px;font-size:.72rem;font-weight:700;background:#eef1f3}.status-ONLINE,.status-APPROVED{background:#dff4eb;color:#116b4c}.status-OFFLINE,.status-REJECTED{background:#fbe5e7;color:#a92f3a}.status-PENDING,.status-WARNING{background:#fff0cf;color:#7f5a08}.form-shell{max-width:850px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:24px}.login-main{min-height:100vh;display:grid;place-items:center;padding:24px;background:#0f1922}.login-card{width:min(420px,100%);background:#fff;border-radius:12px;padding:32px}.login-brand{display:flex;align-items:center;gap:12px;margin-bottom:28px}.detail-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.detail-card{background:#fff;border:1px solid var(--line);padding:16px;border-radius:9px}.detail-card small{color:var(--muted);display:block}.detail-card strong{display:block;margin-top:5px;overflow-wrap:anywhere}.code-output{background:#101922;color:#dff4eb;padding:18px;border-radius:8px;overflow-wrap:anywhere;font-family:ui-monospace,monospace}.text-mono{font-family:ui-monospace,monospace}.searchbar{display:flex;gap:8px}.searchbar input{min-width:280px}@media(max-width:1000px){.kpi-grid{grid-template-columns:repeat(2,1fr)}.detail-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:760px){.mobile-header{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--nav);color:#fff}.mobile-header .brand-mark{width:30px;height:30px;font-size:.75rem}.nav-toggle{background:transparent;border:0;color:white;font-size:1.3rem}.sidebar{transform:translateX(-100%);transition:transform .18s}.nav-open .sidebar{transform:none}.app-main{margin:0;padding:20px 14px}.page-head{align-items:flex-start;flex-direction:column}.kpi-grid{grid-template-columns:1fr 1fr}.detail-grid{grid-template-columns:1fr}.searchbar{width:100%}.searchbar input{min-width:0;flex:1}.table-responsive{border-radius:8px}}