/* KLASS dashboard on Apple's design system, translated for the web.
   Colors are Apple's semantic set: grouped backgrounds, label tiers, fills, separators, systemBlue as
   the one tint and the system status colors. Text follows the macOS text styles (Body 13, Large Title 26).
   Two deliberate departures keep text at 4.5:1 (3:1 when bold, Apple's own table): the light secondary
   label is 78% instead of 60%, and blue, green, orange and red *text* uses Apple's increased-contrast
   variant (dots, bars and fills keep the default color). The functional layer here (sidebar, toolbar,
   sheets, toasts) is opaque; glass.css turns it into Liquid Glass. */
:root {
  color-scheme: light dark;
  /* Backgrounds: systemGroupedBackground, secondary (the group itself), tertiary (inside a group). */
  --bg: #f2f2f7;
  --group: #ffffff;
  --group-2: #f2f2f7;
  --sidebar: #e5e5ea;            /* systemGray5 */
  --elevated: #ffffff;           /* sheets, toasts */
  --thumb: #ffffff;              /* selected segment */
  /* Labels. --label-3 is Apple's secondary value and only decorates (arrows, disabled glyphs). */
  --label: #000000;
  --label-2: rgba(60, 60, 67, 0.78);
  --label-3: rgba(60, 60, 67, 0.6);
  --placeholder: rgba(60, 60, 67, 0.77);
  --separator: rgba(60, 60, 67, 0.29);
  /* Fills, thickest first. */
  --fill: rgba(120, 120, 128, 0.2);
  --fill-2: rgba(120, 120, 128, 0.16);
  --fill-3: rgba(118, 118, 128, 0.12);
  --fill-4: rgba(116, 116, 128, 0.08);
  /* System colors; *-text is the increased-contrast variant used for words. */
  --blue: #007aff;   --blue-text: #0068da;     /* NSColor.linkColor */
  --green: #34c759;  --green-text: #248a3d;
  --orange: #ff9500; --orange-text: #c93400;
  --red: #ff3b30;    --red-text: #d70015;     --red-fill: #d70015;
  --purple: #af52de; --purple-text: #8944ab;
  --data: #008299;   /* teal: charts and distributions, never interactive */
  --on-tint: #ffffff;
  --focus: color-mix(in srgb, var(--blue) 85%, transparent);
  --hairline: 1px;
  --shadow-thumb: 0 3px 8px rgba(0, 0, 0, 0.12), 0 3px 1px rgba(0, 0, 0, 0.04), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
  --shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.14), 0 0 0 0.5px rgba(0, 0, 0, 0.08);
  --scrim: rgba(0, 0, 0, 0.22);
  /* Shapes (macOS 15 / iOS 18). glass.css rounds them for Liquid Glass. */
  --r-group: 10px;
  --r-inner: 7px;      /* concentric with a group's 12-16px padding */
  --r-control: 7px;
  --r-seg: 8px;
  --r-field: 7px;
  --r-search: 8px;
  --r-row: 6px;
  --r-sheet: 12px;
  --r-toast: 12px;
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);   /* critically damped, response about 0.3 s */
  --ease-out-mirror: cubic-bezier(0.64, 0, 0.78, 0);
  /* Pretendard by default; Apple devices (index.html sets data-platform) use the system font below. */
  --font: "Pretendard Variable", Pretendard, "Segoe UI", "Malgun Gothic", "Noto Sans KR", Roboto, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "D2Coding", monospace;
  --chevrons: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 14'%3E%3Cpath d='M2.5 5.5L5 3l2.5 2.5M2.5 8.5L5 11l2.5-2.5' fill='none' stroke='%236d6d72' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --magnifier: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='6.8' cy='6.8' r='4.8' fill='none' stroke='%236d6d72' stroke-width='1.6'/%3E%3Cpath d='M10.4 10.4l3.6 3.6' stroke='%236d6d72' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
