:root{
  color-scheme:dark;
  --bg:#050b14;
  --bg-2:#08111e;
  --panel:rgba(10,22,38,.86);
  --panel-solid:#0b1727;
  --panel-2:#0f2136;
  --panel-3:#132b45;
  --line:rgba(145,184,224,.14);
  --line-strong:rgba(145,184,224,.24);
  --text:#f3f8ff;
  --muted:#8fa8c0;
  --muted-2:#68839d;
  --blue:#5ba8ff;
  --blue-2:#2f7df7;
  --cyan:#52e7dd;
  --violet:#8f7cff;
  --green:#67dfa1;
  --amber:#f7c86d;
  --red:#ff8292;
  --shadow:0 24px 80px rgba(0,0,0,.32);
  --shadow-soft:0 14px 40px rgba(0,0,0,.18);
  --radius:18px;
  --radius-sm:12px;
  --sidebar:276px;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text)}
body.surface-body{
  background:
    radial-gradient(circle at 12% -10%,rgba(91,168,255,.18),transparent 28%),
    radial-gradient(circle at 88% 2%,rgba(143,124,255,.13),transparent 24%),
    linear-gradient(180deg,#07101c 0,#050b14 45%,#040910 100%);
  min-height:100vh;
  overflow-x:hidden
}
button,input,select{font:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}

.surface-shell{display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr);min-height:100vh}
.surface-side{
  position:sticky;top:0;height:100vh;padding:20px 16px;
  border-right:1px solid var(--line);
  background:linear-gradient(180deg,rgba(8,18,31,.98),rgba(7,15,26,.95));
  backdrop-filter:blur(18px);z-index:30
}
.surface-brand{display:flex;gap:12px;align-items:center;padding:6px 8px 18px;font-weight:800;letter-spacing:-.025em}
.surface-brand img{width:40px;height:40px;filter:drop-shadow(0 8px 24px rgba(91,168,255,.22))}
.surface-brand small{display:block;color:#7e9bb7;font-size:9px;letter-spacing:.18em;margin-top:1px}
.tenant-chip{
  margin:2px 4px 18px;padding:10px 11px;border:1px solid var(--line);border-radius:12px;
  background:rgba(255,255,255,.025);display:flex;align-items:center;gap:9px;color:#b6caDC;font-size:12px
}
.tenant-chip i{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 14px rgba(103,223,161,.75)}
.surface-nav-label{margin:18px 12px 7px;color:#58728c;font-size:9px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.surface-nav{display:grid;gap:3px}
.surface-nav button{
  appearance:none;border:0;width:100%;display:flex;align-items:center;gap:11px;text-align:left;
  background:transparent;color:#91a9bf;padding:10px 11px;border-radius:10px;font:inherit;font-size:13px;
  transition:.16s ease
}
.surface-nav button .nav-icon{
  width:28px;height:28px;display:grid;place-items:center;border-radius:9px;
  background:rgba(255,255,255,.026);border:1px solid rgba(255,255,255,.035);font-size:13px
}
.surface-nav button:hover{background:rgba(91,168,255,.07);color:#dbeaff}
.surface-nav button.active{
  background:linear-gradient(110deg,rgba(47,125,247,.18),rgba(82,231,221,.055));
  color:#fff;box-shadow:inset 0 0 0 1px rgba(91,168,255,.18)
}
.surface-nav button.active .nav-icon{background:rgba(91,168,255,.16);border-color:rgba(91,168,255,.2)}
.side-footer{
  position:absolute;left:16px;right:16px;bottom:18px;padding:12px;border:1px solid var(--line);border-radius:12px;
  color:#7994ad;font-size:11px;background:rgba(255,255,255,.02)
}
.side-footer b{display:block;color:#bcd0e2;margin-bottom:2px}

.surface-main{min-width:0;padding:0}
.surface-top{
  height:72px;position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:0 28px;border-bottom:1px solid var(--line);
  background:rgba(5,11,20,.78);backdrop-filter:blur(18px)
}
.top-left,.top-actions{display:flex;align-items:center;gap:10px}
.project-switch{
  min-width:220px;border:1px solid var(--line);background:rgba(255,255,255,.025);color:#d9e9f7;
  border-radius:11px;padding:9px 12px;font-size:12px
}
.global-search{
  width:min(34vw,420px);position:relative
}
.global-search input{
  width:100%;border:1px solid var(--line);background:rgba(255,255,255,.025);color:#fff;border-radius:11px;
  padding:10px 42px 10px 35px;outline:none
}
.global-search:before{content:"⌕";position:absolute;left:12px;top:8px;color:#7790aa}
.global-search kbd{
  position:absolute;right:9px;top:8px;border:1px solid var(--line);border-bottom-color:var(--line-strong);
  background:#0c1928;color:#708aa3;border-radius:6px;padding:2px 6px;font-size:10px
}
.icon-btn,.surface-btn{
  border:1px solid var(--line-strong);background:rgba(255,255,255,.03);color:#dbe9f6;border-radius:10px;
  padding:9px 13px;cursor:pointer;transition:.15s ease
}
.icon-btn{width:38px;height:38px;padding:0;display:grid;place-items:center}
.icon-btn:hover,.surface-btn:hover{border-color:rgba(91,168,255,.45);background:rgba(91,168,255,.08)}
.surface-btn.primary{background:linear-gradient(135deg,var(--blue-2),#6b77ff);border-color:transparent;color:white;box-shadow:0 8px 24px rgba(47,125,247,.22)}
.surface-btn.success{background:rgba(103,223,161,.09);border-color:rgba(103,223,161,.26);color:#a9f1c7}
.surface-btn:disabled{opacity:.42;cursor:not-allowed;filter:saturate(.5)}
.avatar{
  width:36px;height:36px;border-radius:12px;display:grid;place-items:center;font-weight:800;font-size:12px;
  background:linear-gradient(135deg,rgba(91,168,255,.25),rgba(143,124,255,.25));
  border:1px solid rgba(150,186,226,.2)
}

.surface-content{padding:26px 28px 42px}
.surface-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:22px}
.surface-title h1{margin:0;font-size:29px;letter-spacing:-.04em}
.surface-title p{margin:5px 0 0;color:var(--muted);font-size:13px}
.pill{
  display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-strong);background:rgba(255,255,255,.025);
  border-radius:999px;padding:7px 10px;color:#a9c5dd;font-size:11px
}
.pill.live:before,.pill.ok:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 12px rgba(103,223,161,.8)}
.pill.warn:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--amber)}
.pill.offline:before{content:"";width:7px;height:7px;border-radius:50%;background:#61768d}

.hero-dashboard{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:14px;margin-bottom:14px
}
.hero-card{
  position:relative;overflow:hidden;min-height:205px;padding:26px;border:1px solid var(--line);
  border-radius:22px;background:
    radial-gradient(circle at 90% 0,rgba(82,231,221,.14),transparent 34%),
    linear-gradient(135deg,rgba(15,39,67,.95),rgba(10,25,43,.95));
  box-shadow:var(--shadow-soft)
}
.hero-card:after{
  content:"";position:absolute;width:280px;height:280px;right:-80px;bottom:-160px;border-radius:50%;
  border:1px solid rgba(91,168,255,.16);box-shadow:0 0 0 24px rgba(91,168,255,.025),0 0 0 50px rgba(91,168,255,.018)
}
.hero-kicker{color:#8fb6d7;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.hero-card h2{position:relative;z-index:1;margin:12px 0 8px;font-size:32px;letter-spacing:-.045em;max-width:620px}
.hero-card p{position:relative;z-index:1;color:#9db4c9;max-width:610px;margin:0;font-size:14px}
.quick-row{position:relative;z-index:1;display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
.quick-row .surface-btn{font-size:12px}
.health-card{
  padding:20px;border:1px solid var(--line);border-radius:22px;background:var(--panel);box-shadow:var(--shadow-soft)
}
.health-ring{
  width:78px;height:78px;border-radius:50%;display:grid;place-items:center;margin:4px 0 14px;
  background:conic-gradient(var(--green) 0 82%,rgba(255,255,255,.06) 82%);
  position:relative
}
.health-ring:after{content:"";position:absolute;inset:7px;border-radius:50%;background:#0b1828}
.health-ring span{position:relative;z-index:1;font-size:17px;font-weight:800}
.health-card h3{margin:0 0 5px;font-size:16px}
.health-card p{margin:0;color:var(--muted);font-size:12px}
.health-list{display:grid;gap:9px;margin-top:16px}
.health-list div{display:flex;justify-content:space-between;gap:10px;color:#8ea6bd;font-size:11px}
.health-list b{color:#cfe1f1;font-weight:700}

.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.metric,.panel,.service-card,.insight-card{
  border:1px solid var(--line);background:var(--panel);border-radius:16px;box-shadow:0 8px 26px rgba(0,0,0,.08)
}
.metric{padding:16px 17px;position:relative;overflow:hidden}
.metric:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--blue),transparent)}
.metric span{display:block;color:#7f9bb4;font-size:11px}
.metric strong{display:block;font-size:23px;margin-top:6px;letter-spacing:-.035em}
.metric small{display:block;color:#647f98;margin-top:2px;font-size:10px}

.dashboard-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:14px;margin-top:14px}
.panel{padding:0;overflow:hidden}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.panel-head h2,.panel-head h3{margin:0;font-size:14px}
.panel-head p{margin:3px 0 0;color:var(--muted-2);font-size:11px}
.panel-body{padding:16px 18px}
.panel h2,.panel h3{margin-top:0}
.panel-title{display:flex;align-items:center;gap:10px}
.panel-title .badge-icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:rgba(91,168,255,.09);color:#99c8f6}

.service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
.service-card{padding:17px;transition:.15s ease}
.service-card:hover{transform:translateY(-2px);border-color:rgba(91,168,255,.25);background:rgba(13,31,52,.94)}
.service-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(91,168,255,.14),rgba(143,124,255,.12));border:1px solid rgba(255,255,255,.05)}
.service-card h3{font-size:14px;margin:12px 0 4px}
.service-card p{font-size:11px;color:var(--muted);margin:0}
.service-card footer{display:flex;justify-content:space-between;margin-top:14px;font-size:10px;color:#6f8ca5}

.activity-list{display:grid;gap:0}
.activity-item{display:grid;grid-template-columns:10px 1fr auto;gap:10px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.045)}
.activity-item:last-child{border-bottom:0}
.activity-dot{width:7px;height:7px;border-radius:50%;background:var(--blue);margin-top:6px}
.activity-copy b{display:block;font-size:12px}
.activity-copy span{display:block;color:#728ba3;font-size:10px;margin-top:2px}
.activity-time{color:#607890;font-size:10px}

.resource-table{width:100%;border-collapse:collapse;font-size:12px}
.resource-table th,.resource-table td{text-align:left;padding:11px 9px;border-bottom:1px solid rgba(255,255,255,.045)}
.resource-table th{color:#68849e;font-size:9px;letter-spacing:.1em;text-transform:uppercase}
.resource-table tr:last-child td{border-bottom:0}
.tag{display:inline-flex;padding:4px 7px;border-radius:7px;background:rgba(91,168,255,.08);color:#b5d5f2;font-size:10px}
.tag.ok{background:rgba(103,223,161,.09);color:#a5efc4}
.tag.warn{background:rgba(247,200,109,.09);color:#f9d98e}
.tag.bad{background:rgba(255,130,146,.09);color:#ffabb7}

.surface-input{
  width:100%;box-sizing:border-box;background:#06111e;border:1px solid var(--line-strong);border-radius:10px;
  color:#fff;padding:11px 12px;outline:none
}
.surface-input:focus{border-color:rgba(91,168,255,.55);box-shadow:0 0 0 3px rgba(91,168,255,.08)}
.connect-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}
.endpoint-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.endpoint-grid button{text-align:left}
.output{
  white-space:pre-wrap;overflow:auto;max-height:420px;background:#030912;border:1px solid var(--line);border-radius:12px;
  padding:14px;color:#bfe1ff;font:11px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace
}
.notice{padding:11px 13px;border:1px solid rgba(91,168,255,.17);border-radius:11px;background:rgba(91,168,255,.045);color:#9fbed8;font-size:11px}
.danger{border-color:rgba(255,130,146,.28);background:rgba(255,130,146,.06);color:#ffc0c8}

.view-panel{display:none}
.view-panel.active{display:block}

.auth-screen{
  min-height:100vh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(380px,.9fr);
  background:
    radial-gradient(circle at 15% 12%,rgba(91,168,255,.2),transparent 25%),
    radial-gradient(circle at 88% 88%,rgba(143,124,255,.14),transparent 28%),
    #050b14
}
.auth-brand-panel{position:relative;padding:56px clamp(30px,6vw,86px);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.auth-brand-panel:after{
  content:"";position:absolute;width:480px;height:480px;left:40%;top:20%;border-radius:50%;
  border:1px solid rgba(91,168,255,.12);box-shadow:0 0 0 45px rgba(91,168,255,.02),0 0 0 95px rgba(82,231,221,.012)
}
.auth-brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:18px;position:relative;z-index:1}
.auth-brand img{width:44px;height:44px}
.auth-copy{position:relative;z-index:1;max-width:650px}
.auth-copy .eyebrow{color:#79a8cf;font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:800}
.auth-copy h1{font-size:clamp(44px,6vw,76px);line-height:.98;letter-spacing:-.055em;margin:15px 0 20px}
.auth-copy h1 span{background:linear-gradient(110deg,#fff,#9fcfff 50%,#8fe9df);-webkit-background-clip:text;background-clip:text;color:transparent}
.auth-copy p{max-width:560px;color:#8ea8bf;font-size:15px;line-height:1.7}
.auth-proof{display:flex;gap:12px;flex-wrap:wrap;position:relative;z-index:1}
.auth-proof span{border:1px solid var(--line);background:rgba(255,255,255,.025);border-radius:10px;padding:8px 10px;color:#8fa9c1;font-size:10px}
.auth-panel{display:grid;place-items:center;padding:28px;border-left:1px solid var(--line);background:rgba(5,12,21,.62);backdrop-filter:blur(18px)}
.auth-card{width:min(100%,460px);padding:28px;border:1px solid var(--line);border-radius:22px;background:rgba(10,24,41,.86);box-shadow:var(--shadow)}
.auth-card h2{font-size:27px;letter-spacing:-.04em;margin:0 0 8px}
.auth-card>p{color:#859fb7;font-size:12px;line-height:1.6}
.auth-secure{
  margin:16px 0;padding:11px;border:1px solid rgba(103,223,161,.17);background:rgba(103,223,161,.045);
  border-radius:11px;color:#9fc9b2;font-size:10px
}
.auth-label{display:block;color:#839eb7;font-size:11px;margin-bottom:7px}
.auth-actions{display:flex;gap:9px;margin-top:12px}
.auth-actions .surface-btn{flex:1}
.auth-help{display:flex;justify-content:space-between;gap:12px;margin-top:16px;color:#607d97;font-size:10px}
.auth-message{min-height:18px;margin-top:12px;color:#ffb0ba;font-size:11px}

.command-menu{
  position:fixed;inset:0;z-index:100;background:rgba(1,5,10,.65);backdrop-filter:blur(7px);display:grid;place-items:start center;padding-top:12vh
}
.command-card{width:min(92vw,680px);border:1px solid var(--line-strong);border-radius:16px;background:#091625;box-shadow:var(--shadow);overflow:hidden}
.command-card input{width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;color:white;padding:17px;outline:none}
.command-items{padding:8px;display:grid;gap:3px}
.command-items button{border:0;background:transparent;color:#9db5cc;text-align:left;padding:10px;border-radius:9px}
.command-items button:hover{background:rgba(91,168,255,.08);color:white}

@media(max-width:1100px){
  :root{--sidebar:228px}
  .global-search{display:none}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-dashboard,.dashboard-grid{grid-template-columns:1fr}
}
@media(max-width:820px){
  .surface-shell{grid-template-columns:1fr}
  .surface-side{position:relative;height:auto;display:none}
  .surface-top{padding:0 16px}
  .surface-content{padding:18px 14px 34px}
  .project-switch{min-width:0;width:150px}
  .top-actions .pill{display:none}
  .auth-screen{grid-template-columns:1fr}
  .auth-brand-panel{min-height:44vh;padding:32px 24px}
  .auth-copy h1{font-size:44px}
  .auth-panel{border-left:0;border-top:1px solid var(--line)}
  .service-grid,.endpoint-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .grid{grid-template-columns:1fr}
  .surface-title-row{flex-direction:column}
  .surface-top{height:auto;min-height:64px;padding-top:10px;padding-bottom:10px}
  .top-left{min-width:0}
  .project-switch{width:120px}
  .hero-card{padding:20px}
  .hero-card h2{font-size:27px}
  .connect-grid{grid-template-columns:1fr}
  .auth-card{padding:22px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}


/* Responsive + motion refinement v2 */
:root{
  --content-max:1680px;
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-top:env(safe-area-inset-top,0px);
  --ease-premium:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.16,1.15,.3,1)
}
.surface-main{max-width:100%;overflow:hidden}
.surface-content{width:min(100%,var(--content-max));margin-inline:auto}
.surface-top{padding-top:var(--safe-top)}
.surface-side{padding-bottom:calc(20px + var(--safe-bottom))}
.auth-screen{isolation:isolate;overflow:hidden}
.auth-screen::before,.auth-screen::after{
  content:"";position:absolute;pointer-events:none;border-radius:50%;filter:blur(4px);z-index:0;
  animation:consoleAmbient 12s ease-in-out infinite alternate
}
.auth-screen::before{
  width:min(52vw,760px);aspect-ratio:1;left:-18vw;top:-20vh;
  background:radial-gradient(circle,rgba(91,168,255,.15),rgba(91,168,255,.035) 42%,transparent 70%)
}
.auth-screen::after{
  width:min(46vw,620px);aspect-ratio:1;right:-14vw;bottom:-24vh;
  background:radial-gradient(circle,rgba(143,124,255,.14),rgba(82,231,221,.025) 45%,transparent 72%);
  animation-delay:-5s
}
.auth-brand-panel,.auth-panel{position:relative;z-index:1}
.auth-brand-panel::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.28;
  background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(to right,#000,transparent 90%)
}
.auth-brand,.auth-copy,.auth-proof{animation:authEnter .8s var(--ease-premium) both}
.auth-copy{animation-delay:.08s}.auth-proof{animation-delay:.16s}
.auth-card{animation:authCardEnter .86s var(--ease-premium) .1s both;position:relative;overflow:hidden}
.auth-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.04) 45%,transparent 65%);
  transform:translateX(-120%);animation:authSheen 8s ease-in-out 1.5s infinite
}
.auth-card .surface-btn.primary{position:relative;overflow:hidden;background-size:180% 180%;animation:buttonGradient 7s ease-in-out infinite}
.auth-card .surface-btn.primary::after{
  content:"";position:absolute;inset:-1px;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.18),transparent 70%);
  transform:translateX(-130%);transition:transform .75s var(--ease-premium)
}
.auth-card .surface-btn.primary:hover::after{transform:translateX(130%)}
.auth-input-wrap{position:relative}
.surface-input{transition:border-color .2s ease,box-shadow .2s ease,background .2s ease,transform .2s var(--ease-premium)}
.surface-input:focus{background:#081727;transform:translateY(-1px)}

.surface-shell.motion-ready .surface-side{animation:sidebarEnter .55s var(--ease-premium) both}
.surface-shell.motion-ready .surface-top{animation:topEnter .5s var(--ease-premium) both}
.surface-shell.motion-ready .surface-content{animation:contentEnter .62s var(--ease-premium) .06s both}
.view-panel.active{animation:viewPanelEnter .38s var(--ease-premium)}
.metric,.service-card,.panel,.health-card,.hero-card{transition:transform .28s var(--ease-premium),border-color .28s ease,box-shadow .28s ease,background .28s ease}
@media(hover:hover) and (pointer:fine){
  .metric:hover,.service-card:hover,.panel:hover,.health-card:hover{transform:translateY(-4px);border-color:rgba(91,168,255,.24);box-shadow:0 20px 48px rgba(0,0,0,.19)}
  .hero-card:hover{transform:translateY(-3px);border-color:rgba(82,231,221,.2);box-shadow:0 28px 70px rgba(0,0,0,.22)}
}
.metric:nth-child(1){animation-delay:.04s}.metric:nth-child(2){animation-delay:.08s}.metric:nth-child(3){animation-delay:.12s}.metric:nth-child(4){animation-delay:.16s}
.service-card{animation:cardRise .52s var(--ease-premium) both}
.service-card:nth-child(2){animation-delay:.05s}.service-card:nth-child(3){animation-delay:.1s}.service-card:nth-child(4){animation-delay:.15s}.service-card:nth-child(5){animation-delay:.2s}.service-card:nth-child(6){animation-delay:.25s}
.health-ring{animation:ringBreathe 3.2s ease-in-out infinite}
.pill.live::before,.pill.ok::before{animation:livePulse 2.2s ease-out infinite}
.activity-dot{box-shadow:0 0 14px rgba(91,168,255,.45)}
.resource-table{min-width:620px}
.panel-body{overflow:auto}
.surface-btn{transition:transform .18s var(--ease-premium),border-color .18s ease,background .18s ease,box-shadow .18s ease}
.surface-btn:active,.icon-btn:active{transform:scale(.97)}

.mobile-nav-toggle{display:none}
.mobile-backdrop{display:none;position:fixed;inset:0;background:rgba(1,6,11,.64);backdrop-filter:blur(5px);z-index:39}
.mobile-backdrop.open{display:block;animation:fadeIn .2s ease both}

@keyframes consoleAmbient{to{transform:translate3d(7vw,5vh,0) scale(1.08)}}
@keyframes authEnter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes authCardEnter{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
@keyframes authSheen{0%,72%{transform:translateX(-130%)}88%,100%{transform:translateX(130%)}}
@keyframes buttonGradient{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}
@keyframes sidebarEnter{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@keyframes topEnter{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes contentEnter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes viewPanelEnter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes cardRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes ringBreathe{0%,100%{filter:drop-shadow(0 0 0 rgba(103,223,161,0))}50%{filter:drop-shadow(0 0 12px rgba(103,223,161,.18))}}
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(103,223,161,.36)}70%{box-shadow:0 0 0 8px rgba(103,223,161,0)}100%{box-shadow:0 0 0 0 rgba(103,223,161,0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

@media(min-width:1500px){
  :root{--sidebar:292px}
  .surface-content{padding:34px 38px 56px}
  .surface-top{padding-left:38px;padding-right:38px}
  .hero-card{min-height:236px;padding:32px}
  .hero-card h2{font-size:38px}
  .grid{gap:14px}.service-grid{gap:14px}
}
@media(min-width:821px) and (max-width:1180px){
  :root{--sidebar:218px}
  .surface-side{padding-left:10px;padding-right:10px}
  .surface-brand{font-size:14px}.surface-brand img{width:36px;height:36px}
  .tenant-chip{font-size:11px}
  .surface-content{padding:22px 20px 38px}
  .surface-top{padding-inline:20px}
  .hero-dashboard,.dashboard-grid{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:820px){
  .surface-shell{display:block;min-height:100dvh}
  .surface-side{
    display:block;position:fixed;left:0;top:0;bottom:0;width:min(84vw,320px);height:100dvh;
    transform:translateX(-104%);transition:transform .28s var(--ease-premium);z-index:40;
    overflow:auto;padding-top:calc(18px + var(--safe-top));box-shadow:none
  }
  .surface-side.mobile-open{transform:none;box-shadow:24px 0 70px rgba(0,0,0,.42)}
  .mobile-nav-toggle{
    display:grid;width:40px;height:40px;place-items:center;border:1px solid var(--line);
    background:rgba(255,255,255,.03);color:#dbe9f6;border-radius:11px;padding:0;flex:0 0 auto
  }
  .surface-top{
    min-height:66px;height:auto;padding:10px 14px;gap:10px;
    padding-top:calc(10px + var(--safe-top))
  }
  .top-left{gap:8px;min-width:0;flex:1}
  .project-switch{width:min(50vw,220px);min-width:0;overflow:hidden;text-overflow:ellipsis}
  .top-actions{gap:7px}
  .top-actions .avatar{display:none}
  .top-actions .surface-btn{padding-inline:10px;font-size:11px}
  .surface-content{padding:18px 14px calc(34px + var(--safe-bottom))}
  .surface-title h1{font-size:26px}
  .surface-title p{font-size:12px}
  .hero-dashboard,.dashboard-grid{grid-template-columns:1fr}
  .hero-card{min-height:auto;padding:22px}
  .hero-card h2{font-size:29px;line-height:1.05}
  .hero-card p{font-size:13px}
  .health-card{padding:18px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .endpoint-grid{grid-template-columns:1fr}
  .panel-head{align-items:flex-start;flex-direction:column}
  .panel-head .surface-btn{width:100%}
  .auth-screen{
    display:block;min-height:100dvh;overflow:auto;
    background:radial-gradient(circle at 20% 0,rgba(91,168,255,.18),transparent 34%),#050b14
  }
  .auth-brand-panel{
    min-height:auto;padding:calc(26px + var(--safe-top)) 22px 24px;gap:28px
  }
  .auth-brand-panel::after{width:330px;height:330px;left:54%;top:12%}
  .auth-brand{font-size:15px}.auth-brand img{width:38px;height:38px}
  .auth-copy h1{font-size:clamp(38px,11vw,56px);line-height:1;max-width:12ch;margin:12px 0 14px}
  .auth-copy p{font-size:13px;line-height:1.58;max-width:48ch}
  .auth-proof{gap:7px;overflow:auto;flex-wrap:nowrap;padding-bottom:4px;scrollbar-width:none}
  .auth-proof::-webkit-scrollbar{display:none}
  .auth-proof span{white-space:nowrap;flex:0 0 auto}
  .auth-panel{
    border-left:0;border-top:1px solid var(--line);padding:20px 14px calc(26px + var(--safe-bottom));
    display:block;background:linear-gradient(180deg,rgba(5,12,21,.72),rgba(5,11,20,.96))
  }
  .auth-card{width:100%;max-width:560px;margin:0 auto;padding:22px;border-radius:18px}
  .auth-card h2{font-size:24px}
}
@media(max-width:520px){
  .surface-content{padding-inline:12px}
  .surface-title-row{gap:10px;margin-bottom:16px}
  .grid,.service-grid{grid-template-columns:1fr}
  .metric{padding:15px}
  .service-card{padding:15px}
  .hero-card{padding:18px;border-radius:18px}
  .hero-card h2{font-size:25px}
  .quick-row{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .quick-row .surface-btn{width:100%;padding-inline:8px}
  .health-list div{font-size:10.5px}
  .top-actions #openCommand{display:none}
  .project-switch{width:42vw}
  .auth-brand-panel{padding-left:18px;padding-right:18px}
  .auth-copy h1{font-size:clamp(34px,12vw,46px)}
  .auth-panel{padding-left:10px;padding-right:10px}
  .auth-card{padding:19px 16px}
  .auth-actions{display:block}.auth-actions .surface-btn{width:100%;min-height:44px}
  .auth-help{font-size:9px}
  .command-card{width:calc(100vw - 20px)}
}
@media(max-width:380px){
  .top-actions #refresh{display:none}
  .project-switch{width:48vw}
  .quick-row{grid-template-columns:1fr}
}
@media(orientation:landscape) and (max-height:560px) and (max-width:1000px){
  .auth-screen{display:grid;grid-template-columns:1.05fr .95fr;min-height:100vh}
  .auth-brand-panel{padding:24px;min-height:100vh}
  .auth-copy h1{font-size:clamp(32px,6vw,48px)}
  .auth-proof{display:none}
  .auth-panel{border-top:0;border-left:1px solid var(--line);display:grid;padding:16px}
  .auth-card{max-height:92vh;overflow:auto}
}
@media(prefers-reduced-motion:reduce){
  .auth-screen::before,.auth-screen::after,.auth-brand,.auth-copy,.auth-proof,.auth-card,.auth-card::before,
  .auth-card .surface-btn.primary,.surface-shell.motion-ready .surface-side,.surface-shell.motion-ready .surface-top,
  .surface-shell.motion-ready .surface-content,.view-panel.active,.service-card,.health-ring,.pill.live::before,.pill.ok::before{animation:none!important}
}

html.nav-lock,html.nav-lock body{overflow:hidden;overscroll-behavior:none}


/* Premium visual depth v3 */
.pointer-glow{
  position:fixed;left:0;top:0;width:260px;height:260px;pointer-events:none;z-index:2;
  margin-left:-130px;margin-top:-130px;border-radius:50%;
  background:radial-gradient(circle,rgba(91,168,255,.08),rgba(82,231,221,.03) 38%,transparent 72%);
  mix-blend-mode:screen;filter:blur(6px);opacity:.8;transition:opacity .2s ease
}
.ui-ripple{
  position:absolute;pointer-events:none;border-radius:50%;z-index:4;
  background:radial-gradient(circle,rgba(255,255,255,.22),rgba(91,168,255,.12) 38%,transparent 70%);
  transform:scale(0);animation:uiRipple .62s var(--ease-premium) forwards
}
.surface-btn,.icon-btn,.service-card[data-view-target]{position:relative;overflow:hidden}

.auth-visualizer{
  position:absolute;right:4%;top:50%;width:min(34vw,500px);aspect-ratio:1;transform:translateY(-48%);
  pointer-events:none;z-index:0;opacity:.9
}
.auth-visual-core{
  position:absolute;left:50%;top:50%;width:96px;height:96px;transform:translate(-50%,-50%);
  border-radius:28px;display:grid;place-items:center;
  background:linear-gradient(145deg,rgba(15,43,73,.95),rgba(8,24,43,.95));
  border:1px solid rgba(91,168,255,.22);box-shadow:0 0 60px rgba(91,168,255,.12),inset 0 1px 0 rgba(255,255,255,.05)
}
.auth-visual-core::before{
  content:"";position:absolute;inset:14px;border-radius:20px;
  background:linear-gradient(135deg,rgba(91,168,255,.2),rgba(143,124,255,.12),rgba(82,231,221,.12));
  filter:blur(8px)
}
.auth-visual-core span{position:relative;font-size:25px;font-weight:900;letter-spacing:-.06em;color:#dff1ff}
.auth-orbit{
  position:absolute;left:50%;top:50%;border:1px solid rgba(124,169,214,.11);border-radius:50%;
  transform:translate(-50%,-50%)
}
.auth-orbit-a{width:45%;height:45%;animation:orbitSpin 18s linear infinite}
.auth-orbit-b{width:68%;height:68%;animation:orbitSpinReverse 25s linear infinite}
.auth-orbit-c{width:92%;height:92%;animation:orbitSpin 38s linear infinite}
.auth-pulse-ring{
  position:absolute;left:50%;top:50%;width:46%;height:46%;transform:translate(-50%,-50%);
  border-radius:50%;border:1px solid rgba(82,231,221,.14);animation:authPulseRing 3.6s ease-out infinite
}
.auth-node{
  position:absolute;min-width:92px;padding:9px 11px;border-radius:11px;
  background:rgba(7,19,33,.82);border:1px solid rgba(124,169,214,.13);backdrop-filter:blur(10px);
  box-shadow:0 12px 35px rgba(0,0,0,.18);animation:nodeFloat 5s ease-in-out infinite
}
.auth-node b{display:block;color:#d7e9f7;font-size:10px}
.auth-node small{display:block;color:#65819a;font-size:8px;margin-top:2px}
.auth-node.n1{left:5%;top:20%;animation-delay:-.5s}
.auth-node.n2{right:3%;top:28%;animation-delay:-1.8s}
.auth-node.n3{left:12%;bottom:17%;animation-delay:-3s}
.auth-node.n4{right:10%;bottom:12%;animation-delay:-4.2s}

.console-live-rail{
  position:relative;overflow:hidden;height:34px;border-bottom:1px solid var(--line);
  background:linear-gradient(90deg,rgba(8,17,30,.95),rgba(10,25,42,.9),rgba(8,17,30,.95));
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)
}
.console-live-track{
  width:max-content;display:flex;align-items:center;gap:20px;height:100%;padding-inline:8px;
  animation:consoleRail 36s linear infinite
}
.console-live-track span{display:inline-flex;align-items:center;gap:7px;color:#6f8ca6;font-size:9px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.console-live-track i{
  width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 9px rgba(103,223,161,.55)
}
.console-live-rail:hover .console-live-track{animation-play-state:paused}

.metric::after{
  content:"";position:absolute;width:70px;height:70px;right:-20px;bottom:-28px;border-radius:50%;
  background:radial-gradient(circle,rgba(91,168,255,.09),transparent 68%);pointer-events:none
}
.service-card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 80% 0,rgba(91,168,255,.1),transparent 42%);
  transition:opacity .3s ease
}
.service-card:hover::before{opacity:1}
.hero-card .quick-row::before{
  content:"";position:absolute;left:-8%;right:-8%;top:-18px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(91,168,255,.16),rgba(82,231,221,.13),transparent)
}

@keyframes uiRipple{0%{transform:scale(0);opacity:.8}100%{transform:scale(1);opacity:0}}
@keyframes orbitSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes orbitSpinReverse{to{transform:translate(-50%,-50%) rotate(-360deg)}}
@keyframes authPulseRing{0%{transform:translate(-50%,-50%) scale(.84);opacity:.45}80%,100%{transform:translate(-50%,-50%) scale(1.6);opacity:0}}
@keyframes nodeFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes consoleRail{to{transform:translateX(-50%)}}

@media(max-width:1180px){
  .auth-visualizer{width:min(38vw,420px);right:-3%;opacity:.65}
}
@media(max-width:820px){
  .pointer-glow{display:none}
  .auth-visualizer{display:none}
  .console-live-rail{height:30px;mask-image:none}
  .console-live-track{animation-duration:28s;gap:14px}
}
@media(prefers-reduced-motion:reduce){
  .auth-orbit,.auth-pulse-ring,.auth-node,.console-live-track,.ui-ripple{animation:none!important}
  .pointer-glow{display:none}
}