/* Shared foundation with hermes-dashboard. Native light-dark() also follows OS changes. */
:root { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
:root {
  --background: light-dark(#f8f9fc, #18191b);
  --foreground: light-dark(#242733, #eef0f5);
  --panel: light-dark(#ffffff, #202124);
  --line: light-dark(#dadbdf, #33353b);
  --muted: light-dark(#666972, #92959e);
  --blue: light-dark(#315fa5, #a9c7ff);
  --violet: light-dark(#7653b0, #b9a5f5);
  --sidebar: light-dark(#f0f2f7, #141517);
  --surface-muted: light-dark(#ededef, #27262d);
  --field: light-dark(#f8f9fc, #19191e);
  --hover: light-dark(#f0f1f2, #24252a);
  --accent-bg: light-dark(#efeef2, #25222e);
  --nav-active: light-dark(#e3e2e9, #2c2937);
  --nav-ink: light-dark(#321d6d, #d5c7fd);
  --action: light-dark(#7250ad, #c6b6f3);
  --on-accent: light-dark(#ffffff, #292332);
  --chart-muted: light-dark(#b4a2d2, #665583);
  --success: light-dark(#407d68, #91c3b2);
  --success-bg: light-dark(#e1ece9, #253a35);
  --info: light-dark(#21497d, #8fb9ef);
  --info-bg: light-dark(#d4dde8, #253346);
  --warning: light-dark(#8a6229, #d8b57b);
  --warning-bg: light-dark(#f5ecdc, #3b3021);
  --pink-ink: light-dark(#93536f, #dfa9bf);
  --pink-bg: light-dark(#f2e4eb, #3c2933);
  --scrim: light-dark(#0006, #0009);
  --shadow: light-dark(#00000014, #00000055);
  --ink: var(--foreground);
  --purple: var(--violet);
  --purple-deep: var(--action);
  --paper: var(--panel);
  --bg: var(--background);
  --green: var(--success);
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
  color:var(--ink);
  background:var(--bg);
  font-family:system-ui, sans-serif;
  font-size:14px;
  -webkit-font-smoothing:antialiased;
}

button,input,select {
  font:inherit;
}

button,a,input,select {
  -webkit-tap-highlight-color:transparent;
}

button {
  cursor:pointer;
}

button {
  color:inherit;
}

button:disabled {
  cursor:default;
}

a {
  color:inherit;
  text-decoration:none;
}

button {
  background:none;
  border:0;
}

button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible {
  outline:2px solid var(--blue);
  outline-offset:4px;
}

h1,h2,h3,p {
  margin:0;
}

h2 {
  font-size:15px;
  font-weight:650;
  letter-spacing:-.3px;
}

h3 {
  font-weight:600;
}

input,select {
  min-width:0;
}

svg {
  flex-shrink:0;
}

small {
  font-size:11px;
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.app-shell {
  min-height:100vh;
}

.sidebar {
  width:240px;
  position:fixed;
  inset:0 auto 0 0;
  background:var(--sidebar);
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  padding:32px 18px 0;
  z-index:40;
}

.brand {
  display:flex;
  align-items:center;
  gap:9px;
  padding:0 9px;
  font-size:27px;
  font-weight:730;
  letter-spacing:-1.2px;
  line-height:1;
}

.brand-symbol {
  color:var(--purple);
  display:flex;
  align-items:center;
}

.brand-sub {
  display:block;
  font-size:9px;
  letter-spacing:1.5px;
  color:var(--muted);
  font-weight:450;
  margin-top:7px;
}

.manage-label {
  font-size:11px;
  font-weight:500;
  letter-spacing:0;
  color:var(--purple);
  border:1px solid var(--line);
  padding:5px 6px;
  border-radius:5px;
  margin-left:0;
  align-self:flex-start;
  margin-top:3px;
}

.workspace-switch {
  border:1px solid var(--line);
  border-radius:9px;
  margin:33px 0 29px;
  padding:12px;
  display:flex;
  gap:10px;
  align-items:center;
  text-align:left;
}

.company-logo {
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--accent-bg);
  color:var(--violet);
  width:34px;
  height:34px;
  position:relative;
  font-size:22px;
  font-weight:750;
  border-radius:7px;
}

.company-logo span {
  position:absolute;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--accent-bg);
  top:6px;
  right:4px;
}

.workspace-switch>span:nth-child(2) {
  flex:1;
}

.workspace-switch strong {
  font-size:12px;
  display:block;
  margin-bottom:5px;
}

.workspace-switch small {
  color:var(--muted);
  font-size:10px;
}

.workspace-switch>svg {
  color:var(--muted);
}

.nav-caption {
  font-size:10px;
  font-weight:550;
  color:var(--muted);
  padding:0 14px;
  margin-bottom:12px;
}

.nav-item {
  display:flex;
  align-items:center;
  gap:11px;
  width:100%;
  height:43px;
  margin-bottom:5px;
  padding:0 13px;
  color:var(--muted);
  font-weight:500;
  text-align:left;
  border-radius:7px;
  font-size:12px;
}

.nav-item.active {
  color:var(--violet);
  background:var(--nav-active);
  font-weight:650;
}

.nav-item:hover:not(.active) {
  background:var(--nav-active);
  color:var(--violet);
}

.nav-item svg {
  width:18px;
  height:18px;
  stroke-width:1.65;
}

.nav-count {
  margin-left:auto;
  font-size:10px;
  padding:3px 6px;
  border-radius:4px;
  color:var(--muted);
  background:var(--surface-muted);
}

.active .nav-count {
  background:var(--nav-active);
  color:var(--violet);
}

.sidebar-bottom {
  margin-top:auto;
  padding-top:40px;
}

.studio-card {
  position:relative;
  overflow:hidden;
  margin:10px 6px 24px;
  padding:20px 17px 16px;
  background:var(--accent-bg);
  border:1px solid var(--line);
  border-radius:10px;
}

.studio-star {
  color:var(--violet);
  position:absolute;
  right:15px;
  top:17px;
}

.studio-card h3 {
  font-size:12px;
  margin-bottom:9px;
}

.studio-card p {
  font-size:11px;
  line-height:1.8;
  color:var(--muted);
}

.studio-card a {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:11px;
  font-weight:600;
  margin-top:16px;
  color:var(--violet);
}

.sidebar-bottom>.nav-item {
  font-size:11px;
}

.sidebar-bottom>.nav-item>svg:last-child:not(:first-child) {
  margin-left:auto;
  width:14px;
}

.profile {
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  gap:10px;
  padding:21px 8px 24px;
  margin-top:17px;
}

.avatar {
  background:var(--accent-bg);
  color:var(--muted);
  width:33px;
  height:33px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  flex-shrink:0;
  font-weight:600;
}

.avatar.small {
  width:27px;
  height:27px;
  font-size:10px;
}

.profile strong {
  display:block;
  font-size:11px;
}

.profile small {
  display:block;
  font-size:9px;
  margin-top:4px;
  color:var(--muted);
}

.profile-role {
  margin-left:auto;
  border:1px solid var(--line);
  border-radius:4px;
  padding:4px 5px;
  font-size:9px;
  color:var(--muted);
}

.main-shell {
  margin-left:240px;
}

.topbar {
  height:74px;
  border-bottom:1px solid var(--line);
  background:var(--background);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 37px;
}

.breadcrumbs {
  display:flex;
  gap:15px;
  align-items:center;
  font-size:11px;
  color:var(--muted);
}

.breadcrumbs>strong {
  font-weight:500;
  color:var(--foreground);
}

.breadcrumbs>svg {
  color:var(--muted);
}

.top-actions {
  display:flex;
  gap:20px;
  align-items:center;
}

.studio-top {
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--muted);
  font-size:10px;
}

.top-divider {
  width:1px;
  height:18px;
  background:var(--line);
}

.icon-button {
  width:30px;
  height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  border-radius:5px;
}

.icon-button:hover {
  background:var(--hover);
  color:var(--muted);
}

.notification-wrap {
  position:relative;
}

.notification-button {
  position:relative;
}

.notification-button>i {
  position:absolute;
  right:5px;
  top:4px;
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--panel);
  border:1px solid var(--line);
}

.notification-popover {
  position:absolute;
  right:-40px;
  top:40px;
  background:var(--panel);
  border:1px solid var(--line);
  box-shadow:0 10px 40px var(--shadow);
  width:280px;
  padding:22px;
  z-index:50;
  border-radius:10px;
}

.notification-popover h3 {
  font-size:14px;
}

.notification-popover p {
  font-size:12px;
  line-height:1.8;
  margin:12px 0;
  color:var(--muted);
}

main {
  max-width:1640px;
  margin:auto;
  padding:37px 38px 0;
}

.page-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:28px;
}

.heading-meta {
  font-size:10px;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:11px;
}

.heading-meta span {
  font-size:9px;
  color:var(--muted);
  padding-left:10px;
  border-left:1px solid var(--line);
}

.page-heading h1 {
  font-size:27px;
  font-weight:680;
  letter-spacing:-1px;
  line-height:1.4;
  margin-bottom:9px;
}

.page-heading p {
  font-size:12px;
  color:var(--muted);
  line-height:1.7;
}

.heading-actions {
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:15px;
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:10px 14px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:6px;
  font-size:11px;
  color:var(--muted);
  white-space:nowrap;
  font-weight:500;
  min-height:36px;
}

.button:hover {
  border-color:var(--line);
  background:var(--hover);
}

.button.primary {
  background:var(--purple);
  color:var(--on-accent);
  border-color:var(--purple);
}

.button.primary:hover {
  background:var(--purple-deep);
}

.date-chip {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  color:var(--muted);
  padding:10px;
  white-space:nowrap;
}

.overview-notice {
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  gap:12px;
  background:var(--accent-bg);
  border:1px solid var(--line);
  padding:15px 19px;
  border-radius:8px;
  margin-bottom:25px;
  color:var(--violet);
  font-size:11px;
  min-height:55px;
}

.overview-notice strong {
  font-weight:600;
  color:var(--violet);
  margin-right:9px;
}

.notice-icon {
  display:flex;
  align-items:center;
  color:var(--muted);
}

.overview-notice button {
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:10px;
  color:var(--violet);
  position:relative;
  z-index:2;
  white-space:nowrap;
  padding:4px 0 4px 12px;
}

.notice-orbit {
  width:155px;
  height:155px;
  position:absolute;
  right:140px;
  top:-48px;
  transform:rotate(-30deg);
  pointer-events:none;
}

.notice-orbit i {
  position:absolute;
  inset:0;
  border:1px solid var(--line);
  border-radius:50%;
}

.notice-orbit i:nth-child(2) {
  inset:20px;
}

.notice-orbit i:nth-child(3) {
  inset:40px;
}

.metrics {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:10px;
  margin-bottom:22px;
  padding:23px 0;
}

.metric {
  padding:0 25px;
  border-right:1px solid var(--line);
}

.metric:last-child {
  border:0;
}

.metric>div {
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:var(--muted);
  font-size:11px;
}

.metric>div>svg {
  color:var(--muted);
}

.metric>strong {
  display:block;
  font-size:32px;
  font-weight:620;
  letter-spacing:-1px;
  margin:14px 0 10px;
  font-variant-numeric:tabular-nums;
}

.metric>strong>small {
  font-size:12px;
  font-weight:400;
  color:var(--foreground);
  margin-left:6px;
}

.metric p {
  font-size:9px;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:5px;
  min-height:15px;
  white-space:nowrap;
}

.metric-separator {
  height:8px;
  width:1px;
  background:var(--panel);
  margin:0 4px;
}

.green-dot {
  width:4px;
  height:4px;
  background:var(--success);
  border-radius:50%;
}

.positive {
  color:var(--success);
}

.warning-link {
  padding:0;
  color:var(--warning);
  display:flex;
  align-items:center;
  gap:3px;
  font-size:9px;
}

.analytics-row {
  display:grid;
  grid-template-columns:minmax(0,1.9fr) minmax(290px,1fr);
  gap:22px;
  margin-bottom:24px;
}

.panel {
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:10px;
  min-width:0;
  overflow:hidden;
}

.panel-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  padding:23px 24px 0;
}

.panel-description {
  font-size:10px;
  line-height:1.8;
  color:var(--muted);
  margin-top:7px;
}

.segmented {
  display:flex;
  padding:3px;
  background:var(--surface-muted);
  border-radius:5px;
  flex-shrink:0;
}

.segmented button {
  font-size:10px;
  padding:5px 10px;
  color:var(--muted);
  border-radius:4px;
}

.segmented button.selected {
  color:var(--muted);
  background:var(--surface-muted);
  box-shadow:0 1px 4px var(--shadow);
}

.chart-summary {
  display:flex;
  align-items:center;
  padding:18px 24px 0;
  gap:14px;
}

.chart-summary>strong {
  font-size:26px;
  font-weight:640;
  letter-spacing:-.7px;
  font-variant-numeric:tabular-nums;
}

.chart-summary>strong small {
  font-size:11px;
  color:var(--foreground);
  margin-left:5px;
  font-weight:400;
}

.chart-summary>.positive {
  font-size:10px;
  display:flex;
  gap:7px;
  align-items:center;
}

.chart-summary>.positive small {
  font-size:9px;
  color:var(--success);
}

.legend {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:9px;
  color:var(--muted);
  margin-left:auto;
}

.legend i {
  height:6px;
  width:6px;
  border-radius:2px;
  background:var(--panel);
}

.chart {
  height:168px;
  display:flex;
  padding:15px 25px 0 24px;
  gap:12px;
}

.y-labels {
  width:23px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  color:var(--muted);
  font-size:8px;
  padding-bottom:24px;
  text-align:right;
}

.plot {
  flex:1;
  position:relative;
  min-width:0;
}

.grid-lines {
  position:absolute;
  inset:0 0 25px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.grid-lines i {
  display:block;
  border-top:1px dashed var(--line);
  width:100%;
}

.bars {
  position:relative;
  display:flex;
  justify-content:space-around;
  height:100%;
  gap:12px;
}

.bar-group {
  width:10%;
  height:100%;
  display:flex;
  align-items:center;
  flex-direction:column;
  padding:0;
  position:relative;
}

.bar-track {
  height:calc(100% - 25px);
  width:100%;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}

.chart-bar {
  width:100%;
  max-width:40px;
  background:var(--chart-muted);
  border-radius:4px 4px 0 0;
  position:relative;
  display:block;
  transition:height .25s;
}

.bar-group:nth-child(2n) .chart-bar {
  background:var(--chart-muted);
}

.bar-group.chosen .chart-bar {
  background:var(--chart-muted);
}

.bar-group:hover .chart-bar {
  background:var(--chart-muted);
}

.bar-tooltip {
  display:none;
  position:absolute;
  top:-26px;
  left:50%;
  transform:translateX(-50%);
  border-radius:4px;
  background:var(--action);
  color:var(--on-accent);
  font-size:8px;
  white-space:nowrap;
  padding:4px 6px;
  z-index:2;
}

.bar-group.chosen .bar-tooltip,.bar-group:hover .bar-tooltip {
  display:block;
}

.x-label {
  font-size:9px;
  color:var(--muted);
  padding-top:10px;
  height:25px;
}

.chart-footnote {
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  padding:11px 24px;
  margin:8px 0 0;
  border-top:1px solid var(--line);
  font-size:9px;
  color:var(--muted);
}

.chart-footnote>span {
  display:flex;
  align-items:center;
  gap:6px;
}

.dot {
  height:4px;
  width:4px;
  border-radius:50%;
  background:var(--panel);
}

.chart-footnote strong {
  font-size:9px;
  font-weight:500;
  color:var(--foreground);
}

.chart-footnote strong span {
  color:var(--foreground);
}

.subtle-tag {
  padding:4px 7px;
  border-radius:4px;
  background:var(--surface-muted);
  color:var(--violet);
  font-size:9px;
  font-weight:500;
  white-space:nowrap;
}

.resources>.panel-description {
  margin:13px 24px 22px;
}

.resource {
  padding:0 24px;
  margin-bottom:23px;
}

.resource>div {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
  font-size:11px;
  color:var(--muted);
}

.resource strong {
  font-size:12px;
  font-weight:600;
  color:var(--foreground);
}

.resource small {
  font-size:10px;
  color:var(--muted);
}

.meter {
  display:block;
  width:100%;
  height:5px;
  background:var(--surface-muted);
  border-radius:8px;
  overflow:hidden;
}

.meter>span {
  height:100%;
  display:block;
  border-radius:8px;
  background:var(--chart-muted);
}

.meter.blue>span {
  background:var(--info);
}

.meter.light>span {
  background:var(--chart-muted);
}

.meter.amber>span {
  background:var(--warning);
}

.resource-link {
  border-top:1px solid var(--line);
  width:calc(100% - 48px);
  margin:0 24px;
  padding:13px 0!important;
  justify-content:space-between;
}

.text-button {
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:10px;
  font-weight:500;
  color:var(--violet);
  padding:2px 0;
}

.text-button:hover {
  color:var(--violet);
}

.operations-row {
  display:grid;
  grid-template-columns:minmax(0,2.65fr) minmax(245px,1fr);
  gap:22px;
}

.inline-heading {
  display:flex;
  align-items:center;
  gap:8px;
}

.count-bubble {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  background:var(--surface-muted);
  font-size:10px;
  font-weight:500;
  min-width:21px;
  height:20px;
  border-radius:5px;
  margin-left:3px;
}

.agent-panel>.panel-heading {
  padding-bottom:20px;
}

.table-scroll {
  overflow-x:auto;
}

table {
  border-collapse:collapse;
  width:100%;
  text-align:left;
  white-space:nowrap;
}

thead {
  background:var(--surface-muted);
}

th {
  font-size:9px;
  color:var(--muted);
  font-weight:500;
  padding:13px 18px;
}

th:first-child,td:first-child {
  padding-left:24px;
}

th:last-child,td:last-child {
  padding-right:20px;
}

td {
  padding:15px 18px;
  border-bottom:1px solid var(--line);
  font-size:11px;
  color:var(--muted);
}

tbody tr:last-child td {
  border:0;
}

tbody tr:hover {
  background:var(--hover);
}

.agent-panel td {
  padding-top:13px;
  padding-bottom:13px;
}

.agent-name {
  display:flex;
  align-items:center;
  gap:11px;
  text-align:left;
  padding:0;
}

.agent-name strong {
  display:block;
  font-weight:550;
  font-size:11px;
  color:var(--foreground);
  margin-bottom:5px;
}

.agent-name small {
  display:block;
  color:var(--muted);
  font-size:8px;
}

.bot-avatar {
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  flex-shrink:0;
  background:var(--accent-bg);
  color:var(--violet);
}

.violet {
  background:var(--accent-bg);
  color:var(--violet);
}

.blue {
  background:var(--info-bg);
  color:var(--info);
}

.pink {
  background:var(--pink-bg);
  color:var(--pink-ink);
}

.orange {
  background:var(--warning-bg);
  color:var(--warning);
}

.green {
  background:var(--success-bg);
  color:var(--success);
}

.person {
  display:flex;
  align-items:center;
  gap:8px;
}

.person>span:last-child {
  display:block;
  font-size:10px;
}

.person strong {
  font-size:11px;
  font-weight:550;
  color:var(--foreground);
}

.person small {
  display:block;
  font-size:8px;
  color:var(--muted);
  margin-top:5px;
}

.status {
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 7px;
  border-radius:4px;
  font-size:9px;
  font-weight:500;
  white-space:nowrap;
  line-height:1.4;
}

.status i {
  width:4px;
  height:4px;
  border-radius:50%;
  background:currentColor;
}

.status.ready {
  color:var(--success);
  background:var(--success-bg);
}

.status.failed {
  color:var(--warning);
  background:var(--warning-bg);
}

.status.stopped {
  color:var(--muted);
  background:var(--surface-muted);
}

.status.provisioning {
  color:var(--violet);
  background:var(--panel);
}

.table-meter {
  display:flex;
  align-items:center;
  gap:8px;
  min-width:91px;
}

.table-meter>.meter {
  width:55px;
  height:4px;
}

.table-meter>span:last-child {
  color:var(--muted);
  font-size:8px;
  min-width:25px;
}

.numeric {
  font-size:10px;
  font-variant-numeric:tabular-nums;
  color:var(--muted);
}

.muted {
  color:var(--muted);
  font-size:9px;
}

.table-footer {
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 24px;
  font-size:9px;
  color:var(--muted);
  gap:12px;
}

.table-footer .text-button {
  font-size:9px;
}

.activity-panel .panel-heading {
  padding:19px 21px 0;
}

.activity-panel h2 {
  font-size:14px;
}

.timeline {
  padding:23px 21px 0;
}

.timeline-item {
  position:relative;
  display:flex;
  gap:11px;
  padding-bottom:24px;
}

.timeline-item:not(:last-child):after {
  content:'';
  position:absolute;
  width:1px;
  background:var(--panel);
  top:30px;
  bottom:1px;
  left:13px;
}

.event-icon {
  width:29px;
  height:29px;
  border-radius:50%;
  background:var(--accent-bg);
  color:var(--muted);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.event-icon.warning {
  background:var(--warning-bg);
  color:var(--warning);
}

.event-icon.member {
  background:var(--info-bg);
  color:var(--info);
}

.event-icon.backup {
  background:var(--success-bg);
  color:var(--success);
}

.timeline h3 {
  font-size:10px;
  font-weight:550;
  color:var(--foreground);
  line-height:1.7;
  margin-top:1px;
}

.timeline p {
  font-size:8px;
  color:var(--muted);
  margin-top:4px;
  line-height:1.6;
}

.timeline time {
  font-size:8px;
  color:var(--muted);
  display:block;
  margin-top:6px;
}

.activity-link {
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  padding:13px 0;
  width:calc(100% - 42px);
  margin:0 21px;
}

.page-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:8px;
  color:var(--muted);
  padding:27px 0 22px;
  gap:15px;
}

.page-footer>span {
  display:flex;
  align-items:center;
  gap:7px;
}

.footer-dot {
  width:2px;
  height:2px;
  background:var(--panel);
  border-radius:50%;
  display:inline-block;
}

.info-strip {
  background:var(--accent-bg);
  border:1px solid var(--line);
  padding:16px 20px;
  display:flex;
  align-items:center;
  gap:11px;
  color:var(--violet);
  font-size:11px;
  border-radius:8px;
  margin-bottom:23px;
}

.info-strip .subtle-tag {
  margin-left:auto;
  background:var(--accent-bg);
}

.list-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:20px 24px;
}

.tabs {
  display:flex;
  gap:19px;
}

.tabs button {
  padding:8px 0;
  font-size:11px;
  color:var(--violet);
  position:relative;
  display:flex;
  align-items:center;
  gap:5px;
}

.tabs button.active {
  color:var(--violet);
  font-weight:600;
}

.tabs button.active:after {
  content:'';
  height:2px;
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  background:var(--nav-active);
}

.tabs button>span {
  font-size:9px;
  background:var(--panel);
  padding:2px 4px;
  border-radius:3px;
}

.search-field {
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--surface-muted);
  border:1px solid var(--line);
  padding:9px 11px;
  border-radius:6px;
  color:var(--muted);
}

.search-field input {
  background:none;
  border:0;
  outline:0!important;
  font-size:10px;
  width:165px;
  color:var(--muted);
}

.search-field:focus-within {
  outline:2px solid var(--line);
}

.search-field input::placeholder {
  color:var(--muted);
}

.empty {
  padding:50px;
  text-align:center;
  color:var(--muted);
  display:flex;
  align-items:center;
  flex-direction:column;
  gap:15px;
}

.empty h3 {
  font-size:15px;
  color:var(--foreground);
}

.empty p {
  font-size:12px;
}

.allocation-panel .panel-heading {
  padding-bottom:24px;
}

.allocation-grid {
  display:grid;
  grid-template-columns:1.8fr 1fr;
  border-top:1px solid var(--line);
}

.allocation-visual {
  padding:25px;
  border-right:1px solid var(--line);
}

.namespace-title {
  display:flex;
  gap:10px;
  align-items:center;
  font-size:12px;
  color:var(--muted);
  margin-bottom:20px;
}

.namespace-title span {
  font-size:10px;
  margin-left:auto;
  color:var(--muted);
}

.pods {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}

.pod {
  border:1px solid var(--line);
  background:var(--surface-muted);
  border-radius:8px;
  padding:16px 8px;
  display:flex;
  align-items:center;
  gap:10px;
  flex-direction:column;
  color:var(--violet);
}

.pod.failed {
  border-color:var(--line);
  background:var(--warning-bg);
}

.pod strong {
  font-size:11px;
  font-weight:550;
  color:var(--violet);
}

.pod>span:last-child {
  display:flex;
  align-items:center;
  gap:4px;
  font-size:8px;
  color:var(--violet);
}

.pod:hover {
  border-color:var(--line);
}

.allocation-explainer {
  padding:31px;
  display:flex;
  justify-content:center;
  flex-direction:column;
}

.allocation-explainer h3 {
  font-size:17px;
  font-weight:600;
  color:var(--foreground);
}

.allocation-explainer p {
  font-size:12px;
  color:var(--muted);
  line-height:1.9;
  margin:13px 0;
}

.allocation-explainer ul {
  list-style:none;
  padding:0;
  margin:12px 0 25px;
  display:flex;
  flex-direction:column;
  gap:15px;
}

.allocation-explainer li {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  color:var(--muted);
}

.allocation-explainer small {
  font-size:9px;
  color:var(--muted);
}

.policy-panel .panel-heading {
  padding-bottom:24px;
}

.policy-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  border-top:1px solid var(--line);
  padding:25px;
}

.policy-row h3 {
  font-size:13px;
  color:var(--foreground);
}

.policy-row p {
  font-size:11px;
  color:var(--muted);
  line-height:1.8;
  margin-top:8px;
}

.switch {
  width:36px;
  height:21px;
  border-radius:20px;
  background:var(--surface-muted);
  flex-shrink:0;
  padding:3px;
  transition:background .2s;
}

.switch>span {
  display:block;
  width:15px;
  height:15px;
  border-radius:50%;
  background:var(--on-accent);
  transition:transform .2s;
}

.switch.on {
  background:var(--action);
}

.switch.on>span {
  transform:translateX(15px);
}

.security-note {
  display:flex;
  align-items:center;
  gap:20px;
  padding:28px;
  color:var(--muted);
}

.security-note h3 {
  font-size:12px;
}

.security-note p {
  font-size:11px;
  line-height:1.8;
  margin-top:7px;
  color:var(--muted);
}

.audit-row {
  display:flex;
  align-items:center;
  gap:15px;
  padding:22px 25px;
  border-top:1px solid var(--line);
}

.audit-row h3 {
  font-size:12px;
  color:var(--foreground);
}

.audit-row p {
  font-size:10px;
  color:var(--muted);
  margin-top:7px;
}

.audit-row>time {
  margin-left:auto;
  color:var(--muted);
  font-size:10px;
}

.settings-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}

.settings-panel {
  padding-bottom:25px;
}

.settings-panel form {
  padding:25px;
  display:flex;
  flex-direction:column;
  gap:23px;
}

.settings-panel label,.modal-form label {
  display:flex;
  flex-direction:column;
  gap:9px;
  font-size:11px;
  color:var(--muted);
}

.settings-panel input,.settings-panel select,.modal-form input,.modal-form select {
  width:100%;
  padding:12px;
  border:1px solid var(--line);
  border-radius:5px;
  background:var(--panel);
  font-size:12px;
  color:var(--foreground);
  min-height:40px;
}

.settings-panel input:disabled {
  background:var(--surface-muted);
  color:var(--foreground);
}

.settings-panel .button.primary {
  align-self:flex-start;
  margin-top:6px;
}

.studio-preview {
  padding:32px 25px;
  color:var(--violet);
}

.studio-preview h3 {
  font-size:17px;
  color:var(--violet);
  margin:18px 0 12px;
}

.studio-preview p {
  font-size:11px;
  line-height:1.9;
  color:var(--violet);
}

.static-label {
  padding:0 25px;
  font-size:11px;
  color:var(--muted);
}

.static-label span {
  display:block;
  padding:13px;
  background:var(--surface-muted);
  border:1px solid var(--line);
  border-radius:5px;
  margin-top:10px;
  font-size:11px;
  color:var(--muted);
}

.settings-panel>.button {
  margin:20px 25px 0;
}

.settings-panel>.form-note {
  padding:0 25px;
  margin-top:17px;
}

.form-note {
  font-size:10px;
  line-height:1.9;
  color:var(--muted);
}

.mobile-menu {
  display:none;
}

.sidebar-overlay {
  display:none;
}

dialog {
  border:1px solid var(--line);
  border-radius:15px;
  padding:0;
  width:min(480px,calc(100% - 32px));
  max-height:90dvh;
  overflow:auto;
  color:var(--ink);
  box-shadow:0 25px 100px var(--shadow);
  background:var(--panel);
}

dialog::backdrop {
  background:var(--scrim);
  backdrop-filter:blur(3px);
}

.modal-heading {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  padding:25px 26px 20px;
  border-bottom:1px solid var(--line);
}

.modal-icon {
  display:flex;
  align-items:center;
  justify-content:center;
  width:43px;
  height:43px;
  border-radius:11px;
  background:var(--accent-bg);
  color:var(--violet);
  margin-bottom:16px;
}

.modal-heading h2 {
  font-size:21px;
  letter-spacing:-.6px;
  color:var(--foreground);
}

.modal-form {
  padding:22px 26px 26px;
  display:flex;
  flex-direction:column;
  gap:20px;
}

.modal-form>p:first-child {
  font-size:11px;
  line-height:1.8;
  color:var(--muted);
}

.form-columns {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px;
}

.modal-actions {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  margin-top:8px;
}

.runtime-option {
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px;
  background:var(--accent-bg);
  border:1px solid var(--line);
  border-radius:7px;
  color:var(--violet);
}

.runtime-option strong {
  font-size:11px;
  font-weight:550;
  color:var(--violet);
}

.runtime-option p {
  font-size:9px;
  color:var(--violet);
  margin-top:5px;
}

.runtime-option>svg:last-child {
  margin-left:auto;
}

.detail-content {
  padding:24px 26px;
}

.detail-subheading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:12px;
  color:var(--muted);
}

.error-message {
  display:flex;
  gap:12px;
  background:var(--warning-bg);
  border:1px solid var(--line);
  padding:15px;
  border-radius:7px;
  margin-top:20px;
  color:var(--warning);
}

.error-message strong {
  font-size:12px;
  font-weight:600;
}

.error-message p {
  font-size:10px;
  color:var(--warning);
  margin-top:7px;
  line-height:1.8;
}

.detail-stats {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:25px;
  margin:25px 0;
}

.detail-stats>div>span:first-child {
  color:var(--muted);
  font-size:10px;
}

.detail-stats strong {
  display:block;
  font-size:28px;
  font-weight:600;
  margin:10px 0;
  color:var(--foreground);
}

.detail-stats small {
  font-size:12px;
  margin-left:3px;
  color:var(--muted);
}

.detail-content>h3 {
  font-size:12px;
  margin:30px 0 15px;
  color:var(--foreground);
}

.detail-list {
  margin:0 0 20px;
}

.detail-list>div {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 0;
  border-bottom:1px solid var(--line);
  font-size:11px;
}

.detail-list dt {
  color:var(--muted);
}

.detail-list dd {
  color:var(--foreground);
  margin:0;
}

.detail-content>.info-strip {
  margin-top:20px;
  font-size:10px;
}

.help-content {
  padding:25px;
  display:flex;
  flex-direction:column;
  gap:22px;
}

.help-content p {
  color:var(--muted);
  font-size:12px;
  line-height:1.9;
}

.help-content h3 {
  font-size:13px;
  color:var(--foreground);
  margin-bottom:8px;
}

.help-content .button {
  align-self:flex-end;
}

.toast {
  position:fixed;
  bottom:28px;
  left:calc(50% + 120px);
  transform:translateX(-50%);
  padding:16px 19px;
  border-radius:8px;
  color:var(--muted);
  background:var(--panel);
  border:1px solid var(--line);
  box-shadow:0 8px 40px var(--shadow);
  display:flex;
  align-items:center;
  gap:11px;
  z-index:100;
  font-size:12px;
  max-width:calc(100vw - 32px);
  width:max-content;
  line-height:1.8;
}

.toast>svg {
  color:var(--muted);
}

.toast>button {
  display:flex;
  color:var(--muted);
  margin-left:12px;
}

select {
  padding:7px;
  border:1px solid var(--line);
  border-radius:5px;
  background:var(--panel);
  color:var(--muted);
  font-size:11px;
}

/* Text retains a quiet hierarchy with sufficient contrast at operational sizes. */
.page-heading p,.panel-description {
  color:var(--muted);
}

.metric>div,.resource>div,.agent-name strong,.person strong {
  color:var(--foreground);
}

.metric p,.table-footer,.page-footer {
  color:var(--muted);
}

.timeline h3 {
  color:var(--foreground);
}

.timeline p,.timeline time {
  color:var(--muted);
}

.status.ready {
  color:var(--success);
}

.status.failed {
  color:var(--warning);
}

.status.stopped {
  color:var(--muted);
}

.status.provisioning {
  color:var(--violet);
}

.nav-caption {
  color:var(--muted);
}

.agent-name small,.person small,th {
  color:var(--muted);
}

.chart-footnote,.x-label,.y-labels,.legend {
  color:var(--muted);
}

.settings-panel label,.modal-form label {
  color:var(--muted);
}

.form-note {
  color:var(--muted);
}

@media(min-width:1700px) {
  body {
    font-size:14px;
  }

  main {
    padding-top:44px;
  }

  .page-heading {
    margin-bottom:34px;
  }

  .metrics {
    padding:28px 0;
    margin-bottom:26px;
  }

  .metric>strong {
    font-size:38px;
  }

  .chart {
    height:200px;
  }

  .chart-panel .panel-heading,.resources .panel-heading {
    padding-top:27px;
  }

  .chart-summary {
    padding-top:22px;
  }

  .resources>.panel-description {
    margin-bottom:30px;
  }

  .resource {
    margin-bottom:30px;
  }

  .agent-panel td {
    padding-top:18px;
    padding-bottom:18px;
  }

  .timeline-item {
    padding-bottom:31px;
  }

}

@media(max-width:1250px) {
  .sidebar {
    width:218px;
    padding-left:12px;
    padding-right:12px;
  }

  .main-shell {
    margin-left:218px;
  }

  .brand {
    font-size:24px;
    gap:7px;
  }

  .brand-symbol svg {
    width:26px;
  }

  .manage-label {
    font-size:9px;
  }

  .topbar {
    padding:0 25px;
  }

  main {
    padding:30px 25px 0;
  }

  .metric {
    padding:0 18px;
  }

  .metric p {
    font-size:8px;
  }

  .metric>div {
    font-size:10px;
  }

  .operations-row {
    grid-template-columns:minmax(0,1fr);
  }

  .activity-panel {
    display:none;
  }

  .analytics-row {
    gap:18px;
  }

  .overview-notice {
    font-size:10px;
  }

  .overview-notice strong {
    margin-right:5px;
  }

  .notice-orbit {
    right:100px;
  }

  .tabs {
    gap:10px;
  }

  .tabs button {
    font-size:10px;
  }

  .search-field input {
    width:135px;
  }

  .toast {
    left:calc(50% + 109px);
  }

}

@media(max-width:1000px) {
  .page-heading {
    align-items:flex-start;
  }

  .heading-actions {
    flex-direction:column;
    align-items:flex-end;
    margin-top:0;
  }

  .date-chip {
    font-size:10px;
    padding:4px;
  }

  .metrics {
    grid-template-columns:repeat(2,1fr);
    row-gap:24px;
  }

  .metric:nth-child(2) {
    border:0;
  }

  .analytics-row {
    grid-template-columns:minmax(0,1.4fr) minmax(250px,1fr);
    gap:15px;
  }

  .panel-heading {
    padding-left:18px;
    padding-right:18px;
  }

  .panel-description {
    font-size:9px;
  }

  .chart-summary {
    padding-left:18px;
    padding-right:18px;
    gap:10px;
  }

  .chart-summary>.positive {
    display:block;
  }

  .chart-summary>.positive small {
    display:block;
    margin-top:5px;
  }

  .chart {
    padding-left:14px;
    padding-right:18px;
  }

  .bars {
    gap:7px;
  }

  .resources>.panel-description {
    margin-left:18px;
    margin-right:18px;
    font-size:9px;
  }

  .resource {
    padding-left:18px;
    padding-right:18px;
  }

  .resource-link {
    margin-left:18px;
    margin-right:18px;
    width:calc(100% - 36px);
  }

  .overview-notice {
    flex-wrap:wrap;
    gap:8px;
    padding:14px;
  }

  .overview-notice>span:nth-child(2) {
    max-width:75%;
    line-height:1.8;
  }

  .overview-notice button {
    margin-left:30px;
  }

  .notice-orbit {
    right:20px;
    top:-20px;
  }

  .list-toolbar {
    flex-wrap:wrap;
    gap:15px;
  }

  .settings-grid {
    grid-template-columns:1fr;
  }

  .allocation-grid {
    grid-template-columns:1fr;
  }

  .allocation-visual {
    border-right:0;
    border-bottom:1px solid var(--line);
  }

  .allocation-explainer {
    padding:25px;
  }

  .allocation-explainer ul {
    margin:10px 0 20px;
  }

  .page-footer {
    flex-wrap:wrap;
    line-height:1.6;
  }

.toast {
    font-size:11px;
  }

  .security-note {
    align-items:flex-start;
  }

  .page-heading h1 {
    font-size:25px;
  }

}

@media(max-width:760px) {
  .sidebar {
    transform:translateX(-100%);
    transition:transform .2s;
    width:240px;
  }

  .sidebar.is-open {
    transform:translateX(0);
  }

  .sidebar-overlay {
    position:fixed;
    inset:0;
    background:var(--scrim);
    z-index:39;
    display:block;
  }

  .main-shell {
    margin-left:0;
  }

  .mobile-menu {
    display:flex;
  }

  .topbar {
    padding:0 16px;
    height:61px;
  }

  .breadcrumbs {
    gap:9px;
    font-size:10px;
  }

  .breadcrumbs>span {
    display:none;
  }

  .breadcrumbs>svg {
    display:none;
  }

  .top-actions {
    gap:12px;
  }

  .studio-top {
    font-size:9px;
  }

  .top-divider {
    display:none;
  }

  main {
    padding:25px 18px 0;
  }

  .heading-meta {
    font-size:9px;
    margin-bottom:8px;
  }

  .heading-meta span {
    font-size:8px;
  }

  .page-heading h1 {
    font-size:25px;
  }

  .page-heading p {
    font-size:11px;
    max-width:270px;
  }

  .page-heading {
    gap:10px;
    margin-bottom:22px;
  }

  .heading-actions>.date-chip {
    display:none;
  }

  .heading-actions>.button {
    font-size:10px;
    padding:9px;
  }

  .heading-actions>.button svg {
    width:14px;
  }

  .overview-notice {
    margin-bottom:18px;
  }

  .overview-notice>span:nth-child(2) {
    font-size:10px;
    max-width:85%;
  }

  .overview-notice strong {
    display:block;
  }

  .overview-notice button {
    margin-left:31px;
    font-size:10px;
  }

  .notice-orbit {
    right:-50px;
  }

  .metrics {
    padding:22px 0;
    row-gap:26px;
    margin-bottom:18px;
  }

  .metric {
    padding:0 18px;
  }

  .metric>strong {
    font-size:30px;
    margin:12px 0 9px;
  }

  .metric p {
    font-size:8px;
  }

  .analytics-row {
    grid-template-columns:1fr;
    gap:18px;
    margin-bottom:18px;
  }

  .chart {
    height:190px;
    padding-left:20px;
    padding-right:24px;
  }

  .chart-summary {
    padding-left:24px;
    padding-right:24px;
  }

  .panel-heading {
    padding:22px 24px 0;
  }

  .chart-summary>.positive {
    display:flex;
    gap:7px;
  }

  .chart-summary>.positive small {
    margin:0;
  }

  .resources>.panel-description {
    margin-left:24px;
  }

  .resource {
    padding-left:24px;
    padding-right:24px;
    margin-bottom:24px;
  }

  .resource-link {
    margin:0 24px;
    width:calc(100% - 48px);
  }

  .operations-row {
    gap:18px;
  }

  .activity-panel {
    display:block;
  }

  .panel-heading h2 {
    font-size:14px;
  }

  .agent-panel th:first-child,.agent-panel td:first-child {
    padding-left:18px;
  }

  th,td {
    padding-left:13px;
    padding-right:13px;
  }

  .table-footer {
    padding:13px 18px;
    font-size:8px;
  }

  .table-footer .text-button {
    font-size:8px;
  }

  .activity-panel .panel-heading {
    padding-left:24px;
    padding-right:24px;
  }

  .timeline {
    padding-left:24px;
    padding-right:24px;
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:18px;
  }

  .timeline-item:after {
    display:none;
  }

  .timeline h3 {
    font-size:10px;
  }

  .activity-link {
    margin:0 24px;
    width:calc(100% - 48px);
  }

  .page-footer {
    padding:22px 0;
    gap:10px;
    font-size:8px;
  }

  .toast {
    left:50%;
    font-size:11px;
    bottom:18px;
  }

  .info-strip {
    padding:14px;
    font-size:10px;
    line-height:1.8;
    align-items:flex-start;
  }

  .info-strip .subtle-tag {
    display:none;
  }

  .list-toolbar {
    padding:17px;
  }

  .tabs {
    width:100%;
    gap:15px;
    overflow:auto;
  }

  .tabs button {
    font-size:10px;
    white-space:nowrap;
  }

  .search-field {
    width:100%;
  }

  .search-field input {
    width:100%;
    font-size:11px;
  }

  .allocation-visual {
    padding:20px 15px;
  }

  .namespace-title {
    font-size:10px;
    gap:6px;
  }

  .namespace-title span {
    font-size:8px;
  }

  .pods {
    grid-template-columns:repeat(2,1fr);
    gap:10px;
  }

  .allocation-explainer h3 {
    font-size:16px;
  }

  .policy-row {
    padding:22px;
  }

  .policy-row h3 {
    font-size:12px;
  }

  .policy-row p {
    font-size:10px;
  }

  .security-note {
    padding:23px 5px;
    gap:13px;
  }

  .security-note p {
    font-size:10px;
  }

  .audit-row {
    padding:18px 16px;
    gap:10px;
  }

  .audit-row h3 {
    font-size:10px;
  }

  .audit-row p {
    font-size:8px;
  }

  .audit-row>time {
    font-size:8px;
    white-space:nowrap;
  }

  .audit-row>.subtle-tag {
    display:none;
  }

  .settings-grid {
    gap:18px;
  }

  .modal-heading {
    padding:22px;
  }

  .modal-heading h2 {
    font-size:20px;
  }

  .modal-form,.detail-content {
    padding:22px;
  }

  .detail-list dd {
    max-width:200px;
    overflow-wrap:anywhere;
    text-align:right;
  }

  .notification-popover {
    right:-40px;
    width:270px;
  }

  .heading-actions {
    margin-top:21px;
  }

  .heading-actions .button {
    min-height:35px;
  }

  .overview-notice>span.notice-orbit {
    max-width:unset;
  }

}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    transition:none!important;
    animation:none!important;
    scroll-behavior:auto!important;
  }

}

/* Operational labels remain readable without overpowering the data. */
.nav-item {
  font-size:13px;
}

.sidebar-bottom>.nav-item {
  font-size:12px;
}

.workspace-switch strong {
  font-size:13px;
}

.workspace-switch small {
  font-size:11px;
}

.profile strong {
  font-size:12px;
}

.profile small {
  font-size:10px;
}

.breadcrumbs {
  font-size:12px;
}

.studio-top {
  font-size:11px;
}

.page-heading p {
  font-size:13px;
}

.overview-notice {
  font-size:12px;
}

.overview-notice button {
  font-size:11px;
}

.metric>div {
  font-size:12px;
}

.metric p {
  font-size:10px;
  white-space:normal;
  flex-wrap:wrap;
  line-height:1.6;
}

.warning-link {
  font-size:10px;
}

.panel-description {
  font-size:11px;
}

.resource>div {
  font-size:12px;
}

.resource small {
  font-size:11px;
}

.resource strong {
  font-size:14px;
}

.text-button {
  font-size:11px;
}

.chart-summary>.positive {
  font-size:11px;
}

.chart-summary>.positive small {
  font-size:10px;
}

.legend,.x-label,.y-labels,.chart-footnote,.chart-footnote strong {
  font-size:10px;
}

.chart-footnote {
  color:var(--muted);
}

th {
  font-size:10px;
}

td {
  font-size:12px;
}

.agent-name strong {
  font-size:12px;
}

.agent-name small {
  font-size:10px;
}

.person>span:last-child {
  font-size:11px;
}

.person small {
  font-size:10px;
}

.status {
  font-size:10px;
}

.table-meter>span:last-child {
  font-size:10px;
}

.numeric {
  font-size:11px;
}

.table-footer {
  font-size:10px;
}

.timeline h3 {
  font-size:11px;
}

.timeline p,.timeline time {
  font-size:10px;
}

.timeline-item {
  padding-bottom:23px;
}

.activity-link {
  font-size:11px;
}

.page-footer {
  font-size:10px;
}

.studio-card h3 {
  font-size:13px;
}

.studio-card p {
  font-size:12px;
}

.studio-card a {
  font-size:12px;
}

.policy-row p {
  color:var(--muted);
}

.settings-panel input,.settings-panel select,.modal-form input,.modal-form select {
  color:var(--foreground);
}

.help-content p {
  color:var(--muted);
}

.allocation-explainer p,.allocation-explainer li {
  color:var(--muted);
}

.table-meter>span:last-child,.resource small {
  color:var(--muted);
}

.resource>div>span:first-child {
  color:var(--muted);
}

@media(max-width:1250px) {
  .metric>div {
    font-size:11px;
  }

  .metric p {
    font-size:9px;
  }

  .metric {
    padding:0 16px;
  }

  .timeline h3 {
    font-size:11px;
  }

  .tabs {
    gap:14px;
  }

  .tabs button {
    font-size:11px;
  }

}

@media(max-width:760px) {
  .nav-item {
    font-size:13px;
  }

  .page-heading p {
    font-size:11px;
  }

  .breadcrumbs {
    font-size:11px;
  }

  .overview-notice {
    font-size:11px;
  }

  .overview-notice>span:nth-child(2) {
    font-size:11px;
  }

  .metric>div {
    font-size:11px;
  }

  .metric p {
    font-size:9px;
  }

  .metric-separator {
    display:none;
  }

  .panel-description {
    font-size:10px;
  }

  .timeline {
    grid-template-columns:1fr;
  }

  .timeline-item {
    padding-bottom:22px;
  }

  .timeline h3 {
    font-size:12px;
  }

  .timeline p,.timeline time {
    font-size:10px;
  }

  .table-footer {
    font-size:9px;
  }

  .page-footer {
    font-size:9px;
  }

  .chart-summary>.positive small {
    font-size:9px;
  }

  .legend {
    font-size:9px;
  }

  .chart-summary {
    gap:10px;
  }

  .chart-footnote {
    font-size:9px;
  }

  .chart-footnote strong {
    font-size:9px;
  }

  .sidebar .studio-card {
    margin-bottom:16px;
  }

  .sidebar-bottom {
    padding-top:20px;
  }

}

/* Keep table accessibility labels inside the horizontal scroll container. */
th { position: relative; }
.sidebar { overflow-y: auto; }
@media(max-width:760px) {
  .page-heading { flex-wrap: wrap; }
  .heading-actions { margin-top: 2px; }
  .page-heading > div:first-child { min-width: 0; }
}
@media(max-width:760px) {
  .sidebar { visibility: hidden; }
  .sidebar.is-open { visibility: visible; }
}

/* Common components follow the Agent Studio draft, with management-specific layout. */
.brand { font-weight:550; letter-spacing:-1px; }
.brand-symbol { color:light-dark(#7050aa, #ddd5ff); }
.brand-sub { letter-spacing:0; }
.sidebar { border-right-color:light-dark(#eaebed, #292a2e); }
.nav-item { color:light-dark(#5e5f69, #9e9fa8); font-size:12px; font-weight:400; }
.nav-item.active { color:var(--nav-ink); background:var(--nav-active); font-weight:500; }
.nav-item:hover:not(.active) { color:var(--foreground); background:var(--hover); }
.nav-count, .active .nav-count {
  background:light-dark(#d7d4dd, #383341);
  color:light-dark(#402e60, #c5b9db);
}
.topbar { height:76px; border-bottom-color:light-dark(#e9eaec, #292a2f); }
.profile > .avatar, .top-actions > .avatar {
  background:light-dark(#4a6137, #c1d2b4);
  color:light-dark(#dbe5d6, #32422a);
}
.page-heading h1 { font-size:29px; font-weight:480; }
h2 { font-weight:500; }
h3 { font-weight:500; }
.metric > strong { font-weight:500; }
.button { border-radius:8px; background:var(--surface-muted); color:light-dark(#474353, #c2bfcb); border-color:light-dark(#c3c3cc, #41414c); }
.button.primary { background:var(--action); color:var(--on-accent); border-color:var(--action); font-weight:550; }
.button.primary:hover { background:var(--action); filter:brightness(1.08); }
.panel { border-radius:12px; }
dialog { background:light-dark(#ffffff, #222228); border-color:light-dark(#c4bfcb, #47414f); border-radius:17px; }
.modal-heading h2 { font-weight:500; color:var(--foreground); }
.modal-icon { color:var(--violet); }
.search-field { background:light-dark(#f4f4f5, #202125); border-color:light-dark(#cdcdd4, #3b3b45); border-radius:9px; }
.settings-panel input, .settings-panel select, .modal-form input, .modal-form select {
  background:var(--field); color:light-dark(#413555, #dfdae7);
  border-color:light-dark(#c4c3cd, #41404c); border-radius:7px;
}
option { background:var(--panel); color:var(--foreground); }
.bar-group.chosen .chart-bar, .bar-group:hover .chart-bar { background:var(--violet); }
.bar-tooltip { background:var(--action); color:var(--on-accent); }
.meter > span { background:var(--violet); }
.meter.blue > span { background:var(--blue); }
.meter.amber > span { background:var(--warning); }
.meter.light > span { background:var(--chart-muted); }
.theme-switcher {
  display:inline-flex; align-items:center; gap:7px; color:var(--muted);
  border:1px solid var(--line); border-radius:7px; padding:7px 9px; flex-shrink:0;
}
.theme-switcher select {
  font-size:11px; color:var(--foreground); background:transparent;
  max-width:85px; padding:0; border:0; cursor:pointer;
}
@media(max-width:760px) {
  .topbar { height:61px; gap:10px; }
  .top-actions { gap:10px; }
  .studio-top { display:none; }
  .breadcrumbs { min-width:0; }
  .breadcrumbs strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .page-heading h1 { font-size:25px; }
  .theme-switcher { padding:7px 6px; gap:4px; }
  .theme-switcher select { font-size:10px; max-width:68px; }
}
@media(max-width:380px) {
  .top-actions > .avatar { display:none; }
}

.settings-dialog {
  width:min(850px, calc(100% - 32px));
}
.settings-dialog .settings-grid {
  padding:24px;
  gap:20px;
}
.settings-dialog .settings-panel {
  padding-bottom:20px;
}
.settings-dialog .modal-actions {
  margin-top:0;
  justify-content:flex-end;
}
.settings-dialog .modal-actions .button {
  margin-top:0;
}
@media(max-width:760px) {
  .settings-dialog .settings-grid {
    padding:18px;
    gap:18px;
  }
}

.language-switcher {
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:var(--muted);
  border:1px solid var(--line);
  border-radius:7px;
  padding:7px 9px;
  flex-shrink:0;
}
.language-switcher select {
  font-size:11px;
  color:var(--foreground);
  background:transparent;
  max-width:86px;
  padding:0;
  border:0;
  cursor:pointer;
}
html[lang="en"] .metric > div { align-items:flex-start; gap:8px; line-height:1.5; }
html[lang="en"] .metric p { min-height:30px; }
html[lang="en"] .metric > strong { letter-spacing:-1px; }
html[lang="en"] .chart-summary { flex-wrap:wrap; row-gap:8px; }
html[lang="en"] .settings-dialog .settings-grid { grid-template-columns:1fr 1.1fr; }
@media(max-width:1000px) {
  html[lang="en"] .settings-dialog .settings-grid { grid-template-columns:1fr; }
  .top-actions { gap:10px; }
  .studio-top { display:none; }
}
@media(max-width:760px) {
  .language-switcher { padding:7px 6px; gap:4px; }
  .language-switcher select { font-size:10px; max-width:68px; }
  .top-actions > .avatar { display:none; }
  .theme-switcher svg, .language-switcher svg { display:none; }
  .breadcrumbs { flex:1; }
  .breadcrumbs strong { max-width:150px; }
  html[lang="en"] .metric > div { font-size:10px; }
  html[lang="en"] .metric p { min-height:32px; }
  html[lang="en"] .chart-summary > .positive small { display:none; }
}
@media(max-width:380px) {
  .top-actions { gap:6px; }
  .language-switcher, .theme-switcher { padding:6px 4px; }
  .breadcrumbs { gap:5px; }
  .topbar { padding:0 12px; gap:5px; }
}

/* Account pages share the workspace palette and controls. */
.auth-shell { min-height:100svh; display:flex; flex-direction:column; }
.auth-header { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:28px 4.5%; }
.auth-brand { display:inline-flex; align-items:center; gap:10px; }
.auth-brand strong { font-size:24px; font-weight:650; letter-spacing:-1.2px; }
.auth-brand-icon { display:grid; place-items:center; width:33px; height:33px; border-radius:9px; color:var(--violet); background:var(--accent-bg); }
.auth-brand-badge { font-size:11px; padding:3px 7px; border:1px solid var(--line); border-radius:5px; color:var(--muted); }
.auth-controls { display:flex; align-items:center; gap:12px; }
.auth-main { flex:1; display:grid; grid-template-columns:1fr 1fr; align-items:center; max-width:1220px; width:100%; margin:0 auto; padding:36px 48px 48px; gap:110px; }
.auth-story { padding:12px 0; max-width:460px; }
.auth-story-copy h2 { font-size:clamp(30px,3vw,42px); font-weight:620; line-height:1.4; letter-spacing:-1.6px; white-space:pre-line; }
.auth-story-copy > p { white-space:pre-line; color:var(--muted); line-height:1.85; margin-top:20px; font-size:14px; }
.auth-workspace { margin-top:38px; padding:22px; background:var(--panel); border:1px solid var(--line); border-radius:12px; }
.auth-workspace-heading { display:flex; gap:10px; align-items:center; padding-bottom:18px; border-bottom:1px solid var(--line); }
.auth-workspace-heading strong { font-size:13px; font-weight:550; }
.auth-workspace-icon { color:var(--violet); display:flex; }
.auth-connected { width:6px; height:6px; background:var(--success); border-radius:50%; margin-left:auto; }
.auth-diagram-labels { display:flex; justify-content:space-between; padding:18px 0 12px; color:var(--muted); font-size:11px; }
.auth-connection { display:flex; align-items:center; margin-bottom:12px; }
.auth-person { display:grid; place-items:center; width:42px; height:42px; border-radius:50%; color:var(--violet); background:var(--accent-bg); }
.auth-person.blue { color:var(--info); background:var(--info-bg); }
.auth-person.green { color:var(--success); background:var(--success-bg); }
.auth-connection-line { height:1px; flex:1; background:var(--line); position:relative; margin:0 12px; }
.auth-connection-line i { position:absolute; width:5px; height:5px; border-radius:50%; top:-2px; left:50%; background:var(--chart-muted); }
.auth-agent-node { display:flex; align-items:center; gap:13px; width:54%; padding:13px; background:var(--background); border:1px solid var(--line); border-radius:8px; color:var(--violet); }
.auth-agent-node > span { flex:1; display:grid; gap:7px; }
.auth-agent-node > svg:last-child { color:var(--success); }
.auth-node-placeholder { display:block; height:5px; border-radius:2px; background:var(--line); max-width:100%; }
.auth-node-placeholder.short { width:36px; opacity:.6; }
.auth-environment { display:flex; justify-content:center; gap:7px; align-items:center; padding-top:8px; color:var(--muted); font-size:11px; }
.auth-security { display:flex; align-items:center; justify-content:center; gap:8px; color:var(--muted); font-size:11px; margin-top:20px; line-height:1.6; }
.auth-form-region { width:100%; min-width:0; }
.auth-form-content { max-width:400px; margin:0 auto; width:100%; }
.auth-form-mark { display:grid; place-items:center; width:48px; height:48px; border:1px solid var(--line); border-radius:12px; background:var(--panel); color:var(--violet); margin-bottom:23px; }
.auth-form-heading h1,.auth-complete h1 { font-size:27px; letter-spacing:-.9px; font-weight:620; line-height:1.4; }
.auth-form-heading p,.auth-complete > p { color:var(--muted); font-size:13px; line-height:1.8; margin-top:10px; }
.auth-form-content form { margin-top:30px; }
.auth-field { margin-bottom:19px; min-width:0; }
.auth-field > label { display:block; font-size:12px; font-weight:550; margin-bottom:9px; }
.auth-input-wrap { position:relative; }
.auth-input-wrap input { width:100%; height:46px; border:1px solid var(--line); border-radius:6px; background:var(--panel); color:var(--ink); padding:0 13px; font-size:13px; }
.auth-input-wrap input::placeholder { color:var(--muted); opacity:.7; }
.auth-input-wrap input[aria-invalid="true"] { border-color:var(--warning); }
.auth-input-wrap:has(.auth-password-toggle) input { padding-right:132px; }
.auth-password-toggle { position:absolute; right:10px; top:0; height:46px; font-size:10px; color:var(--muted); }
.auth-field-hint { font-size:11px; color:var(--muted); margin-top:8px; line-height:1.5; }
.auth-field-error { color:var(--warning); font-size:11px; margin-top:8px; line-height:1.5; }
.auth-field-pair { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.auth-submit { width:100%; height:46px; font-size:13px; margin-top:6px; }
.auth-switch { font-size:12px; text-align:center; margin-top:26px; line-height:1.8; color:var(--muted); }
.auth-switch a,.auth-inline-link { color:var(--violet); font-weight:550; margin-left:5px; }
.auth-switch a:hover,.auth-inline-link:hover { text-decoration:underline; }
.auth-footer { padding:22px 4.5%; display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:11px; }
.auth-footer a { display:flex; align-items:center; gap:5px; }
.auth-complete-icon { display:grid; place-items:center; width:58px; height:58px; border-radius:50%; background:var(--success-bg); color:var(--success); margin-bottom:24px; }
.auth-complete .auth-submit { margin-top:28px; }
.auth-inline-link { display:block; text-align:center; margin:22px 0 0; font-size:12px; }
@media(max-width:1000px) {
  .auth-main { gap:50px; padding:28px 32px 40px; }
  .auth-story-copy h2 { font-size:32px; }
  .auth-workspace { padding:18px; }
}
@media(max-width:760px) {
  .auth-header { padding:20px; gap:12px; flex-wrap:wrap; }
  .auth-brand strong { font-size:21px; }
  .auth-controls { gap:7px; }
  .auth-main { display:block; padding:36px 24px 48px; }
  .auth-story { display:none; }
  .auth-form-region { max-width:420px; margin:0 auto; }
  .auth-footer { padding:20px 24px; }
  .auth-form-heading h1 { font-size:25px; }
}
@media(max-width:380px) {
  .auth-header { padding:16px; }
  .auth-brand-badge { display:none; }
  .auth-controls { gap:2px; }
  .auth-main { padding:28px 20px 40px; }
  .auth-field-pair { grid-template-columns:1fr; gap:0; }
}

/* Standalone page interactions. */
[hidden] { display: none !important; }
.static-row { cursor: pointer; }
.static-row:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.static-field-error { color: var(--warning); font-size: 12px; margin-top: 8px; }
.auth-field-error:empty { display: none; }
.toast { z-index: 1000; }
@media (max-width: 760px) { .sidebar-overlay { left: 240px; } }