@media (min-resolution: 2dppx) { :root { --hairline: 0.5px; } }
/* SF Pro, with Korean falling to Apple SD Gothic Neo as the system itself does. */
:root[data-platform="apple"] { --font: -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", sans-serif; }

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --group: #1c1c1e;
    --group-2: #2c2c2e;
    --sidebar: #1c1c1e;
    --elevated: #2c2c2e;
    --thumb: #636366;
    --label: #ffffff;
    --label-2: rgba(235, 235, 245, 0.6);
    --label-3: rgba(235, 235, 245, 0.3);
    --placeholder: rgba(235, 235, 245, 0.65);
    --separator: rgba(84, 84, 88, 0.6);
    --fill: rgba(120, 120, 128, 0.36);
    --fill-2: rgba(120, 120, 128, 0.32);
    --fill-3: rgba(118, 118, 128, 0.24);
    --fill-4: rgba(118, 118, 128, 0.18);
    --blue: #0a84ff;   --blue-text: #419cff;
    --green: #30d158;  --green-text: #30d158;
    --orange: #ff9f0a; --orange-text: #ff9f0a;
    --red: #ff453a;    --red-text: #ff6961;     --red-fill: #ff453a;
    --purple: #bf5af2; --purple-text: #da8fff;
    --data: #40c8e0;
    --shadow-thumb: 0 3px 8px rgba(0, 0, 0, 0.3), 0 0 0 0.5px rgba(255, 255, 255, 0.06);
    --shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.55), 0 0 0 0.5px rgba(255, 255, 255, 0.1);
    --scrim: rgba(0, 0, 0, 0.5);
    --chevrons: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 14'%3E%3Cpath d='M2.5 5.5L5 3l2.5 2.5M2.5 8.5L5 11l2.5-2.5' fill='none' stroke='%2398989f' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --magnifier: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='6.8' cy='6.8' r='4.8' fill='none' stroke='%2398989f' stroke-width='1.6'/%3E%3Cpath d='M10.4 10.4l3.6 3.6' stroke='%2398989f' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  }
}

/* Increase Contrast: Apple's accessible variants, opaque separators, groups outlined. */
@media (prefers-contrast: more) {
  :root {
    --label-2: rgba(60, 60, 67, 0.92); --label-3: rgba(60, 60, 67, 0.78); --placeholder: rgba(60, 60, 67, 0.85);
    --separator: #8e8e93; --fill-3: rgba(118, 118, 128, 0.2); --fill-4: rgba(116, 116, 128, 0.14);
    --blue: #0040dd; --blue-text: #0040dd; --green: #248a3d; --orange: #c93400; --red: #d70015; --data: #006a7d;
    --focus: #0040dd;
  }
  .card-body, .kpi, .slot { box-shadow: 0 0 0 1px var(--separator); }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root {
    --label-2: rgba(235, 235, 245, 0.84); --label-3: rgba(235, 235, 245, 0.6); --placeholder: rgba(235, 235, 245, 0.75);
    --separator: #8e8e93; --fill-3: rgba(118, 118, 128, 0.36); --fill-4: rgba(118, 118, 128, 0.28);
    --blue: #409cff; --blue-text: #409cff; --green: #30db5b; --green-text: #30db5b; --orange: #ffb340;
    --orange-text: #ffb340; --red: #ff6961; --red-fill: #ff6961; --data: #5de6ff; --focus: #409cff;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--label);
  font: 13px/18px var(--font);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button, input, select, textarea { font: inherit; color: inherit; }
code, .mono { font-family: var(--mono); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Keyboard focus: the macOS ring, hugging the control's own shape; never on pointer clicks. */
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }

.icon { width: 16px; height: 16px; flex: 0 0 16px; stroke: currentColor; fill: none; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round; }

/* ---- App frame: sidebar + main ------------------------------------------------------ */
.app { display: flex; min-height: 100vh; }

/* Sidebar: a source list. Icons carry the tint; the selected row gets the unemphasized fill. */
.sidebar {
  width: 220px; flex: 0 0 220px;
  background: var(--sidebar);
  box-shadow: inset calc(-1 * var(--hairline)) 0 0 var(--separator);
  display: flex; flex-direction: column;
  padding: 14px 10px 12px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.brand-mark {
  width: 28px; height: 28px; border-radius: 7px;
  background: var(--blue); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 14px;
}
.nav { display: flex; flex-direction: column; gap: 14px; }
.nav-group { display: flex; flex-direction: column; gap: 1px; }
.nav-heading { font-size: 11px; line-height: 14px; font-weight: 600; color: var(--label-2); padding: 0 10px 4px; }
.nav-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  min-height: 28px; padding: 5px 10px; border: 0; border-radius: var(--r-row);
  background: transparent; color: var(--label); text-align: left; text-decoration: none;
  font-size: 13px; line-height: 18px; font-weight: 400; cursor: pointer;
  transition: background-color 120ms ease, transform 100ms ease-out;
}
.nav-item .icon { width: 17px; height: 17px; flex-basis: 17px; color: var(--blue); }
.nav-item:hover { background: var(--fill-4); }
.nav-item:active { transform: scale(0.98); }
.nav-item.active { background: var(--fill); font-weight: 600; }
.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding: 16px 10px 0; }
.acct-group { display: flex; flex-direction: column; gap: 8px; }
.acct { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.acct-label { font-size: 11px; line-height: 14px; font-weight: 600; color: var(--label-2); }
.acct-id { font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; color: var(--label-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding-top: 10px; box-shadow: inset 0 var(--hairline) 0 var(--separator);
}
.user-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.user-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role-badge {
  align-self: flex-start; font-size: 11px; line-height: 16px; font-weight: 600;
  padding: 0 7px; border-radius: 999px; color: var(--label-2); background: var(--fill-3);
}

.main { flex: 1; min-width: 0; padding: 0 28px 40px; max-width: 1240px; }
.main.main-wide { max-width: none; }

/* Toolbar: a large title with the view's actions. The separator appears only once content scrolls under. */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: center; gap: 12px 16px; flex-wrap: wrap;
  margin: 0 -28px; padding: 20px 28px 12px;
  background: var(--bg);
}
.topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--hairline); pointer-events: none;
  background: var(--separator); opacity: 0; transition: opacity 160ms ease;
}
.topbar.scrolled::after { opacity: 1; }
.titles { min-width: 0; }
h1 { margin: 0; font-size: 26px; line-height: 32px; font-weight: 700; }
.sub { margin: 2px 0 0; color: var(--label-2); font-size: 13px; line-height: 18px; }
.controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Segmented controls: a filled track with a raised thumb. */
.scope-toggle { display: inline-flex; background: var(--fill-3); border-radius: var(--r-seg); padding: 2px; gap: 2px; }
.scope-toggle button {
  border: 0; background: transparent; color: var(--label);
  min-height: 24px; padding: 3px 12px; border-radius: calc(var(--r-seg) - 2px); font-size: 13px; line-height: 18px;
  font-weight: 500; cursor: pointer; transition: background-color 120ms ease, box-shadow 120ms ease;
}
.scope-toggle button:hover:not([aria-checked="true"]) { background: var(--fill-4); }
.scope-toggle button[aria-checked="true"], .scope-toggle button.active { background: var(--thumb); box-shadow: var(--shadow-thumb); font-weight: 600; }

