/* VPN Control: calm, high-contrast operator workspace.
   Existing layout hooks and functional components remain intact. */
:root {
  --console-canvas: #f4f6f8;
  --console-surface: #ffffff;
  --console-ink: #19252d;
  --console-muted: #5c6b76;
  --console-line: #dce3e8;
  --console-accent: #147660;
  --console-accent-soft: #e7f3ed;
  --console-sidebar: #142229;
  --bg: var(--console-canvas); --bg-soft: #edf1f4;
  --surface-1: #fff; --surface-2: #f6f8fa; --surface-3: #edf2f5;
  --border: var(--console-line); --border-strong: #b6c5cf;
  --text: var(--console-ink); --muted: var(--console-muted); --muted-soft: #63737f;
  --primary: var(--console-accent); --success: #147660; --warn: #98600c; --danger: #b23946;
  --v4-bg: var(--console-canvas); --v4-bg-2: #f0f4f6;
  --v4-surface: #fff; --v4-surface-2: #f6f8fa; --v4-surface-3: #edf2f5;
  --v4-border: var(--console-line); --v4-border-strong: #b6c5cf;
  --v4-text: var(--console-ink); --v4-text-2: #405361; --v4-muted: #5c6b76; --v4-muted-2: #63737f;
  --v4-blue: #147660; --v4-cyan: #147660; --v4-indigo: #147660; --v4-violet: #147660;
  --v4-primary: #147660; --v4-green: #147660; --v4-orange: #98600c; --v4-yellow: #98600c; --v4-red: #b23946;
  --v4-gradient: #147660; --v4-gradient-cool: #147660; --v4-gradient-warm: #98600c;
  --v4-shadow: 0 2px 6px #14222906; --v4-glow: none;
  --v6-bg: var(--console-canvas); --v6-bg-elevated: #edf2f5;
  --v6-surface: #fff; --v6-surface-2: #f6f8fa; --v6-surface-3: #edf2f5;
  --v6-border: var(--console-line); --v6-border-soft: #e4eaee;
  --v6-text: var(--console-ink); --v6-text-2: #405361; --v6-text-3: #5c6b76;
  --v6-blue: #147660; --v6-cyan: #147660; --v6-violet: #147660;
  --v6-green: #147660; --v6-amber: #98600c; --v6-red: #b23946;
  --v6-radius: 12px; --v6-radius-sm: 8px; --v6-radius-lg: 16px;
  --v6-focus: 0 0 0 3px #14766033;
  --bs-body-color: #19252d; --bs-body-bg: #f4f6f8; --bs-secondary-color: #5c6b76;
  --bs-border-color: #dce3e8; --bs-link-color: #147660; --bs-link-hover-color: #105d4d;
}
html { color-scheme: light; }
body.app-shell { background: var(--console-canvas) !important; color: var(--console-ink) !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-size: 14px; letter-spacing: -.015em; }
body.app-shell::before { display: none; }
body.app-shell a { color: var(--console-accent); }
body.app-shell a:hover { color: #105d4d; }
body.app-shell .app-layout { background: var(--console-canvas); min-height: 100dvh; }
body.app-shell .sidebar { background: var(--console-sidebar) !important; border-color: #ffffff0d !important; width: 232px; padding: 0 !important; backdrop-filter: none; }
body.app-shell .brand { padding: 0 22px; min-height: 88px; color: #f4f8f9; gap: 12px; }
body.app-shell .brand:hover { color: #fff; }
body.app-shell .brand-mark { width: 34px; height: 34px; background: #91d8b8; color: #142e26; border: 0; border-radius: 10px; box-shadow: none; font-size: 19px; font-weight: 800; }
body.app-shell .brand-label { font-size: 16px; letter-spacing: -.04em; }
body.app-shell .sidebar-section { color: #a2b4bd; margin: 23px 24px 9px; font-size: 10px; letter-spacing: .12em; }
body.app-shell .sidebar .nav { padding: 0 12px; gap: 4px; }
body.app-shell .sidebar .nav-link, body.app-shell .sidebar-system summary { color: #c0cdd3; border-radius: 8px; min-height: 44px; font-size: 13px; font-weight: 500; }
body.app-shell .sidebar .nav-link:hover, body.app-shell .sidebar-system summary:hover { background: #ffffff0b; color: #fff; }
body.app-shell .sidebar .nav-link.active { color: #b4edcf; background: #8cd8b51c; border-color: #8cd8b51f; font-weight: 650; }
body.app-shell .sidebar-account { border-color: #ffffff1a; padding: 16px 10px; margin: auto 12px 0; }
body.app-shell .sidebar-account-name { color: #e7eef1; }
body.app-shell .sidebar-account-role { color: #a2b4bd; }
body.app-shell .sidebar-account-avatar { color: #d1e7dd; background: #2b4249; border-color: #ffffff1a; }
body.app-shell .sidebar-account-logout { color: #b5c7d0; }
body.app-shell .sidebar-system { border-color: #ffffff14; }
body.app-shell .topbar { min-height: 74px; padding: 0 32px; background: #ffffffed; border-color: var(--console-line) !important; backdrop-filter: blur(12px); }
body.app-shell .sidebar-toggle { background: #fff; color: #52616d; border-color: var(--console-line); border-radius: 8px; }
body.app-shell .topbar-title { color: var(--console-ink); font-size: 14px; }
body.app-shell .topbar-subtitle, body.app-shell .topbar-user-role { color: var(--console-muted); }
body.app-shell .topbar-user-name { color: var(--console-ink); }
body.app-shell .topbar-user-avatar { color: #22674f; background: #e7f3ed; border: 1px solid #d2e8dd; }
body.app-shell .content { max-width: 1480px; padding: 32px 32px 56px !important; }
body.app-shell .page-kicker, body.app-shell .v4-panel-eyebrow, body.app-shell .v4-product-eyebrow { color: #557166; font-size: 10px; letter-spacing: .12em; }
body.app-shell .v4-page-hero h1, body.app-shell .v4-form-hero h1, body.app-shell .v4-detail-title-line h1 { color: var(--console-ink); font-size: clamp(27px, 2.8vw, 34px); font-weight: 700; letter-spacing: -.045em; }
body.app-shell .v4-hero-copy { color: var(--console-muted); max-width: 680px; font-size: 13px; line-height: 1.7; }
body.app-shell .btn { border-radius: 8px; min-height: 40px; font-size: 12px; font-weight: 600; box-shadow: none !important; }
body.app-shell .btn-primary { background: var(--console-accent) !important; border: 1px solid var(--console-accent); color: #fff !important; }
body.app-shell .btn-primary:hover { background: #105d4d !important; transform: none; filter: none; }
body.app-shell .btn-outline-primary, body.app-shell .btn-outline-secondary { color: #405361; background: #fff; border-color: #cfd9df; }
body.app-shell .btn-outline-primary:hover, body.app-shell .btn-outline-secondary:hover { color: #19252d; background: #edf3f0; border-color: #a7beb2; }
body.app-shell :focus-visible { outline: 2px solid #147660 !important; outline-offset: 3px; box-shadow: none !important; }
body.app-shell .form-control, body.app-shell .form-select, body.app-shell .v4-search-box, body.app-shell .v4-search-box input { color: var(--console-ink) !important; background-color: #fff !important; border-color: #ccd7de !important; font-size: 13px; }
body.app-shell input::placeholder, body.app-shell textarea::placeholder { color: #667784; opacity: 1; }
body.app-shell .form-control:focus, body.app-shell .form-select:focus { box-shadow: var(--v6-focus); border-color: #147660 !important; }
body.app-shell .form-label, body.app-shell .v4-form-label { color: #405361; font-size: 12px; }
body.app-shell .form-text, body.app-shell .text-secondary { color: var(--console-muted) !important; }
body.app-shell .form-select { color-scheme: light; }
body.app-shell .card, body.app-shell .v4-panel, body.app-shell .v4-kpi-card, body.app-shell .v4-system-panel, body.app-shell .v4-form-card, body.app-shell .v4-detail-panel, body.app-shell .v4-management-panel, body.app-shell .v4-server-card, body.app-shell .v4-customer-table-panel, body.app-shell .v4-context-card, body.app-shell .v6-config-panel, body.app-shell .v6-policy-panel, body.app-shell .v6-summary-card { border: 1px solid var(--console-line) !important; border-radius: 12px !important; background: var(--console-surface) !important; box-shadow: 0 2px 3px #14222903 !important; }
body.app-shell .v4-panel:hover, body.app-shell .v4-kpi-card:hover, body.app-shell .v4-server-card:hover { border-color: #bfcec7 !important; }
body.app-shell .v4-kpi-grid { gap: 16px !important; }
body.app-shell .v4-kpi-card { padding: 20px !important; min-height: 144px !important; }
body.app-shell .v4-kpi-value { color: var(--console-ink) !important; font-size: 36px !important; font-weight: 650 !important; font-variant-numeric: tabular-nums; }
body.app-shell .v4-kpi-value span { color: #687c87; font-size: 20px; }
body.app-shell .v4-kpi-label, body.app-shell .v4-kpi-meta { color: var(--console-muted) !important; font-size: 12px; }
body.app-shell .v4-kpi-icon { background: #edf4f0 !important; border: 0 !important; color: #266b53 !important; border-radius: 8px; }
body.app-shell .v4-kpi-card.has-alert { border-top: 3px solid #d6a54d !important; }
body.app-shell .v4-panel-head, body.app-shell .v4-system-panel-head, body.app-shell .v4-form-card-head { padding: 20px 22px !important; border-bottom: 1px solid #e6ecef !important; }
body.app-shell .v4-panel-head h2, body.app-shell .v4-system-panel-head h2, body.app-shell .v4-form-card-head h2, body.app-shell .v4-customer-table-head h2 { color: var(--console-ink); font-size: 16px !important; font-weight: 650; letter-spacing: -.025em; }
body.app-shell .v4-panel-head a { color: #147660; font-size: 12px; }
body.app-shell .v6-dashboard-primary { grid-template-columns: minmax(0, 1.25fr) minmax(300px, 1fr); gap: 20px; margin-top: 24px; }
body.app-shell .v6-dashboard-secondary { gap: 20px; margin-top: 20px; }
body.app-shell .v4-attention-copy strong, body.app-shell .v4-infra-copy strong, body.app-shell .v6-feed-copy strong, body.app-shell .v4-empty-state strong { color: #243945; font-size: 13px; }
body.app-shell .v4-attention-copy span, body.app-shell .v4-infra-copy span, body.app-shell .v6-feed-copy small, body.app-shell .v4-empty-state span { color: var(--console-muted); font-size: 12px; }
body.app-shell .v4-attention-row { padding: 16px 22px; min-height: 74px; background: #fff; }
body.app-shell .v4-attention-row:hover, body.app-shell .v6-feed-row:hover { background: #f5f9f7; }
body.app-shell .v4-count-pill { color: #735314; background: #fcf3db; border: 1px solid #eedcae; }
body.app-shell .v4-row-arrow { color: #6a8076; }
body.app-shell .v4-infra-orb { background: #edf7f0 !important; border: 1px solid #c4e0ce !important; box-shadow: none !important; color: #147660 !important; }
body.app-shell .v4-infra-orb.is-warning { background: #fff7e7 !important; border-color: #e9d4a2 !important; color: #8d5c0d !important; }
body.app-shell .v4-infra-orb.is-danger { background: #fff0f0 !important; border-color: #eabec4 !important; color: #a83441 !important; }
body.app-shell .v4-infra-orb span, body.app-shell .v4-infra-orb small { color: inherit !important; }
body.app-shell .v4-infra-breakdown > div { background: #f7f9fa; border-color: #e1e8ec; color: #4a606d; }
body.app-shell .v4-infra-breakdown strong, body.app-shell .v4-sync-note strong, body.app-shell .v6-dashboard-health strong { color: #263e4b; }
body.app-shell .v4-sync-note, body.app-shell .v6-dashboard-health { background: transparent; color: var(--console-muted); border-color: var(--console-line); }
body.app-shell .v6-feed-row { border-color: #e6ecef; padding: 16px 22px; }
body.app-shell .v6-feed-dot, body.app-shell .v6-feed-dot.is-violet { background: #5a9e80; box-shadow: 0 0 0 5px #edf6f0; }
body.app-shell .v4-status-pill, body.app-shell .v4-server-status, body.app-shell .badge { font-size: 11px !important; font-weight: 600 !important; }
body.app-shell .v4-status-pill.is-success, body.app-shell .v4-server-status.is-success { color: #1d694e !important; background: #e9f5ee !important; border-color: #cce5d7 !important; }
body.app-shell .v4-status-pill.is-warning, body.app-shell .v4-server-status.is-warning { color: #805200 !important; background: #fff5df !important; border-color: #ead7a7 !important; }
body.app-shell .v4-status-pill.is-danger, body.app-shell .v4-server-status.is-danger { color: #a23240 !important; background: #fff0f1 !important; border-color: #ebc6cb !important; }
body.app-shell .v4-status-pill.is-neutral, body.app-shell .v4-server-status.is-neutral { color: #536672 !important; background: #edf2f5 !important; border-color: #d5dfe5 !important; }
body.app-shell .v4-customer-toolbar { background: transparent; border: 0; padding: 0 !important; margin-bottom: 24px; }
body.app-shell .v4-customer-table-head { padding: 20px 22px; background: #fff; border-color: #e4eaee; }
body.app-shell .v4-customer-table-head > span { color: #5c6b76; }
body.app-shell .v4-customer-table thead th, body.app-shell .v4-system-table thead th { background: #f7f9fa !important; color: #596f7c !important; border-color: #e1e8ec !important; font-size: 10px !important; font-weight: 650 !important; padding: 14px 18px !important; letter-spacing: .06em !important; }
body.app-shell .table { --bs-table-color: #263e4b; --bs-table-bg: transparent; --bs-table-border-color: #e4eaee; --bs-table-striped-bg: #f7f9fa; color: #263e4b; }
body.app-shell .v4-customer-row td, body.app-shell .v4-system-table tbody td { color: #405361; border-color: #e7edf0 !important; padding: 16px 18px !important; }
body.app-shell .v4-customer-row:hover td { background: #f6faf7 !important; }
body.app-shell .v4-customer-name { color: #243945 !important; font-size: 13px !important; }
body.app-shell .v4-customer-email, body.app-shell .v4-access-cell small, body.app-shell .v4-number-cell small { color: #5c6b76 !important; font-size: 11px !important; }
body.app-shell .v4-customer-avatar, body.app-shell .v4-detail-avatar { background: #eaf1ed; border-color: #d9e6de; color: #3c6954; }
body.app-shell .v4-customer-chip, body.app-shell .v4-system-chip, body.app-shell .v4-filter-details summary { color: #526773; background: #fff; border-color: #d6e0e5; border-radius: 7px; font-size: 12px; }
body.app-shell .v4-customer-chip.active, body.app-shell .v4-system-chip.active { color: #14644e; background: #e4f1e9; border-color: #bddbc9; }
body.app-shell .v4-customer-chip span, body.app-shell .v4-total-badge { color: #48665a; background: #e6ede9; border-color: #d5e1da; }
body.app-shell .v4-filter-popover { background: #fff; border-color: #cfdbe1; box-shadow: 0 12px 32px #14222918; }
body.app-shell .v4-filter-popover label > span { color: #405361; }
body.app-shell .v4-server-card-title, body.app-shell .v4-server-stat-value, body.app-shell .v4-number-cell strong, body.app-shell .v4-access-cell strong { color: #243945; }
body.app-shell .v4-server-card-addresses, body.app-shell .v4-server-stat-label, body.app-shell .v4-server-stat-note { color: var(--console-muted); }
body.app-shell code { color: #3f655c; background: #edf4f0; border-radius: 4px; }
body.app-shell pre { background: #f0f4f6; color: #29414e; border: 1px solid #d8e2e8; }
body.app-shell .v4-server-card-stats, body.app-shell .v4-server-stat { background: #fafcfc; }
body.app-shell .v4-server-card-health-note, body.app-shell .v4-inline-warning, body.app-shell .v6-policy-note { color: #815b1d; background: #fff8e9; border-color: #eeddb6; }
body.app-shell .v4-detail-tabs, body.app-shell .v6-settings-tabs { background: #e9eef1 !important; border-color: #d9e2e7 !important; }
body.app-shell .v4-detail-tabs a, body.app-shell .v6-settings-tab { color: #546c78 !important; }
body.app-shell .v4-detail-tabs a.active, body.app-shell .v6-settings-tab[aria-selected="true"] { color: #195e49 !important; background: #fff !important; }
body.app-shell .v4-settings-kv > div, body.app-shell .v6-context-item { background: #f6f8fa !important; border-color: #dce5e9 !important; }
body.app-shell .v6-context-item strong, body.app-shell .v6-step-head h2, body.app-shell .v6-product-card h3, body.app-shell .v6-summary-card h3, body.app-shell .v6-summary-row strong { color: #263e4b; }
body.app-shell .v6-product-card { background: #fff; }
body.app-shell .v6-product-card.is-selected { background: #edf7f1; border-color: #91bba2; box-shadow: none; }
body.app-shell .v6-product-symbol, body.app-shell .v6-product-card.is-selective .v6-product-symbol, body.app-shell .v6-product-card.is-alt .v6-product-symbol, body.app-shell .v6-step-number { background: #eaf2ed; color: #23654d; border-color: #c9dfd1; }
body.app-shell .v6-product-card p, body.app-shell .v6-product-state, body.app-shell .v6-context-item span, body.app-shell .v6-summary-row, body.app-shell .v6-policy-note span { color: #5c6b76; }
body.app-shell .alert { background: #edf5f1; color: #285d4b; border-color: #c8ded2; }
body.app-shell .alert-danger { color: #9c2638; background: #fff0f2; border-color: #ecc1ca; }
body.app-shell .alert-warning { color: #815b1d; background: #fff8e9; border-color: #eeddb6; }
body.app-shell .mobile-bottom-nav { background: #fff !important; border-color: #dce5e9 !important; box-shadow: 0 -4px 20px #14222907; }
body.app-shell .mobile-nav-item { color: #526773; }
body.app-shell .mobile-nav-item.active { background: #edf6f0; color: #14644e; }
body.app-shell .mobile-nav-create .mobile-nav-icon { color: #fff; background: #147660; border-radius: 10px; box-shadow: none; }
/* Sign-in is its own focused surface, including for an already signed-in user. */
body.app-auth-shell { padding: 0; }
body.app-auth-shell #mainContent { min-height: 100dvh; max-width: none; padding: 0 !important; display: grid; place-items: center; }
.console-login { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 440px); align-items: center; width: min(1060px, calc(100% - 64px)); gap: clamp(48px, 8vw, 112px); padding: 64px 0; }
.console-login-brand { display: inline-flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 700; color: #1c343e; }
.console-login-mark { display: grid; place-items: center; height: 40px; width: 40px; background: #142229; color: #a4e5c2; border-radius: 12px; font-size: 23px; font-weight: 800; }
.console-login-intro .console-login-title { margin: 56px 0 20px; max-width: 440px; font-size: clamp(36px, 4.2vw, 52px); line-height: 1.1; font-weight: 650; letter-spacing: -.055em; color: #192f39; }
.console-login-intro > p { color: #5b707c; max-width: 360px; font-size: 15px; line-height: 1.8; }
.console-login-index { margin-top: 48px; padding-top: 20px; border-top: 1px solid #d5e0e5; display: flex; flex-wrap: wrap; gap: 20px; font-size: 11px; color: #526e61; }
.console-login-index span { display: flex; align-items: center; gap: 7px; }
.console-login-index span::before { content: ''; width: 5px; height: 5px; background: #609c7c; border-radius: 50%; }
.console-login-panel { padding: 40px; background: #fff; border: 1px solid #dce5e9; border-radius: 16px; box-shadow: 0 16px 48px #14222906; }
.console-login-eyebrow { margin: 0 0 14px; color: #577466; font-size: 10px; font-weight: 650; letter-spacing: .13em; text-transform: uppercase; }
.console-login-panel h1 { margin: 0 0 10px; color: #192f39; font-size: 27px; font-weight: 650; letter-spacing: -.04em; }
.console-login-panel > p:not(.console-login-eyebrow) { color: #5b707c; font-size: 13px; line-height: 1.7; margin-bottom: 30px; }
.console-login-panel .auth-input { min-height: 46px; border-radius: 8px; }
.console-login-panel .auth-submit { min-height: 46px; margin-top: 8px; }
.console-login-panel .auth-note { margin: 24px 0 0 !important; padding-top: 20px; border-top: 1px solid #e5ebee; font-size: 11px !important; color: #63737f !important; }
.console-login-panel .auth-password-toggle { min-width: 82px; font-size: 11px; }
@media (min-width: 992px) { body.app-shell .sidebar { height: 100dvh; position: sticky; display: flex; flex-direction: column; } }
@media (max-width: 1199px) { body.app-shell .v6-dashboard-primary { grid-template-columns: 1fr; } }
@media (max-width: 991.98px) { body.app-shell .content { padding: 24px !important; } body.app-shell .sidebar { width: 260px; } .console-login { grid-template-columns: 1fr 1fr; gap: 40px; width: calc(100% - 48px); } .console-login-panel { padding: 28px; } }
@media (max-width: 767.98px) {
  body.app-shell .content { padding: 24px 16px 100px !important; }
  body.app-shell .topbar { padding: 0 16px; min-height: 62px; }
  body.app-shell .v4-kpi-grid { gap: 10px !important; }
  body.app-shell .v4-kpi-card { min-height: 124px !important; padding: 16px !important; }
  body.app-shell .v4-kpi-value { font-size: 29px !important; }
  body.app-shell .v4-kpi-meta { font-size: 11px; }
  body.app-shell .v6-dashboard-secondary { grid-template-columns: 1fr; }
  body.app-shell .v4-panel-head { padding: 18px !important; }
  body.app-shell .v4-customer-row td { padding: 5px 10px 5px 0 !important; }
  body.app-shell .v6-submit-bar { background: #f4f6f8ee; border-top: 1px solid #dce5e9; }
  .console-login { width: min(440px, calc(100% - 32px)); padding: 32px 0; display: block; }
  .console-login-intro .console-login-title, .console-login-intro > p, .console-login-index { display: none; }
  .console-login-brand { margin: 0 0 32px 8px; }
  .console-login-panel { padding: 28px 24px; }
  .console-login-panel h1 { font-size: 25px; }
}
@media (prefers-reduced-motion: reduce) { body.app-shell *, body.app-shell *::before, body.app-shell *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
body.app-shell .console-login-brand { color: #1c343e; text-decoration: none; }
body.app-shell .console-login-panel .auth-label { color: #52616d !important; }
body.app-shell .console-login-panel .auth-password-toggle { color: #405361 !important; background: #f3f6f8 !important; border: 1px solid #ccd7de !important; }
/* Explicitly retire high-specificity visual effects from the legacy theme. */
body.app-shell .sidebar { box-shadow: none !important; }
body.app-shell .brand { min-height: 88px !important; padding: 0 22px !important; }
body.app-shell .brand-mark { color: #142e26 !important; font-size: 19px !important; background: #91d8b8 !important; border: 0 !important; box-shadow: none !important; }
body.app-shell .brand-mark::before, body.app-shell .topbar::after, body.app-shell .v4-kpi-card::before, body.app-shell .v4-kpi-card::after { display: none !important; }
body.app-shell .sidebar-section { color: #a2b4bd !important; }
body.app-shell .sidebar .nav-link { color: #c0cdd3 !important; }
body.app-shell .sidebar .nav-link.active { color: #b4edcf !important; background: #8cd8b51c !important; border-color: #8cd8b51f !important; }
body.app-shell .sidebar-account-role { color: #a2b4bd !important; }
body.app-shell .sidebar-account-logout { color: #b5c7d0 !important; }
body.app-shell .topbar { min-height: 74px !important; height: 74px !important; background: #fff !important; box-shadow: none !important; }
body.app-shell .topbar-title { color: #19252d !important; }
body.app-shell .topbar-subtitle, body.app-shell .topbar-user-role { color: #5c6b76 !important; }
body.app-shell .topbar-user-avatar { background: #e7f3ed !important; color: #22674f !important; border-color: #d2e8dd !important; }
body.app-shell .sidebar-toggle { background: #fff !important; color: #52616d !important; }
body.app-shell .page-kicker { background: none !important; color: #557166 !important; }
body.app-shell .v4-panel-head a, body.app-shell .v6-dashboard-health a { color: #147660 !important; }
body.app-shell .v4-kpi-meta strong { color: #395f50 !important; }
@media (max-width: 767.98px) { body.app-shell .topbar { min-height: 62px !important; height: 62px !important; } }
body.app-shell .btn-outline-primary, body.app-shell .btn-outline-secondary { color: #405361 !important; background: #fff !important; border-color: #cfd9df !important; }
body.app-shell .btn-outline-primary:hover, body.app-shell .btn-outline-secondary:hover { background: #edf3f0 !important; border-color: #a7beb2 !important; }
body.app-shell .v4-customer-chip, body.app-shell .v4-system-chip { color: #526773 !important; }
body.app-shell .v4-customer-chip.active, body.app-shell .v4-system-chip.active { color: #14644e !important; }
body.app-shell .sidebar .nav-link.active { box-shadow: none !important; }
body.app-shell .v4-customer-toolbar { box-shadow: none !important; }
body.app-shell .v4-state-cell small { color: #5c6b76 !important; font-size: 11px; }
body.app-shell .v4-state-cell small.is-success { color: #236f50 !important; }
body.app-shell .v4-state-cell small.is-warning { color: #865b12 !important; }
body.app-shell .v4-servers-overview, body.app-shell .v4-system-filter, body.app-shell .v4-system-empty { background: #fff !important; border-color: #dce3e8 !important; box-shadow: none !important; }
body.app-shell .v4-server-stat-value, body.app-shell .v4-server-stat-value strong, body.app-shell .v4-server-stat-value span, body.app-shell .v4-server-stat-value time { color: #263e4b !important; }
body.app-shell .v4-system-primary, body.app-shell .v4-server-card-addresses .v4-system-mono { color: #3f655c !important; }
body.app-shell .v4-customer-row.is-muted { opacity: 1; }
body.app-shell .mobile-nav-item.active { color: #14644e !important; background: #edf6f0 !important; }
body.app-shell .mobile-nav-item.active::before { display: none; }
@media (max-width: 767.98px) {
  body.app-shell .v4-customer-table tbody { display: grid !important; padding: 12px; gap: 12px; }
  body.app-shell .v4-customer-table tbody tr.v4-customer-row { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "identity identity" "state state" "devices connections" "access access"; gap: 12px; padding: 16px; background: #fff !important; border: 1px solid #dce3e8; box-shadow: none; }
  body.app-shell .v4-customer-table tbody tr.v4-customer-row:hover { background: #f6faf7 !important; }
  body.app-shell .v4-customer-table tbody td { display: block !important; width: auto !important; padding: 0 !important; height: auto; }
  body.app-shell .v4-customer-table tbody td:first-child { padding-right: 28px !important; }
  body.app-shell .v4-customer-table tbody td:last-child { position: absolute; right: 12px; top: 12px; width: 32px !important; }
  body.app-shell .v4-customer-identity { min-width: 0; width: 100%; gap: 10px; }
  body.app-shell .v4-customer-name-wrap { display: block; flex: 1 1 auto; min-width: 0; }
  body.app-shell .v4-customer-name, body.app-shell .v4-customer-email { display: block; max-width: none !important; width: auto !important; white-space: normal !important; overflow-wrap: anywhere; }
  body.app-shell .v4-state-cell { align-items: flex-start; }
  body.app-shell .v4-more-button { opacity: 1; background: #f7f9fa !important; border-color: #dce3e8 !important; color: #526773 !important; }
}
body.app-shell .v4-server-stat-number, body.app-shell .v4-server-pool-value strong, body.app-shell .v4-server-sync-value, body.app-shell .v4-server-sync-value strong, body.app-shell .v4-settings-kv strong, body.app-shell .v4-detail-metric strong, body.app-shell .v4-detail-section-head h2, body.app-shell .v4-detail-section-title h2 { color: #263e4b !important; }
body.app-shell .v4-settings-kv span, body.app-shell .v4-server-stat-meta, body.app-shell .v4-detail-identity p { color: #5c6b76 !important; }
body.app-shell .v4-detail-metric, body.app-shell .v4-ready-state, body.app-shell .v4-device-card, body.app-shell .v4-connection-card, body.app-shell .v4-access-card { background: #fff !important; border-color: #dce3e8 !important; box-shadow: none !important; }
body.app-shell .content h2, body.app-shell .content h3, body.app-shell .v4-current-expiry strong, body.app-shell .v4-cabinet-summary strong, body.app-shell .v4-device-card strong, body.app-shell .v4-device-title-line h3, body.app-shell .v4-detail-metric-copy strong { color: #263e4b !important; }
body.app-shell .v4-connection-item, body.app-shell .v4-device-access-card, body.app-shell .v4-device-advanced-card, body.app-shell .operator-workspace-v4 > section.section-block, body.app-shell .operator-workspace-v4 > section.section-block .border.rounded-3 { background: #f7f9fa !important; border-color: #dce3e8 !important; }
body.app-shell .v4-detail-metric-icon, body.app-shell .v4-device-product-pill, body.app-shell .v4-device-product-pill.is-active { background: #edf4f0 !important; color: #336d53 !important; border-color: #d4e4db !important; box-shadow: none !important; }
body.app-shell .v4-detail-more, body.app-shell .v4-device-more { color: #526773; background: #fff; border-color: #d5dfe5; }
body.app-shell .v4-device-meta, body.app-shell .v4-connection-empty, body.app-shell .v4-connection-card-head p, body.app-shell .v4-detail-metric-copy small, body.app-shell .v4-detail-metric-copy em { color: #5c6b76 !important; }
body.app-shell .v4-detail-alert strong { color: #65717a; }
body.app-shell .content h4, body.app-shell .v4-connection-card-head b, body.app-shell .v4-connection-card-head strong { color: #263e4b !important; }
body.app-shell .v4-settings-field label, body.app-shell .v4-system-field label, body.app-shell .v6-field > label { color: #526773 !important; }
body.app-shell .content label, body.app-shell .content label > span { color: #526773 !important; }
body.app-shell .form-control.is-invalid, body.app-shell .form-select.is-invalid { border-color: #b23946 !important; }
body.app-shell .invalid-feedback { color: #a23240; }

/* Workflow refinement: preserve context and make frequent actions easier to reach. */
body.app-shell .sidebar-close { display: none; }
body.app-shell .console-search-icon { display: none; width: 20px; height: 20px; stroke-width: 1.8; }
body.app-shell .v4-search-box { min-height: 44px; }
body.app-shell .v4-search-box input { font-size: 14px !important; }
body.app-shell .v4-search-submit, body.app-shell .v4-filter-details > summary { min-height: 44px; }
body.app-shell .v4-filter-details > summary .console-filter-label { display: inline; width: auto; height: auto; }
body.app-shell .console-filter-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--console-accent); }
body.app-shell .v4-filter-details[data-filters-active] > summary { border-color: var(--console-accent); }
body.app-shell .v4-filter-popover { max-height: min(520px, calc(100dvh - 180px)); overflow-y: auto; }
body.app-shell .console-result-context { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: -8px 0 16px; color: var(--console-muted); font-size: 13px; }
body.app-shell .console-result-context strong { color: var(--console-ink); overflow-wrap: anywhere; }
body.app-shell .console-reset-link { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 3px; }
body.app-shell .v4-customer-empty .btn { margin-top: 12px; }
body.app-shell .v4-customer-row.is-muted { opacity: 1 !important; }
body.app-shell .v4-customer-row:focus-within { background: var(--console-accent-soft); }
body.app-shell .v4-detail-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; }
body.app-shell .v4-detail-tabs a { display: inline-flex; align-items: center; flex-shrink: 0; min-height: 44px; white-space: nowrap; }
body.app-shell .v4-detail-tabs a:hover, body.app-shell .v4-detail-tabs a:focus-visible { background: var(--console-accent-soft) !important; color: var(--console-accent) !important; }
body.app-shell [id^="customer-"] { scroll-margin-top: 96px; }
@media (max-width: 991.98px) {
  body.app-shell .sidebar-close { display: grid; place-items: center; position: absolute; right: 12px; top: 20px; width: 44px; height: 44px; padding: 10px; border: 1px solid #ffffff26; border-radius: 8px; background: transparent; color: #dce8e3; }
  body.app-shell .sidebar-close svg { width: 22px; height: 22px; stroke-width: 1.7; }
  body.app-shell .sidebar .brand { padding-right: 66px !important; }
  body.app-shell .v4-search-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: start; }
  body.app-shell .v4-filter-details { width: auto; margin: 0; }
  body.app-shell .v4-filter-popover { left: auto; right: 0; width: min(360px, calc(100vw - 48px)); }
}
@media (max-width: 767.98px) {
  body.app-shell .v4-customers-hero { margin-bottom: 16px !important; }
  body.app-shell .v4-customers-hero .page-kicker, body.app-shell .v4-customers-hero .v4-hero-copy { display: none; }
  body.app-shell .v4-customers-hero .v4-hero-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; width: 100%; margin-top: 12px; }
  body.app-shell .v4-customers-hero .btn { width: auto !important; min-height: 44px; padding: 10px 12px !important; font-size: 13px !important; }
  body.app-shell .v4-customer-toolbar { margin-bottom: 16px; }
  body.app-shell .v4-search-row { gap: 8px; }
  body.app-shell .v4-search-box { width: 100%; height: 44px; padding: 0 10px; }
  body.app-shell .v4-search-box input, body.app-shell input.form-control, body.app-shell select.form-select, body.app-shell textarea.form-control { font-size: 16px !important; }
  body.app-shell .v4-search-submit { display: grid; place-items: center; min-width: 44px; width: 44px; height: 44px; padding: 10px !important; }
  body.app-shell .v4-search-submit > span, body.app-shell .v4-filter-details > summary .console-filter-label { display: none; }
  body.app-shell .console-search-icon { display: block; }
  body.app-shell .v4-filter-details > summary { justify-content: center; width: 44px; height: 44px; padding: 10px; position: relative; }
  body.app-shell .console-filter-dot { position: absolute; top: 6px; right: 6px; }
  body.app-shell .v4-filter-popover { width: min(360px, calc(100vw - 32px)); }
  body.app-shell .v4-customer-chips { display: flex; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; gap: 8px; padding: 4px 2px; margin-top: 8px; scrollbar-width: thin; }
  body.app-shell .v4-customer-chip { display: inline-flex; align-items: center; flex: 0 0 auto; min-height: 44px; padding: 10px 12px; white-space: nowrap; font-size: 13px; }
  body.app-shell .v4-customer-table-head { flex-direction: row; align-items: center; padding: 16px; }
  body.app-shell .v4-customer-table-head .v4-panel-eyebrow { display: none; }
  body.app-shell .v4-customer-table-head > span { font-size: 12px; }
  body.app-shell .v4-customer-table tbody tr.v4-customer-row { gap: 10px 12px; }
  body.app-shell .v4-customer-table tbody td:first-child { padding-right: 40px !important; }
  body.app-shell .v4-customer-table tbody td:last-child { width: 44px !important; top: 10px; right: 10px; }
  body.app-shell .v4-more-button { width: 44px; height: 44px; }
  body.app-shell .v4-customer-name { font-size: 14px !important; }
  body.app-shell .v4-customer-email { font-size: 12px !important; }
  body.app-shell .v4-detail-tabs { padding: 4px !important; gap: 4px; }
  body.app-shell .console-result-context { margin: -4px 0 12px; }
  body.app-shell .v4-detail-actions .btn, body.app-shell .v4-detail-more { min-height: 44px; }
}
body.app-shell .dropdown-menu { padding: 6px; background: var(--console-surface) !important; color: var(--console-ink); border: 1px solid var(--console-line) !important; box-shadow: 0 8px 24px #1422291a !important; max-width: calc(100vw - 24px); }
body.app-shell .dropdown-item { display: flex; align-items: center; min-height: 40px; padding: 8px 12px; border-radius: 6px; color: var(--console-ink) !important; font-size: 13px; }
body.app-shell .dropdown-item:hover, body.app-shell .dropdown-item:focus { color: var(--console-accent) !important; background: var(--console-accent-soft) !important; }
body.app-shell .dropdown-item.text-danger, body.app-shell .v4-kpi-meta strong.text-danger { color: var(--danger) !important; }
@media (max-width: 767.98px) { body.app-shell .dropdown-item { min-height: 44px; } }