:root {
  color-scheme: dark;
  --bg: #101418;
  --panel: #151a1f;
  --panel-soft: #11171c;
  --panel-border: rgba(142, 171, 205, .14);
  --panel-border-bright: rgba(142, 171, 205, .28);
  --panel-hover: #1b232b;
  --text: #f6f8fb;
  --muted: #9aa8b8;
  --muted-2: #738191;
  --dim: #738191;
  --accent: #27577c;
  --accent-bright: #4d8dff;
  --accent-soft: rgba(77, 141, 255, .1);
  --accent-deep: #183d59;
  --gold: #20c6b3;
  --topbar: #10161b;
  --warning: #d89b2b;
  --danger: #dc4c4c;
  font-family: "Segoe UI", Arial, sans-serif;
}

html, body { width: 100%; height: 100%; background: var(--bg); }
body { color: var(--text); }
.app-shell { display: block; width: 100%; height: 100%; background: var(--bg); }

.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 30;
  display: flex; flex-direction: column; justify-content: flex-start;
  width: 258px; min-height: 0; overflow-y: auto;
  padding: 27px 16px 17px; border-right: 1px solid var(--panel-border);
  background: #0f1418; box-shadow: none;
}
.sidebar .brand-lockup {
  display: flex; align-items: center; gap: 9px; width: 100%; height: auto;
  padding: 0 8px 25px; border: 0;
}
.brand-mark { width: 45px; height: 45px; flex: 0 0 auto; border: 0; border-radius: 0; background: transparent; }
.brand-mark img { object-fit: contain; }
.product-name { color: #fff; font-size: 17px; font-weight: 800; letter-spacing: 1.7px; }
.product-subtitle { margin-top: 2px; color: #7d8b9b; font-size: 8px; font-weight: 700; letter-spacing: 2.2px; }
.workspace-label { display: flex; align-items: center; gap: 9px; margin: 0 8px 23px; padding: 10px 11px; border: 1px solid var(--panel-border); border-radius: 7px; background: rgba(255,255,255,.018); color: #a8b6c4; font-size: 10px; }
.online-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #5ebd9a; }
.sidebar > nav { display: flex; flex: 1; flex-direction: column; gap: 2px; }
.nav-group { gap: 2px; margin-bottom: 6px; }
.nav-group-label { padding: 18px 13px 8px; color: #5e7285; font-size: 9px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; }
.nav-item, .nav-item.sub {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 40px;
  margin: 2px 0; padding: 0 12px; border: 0; border-left: 2px solid transparent;
  border-radius: 6px; background: transparent; color: var(--muted);
  text-align: left; font-size: 13px; transition: color .16s ease, background .16s ease, border-color .16s ease;
}
.nav-item:hover { background: rgba(255,255,255,.035); color: #fff; }
.nav-item.active { border-left-color: var(--accent-bright); background: var(--accent-soft); color: #fff; }
.nav-item span { display: grid; place-items: center; width: 19px; height: 19px; flex: 0 0 auto; color: #8994a3; font-size: 0; }
.nav-item span::before { content: ''; width: 15px; height: 15px; background: currentColor; -webkit-mask: var(--nav-icon) center / contain no-repeat; mask: var(--nav-icon) center / contain no-repeat; }
.nav-item.active span { color: var(--gold); }
.nav-item[data-page="overview"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 13h6V4H4v9Zm0 7h6v-5H4v5Zm10 0h6v-9h-6v9Zm0-16v5h6V4h-6Z'/%3E%3C/svg%3E"); }
.nav-item[data-page="services"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 3h16v6H4V3Zm2 2v2h2V5H6ZM4 10h16v5H4v-5Zm2 2v1h2v-1H6ZM4 16h16v5H4v-5Zm2 2v1h2v-1H6Z'/%3E%3C/svg%3E"); }
.nav-item[data-page="network"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 13h4l2-7 4 12 2-5h6v-2h-5l-3 1-4-12-4 11H3v2Z'/%3E%3C/svg%3E"); }
.nav-item[data-page="communities"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 11c1.7 0 3-1.3 3-3s-1.3-3-3-3-3 1.3-3 3 1.3 3 3 3ZM8 11c1.7 0 3-1.3 3-3S9.7 5 8 5 5 6.3 5 8s1.3 3 3 3Zm0 2c-2.3 0-7 1.2-7 3.5V19h14v-2.5C15 14.2 10.3 13 8 13Zm8 0c-.3 0-.7 0-1.1.1 1.2.9 2.1 2 2.1 3.4V19h6v-2.5c0-2.3-4.7-3.5-7-3.5Z'/%3E%3C/svg%3E"); }
.nav-item[data-page="accounts"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-4.4 0-8 2.2-8 5v3h16v-3c0-2.8-3.6-5-8-5Z'/%3E%3C/svg%3E"); }
.nav-item[data-page="commerce"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 4H3a2 2 0 0 0-2 2v12c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V6a2 2 0 0 0-2-2ZM3 8V6h18v2H3Zm0 10v-6h18v6H3Z'/%3E%3C/svg%3E"); }
.nav-item[data-page="scanner"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 7h2v10H4V7Zm4-3h2v16H8V4Zm4 5h2v6h-2V9Zm4-4h2v14h-2V5Zm4 3h2v8h-2V8Z'/%3E%3C/svg%3E"); }
.nav-item[data-page="logs"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16v2H4V4Zm0 5h16v2H4V9Zm0 5h16v2H4v-2Zm0 5h10v2H4v-2Z'/%3E%3C/svg%3E"); }
.nav-item[data-page="oracle"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2 1.6 6.4L20 10l-6.4 1.6L12 18l-1.6-6.4L4 10l6.4-1.6L12 2Zm7 14 .8 3.2L23 20l-3.2.8L19 24l-.8-3.2L15 20l3.2-.8L19 16Z'/%3E%3C/svg%3E"); }
.nav-item[data-page="schedules"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 4h-1V2h-2v2H8V2H6v2H5a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3Zm1 15a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-8h16v8Zm0-10H4V7a1 1 0 0 1 1-1h1v2h2V6h8v2h2V6h1a1 1 0 0 1 1 1v2Z'/%3E%3C/svg%3E"); }
.nav-item[data-page="builder"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2 9 5v10l-9 5-9-5V7l9-5Zm0 2.3L6 7.6l6 3.3 6-3.3-6-3.3ZM5 9.3v6.5l6 3.3v-6.5L5 9.3Zm8 9.8 6-3.3V9.3l-6 3.3v6.5Z'/%3E%3C/svg%3E"); }
.nav-item[data-page="settings"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m19.4 13 .1-1-.1-1 2-1.5-2-3.4-2.4 1a8 8 0 0 0-1.7-1L15 3.5h-4L10.7 6c-.6.3-1.2.6-1.7 1L6.6 6 4.5 9.5l2 1.5-.1 1 .1 1-2 1.5 2 3.4 2.4-1a8 8 0 0 0 1.7 1l.4 2.6h4l.4-2.6c.6-.3 1.2-.6 1.7-1l2.4 1 2-3.4-2.1-1.5ZM13 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8Z'/%3E%3C/svg%3E"); }
.sidebar-bottom { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--panel-border); }
.sidebar-bottom .nav-item { margin-bottom: 10px; }
.version { padding: 9px 12px 0; color: #6f8294; font-size: 9px; }
.version strong { display: block; color: #dbe4ec; font-size: 11px; font-weight: 650; text-transform: capitalize; }
.version small { display: block; margin-top: 4px; color: #6f8294; font-size: 9px; text-transform: uppercase; letter-spacing: .35px; }

.titlebar {
  position: fixed; inset: 0 0 auto 258px; z-index: 20;
  display: flex; align-items: center; height: 68px; padding: 0 0 0 38px;
  border-bottom: 1px solid var(--panel-border); background: #10161b;
  -webkit-app-region: drag;
}
.breadcrumb { display: flex; flex-direction: row; align-items: center; gap: 14px; color: #677a8b; font-size: 11px; white-space: nowrap; -webkit-app-region: no-drag; }
.breadcrumb button { padding: 0; border: 0; background: transparent; color: #7f91a2; font: inherit; cursor: pointer; }
.breadcrumb button:hover { color: #dce5ef; }
.breadcrumb strong { color: #b3c0cc; font-weight: 500; }
.breadcrumb span { color: #405264; }
.connection-pill { margin-right: 18px; margin-left: auto; border-color: var(--panel-border); border-radius: 999px; background: rgba(255,255,255,.025); font-size: 8px; letter-spacing: 1px; }
.connection-pill.online { color: #b8d6cb; border-color: var(--panel-border); }
.connection-pill.online span { background: #5ebd9a; box-shadow: none; }
.window-controls { flex: 0 0 auto; }
.web-host .window-controls { display: none; }
.web-host .connection-pill { margin-right: 38px; }

.content { height: 100vh; margin-left: 258px; overflow: auto; padding: 102px 38px 44px; scrollbar-color: #303a44 #101418; }
.page { max-width: 1600px; margin: 0 auto; }
.page-heading { align-items: center; margin-bottom: 29px; }
.page-heading h1 { font-size: 28px; font-weight: 650; letter-spacing: -.5px; line-height: 1.25; }
.page-heading p { margin-top: 10px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.eyebrow { margin-bottom: 8px; color: var(--dim) !important; font-size: 9px !important; font-weight: 700; letter-spacing: 1.5px; }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 8px 13px; border: 0; border-radius: 6px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; }
.button.primary, .button.success { border: 0; background: var(--accent); }
.button.secondary { border: 1px solid var(--panel-border); background: transparent; color: #dce5ef; }
.button.secondary:hover:not(:disabled) { border-color: var(--panel-border-bright); background: rgba(255,255,255,.035); }
.button.danger { border: 1px solid rgba(255,119,119,.18); background: #743232; color: #fff; }
.button.warning { border: 1px solid rgba(216,155,43,.26); background: rgba(216,155,43,.1); color: #e2b86f; }

.panel, .metric-card, .service-card, .service-instance-card { border: 1px solid var(--panel-border); border-radius: 8px; background: var(--panel); box-shadow: none; }
.panel { padding: 0; overflow: hidden; }
.panel-header { min-height: 68px; padding: 18px 22px; border-bottom: 1px solid var(--panel-border); }
.panel-header h2 { color: #edf3f8; font-size: 14px; font-weight: 650; }
.panel-header p { margin-top: 6px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.panel > :not(.panel-header):not(.panel-subheading) { margin-right: 22px; margin-left: 22px; }
.panel > .table-scroll, .panel > .service-summary-list, .panel > .timeline, .panel > .community-grid, .panel > .record-list, .panel > .compact-list, .panel > .active-server-list { margin-right: 0; margin-left: 0; }
.metric-grid { gap: 16px; margin-bottom: 22px; }
.metric-card { min-height: 150px; padding: 21px; }
.metric-label { color: #8192a3; font-size: 10px; font-weight: 600; }
.metric-value { margin: 12px 0 8px; color: #f6f9fc; font-size: 29px; font-weight: 700; letter-spacing: -.7px; }
.metric-state { margin-top: 16px; color: #f6f9fc; font-size: 26px; }
.metric-foot { color: #697b8b; font-size: 9px; }
.meter { background: #202d38; }
.meter i { background: #4f7899; }
.two-column { gap: 22px; margin-top: 0; margin-bottom: 22px; }
.health-panel, .timeline-panel, .recovery-panel, .section-panel, .split-services-panel, .service-console-panel { margin-top: 22px; }
.status-banner { margin-bottom: 22px; border-color: rgba(39,198,178,.17); border-radius: 8px; background: rgba(39,198,178,.07); }
.status-banner.offline { border-color: rgba(220,76,76,.22); background: rgba(220,76,76,.08); }
.status-banner.degraded { border-color: rgba(216,155,43,.22); background: rgba(216,155,43,.08); }
.service-card-grid { gap: 16px; }
.service-card, .service-instance-card { padding: 20px; }
.service-summary, .timeline-item, .host-list div, .metric-list div { border-bottom-color: rgba(145,171,200,.09); }
.grade-card, .telemetry-value, .detail-grid div, .service-instance-card { background: #10151a; border-color: var(--panel-border); }
.detail-grid { background: var(--panel-border); }
.health-badge, .count-pill, .metric-trend { border-radius: 5px; }

input, select, textarea, .json-editor {
  min-height: 40px; border: 1px solid var(--panel-border); border-radius: 6px;
  background-color: #10151a; color: #fff; line-height: 1.35;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
input, textarea, .json-editor { padding: 10px 12px; }
select { appearance: none; padding: 9px 36px 9px 12px; background-image: linear-gradient(45deg, transparent 50%, #8291a1 50%), linear-gradient(135deg, #8291a1 50%, transparent 50%); background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
input::placeholder, textarea::placeholder { color: #6f7e8d; opacity: 1; }
input:focus, select:focus, textarea:focus, .json-editor:focus { border-color: #5d91d6; outline: 0; box-shadow: 0 0 0 2px rgba(77,141,255,.08); }
select option { background: #151a1f; color: #fff; }
.field { color: #8295a6; font-size: 10px; }
.field input, .field select, .field textarea { width: 100%; }
.compact-field input { width: min(320px, 32vw); }

.table-scroll { overflow: auto; }
table { color: #b0bdc9; font-size: 11px; }
th { padding: 13px 22px; border-bottom: 1px solid var(--panel-border); background: #171d23; color: #aebdcc; font-size: 9px; letter-spacing: .65px; }
td { padding: 16px 22px; border-bottom: 1px solid rgba(145,171,200,.09); color: #9cabb9; }
tbody tr:nth-child(even) { background: #171d22; }
tbody tr:hover { background: #1b232b; }
.record-row { padding-right: 22px; padding-left: 22px; border-bottom-color: rgba(145,171,200,.09); }
.record-row.active { background: var(--accent-soft); box-shadow: inset 2px 0 var(--accent-bright); }
.service-console { border-color: #26313a; border-radius: 7px; background: #080b0e; }

/* CAD System Admin content patterns */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat { position: relative; overflow: hidden; min-height: 126px; padding: 21px; border: 1px solid var(--panel-border); border-radius: 8px; background: var(--panel); transition: border-color .16s ease; }
.stat:hover { border-color: var(--panel-border-bright); }
.stat-label { color: #8192a3; font-size: 10px; font-weight: 600; letter-spacing: .15px; }
.stat-value { margin: 12px 0 8px; color: #f6f9fc; font-size: 29px; font-weight: 700; letter-spacing: -.7px; }
.stat-note { color: #697b8b; font-size: 9px; line-height: 1.45; }
.toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.search-shell { display: flex; align-items: center; width: min(430px, 100%); min-width: 280px; min-height: 40px; padding: 0 12px; border: 1px solid var(--panel-border); border-radius: 8px; background: var(--panel); color: var(--muted); transition: border-color .15s ease; }
.search-shell:focus-within { border-color: #4a7fc4; }
.search-icon { position: relative; width: 16px; height: 16px; flex: 0 0 auto; margin-right: 9px; border: 1.5px solid #7d8b9b; border-radius: 50%; }
.search-icon::after { content: ''; position: absolute; right: -4px; bottom: -3px; width: 6px; height: 1.5px; transform: rotate(45deg); border-radius: 2px; background: #7d8b9b; }
.search-shell .search { width: 100%; min-width: 0; min-height: 38px; padding: 10px 0; border: 0; background: transparent; box-shadow: none; }
.search-shell .search:focus { border: 0; box-shadow: none; }
.filter { min-height: 40px; padding: 0 38px 0 13px; border: 1px solid var(--panel-border); border-radius: 6px; background-color: #10151a; color: #fff; cursor: pointer; }
.directory-panel { margin-bottom: 22px; }
.table-wrap { width: 100%; max-width: 100%; overflow: auto; }
.table-wrap table { width: 100%; border-collapse: collapse; white-space: nowrap; }
.table-wrap th { padding: 13px 22px; border-bottom: 1px solid var(--panel-border); background: #171d23; color: #aebdcc; font-size: 9px; font-weight: 700; letter-spacing: .65px; text-align: left; text-transform: uppercase; }
.table-wrap td { padding: 15px 22px; border-bottom: 1px solid rgba(145,171,200,.09); color: #9cabb9; font-size: 11px; vertical-align: middle; }
.table-wrap td strong { display: block; color: #dce5ed; font-weight: 600; }
.table-wrap td small { display: block; max-width: 280px; margin-top: 5px; overflow: hidden; color: #708294; font-size: 9px; text-overflow: ellipsis; }
.table-wrap tbody tr:nth-child(even) { background: #171d22; }
.table-wrap tbody tr:hover, .table-wrap tbody tr.selected { background: #1b232b; }
.table-wrap tbody tr.selected { box-shadow: inset 2px 0 var(--accent-bright); }
.manageable-row { cursor: pointer; }
.empty-cell { height: 160px; color: #708293 !important; text-align: center !important; }
.table-foot { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 12px 22px; border-top: 1px solid var(--panel-border); background: rgba(7,12,17,.2); color: #67798a; font-size: 9px; }
.person { display: flex; align-items: center; gap: 10px; }
.avatar { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 auto; overflow: hidden; border-radius: 50%; background: #252c33; color: #dce5ef; font-size: 11px; font-weight: 700; }
.mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.panel-body { padding: 22px; }
.panel > .panel-body { margin: 0; }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field.full { grid-column: 1 / -1; }
.form-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.management-columns { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0; }
.management-columns > div { min-width: 0; }
.management-columns h3 { padding: 16px 20px; border-bottom: 1px solid var(--panel-border); color: #cbd6df; font-size: 11px; }
.management-columns > div + div { border-left: 1px solid var(--panel-border); }
.json-editor { width: 100%; min-height: 320px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; line-height: 1.55; }
.drawer-stats { grid-template-columns: repeat(3, minmax(0,1fr)); }
.drawer-stats .stat { min-height: 110px; }
.management-drawer-backdrop { position: fixed; inset: 0; z-index: 70; display: flex; justify-content: flex-end; background: rgba(4,7,10,.72); backdrop-filter: blur(3px); }
.management-drawer-backdrop[hidden] { display: none; }
.management-drawer { display: flex; flex-direction: column; width: min(840px, calc(100vw - 258px)); height: 100%; border-left: 1px solid var(--panel-border); background: var(--bg); box-shadow: -24px 0 56px rgba(0,0,0,.38); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 92px; padding: 20px 28px; border-bottom: 1px solid var(--panel-border); background: var(--topbar); }
.drawer-head h2 { color: #f3f7fa; font-size: 21px; }
.drawer-head p { margin-top: 6px; color: #788a9b; font-size: 10px; }
.drawer-head-actions { display: flex; align-items: center; gap: 12px; }
.drawer-close { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--panel-border); border-radius: 6px; background: transparent; color: #9aa8b8; font-size: 21px; }
.drawer-close:hover { border-color: var(--panel-border-bright); background: rgba(255,255,255,.035); color: #fff; }
.drawer-content { flex: 1; overflow: auto; padding: 26px 28px; }
.drawer-content > .panel, .drawer-content > .stats { margin-bottom: 18px; }
body.drawer-open { overflow: hidden; }
.compact-state { font-size: 23px; text-transform: capitalize; }
.overview-stats .meter { margin: 14px 0 11px; }
.analytics-panel { margin-bottom: 22px; }
.panel, .stat, .status-banner { box-shadow:none; border-radius:5px; }
.page-heading { margin-bottom:20px; }
.page-heading h1 { font-size:27px; font-weight:650; letter-spacing:-.4px; }
.stat-value { font-variant-numeric:tabular-nums; }
.product-subtitle { letter-spacing:1.3px; }
.workspace-label { border-radius:4px; color:#a8bdcb; font-size:11px; }
.sidebar .online-dot { background:#5d92b3; }
.status-banner { border-left-width:3px; }
.service-summary { min-height:54px; }
.service-symbol { border-radius:4px; }
.traffic-legend { display: flex; align-items: center; gap: 18px; color: #7f91a2; font-size: 9px; }
.traffic-legend span { display: inline-flex; align-items: center; gap: 7px; }
.traffic-legend i { width: 9px; height: 9px; border-radius: 2px; background: #4d8dff; }
.traffic-legend i.upload { background: #20c6b3; }
.traffic-legend strong { margin-left: auto; color: #9eacb9; font-weight: 600; }
.traffic-chart { display: flex; align-items: flex-end; gap: 5px; height: 150px; margin-top: 18px; padding: 15px 10px 0; border-bottom: 1px solid var(--panel-border); background: repeating-linear-gradient(to bottom, transparent 0, transparent 36px, rgba(142,171,205,.07) 37px); }
.traffic-chart > .empty-state-small { width: 100%; align-self: center; }
.traffic-bar-group { display: flex; align-items: flex-end; justify-content: center; gap: 2px; min-width: 7px; height: 100%; flex: 1; }
.traffic-bar-group i { display: block; width: 44%; max-width: 10px; min-height: 2px; border-radius: 2px 2px 0 0; background: #4d8dff; }
.traffic-bar-group i.upload { background: #20c6b3; }
.chart-axis { display: flex; justify-content: space-between; margin-top: 9px; color: #607487; font-size: 8px; }

@media (max-width: 1100px) {
  .stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .management-drawer { width: min(780px, calc(100vw - 226px)); }
}

@media (max-width: 1100px) {
  .sidebar { width: 226px; }
  .titlebar { left: 226px; }
  .content { margin-left: 226px; padding-right: 25px; padding-left: 25px; }
  .service-instance-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 760px) {
  html, body { overflow: auto; }
  .app-shell { display: grid; grid-template: 58px auto 1fr / 1fr; height: auto; min-height: 100%; }
  .titlebar { position: sticky; inset: 0; grid-row: 1; height: 58px; padding-left: 16px; }
  .sidebar { position: static; grid-row: 2; width: 100%; max-height: none; padding: 14px; border-right: 0; border-bottom: 1px solid var(--panel-border); }
  .sidebar .brand-lockup, .workspace-label, .nav-group-label, .sidebar-bottom .version { display: none; }
  .sidebar > nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .nav-group { display: contents; }
  .sidebar-bottom { display: contents; }
  .content { grid-row: 3; height: auto; min-height: 0; margin-left: 0; padding: 25px 18px; }
  .breadcrumb { gap: 8px; font-size: 9px; }
  .connection-pill { margin-right: 10px; }
  .window-controls button { width: 38px; }
  .metric-grid, .grade-grid, .telemetry-grid, .detail-grid, .detail-grid.wide { grid-template-columns: 1fr; }
  .stats, .drawer-stats, .form-grid, .management-columns { grid-template-columns: 1fr; }
  .management-columns > div + div { border-top: 1px solid var(--panel-border); border-left: 0; }
  .management-drawer { width: 100vw; }
  .drawer-head, .drawer-content { padding-right: 18px; padding-left: 18px; }
  .toolbar { align-items: stretch; flex-direction: column; }
  .search-shell { width: 100%; min-width: 0; }
}