/* Buttons. Prominent (filled with the tint) for the one likely action, gray fill otherwise.
   Labels on the tint are semibold: white on systemBlue is 4.0:1, which Apple's table allows for bold. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 28px; padding: 5px 14px; border: 0; border-radius: var(--r-control);
  background: var(--blue); color: var(--on-tint); font-size: 13px; line-height: 18px; font-weight: 600; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  transition: background-color 120ms ease, transform 100ms ease-out;
}
.btn:hover:not(:disabled) { background: color-mix(in srgb, var(--blue) 88%, var(--label)); }
.btn:active:not(:disabled) { transform: scale(0.97); background: color-mix(in srgb, var(--blue) 78%, var(--label)); }
.btn:disabled { opacity: 0.4; cursor: default; }
.btn-secondary { background: var(--fill-3); color: var(--label); font-weight: 500; }
.btn-secondary:hover:not(:disabled) { background: var(--fill-2); }
.btn-secondary:active:not(:disabled) { background: var(--fill); }
.btn-danger { background: var(--red-fill); color: #fff; }
.btn-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--red-fill) 88%, var(--label)); }
.btn-danger:active:not(:disabled) { background: color-mix(in srgb, var(--red-fill) 78%, var(--label)); }
.btn-sm { min-height: 26px; padding: 4px 12px; font-size: 12px; line-height: 16px; }
.btn .icon { width: 14px; height: 14px; flex-basis: 14px; }
.btn-spin {
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, currentColor 35%, transparent); border-top-color: currentColor;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Text buttons are tinted words, like links in Apple apps. */
.link-btn {
  background: transparent; border: 0; color: var(--blue-text); font-size: 13px; font-weight: 500;
  cursor: pointer; padding: 3px 4px; margin: -3px -4px; border-radius: 5px; min-height: 24px;
  transition: opacity 120ms ease;
}
.link-btn:hover:not(:disabled) { opacity: 0.72; }
.link-btn:disabled { color: var(--label-3); cursor: default; }
/* .signout is also the dialogs' Cancel: a gray push button. */
.signout {
  background: var(--fill-3); border: 0; color: var(--label);
  font-size: 12px; line-height: 16px; font-weight: 500; min-height: 26px; padding: 4px 12px; border-radius: var(--r-control);
  cursor: pointer; flex: 0 0 auto; transition: background-color 120ms ease, transform 100ms ease-out;
}
.signout:hover { background: var(--fill-2); }
.signout:active { transform: scale(0.97); background: var(--fill); }
.signout.danger { color: var(--red-text); }

.updated { color: var(--label-2); font-size: 12px; line-height: 16px; margin: 0 0 16px; font-variant-numeric: tabular-nums; }
.updated.error { color: var(--red-text); }

