/* ════════════════════════════════════════════════════════════════
       RUNTIME · ENGINEERING MEMORY FOR AI-NATIVE DEVELOPMENT
       A precision instrument for metering AI-compute spend.
       Dual-signal system — cool blue = compute, warm amber = money.
       ════════════════════════════════════════════════════════════════ */

:root {
  /* Neutral dark surfaces — IBM Carbon */
  --ink-950: #161616;
  --ink-900: #1a1a1a;
  --ink-850: #262626;
  --ink-800: #2a2a2a;
  --ink-750: #333333;
  --ink-700: #393939;
  /* Base page background — referenced by the timeline-icon/avatar "cutout"
     borders (.timeline-icon-wrap, .event-avatar) that punch a
     background-coloured halo where an icon overlaps a connecting line.
     Was previously used but never defined, so those borders silently
     rendered as invalid/no-ops. */
  --bg: var(--ink-900);

  /* Borders — solid Carbon */
  --line: #393939;
  --line-strong: #525252;
  --line-warm: rgba(245, 181, 68, 0.18);

  /* Text */
  --text: #c6c6c6;
  --text-bold: #f4f4f4;
  --muted: #8d8d8d;
  --dim: #6e6e6e;
  --faint: #525252;

  /* Brand — IBM Blue 60 */
  --signal: #0f62fe;
  --signal-hi: #4589ff;
  --signal-dim: rgba(15, 98, 254, 0.12);
  --signal-glow: rgba(15, 98, 254, 0.24);

  /* Money signal — sodium amber (cost) */
  --money: #f5b544;
  --money-hi: #ffcf7a;
  --money-dim: rgba(245, 181, 68, 0.1);
  --money-glow: rgba(245, 181, 68, 0.28);

  /* Status */
  --pos: #42be65;
  --neg: #fa4d56;
  --warn: #f1c21b;

  /* Tool hues */
  --t-claude: #be95ff;
  --t-codex: #42be65;
  --t-agent: #08bdba;
  --t-ci: #8d8d8d;
  --t-other: #a8a8a8;

  --sidebar-w: 240px;
  --radius: 0px;

  --font-display: "IBM Plex Sans", sans-serif;
  --font-body: "IBM Plex Sans", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--ink-950);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Numeric voice */
.mono {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.01em;
}
.tnum {
  font-variant-numeric: tabular-nums;
}

/* Display labels — Archivo expanded, all-caps, engraved */
.eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-stretch: 118%;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
}

::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 0;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
  background-clip: padding-box;
  border: 2px solid transparent;
}

::selection {
  background: rgba(45, 206, 137, 0.28);
  color: #fff;
}

/* ── Atmosphere ──────────────────────────────────────────────────── */
.field {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.field::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -10%;
  width: 60vw;
  height: 60vw;
  background: radial-gradient(
    circle,
    rgba(45, 206, 137, 0.04) 0%,
    transparent 62%
  );
}
.field::after {
  content: "";
  position: absolute;
  bottom: -30%;
  left: -8%;
  width: 50vw;
  height: 50vw;
  background: radial-gradient(
    circle,
    rgba(45, 206, 137, 0.025) 0%,
    transparent 62%
  );
}
/* Fine measurement grid */
.grid-overlay {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(
    ellipse 90% 80% at 50% 30%,
    #000 35%,
    transparent 90%
  );
  -webkit-mask-image: radial-gradient(
    ellipse 90% 80% at 50% 30%,
    #000 35%,
    transparent 90%
  );
}

/* ════════════════════════════════════════════════════════════════
       AUTH
       ════════════════════════════════════════════════════════════════ */
#auth-view {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  padding: 24px;
}

/* Boot loader — sits above auth-view/app-view from first paint and fades
   out once app.js knows which one to show. Prevents the login screen (or a
   blank app shell) from flashing while the silent auth check is in flight.
   Also reused (see showBootLoader/hideBootLoader) to cover role-resolution
   gaps on login and workspace switch, so admin-only chrome from a stale
   role never shows through underneath.
   The fade-out transition lives ONLY on .boot-loader--hide, not the base
   rule — removing that class (showBootLoader) therefore snaps to opaque
   instantly instead of fading in, which would otherwise let whatever's
   underneath show through as translucent for ~250ms. */
#boot-loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: var(--ink-950);
  opacity: 1;
}
#boot-loader.boot-loader--hide {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
#boot-loader .rt-logo-text {
  font-size: 18px;
}
.boot-spinner {
  width: 26px;
  height: 26px;
  border: 2px solid var(--line);
  border-top-color: var(--signal-hi, var(--money));
  border-radius: 50%;
  animation: skel-spin 0.75s ease-in-out infinite;
}

.auth-shell {
  width: 100%;
  max-width: 880px;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  background: var(--ink-900);
  border: 1px solid var(--line);
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);
}

/* Marketing rail */
.auth-rail {
  position: relative;
  padding: 40px 38px;
  background:
    radial-gradient(
      120% 80% at 0% 0%,
      rgba(45, 206, 137, 0.09),
      transparent 55%
    ),
    radial-gradient(
      120% 90% at 100% 100%,
      rgba(45, 206, 137, 0.05),
      transparent 55%
    ),
    var(--ink-850);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 520px;
  overflow: hidden;
}
.auth-rail::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: linear-gradient(160deg, #000 10%, transparent 75%);
  -webkit-mask-image: linear-gradient(160deg, #000 10%, transparent 75%);
}
.auth-rail > * {
  position: relative;
  z-index: 1;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mark {
  width: 38px;
  height: 38px;
  border-radius: 0;
  flex-shrink: 0;
  background: linear-gradient(135deg, #2dce89, #22a870);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 6px 22px var(--signal-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.brand-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 112%;
  font-size: 19px;
  color: var(--text-bold);
  letter-spacing: -0.02em;
}
.brand-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal-hi);
  margin-top: 1px;
}

.auth-pitch {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 105%;
  font-size: 30px;
  line-height: 1.1;
  color: var(--text-bold);
  letter-spacing: -0.025em;
  max-width: 12ch;
}
.auth-pitch em {
  color: var(--money);
  font-style: normal;
}

.auth-meters {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.auth-meter {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.auth-meter .v {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 22px;
  color: var(--text-bold);
  min-width: 92px;
}
.auth-meter .v small {
  color: var(--signal-hi);
  font-size: 13px;
}
.auth-meter .k {
  font-size: 12.5px;
  color: var(--muted);
}

.auth-form {
  padding: 44px 42px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.auth-h {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  color: var(--text-bold);
  letter-spacing: -0.02em;
  margin: 0 0 4px;
}
.auth-sub {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 24px;
}
.auth-switch {
  font-size: 12.5px;
  color: var(--muted);
  text-align: center;
  margin-top: 18px;
}
.auth-switch button {
  background: none;
  border: none;
  color: var(--signal-hi);
  cursor: pointer;
  font: inherit;
  padding: 0;
  font-weight: 600;
}
.auth-switch button:hover {
  text-decoration: underline;
}

/* ════════════════════════════════════════════════════════════════
       APP SHELL
       ════════════════════════════════════════════════════════════════ */
#app-view {
  display: none;
  height: 100vh;
  position: relative;
  z-index: 1;
}
#app-view.visible {
  display: flex;
}

/* ── Sidebar ─────────────────────────────────────────────────────── */
#sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  height: 100%;
  background: linear-gradient(180deg, var(--ink-900) 0%, var(--ink-950) 100%);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 20;
  overflow: hidden;
}

/* Subtle dot grid pattern */
#sidebar::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.035) 1px,
    transparent 1px
  );
  background-size: 14px 14px;
  mask-image: radial-gradient(circle at 0% 100%, black 0%, transparent 90%);
  -webkit-mask-image: radial-gradient(
    circle at 0% 100%,
    black 0%,
    transparent 90%
  );
}

#sidebar > * {
  position: relative;
  z-index: 3;
}

#sidebar .rt-logo {
  height: 56px;
  display: flex;
  align-items: center;
  padding: 0 24px;
  margin: 0;
  border-bottom: 1px solid var(--line);
  box-sizing: border-box;
}
.rt-logo-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--text-bold);
  letter-spacing: -0.01em;
}
/* Ask Runtime — sidebar button */
.ask-rt-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  width: calc(100% - 24px);
  margin: 2px 12px 8px;
  padding: 9px 12px;
  background: #1a1a1a;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  font-family: var(--font-body);
  cursor: pointer;
  text-align: left;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.ask-rt-btn:hover {
  border-color: var(--signal);
  background: var(--signal-dim);
  color: var(--text);
}
.ask-rt-btn svg {
  flex-shrink: 0;
  opacity: 0.55;
}
.ask-rt-btn:hover svg {
  opacity: 1;
}
.ask-rt-kbd {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  background: var(--ink-700);
  border: 1px solid var(--line-strong);
  padding: 1px 5px;
  color: var(--dim);
}
/* Ask Runtime — full-screen modal */
.ask-rt-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 80px;
}
.ask-rt-backdrop.open {
  display: flex;
}
.ask-rt-modal {
  width: 620px;
  max-width: calc(100vw - 32px);
  background: #262626;
  border: 1px solid #525252;
  overflow: hidden;
}
.ask-rt-search-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid #393939;
}
.ask-rt-search-row svg {
  color: var(--muted);
  flex-shrink: 0;
}
.ask-rt-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text-bold);
}
.ask-rt-input::placeholder {
  color: var(--dim);
}
.ask-rt-esc {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--dim);
  background: var(--ink-700);
  border: 1px solid var(--line-strong);
  padding: 2px 6px;
  cursor: pointer;
  flex-shrink: 0;
}
.ask-rt-body {
  padding: 16px;
}
.ask-rt-section-label {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 8px;
}
.ask-rt-suggestions {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 18px;
}
.ask-rt-sugg {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: none;
  border: none;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
}
.ask-rt-sugg:hover {
  background: #333333;
}
.ask-rt-sugg svg {
  flex-shrink: 0;
  color: var(--dim);
}
.ask-rt-answer {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
}
.ask-rt-confidence {
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--muted);
}
.ask-rt-source-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--money);
  background: rgba(45, 206, 137, 0.1);
  border: 1px solid rgba(45, 206, 137, 0.25);
  border-radius: 5px;
  padding: 3px 8px;
  margin-bottom: 8px;
}
.ask-rt-results {
  border-top: 1px solid #393939;
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ask-rt-result-item {
  padding: 9px 12px;
  background: #1a1a1a;
  border-left: 2px solid var(--signal);
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  transition: background 0.12s;
}
.ask-rt-result-item:hover {
  background: #232323;
}
.ask-rt-result-head {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--dim);
  margin-bottom: 4px;
}
.ask-rt-result-date {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.ask-rt-result-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-bold);
  margin-bottom: 3px;
}
.ask-rt-result-meta {
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}
.ask-rt-spinner {
  text-align: center;
  padding: 20px;
  color: var(--dim);
  font-size: 13px;
}

