*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-primary: #0a0a0f;--bg-secondary: #111118;--bg-card: #16161f;--bg-elevated: #1c1c28;--border: #252535;--border-active: #3a3a5c;--text-primary: #e4e4ed;--text-secondary: #8888a0;--text-muted: #555570;--accent: #6c6cff;--accent-dim: #4a4a9f;--green: #34d399;--green-dim: #1a6b4a;--yellow: #fbbf24;--yellow-dim: #7a5f10;--red: #f87171;--red-dim: #7a2020;--cyan: #22d3ee;--font-mono: "Cascadia Code", "JetBrains Mono", "Fira Code", "Consolas", monospace;--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;--radius: 6px;--radius-lg: 10px}html{font-size:14px}body{font-family:var(--font-sans);background:var(--bg-primary);color:var(--text-primary);line-height:1.5;min-height:100vh;-webkit-font-smoothing:antialiased}code,pre,.mono{font-family:var(--font-mono)}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-active);border-radius:2px}.auth-overlay{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--bg-primary)}.auth-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:3rem 2.5rem;text-align:center;max-width:420px;width:100%;animation:fadeIn .4s ease}.auth-card h1{font-family:var(--font-mono);font-size:1.1rem;letter-spacing:.15em;color:var(--accent);margin-bottom:.5rem}.auth-card .subtitle{color:var(--text-secondary);font-size:.85rem;margin-bottom:2rem}.auth-card .lock-icon{font-size:2.5rem;margin-bottom:1.5rem;display:block;opacity:.6}.auth-form{display:flex;flex-direction:column;gap:1rem;text-align:left}.auth-field label{display:block;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:.35rem}.auth-field input{width:100%;background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-primary);font-family:var(--font-mono);font-size:.85rem;padding:.65rem .75rem;transition:border-color .2s}.auth-field input::placeholder{color:var(--text-muted)}.auth-field input:focus{outline:none;border-color:var(--accent)}.auth-btn{background:var(--accent);color:#fff;border:none;padding:.75rem 2rem;border-radius:var(--radius);font-family:var(--font-mono);font-size:.9rem;cursor:pointer;transition:background .2s,transform .1s}.auth-btn:hover{background:var(--accent-dim)}.auth-btn:active{transform:scale(.97)}.auth-error{color:var(--red);font-size:.8rem;margin-top:1rem}.auth-status{color:var(--text-secondary);font-size:.8rem;margin-top:1rem}.auth-back{margin-top:1.25rem;background:none;border:none;color:var(--text-muted);font-family:var(--font-mono);font-size:.75rem;cursor:pointer;transition:color .2s}.auth-back:hover{color:var(--text-secondary)}.landing{min-height:100vh;display:flex;flex-direction:column;background:var(--bg-primary)}.landing-header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 2.5rem;border-bottom:1px solid var(--border)}.landing-brand{display:flex;align-items:baseline;gap:.15rem;font-family:var(--font-mono)}.landing-mark{font-size:1.1rem;font-weight:700;color:var(--accent);letter-spacing:.02em}.landing-name{font-size:1.1rem;font-weight:600;color:var(--text-primary);letter-spacing:.06em}.landing-signin-btn{background:transparent;color:var(--text-secondary);border:1px solid var(--border);padding:.45rem 1rem;border-radius:var(--radius);font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:color .2s,border-color .2s}.landing-signin-btn:hover{color:var(--text-primary);border-color:var(--border-active)}.landing-main{flex:1;max-width:960px;width:100%;margin:0 auto;padding:4rem 2.5rem 3rem}.landing-hero{max-width:640px;margin-bottom:4rem;animation:fadeIn .5s ease}.landing-eyebrow{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);margin-bottom:1.25rem}.landing-headline{font-family:var(--font-sans);font-size:2rem;font-weight:500;line-height:1.25;letter-spacing:-.02em;color:var(--text-primary);margin-bottom:1.25rem}.landing-lede{font-size:.95rem;line-height:1.65;color:var(--text-secondary);margin-bottom:2rem}.landing-cta{background:var(--accent);color:#fff;border:none;padding:.75rem 1.5rem;border-radius:var(--radius);font-family:var(--font-mono);font-size:.82rem;letter-spacing:.04em;cursor:pointer;transition:background .2s,transform .1s;margin-bottom:2rem}.landing-cta:hover{background:var(--accent-dim)}.landing-cta:active{transform:scale(.98)}.landing-trust{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;list-style:none;padding:0}.landing-trust li{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}.landing-trust li:before{content:"◆ ";color:var(--green-dim);font-size:.5rem}.landing-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;animation:fadeIn .6s ease .1s both}.landing-pillar{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem}.landing-pillar-label{display:block;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:.75rem}.landing-pillar h2{font-family:var(--font-mono);font-size:.85rem;font-weight:600;letter-spacing:.04em;color:var(--text-primary);margin-bottom:.6rem}.landing-pillar p{font-size:.78rem;line-height:1.6;color:var(--text-secondary)}.landing-footer{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:1.25rem 2rem;border-top:1px solid var(--border);font-family:var(--font-mono);font-size:.65rem;letter-spacing:.06em;color:var(--text-muted)}.landing-footer-mark{color:var(--text-secondary)}.landing-footer-divider{opacity:.4}@media(max-width:900px){.landing-pillars{grid-template-columns:1fr}.landing-headline{font-size:1.6rem}.landing-header,.landing-main{padding-left:1.5rem;padding-right:1.5rem}}.app-layout{display:flex;min-height:100vh}.sidebar{width:220px;background:var(--bg-secondary);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0}.sidebar-header{padding:1.25rem 1rem;border-bottom:1px solid var(--border)}.sidebar-header .brand{font-family:var(--font-mono);font-size:.8rem;font-weight:600;letter-spacing:.1em;color:var(--accent)}.sidebar-header .brand-sub{font-size:.65rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em;margin-top:.15rem}.sidebar-nav{flex:1;padding:1rem 0}.nav-item{display:flex;align-items:center;gap:.6rem;padding:.55rem 1rem;color:var(--text-secondary);font-size:.82rem;cursor:default;border-left:2px solid transparent;transition:background .15s,color .15s}.nav-item.active{color:var(--text-primary);border-left-color:var(--accent);background:#6c6cff0f}.nav-item .dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}.sidebar-footer{padding:1rem;border-top:1px solid var(--border);font-size:.7rem;color:var(--text-muted)}.sidebar-footer .mesh-tag{display:inline-block;background:var(--green-dim);color:var(--green);padding:.15rem .4rem;border-radius:3px;font-size:.65rem;font-family:var(--font-mono)}.sidebar-user{margin-top:1rem;padding-top:.75rem;border-top:1px solid var(--border)}.sidebar-username{display:block;font-family:var(--font-mono);font-size:.68rem;color:var(--text-secondary);margin-bottom:.5rem}.logout-btn{width:100%;background:transparent;color:var(--text-secondary);border:1px solid var(--border);padding:.45rem .75rem;border-radius:var(--radius);font-family:var(--font-mono);font-size:.68rem;letter-spacing:.04em;cursor:pointer;transition:color .2s,border-color .2s,background .2s}.logout-btn:hover{color:var(--red);border-color:var(--red-dim);background:#f871710f}.logout-btn:active{transform:scale(.98)}.main-area{flex:1;padding:1.5rem 2rem;overflow-y:auto;max-height:100vh}.grid-2col{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}.grid-3col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.25rem}@media(max-width:1100px){.grid-2col,.grid-3col{grid-template-columns:1fr}}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}.card-header{display:flex;align-items:center;justify-content:space-between;padding:.8rem 1rem;border-bottom:1px solid var(--border);font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);font-family:var(--font-mono)}.card-body{padding:1rem}.service-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:.9rem 1rem;transition:border-color .2s}.service-card:hover{border-color:var(--border-active)}.service-card .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}.service-card .name{font-family:var(--font-mono);font-size:.9rem;font-weight:600}.service-card .badge{font-size:.65rem;font-family:var(--font-mono);padding:.15rem .5rem;border-radius:3px;text-transform:uppercase;letter-spacing:.05em}.badge-operational{background:var(--green-dim);color:var(--green)}.badge-degraded{background:var(--yellow-dim);color:var(--yellow)}.badge-outage{background:var(--red-dim);color:var(--red)}.badge-standby{background:var(--border);color:var(--text-muted)}.service-card .meta{display:flex;gap:1rem;font-size:.72rem;color:var(--text-secondary)}.service-card .desc{font-size:.75rem;color:var(--text-muted);margin-top:.4rem}.service-card .service-link{color:var(--text-primary);text-decoration:none;transition:color .2s}.service-card .service-link:hover{color:var(--accent)}.service-card .service-visit{display:inline-block;margin-top:.6rem;font-family:var(--font-mono);font-size:.68rem;color:var(--accent);text-decoration:none;transition:color .2s}.service-card .service-visit:hover{color:var(--cyan)}.handshake-panel{padding:1rem}.handshake-panel .service-select{width:100%;background:var(--bg-elevated);border:1px solid var(--border);color:var(--text-primary);padding:.55rem .75rem;border-radius:var(--radius);font-family:var(--font-mono);font-size:.82rem;margin-bottom:.75rem}.handshake-panel .service-select:focus{outline:none;border-color:var(--accent)}.issue-btn{width:100%;background:var(--accent);color:#fff;border:none;padding:.6rem;border-radius:var(--radius);font-family:var(--font-mono);font-size:.82rem;cursor:pointer;transition:background .2s,transform .1s}.issue-btn:hover{background:var(--accent-dim)}.issue-btn:active{transform:scale(.98)}.issue-btn:disabled{opacity:.4;cursor:not-allowed}.token-display{margin-top:.75rem;padding:.6rem .75rem;background:#000;border:1px solid var(--border);border-radius:var(--radius);font-family:var(--font-mono);font-size:.7rem;color:var(--green);word-break:break-all}.token-display .label{color:var(--text-muted);font-size:.65rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.25rem}.token-display .expiry{color:var(--yellow);font-size:.65rem;margin-top:.25rem}.activity-list{max-height:320px;overflow-y:auto}.activity-item{display:flex;align-items:flex-start;gap:.6rem;padding:.5rem 1rem;font-size:.75rem;border-bottom:1px solid var(--border)}.activity-item:last-child{border-bottom:none}.activity-item .time{color:var(--text-muted);font-family:var(--font-mono);font-size:.65rem;white-space:nowrap;min-width:50px}.activity-item .msg{flex:1;color:var(--text-secondary)}.activity-item .sev-dot{width:5px;height:5px;border-radius:50%;margin-top:5px;flex-shrink:0}.sev-info{background:var(--accent)}.sev-warn{background:var(--yellow)}.sev-error{background:var(--red)}.mesh-list{display:flex;flex-direction:column;gap:.4rem}.mesh-peer{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;background:var(--bg-elevated);border-radius:var(--radius);font-size:.78rem}.mesh-peer .left{display:flex;align-items:center;gap:.5rem}.mesh-peer .status-dot{width:7px;height:7px;border-radius:50%}.mesh-peer .status-dot.on{background:var(--green)}.mesh-peer .status-dot.off{background:var(--text-muted)}.mesh-peer .addr{color:var(--text-muted);font-family:var(--font-mono);font-size:.7rem}.mesh-peer .latency{color:var(--text-secondary);font-family:var(--font-mono);font-size:.7rem}.page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.5rem}.page-header .page-subtitle{margin-bottom:0}.page-title{font-family:var(--font-mono);font-size:1rem;font-weight:600;letter-spacing:.05em;margin-bottom:.25rem}.page-subtitle{font-size:.78rem;color:var(--text-secondary)}.logout-btn-header{width:auto;flex-shrink:0;margin-top:.15rem}@keyframes fadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
