:root { --ink:#132238; --muted:#637287; --canvas:#f4f7fa; --surface:#fff; --surface-2:#edf3f7; --line:#d8e1e8; --accent:#07a985; --accent-strong:#057d6d; --warning:#ba7a12; --shadow:0 18px 45px rgba(19,34,56,.08); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; color:var(--ink); background:var(--canvas); }
:root[data-theme=dark] { --ink:#e7eef7; --muted:#9aabbe; --canvas:#0c1726; --surface:#132238; --surface-2:#1a2b40; --line:#29405a; --accent:#35d3ae; --accent-strong:#6ee8ca; --warning:#edb85c; --shadow:0 18px 45px rgba(0,0,0,.24); }
* { box-sizing:border-box; } html,body { max-width:100%; overflow-x:hidden; } body { margin:0; background:var(--canvas); } a { color:inherit; text-decoration:none; } button,input,select,textarea { font:inherit; } button { cursor:pointer; }
:where(a,button,input,select,textarea):focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.nexus-shell { min-height:100vh; } .topbar { height:74px; display:flex; align-items:center; gap:24px; padding:0 34px; background:var(--surface); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10; }.brand { display:flex; align-items:center; gap:10px; letter-spacing:.08em; font-size:14px; }.brand img { width:31px; height:31px; }.brand strong { color:var(--accent-strong); font-weight:800; }.topbar-context { color:var(--muted); font-size:13px; margin-right:auto; }.status-dot { width:8px; height:8px; display:inline-block; border-radius:50%; background:var(--accent); margin-right:7px; }.topbar-actions { display:flex; align-items:center; gap:12px; }.icon-button,.locale-button,.menu-button { border:1px solid transparent; color:var(--muted); background:transparent; padding:8px 10px; border-radius:8px; }.icon-button:hover,.locale-button:hover,.menu-button:hover { background:var(--surface-2); color:var(--ink); }.locale-button { font-weight:700; font-size:12px; }.signout { color:var(--muted); font-size:13px; }.menu-button { display:none; }
.workspace { display:flex; min-height:calc(100vh - 74px); }.sidebar { width:256px; flex:none; background:#101d2e; color:#cfdae7; padding:25px 16px 18px; display:flex; flex-direction:column; }.context-card { padding:16px; border:1px solid #2b415b; border-radius:12px; background:#172a40; display:flex; flex-direction:column; gap:6px; margin-bottom:25px; }.context-card strong { color:#fff; font-size:14px; }.context-card small { color:#8ea3b8; line-height:1.4; }.nav-label,.eyebrow { font-size:10px; letter-spacing:.14em; font-weight:800; color:var(--muted); text-transform:uppercase; }.sidebar .nav-label { display:block; color:#738aa2; margin:19px 12px 8px; }.sidebar nav { display:flex; flex-direction:column; gap:3px; }.sidebar nav a { display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:9px; color:#aebfd1; font-size:13px; }.sidebar nav a.active,.sidebar nav a:hover { color:#fff; background:#20374f; }.sidebar nav a.active { box-shadow:inset 3px 0 0 var(--accent); }.sidebar-footer { margin-top:auto; display:flex; flex-direction:column; gap:6px; padding:18px 12px 3px; color:#71879e; font-size:10px; }.sidebar-footer img { width:140px; max-height:27px; object-fit:contain; object-position:left; }.content { max-width:1480px; width:100%; padding:48px clamp(22px,4vw,64px) 72px; margin:0 auto; }.page-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:34px; }.page-heading h1 { margin:8px 0 8px; letter-spacing:-.04em; font-size:clamp(28px,3vw,44px); }.page-heading p { color:var(--muted); margin:0; max-width:650px; }.button { display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:0 16px; border-radius:8px; border:1px solid var(--line); font-weight:700; font-size:13px; }.button-primary { background:var(--accent); color:#06241d; border-color:var(--accent); }.button-primary:hover { background:var(--accent-strong); }.button-quiet { background:var(--surface); color:var(--ink); }.text-link { color:var(--accent-strong); font-weight:750; font-size:13px; }.metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:20px; }.metric-card,.panel,.cell-card { background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); }.metric-card { padding:20px; display:flex; flex-direction:column; gap:9px; min-height:132px; }.metric-card strong { font-size:34px; letter-spacing:-.05em; }.metric-card small { color:var(--muted); }.metric-accent-green { border-top:3px solid var(--accent); }.split-grid { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(290px,.7fr); gap:20px; }.panel { padding:26px; margin-bottom:20px; }.panel-heading,.modal-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }.panel h2 { margin:8px 0 7px; font-size:21px; letter-spacing:-.025em; }.panel-heading p { margin:0; }.panel-note { color:var(--muted); font-size:12px; line-height:1.6; }.badge { padding:6px 9px; border-radius:6px; text-transform:uppercase; letter-spacing:.08em; font-size:9px; font-weight:800; white-space:nowrap; }.badge-good { color:#087b5d; background:#dcf8ee; }.badge-neutral { color:var(--muted); background:var(--surface-2); }.health-row { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:24px 0 12px; }.health-stat { padding:15px; background:var(--surface-2); border-radius:9px; display:flex; flex-direction:column; gap:7px; }.health-stat span { color:var(--muted); font-size:11px; }.health-stat strong { font-size:21px; }.signal { color:var(--accent); }.empty-copy { color:var(--muted); line-height:1.7; font-size:14px; }.unavailable { display:flex; align-items:flex-start; gap:16px; padding:20px; margin-top:20px; border:1px dashed var(--line); border-radius:10px; background:var(--surface-2); }.unavailable-icon { color:var(--accent); font-size:24px; }.unavailable strong { display:block; margin-bottom:5px; }.unavailable p { margin:0; color:var(--muted); line-height:1.55; font-size:13px; }.loading-state { color:var(--muted); padding:36px 0; }.tenant-banner { display:flex; justify-content:space-between; align-items:center; gap:20px; border-left:3px solid var(--accent); padding:14px 18px; margin:-13px 0 24px; background:var(--surface); border-radius:0 10px 10px 0; }.tenant-banner div { display:flex; flex-direction:column; gap:5px; }.tenant-banner strong { font-size:13px; }.card-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(245px,1fr)); gap:16px; margin-top:22px; }.cell-card { padding:20px; }.cell-card-top { display:flex; justify-content:space-between; align-items:center; }.cell-icon { color:var(--accent); font-size:24px; }.cell-card h3 { margin:17px 0; font-size:16px; }.cell-card dl { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0; }.cell-card dl div { display:flex; flex-direction:column; gap:4px; }.cell-card dt { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.08em; }.cell-card dd { margin:0; font-size:12px; }.site-list { display:grid; gap:10px; margin-top:22px; }.site-card { display:flex; align-items:center; gap:13px; padding:15px; border:1px solid var(--line); border-radius:10px; }.site-card > .badge { margin-left:auto; }.site-card strong,.site-card span:not(.badge) { display:block; }.site-card span:not(.badge) { color:var(--muted); font-size:12px; margin-top:4px; }.site-marker { color:var(--accent); font-size:22px; }.detail-list { display:grid; gap:12px; margin-top:22px; }.detail-list div { display:flex; justify-content:space-between; gap:20px; padding-bottom:12px; border-bottom:1px solid var(--line); font-size:13px; }.detail-list span { color:var(--muted); }.detail-list strong { text-align:right; }.modal-backdrop { position:fixed; inset:0; z-index:30; display:grid; place-items:center; padding:22px; background:rgba(7,18,31,.72); }.modal-card { width:min(100%,580px); max-height:min(720px,calc(100vh - 44px)); overflow:auto; background:var(--surface); border:1px solid var(--line); border-radius:15px; padding:28px; box-shadow:0 25px 80px rgba(0,0,0,.3); }.modal-card form { display:grid; gap:15px; margin-top:20px; }.modal-card label { display:grid; gap:7px; color:var(--muted); font-size:12px; }.modal-card input,.modal-card select { width:100%; color:var(--ink); border:1px solid var(--line); border-radius:8px; background:var(--surface); padding:11px 12px; outline:none; }.modal-card input:focus,.modal-card select:focus { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent); }.modal-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:6px; }.notice { padding:12px; border-radius:8px; font-size:12px; line-height:1.5; }.notice-info { color:var(--muted); background:var(--surface-2); }.form-error { color:var(--warning); font-size:12px; min-height:18px; margin:0; }
@media (max-width:1024px) { .topbar { padding:0 22px; gap:15px; }.sidebar { width:220px; }.content { padding:35px 28px 60px; }.metric-grid { grid-template-columns:repeat(2,1fr); }.split-grid { grid-template-columns:1fr; } }
@media (max-width:768px) { .menu-button { display:block; }.topbar { height:66px; }.topbar-context { display:none; }.sidebar { position:fixed; top:66px; bottom:0; left:-270px; width:270px; z-index:21; transition:left .2s ease; }.sidebar.open { left:0; }.nav-scrim { position:fixed; inset:66px 0 0; border:0; background:rgba(0,0,0,.45); z-index:20; }.content { padding:28px 18px 48px; }.page-heading { flex-direction:column; margin-bottom:25px; }.page-heading h1 { font-size:31px; }.metric-grid { gap:10px; }.metric-card { padding:16px; min-height:116px; }.metric-card strong { font-size:28px; }.health-row { grid-template-columns:repeat(2,1fr); }.panel { padding:20px; } }
@media (max-width:390px) { .brand span { font-size:12px; }.topbar-actions { gap:4px; }.metric-card small { font-size:10px; }.tenant-banner { align-items:flex-start; flex-direction:column; gap:10px; } }
.brand-logo { width:132px !important; height:36px !important; object-fit:contain; object-position:left center; }
.brand-logo-dark,.trueband-logo-dark { display:none; }
:root[data-theme=dark] .brand-logo-light,:root[data-theme=dark] .trueband-logo-light { display:none; }
:root[data-theme=dark] .brand-logo-dark,:root[data-theme=dark] .trueband-logo-dark { display:block; }
.trueband-logo { width:140px; max-height:27px; object-fit:contain; object-position:left; }
@media (max-width:390px) { .brand-logo { width:106px !important; height:31px !important; } }
.tenant-wizard { width:min(100%,760px); }
.wizard-steps { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:7px; list-style:none; padding:0; margin:22px 0 8px; }
.wizard-steps li { min-width:0; color:var(--muted); display:grid; gap:6px; justify-items:center; text-align:center; }
.wizard-steps li > span { display:grid; place-items:center; width:28px; height:28px; border:1px solid var(--line); border-radius:50%; background:var(--surface-2); font-size:11px; font-weight:800; }
.wizard-steps li small { font-size:9px; line-height:1.25; }
.wizard-steps li.active,.wizard-steps li.complete { color:var(--accent-strong); }
.wizard-steps li.active > span,.wizard-steps li.complete > span { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 15%,var(--surface)); }
.modal-card textarea { width:100%; min-height:88px; resize:vertical; color:var(--ink); border:1px solid var(--line); border-radius:8px; background:var(--surface); padding:11px 12px; outline:none; }
.modal-card textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent); }
.review-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.review-grid div { display:grid; gap:5px; padding:13px; border:1px solid var(--line); border-radius:9px; background:var(--surface-2); min-width:0; }
.review-grid span { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.06em; }
.review-grid strong { overflow-wrap:anywhere; font-size:13px; }
@media (max-width:768px) { .wizard-steps { grid-template-columns:repeat(7,28px); overflow-x:auto; justify-content:start; padding-bottom:8px; }.wizard-steps small { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }.review-grid { grid-template-columns:1fr; } }