.nav {
  flex: 1;
  padding: 10px 12px;
  overflow-y: auto;
}
.nav-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-stretch: 115%;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 16px 10px 7px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 11px;
  margin-bottom: 1px;
  border-radius: 0;
  font-size: 13.5px;
  color: var(--muted);
  cursor: pointer;
  border: none;
  background: none;
  text-align: left;
  transition:
    background 0.13s,
    color 0.13s;
  position: relative;
}
.nav-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
}
.nav-item.active {
  background: var(--signal-dim);
  color: var(--signal-hi);
  font-weight: 600;
}
.nav-item.active::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 17px;
  border-radius: 0;
  background: var(--signal);
  box-shadow: 0 0 10px var(--signal-glow);
}
.nav-item svg {
  flex-shrink: 0;
  opacity: 0.6;
  transition: opacity 0.13s;
}
.nav-item.active svg,
.nav-item:hover svg {
  opacity: 1;
}
.nav-item .tail {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--dim);
  font-weight: 500;
}
.nav-item.active .tail {
  color: var(--signal-hi);
}

/* Live balance gauge in sidebar */
.sb-gauge {
  margin: 8px 14px 12px;
  padding: 13px 14px;
  border: 1px solid var(--line-warm);
  border-radius: 0;
  background: linear-gradient(150deg, var(--money-dim), transparent);
}
.sb-gauge .g-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.sb-gauge .g-k {
  font-family: var(--font-display);
  font-weight: 600;
  font-stretch: 115%;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--money);
}
.sb-gauge .g-v {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 500;
  color: var(--text-bold);
}

.sb-foot {
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 11px;
}
.avatar {
  width: 32px;
  height: 32px;
  border-radius: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  background: linear-gradient(150deg, var(--signal), var(--t-claude));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.sb-user {
  flex: 1;
  min-width: 0;
}
.sb-user .n {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-bold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sb-user .s {
  font-size: 10.5px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 1px;
}
.sb-user .s::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--pos);
  box-shadow: 0 0 6px rgba(61, 220, 151, 0.7);
}
.icon-btn {
  background: none;
  border: 1px solid transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 6px;
  border-radius: 0;
  display: flex;
  transition: all 0.13s;
}
.icon-btn:hover {
  color: var(--text-bold);
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--line);
}

/* ── Main ────────────────────────────────────────────────────────── */
#main {
  flex: 1;
  height: 100%;
  overflow-y: auto;
  position: relative;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 30px;
  height: 56px;
  background: rgba(22, 22, 22, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.topbar-tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.bal-pill {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 13px 6px 11px;
  background: var(--money-dim);
  border: 1px solid var(--line-warm);
  border-radius: 0;
  cursor: pointer;
  transition:
    background 0.14s,
    border-color 0.14s;
}
.bal-pill:hover {
  background: rgba(245, 181, 68, 0.15);
  border-color: rgba(245, 181, 68, 0.32);
}
.bal-pill .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--money);
  box-shadow: 0 0 8px var(--money-glow);
}
.bal-pill .lab {
  font-family: var(--font-display);
  font-weight: 600;
  font-stretch: 112%;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--money);
}
.bal-pill .val {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-bold);
}

.section {
  display: none;
  padding: 28px 30px 56px;
  max-width: 1320px;
}
.section.active {
  display: block;
  animation: rise 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.page-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 105%;
  font-size: 28px;
  letter-spacing: -0.03em;
  margin: 0;
  background: linear-gradient(135deg, #ffffff 0%, #a0a0a0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 4px 32px rgba(255, 255, 255, 0.1);
}
.page-sub {
  font-size: 14px;
  color: var(--muted);
  margin-top: 6px;
  font-weight: 500;
}
/* In-content page titles/subtitles are hidden across the dashboard — the topbar
   breadcrumb already names the current page (matches the Overview page, which
   has no in-content title). The elements stay in the DOM so JS that writes into
   them (e.g. #td-name on team detail) and the action buttons/status that share
   .page-head still work. Delete this block to restore the titles. */
.page-title,
.page-sub {
  display: none;
}
/* With the title/sub hidden, a .page-head with nothing else in it (no action
   button, no back-nav) collapses to zero height but still keeps its
   margin-bottom — doubling the gap under the topbar versus Overview, which
   has no .page-head at all. Zero that margin only when there's truly nothing
   left to space away from; pages with a visible button/back-link keep it. */
.page-head:has(> div:only-child):not(:has(button)) {
  margin-bottom: 0;
}

/* ── Cards ───────────────────────────────────────────────────────── */
.card {
  background: var(--ink-850);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.16s;
}
.card:hover {
  border-color: var(--line-strong);
}
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
}
.card-h {
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-stretch: 113%;
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Instrument stat tiles ───────────────────────────────────────── */
.gauge-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

.gauge {
  position: relative;
  overflow: hidden;
  background: var(--ink-850);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px 16px;
  transition:
    border-color 0.16s,
    transform 0.18s;
}
.gauge:hover {
  transform: translateY(-2px);
}
.gauge::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent, var(--signal));
  opacity: 0.8;
}
.gauge--money {
  --accent: var(--money);
}
.gauge--money:hover {
  border-color: var(--line-warm);
}
.gauge--blue {
  --accent: var(--signal);
}
.gauge--blue:hover {
  border-color: var(--signal-dim);
}

.gauge-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.gauge-k {
  font-family: var(--font-display);
  font-weight: 600;
  font-stretch: 114%;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}
.gauge-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 0;
  border: 1px solid var(--line);
  color: var(--muted);
}
.gauge-tag.up {
  color: var(--pos);
  border-color: rgba(61, 220, 151, 0.25);
  background: rgba(61, 220, 151, 0.07);
}
.gauge-tag.warn {
  color: var(--money);
  border-color: var(--line-warm);
  background: var(--money-dim);
}

.gauge-v {
  font-family: var(--font-mono);
  font-weight: 500;
  line-height: 1;
  font-size: 30px;
  color: var(--text-bold);
  letter-spacing: -0.02em;
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.gauge-v .cur {
  font-size: 18px;
  color: var(--muted);
}
.gauge--hero .gauge-v {
  font-size: 44px;
}
.gauge--hero .gauge-v .cur {
  font-size: 24px;
  color: var(--money);
}
.gauge-foot {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 9px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.gauge-foot .b {
  color: var(--text);
  font-weight: 600;
}

/* ── Overview composition ────────────────────────────────────────── */
.ov-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 14px;
  align-items: start;
}
.ov-main {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ov-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 74px;
}

/* Breakdown bars (spend by tool) */
.bd-body {
  padding: 16px 18px 18px;
}
.bd-total {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 16px;
}
.bd-total .v {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 500;
  color: var(--text-bold);
}
.bd-total .k {
  font-size: 11.5px;
  color: var(--muted);
}
.bd-row {
  display: grid;
  grid-template-columns: 110px 1fr 78px;
  gap: 12px;
  align-items: center;
  padding: 7px 0;
}
.bd-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bd-swatch {
  width: 9px;
  height: 9px;
  border-radius: 0;
  flex-shrink: 0;
}
.bd-track {
  height: 7px;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
}
.bd-fill {
  height: 100%;
  border-radius: 0;
  transition: width 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.bd-val {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
  text-align: right;
}
.bd-val .pct {
  color: var(--dim);
  font-size: 10px;
}

/* Top keys ranked list */
.rank-row {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 11px 18px;
  border-bottom: 1px solid var(--line);
  transition: background 0.12s;
}
.rank-row:last-child {
  border-bottom: none;
}
.rank-row:hover {
  background: rgba(255, 255, 255, 0.025);
}
.rank-n {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--dim);
}
.rank-main {
  min-width: 0;
}
.rank-name {
  font-size: 13px;
  color: var(--text-bold);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rank-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.rank-bar {
  height: 4px;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
  flex: 1;
  max-width: 140px;
}
.rank-bar i {
  display: block;
  height: 100%;
  border-radius: 0;
  background: linear-gradient(90deg, var(--signal), var(--signal-hi));
}
.rank-cost {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--money-hi);
  font-weight: 500;
  text-align: right;
}
.rank-req {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--dim);
  margin-top: 3px;
  text-align: right;
}