/* ---- KPIs ------------------------------------------------------------------------- */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }
.kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpis-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpi { background: var(--group); border-radius: var(--r-group); padding: 12px 16px 13px; min-width: 0; }
.kpi-label { color: var(--label-2); font-size: 12px; line-height: 16px; font-weight: 500; }
.kpi-value {
  font-size: 26px; line-height: 32px; font-weight: 600; margin-top: 4px;
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kpi-note { color: var(--label-2); font-size: 11px; line-height: 14px; margin-top: 2px; }

/* ---- Groups (inset grouped lists): the header sits above the box, the box has no border. ---- */
.grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-bottom: 24px; }
.card { margin-bottom: 24px; min-width: 0; }
.grid > .card { margin-bottom: 0; display: flex; flex-direction: column; }
.grid > .card > .card-body { flex: 1; }
.card-head {
  display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; flex-wrap: wrap;
  padding: 0 4px 8px; min-height: 34px;
}
.card-head h2 { margin: 0; font-size: 15px; line-height: 20px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.card-body { background: var(--group); border-radius: var(--r-group); padding: 14px 16px; overflow: hidden; }
.card-body.no-pad { padding: 0; }
.muted { color: var(--label-2); font-size: 12px; line-height: 16px; }

.count-pill {
  background: var(--fill-3); color: var(--label-2); font-variant-numeric: tabular-nums;
  font-size: 12px; font-weight: 600; padding: 0 7px; border-radius: 999px; line-height: 18px;
}

/* ---- Charts ------------------------------------------------------------------------ */
.bar-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 8px 0; }
.bar-row + .bar-row { box-shadow: inset 0 var(--hairline) 0 var(--separator); }
.bar-label { font-size: 13px; display: flex; align-items: center; gap: 9px; min-width: 0; }
.bar-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-track { height: 6px; border-radius: 3px; background: var(--data); }
.bar-amount { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13px; }

.chart { width: 100%; height: 150px; display: block; }
.chart .bar { fill: var(--data); }
.chart .bar:hover { fill: color-mix(in srgb, var(--data) 75%, var(--label)); }
.chart .axis { stroke: var(--separator); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-axis { display: flex; justify-content: space-between; color: var(--label-2); font-size: 11px; line-height: 14px; margin-top: 6px; font-variant-numeric: tabular-nums; }
.chart-foot { display: flex; justify-content: space-between; gap: 12px; color: var(--label-2); font-size: 12px; margin-top: 10px; font-variant-numeric: tabular-nums; }

/* ---- Empty, loading, error states -------------------------------------------------- */
.empty { color: var(--label-2); text-align: center; padding: 28px 16px; font-size: 13px; }
.empty.error { color: var(--label); background: color-mix(in srgb, var(--red) 10%, var(--group)); text-align: left; border-radius: var(--r-inner); padding: 14px 16px; }
.card-body.no-pad > .empty.error { border-radius: 0; }
.empty.error b { display: block; color: var(--red-text); margin-bottom: 4px; }
.err-detail { margin-top: 8px; font-family: var(--mono); font-size: 12px; color: var(--label-2); word-break: break-word; }
.skeleton {
  display: block; height: 12px; border-radius: 6px; background: var(--fill-3);
  background-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--group) 60%, transparent), transparent);
  background-size: 200% 100%; animation: shimmer 1.4s ease-in-out infinite;
}
.skeleton + .skeleton { margin-top: 10px; }
.kpi-value .skeleton { height: 24px; width: 60%; margin-top: 5px; }
@keyframes shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }

/* ---- Inputs: filled fields, pop-up buttons with the up-down chevron, search with a magnifier. ---- */
.app input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .app select, .app textarea,
.login input, .launch-card input, .launch-card select, .dialog input {
  background-color: var(--fill-3); border: 0; color: var(--label);
  min-height: 28px; padding: 5px 10px; border-radius: var(--r-field); font-size: 13px; line-height: 18px;
  transition: background-color 120ms ease;
}
.app select, .launch-card select {
  -webkit-appearance: none; appearance: none; padding-right: 26px; cursor: pointer;
  background-image: var(--chevrons); background-repeat: no-repeat; background-position: right 8px center; background-size: 10px 14px;
}
.app select:hover, .launch-card select:hover { background-color: var(--fill-2); }
.app input[type="search"]:not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
  -webkit-appearance: none; appearance: none; padding-left: 28px; border-radius: var(--r-search);
  background-image: var(--magnifier); background-repeat: no-repeat; background-position: 9px center; background-size: 13px 13px;
}
.app input::placeholder, .app textarea::placeholder, .login input::placeholder,
.launch-card input::placeholder, .dialog input::placeholder { color: var(--placeholder); }
.app input:focus, .app select:focus, .app textarea:focus, .login input:focus, .launch-card input:focus,
.launch-card select:focus, .dialog input:focus { outline: 3px solid var(--focus); outline-offset: 0; }
.app input[readonly]:not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
  background-color: transparent; box-shadow: inset 0 0 0 1px var(--separator); color: var(--label-2);
}
input[type="checkbox"] { accent-color: var(--blue); width: 14px; height: 14px; margin: 0; }
.search { width: 240px; max-width: 100%; }
.table-controls { display: flex; gap: 8px; flex-wrap: wrap; }

