:root,html[data-theme="dark"]{
  --bg-primary:#01040a;
  --bg-mesh:radial-gradient(ellipse 85% 65% at 15% 10%,rgba(4,26,58,.55),transparent 68%),radial-gradient(ellipse 75% 60% at 88% 18%,rgba(2,42,74,.35),transparent 65%),radial-gradient(ellipse 80% 70% at 75% 92%,rgba(8,20,52,.45),transparent 70%),radial-gradient(ellipse 65% 55% at 18% 88%,rgba(2,36,48,.32),transparent 62%),linear-gradient(180deg,#020712 0%,#01040a 58%,#000205 100%);
  --glass-bg:rgba(4,11,24,.72);
  --glass-surface:linear-gradient(145deg,rgba(255,255,255,.07) 0%,rgba(5,13,28,.76) 48%,rgba(2,6,15,.88) 100%);
  --glass-sidebar:linear-gradient(180deg,rgba(3,8,19,.88) 0%,rgba(1,4,11,.94) 100%);
  --glass-border:rgba(140,195,255,.14);
  --glass-highlight:rgba(190,228,255,.34);
  --gadget-Well-bg:rgba(1,3,8,.78);
  --gadget-Well-shadow:inset 0 4px 14px rgba(0,0,0,.85),0 1px 0 rgba(140,195,255,.07);
  --gadget-bg:rgba(4,10,22,.84);
  --gadget-border:rgba(140,195,255,.08);
  --gadget-shadow:inset 0 2px 8px rgba(0,0,0,.72);
  --seg-track-bg:rgba(0,2,6,.58);
  --seg-active-bg:rgba(140,195,255,.16);
  --btn-sec-bg:rgba(140,195,255,.08);
  --btn-sec-hover:rgba(140,195,255,.16);
  --text-primary:#eaf2ff;
  --text-secondary:rgba(168,194,232,.66);
  --heading-shadow:0 4px 20px rgba(0,0,0,.8);
  --accent:#252273;--accent-btn:#0a84ff;
  --c-emerald:#2ed158;--c-cyan:#38bdf8;--c-sapphire:#0a84ff;--c-amber:#ff9f0a;--c-crimson:#ff453a;--c-violet:#a78bfa;
  --card-shadow:0 22px 50px rgba(0,0,0,.82),inset 0 1px .5px rgba(190,228,255,.22),inset 0 -1px 1px rgba(0,0,0,.6);
  --card-hover-shadow:0 30px 64px rgba(0,0,0,.92);
  --irid-rest-opacity:.24;--irid-foil-opacity:.14;
  --radius-lg:22px;--radius-md:14px;--blur-strength:38px;
}
html[data-theme="light"]{
  --bg-primary:#fcfdff;
  --bg-mesh:radial-gradient(ellipse 65% 50% at 16% 14%,rgba(244,114,182,.09),transparent 65%),radial-gradient(ellipse 65% 55% at 86% 16%,rgba(167,139,250,.1),transparent 64%),radial-gradient(ellipse 65% 55% at 80% 86%,rgba(45,212,191,.08),transparent 65%),radial-gradient(ellipse 60% 50% at 20% 84%,rgba(251,191,36,.06),transparent 60%),linear-gradient(145deg,#fff 0%,#fafbff 55%,#fff 100%);
  --glass-bg:rgba(255,255,255,.34);
  --glass-surface:radial-gradient(120% 90% at 18% 8%,rgba(255,255,255,.96) 0%,rgba(255,255,255,.42) 38%,rgba(255,255,255,.08) 68%,rgba(255,255,255,.68) 100%),linear-gradient(135deg,rgba(255,255,255,.78) 0%,rgba(255,255,255,.22) 48%,rgba(250,245,255,.18) 52%,rgba(255,255,255,.72) 100%);
  --glass-sidebar:radial-gradient(140% 80% at 10% 5%,rgba(255,255,255,.94) 0%,rgba(255,255,255,.45) 55%,rgba(255,255,255,.72) 100%);
  --glass-border:rgba(255,255,255,.98);--glass-highlight:#fff;
  --gadget-Well-bg:radial-gradient(120% 100% at 50% 0%,rgba(255,255,255,.48),rgba(255,255,255,.78));
  --gadget-Well-shadow:inset 0 2.5px 2px #fff,inset 0 -2px 5px rgba(255,255,255,.9),0 8px 26px -6px rgba(120,110,160,.07),0 0 0 1px rgba(167,139,250,.14);
  --gadget-bg:radial-gradient(115% 95% at 15% 10%,rgba(255,255,255,.95) 0%,rgba(255,255,255,.44) 55%,rgba(255,255,255,.76) 100%);
  --gadget-border:rgba(255,255,255,.98);
  --gadget-shadow:inset 0 2px 1.5px #fff,inset 0 -2px 4px rgba(255,255,255,.85),0 4px 14px rgba(120,110,160,.05),0 0 0 1px rgba(167,139,250,.12);
  --seg-track-bg:rgba(120,115,150,.06);
  --seg-active-bg:radial-gradient(100% 100% at 30% 15%,#fff 0%,rgba(255,255,255,.85) 100%);
  --btn-sec-bg:radial-gradient(120% 100% at 25% 10%,rgba(255,255,255,.96) 0%,rgba(255,255,255,.48) 60%,rgba(255,255,255,.78) 100%);
  --btn-sec-hover:#fff;
  --text-primary:#0d1222;--text-secondary:#4a5568;--heading-shadow:0 1px 0 #fff;
  --accent:#252273;--accent-btn:#252273;
  --c-emerald:#0d9f4f;--c-cyan:#0284c7;--c-sapphire:#252273;--c-amber:#d97706;--c-crimson:#e11d48;--c-violet:#6d28d9;
  --card-shadow:0 14px 34px -8px rgba(120,110,160,.09),inset 0 2.5px 2px #fff,inset 0 -3px 6px rgba(255,255,255,.88),0 0 0 1px rgba(167,139,250,.15);
  --card-hover-shadow:0 24px 48px -10px rgba(140,120,200,.16),inset 0 3px 2.5px #fff,inset 0 -3px 8px rgba(255,255,255,.95);
  --irid-rest-opacity:.62;--irid-foil-opacity:.26;--blur-strength:30px;
}
@media (prefers-color-scheme:light){
  html[data-theme="auto"]{
    --bg-primary:#fcfdff;
    --bg-mesh:radial-gradient(ellipse 65% 50% at 16% 14%,rgba(244,114,182,.09),transparent 65%),radial-gradient(ellipse 65% 55% at 86% 16%,rgba(167,139,250,.1),transparent 64%),radial-gradient(ellipse 65% 55% at 80% 86%,rgba(45,212,191,.08),transparent 65%),radial-gradient(ellipse 60% 50% at 20% 84%,rgba(251,191,36,.06),transparent 60%),linear-gradient(145deg,#fff 0%,#fafbff 55%,#fff 100%);
    --glass-bg:rgba(255,255,255,.34);
    --glass-surface:radial-gradient(120% 90% at 18% 8%,rgba(255,255,255,.96) 0%,rgba(255,255,255,.42) 38%,rgba(255,255,255,.08) 68%,rgba(255,255,255,.68) 100%),linear-gradient(135deg,rgba(255,255,255,.78) 0%,rgba(255,255,255,.22) 48%,rgba(250,245,255,.18) 52%,rgba(255,255,255,.72) 100%);
    --glass-sidebar:radial-gradient(140% 80% at 10% 5%,rgba(255,255,255,.94) 0%,rgba(255,255,255,.45) 55%,rgba(255,255,255,.72) 100%);
    --glass-border:rgba(255,255,255,.98);--glass-highlight:#fff;
    --gadget-Well-bg:radial-gradient(120% 100% at 50% 0%,rgba(255,255,255,.48),rgba(255,255,255,.78));
    --gadget-Well-shadow:inset 0 2.5px 2px #fff,inset 0 -2px 5px rgba(255,255,255,.9),0 8px 26px -6px rgba(120,110,160,.07),0 0 0 1px rgba(167,139,250,.14);
    --gadget-bg:radial-gradient(115% 95% at 15% 10%,rgba(255,255,255,.95) 0%,rgba(255,255,255,.44) 55%,rgba(255,255,255,.76) 100%);
    --gadget-border:rgba(255,255,255,.98);
    --gadget-shadow:inset 0 2px 1.5px #fff,inset 0 -2px 4px rgba(255,255,255,.85),0 4px 14px rgba(120,110,160,.05),0 0 0 1px rgba(167,139,250,.12);
    --seg-track-bg:rgba(120,115,150,.06);
    --seg-active-bg:radial-gradient(100% 100% at 30% 15%,#fff 0%,rgba(255,255,255,.85) 100%);
    --btn-sec-bg:radial-gradient(120% 100% at 25% 10%,rgba(255,255,255,.96) 0%,rgba(255,255,255,.48) 60%,rgba(255,255,255,.78) 100%);
    --btn-sec-hover:#fff;--text-primary:#0d1222;--text-secondary:#4a5568;--heading-shadow:0 1px 0 #fff;
    --accent:#252273;--accent-btn:#252273;--c-emerald:#0d9f4f;--c-cyan:#0284c7;--c-sapphire:#252273;--c-amber:#d97706;--c-crimson:#e11d48;--c-violet:#6d28d9;
    --card-shadow:0 14px 34px -8px rgba(120,110,160,.09),inset 0 2.5px 2px #fff,inset 0 -3px 6px rgba(255,255,255,.88),0 0 0 1px rgba(167,139,250,.15);
    --card-hover-shadow:0 24px 48px -10px rgba(140,120,200,.16),inset 0 3px 2.5px #fff,inset 0 -3px 8px rgba(255,255,255,.95);
    --irid-rest-opacity:.62;--irid-foil-opacity:.26;--blur-strength:30px;
  }
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-font-smoothing:antialiased}
body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",sans-serif;background-color:var(--bg-primary);background-image:var(--bg-mesh);background-attachment:fixed;color:var(--text-primary);display:flex;height:100vh;overflow:hidden;position:relative}
.ico{width:20px;height:20px;stroke:currentColor;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round;fill:none;flex-shrink:0}
.ico-sm{width:14px;height:14px;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;fill:none;flex-shrink:0}
.pressable{transition:transform .18s cubic-bezier(.22,1,.36,1),box-shadow .18s ease,background .18s ease,border-color .18s ease;will-change:transform}
.pressable:hover{transform:translate3d(0,-2px,0) scale(1.02)}
.pressable:active{transform:translate3d(0,0,0) scale(.985)}
.auth-overlay{position:fixed;inset:0;z-index:9999;background:radial-gradient(circle at 50% 25%,rgba(12,28,68,.45),rgba(1,3,9,.85));backdrop-filter:blur(42px) saturate(190%);-webkit-backdrop-filter:blur(42px) saturate(190%);display:flex;align-items:center;justify-content:center;padding:20px}
.auth-overlay.hidden{display:none}
.auth-card{width:100%;max-width:415px;background:var(--glass-surface);backdrop-filter:blur(50px) saturate(210%);-webkit-backdrop-filter:blur(50px) saturate(210%);border:1.5px solid var(--glass-border);border-radius:28px;padding:34px 28px 26px;box-shadow:var(--card-shadow);text-align:center}
.auth-logo{width:72px;height:72px;border-radius:18px;background:#252273;box-shadow:0 12px 28px rgba(37,34,115,.45),0 0 0 1.5px rgba(255,255,255,.5);margin-bottom:14px}
.auth-card h1{font-size:24px;font-weight:700;margin:0 0 4px;letter-spacing:-.5px}
.auth-card p.sub{font-size:13px;color:var(--text-secondary);margin:0 0 24px}
.passkey-btn{width:100%;padding:13px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.45);background:linear-gradient(135deg,var(--c-sapphire),#252273);color:#fff;font-size:15px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;box-shadow:0 8px 24px rgba(37,34,115,.32),inset 0 1.5px 1px rgba(255,255,255,.6);margin-bottom:14px}
.google-btn-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;margin-bottom:14px;width:100%;min-height:44px}
.divider{display:flex;align-items:center;gap:10px;margin:16px 0;color:var(--text-secondary);font-size:11px;text-transform:uppercase;letter-spacing:.6px;font-weight:600}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--glass-border)}
.pin-form{display:flex;gap:8px}
.pin-input{flex:1;padding:11px 14px;border-radius:12px;border:1px solid var(--glass-border);background:var(--seg-track-bg);color:var(--text-primary);font-size:14px;outline:none;user-select:text}
.pin-submit{padding:11px 16px;border-radius:12px;border:1px solid var(--glass-border);background:var(--btn-sec-bg);color:var(--text-primary);font-weight:600;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.auth-msg{margin-top:12px;font-size:12px;color:var(--c-crimson);min-height:16px}
.sidebar{position:relative;z-index:2;width:294px;background:var(--glass-sidebar);backdrop-filter:blur(40px) saturate(210%);-webkit-backdrop-filter:blur(40px) saturate(210%);border-right:1.5px solid var(--glass-border);box-shadow:inset -1px 0 1px rgba(255,255,255,.35),4px 0 24px rgba(0,0,0,.08);display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top,14px) + 14px) 16px 18px;flex-shrink:0;overflow-y:auto;contain:layout style}
.brand{display:flex;align-items:center;gap:12px;padding:4px 8px 16px;border-bottom:1px solid var(--glass-border);margin-bottom:12px}
.brand-logo-img{width:46px;height:46px;border-radius:12px;object-fit:cover;background:#252273;box-shadow:0 6px 18px rgba(37,34,115,.45),0 0 0 1.5px rgba(255,255,255,.5);flex-shrink:0}
.brand-text h1{font-size:16px;font-weight:700;margin:0;letter-spacing:-.35px}
.brand-text p{font-size:12px;color:var(--text-secondary);margin:3px 0 0;display:flex;align-items:center;gap:6px}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--c-emerald);display:inline-block;box-shadow:0 0 10px var(--c-emerald)}
.nav-section-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:var(--text-secondary);margin:6px 10px 6px}
.nav-btn{display:flex;align-items:center;gap:10px;width:100%;padding:9px 13px;border:1px solid transparent;background:transparent;color:var(--text-primary);font-size:13.5px;font-weight:500;border-radius:12px;cursor:pointer;text-align:left;margin-bottom:4px}
.nav-btn:hover{background:var(--btn-sec-bg);border-color:var(--glass-border)}
.nav-btn.active{background:linear-gradient(135deg,var(--c-sapphire),#252273);border-color:rgba(255,255,255,.45);box-shadow:0 6px 20px rgba(37,34,115,.28),inset 0 1.5px 1px rgba(255,255,255,.45);color:#fff;font-weight:600}
.sidebar-telemetry{margin-top:auto;margin-bottom:9px;background:var(--glass-surface);border:1.5px solid var(--glass-border);box-shadow:var(--card-shadow);padding:10px 12px;border-radius:var(--radius-md);font-size:12px;cursor:default}
.sidebar-telemetry-row{display:flex;justify-content:space-between;margin-bottom:5px}
.mini-bar-bg{height:5px;background:var(--seg-track-bg);border-radius:4px;overflow:hidden;margin-bottom:8px}
.mini-bar-fill{height:100%;background:var(--c-emerald);width:8%;transition:width .4s ease,background .4s ease}
.control-box{background:var(--glass-surface);border:1.5px solid var(--glass-border);box-shadow:var(--card-shadow);padding:10px 12px;border-radius:var(--radius-md);margin-bottom:9px}
.control-box:last-child{margin-bottom:0}
.control-box label{display:block;font-size:10.5px;font-weight:700;color:var(--text-secondary);margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px}
.control-help{font-size:11px;color:var(--text-secondary);margin:7px 0 0;line-height:1.35}
.sidebar-dl-btn{display:flex;align-items:center;justify-content:space-between;width:100%;padding:10px 12px;margin-bottom:9px;border-radius:var(--radius-md);border:1.5px solid var(--glass-border);background:var(--glass-surface);color:var(--text-primary);font-size:12.5px;font-weight:600;text-decoration:none;box-shadow:var(--card-shadow)}
.sidebar-dl-btn:hover{border-color:var(--glass-highlight);box-shadow:var(--card-hover-shadow),inset 0 1.5px 1px var(--glass-highlight)}
.sidebar-dl-left{display:flex;align-items:center;gap:8px}
.sidebar-dl-ver{font-size:10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;padding:2px 7px;border-radius:6px;background:var(--btn-sec-bg);border:1px solid var(--glass-border);color:var(--text-secondary);font-weight:700}
.segmented-control{display:grid;grid-template-columns:repeat(3,1fr);background:var(--seg-track-bg);padding:3px;border-radius:9px;gap:4px;border:1px solid var(--glass-border)}
.seg-btn{border:none;background:transparent;color:var(--text-secondary);font-size:11px;font-weight:600;padding:6px 4px;border-radius:7px;cursor:pointer}
.seg-btn.active{background:var(--seg-active-bg);color:var(--text-primary);box-shadow:0 2px 6px rgba(0,0,0,.14),inset 0 1px .5px var(--glass-highlight)}
.user-chip{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;padding-top:2px}
.inline-lock-btn{border:1px solid var(--glass-border);background:var(--btn-sec-bg);color:var(--text-primary);font-size:11px;font-weight:600;padding:4px 9px;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.small-action-btn{width:100%;margin-top:8px;padding:8px 8px;border-radius:9px;border:1px solid var(--glass-border);background:var(--btn-sec-bg);color:var(--text-primary);font-size:11px;font-weight:600;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px}
.small-action-btn:hover{background:var(--btn-sec-hover);border-color:var(--glass-highlight)}
.main{position:relative;z-index:1;flex:1;overflow-y:auto;padding:calc(env(safe-area-inset-top,16px) + 22px) 30px 90px;contain: content}
.header-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;flex-wrap:wrap;gap:12px}
.header-bar h2{font-size:30px;font-weight:700;margin:0;letter-spacing:-.6px;text-shadow:var(--heading-shadow)}
.header-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.host-pill,.lock-pill-btn{font-size:12px;padding:7px 14px;border-radius:999px;background:var(--glass-surface);backdrop-filter:blur(25px) saturate(200%);-webkit-backdrop-filter:blur(25px) saturate(200%);border:1.5px solid var(--glass-border);box-shadow:var(--card-shadow);color:var(--text-primary);font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.host-pill{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text-secondary)}
.lock-pill-btn{cursor:pointer}
.mobile-only-btn{display:none}
.instrument-well{background:var(--gadget-Well-bg);backdrop-filter:blur(24px) saturate(190%);-webkit-backdrop-filter:blur(24px) saturate(190%);border:1.5px solid var(--gadget-border);box-shadow:var(--gadget-Well-shadow);border-radius:20px;padding:14px 16px 16px;margin-bottom:26px;cursor:default;contain:layout style}
.instrument-well-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:11px;padding:0 4px}
.instrument-well-title{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.9px;color:var(--text-secondary);display:flex;align-items:center;gap:7px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.instrument-well-badge{font-size:10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text-secondary);opacity:.85}
.telemetry-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:12px;margin-bottom:12px}
.fms-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(225px,1fr));gap:12px}
.stat-widget{--tone-color:var(--c-emerald);--tone-glow:rgba(46,209,88,.2);position:relative;background:var(--gadget-bg);border:1.5px solid var(--gadget-border);border-left:3.5px solid var(--tone-color);box-shadow:var(--gadget-shadow);border-radius:12px;padding:11px 14px 10px;cursor:default;pointer-events:none}
.stat-header{display:flex;justify-content:space-between;align-items:center}
.stat-label{font-size:10px;font-weight:700;text-transform:uppercase;color:var(--text-secondary);letter-spacing:.55px;display:flex;align-items:center;gap:6px}
.tone-dot{width:6px;height:6px;border-radius:50%;background:var(--tone-color);box-shadow:0 0 8px var(--tone-color);display:inline-block}
.stat-value{font-size:19px;font-weight:700;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;margin:5px 0 2px;font-variant-numeric:tabular-nums;letter-spacing:-.4px;color:var(--text-primary)}
.stat-sub{font-size:11px;color:var(--text-secondary);font-variant-numeric:tabular-nums}
.pill-live{font-size:9.5px;font-weight:700;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;padding:2px 7px;border-radius:6px;background:color-mix(in srgb,var(--tone-color) 15%,transparent);border:1px solid color-mix(in srgb,var(--tone-color) 42%,transparent);color:var(--tone-color)}
.section-heading{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--text-secondary);margin:0 4px 12px}
.card{--tone-color:var(--c-sapphire);--tone-glow:rgba(37,34,115,.14);--irid-angle:135deg;position:relative;background:var(--glass-surface);backdrop-filter:blur(var(--blur-strength)) saturate(220%) brightness(1.03);-webkit-backdrop-filter:blur(var(--blur-strength)) saturate(220%) brightness(1.03);border:1.5px solid var(--glass-border);box-shadow:var(--card-shadow),0 10px 28px -12px var(--tone-glow);border-radius:var(--radius-lg);padding:22px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;transition:transform .24s cubic-bezier(.22,1,.36,1),border-color .24s ease,box-shadow .24s ease;transform-style:preserve-3d;will-change:transform,box-shadow}
.bulge-card::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(var(--irid-angle),rgba(56,189,248,var(--irid-foil-opacity)) 0%,rgba(167,139,250,var(--irid-foil-opacity)) 25%,rgba(244,114,182,var(--irid-foil-opacity)) 50%,rgba(251,191,36,calc(var(--irid-foil-opacity)*.75)) 72%,rgba(46,209,88,var(--irid-foil-opacity)) 100%);opacity:.22;transition:opacity .3s ease;pointer-events:none;z-index:0}
.bulge-card::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.75px;background:conic-gradient(from var(--irid-angle),rgba(56,189,248,.9),rgba(167,139,250,.9),rgba(244,114,182,.88),rgba(251,191,36,.82),rgba(46,209,88,.88),rgba(56,189,248,.9));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:var(--irid-rest-opacity);transition:opacity .3s ease;pointer-events:none;z-index:2}
.card>*{position:relative;z-index:1}
.bulge-card:hover{border-color:transparent;box-shadow:var(--card-hover-shadow),0 0 32px -6px rgba(167,139,250,.28),0 0 24px -8px rgba(244,114,182,.24),inset 0 2px 1.5px var(--glass-highlight)}
.bulge-card:hover::before,.bulge-card:hover::after{opacity:1}
.tone-emerald{--tone-color:var(--c-emerald);--tone-glow:rgba(46,209,88,.24)}
.tone-cyan{--tone-color:var(--c-cyan);--tone-glow:rgba(56,189,248,.24)}
.tone-sapphire{--tone-color:var(--c-sapphire);--tone-glow:rgba(37,34,115,.18)}
.tone-amber{--tone-color:var(--c-amber);--tone-glow:rgba(245,158,11,.28)}
.tone-crimson{--tone-color:var(--c-crimson);--tone-glow:rgba(255,69,58,.32)}
.tone-violet{--tone-color:var(--c-violet);--tone-glow:rgba(167,139,250,.18)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;margin-bottom:26px}
.card-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:14px}
.card-icon{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:var(--text-primary);background:var(--btn-sec-bg);border:1.5px solid var(--glass-border);box-shadow:inset 0 2px 1.5px var(--glass-highlight),0 6px 14px rgba(0,0,0,.08)}
.card-icon svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;fill:none}
.badge{font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;background:color-mix(in srgb,var(--c-violet) 14%,transparent);border:1px solid color-mix(in srgb,var(--c-violet) 36%,transparent);color:var(--c-violet)}
.badge.status-good{background:color-mix(in srgb,var(--c-emerald) 16%,transparent);border:1px solid color-mix(in srgb,var(--c-emerald) 45%,transparent);color:var(--c-emerald);box-shadow:0 0 12px rgba(46,209,88,.18)}
.badge.status-warn{background:color-mix(in srgb,var(--c-amber) 18%,transparent);border:1px solid color-mix(in srgb,var(--c-amber) 48%,transparent);color:var(--c-amber);box-shadow:0 0 12px rgba(245,158,11,.22)}
.badge.status-bad{background:color-mix(in srgb,var(--c-crimson) 18%,transparent);border:1px solid color-mix(in srgb,var(--c-crimson) 48%,transparent);color:var(--c-crimson);box-shadow:0 0 14px rgba(255,69,58,.25)}
.card h3{font-size:18px;font-weight:700;margin:0 0 6px;letter-spacing:-.2px}
.card p{font-size:13px;color:var(--text-secondary);margin:0 0 14px;line-height:1.48}
.btn-group{display:flex;flex-direction:column;gap:8px;width:100%}
.btn{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 14px;border-radius:12px;font-size:13px;font-weight:600;text-decoration:none;cursor:pointer}
.btn-primary{background:linear-gradient(135deg,#2b3595,#252273);border:1px solid rgba(255,255,255,.45);box-shadow:0 6px 16px rgba(37,34,115,.24),inset 0 1.5px 1px rgba(255,255,255,.5);color:#fff}
.btn-primary:hover{box-shadow:0 12px 24px rgba(37,34,115,.36),inset 0 1.5px 1px rgba(255,255,255,.75)}
.btn-secondary{background:var(--btn-sec-bg);border:1.5px solid var(--glass-border);box-shadow:inset 0 2px 1.5px var(--glass-highlight);color:var(--text-primary)}
.btn-secondary:hover{background:var(--btn-sec-hover);border-color:var(--glass-highlight)}
.tool-input{width:100%;padding:9px 12px;border-radius:10px;border:1px solid var(--glass-border);background:var(--seg-track-bg);color:var(--text-primary);font-size:13px;margin-bottom:8px;outline:none;user-select:text}
.tool-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.tool-result{font-size:11.5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;padding:8px 10px;border-radius:9px;background:var(--seg-track-bg);border:1px solid var(--glass-border);color:var(--text-primary);margin-bottom:10px;text-align:center;user-select:all;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drop-zone{border:1.5px dashed var(--glass-border);border-radius:12px;padding:12px;text-align:center;font-size:12px;color:var(--text-secondary);background:var(--seg-track-bg);margin-bottom:8px;cursor:pointer;transition:border-color .2s ease}
.drop-zone:hover{border-color:var(--c-cyan);color:var(--text-primary)}
.monitor-frame-wrap{background:var(--glass-surface);backdrop-filter:blur(var(--blur-strength)) saturate(200%);-webkit-backdrop-filter:blur(var(--blur-strength)) saturate(200%);border:1.5px solid var(--glass-border);border-radius:var(--radius-lg);overflow:hidden;margin-top:24px;margin-bottom:28px;box-shadow:var(--card-shadow)}
.monitor-header{padding:14px 20px;border-bottom:1px solid var(--glass-border);display:flex;justify-content:space-between;align-items:center}
.monitor-header h3{margin:0;font-size:15px;font-weight:600}
.monitor-iframe{width:100%;height:580px;border:none;background:transparent}
.cmd-box{background:rgba(2,5,14,.88);border:1px solid rgba(140,195,255,.16);color:#f1f5f9;border-radius:var(--radius-md);padding:12px 14px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:6px;user-select:all}
.copy-btn{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:7px;padding:5px 10px;font-size:11px;font-weight:600;cursor:pointer;flex-shrink:0}
.view-section{display:none}
.view-section.active{display:block}
.discreet-copy{position:fixed;right:18px;bottom:12px;z-index:50;font-size:11px;font-weight:500;letter-spacing:.3px;color:var(--text-secondary);opacity:.42;text-decoration:none;transition:opacity .2s ease,color .2s ease}
.discreet-copy:hover{opacity:.9;color:var(--text-primary)}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:rgba(5,12,28,.92);color:#fff;border:1px solid rgba(46,209,88,.5);padding:9px 18px;border-radius:999px;font-size:12.5px;font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:all .22s ease;z-index:99999}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.mobile-tabs{display:none;position:fixed;bottom:0;left:0;right:0;background:var(--glass-sidebar);backdrop-filter:blur(35px) saturate(200%);-webkit-backdrop-filter:blur(35px) saturate(200%);border-top:1.5px solid var(--glass-border);padding:8px 12px calc(env(safe-area-inset-bottom,12px) + 6px);justify-content:space-around;z-index:100}
.tab-item{background:none;border:none;color:var(--text-secondary);font-size:10.5px;font-weight:600;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer}
.tab-item.active{color:var(--c-sapphire)}
@media (max-width:768px){
  .sidebar{display:none}
  .mobile-tabs{display:flex}
  .mobile-only-btn{display:inline-flex}
  .discreet-copy{bottom:74px}
  .main{padding:calc(env(safe-area-inset-top,16px) + 14px) 16px 110px}
}

/* v20 75% Larger Upper-Left BMA Logo with Interactive 3D Glass Reflection + v19 Buttons */
.brand {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 6px 6px 18px !important;
  border-bottom: 1px solid var(--glass-border) !important;
  margin-bottom: 12px !important;
  perspective: 700px !important;
}

.brand-logo-link {
  --bx: 50%;
  --by: 0%;
  --b-angle: 135deg;
  position: relative !important;
  width: 80.5px !important;
  height: 80.5px !important;
  border-radius: 19px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  overflow: hidden !important;
  transform-style: preserve-3d !important;
  will-change: transform, box-shadow !important;
  background: #252273 !important;
  box-shadow:
    0 8px 22px -3px rgba(20, 22, 82, 0.55),
    0 0 0 1px rgba(190, 225, 255, 0.38),
    inset 0 1.5px 1px rgba(255, 255, 255, 0.55) !important;
  transition:
    transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.18s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.brand-logo-link .brand-logo-img {
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit !important;
  object-fit: cover !important;
  display: block !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

.brand-logo-link::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  background:
    radial-gradient(
      58px 34px at var(--bx) var(--by),
      rgba(255, 255, 255, 0.72) 0%,
      rgba(175, 230, 255, 0.28) 34%,
      rgba(255, 255, 255, 0.0) 60%
    ),
    linear-gradient(
      var(--b-angle),
      transparent 43%,
      rgba(255, 255, 255, 0.10) 48%,
      rgba(225, 245, 255, 0.46) 50%,
      rgba(255, 255, 255, 0.10) 52%,
      transparent 57%
    ) !important;
  opacity: 0.14 !important;
  pointer-events: none !important;
  transition: opacity 0.18s ease !important;
  z-index: 2 !important;
}

.brand-logo-link::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  padding: 1.25px !important;
  background: conic-gradient(
    from var(--b-angle),
    rgba(255, 255, 255, 0.95) 0deg,
    rgba(56, 189, 248, 0.80) 55deg,
    rgba(37, 34, 115, 0.25) 140deg,
    rgba(167, 139, 250, 0.80) 220deg,
    rgba(37, 34, 115, 0.25) 300deg,
    rgba(255, 255, 255, 0.95) 360deg
  ) !important;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  opacity: 0.28 !important;
  pointer-events: none !important;
  transition: opacity 0.18s ease !important;
  z-index: 3 !important;
}

.brand-logo-link:hover {
  box-shadow:
    0 12px 26px -4px rgba(14, 20, 78, 0.65),
    0 0 16px -3px rgba(56, 189, 248, 0.38),
    inset 0 1.5px 1px rgba(255, 255, 255, 0.9) !important;
}

.brand-logo-link:hover::before,
.brand-logo-link:hover::after {
  opacity: 0.96 !important;
}

.grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 20px !important;
  margin-bottom: 24px !important;
}
.grid-3 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 20px !important;
  margin-bottom: 24px !important;
}
@media (max-width: 960px) {
  .grid, .grid-3 {
    grid-template-columns: 1fr !important;
  }
}

.btn-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  width: 100% !important;
  perspective: 800px !important;
}

.card .btn,
.card .btn-primary,
.card .btn-secondary,
.passkey-btn,
.pin-submit,
.nav-btn.active {
  --bx: 50%;
  --by: 0%;
  --b-angle: 135deg;
  position: relative !important;
  width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 11px 15px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: -0.1px !important;
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  overflow: hidden !important;
  transform-style: preserve-3d !important;
  will-change: transform, box-shadow !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.0) 42%),
    linear-gradient(165deg, #2e3aa3 0%, #252273 55%, #1b1859 100%) !important;
  border: 1px solid rgba(190, 225, 255, 0.36) !important;
  box-shadow:
    0 5px 14px -3px rgba(16, 18, 68, 0.45),
    inset 0 1px 0.5px rgba(255, 255, 255, 0.58),
    inset 0 -1.5px 3px rgba(8, 10, 38, 0.65) !important;
  transition:
    transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.18s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.18s ease !important;
}