/* Health strip */
.health {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.health-cell {
  background: var(--ink-850);
  padding: 15px 16px;
}
.health-v {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 500;
  color: var(--text-bold);
  line-height: 1;
}
.health-v small {
  font-size: 13px;
  color: var(--dim);
}
.health-k {
  font-size: 11px;
  color: var(--muted);
  margin-top: 6px;
}
.health-k .pos {
  color: var(--pos);
}

/* Activity feed */
.live {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pos);
  box-shadow: 0 0 8px rgba(61, 220, 151, 0.7);
  animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(0.8);
  }
}
.feed {
  max-height: 460px;
  overflow-y: auto;
}
.feed-item {
  display: flex;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  transition: background 0.12s;
}
.feed-item:last-child {
  border-bottom: none;
}
.feed-item:hover {
  background: rgba(255, 255, 255, 0.025);
}
.feed-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 4px;
}
.feed-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tdot, var(--signal));
  box-shadow: 0 0 7px var(--tdot, var(--signal));
  flex-shrink: 0;
}
.feed-body {
  flex: 1;
  min-width: 0;
}
.feed-text {
  font-size: 13px;
  color: var(--text);
  line-height: 1.45;
}
.feed-text b {
  color: var(--text-bold);
  font-weight: 600;
}
.feed-foot {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 4px;
}
.feed-time {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--dim);
}
.feed-cost {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--money);
}

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  padding: 9px 15px;
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.14s;
}
.btn-primary {
  background: linear-gradient(135deg, #2dce89, #22a870);
  color: #131a14;
  box-shadow:
    0 2px 12px var(--signal-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  font-weight: 600;
}
.btn-primary:hover {
  box-shadow:
    0 4px 20px var(--signal-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}
.btn-primary:active {
  transform: translateY(0) scale(0.98);
}
.btn-ghost {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--line);
  color: var(--text);
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--line-strong);
  color: var(--text-bold);
}
.btn-danger {
  background: rgba(255, 107, 107, 0.08);
  border-color: rgba(255, 107, 107, 0.2);
  color: #ff8d8d;
}
.btn-danger:hover {
  background: rgba(255, 107, 107, 0.15);
  border-color: rgba(255, 107, 107, 0.35);
}
.btn-sm {
  padding: 6px 11px;
  font-size: 12px;
  border-radius: 0;
}
.btn-block {
  width: 100%;
  justify-content: center;
}

/* ── Forms ───────────────────────────────────────────────────────── */
.field-row {
  margin-bottom: 15px;
}
.label {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-stretch: 110%;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
}
.label .opt {
  color: var(--faint);
}
.input {
  width: 100%;
  background: var(--ink-950);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 10px 13px;
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--text-bold);
  outline: none;
  transition:
    border-color 0.14s,
    box-shadow 0.14s,
    background 0.14s;
}
.input:focus {
  border-color: rgba(45, 206, 137, 0.5);
  background: rgba(45, 206, 137, 0.04);
  box-shadow: 0 0 0 3px rgba(45, 206, 137, 0.1);
}
.input::placeholder {
  color: var(--dim);
}
select.input option {
  background: var(--ink-800);
  color: var(--text);
}

/* ── Badges ──────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 0;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid;
  font-family: var(--font-body);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.badge::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.badge.plain::before {
  display: none;
}
.b-claude-code {
  color: var(--t-claude);
  background: rgba(177, 140, 255, 0.1);
  border-color: rgba(177, 140, 255, 0.22);
}
.b-codex {
  color: var(--t-codex);
  background: rgba(61, 220, 151, 0.1);
  border-color: rgba(61, 220, 151, 0.22);
}
.b-agent {
  color: var(--t-agent);
  background: rgba(56, 214, 230, 0.1);
  border-color: rgba(56, 214, 230, 0.22);
}
.b-ci {
  color: var(--t-ci);
  background: rgba(139, 152, 181, 0.1);
  border-color: rgba(139, 152, 181, 0.22);
}
.b-other {
  color: var(--t-other);
  background: rgba(148, 163, 184, 0.1);
  border-color: rgba(148, 163, 184, 0.22);
}
.b-active {
  color: var(--pos);
  background: rgba(61, 220, 151, 0.1);
  border-color: rgba(61, 220, 151, 0.22);
}
.b-inactive {
  color: var(--neg);
  background: rgba(255, 107, 107, 0.1);
  border-color: rgba(255, 107, 107, 0.22);
}
.b-owner {
  color: var(--money);
  background: rgba(245, 181, 68, 0.1);
  border-color: rgba(245, 181, 68, 0.22);
}
.b-admin {
  color: #9aa7ff;
  background: rgba(99, 102, 241, 0.12);
  border-color: rgba(99, 102, 241, 0.24);
}
.b-lead {
  color: var(--t-agent);
  background: rgba(56, 214, 230, 0.1);
  border-color: rgba(56, 214, 230, 0.22);
}
.b-member {
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--line);
}

/* ── Tables ──────────────────────────────────────────────────────── */
.table {
  width: 100%;
  border-collapse: collapse;
}
.table th {
  font-family: var(--font-display);
  font-weight: 600;
  font-stretch: 112%;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
  padding: 13px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.table th:first-child {
  padding-left: 20px;
}
.table th.r {
  text-align: right;
}
.table td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  color: var(--text);
}
.table td:first-child {
  padding-left: 20px;
}
.table td.r {
  text-align: right;
}
.table tbody tr {
  transition: background 0.12s;
}
.table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.025);
}
.table tbody tr:last-child td {
  border-bottom: none;
}
.cell-name {
  font-weight: 600;
  color: var(--text-bold);
}
.key-chip {
  font-family: var(--font-mono);
  font-size: 11.5px;
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 3px 9px;
  color: var(--muted);
}
.spendcell {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.spendcell .v {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--money-hi);
}
.spendcell .bar {
  width: 70px;
  height: 3px;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.spendcell .bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--money), var(--money-hi));
}

/* ── Item cards (projects / teams) ───────────────────────────────── */
.grid-cards {
  display: grid;
  gap: 14px;
}
.tile {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: var(--ink-850);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  transition:
    border-color 0.16s,
    transform 0.18s,
    box-shadow 0.18s;
}
.tile:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35);
}
.tile::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3px;
  background: var(--c, var(--signal));
  opacity: 0.85;
}
.tile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.tile-name {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--text-bold);
  letter-spacing: -0.01em;
  min-width: 0;
}
.dot {
  width: 10px;
  height: 10px;
  border-radius: 0;
  flex-shrink: 0;
}
.tile-stats {
  display: flex;
  gap: 18px;
  margin-top: 12px;
}
.tile-stat .k {
  font-family: var(--font-display);
  font-weight: 600;
  font-stretch: 110%;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 3px;
}
.tile-stat .v {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-bold);
}
.tile-stat .v.money {
  color: var(--money-hi);
}

/* ── Teams grid (redesigned) ─────────────────────────────────────── */
.teams-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin-bottom: 2px;
}

/* Team card in the grid */
.team-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: var(--ink-850);
  border: 1px solid var(--line);
  padding: 22px 24px 20px;
  transition: background 0.14s;
}
.team-card:hover {
  background: var(--ink-800);
}
.team-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--tc, var(--signal));
  opacity: 0.8;
}
.team-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 10px;
}
.team-card-name {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--text-bold);
  letter-spacing: -0.01em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.team-card-desc {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 16px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.team-card-stats {
  display: flex;
  gap: 0;
  border-top: 1px solid var(--line);
  margin: 0 -24px -20px;
  padding: 0;
}
.team-card-stat {
  flex: 1;
  padding: 11px 16px;
  border-right: 1px solid var(--line);
}
.team-card-stat:last-child {
  border-right: none;
}
.team-card-stat .k {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 4px;
}
.team-card-stat .v {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-bold);
  letter-spacing: -0.01em;
}
.team-card-stat .v.money {
  color: var(--money-hi);
}

/* Team detail — allocate row inside hero */
.td-alloc-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ── Member rows ─────────────────────────────────────────────────── */
.mrow {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
  transition: background 0.12s;
}
.mrow:last-child {
  border-bottom: none;
}
.mrow:hover {
  background: rgba(255, 255, 255, 0.025);
}
.mavatar {
  width: 36px;
  height: 36px;
  border-radius: 0;
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  background: linear-gradient(150deg, var(--signal), var(--t-claude));
}
.mrow:nth-child(3n + 1) .mavatar {
  background: linear-gradient(150deg, #ec4899, #f97316);
}
.mrow:nth-child(3n + 2) .mavatar {
  background: linear-gradient(150deg, var(--t-codex), var(--t-agent));
}
.mrow:nth-child(4n) .mavatar {
  background: linear-gradient(150deg, var(--money), #ef4444);
}
.ind {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2.5px solid var(--ink-850);
}
.ind.on {
  background: var(--pos);
  box-shadow: 0 0 7px rgba(61, 220, 151, 0.7);
  animation: pulse 2.6s ease-in-out infinite;
}
.ind.off {
  background: rgba(255, 255, 255, 0.16);
}
.mname {
  font-size: 13.5px;
  color: var(--text-bold);
  font-weight: 600;
}
.muser {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--dim);
  margin-top: 1px;
}

/* ── Balance card (credits) ──────────────────────────────────────── */
.credit-balance {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(150deg, var(--money-dim), transparent 70%), var(--ink-850);
  border: 1px solid var(--line-warm);
  border-radius: var(--radius);
  padding: 22px 24px;
}
.credit-balance::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--money), var(--money-hi));
}
.credit-balance .v {
  font-family: var(--font-mono);
  font-size: 36px;
  font-weight: 500;
  color: var(--text-bold);
  line-height: 1;
}
.credit-balance .v .cur {
  font-size: 22px;
  color: var(--money);
}