/* Filter capsules: toggle buttons; the selected one takes the tint. */
.chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 10px; }
.chip {
  background: var(--fill-3); border: 0; color: var(--label);
  font-size: 12px; line-height: 16px; font-weight: 500; min-height: 26px; padding: 4px 11px; border-radius: 999px; cursor: pointer;
  font-variant-numeric: tabular-nums; transition: background-color 120ms ease, transform 100ms ease-out;
}
.chip:hover { background: var(--fill-2); }
.chip:active { transform: scale(0.97); }
.chip.active, .chip[aria-pressed="true"] { background: var(--blue); color: var(--on-tint); font-weight: 600; }

/* ---- Tables: header in secondary label, rows split by inset hairlines. ------------- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: separate; border-spacing: 0; --cell-x: 16px; }
th, td { text-align: left; padding: 9px var(--cell-x); font-size: 13px; line-height: 18px; }
th {
  color: var(--label-2); font-weight: 600; font-size: 12px; line-height: 16px; white-space: nowrap;
  position: sticky; top: 0; background: var(--group); z-index: 1;
  box-shadow: inset 0 calc(-1 * var(--hairline)) 0 var(--separator);
}
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
.th-sort {
  display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; padding: 2px 4px; margin: -2px -4px;
  color: inherit; font: inherit; font-weight: 600; cursor: pointer; border-radius: 5px;
}
.th-sort:hover { color: var(--label); }
.sort-ind { width: 10px; text-align: center; color: var(--label-2); font-size: 8px; }
th[aria-sort="ascending"] .sort-ind::after { content: "▲"; }
th[aria-sort="descending"] .sort-ind::after { content: "▼"; }
th[aria-sort] .th-sort { color: var(--label); }
tbody td {
  background-image: linear-gradient(var(--separator), var(--separator));
  background-repeat: no-repeat; background-size: 100% var(--hairline); background-position: 0 0;
}
tbody tr:first-child td { background-image: none; }
tbody td:first-child { background-size: calc(100% - var(--cell-x)) var(--hairline); background-position: 100% 0; }
tbody td:last-child { background-size: calc(100% - var(--cell-x)) var(--hairline); background-position: 0 0; }
tbody td:only-child { background-size: calc(100% - 2 * var(--cell-x)) var(--hairline); background-position: 50% 0; }
tbody tr:hover td { background-color: var(--fill-4); }
td.nowrap, .nowrap { white-space: nowrap; }
.type-tag { display: inline-block; font-size: 13px; font-weight: 500; white-space: nowrap; }
.mono { font-size: 12px; color: var(--label-2); }
.rid-name { font-weight: 600; }
.detail-kv { color: var(--label-2); font-size: 12px; }
#resTable td.detail-kv { min-width: 240px; max-width: 360px; }
.est { font-weight: 600; font-variant-numeric: tabular-nums; }
.est.zero { color: var(--label-2); font-weight: 400; }
.rate-cell { font-family: var(--mono); font-size: 12px; color: var(--label-2); white-space: nowrap; }

/* Status: a colored mark plus the word. The mark's shape carries the meaning too
   (circle ok, triangle caution, square stop, hollow circle neutral), so color is never alone. */
