/* Final UI layer. One sidebar offset, one content width, one control dialog. */
body, body.shell-ready {
  --sidebar-width: 256px; --header-height: 64px; --content-width: 1280px;
  --bg: #fafafa; --panel: #fff; --panel-2: #f5f5f5; --text: #222;
  --muted: #737373; --line: #e2e2e2; --accent: #bf0000; --nav-active: #bf0000;
  --nav: #ffe8e8; --teal: #bf0000; --teal-dark: #bf0000;
  --brand-border: #f5a6a6; --up: #23775c; --down: #bf3545;
  margin: 0; padding: 0; min-width: 320px; color: var(--text); background: var(--bg);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
body.theme-dark, body.shell-ready.theme-dark {
  color-scheme: dark; --bg:#191919; --panel:#232323; --panel-2:#2b2b2b;
  --text:#ededed; --muted:#aaa; --line:#3b3b3b; --accent:#ff5959;
  --nav:#392020; --brand-border:#6f3030; --up:#69b99a; --down:#ef8190;
}
* { box-sizing: border-box; }
body.shell-ready :is(h1,h2,h3,button,.site) { letter-spacing: normal; }
body.shell-ready button { font-family: inherit; }
body.shell-ready [hidden] { display: none !important; }
body.shell-ready :is(input,select,textarea,button):focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
body.shell-ready :is(input[type=checkbox],input[type=radio]) { accent-color:var(--nav-active); }
body.shell-ready:not(.locked) { padding:0; }
body.locked > :is(header,main,.shell-sidebar,.mobile-nav,.mobile-panel), body:not(.locked) > #loginScreen { display:none !important; }
body.locked { padding:0 !important; }
.shell-context, .shell-desktop-tools { display:none; }
.shell-menu-group { margin:0 0 12px; }
.shell-menu-group > summary { display:flex; align-items:center; justify-content:space-between; min-height:38px; padding:8px 10px; color:var(--muted); font-size:12px; font-weight:600; cursor:pointer; list-style:none; }
.shell-menu-group > summary::-webkit-details-marker { display:none; }
.shell-menu-group > summary::after { content:'›'; font-size:19px; font-weight:400; transition:transform .15s; }
.shell-menu-group[open] > summary::after { transform:rotate(90deg); }
.shell-menu-items { display:grid; gap:2px; }
.shell-menu-items button { width:100%; min-width:0; display:flex; align-items:center; gap:10px; min-height:39px; padding:9px 10px; border:0; border-left:3px solid transparent; border-radius:5px; color:var(--text); background:transparent; font-size:13px; font-weight:450; text-align:left; }
.shell-menu-items button:hover { background:var(--panel-2); }
.shell-menu-items button.active { background:var(--nav); color:var(--accent); border-left-color:var(--nav-active); font-weight:600; }
.shell-menu-items .mobile-icon { width:17px; height:17px; flex:0 0 17px; color:var(--muted); }
.shell-menu-items button.active .mobile-icon { color:var(--accent); }
.shell-menu-items button span { overflow-wrap:anywhere; }

@media (min-width:901px) {
  body.shell-ready:not(.locked) > header, body.shell-ready.theme-dark:not(.locked) > header {
    display:grid; position:fixed; inset:0 0 auto; z-index:70; grid-template-columns:var(--sidebar-width) minmax(0,1fr);
    align-items:center; height:var(--header-height); min-height:0; margin:0; padding:0; gap:0;
    border:0; border-top:2px solid var(--nav-active); border-bottom:1px solid var(--line); border-radius:0;
    background:var(--panel); box-shadow:none;
  }
  body.shell-ready:not(.locked) > header .app-brand { display:flex; align-items:center; height:62px; min-width:0; padding:0 20px; gap:10px; border-right:1px solid var(--line); }
  body.shell-ready .app-brand img { width:32px; height:32px; flex:0 0 32px; }
  body.shell-ready .app-brand h1 { font-size:15px; font-weight:650; white-space:nowrap; letter-spacing:-.02em; }
  body.shell-ready .app-brand .subtitle { display:none; }
  body.shell-ready > header .toolbar { display:flex; flex-direction:row; align-items:center; justify-content:space-between; width:100%; height:62px; min-width:0; gap:18px; padding:0 28px; }
  body.shell-ready :is(#viewMode,#mainNav) { display:none !important; }
  .shell-context { display:flex; gap:11px; align-items:center; min-width:0; font-size:13px; white-space:nowrap; }
  .shell-context span { color:var(--muted); }
  .shell-context strong { overflow:hidden; text-overflow:ellipsis; font-weight:550; }
  .shell-context strong::before { content:'/'; margin-right:11px; color:#bbb; font-weight:400; }
  .shell-desktop-tools { display:flex; gap:7px; align-items:center; min-width:0; }
  .shell-desktop-tools button { display:flex; gap:7px; align-items:center; height:34px; min-height:34px; padding:0 10px; border:1px solid transparent; border-radius:6px; background:transparent; color:var(--text); font-size:12px; font-weight:500; white-space:nowrap; }
  .shell-desktop-tools button:hover, .shell-desktop-tools button[aria-expanded=true] { background:var(--panel-2); border-color:var(--line); }
  .shell-desktop-tools .mobile-icon { width:16px; height:16px; flex:0 0 16px; color:var(--muted); }
  .shell-desktop-tools .shell-router-context { max-width:230px; margin-right:8px; border:1px solid var(--line); background:var(--panel); }
  .shell-router-context span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  body.shell-ready:not(.locked) > .shell-sidebar {
    display:flex; position:fixed; inset:var(--header-height) auto 0 0; z-index:60; width:var(--sidebar-width);
    flex-direction:column; gap:14px; padding:20px 14px 14px; border-right:1px solid var(--line); background:var(--panel); overflow:hidden;
  }
  .shell-sidebar > .shell-menu-search { margin:0; flex:none; background:var(--panel); }
  .shell-sidebar .shell-menu-search input { height:34px !important; font-size:12px !important; }
  .shell-desktop-menu { flex:1; min-height:0; overflow:auto; scrollbar-width:thin; overscroll-behavior:contain; }
  .shell-sidebar > footer { display:flex; align-items:center; justify-content:space-between; margin:0; padding:14px 9px 0; border-top:1px solid var(--line); flex:none; }
  .shell-sidebar footer small { display:block; color:var(--muted); font-size:10px; }
  .shell-sidebar footer strong { display:block; max-width:160px; overflow:hidden; text-overflow:ellipsis; font-size:13px; font-weight:550; }
  .shell-sidebar footer button { display:grid; place-items:center; width:32px; height:32px; border:1px solid var(--line); border-radius:6px; background:var(--panel); color:var(--muted); }
  .shell-sidebar footer button span { display:none; }
  .shell-sidebar footer .mobile-icon { width:16px; height:16px; }
  body.shell-ready:not(.locked) > main {
    display:block; width:calc(100% - var(--sidebar-width)); max-width:none; min-width:0; min-height:100vh;
    margin:0 0 0 var(--sidebar-width); padding:calc(var(--header-height) + 32px) 36px 48px;
  }
  body.shell-ready > main > * { width:100%; max-width:var(--content-width); margin-left:auto; margin-right:auto; min-width:0; }
  body.shell-ready > main > #cards { width:100%; max-width:var(--content-width); }
  body.shell-ready .mobile-overview { border:0; }
  body.shell-ready .mobile-overview > summary { display:none; }
}
@media (min-width:901px) and (max-width:1190px) {
  body.shell-ready { --sidebar-width:224px; }
  body.shell-ready > header .toolbar { padding:0 20px; gap:8px; }
  .shell-context span { display:none; }
  .shell-context strong::before { content:none; }
  .shell-desktop-tools .shell-router-context { max-width:180px; }
  body.shell-ready:not(.locked) > main { padding-left:24px; padding-right:24px; }
}

/* A native dialog supplies backdrop, focus trapping, Escape, and stacking. */
body.shell-ready #mobilePanel {
  position:fixed; inset:0 0 0 auto; width:min(460px,100%); max-width:100%; height:100dvh; max-height:100dvh;
  margin:0; padding:0 24px 28px; border:0; border-left:1px solid var(--line); border-radius:0;
  background:var(--panel); color:var(--text); overflow-y:auto; box-shadow:-12px 0 40px #0002;
}
body.shell-ready #mobilePanel:not([open]) { display:none; }
#mobilePanel::backdrop { background:rgba(0,0,0,.24); }
#mobilePanel .mobile-panel-head { display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:5; gap:14px; min-height:72px; margin:0 0 18px; padding:16px 0; border-bottom:1px solid var(--line); background:var(--panel); }
#mobilePanel .mobile-panel-head h2 { margin:0; font-size:19px; font-weight:600; }
#mobilePanel .mobile-close { display:grid; place-items:center; width:34px; height:34px; padding:7px; border:1px solid var(--line); border-radius:6px; background:var(--panel); color:var(--muted); }
#mobilePanel .mobile-close span { display:none; }
#mobilePanel .mobile-close .mobile-icon { width:18px; height:18px; }
.shell-control-description { margin:0 0 22px; color:var(--muted); font-size:13px; line-height:1.6; }
body.shell-ready #mobilePanel .control-bar { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; margin:0; padding:0; gap:12px; border:0; background:transparent; }
#mobilePanel .control-bar > * { min-width:0; max-width:100%; width:100%; }
#mobilePanel .control-bar > :is(#routerSelect,#partnerRouterBadge,#interfaceTools,#trafficPlayback,#currentAccount,#logoutBtn) { grid-column:1/-1; }
#mobilePanel .control-bar :is(input,select,button) { height:40px; min-height:40px; min-width:0; max-width:100%; border:1px solid var(--line); border-radius:6px; padding:8px 10px; background:var(--panel); color:var(--text); font-size:12px; font-weight:450; }
#mobilePanel .control-bar select { padding-right:25px; }
#mobilePanel #interfaceTools { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; }
#mobilePanel .control-bar #routerSelect, #mobilePanel .control-bar #interfaceSearch { width:100%; max-width:100%; }
#mobilePanel .custom-select-button { width:100%; text-align:left; }
#mobilePanel .custom-select-menu { position:static; width:100%; max-height:230px; margin:6px 0 0; overflow:auto; box-shadow:none; }
#mobilePanel .custom-select-option { display:block; width:100%; height:auto; min-height:36px; text-align:left; border:0; }
#mobilePanel .control-bar #refreshBtn, #mobilePanel .control-bar .custom-select-option.active { background:var(--nav-active); border-color:var(--nav-active); color:#fff; }
#mobilePanel .control-bar #trafficPlayback { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:5px 0; }
#mobilePanel #trafficPlayback button { width:auto; }
#mobilePanel #trafficPlaybackStatus { font-size:11px; color:var(--muted); }
body.shell-ready:not(.locked) #mobilePanel #currentAccount { display:flex; align-items:center; gap:7px; min-height:42px; border-top:1px solid var(--line); border-radius:0; padding:14px 0 0; margin-top:8px; font-size:12px; }
body.shell-ready:not(.locked) #mobilePanel #logoutBtn { display:block; color:var(--text); }
#mobilePanel .control-bar #loginAuditBell { width:40px; }
#mobilePanel .control-bar #loginAuditBell img { width:18px; height:18px; filter:grayscale(1); }
#mobilePanel .mobile-menu-list { display:block; }
#mobilePanel .shell-menu-search { margin-bottom:16px; position:static; }
body.mobile-panel-open { overflow:hidden; }

/* Centered console overview; its alignment matches the actual data below. */
body:not(.traffic-view) #consoleWelcome { display:none; }
.console-welcome { padding:8px 0 30px; }
.console-welcome-badge { display:flex; justify-content:center; align-items:center; gap:7px; margin:0 auto 12px; color:var(--muted); font-size:11px; letter-spacing:.06em; text-transform:uppercase; }
.console-welcome-badge span { width:6px; height:6px; border-radius:50%; background:var(--nav-active); }
.console-welcome h2 { margin:0 0 26px; color:var(--text); font-size:32px; line-height:1.2; font-weight:650; letter-spacing:-.04em; text-align:center; }
.console-command { width:100%; height:50px; display:flex; align-items:center; gap:12px; margin:0 0 28px; padding:0 18px; border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--muted); text-align:left; box-shadow:0 2px 4px #00000004; }
.console-command > span { width:16px; height:16px; flex:none; border:1.6px solid currentColor; border-radius:50%; position:relative; }
.console-command > span::after { content:''; position:absolute; right:-5px; bottom:-3px; width:6px; height:1.6px; background:currentColor; transform:rotate(45deg); }
.console-command strong { flex:1; font-size:14px; font-weight:400; }
.console-command kbd { padding:1px 5px; border:1px solid var(--line); border-radius:4px; color:var(--muted); font-family:inherit; font-size:11px; line-height:1.7; }
.console-welcome-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.console-welcome-grid > section { min-width:0; }
.console-section-title { display:flex; justify-content:space-between; padding-bottom:9px; color:var(--muted); font-size:12px; font-weight:500; }
.console-section-title b { font-weight:400; }
.console-welcome-grid section > button { width:100%; display:flex; align-items:center; gap:10px; min-height:67px; padding:12px 0; border:0; border-top:1px solid var(--line); border-radius:0; background:transparent; color:var(--text); text-align:left; }
.console-welcome-grid section > button:last-child { border-bottom:1px solid var(--line); }
.console-welcome-grid section > button:hover { color:var(--accent); }
.console-welcome-grid section > button span { flex:1; min-width:0; display:grid; gap:3px; }
.console-welcome-grid section > button strong { font-size:13px; font-weight:550; line-height:1.35; }
.console-welcome-grid section > button small { font-size:11px; color:var(--muted); line-height:1.4; }
.console-welcome-grid section > button > b { color:var(--muted); font-size:19px; font-weight:400; }
.console-home-icon { display:block; width:18px; height:18px; flex:0 0 18px; background:currentColor; color:var(--muted); mask:center/contain no-repeat; -webkit-mask:center/contain no-repeat; }
.icon-monitor { mask-image:url('mobile-activity.svg'); -webkit-mask-image:url('mobile-activity.svg'); }
.icon-resource { mask-image:url('mobile-chart-no-axes-combined.svg'); -webkit-mask-image:url('mobile-chart-no-axes-combined.svg'); }
.icon-connect { mask-image:url('mobile-network.svg'); -webkit-mask-image:url('mobile-network.svg'); }
.icon-history { mask-image:url('mobile-shield.svg'); -webkit-mask-image:url('mobile-shield.svg'); }
.console-ship { font-size:13px; font-weight:550; }
.console-ship i { font-size:21px; color:var(--muted); font-style:normal; }
body.shell-ready .status-line { margin-top:0; margin-bottom:16px; color:var(--muted); font-size:12px; text-align:left; overflow-wrap:anywhere; }
body.shell-ready .summary { gap:0; margin-top:0; margin-bottom:24px; padding:20px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
body.shell-ready .summary .metric { padding:0 18px; }
body.shell-ready .summary .metric:first-child { padding-left:0; }
body.shell-ready .summary .value { font-size:24px; font-weight:600; }
body.shell-ready #cards { gap:20px; }
body.shell-ready .card { border:1px solid var(--line); border-radius:8px; background:var(--panel); box-shadow:none; }
body.shell-ready :is(.admin-form,.settings-fields,.vpn,.ipam,.up,.mpls,.sdwan) { min-width:0; }
body.shell-ready #cards :is(h2,.site) { line-height:1.3; font-weight:600; }
body.shell-ready :is(.vpn-tabs,.ipam-tabs,.up-tabs) button { font-size:12px; }
body.shell-ready :is(.vpn-tabs,.ipam-tabs,.up-tabs) button.active { background:var(--nav); color:var(--accent); border-color:var(--brand-border); }
body.shell-ready .chart.rt-chart { --rx-color:#bf0000; --tx-color:#676767; }
body.shell-ready .summary .metric:nth-child(2) .value, body.shell-ready .summary .metric:nth-child(3) .value { color:var(--text); }

/* Feature pages share the Garuda red/neutral palette, with semantic error states. */
body.shell-ready .mpls-heading, body.shell-ready .sdwan-heading { margin:0; min-height:0; display:flex; align-items:flex-start; justify-content:space-between; padding:24px; border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--text); box-shadow:none; }
body.shell-ready .sdwan-heading::before, body.shell-ready .sdwan-heading-art { display:none; }
body.shell-ready .sdwan-heading h2, body.shell-ready .mpls-heading h2 { font-size:26px; color:var(--text); }
body.shell-ready .sdwan-heading h2 span { color:var(--text); }
body.shell-ready :is(.sdwan-eyebrow,.mpls-eyebrow) { color:var(--accent); }
body.shell-ready .sdwan-heading-copy > p { color:var(--muted); font-size:13px; }
body.shell-ready .sdwan-hero-pills { margin-top:14px; }
body.shell-ready .sdwan-hero-pills span { border-color:var(--line); background:var(--panel-2); color:var(--muted); }
body.shell-ready .sdwan-hero-pills svg { color:var(--accent); }
body.shell-ready .sdwan-eyebrow i { background:var(--nav-active); box-shadow:none; }
body.shell-ready .sdwan { --zt:var(--nav-active); --zt-dark:var(--accent); --aqua:var(--accent); }
body.shell-ready :is(.sdwan-panel,.ztc-panel,.sdwan-confirm,.sdwan-toolbar) { border-color:var(--line); border-radius:8px; box-shadow:none; }
body.shell-ready :is(.sdwan-panel-head,.ztc-head) { background:var(--panel-2); border-color:var(--line); }
body.shell-ready :is(.sdwan-panel-head small,.ztc-head small,.ztc-list article code,.sdwan-control > svg,.sdwan-toolbar button svg,.sdwan-confirm-head small,.sdwan-network-id code,.sdwan-network-id span) { color:var(--accent); }
body.shell-ready :is(.sdwan-panel-head > div:first-child > span,.sdwan-instance-name > span,.sdwan-network-name > span,.sdwan-confirm-head > span,.sdwan-confirm li > span,.sdwan-planet-icon) { color:var(--accent); background:var(--nav); }
body.shell-ready .sdwan-summary article[data-tone] { --card-accent:var(--accent); --card-tint:var(--nav); box-shadow:none; border-radius:8px; }
body.shell-ready .sdwan-summary article::after { display:none; }
body.shell-ready .sdwan :is(button,input,select) { border-radius:6px; font-size:12px; }
body.shell-ready .sdwan button:hover:not(:disabled) { transform:none; box-shadow:none; border-color:var(--brand-border); }
body.shell-ready :is(.sdwan button.sdwan-primary,.mpls button.mpls-primary) { background:var(--nav-active); border-color:var(--nav-active); color:#fff; box-shadow:none; }
body.shell-ready :is(.sdwan button.sdwan-primary,.mpls button.mpls-primary):hover:not(:disabled) { background:#bf0000; box-shadow:none; }
body.shell-ready :is(.sdwan-instance-list button,.sdwan-network-id,.sdwan-flags label:has(input:checked),.mpls-output-tabs button[aria-pressed=true]) { border-color:var(--brand-border); background:var(--nav); color:var(--accent); }
body.shell-ready .sdwan input:focus, body.shell-ready .sdwan select:focus { border-color:var(--accent); box-shadow:0 0 0 3px #bf00001a; }
body.shell-ready #cards .sdwan-control select { padding-left:42px; }
body.shell-ready .sdwan-status:not(.is-error) { color:var(--muted); background:var(--panel-2); border-color:var(--line); }
body.shell-ready .sdwan-status:not(.is-error) > i { background:var(--nav-active); box-shadow:none; }
body.shell-ready .sdwan :is(input[type=checkbox],input[type=radio]) { accent-color:var(--nav-active); }
body.shell-ready .sdwan-badge.is-enabled { background:var(--nav); color:var(--accent); }
body.shell-ready .mpls-execute { border-color:var(--brand-border); background:var(--nav); }
body.shell-ready .mpls-execute-head > span { border-color:var(--brand-border); color:var(--accent); }
body.shell-ready .mpls-output pre { border-color:#424242; background:#202020; color:#eee; }
body.shell-ready .mpls-steps { color:var(--muted); }
body.shell-ready .mpls-kicker { color:var(--accent); }
body.shell-ready :is(.mpls-safe span,.mpls-box-head span,.mpls-output-head > div > span,.mpls-public-transport,.mpls-link span) { color:var(--accent); background:var(--nav); border-color:var(--brand-border); }
body.shell-ready :is(.mpls-public-transport strong,.mpls-public-transport > small) { color:var(--accent); }
body.shell-ready .shzt { background:var(--panel); border-color:var(--line); border-radius:8px; }
body.shell-ready :is(.shzt > div small,.shzt code) { color:var(--accent); }

/* Login stays independent of the authenticated layout. */
body.locked .login-screen { display:grid; grid-template-rows:72px minmax(0,1fr) auto; width:100%; min-height:100dvh; padding:0; background:var(--bg); color:var(--text); }
.login-topbar { display:flex; justify-content:space-between; align-items:center; width:100%; min-height:72px; padding:0 5vw; border-top:2px solid var(--nav-active); border-bottom:1px solid var(--line); background:var(--panel); }
.login-wordmark { display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; font-size:16px; font-weight:650; line-height:1.2; }
.login-wordmark img { width:34px; height:34px; }
.login-wordmark b { font-weight:500; }
.login-wordmark small { display:block; margin-top:4px; color:var(--muted); font-size:9px; letter-spacing:.07em; text-transform:uppercase; }
.login-controls { display:flex; align-items:center; gap:8px; }
.login-controls :is(select,button) { height:35px; border:1px solid var(--line); border-radius:6px; padding:0 10px; color:var(--text); background:var(--panel); font-family:inherit; font-size:12px; }
.login-controls button { display:grid; place-items:center; width:35px; padding:7px; }
.login-content { display:grid; grid-template-columns:1.1fr 1fr; align-self:center; width:min(100% - 48px,1100px); margin:40px auto; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--panel); box-shadow:0 12px 40px #00000007; }
.login-intro { min-height:490px; display:flex; flex-direction:column; justify-content:center; padding:55px; background:linear-gradient(140deg,#bf0000,#bf0000); color:#fff; }
.login-kicker { margin:0 0 18px; font-size:10px; font-weight:650; letter-spacing:.1em; }
.login-intro h1 { margin:0; color:#fff; font-size:39px; font-weight:650; letter-spacing:-.04em; line-height:1.12; }
.login-lede { margin:18px 0 26px; font-size:14px; line-height:1.7; }
.login-capabilities { display:grid; gap:12px; list-style:none; padding:0; margin:0; font-size:12px; }
.login-capabilities li { display:flex; align-items:center; gap:10px; }
.login-capabilities li > span { width:5px; height:5px; flex:0 0 5px; border:1px solid #fff; border-radius:50%; }
.login-status { display:flex; align-items:center; gap:10px; padding-top:23px; margin-top:30px; border-top:1px solid #ffffff4d; }
.login-status-dot { width:7px; height:7px; background:#fff; border-radius:50%; }
.login-status b,.login-status small { display:block; font-size:11px; }
.login-status small { margin-top:4px; font-size:10px; }
.login-access-panel { display:flex; flex-direction:column; justify-content:center; padding:50px; }
.login-identity { display:flex; align-items:center; justify-content:flex-start; gap:12px; margin:0 0 30px; text-align:left; }
.login-identity img { width:42px; height:42px; margin:0; }
.login-identity p { margin:0 0 4px; color:var(--muted); font-size:12px; }
.login-identity h2 { margin:0; color:var(--text); font-size:24px; font-weight:600; }
.login-box { display:block; max-width:none; width:100%; padding:0; margin:0; border:0; background:transparent; box-shadow:none; }
.login-field { display:grid; gap:7px; margin:0 0 18px; }
.login-field label { font-size:12px; color:var(--text); font-weight:550; }
.login-field input { width:100%; height:44px; padding:0 12px; border:1px solid var(--line); border-radius:6px; background:var(--panel); color:var(--text); font-size:14px; }
.login-field input:focus { border-color:var(--nav-active); outline:0; box-shadow:0 0 0 3px #bf000020; }
.login-password { position:relative; }
.login-password input { padding-right:45px; }
.login-password button { position:absolute; inset:0 0 0 auto; display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; background:transparent; }
.login-password button img { width:18px; height:18px; filter:grayscale(1); }
.login-error { min-height:0; margin:0 0 14px; color:var(--down); font-size:12px; }
.login-error:empty { display:none; }
.login-submit { display:flex; justify-content:center; align-items:center; gap:10px; width:100%; min-height:44px; margin:22px 0 0; border:1px solid var(--nav-active); border-radius:6px; background:var(--nav-active); color:#fff; font-size:14px; font-weight:550; }
.login-submit img { filter:brightness(0) invert(1); }
.login-notice { margin:17px 0 0; color:var(--muted); font-size:11px; text-align:center; }
.login-footer { display:flex; justify-content:space-between; gap:15px; width:min(100% - 48px,1100px); margin:0 auto; padding:18px 0; color:var(--muted); font-size:11px; }

@media (max-width:900px) {
  body.shell-ready > .shell-sidebar { display:none; }
  body.shell-ready:not(.locked) > main { width:100%; margin:0; padding:22px 16px calc(90px + env(safe-area-inset-bottom)); }
  body.shell-ready > header { margin:0; border-radius:0; }
  body.shell-ready > header .toolbar { display:none; }
  body.shell-ready .app-brand h1 { font-weight:600; }
  body.shell-ready .mobile-nav button.active { color:var(--accent); }
  #mobilePanel .mobile-menu-list .shell-menu-items { grid-template-columns:minmax(0,1fr); }
  #mobilePanel .shell-menu-items button { min-height:42px; }
  .console-welcome { padding:4px 0 24px; }
  .console-welcome h2 { font-size:28px; margin-bottom:22px; }
  .console-welcome-grid { gap:16px; }
  .console-command strong { font-size:13px; }
  .console-command kbd { display:none; }
  .login-content { width:min(100% - 32px,560px); grid-template-columns:1fr; margin:24px auto; }
  .login-intro { min-height:0; padding:28px; }
  .login-intro h1 { font-size:30px; }
  .login-lede { margin-bottom:0; font-size:13px; }
  .login-capabilities,.login-status { display:none; }
  .login-access-panel { padding:30px; }
}
@media (max-width:640px) {
  .console-welcome-grid { grid-template-columns:minmax(0,1fr); gap:20px; }
  .console-welcome-grid section > button { min-height:58px; }
  .console-command { padding-inline:13px; }
  body.shell-ready #mobilePanel { width:100%; padding-inline:18px; }
  #mobilePanel .control-bar { grid-template-columns:minmax(0,1fr) !important; }
  #mobilePanel .control-bar :is(input,select,button) { font-size:16px; height:44px; }
  .login-controls select { max-width:120px; font-size:11px; }
  .login-wordmark small { display:none; }
  .login-wordmark { font-size:14px; }
  .login-topbar { padding-inline:16px; }
  .login-field input { font-size:16px; }
  body.shell-ready :is(.mpls-heading,.sdwan-heading) { padding:20px; }
  body.shell-ready :is(.mpls-heading h2,.sdwan-heading h2) { font-size:23px; }
}
@media print {
  body.shell-ready:not(.locked) > main { margin:0; width:100%; padding:0; }
  body.shell-ready > :is(header,.shell-sidebar,.mobile-nav,#mobilePanel) { display:none !important; }
}

/* Labeled control groups, 2026-09-21. */
body.shell-ready #mobilePanel[data-kind="controls"] { width:min(480px,100%); padding-inline:24px; }
#mobilePanel[data-kind="controls"] .mobile-panel-head { min-height:68px; margin-bottom:14px; }
#mobilePanel[data-kind="controls"] .shell-control-description { margin-bottom:20px; font-size:12px; }
body.shell-ready #mobilePanel .control-bar { display:flex; flex-direction:column; gap:18px; }
#mobilePanel .shell-control-section { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:0; padding:0 0 18px; border:0; border-bottom:1px solid var(--line); background:transparent; box-shadow:none; border-radius:0; }
#mobilePanel .shell-control-section h3 { grid-column:1/-1; display:flex; align-items:center; gap:8px; margin:0 0 2px; font-size:12px; font-weight:650; color:var(--text); }
#mobilePanel .shell-control-section h3::before { content:""; width:3px; height:12px; border-radius:2px; background:var(--nav-active); }
#mobilePanel .shell-control-field { display:flex; flex-direction:column; gap:6px; min-width:0; }
#mobilePanel .shell-control-field > label { display:block; margin:0; font-size:11px; font-weight:500; line-height:1.4; color:var(--muted); }
#mobilePanel .shell-control-wide, #mobilePanel .shell-control-section > :is(#interfaceTools,#partnerRouterBadge) { grid-column:1/-1; }
#mobilePanel .shell-control-field > :is(select,input,button,.custom-select) { width:100%; margin:0; }
#mobilePanel .control-bar :is(input,select,button) { border-radius:8px; font-size:12px; height:40px; min-height:40px; }
#mobilePanel .control-bar :is(select,input,.custom-select-button):hover { border-color:var(--muted); }
#mobilePanel .control-bar #refreshBtn { font-weight:600; }
#mobilePanel .control-bar #refreshBtn:hover { filter:brightness(.96); }
#mobilePanel .shell-control-account { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 0 4px; }
body.shell-ready:not(.locked) #mobilePanel .shell-control-account #currentAccount { border:0; padding:0; margin:0; min-height:38px; font-size:12px; }
body.shell-ready:not(.locked) #mobilePanel .shell-control-account #logoutBtn { width:auto; min-width:88px; margin:0; color:var(--down); background:transparent; }
@media (max-width:480px) {
  body.shell-ready #mobilePanel[data-kind="controls"] { padding-inline:18px; }
  #mobilePanel .control-bar :is(input,select,button) { font-size:16px; height:44px; min-height:44px; }
  #mobilePanel .shell-control-section { gap:12px 10px; }
  #mobilePanel .shell-control-field > label { font-size:12px; }
}
@media (max-width:359px) {
  #mobilePanel .shell-control-section { grid-template-columns:minmax(0,1fr); }
}