.card .btn::before,
.card .btn-primary::before,
.card .btn-secondary::before,
.passkey-btn::before,
.nav-btn.active::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  background:
    radial-gradient(
      72px 28px at var(--bx) var(--by),
      rgba(255, 255, 255, 0.72) 0%,
      rgba(175, 230, 255, 0.28) 32%,
      rgba(255, 255, 255, 0.0) 56%
    ),
    linear-gradient(
      var(--b-angle),
      transparent 44%,
      rgba(255, 255, 255, 0.08) 48.5%,
      rgba(225, 245, 255, 0.42) 50%,
      rgba(255, 255, 255, 0.08) 51.5%,
      transparent 56%
    ) !important;
  opacity: 0.12 !important;
  pointer-events: none !important;
  transition: opacity 0.18s ease !important;
  z-index: 0 !important;
}

.card .btn::after,
.card .btn-primary::after,
.card .btn-secondary::after,
.passkey-btn::after,
.nav-btn.active::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  padding: 1px !important;
  background: conic-gradient(
    from var(--b-angle),
    rgba(255, 255, 255, 0.95) 0deg,
    rgba(56, 189, 248, 0.75) 55deg,
    rgba(37, 34, 115, 0.25) 140deg,
    rgba(167, 139, 250, 0.75) 220deg,
    rgba(37, 34, 115, 0.25) 300deg,
    rgba(255, 255, 255, 0.95) 360deg
  ) !important;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  opacity: 0.22 !important;
  pointer-events: none !important;
  transition: opacity 0.18s ease !important;
  z-index: 2 !important;
}