.state {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 13px; line-height: 18px; font-weight: 400; color: var(--label);
}
.state::before { content: ""; width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; box-sizing: border-box; border: 1.5px solid var(--label-3); }
.state.good::before { border: 0; background: var(--green); }
.state.idle::before, .state.warn::before { border: 0; border-radius: 0; width: 9px; height: 8px; flex-basis: 9px; background: var(--orange); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.state.bad::before { border: 0; border-radius: 2px; background: var(--red); }

.foot { color: var(--label-2); font-size: 11px; line-height: 16px; margin-top: 24px; max-width: 90ch; }

/* ---- Login ------------------------------------------------------------------------- */
.login { position: fixed; inset: 0; display: grid; place-items: center; background: var(--bg); padding: 20px; z-index: 50; }
.login-card {
  width: 100%; max-width: 340px; background: var(--group); border-radius: calc(var(--r-group) + 4px);
  padding: 28px 24px 24px; display: flex; flex-direction: column; gap: 4px;
}
.login-brand { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 15px; margin-bottom: 18px; }
.login-title { margin: 0; font-size: 22px; line-height: 26px; font-weight: 700; }
.login-sub { margin: 4px 0 18px; color: var(--label-2); font-size: 13px; }
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.field > span { font-size: 12px; line-height: 16px; color: var(--label-2); font-weight: 500; }
.field input, .field select { width: 100%; }
.login .field input { min-height: 32px; }
.login-btn { width: 100%; min-height: 32px; margin-top: 6px; }
.login-error, .form-error {
  background: color-mix(in srgb, var(--red) 8%, var(--elevated));
  color: var(--red-text); font-size: 12px; line-height: 16px; padding: 8px 10px; border-radius: var(--r-field); margin-bottom: 12px;
}

/* ---- Toast: top of the window, announced; errors stay until dismissed. ------------- */
.toast-region { position: fixed; top: 14px; right: 16px; z-index: 90; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.toast {
  pointer-events: auto; display: flex; align-items: flex-start; gap: 10px;
  background: var(--elevated); color: var(--label);
  font-size: 13px; font-weight: 500; padding: 10px 10px 10px 14px; border-radius: var(--r-toast); box-shadow: var(--shadow-pop);
  max-width: min(420px, calc(100vw - 32px));
  animation: toast-in 240ms var(--ease-spring);
}
.toast::before { content: ""; width: 8px; height: 8px; margin-top: 5px; flex: 0 0 8px; border-radius: 50%; background: var(--green); }
.toast.error::before { border-radius: 2px; background: var(--red); }
.toast-msg { flex: 1; word-break: break-word; }
.toast-close {
  border: 0; background: transparent; color: var(--label-2); cursor: pointer; border-radius: 999px;
  width: 24px; height: 24px; display: grid; place-items: center; flex: 0 0 24px; margin: -3px 0;
}
.toast-close:hover { background: var(--fill-3); color: var(--label); }
.toast.leaving { animation: toast-out 160ms var(--ease-out-mirror) forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px) scale(0.98); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-8px) scale(0.98); } }

/* ---- Sheets and alerts: the scrim dims to focus; the surface materializes from scale + blur. */
.launch-overlay, .dialog-overlay {
  position: fixed; inset: 0; z-index: 70; padding: 24px;
  display: grid; place-items: center;
  background: var(--scrim);
  animation: scrim-in 200ms ease;
}
.launch-card, .dialog {
  width: 100%; max-width: 400px; max-height: calc(100vh - 48px); overflow: auto;
  background: var(--elevated);
  border-radius: var(--r-sheet); box-shadow: var(--shadow-pop); padding: 20px;
  display: flex; flex-direction: column; gap: 2px;
  animation: sheet-in 260ms var(--ease-spring);
}
.launch-overlay.closing, .dialog-overlay.closing { animation: scrim-out 160ms var(--ease-out-mirror) forwards; }
.launch-overlay.closing > *, .dialog-overlay.closing > * { animation: sheet-out 160ms var(--ease-out-mirror) forwards; }
@keyframes scrim-in { from { opacity: 0; } }
@keyframes scrim-out { to { opacity: 0; } }
@keyframes sheet-in { from { opacity: 0; transform: scale(0.96) translateY(6px); filter: blur(2px); } }
@keyframes sheet-out { to { opacity: 0; transform: scale(0.97) translateY(4px); } }
.launch-head, .dialog-title { font-size: 17px; line-height: 22px; font-weight: 700; margin: 0 0 12px; }
.dialog-msg { margin: 0 0 14px; color: var(--label-2); font-size: 13px; line-height: 18px; white-space: pre-line; }
.launch-cost { color: var(--label-2); font-size: 12px; margin: 2px 0 12px; }
.launch-actions, .dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.launch-actions .signout, .dialog-actions .signout { min-height: 28px; padding: 5px 14px; font-size: 13px; line-height: 18px; }