.amount-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.amt {
  padding: 11px;
  border-radius: 0;
  background: var(--ink-800);
  border: 1px solid var(--line);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  transition: all 0.13s;
}
.amt:hover {
  background: var(--money-dim);
  border-color: var(--line-warm);
  color: var(--money-hi);
}

.raw-key {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--ink-950);
  border: 1px solid var(--signal-dim);
  border-radius: 0;
  padding: 14px;
  word-break: break-all;
  color: var(--signal-hi);
  line-height: 1.7;
}
.warn-box {
  background: rgba(255, 107, 107, 0.07);
  border: 1px solid rgba(255, 107, 107, 0.18);
  border-radius: 0;
  padding: 11px 14px;
  font-size: 12.5px;
  color: #ffb3b3;
  line-height: 1.5;
}
.info-box {
  background: var(--signal-dim);
  border: 1px solid rgba(45, 206, 137, 0.18);
  border-radius: 0;
  padding: 13px 16px;
  font-size: 13px;
  color: var(--signal-hi);
  display: flex;
  gap: 10px;
  align-items: flex-start;
  line-height: 1.5;
}

/* ── Allocate box ────────────────────────────────────────────────── */
.panel {
  padding: 18px;
}
.panel-h {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--text-bold);
  margin-bottom: 12px;
}

/* ── Billing page ─────────────────────────────────────────────────── */

/* Hero balance card */
.bill-hero {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--ink-850);
  border: 1px solid var(--line);
  margin-bottom: 12px;
  overflow: hidden;
  position: relative;
}
/* No coloured top border — keep settings chrome uniform */
.bill-hero-left {
  padding: 28px 32px;
  flex: 0 0 auto;
  border-right: 1px solid var(--line);
  min-width: 220px;
}
.bill-hero-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 12px;
}
.bill-hero-amount {
  display: flex;
  align-items: baseline;
  gap: 3px;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 42px;
  line-height: 1;
  color: var(--text-bold);
  letter-spacing: -0.03em;
  margin-bottom: 8px;
}
.bill-hero-cur {
  font-size: 22px;
  color: var(--muted);
  opacity: 1;
}
.bill-hero-sub {
  font-size: 11.5px;
  color: var(--muted);
}
.bill-hero-right {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 28px 32px;
}
.bill-bar-wrap {
  width: 100%;
}
.bill-bar-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 10px;
  font-family: var(--font-mono);
}
.bill-bar-track {
  height: 6px;
  background: var(--ink-800);
  border: 1px solid var(--line);
  overflow: hidden;
}
.bill-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--money) 0%, var(--money-hi) 100%);
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Stat metrics row */
.bill-stats {
  display: flex;
  gap: 0;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  background: var(--ink-850);
}
.bill-stat {
  flex: 1;
  padding: 18px 24px;
  border-right: 1px solid var(--line);
}
.bill-stat:last-child {
  border-right: none;
}
.bill-stat-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 8px;
}
.bill-stat-val {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 22px;
  color: var(--text-bold);
  letter-spacing: -0.02em;
}
.bill-stat-cur {
  font-size: 13px;
  color: var(--muted);
}

/* "Last 50 events" note */
.bill-hist-note {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--dim);
}

/* Transaction list container */
.bill-tx-list {
  max-height: 480px;
  overflow-y: auto;
}

/* Transaction ledger rows */
.bill-tx-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
  transition: background 0.14s;
}
.bill-tx-row:last-child {
  border-bottom: none;
}
.bill-tx-row:hover {
  background: rgba(255, 255, 255, 0.025);
}
.bill-tx-ico {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--rc, var(--signal)) 10%, transparent);
  color: var(--rc, var(--signal));
  border: 1px solid color-mix(in srgb, var(--rc, var(--signal)) 20%, transparent);
}
.bill-tx-main {
  flex: 1;
  min-width: 0;
}
.bill-tx-who {
  font-size: 13px;
  color: var(--text-bold);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bill-tx-desc {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bill-tx-right {
  flex-shrink: 0;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}
.bill-tx-amt {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.bill-tx-amt.pos { color: var(--pos); }
.bill-tx-amt.neg { color: var(--neg); }
.bill-tx-time {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--dim);
}

/* ── Modals ──────────────────────────────────────────────────────── */
.backdrop {
  position: fixed;
  inset: 0;
  background: rgba(3, 5, 12, 0.74);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.backdrop.open {
  display: flex;
}
.modal {
  width: 100%;
  max-width: 440px;
  padding: 26px;
  background: var(--ink-850);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.7);
  animation: modalIn 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modalIn {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(-12px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.modal-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--text-bold);
  letter-spacing: -0.015em;
}
.modal-actions {
  display: flex;
  gap: 9px;
  margin-top: 22px;
}
.modal-actions .btn {
  flex: 1;
  justify-content: center;
}

.swatches {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.swatch {
  width: 26px;
  height: 26px;
  border-radius: 0;
  cursor: pointer;
  border: 2px solid transparent;
  transition:
    transform 0.12s,
    box-shadow 0.12s;
}
.swatch:hover {
  transform: scale(1.15);
}
.swatch.sel {
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
}

/* ── Toasts (bottom-right) ───────────────────────────────────────── */
#toasts {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 200;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  pointer-events: none;
  width: 340px;
  max-width: calc(100vw - 32px);
}
.toast {
  position: relative;
  overflow: hidden;
  pointer-events: all;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 14px 13px 14px;
  background: var(--ink-800);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  animation: toastIn 0.34s cubic-bezier(0.16, 1, 0.3, 1);
}
.toast::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--tc, var(--signal));
}
@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes toastOut {
  to {
    opacity: 0;
    transform: translateX(28px) scale(0.97);
  }
}
.toast.leaving {
  animation: toastOut 0.28s cubic-bezier(0.4, 0, 1, 1) forwards;
}
.toast-ico {
  width: 26px;
  height: 26px;
  border-radius: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--tc) 16%, transparent);
  color: var(--tc);
  margin-top: 1px;
}
.toast-body {
  flex: 1;
  min-width: 0;
}
.toast-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-bold);
  letter-spacing: -0.01em;
}
.toast-msg {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.4;
  word-break: break-word;
}
.toast-x {
  background: none;
  border: none;
  color: var(--dim);
  cursor: pointer;
  padding: 3px;
  border-radius: 0;
  display: flex;
  flex-shrink: 0;
  transition:
    color 0.12s,
    background 0.12s;
}
.toast-x:hover {
  color: var(--text-bold);
  background: rgba(255, 255, 255, 0.07);
}
.toast-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  background: var(--tc);
  opacity: 0.55;
  width: 100%;
  transform-origin: left;
  animation: toastBar var(--dur, 4s) linear forwards;
}
@keyframes toastBar {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}
.toast-success {
  --tc: var(--pos);
}
.toast-error {
  --tc: var(--neg);
}
.toast-info {
  --tc: var(--signal);
}

/* ── Sync status pill ────────────────────────────────────────────── */
.sync-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 0;
  border: 1px solid var(--line);
  background: var(--ink-800);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.sync-pill .sd {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dim);
}
.sync-pill.live {
  border-color: rgba(61, 220, 151, 0.28);
  color: var(--pos);
}
.sync-pill.live .sd {
  background: var(--pos);
  box-shadow: 0 0 8px rgba(61, 220, 151, 0.7);
  animation: pulse 2s ease-in-out infinite;
}
.sync-pill.polling {
  border-color: var(--line-warm);
  color: var(--money);
}
.sync-pill.polling .sd {
  background: var(--money);
  box-shadow: 0 0 8px var(--money-glow);
  animation: pulse 2.6s ease-in-out infinite;
}
.sync-pill.offline {
  color: var(--neg);
  border-color: rgba(255, 107, 107, 0.28);
}
.sync-pill.offline .sd {
  background: var(--neg);
}

/* ── Activity console ────────────────────────────────────────────── */
/* One integrated filter bar, styled like the app's other inputs (.input:
   square corners, --ink-950/--line, green focus ring) rather than a floating
   pill. Committed filters render as removable chips inside the same bar
   (GitLab-style), with typed `key:value` shorthand still supported —
   see onActInput/extractActTokens in app.js. A hairline rule under the whole
   bar separates it from the feed below. */
.act-filters {
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.act-search {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--ink-950);
  width: 100%;
  transition: border-color 0.14s, box-shadow 0.14s;
  cursor: text;
}
.act-search:focus-within {
  border-color: rgba(45, 206, 137, 0.5);
  box-shadow: 0 0 0 3px rgba(45, 206, 137, 0.1);
}
.act-search-icon {
  flex-shrink: 0;
  color: var(--dim);
  margin-left: 2px;
}
.act-chip-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.act-chip-row:empty {
  display: none;
}
.act-search input {
  flex: 1;
  min-width: 120px;
  border: none;
  background: none;
  outline: none;
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  padding: 2px;
}
.act-search input::placeholder {
  color: var(--dim);
}
.act-result-count {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--dim);
  white-space: nowrap;
  padding: 0 2px;
}
.act-result-count:empty {
  display: none;
}
.act-search-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.act-search-clear:hover {
  background: rgba(255, 255, 255, 0.14);
  color: var(--text-bold);
}
.act-search-clear.hidden {
  display: none;
}
/* Filter chip — two-tone token like GitLab's, built on the app's existing
   .ctag look (square, monospace, hairline border) rather than a new style. */
.act-token {
  display: inline-flex;
  align-items: stretch;
  font-family: var(--font-mono);
  font-size: 10.5px;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  flex-shrink: 0;
  animation: act-token-in 0.16s ease-out;
}
@keyframes act-token-in {
  from {
    opacity: 0;
    transform: translateY(-2px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.act-token-k,
.act-token-v {
  display: flex;
  align-items: center;
  padding: 4px 7px;
  white-space: nowrap;
}
.act-token-k {
  background: rgba(255, 255, 255, 0.05);
  color: var(--dim);
}
.act-token-v {
  background: rgba(45, 206, 137, 0.08);
  color: var(--text);
}
.act-token-x {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: var(--dim);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.act-token-x:hover {
  background: rgba(250, 77, 86, 0.15);
  color: var(--neg);
}
/* Two-step key/value dropdown — reuses the workspace switcher's floating
   menu chrome (glass background, blur, rise animation) so it reads as this
   app's menu style rather than a new one. */
.act-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 200px;
  max-height: 260px;
  overflow-y: auto;
  background: var(--tv-glass-bg);
  border: 1px solid var(--tv-glass-border);
  border-radius: var(--tv-radius-md);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  padding: 6px;
  z-index: 40;
  display: none;
  animation: rise 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.act-dropdown.open {
  display: block;
}
.act-dd-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--tv-radius-md);
  cursor: pointer;
  color: var(--text);
  font-size: 13px;
  text-align: left;
  background: none;
  border: none;
}
.act-dd-item:hover {
  background: rgba(255, 255, 255, 0.06);
}
.act-dd-item.hl {
  background: rgba(45, 206, 137, 0.12);
  color: var(--text-bold);
}
@media (max-width: 640px) {
  .act-search input {
    min-width: 80px;
  }
}
.act-detail {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12.5px;
}
.act-agent {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}
/* Small agent-colour indicator dot — used inside .ctag agent chips (the
   drawer header's own agent chip; the Activity card's provider chip no
   longer uses one now that its icon carries the brand colour instead). */
.cdot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  opacity: 0.8;
}

.act-day {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px 4px 12px;
}
.act-day:first-child {
  padding-top: 8px;
}
.act-day-k {
  font-family: var(--font-display);
  font-weight: 600;
  font-stretch: 113%;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  white-space: nowrap;
}
.act-day-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
}
.act-day-sum {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--money);
  font-weight: 500;
  background: var(--money-dim);
  padding: 2px 8px;
  border-radius: 0;
  border: 1px solid var(--line-warm);
}

.act-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: none;
  border-radius: 0;
  background: rgba(36, 36, 36, 0.4);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  margin-bottom: 8px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  position: relative;
  overflow: hidden;
  /* Match .sess-card's fixed height so the feed reads as one uniform grid
     regardless of row type (session card vs. admin/event row). */
  height: 62px;
}
.act-row:hover {
  background: rgba(45, 45, 45, 0.6);
}
.act-row.fresh {
  animation: freshIn 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  border-color: var(--rc, var(--signal));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--rc, var(--signal)) 30%, transparent),
    0 0 24px color-mix(in srgb, var(--rc, var(--signal)) 18%, transparent);
}
@keyframes freshIn {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.95);
    filter: blur(4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* Minimal, flat circular badge — deliberately quieter than .sess-avatar
   (usage/session cards): these are administrative/access events (key
   created, joined workspace, credits, …), not something that needs its
   own color-coded taxonomy or glow. */
.act-ico {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--rc, var(--signal)) 10%, transparent);
  color: var(--rc, var(--signal));
  border: 1px solid
    color-mix(in srgb, var(--rc, var(--signal)) 22%, transparent);
  transition: opacity 0.2s ease;
}
.act-row:hover .act-ico {
  opacity: 0.9;
}

.act-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  overflow: hidden;
}
.act-text {
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.act-text b {
  color: var(--text-bold);
  font-weight: 600;
}

/* Single line, no wrap — never grows the fixed-height row; overflow scrolls
   (hidden scrollbar) instead, same treatment as .sess-meta. */
.act-chips {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  gap: 6px;
  min-height: 19px;
}
.act-chips::-webkit-scrollbar {
  display: none;
}
.act-chips .ctag {
  flex-shrink: 0;
}
.ctag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  padding: 4px 8px;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--muted);
  transition: all 0.25s;
}
.act-row:hover .ctag {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--text);
}

.act-right {
  text-align: right;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
}
.act-cost {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-bold);
}
.act-time {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--dim);
  white-space: nowrap;
  transition: color 0.25s;
}
.act-row:hover .act-time {
  color: var(--muted);
}

/* ── Empty / skeleton ────────────────────────────────────────────── */
.empty {
  text-align: center;
  padding: 46px 24px;
  color: var(--dim);
  font-size: 13px;
}
.empty svg {
  opacity: 0.35;
  margin: 0 auto 12px;
  display: block;
}
.empty strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 4px;
}
.skel {
  color: var(--dim);
  padding: 40px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.skel::before {
  content: "";
  width: 22px;
  height: 22px;
  border: 2px solid var(--line);
  border-top-color: var(--money);
  border-radius: 50%;
  animation: skel-spin 0.75s ease-in-out infinite;
}
@keyframes skel-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ── Shimmer skeletons — stat cards + activity placeholder rows ─────
   Shape-matched placeholders instead of a bare spinner/em-dash, so the real
   content settles into the same footprint instead of popping the layout. */
@keyframes sk-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
.ov-stat-grid.loading .ov-stat-v,
.ov-stat-grid.loading .ov-stat-sub {
  color: transparent;
  border-radius: 4px;
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 25%,
    rgba(255, 255, 255, 0.1) 37%,
    rgba(255, 255, 255, 0.04) 63%
  );
  background-size: 400% 100%;
  animation: sk-shimmer 1.4s ease-in-out infinite;
  text-shadow: none;
}
.sk-row {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  height: 62px;
  margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.03);
}
.sk-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-right: 12px;
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 25%,
    rgba(255, 255, 255, 0.1) 37%,
    rgba(255, 255, 255, 0.04) 63%
  );
  background-size: 400% 100%;
  animation: sk-shimmer 1.4s ease-in-out infinite;
}
.sk-lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sk-bar {
  height: 10px;
  border-radius: 4px;
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 25%,
    rgba(255, 255, 255, 0.1) 37%,
    rgba(255, 255, 255, 0.04) 63%
  );
  background-size: 400% 100%;
  animation: sk-shimmer 1.4s ease-in-out infinite;
}

.divider {
  border: none;
  border-top: 1px solid var(--line);
  margin: 22px 0;
}

/* ── Mobile ──────────────────────────────────────────────────────── */
.mobile-bar {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(22, 22, 22, 0.95);
  position: sticky;
  top: 0;
  z-index: 16;
  backdrop-filter: blur(12px);
}
#mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 18;
}
#mobile-overlay.open {
  display: block;
}

/* ── RCP event rows ──────────────────────────────────────────────── */
.rcp-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--line);
  transition: background 0.12s;
}
.rcp-row:last-child {
  border-bottom: none;
}
.rcp-row:hover {
  background: rgba(255, 255, 255, 0.025);
}
.rcp-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}
.rcp-main {
  flex: 1;
  min-width: 0;
}
.rcp-label {
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
}
.rcp-meta {
  font-size: 11px;
  color: var(--dim);
  margin-top: 3px;
  font-family: var(--font-mono);
}
.rcp-time {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--dim);
  white-space: nowrap;
  flex-shrink: 0;
}

@media (max-width: 1080px) {
  .ov-lower {
    grid-template-columns: 1fr;
  }
  .ov-lower-left,
  .ov-lower-right {
    grid-column: auto;
  }
}
@media (max-width: 860px) {
  .ov-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 720px) {
  #sidebar {
    position: fixed;
    left: calc(-1 * var(--sidebar-w));
    top: 0;
    z-index: 50;
    transition: left 0.25s ease;
  }
  #sidebar.open {
    left: 0;
    box-shadow: 16px 0 56px rgba(0, 0, 0, 0.7);
  }
  .mobile-bar {
    display: flex;
  }
  .topbar {
    display: none;
  }
  .section {
    padding: 18px 16px 48px;
  }
  #mobile-overlay.open {
    z-index: 45;
  }
}

.ask-rt-btn {
  background: #1e1e1e;
  border-color: #393939;
}
.ask-rt-modal {
  background: #262626;
  border-color: #525252;
}
.sb-gauge {
  background: transparent;
  border: 1px solid #393939;
  margin: 8px 14px 12px;
}
.sb-gauge .g-k {
  color: #8d8d8d;
  font-family: var(--font-body);
  font-weight: 500;
  font-stretch: 100%;
  letter-spacing: 0.06em;
}
.sb-foot {
  border-top-color: #393939;
}
.avatar {
  background: #0f62fe;
  box-shadow: none;
}
.icon-btn {
  border-radius: 0 !important;
}

/* Header */
.topbar {
  background: rgba(26, 26, 26, 0.92);
  border-bottom-color: #393939;
}
.bal-pill {
  background: transparent;
  border-color: #393939;
  padding: 6px 12px;
}
.bal-pill:hover {
  background: #333333;
  border-color: #525252;
}
.bal-pill .dot {
  background: var(--signal);
  box-shadow: none;
}
.bal-pill .lab {
  color: #8d8d8d;
}

/* Primary button — IBM Blue */
.btn-primary {
  background: #0f62fe;
  color: #ffffff;
  box-shadow: none;
}
.btn-primary:hover {
  background: #0353e9;
  box-shadow: none;
  transform: none;
}
.btn-primary:active {
  background: #0043ce;
  transform: none;
}

/* Ghost + ghost inputs */
.btn-ghost {
  background: transparent;
  border-color: #393939;
}
.btn-ghost:hover {
  background: #333333;
  border-color: #525252;
}
.input {
  background: #222222;
  border-color: #393939;
}
.input:focus {
  border-color: #0f62fe;
  background: #222222;
  box-shadow: 0 0 0 1px #0f62fe;
}

/* Cards */
.card {
  background: #262626;
  border-color: #393939;
}
.card:hover {
  border-color: #525252;
}
.card-head {
  border-bottom-color: #393939;
}

/* Gauges */
.gauge {
  background: #262626;
  border-color: #393939;
}
.gauge:hover {
  transform: none;
}
.gauge--money:hover {
  border-color: rgba(245, 181, 68, 0.28);
}
.gauge--blue:hover {
  border-color: rgba(15, 98, 254, 0.28);
}
.rank-bar i {
  background: linear-gradient(90deg, #0f62fe, #4589ff);
}

/* Tables */
.table th {
  border-bottom-color: #393939;
}
.table td {
  border-bottom-color: #393939;
}
.table tbody tr:hover td {
  background: #333333;
}

/* Rank & member rows */
.rank-row {
  border-bottom-color: #393939;
}
.rank-row:hover {
  background: #333333;
}
.mrow {
  border-bottom-color: #393939;
}
.mrow:hover {
  background: #333333;
}
.feed-item {
  border-bottom-color: #393939;
}
.feed-item:hover {
  background: #333333;
}

/* Tiles */
.tile {
  background: #262626;
  border-color: #393939;
}
.tile:hover {
  border-color: #525252;
  transform: none;
  box-shadow: none;
}

/* Misc */
.toast {
  background: #262626;
  border-color: #525252;
}
.modal {
  background: #262626;
  border-color: #525252;
}
.sync-pill {
  background: #262626;
  border-color: #393939;
}
.key-chip {
  background: #222222;
  border-color: #393939;
}
.amt {
  background: #222222;
  border-color: #393939;
}
.amt:hover {
  background: rgba(15, 98, 254, 0.12);
  border-color: rgba(15, 98, 254, 0.3);
  color: #4589ff;
}
::-webkit-scrollbar-thumb {
  background: #393939 !important;
  border-radius: 0 !important;
}
::-webkit-scrollbar-thumb:hover {
  background: #525252 !important;
}
::selection {
  background: rgba(15, 98, 254, 0.28);
  color: #fff;
}

/* ── Session detail drawer ─────────────────────────────────────────── */
.sdrawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0);
  pointer-events: none;
  transition: background 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.sdrawer-backdrop.open {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  pointer-events: all;
}
.sdrawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 480px;
  max-width: 100vw;
  background: rgba(22, 22, 22, 0.85);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.3);
  z-index: 201;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
.sdrawer-backdrop.open .sdrawer {
  transform: translateX(0);
}
.sdrawer-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  height: 56px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.03) 0%,
    transparent 100%
  );
  flex-shrink: 0;
}
.sdrawer-title {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.2px;
}
.sdrawer-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: 24px;
}
.sdrawer-section {
  padding: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.sdrawer-section:last-child {
  border-bottom: none;
}
.sdrawer-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tail-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #888;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 3px 10px;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.tail-btn:hover {
  color: #ccc;
  border-color: rgba(255, 255, 255, 0.2);
}
.tail-btn .tail-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #666;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.tail-btn.on {
  color: var(--pos, #34d399);
  border-color: rgba(52, 211, 153, 0.4);
  background: rgba(52, 211, 153, 0.12);
}
.tail-btn.on .tail-dot {
  background: var(--pos, #34d399);
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.2);
  animation: tailPulse 1.4s ease-in-out infinite;
}
/* Event-timeline collapse toggle — reuses .sdrawer-label's own text styling
   (font/size/case/color) so it reads identically to a plain, non-interactive
   label, just with a chevron and a pointer cursor added. */
.timeline-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #888;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color 0.15s ease;
}
.timeline-toggle:hover {
  color: #ccc;
}
.timeline-chevron {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.timeline-chevron.open {
  transform: rotate(90deg);
}
.timeline-container.collapsed {
  display: none;
}
@keyframes tailPulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}
.sdrawer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.sdrawer-meta .ctag {
  font-size: 11.5px;
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  border-radius: 0;
}

/* ── Prompt section (session drawer) ────────────────────────────────
   The full, original prompt text — a document/prose reading surface, not
   another mono-font event row. Generous line-height + a body typeface (not
   --font-mono) so it reads like something meant to be read carefully, with
   whitespace preserved exactly as submitted (`white-space: pre-wrap` over an
   escaped string — see promptSectionHTML in app.js). */
.prompt-box {
  position: relative;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0.015)
  );
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 16px 18px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  transition: border-color 0.2s;
  max-width: 64ch;
}
.prompt-box:hover {
  border-color: rgba(255, 255, 255, 0.15);
}
.prompt-text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--text-bold);
  line-height: 1.7;
  letter-spacing: -0.005em;
  white-space: pre-wrap;
  word-break: break-word;
}
.prompt-box.collapsed {
  max-height: 184px;
  overflow: hidden;
}
.prompt-box.collapsed .prompt-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 56px;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(180deg, transparent, rgba(22, 22, 22, 0.94));
  pointer-events: none;
}
.prompt-toggle {
  display: inline-flex;
  align-items: center;
  margin-top: 10px;
  background: none;
  border: none;
  padding: 0;
  color: var(--signal-hi);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.prompt-toggle:hover {
  text-decoration: underline;
}
.prompt-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 4px 10px;
  color: #888;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.prompt-copy-btn:hover {
  color: #ccc;
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.07);
}
.prompt-copy-btn .check-icon {
  display: none;
}
.prompt-copy-btn.copied {
  color: var(--pos, #34d399);
  border-color: rgba(52, 211, 153, 0.4);
  background: rgba(52, 211, 153, 0.12);
}
.prompt-copy-btn.copied .copy-icon {
  display: none;
}
.prompt-copy-btn.copied .check-icon {
  display: inline-flex;
}

.sdrawer-files {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.timeline-container {
  position: relative;
  margin-top: 14px;
  padding-left: 4px;
}
.timeline-item {
  position: relative;
  padding-left: 48px;
  padding-bottom: 24px;
}
.timeline-item:last-child {
  padding-bottom: 16px;
}
.timeline-item:last-child .timeline-tail {
  display: none;
}
.timeline-tail {
  position: absolute;
  top: 32px;
  left: 15px;
  bottom: 0;
  width: 2px;
  background-color: rgba(255, 255, 255, 0.08);
  transition: background-color 0.3s;
}
.timeline-item:hover .timeline-tail {
  background-color: rgba(255, 255, 255, 0.2);
}
.timeline-icon-wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 4px solid var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.event-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.event-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  border-color: rgba(255, 255, 255, 0.15);
}
.event-card-stripe {
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  opacity: 0.8;
}
.event-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}
.event-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.event-tag {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 0;
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  gap: 6px;
}
.event-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-bold);
}
.event-time {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  margin-top: 2px;
}
.event-body {
  font-size: 13.5px;
  color: var(--text);
  margin-bottom: 12px;
  line-height: 1.5;
}
.event-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.event-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #fff;
  font-weight: 600;
}
.event-author {
  font-size: 12px;
  color: var(--muted);
}
.event-author strong {
  color: var(--text-bold);
}
.sdrawer-empty {
  padding: 40px 20px;
  color: #888;
  font-size: 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
@media (max-width: 600px) {
  .sdrawer {
    width: 100vw;
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    top: auto;
    height: 85vh;
    transform: translateY(100%);
    border-radius: 0;
  }
  .sdrawer-backdrop.open .sdrawer {
    transform: translateY(0);
  }
}

/* ── Clients ─────────────────────────────────────────────────── */
.clients-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.int-card {
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.03) 0%,
    rgba(255, 255, 255, 0.01) 100%
  );
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.int-card::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle at center,
    var(--bg-glow) 0%,
    transparent 50%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 0;
}
.int-card:hover {
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-4px);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.05);
}
.int-card:hover::before {
  opacity: 0.15;
}
.int-icon {
  width: 48px;
  height: 48px;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.1),
    0 4px 12px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 1;
}
.int-card.github .int-icon {
  color: #f0f6fc;
}
.int-card.gitlab .int-icon {
  color: #fc6d26;
}
.int-card.linear .int-icon {
  color: #5e6ad2;
}
.int-body {
  position: relative;
  z-index: 1;
  flex: 1;
}
.int-body h3 {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: #fff;
  letter-spacing: -0.01em;
}
.int-body p {
  font-size: 13.5px;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}
.int-card .btn {
  align-self: flex-start;
  margin-top: 8px;
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}
.int-card:hover .btn {
  background: rgba(255, 255, 255, 0.1);
}
/* ── Clients grid (agent cards) ─────────────────────────────────── */
.int-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}
.int-card {
  gap: 14px;
}
.int-card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--ac, var(--signal));
  opacity: 0.9;
  z-index: 1;
}
.int-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}
.int-name {
  font-size: 16px;
  font-weight: 650;
  color: #fff;
  letter-spacing: -0.01em;
}
.int-desc {
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
}
.int-stats {
  display: flex;
  gap: 20px;
  position: relative;
  z-index: 1;
}
.int-stats > div {
  display: flex;
  flex-direction: column;
}
.int-stat-v {
  font-size: 17px;
  font-weight: 650;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.int-stat-k {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-top: 1px;
}
/* ── Auth page — IBM Carbon centered form ──────────────────────── */
#auth-view {
  background: #161616;
}
.auth-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 400px;
}
.auth-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
}
.auth-brand-mark {
  width: 32px;
  height: 32px;
  background: #0f62fe;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.auth-brand-name {
  font-size: 15px;
  font-weight: 600;
  color: #f4f4f4;
  letter-spacing: -0.01em;
}
.auth-brand-sub {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8d8d8d;
  margin-top: 2px;
}
.auth-card-c {
  width: 100%;
  background: #262626;
  border: 1px solid #393939;
  padding: 32px;
}

/* ── Overview layout ────────────────────────────────────────────── */
.ov-header {
  margin-bottom: 24px;
}
.ov-header .page-title {
  margin-bottom: 4px;
}

.ov-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.ov-stat {
  background: rgba(36, 36, 36, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  padding: 20px 24px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.ov-stat:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(45, 45, 45, 0.6);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}
.ov-stat-k {
  font-size: 13px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-weight: 500;
}
.ov-stat-k svg {
  color: var(--signal-hi);
  filter: drop-shadow(0 0 6px rgba(15, 98, 254, 0.4));
}
.ov-stat-scope-tag {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--dim);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  padding: 2px 6px;
  margin-left: auto;
}
.ov-stat-scope-tag:empty {
  display: none;
}
.ov-stat-v {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  color: var(--text-bold);
  letter-spacing: -0.03em;
  margin: 0;
  line-height: 1;
  text-shadow: 0 4px 16px rgba(255, 255, 255, 0.1);
}
.ov-stat-sub {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--dim);
  margin: 8px 0 0;
}

/* ── Overview layout ────────────────────────────────────────────── */
.ov-section-h {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 8px;
}
.ov-lower {
  display: grid;
  /* Match the 4-up metric grid above so the lower panels align to the same
     column tracks: Recent activity under cards 1–3, Quick actions under card 4. */
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: start;
  margin-top: 0;
}
.ov-lower-left {
  grid-column: span 3;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ov-lower-right {
  grid-column: span 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Activity items (draft style) ──────────────────────────────── */
.act-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-top: 1px solid #393939;
  transition: background 0.1s;
}
.act-item:first-child {
  border-top: none;
}
.act-item:hover {
  background: #333333;
}
.act-item-ico {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #333333;
  color: #8d8d8d;
  flex-shrink: 0;
  transition:
    background 0.1s,
    color 0.1s;
}
.act-item:hover .act-item-ico {
  background: rgba(15, 98, 254, 0.12);
  color: #4589ff;
}
.act-item-body {
  flex: 1;
  min-width: 0;
}
.act-item-text {
  font-size: 13px;
  color: #f4f4f4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.act-item-meta {
  font-size: 11.5px;
  color: #8d8d8d;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.act-item-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.act-item-av {
  width: 22px;
  height: 22px;
  font-size: 8px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #161616;
  flex-shrink: 0;
}
.act-item-time {
  font-family: var(--font-mono);
  font-size: 11px;
  color: #8d8d8d;
}

/* ── Session cards (compact, icon-free standard) ─────────── */
.sess-card {
  padding: 12px 16px;
  border: none;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  margin-bottom: 8px;
  transition: background 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  /* Fixed standard size — every card is the same height regardless of how
     many chips/meta fields it has, so the feed reads as one uniform grid
     rather than a ragged list. The metadata row reserves its space and
     clips/scrolls instead of growing the card. Two rows (title + metadata),
     no icon column — deliberately shorter than the previous icon'd design. */
  height: 62px;
  display: flex;
  align-items: center;
}
.sess-card:hover {
  background: rgba(255, 255, 255, 0.05);
}
/* Identity-forward avatar — same deterministic color per person across every
   card, so an admin scanning the feed recognizes "who" by color, not just by
   re-reading the name each time. Sized to fit the fixed 62px card height. */
.sess-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  border: 1px solid transparent;
}
.sess-head {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
}
.sess-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.sess-title {
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sess-title b {
  color: var(--text-bold);
  font-weight: 600;
}
/* One combined metadata line — provider/repo/file-count chips followed by
   plain muted model/token text, all on the same row. Never wraps — a fixed
   card height means an overflowing row scrolls horizontally (hidden
   scrollbar) instead of pushing the card taller. */
.sess-meta {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  gap: 6px;
  min-height: 19px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--dim);
}
.sess-meta::-webkit-scrollbar {
  display: none;
}
.sess-meta .ctag {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 5px;
  padding: 3px 7px;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--muted);
  transition: all 0.25s;
}
.sess-card:hover .sess-meta .ctag {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--text);
}
/* The model, shown as a muted suffix inside the consolidated agent chip
   (see renderDrawerBody) — still used by the drawer header's own agent chip.
   The card itself shows Model as plain text in .sess-meta instead. */
.agent-tag-model {
  color: var(--dim);
  font-weight: 400;
}
.agent-tag-model::before {
  content: "· ";
}
.sess-card:hover .agent-tag-model {
  color: var(--muted);
}
.sess-meta-item {
  white-space: nowrap;
  flex-shrink: 0;
}
.sess-meta-sep {
  color: var(--line);
  flex-shrink: 0;
}
.sess-card:hover .sess-meta {
  color: var(--muted);
}
.sess-right {
  text-align: right;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  margin-left: 14px;
}
/* Cost — bold by weight/size, not colour, so it reads as the most important
   figure on the card without adding another colour to the (now minimal)
   palette. Status/failure colours are reserved for the status pill. */
.sess-cost {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-bold);
}
.sess-time {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--dim);
  white-space: nowrap;
  transition: color 0.25s;
}
.sess-card:hover .sess-time {
  color: var(--muted);
}

/* Status badge — reuses the same dot-indicator convention as .sync-pill
   (see above): a subtle pill with a small coloured dot. `completed` stays
   deliberately muted/quiet (it's the expected, common case), `in_progress`
   gets the live pulsing-dot treatment used elsewhere for "currently
   happening" state, and `failed` uses the app's existing danger colour
   (--neg) so it visually stands out against a feed of otherwise-quiet cards. */
.sess-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  white-space: nowrap;
}
.sess-status .sd {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dim);
  flex-shrink: 0;
}
.sess-status--completed {
  color: var(--dim);
}
.sess-status--in_progress {
  color: var(--pos);
  border-color: rgba(61, 220, 151, 0.28);
}
.sess-status--in_progress .sd {
  background: var(--pos);
  box-shadow: 0 0 8px rgba(61, 220, 151, 0.7);
  animation: pulse 2s ease-in-out infinite;
}
.sess-status--failed {
  color: var(--neg);
  border-color: rgba(250, 77, 86, 0.32);
  background: rgba(250, 77, 86, 0.08);
}
.sess-status--failed .sd {
  background: var(--neg);
}
/* Minimal in-progress indicator on activity cards — a small pulsing dot
   instead of a labeled "Active" pill. Absolutely positioned in the card's
   corner (not a flex child of .sess-right) so it never disturbs the
   cost/time gap, which stays identical to cards with no status dot. */
.sess-status-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--pos);
  box-shadow: 0 0 6px rgba(61, 220, 151, 0.7);
  animation: pulse 2s ease-in-out infinite;
}

/* Recent-activity cards reflow on narrow screens: title wraps, the
   cost/time column drops below the body, and spacing tightens up. */
@media (max-width: 600px) {
  .sess-card {
    padding: 10px 13px;
    /* Taller fixed height for the reflowed mobile layout (2-line title +
       the cost/status row dropping below), still fixed/uniform per card. */
    height: 100px;
  }
  .sess-head {
    flex-wrap: wrap;
    gap: 6px;
  }
  .sess-title {
    white-space: normal;
    overflow: hidden;
    text-overflow: clip;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
  .sess-right {
    flex-basis: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: 12px;
    margin-top: 4px;
  }
}

/* ── Quick actions ──────────────────────────────────────────────── */
.qa-list {
  border: 1px solid #393939;
}
.qa-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 14px;
  text-align: left;
  cursor: pointer;
  border: none;
  background: var(--ink-850);
  color: var(--text-bold);
  font-size: 13px;
  font-family: var(--font-body);
  transition: background 0.1s;
}
.qa-item + .qa-item {
  border-top: 1px solid var(--line);
}
.qa-item:hover {
  background: var(--ink-750);
}
.qa-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink-750);
  color: var(--muted);
  flex-shrink: 0;
  transition:
    background 0.1s,
    color 0.1s;
}

/* Compact the overview Recent-activity feed so its height sits uniformly next
   to Quick actions. Scoped to #ov-activity — the dedicated Activity page keeps
   the standard card sizes. Applies to both row types (session cards and
   admin/access event rows) so every card in this list is the same height. */
#ov-activity .sess-card,
#ov-activity .act-row {
  padding: 8px 12px;
  margin-bottom: 6px;
  height: 54px;
}
/* .sess-status-dot is anchored to the card's own top-right corner (top/right:6px),
   unaffected by the card's own padding — but shrinking the card's height also
   shrinks the vertically-centered content inside it (.sess-head), pulling the
   cost/time text up toward that fixed corner until it collides with the dot.
   Pull the dot up by the same amount the shorter card pulls its content up
   (half the 8px height reduction) so the dot keeps the same clearance above
   the cost text it has on the dedicated Activity page. */
#ov-activity .sess-status-dot {
  top: 2px;
}
.qa-item:hover .qa-icon {
  background: var(--signal-dim);
  color: var(--signal-hi);
}
.qa-label {
  flex: 1;
  font-weight: 500;
}
.qa-arrow {
  color: var(--muted);
  opacity: 0;
  transition: opacity 0.1s;
  flex-shrink: 0;
}
.qa-item:hover .qa-arrow {
  opacity: 1;
}

/* ══════════════════════════════════════════════════════════════════════
   Teams V1 — new components only (workspace switcher, members table,
   invites, settings, confirm dialog). Scoped to `tv-` classes and its own
   radius/glass tokens rather than touching --radius (0, square) or any
   existing global class, per the design call to leave the rest of the
   dashboard's square-cornered look alone.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  --tv-radius-lg: 0px;
  --tv-radius-md: 0px;
  --tv-glass-bg: rgba(38, 38, 38, 0.66);
  --tv-glass-border: rgba(255, 255, 255, 0.09);
}

/* ── Workspace switcher (top nav) ───────────────────────────────────── */
.tv-switcher {
  position: relative;
}
.tv-switcher-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: var(--tv-radius-md);
  cursor: pointer;
  color: var(--text-bold);
  font-size: 12.5px;
  font-weight: 500;
  max-width: 200px;
  transition:
    background 0.14s,
    border-color 0.14s;
}
.tv-switcher-trigger:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.16);
}
.tv-switcher-trigger .name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tv-switcher-trigger svg {
  color: var(--dim);
  flex-shrink: 0;
}
.tv-switcher-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  max-height: 340px;
  overflow-y: auto;
  background: var(--tv-glass-bg);
  border: 1px solid var(--tv-glass-border);
  border-radius: var(--tv-radius-lg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  padding: 6px;
  z-index: 40;
  display: none;
  animation: rise 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.tv-switcher-menu.open {
  display: block;
}
.tv-switcher-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--tv-radius-md);
  cursor: pointer;
  color: var(--text);
  font-size: 13px;
  text-align: left;
  background: none;
  border: none;
}
.tv-switcher-item:hover {
  background: rgba(255, 255, 255, 0.06);
}
.tv-switcher-item.active {
  color: var(--signal-hi);
}
.tv-switcher-item .slug {
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 11px;
  margin-left: auto;
}
.tv-switcher-divider {
  height: 1px;
  background: var(--line);
  margin: 6px 4px;
}
.tv-switcher-create {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--tv-radius-md);
  color: var(--signal-hi);
  font-size: 13px;
  background: none;
  border: none;
  cursor: pointer;
}
.tv-switcher-create:hover {
  background: var(--signal-dim);
}

/* ── Rounded/glass modal variant (invite, confirm, transfer-ownership) ─ */
.modal.tv-rounded {
  border-radius: var(--tv-radius-lg);
  background: var(--tv-glass-bg);
  border-color: var(--tv-glass-border);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

/* ── Members table + pending invites (rounded card) ─────────────────── */
.tv-card {
  background: var(--tv-glass-bg);
  border: 1px solid var(--tv-glass-border);
  border-radius: var(--tv-radius-lg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow: hidden;
}
.tv-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--tv-glass-border);
}
.tv-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-bold);
}
.tv-invite-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--tv-glass-border);
}
.tv-invite-row:last-child {
  border-bottom: none;
}
.tv-invite-meta {
  flex: 1;
  min-width: 0;
}
.tv-invite-meta .who {
  font-size: 13px;
  color: var(--text-bold);
  font-weight: 500;
}
.tv-invite-meta .when {
  font-size: 11.5px;
  color: var(--dim);
  font-family: var(--font-mono);
  margin-top: 2px;
}
.tv-status {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 99px;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tv-status-pending {
  color: var(--signal-hi);
  background: var(--signal-dim);
}
.tv-status-accepted {
  color: var(--pos);
  background: rgba(61, 220, 151, 0.12);
}
.tv-status-expired,
.tv-status-revoked {
  color: var(--dim);
  background: rgba(255, 255, 255, 0.05);
}

/* ── Settings ────────────────────────────────────────────────────────── */
.tv-settings-layout {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 24px;
  align-items: start;
}
.tv-settings-tabs {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tv-settings-tab {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border-radius: var(--tv-radius-md);
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  background: none;
  border: none;
  cursor: pointer;
}
.tv-settings-tab:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
}
.tv-settings-tab.active {
  background: var(--signal-dim);
  color: var(--signal-hi);
}
.tv-settings-pane {
  display: none;
}
.tv-settings-pane.active {
  display: block;
}
.tv-settings-card {
  background: var(--tv-glass-bg);
  border: 1px solid var(--tv-glass-border);
  border-radius: var(--tv-radius-lg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 20px;
  margin-bottom: 16px;
}
.tv-settings-card-h {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-bold);
  margin-bottom: 4px;
}
.tv-settings-card-sub {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 14px;
}
.tv-danger-zone {
  border-color: rgba(255, 107, 107, 0.25);
  background: rgba(255, 107, 107, 0.05);
}
.tv-danger-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid rgba(255, 107, 107, 0.15);
}
.tv-danger-row:first-of-type {
  border-top: none;
}
.tv-danger-row .t {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-bold);
}
.tv-danger-row .d {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
}

/* ── Confirm dialog ──────────────────────────────────────────────────── */
.tv-confirm-body {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  margin: 4px 0 16px;
}
.tv-confirm.danger .modal-title {
  color: var(--neg);
}

/* ── Keyboard shortcut chips (Settings help + shortcuts hint) ─────────── */
.tv-kbd-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 12.5px;
  color: var(--muted);
}
.tv-kbd {
  font-family: var(--font-mono);
  font-size: 10.5px;
  padding: 2px 7px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--text);
}

@media (max-width: 720px) {
  .tv-settings-layout {
    grid-template-columns: 1fr;
  }
}

/* ── File-event diff modal ────────────────────────────────────────────────
   Opened FROM the session drawer, which is not a .backdrop-based modal but
   its own overlay at z-index 200/201 (.sdrawer-backdrop/.sdrawer) with its
   own background+blur. A plain .backdrop's default z-index:100 renders
   underneath that, so the diff modal used to be invisible (blurred out by
   the drawer's own backdrop-filter) until the drawer was closed first. */
#modal-file-diff {
  z-index: 300;
}
#file-diff-modal {
  width: min(1040px, 94vw);
  max-width: 1040px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}
#file-diff-body {
  overflow-y: auto;
}

/* ── File-event diff viewer (session drawer timeline → click a file event) ──
   GitLab-style two-gutter diff table: old line # | new line # | +/- marker |
   syntax-highlighted code (per-language, via highlight.js — see app.js's
   languageForPath/highlightCode and index.html's CDN include). */
.gl-diff-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.6;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.gl-diff-row td {
  padding: 0 10px;
  vertical-align: top;
  white-space: pre;
}
.gl-diff-lineno {
  width: 1%;
  min-width: 34px;
  text-align: right;
  color: var(--dim);
  user-select: none;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
}
.gl-diff-lineno:first-child {
  border-right: none;
}
.gl-diff-marker {
  width: 1%;
  padding: 0 6px !important;
  text-align: center;
  user-select: none;
  font-weight: 700;
  color: var(--dim);
}
.gl-diff-code {
  width: 100%;
}
.gl-diff-row.add {
  background: rgba(66, 190, 101, 0.1);
}
.gl-diff-row.add .gl-diff-lineno,
.gl-diff-row.add .gl-diff-marker {
  background: rgba(66, 190, 101, 0.16);
  color: var(--pos);
}
.gl-diff-row.remove {
  background: rgba(250, 77, 88, 0.1);
}
.gl-diff-row.remove .gl-diff-lineno,
.gl-diff-row.remove .gl-diff-marker {
  background: rgba(250, 77, 88, 0.16);
  color: var(--neg);
}
.gl-diff-row.meta {
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font-weight: 600;
}
/* highlight.js ships its own token colors (github-dark theme, see index.html)
   which already read well against this dark background — only the
   background/gutter styling above is app-specific. */
.diff-edit-block {
  margin-bottom: 16px;
}
.diff-edit-block:last-child {
  margin-bottom: 0;
}
.diff-edit-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.diff-section-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--muted);
  margin: 12px 0 6px;
}
.diff-section-label:first-child {
  margin-top: 0;
}
.diff-block {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}
.diff-block-add {
  border-color: rgba(66, 190, 101, 0.3);
}
.diff-block-remove {
  border-color: rgba(250, 77, 88, 0.3);
}