.card .btn:hover,
.card .btn-primary:hover,
.card .btn-secondary:hover,
.passkey-btn:hover,
.nav-btn.active:hover {
  border-color: transparent !important;
  box-shadow:
    0 8px 18px -4px rgba(14, 20, 78, 0.58),
    0 0 12px -3px rgba(56, 189, 248, 0.32),
    inset 0 1.5px 1px rgba(255, 255, 255, 0.88),
    inset 0 -1.5px 3px rgba(10, 14, 52, 0.7) !important;
}

.card .btn:hover::before,
.card .btn-primary:hover::before,
.card .btn-secondary:hover::before,
.passkey-btn:hover::before,
.nav-btn.active:hover::before {
  opacity: 0.92 !important;
}

.card .btn:hover::after,
.card .btn-primary:hover::after,
.card .btn-secondary:hover::after,
.passkey-btn:hover::after,
.nav-btn.active:hover::after {
  opacity: 0.95 !important;
}

.card .btn:active,
.card .btn-primary:active,
.card .btn-secondary:active,
.brand-logo-link:active {
  transform: perspective(700px) translate3d(0, 0, 0) scale3d(0.992, 0.992, 1) !important;
}

.main {
  display: flex !important;
  flex-direction: column !important;
  padding-bottom: 22px !important;
}
.page-footer {
  margin-top: auto !important;
  padding-top: 18px !important;
  display: flex !important;
  justify-content: flex-end !important;
  width: 100% !important;
}
.discreet-copy {
  position: static !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.3px !important;
  color: var(--text-secondary) !important;
  opacity: 0.5 !important;
  text-decoration: none !important;
}
.discreet-copy:hover {
  opacity: 1 !important;
  color: var(--text-primary) !important;
}