/* STELLAR DOMINION — app.css */
:root{--bg:#050810;--panel:#090e1a;--panel2:#0c1220;--panel3:#0f1628;--text:#d8e8f8;--muted:#6a85a0;--line:#1a2840;--accent:#4da8ff;--accent2:#00d4ff;--warn:#ffb347;--good:#39d98a;--bad:#ff4d6d;--purple:#a78bfa;--radius:10px;--pad:14px;--font-head:'Orbitron',monospace;--font-body:'Rajdhani',sans-serif;}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{font-family:var(--font-body);background:var(--bg);color:var(--text);font-size:15px;font-weight:400;-webkit-font-smoothing:antialiased;}
body::before{content:'';position:fixed;inset:0;background:radial-gradient(1px 1px at 15% 25%,rgba(255,255,255,0.6) 0%,transparent 100%),radial-gradient(1px 1px at 35% 65%,rgba(255,255,255,0.4) 0%,transparent 100%),radial-gradient(1px 1px at 55% 15%,rgba(255,255,255,0.5) 0%,transparent 100%),radial-gradient(1px 1px at 75% 45%,rgba(255,255,255,0.3) 0%,transparent 100%),radial-gradient(1px 1px at 88% 78%,rgba(255,255,255,0.6) 0%,transparent 100%),radial-gradient(1.5px 1.5px at 70% 90%,rgba(100,180,255,0.3) 0%,transparent 100%),linear-gradient(180deg,#040710 0%,#050810 100%);z-index:-1;pointer-events:none;}
.shell{display:flex;flex-direction:column;height:100vh;overflow:hidden}
.topbar{flex-shrink:0;display:flex;align-items:center;gap:10px;padding:8px 14px;background:rgba(9,14,26,0.95);border-bottom:1px solid var(--line);backdrop-filter:blur(12px);position:relative;z-index:50;}
.topbar::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:0.3;}
.brand{font-family:var(--font-head);font-size:13px;font-weight:700;letter-spacing:2px;color:var(--accent);white-space:nowrap;text-shadow:0 0 20px rgba(77,168,255,0.5);}
.brand span{color:var(--muted);font-weight:400;}
.topbar-center{flex:1;display:flex;justify-content:center;}
.colony-selector{display:flex;align-items:center;gap:8px;background:var(--panel3);border:1px solid var(--line);border-radius:999px;padding:5px 14px;font-family:var(--font-body);font-size:13px;font-weight:600;color:var(--text);cursor:pointer;}
.colony-selector select{font:inherit;color:inherit;background:transparent;border:0;outline:0;cursor:pointer;font-weight:600;max-width:220px;}
.colony-selector .dot{width:7px;height:7px;border-radius:50%;background:var(--good);box-shadow:0 0 6px var(--good);flex-shrink:0;}
.topbar-right{display:flex;gap:8px;align-items:center;}
.res-pill{display:flex;align-items:center;gap:6px;background:var(--panel3);border:1px solid var(--line);border-radius:999px;padding:4px 10px;font-size:12px;font-weight:600;white-space:nowrap;}
.res-pill .val{font-family:'Rajdhani',sans-serif;font-weight:700;}
.res-pill .rate{color:var(--good);font-size:11px;margin-left:2px;}
.alert-btn{display:flex;align-items:center;gap:6px;background:var(--panel3);border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:12px;font-weight:700;color:var(--text);cursor:pointer;transition:all 0.2s;}
.alert-btn:hover{border-color:rgba(255,179,71,0.5);color:var(--warn);}
.badge{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:rgba(255,179,71,0.15);border:1px solid rgba(255,179,71,0.5);color:var(--warn);font-size:10px;font-weight:900;}
.body{display:flex;flex:1;overflow:hidden;}
.sidenav{flex-shrink:0;width:52px;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;padding:10px 0;gap:2px;overflow:hidden;transition:width 0.25s ease;position:relative;z-index:40;}
.sidenav:hover{width:160px;}
.nav-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 14px;color:var(--muted);cursor:pointer;border:none;background:none;font-family:var(--font-body);font-size:13px;font-weight:600;letter-spacing:0.5px;border-left:2px solid transparent;transition:all 0.15s;white-space:nowrap;overflow:hidden;text-align:left;}
.nav-item:hover{color:var(--text);background:rgba(255,255,255,0.04);}
.nav-item.active{color:var(--accent);border-left-color:var(--accent);background:rgba(77,168,255,0.07);}
.nav-icon{font-size:16px;flex-shrink:0;width:22px;text-align:center;}
.nav-label{opacity:0;transition:opacity 0.15s;font-size:12px;}
.sidenav:hover .nav-label{opacity:1;}
.nav-divider{width:32px;height:1px;background:var(--line);margin:6px auto;}
.sidenav:hover .nav-divider{width:calc(100% - 28px);}
.main{flex:1;overflow-y:auto;padding:16px;scrollbar-width:thin;scrollbar-color:var(--line) transparent;}
.main::-webkit-scrollbar{width:4px;}
.main::-webkit-scrollbar-thumb{background:var(--line);border-radius:2px;}
.view{display:none;animation:fadeUp 0.25s ease;}
.view.active{display:block;}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
.view-head{margin-bottom:14px;}
.view-title{font-family:var(--font-head);font-size:15px;font-weight:700;color:var(--text);letter-spacing:1.5px;display:flex;align-items:center;gap:10px;}
.view-sub{color:var(--muted);font-size:13px;margin-top:3px;font-weight:400;}
.card{background:var(--panel2);border:1px solid var(--line);border-radius:var(--radius);padding:var(--pad);position:relative;overflow:hidden;}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(77,168,255,0.15),transparent);}
.card-title{font-family:var(--font-head);font-size:11px;font-weight:500;color:var(--muted);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:12px;display:flex;align-items:center;gap:8px;}
.card-title::after{content:'';flex:1;height:1px;background:var(--line);}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}
@media(max-width:800px){.grid-2,.grid-3{grid-template-columns:1fr;}}
.kv{display:grid;grid-template-columns:1fr auto;gap:6px 14px;align-items:center;}
.kv .k{color:var(--muted);font-size:13px;font-weight:500;}
.kv .v{text-align:right;font-family:'Rajdhani',sans-serif;font-size:13px;font-weight:600;}
.kv .v.good{color:var(--good);}
.kv .v.warn{color:var(--warn);}
.kv .v.bad{color:var(--bad);}
.kv .v.accent{color:var(--accent);}
table{width:100%;border-collapse:collapse;font-size:13px;}
thead tr{border-bottom:1px solid var(--line);}
th{text-align:left;color:var(--muted);font-family:var(--font-head);font-size:9px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;padding:8px 10px;white-space:nowrap;}
td{padding:9px 10px;border-bottom:1px solid rgba(26,40,64,0.5);font-weight:500;}
tbody tr:last-child td{border-bottom:0;}
tbody tr:hover td{background:rgba(77,168,255,0.03);}
.mono{font-family:'Rajdhani',sans-serif;font-weight:600;}
td.actions{white-space:nowrap;text-align:right;}
.field{display:grid;gap:6px;margin-bottom:10px;}
.field label{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);}
.field input,.field select,.field textarea{font:inherit;font-family:var(--font-body);font-size:14px;font-weight:500;color:var(--text);background:rgba(17,24,35,0.8);border:1px solid var(--line);border-radius:8px;padding:9px 12px;outline:none;transition:border-color 0.15s;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:rgba(77,168,255,0.4);}
.field textarea{min-height:80px;resize:vertical;}
.field input.error{border-color:rgba(255,77,109,0.6);}
.split{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.tag{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:0.5px;border:1px solid var(--line);color:var(--muted);background:rgba(255,255,255,0.04);white-space:nowrap;}
.tag.good{border-color:rgba(57,217,138,0.35);color:var(--good);background:rgba(57,217,138,0.08);}
.tag.warn{border-color:rgba(255,179,71,0.35);color:var(--warn);background:rgba(255,179,71,0.08);}
.tag.bad{border-color:rgba(255,77,109,0.35);color:var(--bad);background:rgba(255,77,109,0.08);}
.tag.accent{border-color:rgba(77,168,255,0.35);color:var(--accent);background:rgba(77,168,255,0.08);}
.tag.purple{border-color:rgba(167,139,250,0.35);color:var(--purple);background:rgba(167,139,250,0.08);}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:7px 14px;border-radius:8px;border:1px solid var(--line);background:rgba(255,255,255,0.04);color:var(--text);font-family:var(--font-body);font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap;transition:all 0.15s;letter-spacing:0.3px;}
.btn:hover{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.15);}
.btn.primary{border-color:rgba(77,168,255,0.5);background:rgba(77,168,255,0.12);color:var(--accent);}
.btn.primary:hover{background:rgba(77,168,255,0.2);}
.btn.danger{border-color:rgba(255,77,109,0.4);background:rgba(255,77,109,0.08);color:var(--bad);}
.btn.good{border-color:rgba(57,217,138,0.4);background:rgba(57,217,138,0.08);color:var(--good);}
.btn.sm{padding:5px 10px;font-size:12px;border-radius:6px;}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
.timer-badge{font-family:'Rajdhani',sans-serif;font-size:12px;font-weight:700;color:var(--accent);background:rgba(77,168,255,0.1);border:1px solid rgba(77,168,255,0.2);border-radius:6px;padding:2px 8px;display:inline-block;}
.timer-badge.warn{color:var(--warn);background:rgba(255,179,71,0.1);border-color:rgba(255,179,71,0.2);}
.alert-strip{display:flex;align-items:center;gap:10px;background:rgba(255,77,109,0.07);border:1px solid rgba(255,77,109,0.25);border-radius:8px;padding:10px 14px;margin-bottom:12px;}
.alert-strip .ai{color:var(--bad);font-size:16px;flex-shrink:0;}
.alert-strip .at{font-size:13px;font-weight:600;}
.table-wrap{overflow-x:auto;}
.gap{margin-bottom:12px;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.4;}}
.blink{animation:pulse 1.8s ease-in-out infinite;}
.notif{position:fixed;top:60px;right:16px;z-index:200;background:var(--panel2);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:8px;padding:10px 14px;font-size:13px;font-weight:600;box-shadow:0 8px 32px rgba(0,0,0,0.5);transform:translateX(300px);opacity:0;transition:all 0.3s ease;max-width:280px;}
.notif.show{transform:translateX(0);opacity:1;}
.notif.warn{border-left-color:var(--warn);}
.notif.bad{border-left-color:var(--bad);}