/* ---- Network flow ------------------------------------------------------------------ */
.flow-card { border-radius: var(--r-inner); background: var(--group-2); padding: 12px 14px; margin-bottom: 10px; }
.flow-card:last-child { margin-bottom: 0; }
.flow-card.exposed { background: color-mix(in srgb, var(--red) 7%, var(--group-2)); }
.flow-head { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.flow-name { font-weight: 600; font-size: 13px; }
.flow-region { margin-left: auto; color: var(--label-2); font-size: 12px; }
.exposed-badge, .net-warn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; line-height: 18px; font-weight: 600; padding: 0 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--red) 14%, var(--group)); color: var(--red-text);
}
.exposed-badge::before, .net-warn::before { content: ""; width: 6px; height: 6px; border-radius: 1.5px; background: var(--red); }
.flow-meta { color: var(--label-2); font-size: 12px; margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sg-tag { font-size: 11px; line-height: 16px; padding: 0 7px; border-radius: 5px; background: var(--group); color: var(--label-2); }
.flow-cols { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; align-items: center; margin-top: 12px; }
.flow-col { min-width: 0; }
.flow-col-title { font-size: 11px; line-height: 14px; font-weight: 600; color: var(--label-2); margin-bottom: 6px; }
.flow-col-title.out { text-align: right; }
.flow-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.flow-list li {
  font-size: 12px; padding: 5px 9px; border-radius: 6px; background: var(--group);
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.flow-col:last-child .flow-list li { justify-content: flex-end; }
.flow-list li.flow-risk { background: color-mix(in srgb, var(--red) 10%, var(--group)); }
.flow-list li.flow-none { color: var(--label-2); background: transparent; box-shadow: inset 0 0 0 1px var(--separator); }
.arrow { color: var(--label-3); }
.svc { font-weight: 600; }
.net-internet { color: var(--orange-text); font-family: var(--mono); font-size: 12px; }
.net-target { font-family: var(--mono); font-size: 12px; color: var(--label-2); }
.net-target.is-sg { color: var(--label); }
.flow-mid { display: grid; place-items: center; }
.flow-node {
  font-size: 12px; font-weight: 600; color: var(--label);
  background: var(--group); box-shadow: 0 0 0 var(--hairline) var(--separator); padding: 6px 12px; border-radius: 8px;
  max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center;
}

/* ---- Console + terminal (always dark, like Terminal) -------------------------------- */
#consoleBody td { vertical-align: middle; }
.term-overlay {
  position: fixed; inset: 0; z-index: 80; background: var(--scrim);
  display: grid; place-items: center; padding: 24px; animation: scrim-in 200ms ease;
}
.term-window {
  width: min(1000px, 96vw); height: min(620px, 88vh);
  background: #0f1115; border-radius: var(--r-sheet); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 0.5px rgba(255, 255, 255, 0.12);
  display: flex; flex-direction: column; overflow: hidden; animation: sheet-in 260ms var(--ease-spring);
}
.term-bar { display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 14px; background: #2c2c2e; box-shadow: inset 0 -0.5px 0 rgba(84, 84, 88, 0.6); }
.term-title { color: #fff; font-size: 13px; font-weight: 600; }
.term-status { color: rgba(235, 235, 245, 0.6); font-size: 12px; padding: 0 8px; background: rgba(118, 118, 128, 0.24); border-radius: 999px; line-height: 20px; }
.term-close {
  margin-left: auto; background: rgba(118, 118, 128, 0.24); border: 0; color: #fff;
  font-size: 12px; font-weight: 500; min-height: 26px; padding: 4px 12px; border-radius: var(--r-control); cursor: pointer;
}
.term-close:hover { background: rgba(120, 120, 128, 0.36); }
.term-body { flex: 1; min-height: 0; padding: 8px 10px; background: #0f1115; }
.term-body .xterm { height: 100%; }

/* ---- Cost view details ------------------------------------------------------------- */
.spend-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.note-td { min-width: 150px; }
.note-cell {
  min-width: 130px; min-height: 26px; padding: 3px 8px; border-radius: 6px;
  font-size: 12px; color: var(--label);
  cursor: text; outline: none; white-space: pre-wrap; word-break: break-word;
}
.note-cell:hover { background: var(--fill-4); }
.note-cell:focus { background: var(--fill-3); box-shadow: 0 0 0 3px var(--focus); }
.note-cell:empty::before { content: "Add note"; color: var(--placeholder); }
.note-cell:empty:focus::before { content: ""; }

/* Row actions (instances, pods, objects): small gray push buttons. */
.lam-ssh {
  background: var(--fill-3); border: 0; color: var(--label);
  font-family: var(--mono); font-size: 12px; min-height: 24px; padding: 2px 8px; border-radius: 6px; cursor: pointer;
}
.lam-ssh:hover { background: var(--fill-2); }
.lam-link { color: var(--blue-text); font-size: 12px; font-weight: 500; text-decoration: none; margin-left: 6px; }
.lam-link:hover { opacity: 0.72; }
.row-actions { display: inline-flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.lam-act, .row-term {
  background: var(--fill-3); border: 0; color: var(--label);
  font-size: 12px; line-height: 16px; font-weight: 500; min-height: 26px; padding: 4px 11px; border-radius: var(--r-control);
  cursor: pointer; white-space: nowrap;
  transition: background-color 120ms ease, transform 100ms ease-out;
}
.lam-act:hover:not(:disabled), .row-term:hover { background: var(--fill-2); }
.lam-act:active:not(:disabled), .row-term:active { transform: scale(0.97); background: var(--fill); }
.lam-act:disabled { opacity: 0.4; cursor: default; }
.lam-act.danger, .row-term { color: var(--red-text); }
.row-term { margin-left: 8px; }

.ssh-key-box { display: flex; align-items: center; gap: 12px; background: var(--group-2); border-radius: var(--r-field); padding: 8px 12px; }
.ssh-key-box code { font-family: var(--mono); font-size: 12px; color: var(--label-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.card-body code { font-family: var(--mono); font-size: 12px; background: var(--fill-3); padding: 1px 5px; border-radius: 4px; }
.card-body .ssh-key-box code { background: transparent; padding: 0; }
.card-body p.muted { margin: 0 0 10px; }

/* ---- Model Store + Hugging Face ---------------------------------------------------- */
.store-key { max-width: 440px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hf-input { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.hf-input input { flex: 1; min-width: 220px; }
.hf-est-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 20px;
  padding: 12px 14px; background: var(--group-2); border-radius: var(--r-inner);
}
.hf-est-grid > div { display: flex; flex-direction: column; gap: 2px; }
.hf-k { font-size: 11px; line-height: 14px; font-weight: 600; color: var(--label-2); }
.hf-v { font-size: 15px; line-height: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.hf-gated { margin-top: 10px; color: var(--orange-text); font-size: 12px; }
.hf-est-actions { margin-top: 12px; }
.hf-jobs-title { font-size: 11px; line-height: 14px; font-weight: 600; color: var(--label-2); margin: 16px 0 8px; }
.hf-job { padding: 8px 0; box-shadow: inset 0 var(--hairline) 0 var(--separator); }
.hf-job-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; gap: 8px; }
.hf-bar { height: 4px; background: var(--fill-3); border-radius: 2px; overflow: hidden; margin-bottom: 4px; }
.hf-bar-fill { height: 100%; background: var(--blue); transition: width 0.4s var(--ease-spring); }

/* ---- Adaptivity: the same functions at every width -------------------------------- */
@media (max-width: 1080px) {
  .kpis, .kpis-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 900px) {
  .app { flex-direction: column; }
  .sidebar {
    width: auto; flex: 0 0 auto; height: auto; position: sticky; top: 0; z-index: 30; overflow: visible;
    flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 16px;
    box-shadow: inset 0 calc(-1 * var(--hairline)) 0 var(--separator);
  }
  .nav { order: 3; flex: 1 0 100%; flex-direction: row; overflow-x: auto; gap: 4px; padding-bottom: 2px; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav-group { display: contents; }
  .nav-heading { display: none; }
  .nav-item { width: auto; flex: 0 0 auto; white-space: nowrap; }
  .sidebar-foot { margin: 0 0 0 auto; flex-direction: row; align-items: center; gap: 12px; padding: 0; }
  .acct-group { display: none; }
  .user-row { padding-top: 0; box-shadow: none; }
  .user-meta { flex-direction: row; align-items: center; gap: 6px; }
  .main { padding: 0 16px 32px; }
  .topbar { position: static; margin: 0 -16px; padding: 16px 16px 12px; background: transparent; }
  .topbar::after { display: none; }
  .flow-cols { grid-template-columns: minmax(0, 1fr); }
  .flow-mid { justify-self: start; }
  .flow-col-title.out { text-align: left; }
  .flow-col:last-child .flow-list li { justify-content: flex-start; }
  .hf-est-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .kpis, .kpis-3, .kpis-4 { grid-template-columns: minmax(0, 1fr); }
  .controls { width: 100%; }
  .search { width: 100%; }
  .card-head .search, .card-head .table-controls { flex: 1 0 100%; }
}

/* ---- Accessibility preferences ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
  .btn:active, .chip:active, .nav-item:active, .lam-act:active, .signout:active, .row-term:active { transform: none !important; }
  .launch-card, .dialog, .term-window, .toast { animation: fade-in 160ms ease !important; }
  .launch-overlay.closing > *, .dialog-overlay.closing > *, .toast.leaving { animation: fade-out 120ms ease forwards !important; }
  .skeleton { animation: none; }
  .btn-spin { animation-duration: 1.6s; }
}
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }