:root{
  --bg:#07111f;--panel:#0d1929;--panel2:#111f31;--line:#22324a;
  --text:#f5f7fb;--muted:#8fa2bb;--gold:#c9972c;--gold2:#e0b44d;
  --danger:#ef6b73;--success:#47c78b;--warn:#e0b44d
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,Arial,"Segoe UI",Tahoma,sans-serif;background:var(--bg);color:var(--text)}
a{color:inherit;text-decoration:none}
.login-page,.setup-page{min-height:100vh;background:
 radial-gradient(circle at 15% 20%,rgba(201,151,44,.14),transparent 26%),
 radial-gradient(circle at 85% 70%,rgba(63,104,168,.12),transparent 30%),var(--bg)}
.login-shell{min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr}
.login-hero{padding:8vw;display:flex;align-items:center;border-left:1px solid var(--line)}
.login-hero h1{font-size:clamp(38px,5vw,76px);line-height:1.08;margin:12px 0;max-width:800px}
.login-hero p{color:var(--muted);font-size:20px;max-width:650px;line-height:1.8}
.eyebrow{color:var(--gold2);font-weight:800;letter-spacing:.18em;font-size:12px}
.security-note{display:inline-block;margin-top:28px;padding:10px 14px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:12px}
.login-panel{display:flex;align-items:center;justify-content:center;padding:32px}
.login-card,.setup-card{width:min(460px,100%);background:rgba(13,25,41,.92);border:1px solid var(--line);border-radius:24px;padding:32px;box-shadow:0 28px 80px rgba(0,0,0,.26)}
.setup-card{margin:7vh auto}
.brand-mark{width:62px;height:62px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(145deg,var(--gold2),#8e6416);color:#111;font-weight:900;letter-spacing:.05em;box-shadow:0 10px 30px rgba(201,151,44,.25)}
.brand-mark.small{width:42px;height:42px;border-radius:12px;font-size:12px}
h1,h2,h3,p{margin-top:0}
.muted{color:var(--muted)}
label{display:block;font-size:13px;color:#c5d0df;margin:16px 0 8px}
input{width:100%;height:48px;border-radius:12px;border:1px solid var(--line);background:#091523;color:var(--text);padding:0 14px;outline:none}
input:focus{border-color:var(--gold)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;border:0;border-radius:12px;padding:0 18px;font-weight:800;cursor:pointer}
.btn.primary{background:linear-gradient(135deg,var(--gold2),var(--gold));color:#17120a}
.btn.wide{width:100%;margin-top:22px}
.notice{padding:13px 15px;border-radius:12px;margin:14px 0;font-size:13px;line-height:1.6}
.notice.warning{background:rgba(224,180,77,.09);border:1px solid rgba(224,180,77,.25)}
.notice.danger{background:rgba(239,107,115,.08);border:1px solid rgba(239,107,115,.25)}
.notice.success{background:rgba(71,199,139,.08);border:1px solid rgba(71,199,139,.25)}
.fallback-box{margin-top:24px;padding-top:20px;border-top:1px solid var(--line);display:grid;gap:5px}
.fallback-box span{color:var(--muted);font-size:12px;line-height:1.6}
.topbar{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 26px;border-bottom:1px solid var(--line);background:rgba(7,17,31,.94);position:sticky;top:0;z-index:5}
.brand,.profile{display:flex;align-items:center;gap:12px}
.brand small,.profile small{display:block;color:var(--muted);font-size:11px}
.profile{gap:14px}.profile a{color:var(--gold2);font-size:13px}
.layout{display:grid;grid-template-columns:240px 1fr;min-height:calc(100vh - 72px)}
.sidebar{border-left:1px solid var(--line);padding:20px 12px;background:#091421}
.sidebar a,.sidebar .nav-heading{display:block;padding:12px 14px;border-radius:11px;margin:3px 0;color:#c3cfdd;font-size:14px}
.sidebar a:hover,.sidebar a.active{background:var(--panel2);color:#fff}
.sidebar .nav-heading{color:#63758d;font-size:10px;text-transform:uppercase;letter-spacing:.15em;margin-top:16px}
.content{padding:32px;max-width:1500px;width:100%;margin:0 auto}
.content.full{max-width:1000px}
.welcome{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:34px}
.welcome h1{font-size:34px;margin:8px 0}
.welcome p{color:var(--muted)}
.status-pill{padding:9px 13px;border:1px solid var(--line);border-radius:999px;color:var(--gold2);font-size:12px;white-space:nowrap}
.section-title{font-size:14px;color:#c8d4e3;margin:28px 0 14px}
.app-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.app-card{position:relative;min-height:128px;background:linear-gradient(145deg,var(--panel),var(--panel2));border:1px solid var(--line);border-radius:18px;padding:18px;display:flex;gap:14px;align-items:center;transition:.2s}
.app-card:hover{transform:translateY(-2px);border-color:#465b78}
.app-card span{display:block;color:var(--muted);font-size:12px;margin-top:4px}
.app-icon{width:50px;height:50px;border:1px solid rgba(201,151,44,.35);background:rgba(201,151,44,.08);border-radius:15px;display:grid;place-items:center;color:var(--gold2);font-weight:900}
.app-state{position:absolute;left:14px;bottom:12px;font-size:10px;color:#6f849e}
.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.metric{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px}
.metric span,.metric small{display:block;color:var(--muted);font-size:12px}
.metric strong{display:block;font-size:30px;margin:9px 0}
.safety-card{margin-top:20px;padding:18px;border:1px solid rgba(71,199,139,.2);background:rgba(71,199,139,.05);border-radius:16px}
.safety-card p{margin:7px 0 0;color:var(--muted);font-size:13px;line-height:1.7}
.integration-list{display:grid;gap:10px;margin-top:20px}
.integration-row{display:flex;justify-content:space-between;align-items:center;padding:16px;border-radius:14px;background:var(--panel);border:1px solid var(--line)}
.integration-row small{display:block;color:var(--muted);margin-top:3px}
.flag{font-size:11px;padding:6px 10px;border-radius:999px}.flag.off{background:rgba(239,107,115,.08);color:#ff9ea5}.flag.on{background:rgba(71,199,139,.1);color:#72e4aa}
@media(max-width:900px){
 .login-shell{grid-template-columns:1fr}.login-hero{min-height:42vh;border-left:0;border-bottom:1px solid var(--line);padding:38px 24px}.login-panel{padding:22px}
 .layout{grid-template-columns:1fr}.sidebar{display:none}.content{padding:22px}
 .app-grid{grid-template-columns:1fr 1fr}.metric-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
 .topbar{padding:0 14px}.profile span,.profile small{display:none}.welcome{display:block}.status-pill{display:inline-block;margin-top:10px}
 .app-grid,.metric-grid{grid-template-columns:1fr}.login-card,.setup-card{padding:22px}
}