/* AUTH */
#auth-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:#050810;transition:opacity 0.6s ease;}
.auth-bg{position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 40%,rgba(77,168,255,0.06) 0%,transparent 70%),radial-gradient(1px 1px at 20% 30%,rgba(255,255,255,0.6) 0%,transparent 100%),radial-gradient(1px 1px at 60% 70%,rgba(255,255,255,0.4) 0%,transparent 100%),radial-gradient(1px 1px at 80% 20%,rgba(255,255,255,0.5) 0%,transparent 100%),linear-gradient(180deg,#030508 0%,#050810 100%);pointer-events:none;}
.auth-ring{position:absolute;border-radius:50%;border:1px solid rgba(77,168,255,0.1);animation:ringPulse 6s ease-in-out infinite;pointer-events:none;transform:translate(-50%,-50%);}
@keyframes ringPulse{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:0.4;}50%{transform:translate(-50%,-50%) scale(1.06);opacity:0.15;}}
.auth-card{position:relative;z-index:2;width:100%;max-width:420px;padding:0 16px;}
.auth-screen{display:none;}
.auth-screen.active{display:block;animation:authIn 0.35s ease;}
@keyframes authIn{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}
.auth-logo{text-align:center;margin-bottom:28px;}
.auth-logo-title{font-family:var(--font-head);font-size:24px;font-weight:900;letter-spacing:4px;color:var(--accent);text-shadow:0 0 40px rgba(77,168,255,0.5);display:block;margin-bottom:4px;}
.auth-logo-sub{font-size:11px;font-weight:600;letter-spacing:3px;color:var(--muted);text-transform:uppercase;}
.auth-panel{background:rgba(9,14,26,0.92);border:1px solid var(--line);border-radius:14px;padding:28px 24px;backdrop-filter:blur(20px);box-shadow:0 24px 80px rgba(0,0,0,0.6);position:relative;overflow:hidden;}
.auth-panel::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(77,168,255,0.3),transparent);}
.auth-panel-title{font-family:var(--font-head);font-size:13px;font-weight:700;letter-spacing:2px;color:var(--text);margin-bottom:4px;}
.auth-panel-sub{font-size:13px;color:var(--muted);margin-bottom:20px;font-weight:400;}
.auth-field{display:grid;gap:6px;margin-bottom:14px;}
.auth-field label{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);}
.auth-field input,.auth-field select{font-family:var(--font-body);font-size:15px;font-weight:500;color:var(--text);background:rgba(15,22,40,0.9);border:1px solid var(--line);border-radius:8px;padding:11px 14px;outline:none;transition:border-color 0.2s,box-shadow 0.2s;width:100%;}
.auth-field input:focus,.auth-field select:focus{border-color:rgba(77,168,255,0.5);box-shadow:0 0 0 3px rgba(77,168,255,0.08);}
.auth-field input.error{border-color:rgba(255,77,109,0.6);}
.field-hint{font-size:11px;color:var(--muted);margin-top:2px;}
.field-error{font-size:11px;color:var(--bad);margin-top:2px;display:none;}
.field-error.show{display:block;}
.auth-btn{width:100%;padding:13px;border-radius:10px;border:1px solid rgba(77,168,255,0.4);background:rgba(77,168,255,0.14);color:var(--accent);font-family:var(--font-head);font-size:12px;font-weight:700;letter-spacing:2px;cursor:pointer;transition:all 0.2s;margin-top:4px;}
.auth-btn:hover{background:rgba(77,168,255,0.24);box-shadow:0 0 20px rgba(77,168,255,0.15);}
.auth-btn.secondary{background:transparent;border-color:var(--line);color:var(--muted);font-size:11px;margin-top:10px;padding:10px;}
.auth-btn.secondary:hover{border-color:rgba(77,168,255,0.3);color:var(--accent);}
.auth-divider{display:flex;align-items:center;gap:12px;margin:16px 0;color:var(--muted);font-size:11px;font-weight:600;}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--line);}
.pw-strength{margin-top:6px;}
.pw-strength-bar{height:3px;border-radius:2px;background:var(--line);overflow:hidden;margin-bottom:4px;}
.pw-strength-fill{height:100%;border-radius:2px;transition:width 0.3s,background 0.3s;width:0%;background:var(--bad);}
.pw-strength-label{font-size:11px;color:var(--muted);}
.auth-steps{display:flex;justify-content:center;gap:8px;margin-bottom:20px;}
.auth-step{width:28px;height:4px;border-radius:2px;background:var(--line);transition:background 0.3s;}
.auth-step.active{background:var(--accent);}
.auth-step.done{background:var(--good);}
.feature-list{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:20px 0;}
.feature-item{display:flex;align-items:flex-start;gap:8px;background:rgba(255,255,255,0.03);border:1px solid var(--line);border-radius:8px;padding:10px;font-size:12px;}
.feature-item .fi{font-size:16px;flex-shrink:0;margin-top:1px;}
.feature-item .ft{font-weight:700;color:var(--text);display:block;margin-bottom:2px;}
.feature-item .fs{color:var(--muted);font-weight:400;line-height:1.4;}
.auth-footer{text-align:center;margin-top:16px;font-size:12px;color:var(--muted);}
.auth-link{color:var(--accent);cursor:pointer;font-weight:600;background:none;border:none;font-family:inherit;font-size:inherit;text-decoration:underline;text-underline-offset:2px;}
.auth-link:hover{color:var(--accent2);}
.spinner{display:inline-block;width:16px;height:16px;border:2px solid rgba(77,168,255,0.3);border-top-color:var(--accent);border-radius:50%;animation:spin 0.7s linear infinite;vertical-align:middle;margin-right:8px;}
@keyframes spin{to{transform:rotate(360deg);}}