/* ══════════════════════════════════════════════════════════
   NOD v4 — Executive Intelligence
   Accessibility-First Luxury UI
   Obsidian + White/Silver + Gold accent
   Bodoni Moda + Inter
   ══════════════════════════════════════════════════════════ */

/* ─── THEME TOKENS ─────────────────────────────────────────── */
:root {
  --gold:         #C9A84C;
  --gold-lt:      #E6C978;
  --gold-dim:     rgba(201,168,76,0.18);

  /* DARK (default) */
  --bg:           #0A0A0B;
  --bg-2:         #111114;
  --bg-3:         #18181C;
  --bg-4:         #222228;
  --surface:      #1A1A20;
  --surface-2:    #24242C;
  --border:       rgba(255,255,255,0.08);
  --border-med:   rgba(255,255,255,0.14);
  --text-1:       #F2F2F5;   /* primary — high contrast */
  --text-2:       #C8C8D4;   /* secondary */
  --text-3:       #A7A7B8;   /* muted, contrast-safe on dark surfaces */
  --text-inv:     #0A0A0B;
  --danger:       #FF4D4D;
  --danger-dim:   rgba(255,77,77,0.15);
  --success:      #4DCC8F;
  --success-dim:  rgba(77,204,143,0.12);
  --warn:         #F5A623;
  --warn-dim:     rgba(245,166,35,0.12);
  --shadow:       0 4px 32px rgba(0,0,0,0.5);
  --shadow-lg:    0 8px 64px rgba(0,0,0,0.7);
  --radius:       14px;
  --radius-sm:    8px;
  --radius-lg:    20px;
  --sidebar-w:    264px;
}

[data-theme="light"] {
  --bg:           #F4F4F0;
  --bg-2:         #ECEAE4;
  --bg-3:         #E4E2DC;
  --bg-4:         #D8D6D0;
  --surface:      #FFFFFF;
  --surface-2:    #F8F7F4;
  --border:       rgba(0,0,0,0.08);
  --border-med:   rgba(0,0,0,0.14);
  --text-1:       #0A0A0B;
  --text-2:       #2A2A34;
  --text-3:       #585866;
  --text-inv:     #F2F2F5;
  --shadow:       0 4px 32px rgba(0,0,0,0.1);
  --shadow-lg:    0 8px 64px rgba(0,0,0,0.15);
}

/* ─── RESET & BASE ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text-1);
  min-height: 100vh;
  transition: background 0.3s, color 0.3s;
  overflow-x: hidden;
}

/* ─── FOCUS ACCESSIBILITY ──────────────────────────────────── */
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ─── SCREEN SYSTEM ────────────────────────────────────────── */
.screen { display: none; min-height: 100vh; }
.screen.active { display: flex; }
.hidden { display: none !important; }

/* ─── BOOT DATA WARMUP ────────────────────────────────────── */
.boot-screen {
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 26px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), transparent 42%),
    var(--bg);
  overflow: hidden;
}

.boot-shell {
  width: min(960px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 330px);
  gap: 18px;
  align-items: stretch;
}

.boot-primary,
.boot-stage-panel {
  border: 1px solid var(--border-med);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.045), rgba(255,255,255,0.01) 54%),
    var(--surface);
  box-shadow: var(--shadow-lg);
}

.boot-primary {
  min-height: 410px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 44px;
  padding: clamp(28px, 5vw, 54px);
}

.boot-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--gold);
  font-weight: 900;
  letter-spacing: 0.18em;
}

.boot-brand span {
  color: var(--text-1);
  font-size: 1.2rem;
}

.boot-copy {
  max-width: 680px;
}

.boot-kicker,
.boot-stage-title {
  display: block;
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.boot-copy h1 {
  margin-top: 12px;
  color: var(--text-1);
  font-size: clamp(2rem, 6vw, 4.2rem);
  line-height: 0.98;
  font-weight: 900;
  letter-spacing: 0;
}

.boot-copy p {
  margin-top: 18px;
  color: var(--text-2);
  font-size: clamp(0.95rem, 2vw, 1.08rem);
  line-height: 1.6;
  max-width: 620px;
}

.boot-progress-wrap {
  width: 100%;
}

.boot-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
  color: var(--text-2);
  font-size: 0.82rem;
  font-weight: 800;
}

.boot-progress-head strong {
  color: var(--gold-lt);
  font-size: 1rem;
}

.boot-progress-track {
  width: 100%;
  height: 9px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-3);
}

.boot-progress-track span {
  display: block;
  width: 0%;
  height: 100%;
  background: var(--gold);
  transition: width 0.28s ease;
}

.boot-stage-panel {
  padding: 24px;
}

.boot-stage-list {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.boot-stage {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-3);
  color: var(--text-2);
  font-size: 0.82rem;
  font-weight: 800;
}

.boot-stage::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-3);
  opacity: 0.7;
  flex: 0 0 auto;
}

.boot-stage.active {
  border-color: rgba(201,168,76,0.45);
  background: rgba(201,168,76,0.1);
  color: var(--gold-lt);
}

.boot-stage.done::after {
  background: var(--success);
  opacity: 1;
}

.boot-stage.error {
  color: var(--warn);
}

.boot-stage.error::after {
  background: var(--warn);
  opacity: 1;
}

html[data-theme="light"] .boot-screen {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.86), rgba(247,244,236,0.72) 42%),
    var(--bg);
}

@media (max-width: 780px) {
  .boot-screen {
    padding: 16px;
    overflow-y: auto;
  }

  .boot-shell {
    grid-template-columns: 1fr;
  }

  .boot-primary {
    min-height: 360px;
  }

  .boot-stage-panel {
    padding: 18px;
  }

  .boot-stage-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 430px) {
  .boot-stage-list {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════ AUTH SCREEN ═══════════════════════════════ */
#auth-screen {
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: var(--bg);
}

.auth-bg {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
}
.auth-noise {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: 0.5;
}
.auth-glow-orb {
  position: absolute;
  border-radius: 50%;
  background: var(--gold);
  filter: blur(120px);
  opacity: 0.07;
}
.auth-glow-orb.top    { width: 500px; height: 500px; top: -200px; left: 50%; transform: translateX(-50%); }
.auth-glow-orb.bottom { width: 400px; height: 400px; bottom: -150px; right: -100px; opacity: 0.05; }

.auth-container {
  position: relative; z-index: 1;
  width: 100%; max-width: 460px;
  padding: 24px 20px;
  display: flex; flex-direction: column; align-items: center; gap: 32px;
}

.auth-brand {
  display: flex; align-items: center; gap: 14px;
}
.brand-text { display: flex; flex-direction: column; }
.brand-name {
  font-family: 'Bodoni Moda', serif;
  font-size: 2rem; font-weight: 800;
  color: var(--text-1); letter-spacing: 0.15em;
}
.brand-tagline {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--gold);
}

.auth-card {
  width: 100%; background: var(--surface);
  border: 1px solid var(--border-med);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  box-shadow: var(--shadow-lg);
}

.auth-tabs {
  display: flex; border-bottom: 1px solid var(--border);
  margin-bottom: 28px;
}
.auth-tab {
  flex: 1; background: none; border: none; cursor: pointer;
  padding: 10px; font-family: 'Inter', sans-serif;
  font-size: 1rem; font-weight: 600; color: var(--text-3);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color 0.2s, border-color 0.2s;
}
.auth-tab.active { color: var(--text-1); border-bottom-color: var(--gold); }

.tab-content { display: none; }
.tab-content.active { display: block; }

.auth-welcome { margin-bottom: 28px; }
.auth-welcome h1 {
  font-family: 'Bodoni Moda', serif;
  font-size: 1.8rem; font-weight: 700; color: var(--text-1);
  margin-bottom: 4px;
}
.auth-welcome p { color: var(--text-3); font-size: 0.9rem; }

.field-group { margin-bottom: 18px; }
.field-group label {
  display: block; font-size: 0.82rem; font-weight: 700;
  color: var(--text-2); margin-bottom: 7px; letter-spacing: 0.04em;
  text-transform: uppercase;
}
.field-group input, .field-group select, .field-group textarea {
  width: 100%; padding: 13px 16px;
  background: var(--bg-3); border: 1.5px solid var(--border-med);
  border-radius: var(--radius-sm); color: var(--text-1);
  font-family: 'Inter', sans-serif; font-size: 1rem;
  transition: border-color 0.2s, background 0.2s;
}
.field-group input::placeholder { color: var(--text-3); }
.field-group input:focus { border-color: var(--gold); background: var(--bg-2); outline: none; }

.field-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.password-wrap { position: relative; }
.password-wrap input { padding-right: 46px; }
.pwd-toggle {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; color: var(--text-3);
  padding: 6px;
}

.phone-wrap { display: flex; align-items: center; gap: 0; }
.phone-flag {
  padding: 13px 14px; background: var(--bg-4);
  border: 1.5px solid var(--border-med); border-right: none;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  color: var(--text-2); font-weight: 700;
}
.phone-wrap input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

.field-hint { font-size: 0.78rem; color: var(--text-3); margin-top: 5px; display: block; }

.auth-meta {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 20px;
}
.checkbox-label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 0.88rem; color: var(--text-2); }
.checkbox-label input { accent-color: var(--gold); width: 16px; height: 16px; }

.invite-group-options {
  display: grid;
  gap: 8px;
  max-height: 190px;
  overflow: auto;
  padding: 8px;
  border: 1px solid var(--border-med);
  border-radius: var(--radius-sm);
  background: var(--bg-3);
}

/* Post-launch Codeflow and unified knowledge search */
.codeflow-kicker {
  display: block;
  margin-bottom: 6px;
  color: var(--gold);
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.codeflow-status-strip {
  display: grid;
  grid-template-columns: 1.35fr 1.1fr repeat(3, 1fr);
  margin: 22px 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.codeflow-status-strip > div {
  min-width: 0;
  padding: 17px 20px;
  border-right: 1px solid var(--border);
}

.codeflow-status-strip > div:last-child { border-right: 0; }
.codeflow-status-strip span,
.codeflow-card-head span,
.codeflow-review-item span,
.codeflow-review-item small,
.knowledge-result span {
  display: block;
  color: var(--text-3);
  font-size: .72rem;
}
.codeflow-status-strip strong { display: block; margin-top: 6px; overflow: hidden; text-overflow: ellipsis; color: var(--text-1); font-size: .96rem; white-space: nowrap; }
.codeflow-copy-id {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-1);
  font: inherit;
  font-size: .86rem;
  font-weight: 800;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.codeflow-copy-id:disabled {
  color: var(--text-3);
  cursor: default;
}

.codeflow-pipeline-card,
.codeflow-review-panel,
.codeflow-guardrail-card,
.locker-intelligence-search,
.locker-search-results {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.codeflow-pipeline-card { padding: 22px; background: linear-gradient(145deg, rgba(201,168,76,.075), transparent 42%), var(--surface); }
.codeflow-card-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.codeflow-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.codeflow-download-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}
.codeflow-card-head strong { display: block; margin-top: 4px; font-size: 1.05rem; }
.codeflow-card-head em { padding: 6px 10px; border: 1px solid rgba(201,168,76,.35); border-radius: 999px; color: var(--gold); font-size: .68rem; font-style: normal; font-weight: 800; }
.codeflow-setup-card {
  margin-bottom: 18px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, rgba(104,180,255,.06), transparent 45%),
    var(--surface);
}
.codeflow-setup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}
.codeflow-setup-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  min-height: 148px;
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.018);
}
.codeflow-setup-step > b,
.codeflow-settings-steps b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(201,168,76,.34);
  border-radius: 50%;
  background: rgba(201,168,76,.09);
  color: var(--gold);
  font-size: .68rem;
  line-height: 1;
}
.codeflow-setup-step > div {
  display: flex;
  min-width: 0;
  min-height: 116px;
  flex-direction: column;
  gap: 9px;
}
.codeflow-setup-step strong,
.codeflow-setup-step small,
.codeflow-setup-step code {
  display: block;
}
.codeflow-setup-step strong {
  color: var(--text-1);
  font-size: .86rem;
  line-height: 1.2;
}
.codeflow-setup-step small {
  color: var(--text-3);
  font-size: .7rem;
  line-height: 1.45;
}
.codeflow-setup-step :where(a, button) {
  align-self: flex-start;
  margin-top: auto;
}
.codeflow-setup-step code {
  width: 100%;
  margin-top: auto;
  padding: 8px 10px;
  overflow-wrap: anywhere;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(0,0,0,.16);
  color: var(--text-1);
  font-size: .72rem;
}
.codeflow-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}
.codeflow-setup-note {
  margin: 14px 0 0;
  color: var(--text-3);
  font-size: .74rem;
  line-height: 1.5;
}
.codeflow-settings-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}
.codeflow-settings-steps span {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font-size: .72rem;
  line-height: 1.35;
}
.codeflow-pipeline { display: flex; align-items: stretch; gap: 8px; }
.codeflow-pipeline > i { align-self: center; color: var(--text-3); font-style: normal; }
.codeflow-step { display: flex; flex: 1; gap: 11px; min-width: 0; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgba(255,255,255,.018); }
.codeflow-step.active { border-color: rgba(201,168,76,.42); background: rgba(201,168,76,.07); }
.codeflow-step > b { color: var(--gold); font-size: .65rem; }
.codeflow-step span { min-width: 0; }
.codeflow-step strong, .codeflow-step small { display: block; }
.codeflow-step strong { margin-bottom: 5px; color: var(--text-1); font-size: .82rem; }
.codeflow-step small { color: var(--text-3); font-size: .67rem; line-height: 1.4; }

.codeflow-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(260px, .75fr); gap: 18px; margin-top: 18px; }
.codeflow-review-panel, .codeflow-guardrail-card { padding: 22px; }
.codeflow-review-panel .section-header { margin-top: 0; }
.codeflow-review-panel h3 { margin: 3px 0 0; }
.codeflow-empty { display: grid; justify-items: center; padding: 44px 20px; border: 1px dashed var(--border-med); border-radius: var(--radius-sm); text-align: center; }
.codeflow-empty > span { display: grid; width: 46px; height: 46px; margin-bottom: 14px; place-items: center; border-radius: 12px; background: rgba(201,168,76,.1); color: var(--gold); font-size: .82rem; font-weight: 900; }
.codeflow-empty p { max-width: 520px; margin: 8px 0 16px; color: var(--text-3); font-size: .82rem; line-height: 1.6; }
.codeflow-review-list { display: grid; gap: 10px; }
.codeflow-review-item { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.codeflow-review-avatar { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 10px; background: rgba(201,168,76,.12); color: var(--gold); font-weight: 900; }
.codeflow-review-item strong { display: block; margin: 4px 0; }
.codeflow-update-status { color: var(--gold); font-size: .7rem; font-style: normal; font-weight: 800; text-transform: capitalize; }
.codeflow-review-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; grid-column: 2 / -1; }
.codeflow-review-next { grid-column: 2 / -1; padding: 10px 12px; border: 1px solid rgba(201,168,76,.18); border-radius: var(--radius-xs); background: rgba(201,168,76,.07); color: var(--text-2); font-size: .76rem; line-height: 1.45; }
.codeflow-review-next b { color: var(--gold); }
.codeflow-guardrail-card { background: linear-gradient(160deg, rgba(104,180,255,.06), transparent 50%), var(--surface); }
.codeflow-guardrail-card h3 { margin: 3px 0 10px; }
.codeflow-guardrail-card p { color: var(--text-2); font-size: .82rem; line-height: 1.65; }
.codeflow-guardrail-card ul { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.codeflow-guardrail-card li { position: relative; padding-left: 20px; color: var(--text-2); font-size: .76rem; }
.codeflow-guardrail-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 8px;
  height: 4px;
  border-left: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(-45deg);
}

.locker-intelligence-search { margin: 20px 0 14px; padding: 22px; background: linear-gradient(145deg, rgba(201,168,76,.09), transparent 44%), var(--surface); }
.locker-search-copy strong, .locker-search-copy small { display: block; }
.locker-search-copy strong { font-size: 1.04rem; }
.locker-search-copy small { margin-top: 5px; color: var(--text-3); }
.locker-search-form { display: grid; grid-template-columns: 20px minmax(0,1fr) auto; align-items: center; gap: 10px; margin-top: 18px; padding: 7px 7px 7px 14px; border: 1px solid var(--border-med); border-radius: var(--radius-sm); background: var(--surface-2); }
.locker-search-form:focus-within { border-color: rgba(201,168,76,.62); box-shadow: 0 0 0 3px rgba(201,168,76,.09); }
.locker-search-form svg { width: 18px; color: var(--gold); }
.locker-search-form input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--text-1); font: inherit; }
.locker-source-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.locker-source-chip { padding: 6px 10px; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--text-3); cursor: pointer; font: inherit; font-size: .7rem; }
.locker-source-chip.active { border-color: rgba(201,168,76,.45); background: rgba(201,168,76,.09); color: var(--gold); }
.locker-source-row > span { margin-left: auto; color: var(--text-3); font-size: .7rem; }
.locker-search-results { margin-bottom: 14px; padding: 20px; }
.knowledge-result-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 12px; }
.knowledge-result-head strong { display: block; }
.knowledge-result-list { display: grid; gap: 8px; }
.knowledge-result { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; align-items: center; gap: 13px; padding: 13px; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; transition: .16s ease; }
.knowledge-result:hover, .knowledge-result:focus { border-color: rgba(201,168,76,.42); transform: translateY(-1px); outline: none; }
.knowledge-result-type { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 11px; background: rgba(201,168,76,.1); color: var(--gold); font-size: .65rem; font-weight: 900; }
.knowledge-result-type.is-drive { background: rgba(66,133,244,.12); color: #78A7FF; }
.knowledge-result strong { display: block; margin: 4px 0; }
.knowledge-result p { margin: 0; color: var(--text-2); font-size: .75rem; line-height: 1.45; }
.knowledge-result > em { color: var(--gold); font-size: .72rem; font-style: normal; }

@media (max-width: 980px) {
  .codeflow-status-strip { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .codeflow-status-strip > div { border-bottom: 1px solid var(--border); }
  .codeflow-status-strip > div:nth-child(2n) { border-right: 0; }
  .codeflow-status-strip > div:last-child { border-bottom: 0; }
  .codeflow-settings-steps { grid-template-columns: 1fr; }
  .codeflow-pipeline { display: grid; grid-template-columns: 1fr; }
  .codeflow-pipeline > i { transform: rotate(90deg); justify-self: center; }
  .codeflow-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .codeflow-status-strip { grid-template-columns: 1fr; }
  .codeflow-status-strip > div { border-right: 0; border-bottom: 1px solid var(--border); }
  .codeflow-status-strip > div:last-child { border-bottom: 0; }
  .codeflow-card-head { align-items: flex-start; flex-direction: column; }
  .codeflow-card-head > button { width: 100%; }
  .codeflow-setup-card { padding: 18px; }
  .codeflow-setup-grid { grid-template-columns: 1fr; }
  .codeflow-setup-step { min-height: 0; }
  .codeflow-setup-step > div { min-height: 0; }
  .codeflow-inline-actions :where(button, a),
  .codeflow-setup-step :where(a, button) { width: 100%; }
  .locker-search-form { grid-template-columns: 20px minmax(0,1fr); }
  .locker-search-form button { grid-column: 1 / -1; }
  .locker-source-row { flex-wrap: wrap; }
  .locker-source-row > span { width: 100%; margin-left: 0; }
  .knowledge-result { grid-template-columns: 42px minmax(0,1fr); }
  .knowledge-result > em { display: none; }
}

.connections-status-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 22px 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.connections-status-strip > div {
  min-width: 0;
  padding: 17px 20px;
  border-right: 1px solid var(--border);
}

.connections-status-strip > div:last-child { border-right: 0; }
.connections-status-strip span,
.connections-status-strip small {
  display: block;
  color: var(--text-3);
  font-size: .72rem;
}
.connections-status-strip strong {
  display: block;
  margin: 6px 0 4px;
  overflow: hidden;
  color: var(--text-1);
  font-size: .96rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.connections-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .75fr);
  gap: 18px;
  margin-bottom: 18px;
}

.connections-layout-equal {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.connections-layout-wide {
  grid-template-columns: 1fr;
}

.connections-panel {
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.connections-panel-main {
  background:
    linear-gradient(145deg, rgba(201,168,76,.055), transparent 48%),
    var(--surface);
}

.connections-doctor-grid,
.connection-app-grid,
.connections-token-list,
.connections-check-list,
.connections-audit-list,
.connections-api-list {
  display: grid;
  gap: 10px;
}

.connection-app-grid {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.connection-app-card,
.connection-doctor-card,
.connection-token-item,
.connection-check-item,
.connection-audit-item,
.connection-api-row {
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.018);
}

.connection-app-card.connected,
.connection-doctor-card.ready,
.connection-check-item.ready,
.connection-token-item.active {
  border-color: rgba(70, 190, 120, .28);
}

.connection-doctor-card.needs-work,
.connection-check-item.needs-work {
  border-color: rgba(201,168,76,.34);
  background: rgba(201,168,76,.055);
}

.connection-app-top,
.connection-doctor-head,
.connection-token-item,
.connection-check-item,
.connection-api-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.connection-app-top > div,
.connection-doctor-head > div,
.connection-token-item > div,
.connection-check-item > div,
.connection-api-row > div {
  min-width: 0;
  flex: 1;
}

.connection-app-top strong,
.connection-doctor-head strong,
.connection-token-item strong,
.connection-check-item strong,
.connection-audit-item strong,
.connection-api-row strong {
  display: block;
  overflow: hidden;
  color: var(--text-1);
  font-size: .86rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.connection-app-top small,
.connection-doctor-head small,
.connection-token-item small,
.connection-check-item small,
.connection-audit-item small,
.connection-api-row small {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: var(--text-3);
  font-size: .72rem;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.connection-app-mark,
.connection-doctor-dot,
.connection-check-item > span {
  display: grid;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(201,168,76,.34);
  background: rgba(201,168,76,.09);
  color: var(--gold);
  font-size: .64rem;
  font-weight: 900;
}

.connection-app-card.connected .connection-app-mark,
.connection-doctor-card.ready .connection-doctor-dot,
.connection-check-item.ready > span {
  border-color: rgba(70, 190, 120, .35);
  background: rgba(70, 190, 120, .1);
  color: var(--success);
}

.connection-app-card.disconnected .connection-app-mark {
  border-color: var(--border-med);
  background: var(--surface-2);
  color: var(--text-3);
}

.connection-doctor-dot::before { content: "!"; }
.connection-doctor-card.ready .connection-doctor-dot::before { content: "OK"; }

.connection-app-top em,
.connection-doctor-head em,
.connection-token-item em,
.connection-api-row em {
  flex: 0 0 auto;
  color: var(--gold);
  font-size: .68rem;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.connection-app-card.disconnected .connection-app-top em {
  color: var(--text-3);
}

.connection-app-meta {
  margin-top: 12px;
  color: var(--text-3);
  font-size: .7rem;
}

.connection-card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

.connection-token-item.revoked {
  opacity: .66;
}

.connection-audit-item {
  display: grid;
  gap: 4px;
}

.connection-audit-item span {
  color: var(--text-3);
  font-size: .68rem;
}

.connection-api-row b {
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 91, 91, .3);
  color: var(--danger);
  font-size: .65rem;
}

.connections-empty {
  padding: 22px;
  border: 1px dashed var(--border-med);
  border-radius: var(--radius-sm);
  color: var(--text-3);
  text-align: center;
  font-size: .78rem;
}

@media (max-width: 980px) {
  .connections-status-strip,
  .connections-layout,
  .connections-layout-wide,
  .connections-layout-equal {
    grid-template-columns: 1fr;
  }

  .connections-status-strip > div {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .connections-status-strip > div:last-child { border-bottom: 0; }
}

@media (max-width: 620px) {
  .connections-panel { padding: 18px; }
  .connection-doctor-head,
  .connection-app-top,
  .connection-token-item,
  .connection-check-item,
  .connection-api-row {
    align-items: flex-start;
    flex-direction: column;
  }
  .connection-card-actions,
  .connection-app-grid,
  .connection-card-actions button,
  .connection-check-item button,
  .connection-token-item button {
    width: 100%;
  }
}

.invite-group-choice {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-1);
  font-size: 0.88rem;
  font-weight: 750;
  cursor: pointer;
}

.invite-group-choice:has(input:checked) {
  border-color: rgba(201,168,76,0.55);
  background: rgba(201,168,76,0.12);
  color: var(--gold-lt);
}

.invite-group-choice input {
  width: 18px;
  height: 18px;
  accent-color: var(--gold);
}
.forgot-link { font-size: 0.88rem; color: var(--gold); text-decoration: none; }
.forgot-link:hover { text-decoration: underline; }

.auth-divider {
  text-align: center; position: relative; margin: 20px 0;
  color: var(--text-3); font-size: 0.8rem;
}
.auth-divider::before, .auth-divider::after {
  content: ''; position: absolute; top: 50%;
  width: calc(50% - 20px); height: 1px; background: var(--border);
}
.auth-divider::before { left: 0; }
.auth-divider::after  { right: 0; }

.badge-required {
  font-size: 0.65rem; background: var(--danger-dim); color: var(--danger);
  padding: 2px 6px; border-radius: 4px; vertical-align: middle;
  font-weight: 700; letter-spacing: 0.06em;
}
.badge-optional {
  font-size: 0.65rem; background: var(--gold-dim); color: var(--gold);
  padding: 2px 6px; border-radius: 4px; vertical-align: middle;
  font-weight: 700; letter-spacing: 0.06em;
}

.auth-note {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.8rem; color: var(--text-3); margin-top: 12px;
}
.auth-legal { font-size: 0.75rem; color: var(--text-3); text-align: center; margin-top: 20px; }
.auth-legal a { color: var(--gold); text-decoration: none; }

.auth-footer {
  position: fixed; bottom: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 14px; font-size: 0.75rem; color: var(--text-3);
  background: linear-gradient(0deg, var(--bg) 60%, transparent);
}
.theme-mini {
  background: none; border: none; cursor: pointer;
  color: var(--text-3); font-size: 1rem; padding: 4px;
}

/* INVITE FORM */
.invite-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--gold-dim); color: var(--gold);
  padding: 6px 12px; border-radius: 20px;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; margin-bottom: 16px;
}
.invite-title {
  font-family: 'Bodoni Moda', serif;
  font-size: 1.6rem; font-weight: 700; margin-bottom: 6px;
}
.invite-sub { color: var(--text-3); margin-bottom: 20px; }
.invite-title span { color: var(--gold); }

/* ═══════════════ BUTTONS ════════════════════════════════════ */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 24px; background: var(--gold); color: #000;
  border: none; border-radius: var(--radius-sm); cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: 1rem; font-weight: 700;
  letter-spacing: 0.03em; transition: all 0.18s;
  min-height: 50px;
}
.btn-primary:hover { background: var(--gold-lt); transform: translateY(-1px); box-shadow: 0 4px 20px rgba(201,168,76,0.35); }
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px; background: var(--surface-2); color: var(--text-1);
  border: 1.5px solid var(--border-med); border-radius: var(--radius-sm);
  cursor: pointer; font-family: 'Inter', sans-serif; font-size: 0.9rem; font-weight: 600;
  transition: all 0.18s; min-height: 44px;
}
.btn-secondary:hover { border-color: var(--gold); color: var(--gold); }

.btn-ghost {
  background: none; border: 1.5px solid var(--border-med); color: var(--text-2);
  padding: 10px 16px; border-radius: var(--radius-sm); cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: 0.9rem; font-weight: 600;
  transition: all 0.18s; min-height: 44px;
  display: inline-flex; align-items: center; gap: 6px;
}
.btn-ghost:hover { border-color: var(--text-2); color: var(--text-1); }

.btn-ghost-danger {
  background: none; border: 1.5px solid var(--danger); color: var(--danger);
  padding: 10px 16px; border-radius: var(--radius-sm); cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: 0.9rem; font-weight: 600;
  transition: all 0.18s; min-height: 44px;
}
.btn-ghost-danger:hover { background: var(--danger-dim); }

.btn-link {
  background: none; border: none; color: var(--gold); cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: 0.9rem; font-weight: 600;
  padding: 4px; transition: opacity 0.18s;
}
.btn-link:hover { opacity: 0.8; }

.btn-google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 13px 20px; background: var(--surface-2);
  border: 1.5px solid var(--border-med); border-radius: var(--radius-sm);
  cursor: pointer; font-family: 'Inter', sans-serif; font-size: 0.95rem; font-weight: 600;
  color: var(--text-1); transition: border-color 0.18s;
}
.btn-google:hover { border-color: var(--gold); }
.btn-google-ob { width: 100%; }

.btn-copy {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--gold-dim); color: var(--gold);
  border: 1px solid var(--gold); padding: 6px 12px;
  border-radius: var(--radius-sm); cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: 0.8rem; font-weight: 700;
}

.btn-sm {
  min-height: 34px;
  padding: 7px 12px;
  font-size: 0.8rem;
}

.btn-send {
  background: var(--gold); color: #000; border: none;
  padding: 0 18px; height: 48px; border-radius: var(--radius-sm);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.18s; flex-shrink: 0;
}
.btn-send:hover { background: var(--gold-lt); }

.w-full { width: 100%; }
.icon-btn {
  background: none; border: 1.5px solid transparent; color: var(--text-3);
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.18s; flex-shrink: 0;
}
.icon-btn:hover { color: var(--text-1); border-color: var(--border-med); background: var(--surface-2); }

/* ═══════════════ ONBOARDING MODAL ══════════════════════════ */
.pilot-terms-backdrop {
  z-index: 1200;
}

.pilot-terms-modal {
  width: min(760px, 100%);
  max-height: calc(100vh - 40px);
  overflow: auto;
  padding: 28px;
  border: 1px solid rgba(201,168,76,0.36);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

.pilot-terms-header {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}

.pilot-terms-mark {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(201,168,76,0.5);
  border-radius: var(--radius-sm);
  background: rgba(201,168,76,0.12);
  color: var(--gold-lt);
  font-weight: 900;
}

.pilot-terms-header h2 {
  margin: 0 0 8px;
  color: var(--text-1);
  font-size: 1.35rem;
  line-height: 1.2;
}

.pilot-terms-header p,
.pilot-terms-body p {
  color: var(--text-2);
  line-height: 1.62;
}

.pilot-terms-body {
  display: grid;
  gap: 12px;
  padding: 18px 0;
}

.pilot-terms-body strong {
  color: var(--text-1);
}

.pilot-terms-check {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 14px;
  border: 1px solid var(--border-med);
  border-radius: var(--radius-sm);
  background: var(--bg-3);
  color: var(--text-1);
  font-weight: 750;
  cursor: pointer;
}

.pilot-terms-check input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--gold);
  flex: 0 0 auto;
}

.pilot-terms-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
}

.pilot-terms-actions .btn-primary:disabled {
  opacity: 0.48;
  cursor: not-allowed;
  transform: none;
}

@media (max-width: 620px) {
  .pilot-terms-modal {
    padding: 22px;
  }
  .pilot-terms-header {
    grid-template-columns: 1fr;
  }
  .pilot-terms-actions .btn-primary {
    width: 100%;
  }
}

.overlay-backdrop {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(0,0,0,0.75); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.onboarding-modal {
  background: var(--surface); border: 1px solid var(--border-med);
  border-radius: var(--radius-lg); padding: 40px 36px;
  max-width: 540px; width: 100%;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}
.onboarding-logo {
  display: flex; align-items: center; gap: 14px; margin-bottom: 32px;
}
.onboarding-title {
  font-family: 'Bodoni Moda', serif;
  font-size: 1.4rem; font-weight: 700; color: var(--text-1);
}
.onboarding-sub { font-size: 0.85rem; color: var(--text-3); margin-top: 2px; }

.setup-video-panel {
  margin: -10px 0 18px;
  overflow: hidden;
  border: 1px solid var(--border-med);
  border-radius: var(--radius-sm);
  background: #07080a;
}

.setup-guide-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #07080a;
  object-fit: contain;
}

.setup-video-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  padding: 12px;
  border-top: 1px solid var(--border);
  background: var(--bg-2);
}

.ob-step {
  display: flex; gap: 16px; padding: 20px;
  background: var(--bg-3); border-radius: var(--radius);
  border: 1px solid var(--border); margin-bottom: 16px;
}
.ob-step.optional { opacity: 0.8; }
.ob-step-num {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--gold-dim); border: 1.5px solid var(--gold);
  color: var(--gold); font-weight: 800; font-size: 0.9rem;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ob-step-num.dim { background: var(--bg-4); border-color: var(--border-med); color: var(--text-3); }
.ob-step-title { font-weight: 700; font-size: 1rem; margin-bottom: 6px; }
.ob-step-desc  { font-size: 0.88rem; color: var(--text-2); line-height: 1.6; margin-bottom: 12px; }

.nod-number-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-2); border: 1px solid var(--border-med);
  border-radius: var(--radius-sm); padding: 12px 16px; margin-bottom: 14px;
}
.nod-number-label { font-size: 0.75rem; color: var(--text-3); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.nod-number-val { font-family: 'JetBrains Mono', monospace; font-size: 1rem; color: var(--gold); font-weight: 700; flex: 1; }

.ob-checklist {
  list-style: decimal; padding-left: 20px;
  font-size: 0.88rem; color: var(--text-2); line-height: 2;
}

.ob-footer {
  display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px;
}

.setup-command-pill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  margin: 0 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(201,168,76,0.36);
  background: rgba(201,168,76,0.09);
  color: var(--gold);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  font-weight: 700;
}

.setup-help-fab {
  position: fixed;
  left: 18px;
  bottom: 96px;
  z-index: 140;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(201,168,76,0.5);
  background: var(--surface);
  color: var(--gold);
  box-shadow: 0 14px 36px rgba(0,0,0,0.28);
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.setup-help-fab:hover {
  border-color: var(--gold);
  background: var(--gold-dim);
  transform: translateY(-1px);
}
.setup-help-fab svg {
  display: block;
}

.setup-guide-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.setup-guide-card {
  position: relative;
  min-height: 210px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.setup-guide-card strong {
  color: var(--text-1);
  font-size: 0.98rem;
}
.setup-guide-card p {
  color: var(--text-3);
  font-size: 0.85rem;
  line-height: 1.55;
  margin: 0;
}
.setup-step-badge {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--gold-dim);
  border: 1px solid rgba(201,168,76,0.38);
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 800;
}
.setup-number-card {
  margin: auto 0 0;
  padding: 10px 12px;
}

/* ═══════════════ APP LAYOUT ═════════════════════════════════ */
#app-screen { flex-direction: row; }

/* SIDEBAR */
.sidebar {
  width: var(--sidebar-w); min-height: 100vh;
  background: var(--bg-2); border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  position: fixed; left: 0; top: 0; bottom: 0; z-index: 100;
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), width 0.25s;
  overflow-y: auto;
}
.sidebar.collapsed { transform: translateX(calc(-1 * var(--sidebar-w) + 0px)); }

.sidebar-restore-btn {
  position: fixed;
  left: 16px;
  top: 14px;
  z-index: 130;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(201,168,76,0.45);
  border-radius: var(--radius-sm);
  background: linear-gradient(145deg, rgba(201,168,76,0.2), rgba(20,20,23,0.98));
  color: var(--gold-lt);
  box-shadow: 0 14px 40px rgba(0,0,0,0.32);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-8px);
  transition: opacity 0.22s ease, transform 0.22s ease, border-color 0.18s ease;
}
.sidebar.collapsed + .sidebar-restore-btn {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}
.sidebar-restore-btn:hover {
  border-color: var(--gold);
  color: #fff5cf;
  transform: translateX(0) translateY(-1px);
}

.sidebar-top { padding: 20px 16px 16px; }
.sidebar-brand {
  display: flex; align-items: center; gap: 10px;
}
.sidebar-ws { flex: 1; min-width: 0; }
.sidebar-ws > span:first-child {
  display: block; font-weight: 700; font-size: 0.95rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--text-1);
}
.ws-role-badge {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gold); display: block;
}
.sidebar-toggle-btn {
  background: none; border: none; cursor: pointer; color: var(--text-3);
  padding: 6px; border-radius: var(--radius-sm);
  transition: color 0.18s;
}
.sidebar-toggle-btn:hover { color: var(--text-1); }

.sidebar-nav { flex: 1; padding: 8px 12px; overflow-y: auto; }
.nav-label {
  font-size: 0.65rem; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--text-3); padding: 14px 8px 6px;
}
.nav-btn {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 12px 10px; background: none; border: none; cursor: pointer;
  color: var(--text-2); font-family: 'Inter', sans-serif;
  font-size: 0.95rem; font-weight: 500; border-radius: var(--radius-sm);
  text-align: left; transition: all 0.15s; position: relative;
  min-height: 46px;
}
.nav-btn:hover { background: var(--surface); color: var(--text-1); }
.nav-btn.active {
  background: var(--gold-dim); color: var(--gold); font-weight: 700;
}
.nav-ico { width: 18px; height: 18px; flex-shrink: 0; }
.nav-gate {
  margin-left: auto; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--gold); opacity: 0.7;
}
.nav-risk-badge, .nav-notif-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--danger); margin-left: auto; flex-shrink: 0;
  display: none;
}
.nav-risk-badge.show, .nav-notif-dot.show { display: block; }

.sidebar-user {
  padding: 16px 12px; border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
}
.user-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--gold-dim); border: 1.5px solid var(--gold);
  color: var(--gold); font-weight: 800; font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.user-details { flex: 1; min-width: 0; }
.user-details span { display: block; }
.user-details span:first-child { font-weight: 700; font-size: 0.9rem; color: var(--text-1); }
.user-details span:last-child {
  font-size: 0.72rem; color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.logout-btn { color: var(--text-3); }
.logout-btn:hover { color: var(--danger); border-color: var(--danger); }

/* MAIN */
.main {
  flex: 1; min-height: 100vh;
  margin-left: var(--sidebar-w);
  display: flex; flex-direction: column;
  transition: margin-left 0.25s;
  background: var(--bg);
}
.sidebar.collapsed ~ .main { margin-left: 0; }

/* TOPBAR */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px; background: var(--bg-2);
  border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50;
}
.topbar-l { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar-r { display: flex; align-items: center; gap: 8px; min-width: 0; }

.ist-clock {
  min-height: 44px;
  min-width: 128px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 9px;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid rgba(201,168,76,0.28);
  border-radius: var(--radius-sm);
  background: rgba(201,168,76,0.08);
  color: var(--text-1);
  flex-shrink: 0;
}
.ist-clock-label {
  grid-row: 1 / 3;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: rgba(201,168,76,0.16);
  color: var(--gold-lt);
  font-size: 0.64rem;
  font-weight: 950;
  letter-spacing: 0.08em;
}
.ist-clock-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1.05;
  white-space: nowrap;
}
.ist-clock-date {
  color: var(--text-3);
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1.05;
  white-space: nowrap;
}

.topbar-beta-mark {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(201,168,76,0.36);
  border-radius: var(--radius-sm);
  color: var(--gold);
  background: rgba(201,168,76,0.08);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.topbar-beta-mark em {
  font-style: normal;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--gold);
  color: #111;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
}

.breadcrumb {
  font-family: 'Inter', sans-serif; font-size: 1.1rem;
  font-weight: 700; color: var(--text-1);
}

.search-wrap {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); padding: 8px 14px;
  color: var(--text-3); min-width: 200px;
}
.search-wrap input {
  background: none; border: none; color: var(--text-1);
  font-family: 'Inter', sans-serif; font-size: 0.9rem;
  width: 100%; outline: none;
}
.search-wrap input::placeholder { color: var(--text-3); }
.search-kbd {
  font-family: 'JetBrains Mono', monospace; font-size: 0.7rem;
  color: var(--text-3); background: var(--bg-3);
  padding: 2px 5px; border-radius: 3px;
}

.theme-btn {
  font-size: 1.2rem; color: var(--text-2);
  background: var(--surface); border: 1.5px solid var(--border-med);
  border-radius: var(--radius-sm);
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.18s;
}
.theme-btn:hover { border-color: var(--gold); color: var(--gold); }

.topbar-plan-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border: 1.5px solid rgba(245,166,35,0.45);
  border-radius: var(--radius-sm);
  background: var(--gold-dim);
  color: var(--gold);
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.18s;
}
.topbar-plan-btn:hover {
  border-color: var(--gold);
  transform: translateY(-1px);
}

.notif-btn { position: relative; }
.notif-indicator {
  position: absolute; top: 6px; right: 6px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--danger); display: none;
}
.notif-indicator.show { display: block; }

.topbar-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--gold-dim); border: 1.5px solid var(--gold);
  color: var(--gold); font-weight: 800; font-size: 0.88rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
}
.mobile-menu-btn { display: none; }
.topbar-back-btn {
  flex-shrink: 0;
}
.topbar-back-btn:not(.hidden) {
  display: inline-flex;
}

/* ─── VIEWS ────────────────────────────────────────────────── */
.view { display: none; padding: 28px 32px; flex: 1; position: relative; }
.view.active { display: block; }

.view-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 28px; flex-wrap: wrap;
}
.view-header-r { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.view-title {
  font-family: 'Bodoni Moda', serif;
  font-size: 2rem; font-weight: 800; color: var(--text-1); line-height: 1.2;
}
.view-sub { color: var(--text-3); font-size: 0.9rem; margin-top: 4px; }

.section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; margin-top: 32px;
}
.section-header h3 {
  font-family: 'Inter', sans-serif; font-size: 1rem;
  font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-2);
}

/* ─── VITALS ────────────────────────────────────────────────── */
.vitals-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px; margin-bottom: 12px;
}

.vital-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px 22px;
  position: relative; overflow: hidden; cursor: pointer;
  transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.vital-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-med);
  box-shadow: var(--shadow);
}
.vital-card::before {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 3px; background: var(--gold);
}
.vital-card.accent::before { background: var(--gold); }
.vital-card.danger::before { background: var(--danger); }
.vital-card.success::before { background: var(--success); }
.vital-card.warn::before { background: var(--warn); }

.vital-label {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 10px;
}
.vital-val {
  font-family: 'Bodoni Moda', serif;
  font-size: 2.8rem; font-weight: 800; color: var(--text-1); line-height: 1;
}
.vital-card.accent .vital-val { color: var(--gold); }
.vital-card.danger .vital-val { color: var(--danger); }
.vital-card.success .vital-val { color: var(--success); }
.vital-card.warn .vital-val { color: var(--warn); }

/* ─── GROUPS LIST ───────────────────────────────────────────── */
.groups-list { display: flex; flex-direction: column; gap: 10px; }

.group-row {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 22px;
  display: flex; align-items: center; gap: 16px; cursor: pointer;
  transition: all 0.18s;
}
.group-row:hover { border-color: var(--gold); transform: translateX(4px); }

.group-emoji { font-size: 1.6rem; flex-shrink: 0; }
.group-info { flex: 1; min-width: 0; }
.group-name {
  font-weight: 700; font-size: 1.05rem; color: var(--text-1); margin-bottom: 4px;
}
.group-stats { font-size: 0.82rem; color: var(--text-3); }

.group-ribbon {
  padding: 4px 10px; border-radius: 20px; font-size: 0.72rem;
  font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; flex-shrink: 0;
}
.ribbon-on_track  { background: var(--success-dim); color: var(--success); }
.ribbon-stagnant  { background: var(--warn-dim); color: var(--warn); }
.ribbon-at_risk   { background: var(--danger-dim); color: var(--danger); }

.group-completion-bar {
  width: 80px; height: 6px; background: var(--bg-4); border-radius: 3px; flex-shrink: 0;
}
.group-completion-fill {
  height: 100%; border-radius: 3px; background: var(--gold);
  transition: width 0.5s ease;
}

/* GROUPS GRID */
.groups-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px;
}
.group-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px;
  cursor: pointer; transition: all 0.18s; position: relative; overflow: hidden;
}
.group-card:hover { border-color: var(--gold); transform: translateY(-3px); box-shadow: var(--shadow); }
.group-card-top {
  display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px;
}
.group-card-meta { font-size: 0.8rem; color: var(--text-3); margin-top: 12px; }

.stat-row { display: flex; gap: 20px; margin-top: 14px; }
.stat-item { display: flex; flex-direction: column; }
.stat-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); font-weight: 700; margin-bottom: 2px; }
.stat-val { font-family: 'Bodoni Moda', serif; font-size: 1.4rem; font-weight: 700; color: var(--text-1); }

.progress-bar-wrap { margin-top: 14px; }
.progress-bar {
  height: 8px; background: var(--bg-4); border-radius: 4px; overflow: hidden;
}
.progress-bar-fill {
  height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--gold), var(--gold-lt));
  transition: width 0.6s ease;
}
.progress-label { font-size: 0.78rem; color: var(--text-3); margin-top: 5px; text-align: right; }

.group-actions { display: flex; gap: 8px; margin-top: 16px; }
.group-card-head-tools {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 8px;
}

.group-manage-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.group-manage-actions.inline {
  justify-content: flex-end;
  margin-left: auto;
}

.group-manage-btn {
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid var(--border-med);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-1);
  font-size: 0.74rem;
  font-weight: 750;
  cursor: pointer;
}

.group-manage-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.group-manage-btn.danger {
  color: var(--danger);
  border-color: rgba(255,77,77,0.28);
}

.group-manage-btn.danger:hover {
  border-color: var(--danger);
  background: rgba(255,77,77,0.12);
}

/* ─── GROUP DETAIL ──────────────────────────────────────────── */
#group-detail-header { flex: 1; }
.group-detail-title {
  font-family: 'Bodoni Moda', serif;
  font-size: 1.8rem; font-weight: 800; display: flex; align-items: center; gap: 10px;
}
.group-detail-stats {
  display: flex; gap: 24px; margin: 16px 0; flex-wrap: wrap;
}
.gds-item { display: flex; flex-direction: column; gap: 2px; }
.gds-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-3); font-weight: 700; }
.gds-val { font-family: 'Bodoni Moda', serif; font-size: 1.8rem; font-weight: 700; }

.feed-filters { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.filter-btn {
  padding: 8px 16px; border-radius: 20px; font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer;
  background: var(--surface-2); border: 1.5px solid var(--border);
  color: var(--text-2); transition: all 0.15s;
}
.filter-btn.active, .filter-btn:hover {
  background: var(--gold-dim); border-color: var(--gold); color: var(--gold);
}

.feed-list { display: flex; flex-direction: column; gap: 10px; }

.feed-item {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 20px;
  display: flex; gap: 14px; align-items: flex-start;
  transition: border-color 0.18s;
}
.feed-item:hover { border-color: var(--border-med); }

.feed-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: var(--bg-4); display: flex; align-items: center;
  justify-content: center; font-weight: 800; font-size: 0.8rem; color: var(--text-2);
}
.feed-body { flex: 1; min-width: 0; }
.feed-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.feed-name { font-weight: 700; font-size: 0.95rem; }
.feed-time { font-size: 0.78rem; color: var(--text-3); margin-left: auto; }
.feed-text { font-size: 0.95rem; color: var(--text-2); line-height: 1.6; }
.feed-attach-btn {
  margin-top: 10px; display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 1px solid var(--border-med); color: var(--text-2);
  padding: 5px 10px; border-radius: var(--radius-sm); cursor: pointer;
  font-size: 0.82rem; font-family: 'Inter', sans-serif; transition: all 0.15s;
}
.feed-attach-btn:hover { border-color: var(--gold); color: var(--gold); }

.badge-milestone  { background: rgba(107,87,255,0.15); color: #9B84FF; padding: 3px 9px; border-radius: 12px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.badge-delivery   { background: var(--success-dim); color: var(--success); padding: 3px 9px; border-radius: 12px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.badge-risk       { background: var(--danger-dim); color: var(--danger); padding: 3px 9px; border-radius: 12px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.badge-commitment { background: rgba(245,166,35,0.12); color: var(--warn); padding: 3px 9px; border-radius: 12px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.badge-directive  { background: var(--gold-dim); color: var(--gold); padding: 3px 9px; border-radius: 12px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.msg-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 10px;
}
.msg-card.msg-risk { border-color: rgba(255,77,77,0.42); }
.msg-card.msg-noise { opacity: 0.82; }
.msg-header {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  margin-bottom: 10px;
}
.msg-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bg-4);
  color: var(--text-2);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.78rem;
  flex: 0 0 auto;
}
.msg-main {
  min-width: 0;
}
.msg-sender {
  font-weight: 750;
  color: var(--text-1);
  overflow-wrap: anywhere;
}
.msg-role { color: var(--text-3); font-size: 0.76rem; }
.msg-meta-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 8px;
  margin-top: 7px;
  min-width: 0;
}
.msg-badge {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 3px 9px;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.15;
  white-space: nowrap;
}
.badge-gold { background: var(--gold-dim); color: var(--gold); }
.badge-blue { background: rgba(80,140,255,0.16); color: #8BB7FF; }
.badge-green { background: var(--success-dim); color: var(--success); }
.badge-purple { background: rgba(137,104,255,0.16); color: #A996FF; }
.badge-red { background: var(--danger-dim); color: var(--danger); }
.badge-muted { background: var(--surface-2); color: var(--text-3); }
.msg-time {
  margin-left: 0;
  color: var(--text-3);
  font-size: 0.76rem;
  line-height: 1.2;
  white-space: nowrap;
}
.msg-body {
  color: var(--text-2);
  line-height: 1.58;
  overflow-wrap: anywhere;
}

/* ─── SENTINEL ──────────────────────────────────────────────── */
.sentinel-wrap {
  display: flex; flex-direction: column; height: calc(100vh - 200px);
  min-height: 400px;
}
.sentinel-feed {
  flex: 1; overflow-y: auto; padding: 4px 0 20px;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.sentinel-empty { text-align: center; padding: 60px 20px; }
.sentinel-icon-big { font-size: 3rem; color: var(--gold); margin-bottom: 16px; }
.sentinel-empty h3 { font-family: 'Bodoni Moda', serif; font-size: 1.5rem; font-weight: 700; margin-bottom: 8px; }
.sentinel-empty p { color: var(--text-3); margin-bottom: 24px; }
.prompt-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.chip {
  background: var(--surface); border: 1px solid var(--border-med);
  color: var(--text-2); padding: 8px 16px; border-radius: 20px;
  cursor: pointer; font-family: 'Inter', sans-serif; font-size: 0.88rem;
  font-weight: 600; transition: all 0.18s;
}
.chip:hover { border-color: var(--gold); color: var(--gold); background: var(--gold-dim); }

.sentinel-msg { display: flex; gap: 12px; padding: 12px 0; }
.sentinel-msg.user { flex-direction: row-reverse; }
.sentinel-bubble {
  max-width: 75%; padding: 14px 18px; border-radius: var(--radius);
  font-size: 0.95rem; line-height: 1.65; white-space: pre-wrap;
}
.sentinel-msg.user .sentinel-bubble {
  background: var(--gold-dim); border: 1px solid var(--gold);
  color: var(--text-1);
}
.sentinel-msg.sentinel .sentinel-bubble {
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text-1);
}
.sentinel-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 800;
}
.sentinel-msg.user .sentinel-avatar { background: var(--gold-dim); color: var(--gold); }
.sentinel-msg.sentinel .sentinel-avatar { background: var(--surface-2); color: var(--text-3); }

.sentinel-input-bar {
  display: flex; gap: 10px; padding-top: 14px; border-top: 1px solid var(--border);
}
.sentinel-input-bar input {
  flex: 1; padding: 14px 18px; background: var(--surface);
  border: 1.5px solid var(--border-med); border-radius: var(--radius-sm);
  color: var(--text-1); font-family: 'Inter', sans-serif; font-size: 1rem;
  transition: border-color 0.2s;
}
.sentinel-input-bar input:focus { border-color: var(--gold); outline: none; }

/* ─── VOICE PANEL ──────────────────────────────────────────── */
.voice-tiers {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 32px;
}
.tier {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px 20px;
}
.tier.founder { border-color: var(--gold); }
.tier-mark { font-size: 1.4rem; color: var(--gold); margin-bottom: 8px; }
.tier.admin .tier-mark, .tier.member .tier-mark { color: var(--text-3); }
.tier-name { font-weight: 800; font-size: 0.95rem; margin-bottom: 12px; }
.tier ul { list-style: none; }
.tier ul li {
  font-size: 0.88rem; color: var(--text-2); padding: 4px 0;
  display: flex; align-items: center; gap: 6px;
}
.tier ul li::before { content: '·'; color: var(--gold); font-size: 1.2rem; line-height: 1; }
.tier ul li.locked { color: var(--text-3); text-decoration: line-through; }
.tier ul li.locked::before { color: var(--text-3); }

.voice-panel { max-width: 640px; }

.scope-row { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; }
.scope-label { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.scope-btns { display: flex; gap: 6px; }
.scope-btn {
  padding: 9px 18px; background: var(--surface-2); border: 1.5px solid var(--border);
  color: var(--text-2); border-radius: var(--radius-sm); cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: 0.9rem; font-weight: 600;
  transition: all 0.18s; min-height: 44px;
}
.scope-btn.active { background: var(--gold-dim); border-color: var(--gold); color: var(--gold); }

/* VOICE ORB — Big, accessible, unmistakable */
.voice-orb-wrap {
  display: flex; flex-direction: column; align-items: center; margin-bottom: 32px;
}
.voice-orb {
  width: 120px; height: 120px; border-radius: 50%;
  background: var(--surface); border: 2.5px solid var(--border-med);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; position: relative; transition: all 0.25s;
  box-shadow: 0 0 0 0 rgba(201,168,76,0);
}
.voice-orb:hover { border-color: var(--gold); background: var(--gold-dim); }
.voice-orb:hover .orb-pulse { animation: orb-idle 2s ease-in-out infinite; }
.voice-orb.recording {
  border-color: var(--danger); background: var(--danger-dim);
  animation: orb-recording 1.5s ease-in-out infinite;
}
.voice-orb.processing { border-color: var(--gold); animation: orb-processing 1s linear infinite; }
.orb-pulse {
  position: absolute; inset: -8px; border-radius: 50%;
  border: 1.5px solid var(--gold); opacity: 0;
}

@keyframes orb-idle {
  0%,100% { transform: scale(1); opacity: 0; }
  50% { transform: scale(1.15); opacity: 0.5; }
}
@keyframes orb-recording {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,77,77,0.4); }
  50% { box-shadow: 0 0 0 20px rgba(255,77,77,0); }
}
@keyframes orb-processing {
  from { border-color: var(--gold); }
  50% { border-color: var(--gold-lt); box-shadow: 0 0 20px rgba(201,168,76,0.3); }
  to { border-color: var(--gold); }
}

#voice-hint {
  font-size: 1rem; font-weight: 600; color: var(--text-3); margin-top: 14px;
}

/* Voice chat conversation */
.voice-chat-wrap {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px;
  margin-bottom: 20px; display: none;
}
.voice-chat-wrap.show { display: block; }
.voice-chat-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px;
}
.voice-chat-label {
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3);
}
.voice-resp-scope {
  padding: 3px 10px; background: var(--gold-dim); color: var(--gold);
  border-radius: 12px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
}
.voice-transcript {
  font-family: 'JetBrains Mono', monospace; font-size: 0.88rem;
  color: var(--text-3); margin-bottom: 10px; padding: 10px 14px;
  background: var(--bg-3); border-radius: var(--radius-sm);
  border-left: 2px solid var(--gold);
}
.voice-response-text {
  font-size: 1rem; color: var(--text-1); line-height: 1.7; white-space: pre-wrap;
}

.voice-speak-btn {
  margin-top: 12px; display: flex; align-items: center; gap: 8px;
  background: none; border: 1.5px solid var(--border-med); color: var(--text-2);
  padding: 9px 16px; border-radius: var(--radius-sm); cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: 0.88rem; font-weight: 600;
  transition: all 0.18s;
}
.voice-speak-btn:hover { border-color: var(--gold); color: var(--gold); }
.voice-speak-btn.playing { border-color: var(--success); color: var(--success); }

.input-btn-row { display: flex; gap: 10px; }
.input-btn-row input { flex: 1; }

.voice-history-row {
  padding: 14px 0; border-bottom: 1px solid var(--border);
}
.voice-history-text { font-size: 0.95rem; color: var(--text-1); font-weight: 600; margin-bottom: 4px; }
.voice-history-meta { font-size: 0.78rem; color: var(--text-3); font-family: 'JetBrains Mono', monospace; }

/* ─── DIRECTIVES ────────────────────────────────────────────── */
.directive-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px 22px; margin-bottom: 10px;
}
.directive-card-top {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;
}
.directive-group { font-size: 0.8rem; color: var(--gold); font-weight: 700; }
.directive-time { font-size: 0.78rem; color: var(--text-3); }
.directive-text { font-size: 0.95rem; color: var(--text-1); line-height: 1.6; }
.directive-badge {
  font-size: 0.65rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 10px;
  background: var(--success-dim); color: var(--success);
}
.directive-badge.failed { background: var(--danger-dim); color: var(--danger); }

/* ─── LOCKER ────────────────────────────────────────────────── */
.locker-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.filter-select {
  padding: 10px 14px; background: var(--surface); border: 1.5px solid var(--border-med);
  border-radius: var(--radius-sm); color: var(--text-1);
  font-family: 'Inter', sans-serif; font-size: 0.9rem; font-weight: 600;
}
.locker-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px;
}
.locker-node {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px; cursor: pointer;
  transition: all 0.18s; text-align: center;
}
.locker-node:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: var(--shadow); }
.locker-icon { font-size: 2.2rem; margin-bottom: 10px; }
.locker-name { font-weight: 700; font-size: 0.9rem; margin-bottom: 4px; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.locker-meta { font-size: 0.75rem; color: var(--text-3); }
.locker-tag { display: inline-block; padding: 2px 7px; background: var(--bg-4); border-radius: 10px; font-size: 0.68rem; font-weight: 700; color: var(--text-3); margin: 2px; }

/* ─── NOTIFICATIONS ─────────────────────────────────────────── */
.notif-list { display: flex; flex-direction: column; gap: 8px; }
.notif-item {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 16px 20px;
  display: flex; gap: 14px; align-items: flex-start;
}
.notif-item.unread { border-left: 3px solid var(--gold); }
.notif-icon { font-size: 1.4rem; flex-shrink: 0; }
.notif-content { flex: 1; }
.notif-title { font-weight: 700; font-size: 0.95rem; margin-bottom: 3px; }
.notif-body { font-size: 0.88rem; color: var(--text-2); }
.notif-time { font-size: 0.75rem; color: var(--text-3); margin-top: 4px; font-family: 'JetBrains Mono', monospace; }

/* ─── ADMIN ─────────────────────────────────────────────────── */
.admin-tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 24px; gap: 4px; }
.admin-tab {
  padding: 12px 20px; background: none; border: none; cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: 0.95rem; font-weight: 600;
  color: var(--text-3); border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: all 0.18s;
}
.admin-tab.active { color: var(--gold); border-bottom-color: var(--gold); }

.member-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--border);
}
.member-avatar {
  width: 42px; height: 42px; border-radius: 50%; background: var(--bg-4);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.85rem; flex-shrink: 0; color: var(--text-2);
}
.member-info { flex: 1; }
.member-name { font-weight: 700; font-size: 0.95rem; color: var(--text-1); }
.member-email { font-size: 0.8rem; color: var(--text-3); }
.member-role-badge {
  padding: 4px 10px; border-radius: 12px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
}
.role-founder { background: var(--gold-dim); color: var(--gold); }
.role-admin   { background: var(--success-dim); color: var(--success); }
.role-member  { background: var(--bg-4); color: var(--text-3); }

.invite-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.invite-info { flex: 1; }
.invite-contact { font-weight: 700; font-size: 0.9rem; }
.invite-meta { font-size: 0.78rem; color: var(--text-3); margin-top: 2px; }
.invite-status {
  padding: 3px 9px; border-radius: 10px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
}
.invite-status.pending { background: var(--warn-dim); color: var(--warn); }
.invite-status.accepted { background: var(--success-dim); color: var(--success); }

/* ─── SETTINGS ──────────────────────────────────────────────── */
.settings-section {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px; margin-bottom: 16px;
}
.settings-section h3 {
  font-family: 'Inter', sans-serif; font-size: 0.88rem; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3);
  margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.setting-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0; border-bottom: 1px solid var(--border);
}
.setting-row:last-child { border-bottom: none; }
.setting-label { font-weight: 600; font-size: 0.95rem; }
.setting-desc { font-size: 0.82rem; color: var(--text-3); margin-top: 2px; }
.integration-status {
  display: flex; align-items: center; gap: 8px; font-size: 0.88rem;
}
.dot-connected { width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
.dot-disconnected { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }

/* ─── MODALS ────────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.modal-backdrop.active { display: flex; }
.modal {
  background: var(--surface); border: 1px solid var(--border-med);
  border-radius: var(--radius-lg); padding: 36px 32px;
  max-width: 500px; width: calc(100% - 40px);
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 201; display: none; max-height: 90vh; overflow-y: auto;
  box-shadow: var(--shadow-lg);
}
.modal.modal-wide {
  max-width: 680px;
}
.modal.active { display: block; }
.modal-title {
  font-family: 'Bodoni Moda', serif;
  font-size: 1.5rem; font-weight: 700; margin-bottom: 24px;
}
.modal-desc {
  color: var(--text-3);
  font-size: 0.9rem;
  line-height: 1.6;
  margin: -10px 0 18px;
}
.modal-close {
  position: absolute; top: 16px; right: 16px;
  background: none; border: none; cursor: pointer; color: var(--text-3);
  width: 36px; height: 36px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.modal-close:hover { color: var(--text-1); background: var(--surface-2); }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }

.group-setup-panel {
  display: grid;
  gap: 10px;
  padding: 16px;
  margin-bottom: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-3);
  color: var(--text-2);
  font-size: 0.88rem;
  line-height: 1.6;
}

.group-setup-panel > strong {
  color: var(--gold);
  font-weight: 900;
}

.group-setup-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.group-setup-actions span,
.group-setup-code span {
  color: var(--text-2);
  font-size: 0.8rem;
  font-weight: 750;
}

.group-setup-code {
  display: grid;
  gap: 7px;
  padding: 12px;
  border: 1px dashed rgba(201,168,76,0.45);
  border-radius: var(--radius-sm);
  background: rgba(201,168,76,0.08);
}

.group-setup-code code {
  width: fit-content;
  max-width: 100%;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--bg);
  color: var(--gold-lt);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.86rem;
  overflow-wrap: anywhere;
}

.field-help-details {
  margin-top: 9px;
  color: var(--text-2);
  font-size: 0.82rem;
  line-height: 1.5;
}

.field-help-details summary {
  cursor: pointer;
  color: var(--gold-lt);
  font-weight: 850;
}

.field-help-details p {
  margin-top: 8px;
}

/* ─── ATTACHMENT LIGHTBOX ───────────────────────────────────── */
.lightbox-backdrop {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0,0,0,0.92); backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.lightbox-content { max-width: 90vw; max-height: 90vh; }
.lightbox-content img { max-width: 100%; max-height: 80vh; border-radius: var(--radius); }
.lightbox-close {
  position: fixed; top: 20px; right: 20px;
  background: var(--surface); border: 1.5px solid var(--border-med);
  color: var(--text-1); width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 1.2rem;
}

.attachment-box {
  background: var(--surface);
  border: 1px solid var(--border-med);
  border-radius: var(--radius);
  padding: 24px;
  max-width: 680px;
  width: min(90vw, 680px);
  color: var(--text-1);
  box-shadow: var(--shadow-lg);
}
.attachment-title {
  font-size: 0.95rem;
  font-weight: 800;
  margin-bottom: 14px;
  word-break: break-word;
}
.attachment-placeholder {
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  background: var(--bg-3);
  border: 1px dashed var(--border-med);
  border-radius: var(--radius-sm);
}
.attachment-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  padding: 9px 16px;
  background: var(--gold);
  color: #000;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 800;
}

.attachment-overlay {
  position: fixed;
  inset: 0;
  z-index: 320;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0,0,0,0.82);
  backdrop-filter: blur(8px);
}
.locker-node-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  cursor: pointer;
  transition: border-color 0.18s, transform 0.18s;
}
.locker-node-card:hover {
  border-color: var(--gold);
  transform: translateY(-1px);
}

.floating-image-strip {
  position: sticky;
  top: 72px;
  z-index: 8;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin: 12px 0 18px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(12px);
}

.floating-image-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--border-med);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-1);
  cursor: pointer;
  text-align: left;
}

.floating-image-card:hover {
  border-color: var(--gold);
}

.floating-image-thumb {
  width: 64px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 6px;
  background: var(--bg-3);
}

.floating-image-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.floating-image-copy strong,
.floating-image-copy em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.floating-image-copy strong {
  font-size: 0.78rem;
  font-weight: 850;
}

.floating-image-copy em {
  color: var(--text-2);
  font-size: 0.75rem;
  font-style: normal;
}

.msg-attach-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.attach-chip {
  min-height: 34px;
  max-width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--border-med);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-1);
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attach-chip:hover {
  border-color: var(--gold);
  color: var(--gold-lt);
}

.msg-attachment-preview {
  max-width: min(100%, 420px);
  border: 1px solid var(--border-med);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-1);
  overflow: hidden;
}

.msg-attachment-preview.image {
  display: grid;
  gap: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
}

.msg-attachment-preview.image img {
  width: 100%;
  max-height: 280px;
  object-fit: cover;
  background: var(--bg-3);
}

.msg-attachment-preview.image span {
  padding: 8px 10px;
  color: var(--text-2);
  font-size: 0.78rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.msg-attachment-preview.media {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.msg-attachment-preview video,
.msg-attachment-preview audio {
  width: 100%;
  max-height: 260px;
}

.attachment-box video {
  width: 100%;
  max-height: 70vh;
  border-radius: var(--radius-sm);
  background: #000;
}

.attachment-audio {
  width: min(100%, 560px);
}

.locker-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.locker-section + .locker-section {
  margin-top: 22px;
}

.locker-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.locker-section-head h3 {
  margin: 0;
  min-width: 0;
  color: var(--text-1);
  font-size: 0.96rem;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.locker-section-head span {
  flex: 0 0 auto;
  color: var(--text-3);
  font-size: 0.78rem;
  font-weight: 800;
}

.locker-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
}

/* ─── STATES ────────────────────────────────────────────────── */
.loading-state {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 60px; color: var(--text-3); font-size: 0.9rem;
}
.spinner {
  width: 24px; height: 24px; border-radius: 50%;
  border: 2.5px solid var(--border); border-top-color: var(--gold);
  animation: spin 0.8s linear infinite;
}
.spinner.mini {
  width: 16px;
  height: 16px;
  border-width: 2px;
  flex: 0 0 auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

.view-loading-overlay {
  display: none;
}

.view.view-loading {
  min-height: min(720px, calc(100vh - 96px));
}

.view.view-loading > :not(.view-loading-overlay) {
  visibility: hidden !important;
  pointer-events: none !important;
  user-select: none;
}

.view.view-loading > .view-loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 45;
  display: grid;
  min-height: min(720px, calc(100vh - 96px));
  place-items: center;
  background:
    radial-gradient(circle at 50% 42%, rgba(201,168,76,0.08), transparent 28%),
    var(--bg);
}

.view-loading-card {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(201,168,76,0.28);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 18px 60px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.view-loading-spinner {
  width: 30px;
  height: 30px;
}

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

.backend-loading-indicator {
  position: fixed;
  inset: 0;
  z-index: 9600;
  pointer-events: none;
}
.backend-loading-indicator.hidden {
  display: none !important;
}
.backend-loading-strip {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
}
.backend-loading-strip span {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--gold), var(--gold-lt), transparent);
  box-shadow: 0 0 18px rgba(201, 168, 76, 0.45);
  animation: backend-loading-sweep 1.05s ease-in-out infinite;
}
.backend-loading-pill {
  position: absolute;
  top: 14px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: min(320px, calc(100vw - 32px));
  min-height: 38px;
  padding: 9px 13px;
  border: 1px solid rgba(201, 168, 76, 0.34);
  border-radius: 999px;
  background: rgba(10, 10, 11, 0.88);
  color: var(--text-1);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}
@keyframes backend-loading-sweep {
  from { transform: translateX(-115%); }
  to { transform: translateX(255%); }
}
@media (max-width: 480px) {
  .backend-loading-pill {
    top: 10px;
    left: 12px;
    right: 12px;
    justify-content: center;
    width: auto;
  }
}

.pwa-install-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 9700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 520px;
  margin: 0 auto;
  padding: 12px 12px 12px 14px;
  border: 1px solid rgba(201, 168, 76, 0.38);
  border-radius: var(--radius-sm);
  background: rgba(12, 12, 14, 0.94);
  box-shadow: var(--shadow-lg);
  color: var(--text-1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.pwa-install-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.pwa-install-copy strong {
  font-size: 0.9rem;
  font-weight: 900;
}
.pwa-install-copy span {
  color: var(--text-2);
  font-size: 0.78rem;
  line-height: 1.35;
}
.pwa-install-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.pwa-install-btn,
.pwa-install-close {
  min-height: 36px;
  border-radius: var(--radius-sm);
  font-weight: 900;
  cursor: pointer;
}
.pwa-install-btn {
  padding: 0 14px;
  border: 1px solid var(--gold);
  background: var(--gold);
  color: #101010;
}
.pwa-install-close {
  width: 36px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
}
@media (max-width: 480px) {
  .pwa-install-banner {
    align-items: stretch;
    flex-direction: column;
    left: 10px;
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
  }
  .pwa-install-actions {
    align-items: stretch;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
  }
  .pwa-install-btn,
  .pwa-install-close {
    min-height: 42px;
  }
}

.empty-state {
  text-align: center;
  padding: 42px 20px;
  color: var(--text-3);
  font-size: 0.92rem;
  line-height: 1.55;
  border: 1px dashed rgba(201,168,76,0.2);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(135deg, rgba(201,168,76,0.045), transparent 48%),
    rgba(255,255,255,0.018);
}

.admin-panel { display: none; }
.admin-panel.active { display: block; }

/* ─── TOAST ─────────────────────────────────────────────────── */
#toast-container {
  position: fixed; bottom: 24px; right: 24px; z-index: 9999;
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.toast {
  padding: 14px 20px; border-radius: var(--radius-sm);
  font-family: 'Inter', sans-serif; font-size: 0.9rem; font-weight: 600;
  display: flex; align-items: center; gap: 10px;
  animation: toast-in 0.3s ease; box-shadow: var(--shadow-lg);
  pointer-events: auto; max-width: 360px; min-width: 240px;
  border: 1px solid;
}
.toast.info    { background: var(--surface); color: var(--text-1); border-color: var(--border-med); }
.toast.success { background: var(--success-dim); color: var(--success); border-color: var(--success); }
.toast.error   { background: var(--danger-dim); color: var(--danger); border-color: var(--danger); }
.toast.warning { background: var(--warn-dim); color: var(--warn); border-color: var(--warn); }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ─── MISC ──────────────────────────────────────────────────── */
.nod-number-card { flex-wrap: wrap; }
.text-gold { color: var(--gold); }
.text-danger { color: var(--danger); }
.text-success { color: var(--success); }
.text-muted { color: var(--text-3); font-size: 0.88rem; }

/* ─── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .vitals-row { grid-template-columns: repeat(3, 1fr); }
  .voice-tiers { grid-template-columns: 1fr; }
  .setup-guide-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  :root { --sidebar-w: 260px; }
  .main { margin-left: 0; }
  .sidebar { transform: translateX(-100%); }
  .sidebar.mobile-open { transform: translateX(0); }
  .sidebar-restore-btn { display: none; }
  .mobile-menu-btn { display: flex; }
  .vitals-row { grid-template-columns: repeat(2, 1fr); }
  .view { padding: 20px 16px; }
  .topbar { padding: 12px 16px; }
  .topbar-beta-mark span { display: none; }
  .setup-help-fab { left: 14px; bottom: 86px; }
  .topbar-plan-btn { padding: 0 11px; }
  .auth-card { padding: 28px 20px; }
  .field-row-2 { grid-template-columns: 1fr; }
  .search-wrap { display: none; }
  .groups-grid { grid-template-columns: 1fr; }
  .voice-tiers { grid-template-columns: 1fr; gap: 10px; }
  .assistant-setup-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .vitals-row { grid-template-columns: 1fr 1fr; }
  .vital-val { font-size: 2.2rem; }
  .topbar-plan-btn span { display: none; }
}

/* ─── ACCESSIBILITY ENHANCEMENTS ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  :root {
    --border: rgba(255,255,255,0.25);
    --border-med: rgba(255,255,255,0.4);
  }
}

/* ─── ARIA live region for screen readers ─────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

#live-region {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}
/* ═══════════════════════════════════════════════════════════
   VOICE CONSOLE — Luxury Redesign
   ═══════════════════════════════════════════════════════════ */

/* Two-column console layout */
.voice-console {
  display: grid;
  grid-template-columns: 440px 1fr;
  gap: 24px;
  align-items: start;
  margin-bottom: 40px;
}

/* ─── LEFT COLUMN ──────────────────────────────────────────── */
.voice-console-main {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Scope strip */
.vx-scope-strip {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 32px;
}
.vx-scope-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}
.vx-scope-btns {
  display: flex;
  gap: 6px;
}
.vx-scope-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  color: var(--text-3);
  border-radius: 100px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  transition: all 0.2s;
  min-height: 36px;
}
.vx-scope-btn:hover {
  border-color: var(--border-med);
  color: var(--text-2);
}
.vx-scope-btn.active {
  background: var(--gold-dim);
  border-color: var(--gold);
  color: var(--gold);
}

/* Orb Zone */
.vx-orb-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding: 40px 0 32px;
}
.vx-orb-rings {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.vx-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--gold);
  opacity: 0;
  animation: vx-ring-idle 4s ease-in-out infinite;
}
.vx-ring.r1 { width: 160px; height: 160px; animation-delay: 0s; }
.vx-ring.r2 { width: 200px; height: 200px; animation-delay: 0.6s; }
.vx-ring.r3 { width: 240px; height: 240px; animation-delay: 1.2s; }
@keyframes vx-ring-idle {
  0%, 100% { opacity: 0; transform: scale(0.95); }
  50% { opacity: 0.12; transform: scale(1); }
}

.vx-orb {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  border: 2px solid var(--border-med);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow:
    0 0 0 0 rgba(201,168,76,0),
    inset 0 1px 0 rgba(255,255,255,0.06);
}
.vx-orb:hover {
  border-color: var(--gold);
  background: var(--gold-dim);
  transform: scale(1.04);
  box-shadow: 0 0 40px rgba(201,168,76,0.15);
}
.vx-orb:hover .vx-ring.r1 { opacity: 0.2; }
.vx-orb:active { transform: scale(0.97); }
.vx-orb.recording {
  border-color: var(--danger);
  background: var(--danger-dim);
  animation: vx-orb-pulse 1.4s ease-in-out infinite;
}
.vx-orb.recording .vx-ring { border-color: var(--danger); animation: vx-ring-recording 1.4s ease-in-out infinite; }
.vx-orb.processing {
  border-color: var(--gold);
  animation: vx-orb-process 1.2s linear infinite;
}
@keyframes vx-orb-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,77,77,0.4); }
  50% { box-shadow: 0 0 0 24px rgba(255,77,77,0); }
}
@keyframes vx-ring-recording {
  0%, 100% { opacity: 0.3; transform: scale(0.97); }
  50% { opacity: 0.6; transform: scale(1.03); }
}
@keyframes vx-orb-process {
  0% { border-color: var(--gold); box-shadow: 0 0 0 0 rgba(201,168,76,0.3); }
  50% { border-color: var(--gold-lt); box-shadow: 0 0 30px rgba(201,168,76,0.25); }
  100% { border-color: var(--gold); box-shadow: 0 0 0 0 rgba(201,168,76,0.3); }
}

.vx-orb-inner {
  color: var(--text-2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}
.vx-orb:hover .vx-orb-inner { color: var(--gold); }
.vx-orb.recording .vx-orb-inner { color: var(--danger); }
.vx-orb.processing .vx-orb-inner { color: var(--gold); }

.vx-orb-hint {
  margin-top: 18px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: 0.04em;
}

/* Text bar */
.vx-text-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}
.vx-text-input {
  flex: 1;
  padding: 13px 16px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-1);
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  transition: border-color 0.2s;
}
.vx-text-input:focus {
  outline: none;
  border-color: var(--gold);
}
.vx-text-input::placeholder { color: var(--text-3); }
.vx-send-btn {
  padding: 13px 18px;
  background: var(--gold);
  border: none;
  border-radius: var(--radius-sm);
  color: #000;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
}
.vx-send-btn:hover { background: var(--gold-lt); transform: translateX(1px); }

/* Group select */
.vx-group-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}
.vx-field-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}
.vx-select {
  flex: 1;
  padding: 10px 14px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-1);
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 0.2s;
}
.vx-select:focus { outline: none; border-color: var(--gold); }

/* Nudge Zone */
.vx-nudge-zone {
  background: linear-gradient(135deg, rgba(255,77,77,0.05) 0%, rgba(201,168,76,0.04) 100%);
  border: 1px solid rgba(255,77,77,0.2);
  border-radius: var(--radius);
  padding: 20px 22px;
}
.vx-nudge-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--danger);
  margin-bottom: 8px;
}
.vx-nudge-desc {
  font-size: 0.84rem;
  color: var(--text-3);
  line-height: 1.6;
  margin-bottom: 16px;
}
.vx-nudge-desc strong { color: var(--gold); }
.vx-nudge-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  background: var(--danger-dim);
  border: 1.5px solid rgba(255,77,77,0.35);
  border-radius: var(--radius-sm);
  color: var(--danger);
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  width: 100%;
  justify-content: center;
  letter-spacing: 0.02em;
}
.vx-nudge-btn:hover {
  background: rgba(255,77,77,0.18);
  border-color: var(--danger);
  box-shadow: 0 0 20px rgba(255,77,77,0.15);
  transform: translateY(-1px);
}
.vx-nudge-btn:active { transform: translateY(0); }
.vx-nudge-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ─── RIGHT COLUMN ──────────────────────────────────────────── */
.voice-console-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Response panel */
.vx-response-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-height: 200px;
  overflow: hidden;
  transition: border-color 0.3s;
}
.vx-response-panel:has(#vx-response-content:not([style*="display:none"])) {
  border-color: rgba(201,168,76,0.3);
}
.vx-response-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  gap: 12px;
}
.vx-response-glyph {
  font-size: 2rem;
  color: var(--text-3);
  opacity: 0.4;
}
.vx-response-empty p {
  font-size: 0.9rem;
  color: var(--text-3);
  line-height: 1.6;
}
.vx-response-content {
  padding: 20px 22px;
}
.vx-response-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.vx-response-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.vx-resp-scope-badge {
  padding: 3px 10px;
  background: var(--gold-dim);
  color: var(--gold);
  border-radius: 100px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.vx-transcript-block {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.84rem;
  color: var(--text-3);
  background: var(--bg-3);
  border-left: 2px solid var(--gold);
  padding: 10px 14px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-bottom: 14px;
  display: none;
}
.vx-response-text {
  font-size: 1rem;
  color: var(--text-1);
  line-height: 1.75;
  white-space: pre-wrap;
}
.vx-response-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.vx-speak-btn, .vx-clear-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border: 1.5px solid var(--border-med);
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-2);
  font-family: 'Inter', sans-serif;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s;
}
.vx-speak-btn:hover { border-color: var(--gold); color: var(--gold); }
.vx-speak-btn.playing { border-color: var(--success); color: var(--success); }
.vx-clear-btn:hover { border-color: var(--danger); color: var(--danger); }

/* Legacy voice help panel */
.vx-siri-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.vx-siri-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.vx-siri-steps {
  list-style: none;
  counter-reset: siri;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.vx-siri-steps li {
  counter-increment: siri;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.84rem;
  color: var(--text-2);
  line-height: 1.5;
}
.vx-siri-steps li::before {
  content: counter(siri);
  min-width: 20px;
  height: 20px;
  background: var(--gold-dim);
  border: 1px solid rgba(201,168,76,0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--gold);
  flex-shrink: 0;
  margin-top: 1px;
}
.vx-siri-steps code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  color: var(--gold);
  background: var(--gold-dim);
  padding: 1px 5px;
  border-radius: 3px;
}
.vx-siri-steps em { color: var(--text-1); font-style: normal; font-weight: 700; }
.vx-siri-privacy {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--text-3);
}

/* History panel */
.vx-history-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.vx-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.vx-history-refresh {
  background: none;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  transition: color 0.2s;
}
.vx-history-refresh:hover { color: var(--gold); }
.vx-history-empty {
  padding: 24px 18px;
  text-align: center;
  font-size: 0.84rem;
  color: var(--text-3);
}
.vx-history-item {
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
  cursor: default;
}
.vx-history-item:last-child { border-bottom: none; }
.vx-history-item:hover { background: var(--bg-3); }
.vx-history-q {
  font-size: 0.9rem;
  color: var(--text-1);
  font-weight: 600;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vx-history-meta {
  display: flex;
  gap: 10px;
  font-size: 0.72rem;
  color: var(--text-3);
  font-family: 'JetBrains Mono', monospace;
}
.vx-history-scope {
  padding: 1px 7px;
  background: var(--bg-3);
  border-radius: 100px;
  text-transform: uppercase;
  font-size: 0.65rem;
}
.vx-history-exec { color: var(--success); }
.vx-history-fail { color: var(--danger); }

/* ─── TIER ROW (bottom) ─────────────────────────────────────── */
.vx-tiers-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 8px;
}
.vx-tier {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}
.vx-tier.founder { border-color: rgba(201,168,76,0.3); }
.vx-tier-glyph {
  font-size: 1.3rem;
  color: var(--text-3);
  margin-bottom: 10px;
  line-height: 1;
}
.vx-tier.founder .vx-tier-glyph { color: var(--gold); }
.vx-tier-name {
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--text-1);
  margin-bottom: 2px;
}
.vx-tier-sub {
  font-size: 0.78rem;
  color: var(--text-3);
  margin-bottom: 14px;
}
.vx-tier.founder .vx-tier-sub { color: var(--gold); }
.vx-tier ul { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.vx-tier ul li {
  font-size: 0.84rem;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 7px;
}
.vx-tier ul li::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}
.vx-tier ul li.locked {
  color: var(--text-3);
  text-decoration: line-through;
}
.vx-tier ul li.locked::before { background: var(--text-3); }

.integration-badge.connected { color: var(--success); }
.integration-badge.disconnected { color: var(--text-3); }
.api-status-grid {
  display: grid;
  gap: 10px;
}
.api-status-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-3);
}
.api-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  margin-top: 5px;
  background: var(--danger);
  box-shadow: 0 0 0 4px var(--danger-dim);
  flex: 0 0 auto;
}
.api-status-row.ok .api-status-dot {
  background: var(--success);
  box-shadow: 0 0 0 4px var(--success-dim);
}
.api-status-name {
  color: var(--text-1);
  font-size: 0.9rem;
  font-weight: 700;
}
.api-status-detail {
  color: var(--text-3);
  font-size: 0.78rem;
  line-height: 1.45;
  margin-top: 2px;
}
.google-scopes {
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
  font-size: 0.76rem;
  color: var(--text-3);
}
.google-scopes span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.sdot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  background: var(--text-3);
}
.sdot.on { background: var(--success); }
.sdot.off { background: var(--danger); opacity: 0.65; }

/* Responsive */
@media (max-width: 900px) {
  .voice-console { grid-template-columns: 1fr; }
  .vx-tiers-row { grid-template-columns: 1fr; }
  .vx-orb-zone { padding: 24px 0 20px; }
}

/* ═══════════════ LUXURY ENHANCEMENTS ══════════════════════════ */

/* Smooth page-load fade-in for views */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scaleIn {
  from { opacity: 0; transform: translate(-50%, -48%) scale(0.94); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes shimmer {
  from { background-position: 200% center; }
  to   { background-position: -200% center; }
}
@keyframes glowPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(201,168,76,0); }
  50%      { box-shadow: 0 0 24px 4px rgba(201,168,76,0.12); }
}

.view.active {
  animation: fadeUp 0.35s cubic-bezier(0.22,1,0.36,1) both;
}

/* Improved modal animations */
.modal-backdrop {
  transition: opacity 0.22s ease;
}
.modal-backdrop.active {
  animation: fadeIn 0.2s ease both;
}
.modal.active {
  animation: scaleIn 0.28s cubic-bezier(0.22,1,0.36,1) both;
}

/* Upgraded modal design */
.modal {
  border: 1px solid rgba(201,168,76,0.18) !important;
  background: linear-gradient(145deg, var(--bg-2) 0%, var(--surface) 100%) !important;
}
.modal-title {
  background: linear-gradient(90deg, var(--text-1), var(--gold-lt));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 28px !important;
}
.modal-close {
  transition: all 0.18s;
  border-radius: 50% !important;
}
.modal-close:hover {
  transform: rotate(90deg);
  background: var(--danger-dim) !important;
  color: var(--danger) !important;
}

.reminder-modal {
  max-width: 720px !important;
}

.reminder-modal-header {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin-bottom: 18px;
  padding-right: 34px;
}

.reminder-modal-header .modal-title {
  margin-bottom: 8px !important;
}

.reminder-modal-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(201,168,76,0.42);
  border-radius: var(--radius-sm);
  background: rgba(201,168,76,0.12);
  color: var(--gold-lt);
}

.reminder-form {
  display: grid;
  gap: 12px;
}

.reminder-date-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 140px;
  gap: 12px;
}

.reminder-provider-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 2px;
}

.reminder-provider-item {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.reminder-provider-item strong {
  display: block;
  color: var(--text-1);
  font-size: 0.86rem;
  font-weight: 900;
}

.reminder-provider-item small {
  display: block;
  margin-top: 4px;
  color: var(--text-2);
  font-size: 0.76rem;
  line-height: 1.45;
}

.reminder-provider-dot {
  width: 10px;
  height: 10px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(201,168,76,0.12);
}

.reminder-provider-dot.gmail {
  background: #EA4335;
  box-shadow: 0 0 0 4px rgba(234,67,53,0.12);
}

.reminder-provider-dot.calendar {
  background: #4285F4;
  box-shadow: 0 0 0 4px rgba(66,133,244,0.13);
}

@media (max-width: 720px) {
  .reminder-modal-header,
  .reminder-date-grid,
  .reminder-provider-strip {
    grid-template-columns: 1fr;
  }
  .reminder-modal-header {
    padding-right: 0;
  }
}

/* ─── CONFIRM DIALOG (replaces browser alert/confirm) ─── */
#confirm-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,0.72); backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  animation: fadeIn 0.18s ease both;
}
#confirm-overlay.hidden { display: none !important; }
#confirm-dialog {
  background: var(--bg-2);
  border: 1px solid rgba(201,168,76,0.25);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  max-width: 420px; width: 100%;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(201,168,76,0.08);
  animation: scaleIn 0.28s cubic-bezier(0.22,1,0.36,1) both;
  text-align: center;
  position: relative;
}
.confirm-icon {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
  font-size: 1.6rem;
}
.confirm-icon.warn {
  background: rgba(255,77,77,0.12);
  border: 1.5px solid rgba(255,77,77,0.3);
  color: var(--danger);
  animation: glowPulse 2.5s ease-in-out infinite;
}
.confirm-icon.info {
  background: var(--gold-dim);
  border: 1.5px solid rgba(201,168,76,0.35);
  color: var(--gold);
}
#confirm-title {
  font-family: 'Bodoni Moda', serif;
  font-size: 1.4rem; font-weight: 700; color: var(--text-1);
  margin-bottom: 10px;
}
#confirm-message {
  font-size: 0.92rem; color: var(--text-2); line-height: 1.65;
  margin-bottom: 28px;
}
.confirm-actions {
  display: flex; gap: 12px;
}
.confirm-actions .btn-ghost,
.confirm-actions .btn-primary {
  flex: 1;
}
.btn-confirm-danger {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 20px; background: rgba(255,77,77,0.12);
  border: 1.5px solid rgba(255,77,77,0.4);
  border-radius: var(--radius-sm); cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: 1rem; font-weight: 700;
  color: var(--danger); letter-spacing: 0.02em;
  transition: all 0.18s; min-height: 50px;
}
.btn-confirm-danger:hover {
  background: rgba(255,77,77,0.22);
  border-color: var(--danger);
  box-shadow: 0 4px 20px rgba(255,77,77,0.2);
  transform: translateY(-1px);
}

/* ─── DASHBOARD NUDGE WIDGET ─── */
.dashboard-nudge-card {
  background: linear-gradient(135deg, var(--surface) 0%, rgba(255,77,77,0.04) 100%);
  border: 1px solid rgba(255,77,77,0.18);
  border-radius: var(--radius);
  padding: 22px 24px;
  display: flex; align-items: center; gap: 20px;
  margin-bottom: 8px;
  transition: all 0.22s;
}
.dashboard-nudge-card:hover {
  border-color: rgba(255,77,77,0.35);
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(255,77,77,0.08);
}
.nudge-card-icon {
  width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,77,77,0.1); border: 1.5px solid rgba(255,77,77,0.25);
  display: flex; align-items: center; justify-content: center;
  color: var(--danger); font-size: 1.2rem;
  animation: glowPulse 3s ease-in-out infinite;
}
.nudge-card-body { flex: 1; min-width: 0; }
.nudge-card-title {
  font-weight: 700; font-size: 0.96rem; color: var(--text-1); margin-bottom: 3px;
}
.nudge-card-desc {
  font-size: 0.82rem; color: var(--text-3); line-height: 1.5;
}
.nudge-card-select {
  padding: 10px 14px; background: var(--bg-3);
  border: 1.5px solid var(--border-med); border-radius: var(--radius-sm);
  color: var(--text-1); font-family: 'Inter', sans-serif; font-size: 0.9rem;
  min-width: 160px; cursor: pointer; flex-shrink: 0;
  transition: border-color 0.18s;
}
.nudge-card-select:focus { border-color: var(--gold); outline: none; }
.nudge-card-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; background: rgba(255,77,77,0.1);
  border: 1.5px solid rgba(255,77,77,0.35); border-radius: var(--radius-sm);
  color: var(--danger); font-family: 'Inter', sans-serif; font-size: 0.92rem;
  font-weight: 700; cursor: pointer; white-space: nowrap; flex-shrink: 0;
  transition: all 0.18s; min-height: 44px;
}
.nudge-card-btn:hover {
  background: rgba(255,77,77,0.18);
  border-color: var(--danger);
  box-shadow: 0 4px 16px rgba(255,77,77,0.15);
  transform: translateY(-1px);
}
.nudge-card-btn:active { transform: none; }
.nudge-card-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ─── IMPROVED VITAL CARDS ─── */
.vital-card {
  backdrop-filter: blur(4px);
  transition: transform 0.22s cubic-bezier(0.22,1,0.36,1), border-color 0.22s, box-shadow 0.22s !important;
}
.vital-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,0.25) !important;
}

/* ─── IMPROVED SIDEBAR ─── */
.nav-btn {
  transition: all 0.18s cubic-bezier(0.22,1,0.36,1) !important;
}
.nav-btn.active::before {
  content: '';
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 3px;
  background: var(--gold);
  border-radius: 0 2px 2px 0;
}

/* ─── SMOOTH GROUP ROWS ─── */
.group-row {
  transition: all 0.22s cubic-bezier(0.22,1,0.36,1) !important;
}
.group-card {
  transition: all 0.22s cubic-bezier(0.22,1,0.36,1) !important;
}

/* ─── IMPROVED TOPBAR ─── */
.topbar {
  backdrop-filter: blur(12px);
  background: rgba(17,17,20,0.85) !important;
}
[data-theme="light"] .topbar {
  background: rgba(236,234,228,0.85) !important;
}

/* ─── INPUT GLOW ON FOCUS ─── */
.field-group input:focus,
.field-group select:focus,
.field-group textarea:focus {
  box-shadow: 0 0 0 3px rgba(201,168,76,0.12);
}

/* ─── IMPROVED AUTH CARD ─── */
.auth-card {
  backdrop-filter: blur(20px);
  background: rgba(26,26,32,0.9) !important;
}
[data-theme="light"] .auth-card {
  background: rgba(255,255,255,0.9) !important;
}

/* ─── IMPROVED TOAST ─── */
.toast {
  animation: slideUp 0.3s cubic-bezier(0.22,1,0.36,1) both !important;
  backdrop-filter: blur(12px);
  border-left: 3px solid var(--gold);
}

/* ─── GOLD SHIMMER ON BTN HOVER ─── */
.btn-primary {
  background-size: 200% auto;
  background-image: linear-gradient(90deg, var(--gold) 0%, var(--gold-lt) 50%, var(--gold) 100%);
  transition: all 0.3s ease !important;
}
.btn-primary:hover {
  background-position: right center;
  box-shadow: 0 6px 28px rgba(201,168,76,0.4) !important;
}

/* ─── IMPROVED SPINNER ─── */
.spinner {
  border-color: var(--border-med) !important;
  border-top-color: var(--gold) !important;
}

/* Responsive additions */
@media (max-width: 768px) {
  .dashboard-nudge-card {
    flex-wrap: wrap;
  }
  .nudge-card-select, .nudge-card-btn {
    min-width: 0;
    flex: 1;
  }
}
/* ═══════════════════════════════════════════════════════════
   SENTINEL ROOM v5 — Merged Voice + Actions UI
   ═══════════════════════════════════════════════════════════ */

/* ── Sidebar improvements ── */
.nav-btn {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px; border-radius: 10px; margin: 1px 8px;
  background: none; border: none; cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: 0.9rem; font-weight: 600;
  color: var(--text-2); text-align: left; width: calc(100% - 16px);
  transition: all 0.18s cubic-bezier(0.22,1,0.36,1);
  min-height: 44px;
}
.nav-btn:hover { background: var(--surface-2); color: var(--text-1); }
.nav-btn.active {
  background: var(--gold-dim);
  color: var(--gold);
}

/* ── Master grid: 2-column sentinel room ── */
.sentinel-master-grid {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 20px;
  align-items: start;
  min-height: 0;
}

/* ── LEFT: Chat column ── */
.sentinel-chat-col {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 180px);
  min-height: 500px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.sentinel-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-2);
  flex-shrink: 0;
}
.sentinel-chat-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gold);
}
.prompt-chips-inline {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.chip-sm {
  background: var(--bg-3); border: 1px solid var(--border-med);
  color: var(--text-3); padding: 5px 12px; border-radius: 20px;
  cursor: pointer; font-family: 'Inter', sans-serif; font-size: 0.78rem;
  font-weight: 600; transition: all 0.18s; white-space: nowrap;
}
.chip-sm:hover { border-color: var(--gold); color: var(--gold); background: var(--gold-dim); }

.sentinel-feed {
  flex: 1; overflow-y: auto; padding: 20px;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}

/* Better message bubbles */
.sentinel-msg {
  display: flex; gap: 10px;
  padding: 6px 0;
  animation: fadeUp 0.25s ease both;
}
.sentinel-msg.user { flex-direction: row-reverse; }
.sentinel-bubble {
  max-width: 78%; padding: 12px 16px;
  border-radius: 14px; font-size: 0.95rem;
  line-height: 1.65; white-space: pre-wrap;
}
.sentinel-msg.user .sentinel-bubble {
  background: linear-gradient(135deg, var(--gold-dim), rgba(201,168,76,0.1));
  border: 1px solid rgba(201,168,76,0.35);
  color: var(--text-1); border-bottom-right-radius: 4px;
}
.sentinel-msg.sentinel .sentinel-bubble {
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--text-1); border-bottom-left-radius: 4px;
}
.sentinel-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 800; margin-top: 4px;
}
.sentinel-msg.user .sentinel-avatar {
  background: var(--gold-dim); color: var(--gold);
}
.sentinel-msg.sentinel .sentinel-avatar {
  background: var(--surface-2); color: var(--text-3);
  border: 1px solid var(--border);
}

.sentinel-empty {
  text-align: center; padding: 60px 20px;
}
.sentinel-icon-big {
  font-size: 2.8rem; color: var(--gold); margin-bottom: 14px;
  display: block;
}
.sentinel-empty h3 {
  font-family: 'Bodoni Moda', serif;
  font-size: 1.4rem; font-weight: 700; margin-bottom: 8px;
}
.sentinel-empty p { color: var(--text-3); }

.sentinel-input-bar {
  display: flex; gap: 10px;
  padding: 14px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg-2);
  flex-shrink: 0;
}
.sentinel-input-bar input {
  flex: 1; padding: 12px 16px;
  background: var(--surface); border: 1.5px solid var(--border-med);
  border-radius: var(--radius-sm); color: var(--text-1);
  font-family: 'Inter', sans-serif; font-size: 0.95rem;
  transition: border-color 0.2s;
}
.sentinel-input-bar input:focus { border-color: var(--gold); outline: none; box-shadow: 0 0 0 3px rgba(201,168,76,0.1); }

/* ── RIGHT: Voice column ── */
.sentinel-voice-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: calc(100vh - 180px);
  overflow-y: auto;
  scrollbar-width: none;
}
.sentinel-voice-col::-webkit-scrollbar { display: none; }

/* ── Voice Orb Card ── */
.sv-orb-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
}
.sv-orb-header {
  display: flex; align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
  flex-wrap: wrap; gap: 10px;
}
.sv-section-label {
  display: flex; align-items: center; gap: 7px;
  font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-3);
}

.sv-group-resp-row {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
}
.sv-group-resp-row .vx-field-label { white-space: nowrap; }

/* Compact orb zone in merged view */
.sentinel-voice-col .vx-orb-zone {
  padding: 24px 0 16px;
}
.sentinel-voice-col .vx-orb {
  width: 100px; height: 100px;
}
.sentinel-voice-col .vx-ring.r1 { width: 130px; height: 130px; }
.sentinel-voice-col .vx-ring.r2 { width: 160px; height: 160px; }
.sentinel-voice-col .vx-ring.r3 { width: 190px; height: 190px; }

/* ── Inline response ── */
.sv-response-inline {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  min-height: 64px;
  margin-top: 4px;
  overflow: hidden;
}
.sv-response-empty {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 18px;
  color: var(--text-3); font-size: 0.85rem;
}
.sv-resp-glyph {
  font-size: 1.1rem; color: var(--text-3); opacity: 0.4;
}
.sv-resp-meta {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px 0;
}
.sv-resp-label {
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-3);
}
#vx-response-content { padding: 0 14px 12px; }
#vx-response-content .vx-response-text { font-size: 0.9rem; }

/* ── Actions Section ── */
.sv-actions-section { display: flex; flex-direction: column; gap: 10px; }
.sv-actions-label {
  display: flex; align-items: center; gap: 7px;
  font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-3);
}

.sv-action-cards {
  display: flex; flex-direction: column; gap: 10px;
}

/* Base action card */
.sv-action-card {
  border-radius: var(--radius);
  padding: 16px 18px;
  border: 1px solid var(--border);
  background: var(--surface);
  display: flex; flex-direction: column; gap: 12px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.sv-card-danger {
  border-color: rgba(255,77,77,0.18);
  background: linear-gradient(135deg, var(--surface) 0%, rgba(255,77,77,0.03) 100%);
}
.sv-card-danger:hover {
  border-color: rgba(255,77,77,0.35);
  box-shadow: 0 4px 20px rgba(255,77,77,0.06);
}
.sv-card-siri {
  border-color: rgba(201,168,76,0.2);
  background: linear-gradient(135deg, var(--surface) 0%, rgba(201,168,76,0.03) 100%);
}
.sv-card-siri:hover {
  border-color: rgba(201,168,76,0.4);
  box-shadow: 0 4px 20px rgba(201,168,76,0.06);
}
.native-assistant-card {
  gap: 14px;
}
.native-assistant-status {
  min-height: 20px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-3);
  color: var(--text-1);
  font-size: 0.82rem;
  font-weight: 700;
}
.native-assistant-status.warn {
  border-color: rgba(255,184,77,0.32);
  color: var(--warn);
}
.native-assistant-meta {
  display: grid;
  gap: 8px;
}
.native-assistant-meta div {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  font-size: 0.76rem;
}
.native-assistant-meta span {
  color: var(--text-3);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.native-assistant-meta strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-1);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  font-weight: 600;
}
.native-assistant-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.native-assistant-btn {
  min-height: 40px;
  padding: 9px 10px;
  border-color: rgba(201,168,76,0.34);
  background: rgba(201,168,76,0.12);
  color: var(--gold);
}
.native-assistant-btn.ghost {
  background: transparent;
  color: var(--text-2);
  border-color: var(--border-med);
}
.assistant-quick-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0 16px;
}
.assistant-quick-steps span {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-3);
  color: var(--text-2);
  font-size: 0.8rem;
  font-weight: 850;
}
.assistant-quick-steps b {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gold);
  color: #111;
  font-size: 0.74rem;
  flex: 0 0 auto;
}
.assistant-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.assistant-flow-card {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(201,168,76,0.28);
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--surface), rgba(255,255,255,0.025));
}
.assistant-card-head {
  display: grid;
  gap: 8px;
}
.assistant-platform-badge {
  width: max-content;
  padding: 5px 9px;
  border: 1px solid rgba(201,168,76,0.4);
  border-radius: 999px;
  color: var(--gold-lt);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.assistant-flow-card h3 {
  margin: 0;
  font-size: 1.18rem;
  line-height: 1.2;
}
.assistant-flow-card p {
  color: var(--text-2);
  font-size: 0.86rem;
  line-height: 1.45;
}
.assistant-qr-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 220px);
  aspect-ratio: 1;
  margin: 0 auto;
  padding: 12px;
  border: 1px solid var(--border-med);
  border-radius: var(--radius);
  background: #fff;
}
.assistant-qr-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.assistant-qr-wrap span {
  position: absolute;
  inset: auto 10px 10px;
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(10,10,12,0.8);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 850;
  text-align: center;
}
.assistant-main-btn {
  width: 100%;
  min-height: 52px;
}
.assistant-card-actions {
  display: grid;
  gap: 9px;
}
.assistant-install-notice {
  padding: 10px 11px;
  border: 1px solid rgba(245,166,35,0.42);
  border-radius: var(--radius-sm);
  background: rgba(245,166,35,0.12);
  color: var(--warn);
  font-size: 0.82rem;
  font-weight: 900;
}
.assistant-mini-steps {
  color: var(--text-3);
  font-size: 0.76rem;
  font-weight: 800;
  text-align: center;
}
.assistant-success {
  display: grid;
  gap: 4px;
  padding: 11px;
  border: 1px solid rgba(77,204,143,0.4);
  border-radius: var(--radius-sm);
  background: rgba(77,204,143,0.12);
  color: var(--text-1);
}
.assistant-success strong {
  color: var(--success);
  font-size: 0.88rem;
}
.assistant-success span {
  color: var(--text-2);
  font-size: 0.8rem;
  line-height: 1.4;
}
.assistant-setup-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.9fr);
  gap: 14px;
  margin-top: 14px;
}
.assistant-setup-grid.simplified {
  grid-template-columns: 1fr;
}
.assistant-setup-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 16px;
}
.assistant-setup-panel h3 {
  margin: 0 0 12px;
  font-size: 0.95rem;
}
.assistant-setup-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.assistant-device-list {
  display: grid;
  gap: 8px;
}
.assistant-device-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px;
  background: var(--bg-3);
}
.assistant-device-item div {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.assistant-device-item strong {
  color: var(--text-1);
  font-size: 0.88rem;
}
.assistant-device-item span {
  color: var(--text-3);
  font-size: 0.76rem;
}
.sv-card-notif {
  border-color: rgba(77,204,143,0.2);
  background: linear-gradient(135deg, var(--surface) 0%, rgba(77,204,143,0.03) 100%);
}
.sv-card-notif:hover {
  border-color: rgba(77,204,143,0.4);
  box-shadow: 0 4px 20px rgba(77,204,143,0.06);
}

.sv-action-card-top {
  display: flex; align-items: flex-start; gap: 12px;
}
.sv-action-icon {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
}
.sv-icon-danger { background: rgba(255,77,77,0.12); color: var(--danger); }
.sv-icon-siri   { background: rgba(201,168,76,0.12); color: var(--gold); }
.sv-icon-notif  { background: rgba(77,204,143,0.12); color: var(--success); }

.ui-icon,
.assistant-title-icon {
  display: inline-block;
  flex: 0 0 auto;
  vertical-align: -0.14em;
}

.sentinel-chat-label .ui-icon,
.sv-notif-type-btn .ui-icon,
.stat-pill .ui-icon,
.assistant-success .ui-icon,
.group-detail-title .ui-icon,
.attach-chip .ui-icon,
.notif-icon .ui-icon,
.locker-card-icon .ui-icon,
.directive-row-icon .ui-icon {
  margin-right: 6px;
}

.group-detail-title,
.assistant-flow-card h3,
.assistant-success strong {
  display: flex;
  align-items: center;
  gap: 8px;
}

.group-row-icon,
.group-card-icon,
.directive-row-icon,
.locker-card-icon,
.notif-icon {
  display: grid;
  place-items: center;
}

.sv-resp-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sv-action-title {
  font-weight: 700; font-size: 0.92rem; color: var(--text-1); margin-bottom: 2px;
}
.sv-action-desc {
  font-size: 0.78rem; color: var(--text-3); line-height: 1.4;
}

.sv-action-select {
  width: 100%; padding: 9px 12px;
  background: var(--bg-3); border: 1.5px solid var(--border-med);
  border-radius: var(--radius-sm); color: var(--text-1);
  font-family: 'Inter', sans-serif; font-size: 0.88rem;
  cursor: pointer; transition: border-color 0.18s;
}
.sv-action-select:focus { outline: none; border-color: var(--gold); }

/* One-tap buttons — large, finger-friendly */
.sv-tap-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 12px 16px;
  border-radius: var(--radius-sm); cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: 0.88rem; font-weight: 700;
  letter-spacing: 0.02em; min-height: 46px;
  transition: all 0.18s; border: 1.5px solid;
}
.sv-tap-btn:active { transform: scale(0.98); }
.sv-tap-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none !important; }

.sv-tap-danger {
  background: rgba(255,77,77,0.1);
  border-color: rgba(255,77,77,0.4);
  color: var(--danger);
}
.sv-tap-danger:hover:not(:disabled) {
  background: rgba(255,77,77,0.18);
  border-color: var(--danger);
  box-shadow: 0 4px 16px rgba(255,77,77,0.15);
  transform: translateY(-1px);
}

.sv-tap-siri {
  background: rgba(201,168,76,0.1);
  border-color: rgba(201,168,76,0.4);
  color: var(--gold);
}
.sv-tap-siri:hover:not(:disabled) {
  background: rgba(201,168,76,0.18);
  border-color: var(--gold);
  box-shadow: 0 4px 16px rgba(201,168,76,0.15);
  transform: translateY(-1px);
}

.sv-tap-google {
  background: rgba(66,133,244,0.08);
  border-color: rgba(66,133,244,0.3);
  color: #4285F4;
  margin-top: -4px;
}
[data-theme="light"] .sv-tap-google { background: rgba(66,133,244,0.06); }
.sv-tap-google:hover:not(:disabled) {
  background: rgba(66,133,244,0.15);
  border-color: #4285F4;
  box-shadow: 0 4px 16px rgba(66,133,244,0.15);
  transform: translateY(-1px);
}

.sv-tap-notif {
  background: rgba(77,204,143,0.1);
  border-color: rgba(77,204,143,0.4);
  color: var(--success);
}
.sv-tap-notif:hover:not(:disabled) {
  background: rgba(77,204,143,0.18);
  border-color: var(--success);
  box-shadow: 0 4px 16px rgba(77,204,143,0.12);
  transform: translateY(-1px);
}

.subscription-current {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--border-med);
  border-radius: var(--radius-sm);
  background: var(--bg-3);
  margin-bottom: 14px;
}
.subscription-plan-name { font-weight: 800; color: var(--text-1); margin-bottom: 4px; }
.subscription-plan-meta { font-size: 0.82rem; color: var(--text-3); line-height: 1.5; }
.subscription-domain {
  display: inline-flex;
  margin-top: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--gold-dim);
  color: var(--gold);
  font-size: 0.75rem;
  font-weight: 800;
}
.subscription-price {
  color: var(--gold);
  font-weight: 800;
  white-space: nowrap;
}
.subscription-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.feature-pill {
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid var(--border-med);
  font-size: 0.75rem;
  font-weight: 800;
}
.feature-pill.on { color: var(--success); background: var(--success-dim); }
.feature-pill.off { color: var(--text-3); background: var(--bg-3); }
.subscription-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.subscription-plan-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
  background: var(--surface-2);
}
.subscription-plan-card.active { border-color: var(--gold); background: var(--gold-dim); }
.subscription-plan-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--text-1);
  margin-bottom: 8px;
}
.feature-lock-msg {
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  background: var(--warn-dim);
  color: var(--warn);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.4;
}
.feature-locked {
  position: relative;
  overflow: hidden;
  opacity: 1;
}
.feature-locked .sv-tap-btn:disabled,
.sv-tap-btn:disabled {
  cursor: not-allowed;
}
.feature-locked .sv-tap-btn:disabled {
  opacity: 0.78;
}
.feature-lock-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(10,10,11,0.58);
  color: var(--warn);
  font-size: 0.86rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  pointer-events: none;
}
[data-theme="light"] .feature-lock-overlay {
  background: rgba(255,255,255,0.72);
}

.group-row.group-locked,
.group-card.group-locked {
  position: relative;
  opacity: 0.82;
  border-color: rgba(245,166,35,0.35) !important;
}
.group-row.group-locked {
  cursor: pointer;
}
.group-card.group-locked {
  overflow: hidden;
}
.group-lock-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: rgba(10,10,11,0.54);
  color: var(--warn);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  pointer-events: none;
}
[data-theme="light"] .group-lock-overlay {
  background: rgba(255,255,255,0.68);
}
.lock-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--warn);
  border-color: rgba(245,166,35,0.45);
  background: var(--warn-dim);
}

/* Notification type selector */
.sv-notif-types {
  display: flex; gap: 6px;
}
.sv-notif-type-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1; padding: 7px 4px;
  background: var(--bg-3); border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-3);
  font-family: 'Inter', sans-serif; font-size: 0.75rem; font-weight: 700;
  cursor: pointer; text-align: center; transition: all 0.15s;
  min-height: 36px;
}
.sv-notif-type-btn:hover { border-color: var(--success); color: var(--success); }
.sv-notif-type-btn.active {
  background: rgba(77,204,143,0.1);
  border-color: var(--success); color: var(--success);
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  .sentinel-master-grid {
    grid-template-columns: 1fr 360px;
  }
}

@media (max-width: 900px) {
  .sentinel-master-grid {
    grid-template-columns: 1fr;
  }
  .sentinel-chat-col {
    height: 420px;
  }
  .sentinel-voice-col {
    max-height: none;
    overflow: visible;
  }
}

/* ── General UI improvements ── */

/* Better view header */
.view-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-bottom: 24px; padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.view-title {
  font-family: 'Bodoni Moda', serif;
  font-size: 1.8rem; font-weight: 700; color: var(--text-1);
  letter-spacing: -0.01em; margin-bottom: 4px;
}
.view-sub { color: var(--text-3); font-size: 0.88rem; line-height: 1.5; }

/* Better vital cards */
.vital-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px; cursor: pointer;
}
.vital-label {
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 10px;
}
.vital-val {
  font-family: 'Bodoni Moda', serif;
  font-size: 2.6rem; font-weight: 700; color: var(--text-1); line-height: 1;
}
.vital-card.accent .vital-val { color: var(--gold); }
.vital-card.danger .vital-val { color: var(--danger); }
.vital-card.success .vital-val { color: var(--success); }
.vital-card.warn .vital-val { color: var(--warn); }

/* ==========================================================================
   EXECUTIVE UI PASS
   Cleaner SaaS styling for founders: quiet surfaces, tighter spacing,
   professional plan cards, and less novelty/glow treatment.
   ========================================================================== */

:root {
  --gold: #C9A84C;
  --gold-lt: #E6C978;
  --gold-dim: rgba(201,168,76,0.12);
  --bg: #0B0B0C;
  --bg-2: #101012;
  --bg-3: #151518;
  --bg-4: #1B1B20;
  --surface: #141417;
  --surface-2: #1B1B20;
  --border: rgba(255,255,255,0.08);
  --border-med: rgba(255,255,255,0.13);
  --text-1: #F6F3EA;
  --text-2: #C9C5B8;
  --text-3: #8D897E;
  --shadow: 0 18px 45px rgba(0,0,0,0.22);
  --shadow-lg: 0 28px 80px rgba(0,0,0,0.32);
  --radius: 8px;
  --radius-sm: 6px;
  --radius-lg: 8px;
  --sidebar-w: 272px;
}

[data-theme="light"] {
  --bg: #F5F3ED;
  --bg-2: #EEECE5;
  --bg-3: #E8E5DD;
  --bg-4: #DEDBD2;
  --surface: #FFFEFA;
  --surface-2: #F7F5EF;
  --border: rgba(28,25,18,0.09);
  --border-med: rgba(28,25,18,0.15);
  --text-1: #17140F;
  --text-2: #3D382E;
  --text-3: #706A5D;
  --shadow: 0 16px 42px rgba(28,25,18,0.08);
  --shadow-lg: 0 28px 80px rgba(28,25,18,0.12);
}

html { font-size: 16px; }
body {
  background: var(--bg);
  letter-spacing: 0;
}

.auth-noise,
.auth-glow-orb {
  display: none;
}

.auth-card,
.settings-section,
.vital-card,
.group-card,
.directive-card,
.locker-card,
.notification-card,
.sv-action-card,
.sv-orb-card,
.sentinel-chat-col,
.subscription-current,
.subscription-plan-card,
.subscription-usage-card,
.subscription-entitlements {
  border-radius: var(--radius);
  box-shadow: none;
}

.auth-card {
  border-color: var(--border-med);
  background: var(--surface) !important;
  box-shadow: var(--shadow-lg);
}

.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-ghost-danger,
.nudge-card-btn,
.sv-tap-btn,
.scope-btn,
.topbar-plan-btn,
.theme-btn,
.icon-btn {
  border-radius: var(--radius-sm);
  box-shadow: none !important;
}

.btn-primary {
  background: var(--gold) !important;
  background-image: none !important;
  color: #11100C;
  font-weight: 800;
}

.btn-primary:hover {
  background: var(--gold-lt) !important;
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--surface-2);
  border-color: var(--border-med);
  color: var(--text-1);
}

.btn-secondary:hover {
  background: var(--bg-4);
  border-color: rgba(201,168,76,0.48);
}

.sidebar {
  background: #0D0D0F;
  border-right: 1px solid rgba(255,255,255,0.08);
}

[data-theme="light"] .sidebar {
  background: #F1EEE7;
  border-right-color: rgba(28,25,18,0.1);
}

.sidebar-top {
  padding: 22px 18px 14px;
}

.sidebar-brand {
  padding: 8px 6px;
}

.sidebar-nav {
  padding: 8px 10px 16px;
}

.nav-label {
  padding: 18px 12px 7px;
  color: var(--text-3);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
}

.nav-btn {
  min-height: 42px;
  width: 100%;
  margin: 2px 0;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font-size: 0.9rem;
  font-weight: 650;
}

.nav-btn:hover {
  background: rgba(255,255,255,0.055);
  color: var(--text-1);
}

.nav-btn.active {
  background: rgba(201,168,76,0.14);
  color: var(--gold-lt);
}

.nav-btn.active::before {
  left: 0;
  top: 11px;
  bottom: 11px;
  width: 2px;
  background: var(--gold);
}

.sidebar-user {
  background: rgba(255,255,255,0.025);
}

.main {
  background: var(--bg);
}

.topbar {
  min-height: 66px;
  background: rgba(16,16,18,0.94) !important;
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(10px);
}

[data-theme="light"] .topbar {
  background: rgba(238,236,229,0.94) !important;
}

.breadcrumb {
  font-size: 0.98rem;
  font-weight: 750;
}

.search-wrap {
  min-width: 260px;
  background: var(--surface);
  border-color: var(--border);
  padding: 9px 12px;
}

.topbar-plan-btn {
  background: rgba(201,168,76,0.12);
  border-color: rgba(201,168,76,0.38);
  color: var(--gold-lt);
  font-weight: 850;
}

.view {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 30px 34px 46px;
}

.view-header {
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}

.view-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1.55rem;
  font-weight: 850;
  line-height: 1.15;
  letter-spacing: 0;
}

.view-sub {
  max-width: 720px;
  color: var(--text-3);
  font-size: 0.9rem;
  line-height: 1.55;
}

.vitals-row {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 12px;
}

.vital-card {
  min-height: 132px;
  padding: 18px;
  background: var(--surface);
  border-color: var(--border);
}

.vital-card:hover,
.group-card:hover,
.dashboard-nudge-card:hover,
.sv-action-card:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(201,168,76,0.32);
  box-shadow: none !important;
}

.vital-card::before {
  height: 2px;
  opacity: 0.9;
}

.vital-label {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

.vital-val {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 2.05rem;
  font-weight: 850;
}

.dashboard-nudge-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: none;
}

.nudge-card-icon {
  background: rgba(201,168,76,0.12);
  color: var(--gold);
}

.nudge-card-title,
.group-card-name,
.sv-action-title,
.setting-label {
  color: var(--text-1);
  font-weight: 800;
}

.group-card,
.group-row,
.settings-section,
.api-status-row,
.member-row,
.invite-row {
  background: var(--surface);
  border-color: var(--border);
}

.group-card {
  padding: 18px;
}

.group-card-icon,
.sv-action-icon {
  border-radius: var(--radius-sm);
  background: rgba(201,168,76,0.11) !important;
  color: var(--gold) !important;
}

.settings-section {
  padding: 22px;
  background: var(--surface);
}

.settings-section h3,
.section-header h3,
.sv-section-label,
.sv-actions-label {
  color: var(--text-2);
  letter-spacing: 0.08em;
}

.sentinel-master-grid {
  gap: 16px;
}

.sentinel-chat-col,
.sv-orb-card,
.sv-action-card {
  background: var(--surface);
  border-color: var(--border);
}

.sv-card-danger,
.sv-card-siri,
.sv-card-notif {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}

.sv-tap-danger,
.sv-tap-siri,
.sv-tap-google,
.sv-tap-notif,
.nudge-card-btn {
  background: var(--surface-2);
  border-color: var(--border-med);
  color: var(--text-1);
}

.sv-tap-danger:hover:not(:disabled),
.sv-tap-siri:hover:not(:disabled),
.sv-tap-google:hover:not(:disabled),
.sv-tap-notif:hover:not(:disabled),
.nudge-card-btn:hover {
  border-color: rgba(201,168,76,0.45);
  color: var(--gold-lt);
  background: rgba(201,168,76,0.1);
}

.feature-lock-overlay,
.group-lock-overlay {
  background: rgba(11,11,12,0.68);
  backdrop-filter: blur(3px);
}

/* Subscription */
.subscription-page-shell {
  max-width: 1180px;
}

.subscription-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.subscription-current {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
}

.subscription-current-copy {
  min-width: 0;
}

.subscription-kicker,
.subscription-section-title,
.subscription-plan-badge {
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}

.subscription-plan-name {
  margin-top: 8px;
  margin-bottom: 6px;
  color: var(--text-1);
  font-size: 1.5rem;
  font-weight: 850;
}

.subscription-plan-meta {
  color: var(--text-3);
  font-size: 0.86rem;
  line-height: 1.55;
}

.subscription-free-note {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 11px;
  margin-top: 12px;
  border: 1px solid rgba(77,204,143,0.24);
  background: rgba(77,204,143,0.09);
  color: var(--success);
  font-size: 0.82rem;
  font-weight: 800;
}

.subscription-domain {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 10px;
  margin-top: 12px;
  border-radius: 999px;
  background: rgba(201,168,76,0.12);
  color: var(--gold-lt);
}

.subscription-price-block {
  text-align: right;
  white-space: nowrap;
}

.subscription-price {
  display: block;
  color: var(--text-1);
  font-size: 1.65rem;
  font-weight: 850;
}

.subscription-price-note {
  display: block;
  color: var(--text-3);
  font-size: 0.78rem;
  margin-top: 4px;
}

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

.subscription-usage-card,
.subscription-entitlements {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 18px;
}

.subscription-usage-card span {
  display: block;
  color: var(--text-3);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.subscription-usage-card strong {
  color: var(--text-1);
  font-size: 1.15rem;
  font-weight: 850;
}

.subscription-entitlements {
  padding: 18px;
}

.subscription-section-title {
  margin-bottom: 12px;
}

.subscription-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.feature-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 46px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--text-1);
  font-size: 0.82rem;
  font-weight: 750;
}

.feature-pill em {
  color: var(--text-3);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 800;
}

.feature-pill.on {
  background: rgba(77,204,143,0.08);
  border-color: rgba(77,204,143,0.22);
}

.feature-pill.on em { color: var(--success); }

.feature-pill.off {
  background: var(--bg-3);
  border-color: var(--border);
  color: var(--text-3);
}

.feature-pill.off em { color: var(--warn); }

.feature-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
  flex: 0 0 auto;
}

.subscription-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.subscription-plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 390px;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
}

.subscription-plan-card.active {
  border-color: rgba(201,168,76,0.62);
  background: linear-gradient(180deg, rgba(201,168,76,0.09), var(--surface) 42%);
}

.subscription-plan-card.locked {
  border-color: rgba(245,166,35,0.34);
  background:
    linear-gradient(180deg, rgba(245,166,35,0.08), transparent 42%),
    var(--surface);
}

.subscription-plan-card.locked .subscription-plan-badge {
  color: var(--warn);
}

.subscription-plan-top {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin: 16px 0 18px;
}

.subscription-plan-top h3 {
  margin: 0 0 7px;
  color: var(--text-1);
  font-size: 1.1rem;
  font-weight: 850;
}

.subscription-plan-top p {
  margin: 0;
  color: var(--text-3);
  font-size: 0.85rem;
  line-height: 1.55;
}

.current-plan-badge {
  align-self: flex-start;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(201,168,76,0.14);
  color: var(--gold-lt);
  font-size: 0.68rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.subscription-plan-price {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-bottom: 8px;
}

.subscription-plan-price strong {
  color: var(--text-1);
  font-size: 1.55rem;
  font-weight: 850;
}

.subscription-plan-price span {
  color: var(--text-3);
  font-size: 0.8rem;
}

.subscription-plan-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 18px 0 22px;
  padding: 0;
  list-style: none;
}

.subscription-plan-list li {
  position: relative;
  padding-left: 18px;
  color: var(--text-2);
  font-size: 0.86rem;
  line-height: 1.4;
}

.subscription-plan-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
}

.subscription-action {
  width: 100%;
  margin-top: auto;
}

.subscription-lock-note {
  margin: 8px 0 12px;
  padding: 9px 11px;
  border: 1px solid rgba(245,158,11,0.28);
  border-radius: 12px;
  color: var(--warn);
  background: rgba(245,158,11,0.08);
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.35;
}

.subscription-empty {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

@media (max-width: 1180px) {
  .vitals-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .subscription-plans,
  .subscription-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .view {
    padding: 22px 18px 34px;
  }
  .subscription-current,
  .subscription-usage-grid {
    grid-template-columns: 1fr;
  }
  .subscription-current {
    flex-direction: column;
  }
  .subscription-price-block {
    text-align: left;
  }
  .subscription-plans,
  .subscription-features {
    grid-template-columns: 1fr;
  }
}

/* Accessibility and feature completion overrides */
.vital-val,
.subscription-price,
.subscription-plan-price strong,
.subscription-usage-card strong,
.stat-val {
  font-weight: 900;
}

.group-row-name {
  color: var(--text-1);
  font-weight: 850;
}

.group-row-icon {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: rgba(201,168,76,0.11);
  color: var(--gold);
  font-size: 1.25rem;
}

.group-row-info {
  flex: 1;
  min-width: 0;
}

.group-row-meta,
.group-card-meta,
.notif-desc,
.view-sub,
.text-muted {
  color: var(--text-2);
  font-weight: 650;
}

.group-row-stats,
.group-card-stats,
.group-detail-stats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 26px;
  padding: 5px 9px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border-med);
  color: var(--text-1);
  font-size: 0.76rem;
  font-weight: 850;
  line-height: 1;
}

.stat-pill.success { color: var(--success); background: var(--success-dim); }
.stat-pill.warn { color: var(--warn); background: var(--warn-dim); }
.stat-pill.danger { color: var(--danger); background: var(--danger-dim); }
.stat-pill.lock-pill { color: var(--warn); }

.notif-action-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.notif-action-card,
.platinum-action-btn {
  border: 1px solid var(--border-med);
  background: var(--surface-2);
  color: var(--text-1);
  border-radius: var(--radius-sm);
  padding: 8px 11px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
}

.notif-action-card:hover,
.platinum-action-btn:hover:not(:disabled) {
  border-color: rgba(201,168,76,0.48);
  color: var(--gold-lt);
}

.notif-action-state {
  display: inline-flex;
  align-items: center;
  color: var(--text-2);
  font-size: 0.78rem;
  font-weight: 750;
}

.platinum-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.platinum-actions.feature-locked {
  opacity: 0.58;
}

.platinum-action-btn:disabled {
  cursor: not-allowed;
}

.google-summary-panel {
  margin-top: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
  background: var(--bg-3);
}

.google-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.google-summary-title {
  color: var(--text-1);
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.google-summary-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 0;
  color: var(--text-1);
  font-size: 0.9rem;
  font-weight: 750;
  border-top: 1px solid var(--border);
}

.google-summary-item span,
.google-summary-errors {
  color: var(--text-2);
  font-size: 0.78rem;
  font-weight: 650;
}

.google-summary-errors {
  margin-top: 10px;
}

@media (max-width: 720px) {
  .platinum-actions,
  .google-summary-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .topbar {
    min-height: 60px;
  }
  .vitals-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .search-wrap {
    display: none;
  }
}

@media (max-width: 480px) {
  .view-title {
    font-size: 1.32rem;
  }
  .vitals-row {
    grid-template-columns: 1fr;
  }
}

/* Final publishing pass: role visibility, contrast, and accessible controls */
:root {
  --text-2: #DDD6C8;
  --text-3: #B8B1A4;
  --border: rgba(255,255,255,0.12);
  --border-med: rgba(255,255,255,0.2);
}

[data-theme="light"] {
  --text-2: #332F28;
  --text-3: #5B554B;
  --border: rgba(28,25,18,0.12);
  --border-med: rgba(28,25,18,0.2);
}

html[data-contrast="more"] {
  --text-2: #F0EADA;
  --text-3: #D7CEBA;
  --border: rgba(255,255,255,0.22);
  --border-med: rgba(255,255,255,0.34);
}

html[data-theme="light"][data-contrast="more"] {
  --text-2: #211D16;
  --text-3: #3E382E;
  --border: rgba(28,25,18,0.22);
  --border-med: rgba(28,25,18,0.34);
}

html[data-large-text="true"] {
  font-size: 18px;
}

.role-hidden {
  display: none !important;
}

/* Final executive polish */
.sidebar {
  background:
    linear-gradient(180deg, rgba(201,168,76,0.055), transparent 18%),
    #0D0D0F;
}

.sidebar-brand svg {
  filter: drop-shadow(0 0 12px rgba(201,168,76,0.22));
}

.sidebar-toggle-btn,
.mobile-menu-btn,
.icon-btn,
.theme-btn,
.topbar-avatar,
.identity-pill,
.topbar-plan-btn {
  backdrop-filter: blur(10px);
}

.sidebar-toggle-btn {
  border: 1px solid transparent;
}

.sidebar-toggle-btn:hover {
  border-color: rgba(201,168,76,0.36);
  background: rgba(201,168,76,0.08);
}

.topbar {
  box-shadow: 0 10px 28px rgba(0,0,0,0.16);
}

.view-header {
  position: relative;
}

.view-header::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 92px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}

.settings-summary,
.settings-section,
.ecosystem-card,
.api-status-row {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
}

.settings-summary {
  background:
    linear-gradient(160deg, rgba(201,168,76,0.09), transparent 42%),
    var(--surface);
}

.settings-summary-avatar,
.user-avatar,
.topbar-avatar {
  border-radius: 8px;
}

.settings-subtabs {
  width: fit-content;
}

.settings-subtab {
  min-width: 92px;
}

.settings-section h3 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.settings-section h3::before {
  content: '';
  width: 6px;
  height: 18px;
  border-radius: 999px;
  background: var(--gold);
  box-shadow: 0 0 18px rgba(201,168,76,0.24);
}

.ecosystem-card {
  transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease;
}

.ecosystem-card:hover {
  border-color: rgba(201,168,76,0.34);
  transform: translateY(-1px);
}

[data-theme="light"] .sidebar-restore-btn {
  background: linear-gradient(145deg, rgba(201,168,76,0.18), rgba(255,254,250,0.98));
  box-shadow: 0 14px 32px rgba(28,25,18,0.12);
}

.identity-pill {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border: 1.5px solid var(--border-med);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-1);
  font: inherit;
  cursor: pointer;
}

.identity-role-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(201,168,76,0.13);
}

.identity-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
}

.identity-role {
  color: var(--gold-lt);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.identity-name {
  max-width: 130px;
  color: var(--text-1);
  font-size: 0.82rem;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-avatar {
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--gold);
  font-family: 'Inter', system-ui, sans-serif;
}

.role-access-card {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  padding: 14px 16px;
  border: 1px solid rgba(201,168,76,0.32);
  border-radius: var(--radius);
  background: rgba(201,168,76,0.09);
}

.role-access-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--gold);
  color: #11100C;
  font-weight: 950;
}

.role-access-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.role-access-copy strong {
  color: var(--text-1);
  font-size: 0.98rem;
  font-weight: 900;
}

.role-access-copy span {
  color: var(--text-2);
  font-size: 0.88rem;
  font-weight: 650;
  line-height: 1.45;
}

.settings-layout {
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 760px);
  gap: 18px;
  align-items: start;
}

.settings-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.settings-summary {
  position: sticky;
  top: 88px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.settings-summary-avatar {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--gold);
  background: var(--gold-dim);
  color: var(--gold-lt);
  font-size: 1.05rem;
  font-weight: 900;
}

.settings-summary-name {
  color: var(--text-1);
  font-size: 1.05rem;
  font-weight: 900;
}

.settings-summary-email {
  margin-top: 3px;
  color: var(--text-2);
  font-size: 0.86rem;
  font-weight: 650;
  word-break: break-word;
}

.settings-summary-grid {
  display: grid;
  gap: 9px;
}

.settings-summary-grid div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
}

.settings-summary-grid span {
  color: var(--text-3);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.settings-summary-grid strong {
  color: var(--text-1);
  font-size: 0.86rem;
  font-weight: 900;
  text-align: right;
}

.settings-section {
  margin-bottom: 0;
  border-color: var(--border-med);
}

.notification-bar {
  position: sticky;
  top: 66px;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 52px;
  padding: 10px 34px;
  border-bottom: 1px solid var(--border);
  background: rgba(16,16,18,0.92);
  backdrop-filter: blur(10px);
}

[data-theme="light"] .notification-bar {
  background: rgba(238,236,229,0.92);
}

.notification-bar-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--text-2);
  font-size: 0.86rem;
  font-weight: 750;
  line-height: 1.35;
}

#notification-bar-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notification-bar-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--text-3);
  flex: 0 0 auto;
}

.notification-bar.has-alert .notification-bar-dot {
  background: var(--warn);
  box-shadow: 0 0 0 4px var(--warn-dim);
}

.individual-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 14px 0 22px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.workload-teaser {
  align-items: stretch;
  border-color: rgba(201,168,76,0.24);
  background:
    linear-gradient(135deg, rgba(201,168,76,0.09), transparent 42%),
    var(--surface);
}

.individual-copy {
  min-width: 220px;
  flex: 1;
}

.individual-kicker {
  margin-bottom: 5px;
  color: var(--gold);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.individual-title {
  color: var(--text-1);
  font-size: 0.98rem;
  font-weight: 850;
}

.individual-sub {
  margin-top: 6px;
  max-width: 520px;
  color: var(--text-3);
  font-size: 0.82rem;
  line-height: 1.45;
}

.individual-metrics {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.individual-metrics span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border: 1px solid var(--border-med);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 0.78rem;
  font-weight: 800;
}

.individual-metrics strong {
  color: var(--text-1);
  font-size: 0.96rem;
  font-weight: 950;
}

.workload-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: -8px 0 22px;
}

.workload-preview-card {
  min-height: 104px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-1);
  text-align: left;
  cursor: pointer;
}

.workload-preview-card:hover {
  border-color: rgba(201,168,76,0.36);
  transform: translateY(-1px);
}

.workload-preview-card span,
.workload-preview-card em {
  color: var(--text-3);
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.workload-preview-card strong {
  color: var(--text-1);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.35;
}

.workload-preview-card em {
  color: var(--gold-lt);
  letter-spacing: 0;
  text-transform: none;
}

.workload-preview-card.is-clear {
  grid-column: 1 / -1;
  border-color: rgba(77,204,143,0.26);
}

.workload-stat-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.workload-stat-card {
  min-height: 112px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.025), transparent 46%),
    var(--surface);
}

.workload-stat-card.is-primary {
  border-color: rgba(201,168,76,0.34);
  background:
    linear-gradient(145deg, rgba(201,168,76,0.12), transparent 48%),
    var(--surface);
}

.workload-stat-card strong {
  display: block;
  color: var(--text-1);
  font-size: clamp(1.22rem, 2vw, 1.7rem);
  font-weight: 950;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.workload-stat-card span,
.workload-stat-card em {
  color: var(--text-2);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.workload-stat-card em {
  color: var(--text-3);
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
}

.workload-roster {
  display: grid;
  gap: 12px;
}

.workload-member {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), transparent 40%),
    var(--surface);
}

.workload-member.has-pending {
  border-color: rgba(245,166,35,0.26);
}

.workload-member.has-uncompleted {
  border-color: rgba(255,77,77,0.38);
  background:
    linear-gradient(180deg, rgba(255,77,77,0.06), transparent 44%),
    var(--surface);
}

.workload-member.is-clear {
  border-color: rgba(77,204,143,0.22);
}

.workload-member-head {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.workload-avatar {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(201,168,76,0.38);
  border-radius: var(--radius-sm);
  background: rgba(201,168,76,0.12);
  color: var(--gold-lt);
  font-size: 0.78rem;
  font-weight: 950;
}

.workload-member-copy strong,
.workload-member-score strong,
.workload-task-main strong {
  display: block;
  color: var(--text-1);
  font-weight: 900;
}

.workload-member-copy span,
.workload-member-score span,
.workload-task-main span {
  display: block;
  margin-top: 4px;
  color: var(--text-3);
  font-size: 0.78rem;
  font-weight: 750;
}

.workload-member-score {
  text-align: right;
  min-width: 76px;
}

.workload-member-score strong {
  font-size: 1.3rem;
  line-height: 1;
}

.workload-member-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.workload-member-meta-row span {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 0.72rem;
  font-weight: 850;
}

.workload-loadbar {
  height: 8px;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--bg-3);
  border: 1px solid var(--border);
}

.workload-loadbar span {
  display: block;
  height: 100%;
  min-width: 8px;
  border-radius: inherit;
  background: var(--success);
}

.workload-member.load-active .workload-loadbar span {
  background: var(--gold);
}

.workload-member.load-busy .workload-loadbar span {
  background: var(--warn);
}

.workload-member.load-heavy .workload-loadbar span {
  background: var(--danger);
}

.workload-task-list {
  margin-top: 14px;
  display: grid;
  gap: 8px;
}

.workload-task-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.workload-task-row.due-late {
  border-color: rgba(255,77,77,0.26);
  background:
    linear-gradient(180deg, rgba(255,77,77,0.055), transparent),
    var(--surface-2);
}

.workload-task-row.due-soon {
  border-color: rgba(245,166,35,0.26);
}

.workload-task-main strong {
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.workload-task-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.workload-chip,
.workload-due,
.workload-source {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 5px 8px;
  border: 1px solid var(--border-med);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font-size: 0.72rem;
  font-weight: 900;
}

.workload-source {
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--bg-3);
}

.workload-chip.urgent {
  border-color: rgba(255,77,77,0.34);
  color: var(--danger);
}

.workload-chip.medium {
  border-color: rgba(245,166,35,0.32);
  color: var(--warn);
}

.workload-chip.low {
  border-color: rgba(77,204,143,0.28);
  color: var(--success);
}

.workload-empty-line {
  padding: 12px;
  border: 1px dashed var(--border-med);
  border-radius: var(--radius-sm);
  background: var(--bg-3);
  color: var(--text-3);
  font-size: 0.82rem;
  font-weight: 750;
}

.workload-more-line {
  padding: 9px 12px;
  color: var(--gold-lt);
  font-size: 0.78rem;
  font-weight: 900;
}

@media (max-width: 1180px) {
  .workload-stat-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.settings-section h3 {
  color: var(--text-1);
}

.setting-row {
  gap: 16px;
}

.setting-desc,
.field-hint,
.view-sub,
.group-row-meta,
.group-card-meta,
.api-status-detail,
.text-muted {
  color: var(--text-2) !important;
  font-weight: 650;
}

.settings-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  min-height: 38px;
  cursor: pointer;
  color: var(--text-1);
  font-size: 0.88rem;
  font-weight: 800;
  white-space: nowrap;
}

.settings-toggle input {
  width: 20px;
  height: 20px;
  accent-color: var(--gold);
}

.vital-val,
.stat-pill,
.subscription-price,
.subscription-plan-price strong,
.subscription-usage-card strong {
  font-weight: 950;
}

button,
[role="button"],
input,
select,
textarea {
  min-height: 38px;
}

button:disabled,
input:disabled,
select:disabled {
  opacity: 0.62;
  cursor: not-allowed;
}

button[aria-busy="true"] {
  pointer-events: none;
}

.notification-bar.has-success .notification-bar-dot {
  background: var(--success);
  box-shadow: 0 0 0 4px var(--success-dim);
}

.notification-bar.has-warning .notification-bar-dot {
  background: var(--warn);
  box-shadow: 0 0 0 4px var(--warn-dim);
}

.notification-bar.is-temporary {
  border-bottom-color: rgba(77,204,143,0.32);
  background: rgba(14,28,22,0.94);
}

[data-theme="light"] .notification-bar.is-temporary {
  background: rgba(231,245,237,0.96);
}

body[data-page="app"] .notification-bar:not(.has-alert):not(.has-success):not(.has-warning):not(.is-temporary) {
  display: none !important;
}

.report-view {
  max-width: 1180px;
  width: 100%;
}

#view-dashboard.view.active {
  display: flex;
  flex-direction: column;
}

#view-dashboard > .view-header { order: 1; }
#view-dashboard > .dashboard-command-panel { order: 2; }
#view-dashboard > .dashboard-mode-tabs { order: 3; }
#view-dashboard > .vitals-row { order: 4; }
#view-dashboard > .metric-info-popover { order: 5; }
#view-dashboard > .dashboard-action-grid { order: 6; }
#view-dashboard > .role-access-card { order: 7; }
#view-dashboard > .dashboard-nudge-card { order: 8; }
#view-dashboard > .dashboard-deep-panel { order: 9; }

#view-dashboard > .view-header {
  margin-bottom: 30px;
}

.dashboard-command-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.65fr) auto;
  gap: 18px;
  align-items: stretch;
  margin: 0 0 20px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface) 97%, var(--gold) 3%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
}

.dashboard-command-main {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 8px;
}

.dashboard-command-kicker,
.dashboard-command-meta,
.dashboard-decision-chip span {
  color: var(--text-3);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.dashboard-command-main strong {
  color: var(--text-1);
  font-size: 1.22rem;
  line-height: 1.25;
  font-weight: 900;
}

.dashboard-command-main p {
  max-width: 820px;
  margin: 0;
  color: var(--text-2);
  font-size: 0.92rem;
  line-height: 1.58;
}

.dashboard-command-side {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  align-items: center;
  padding-left: 16px;
  border-left: 1px solid var(--border);
}

.dashboard-decision-chip {
  min-width: 0;
  min-height: 58px;
  padding: 8px 12px;
  border: 0;
  border-left: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.dashboard-decision-chip:first-child {
  border-left: 0;
}

.dashboard-decision-chip strong {
  color: var(--text-1);
  font-size: 0.98rem;
  font-weight: 900;
  line-height: 1;
  overflow-wrap: anywhere;
}

.dashboard-decision-chip.danger strong,
.dashboard-decision-chip.warn strong {
  color: var(--text-1);
}

.dashboard-command-action {
  min-width: 112px;
  min-height: 44px;
  align-self: center;
  justify-self: end;
  border: 1px solid var(--border-med);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-1);
  font: 850 0.86rem 'Inter', system-ui, sans-serif;
  cursor: pointer;
}

.dashboard-command-action:hover {
  background: var(--gold);
  color: #090909;
}

#view-dashboard .vitals-row {
  grid-template-columns: repeat(5, minmax(145px, 1fr));
  gap: 20px;
  margin-bottom: 26px;
}

#view-dashboard .vital-card {
  min-height: 176px;
  padding: 24px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-radius: var(--radius-sm);
  border-color: var(--border);
  background: color-mix(in srgb, var(--surface) 98%, white 2%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.025);
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

#view-dashboard .vital-card:hover {
  transform: translateY(-2px) !important;
  border-color: var(--border-med);
  background: var(--surface-2);
  box-shadow: none !important;
}

#view-dashboard .vital-card::before {
  display: none;
}

#view-dashboard .vital-label {
  margin-bottom: 2px;
  padding-right: 30px;
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.065em;
}

#view-dashboard .vital-card.accent .vital-label { color: var(--gold-lt); }
#view-dashboard .vital-card.alignment .vital-label { color: #8DBEFF; }
#view-dashboard .vital-card.health .vital-label { color: var(--success); }
#view-dashboard .vital-card.danger .vital-label { color: #FF7373; }
#view-dashboard .vital-card.warn .vital-label { color: #F7B955; }

#view-dashboard .vital-val {
  color: var(--text-1);
  font-size: 2.18rem;
  letter-spacing: 0;
}

#view-dashboard .vital-card.accent .vital-val,
#view-dashboard .vital-card.danger .vital-val,
#view-dashboard .vital-card.success .vital-val,
#view-dashboard .vital-card.warn .vital-val {
  color: var(--text-1);
}

.vital-insight {
  margin-top: auto;
  color: var(--text-3);
  font-size: 0.78rem;
  line-height: 1.4;
}

.metric-info-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
}

.metric-info-btn svg {
  width: 20px;
  height: 20px;
}

.metric-info-btn:hover,
.metric-info-btn:focus-visible {
  color: var(--gold-lt);
  background: rgba(201,168,76,0.08);
}

.metric-info-popover {
  position: fixed;
  right: 28px;
  bottom: max(28px, env(safe-area-inset-bottom));
  z-index: 9600;
  width: min(360px, calc(100vw - 28px));
  padding: 20px 42px 20px 20px;
  border: 1px solid var(--border-med);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface) 94%, var(--bg) 6%);
  box-shadow: 0 22px 70px rgba(0,0,0,0.38);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.metric-info-eyebrow {
  display: block;
  margin-bottom: 8px;
  color: var(--gold);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.metric-info-popover strong {
  display: block;
  color: var(--text-1);
  font-size: 1.02rem;
  line-height: 1.3;
}

.metric-info-popover p {
  margin: 10px 0 0;
  color: var(--text-2);
  font-size: 0.88rem;
  line-height: 1.55;
}

.metric-info-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 26px;
  height: 26px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  font-size: 1rem;
  line-height: 1;
}

.metric-info-close svg {
  width: 17px;
  height: 17px;
}

[data-theme="light"] #view-dashboard .vital-card.accent .vital-label { color: #876A1E; }
[data-theme="light"] #view-dashboard .vital-card.alignment .vital-label { color: #2F67A7; }
[data-theme="light"] #view-dashboard .vital-card.health .vital-label { color: #257651; }
[data-theme="light"] #view-dashboard .vital-card.danger .vital-label { color: #B33B3B; }
[data-theme="light"] #view-dashboard .vital-card.warn .vital-label { color: #956315; }

#view-dashboard .role-access-card,
#view-dashboard .dashboard-nudge-card,
#view-dashboard .dashboard-action-card,
#view-dashboard .individual-summary {
  border-radius: var(--radius-sm);
  box-shadow: none;
}

#view-dashboard .role-access-card {
  margin: 2px 0 12px;
  padding: 12px 14px;
  border-color: var(--border);
  background: transparent;
  opacity: 0.82;
}

#view-dashboard .role-access-icon {
  width: 30px;
  height: 30px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--gold-lt);
  font-size: 0.74rem;
}

#view-dashboard .role-access-copy strong {
  font-size: 0.84rem;
}

#view-dashboard .role-access-copy span {
  font-size: 0.76rem;
}

#view-dashboard .dashboard-nudge-card {
  margin-bottom: 24px;
  padding: 16px;
  border-color: var(--border);
  background: transparent;
  gap: 12px;
}

#view-dashboard .nudge-card-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  border-color: var(--border);
  background: var(--surface-2);
  color: var(--text-2);
  animation: none;
}

#view-dashboard .nudge-card-icon svg {
  width: 18px;
  height: 18px;
}

.dashboard-mode-tabs {
  display: inline-flex;
  align-self: flex-start;
  gap: 4px;
  margin: 0 0 20px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.dashboard-mode-tab {
  min-width: 92px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-2);
  font-size: 0.82rem;
  font-weight: 900;
  cursor: pointer;
}

.dashboard-mode-tab.active {
  background: var(--gold);
  color: #070707;
}

.dashboard-action-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 22px;
}

.dashboard-action-card {
  min-height: 116px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-1);
  text-align: left;
  cursor: pointer;
}

.dashboard-action-card span {
  color: var(--text-3);
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dashboard-action-card strong {
  color: var(--text-1);
  font-size: 0.94rem;
  line-height: 1.45;
}

.dashboard-action-card em {
  color: var(--gold);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 900;
}

.dashboard-action-card.danger { border-color: rgba(255,77,77,0.38); }
.dashboard-action-card.warn { border-color: rgba(245,166,35,0.38); }
.dashboard-action-card.success { border-color: rgba(77,204,143,0.32); }

#view-dashboard .dashboard-action-card.danger,
#view-dashboard .dashboard-action-card.warn,
#view-dashboard .dashboard-action-card.success {
  border-color: var(--border);
}

.dashboard-action-card:hover {
  border-color: rgba(201,168,76,0.45);
  background: var(--surface-2);
}

.dashboard-deep-panel {
  animation: fadeUp 0.22s ease both;
}

.sentinel-thinking .sentinel-bubble {
  min-width: min(320px, 78%);
}

.ghost-line {
  display: block;
  height: 10px;
  width: 68%;
  margin: 4px 0;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,0.07), rgba(201,168,76,0.18), rgba(255,255,255,0.07));
  background-size: 220% 100%;
  animation: ghostShimmer 1.4s ease-in-out infinite;
}

.ghost-line.wide { width: 92%; }

.ghost-dots {
  display: inline-flex;
  gap: 5px;
  margin-top: 8px;
}

.ghost-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.45;
  animation: ghostPulse 1s ease-in-out infinite;
}

.ghost-dots i:nth-child(2) { animation-delay: 0.14s; }
.ghost-dots i:nth-child(3) { animation-delay: 0.28s; }

@keyframes ghostShimmer {
  from { background-position: 120% 0; }
  to { background-position: -120% 0; }
}

@keyframes ghostPulse {
  0%, 100% { opacity: 0.28; transform: translateY(0); }
  50% { opacity: 0.85; transform: translateY(-2px); }
}

.notif-row-optimistic {
  border-color: rgba(201,168,76,0.45);
  background: rgba(201,168,76,0.07);
}

.notif-action-card.approve {
  border-color: rgba(77,204,143,0.45);
  color: var(--success);
}

.notif-action-card.danger {
  border-color: rgba(255,77,77,0.38);
  color: var(--danger);
}

.notif-action-card.danger:hover {
  border-color: var(--danger);
  color: var(--danger);
  background: var(--danger-dim);
}

.locker-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.locker-card-tags span {
  padding: 3px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-2);
  font-size: 0.68rem;
  font-weight: 800;
}

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

.report-icon-btn {
  border-color: var(--border-med);
  background: var(--surface);
  color: var(--text-1);
}

.report-icon-btn:hover {
  border-color: rgba(201,168,76,0.55);
  color: var(--gold-lt);
  background: rgba(201,168,76,0.1);
}

.report-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  gap: 16px;
}

.report-card {
  min-height: 230px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.report-card.primary {
  border-color: rgba(201,168,76,0.36);
  background: linear-gradient(135deg, rgba(201,168,76,0.12), var(--surface) 44%);
}

.report-kicker {
  color: var(--gold);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.report-card strong {
  color: var(--text-1);
  font-size: 1.18rem;
  font-weight: 900;
}

.report-card p {
  color: var(--text-2);
  font-size: 0.9rem;
  line-height: 1.55;
}

.report-metric-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: auto;
}

.report-metric-row span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 8px 11px;
  border: 1px solid var(--border-med);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 0.82rem;
  font-weight: 800;
}

.report-metric-row b {
  color: var(--text-1);
  font-size: 1rem;
}

.analytics-report-grid {
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.8fr);
}

.analytics-hero-card {
  min-height: 280px;
}

.analytics-insight-card {
  grid-column: 1 / -1;
  min-height: auto;
}

.analytics-score-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: auto;
}

.analytics-score-strip span,
.button-explainer-row span,
.action-helper-grid span,
.settings-help-panel {
  border: 1px solid var(--border-med);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.analytics-score-strip span {
  min-height: 76px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 12px;
}

.analytics-score-strip b {
  color: var(--gold-lt);
  font-size: 1.35rem;
  font-weight: 950;
}

.analytics-score-strip small {
  color: var(--text-2);
  font-size: 0.74rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.button-explainer-row,
.action-helper-grid {
  display: grid;
  gap: 8px;
}

.button-explainer-row span,
.action-helper-grid span {
  padding: 10px 11px;
  color: var(--text-2);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.45;
}

.button-explainer-row b,
.action-helper-grid b,
.settings-help-panel strong {
  color: var(--text-1);
  font-weight: 900;
}

.analytics-watch-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.analytics-watch-list li {
  padding-left: 16px;
  position: relative;
  color: var(--text-2);
  font-size: 0.9rem;
  line-height: 1.5;
}

.analytics-watch-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}

.analytics-watch-list.numbered {
  counter-reset: analytics-signal;
}

.analytics-watch-list.numbered li {
  padding: 14px 16px 14px 56px;
  border: 1px solid var(--border-med);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  counter-increment: analytics-signal;
}

.analytics-watch-list.numbered li::before {
  content: counter(analytics-signal, decimal-leading-zero);
  left: 16px;
  top: 12px;
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 900;
}

.report-period-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.report-period-btn {
  min-width: 68px;
  min-height: 34px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 900;
  cursor: pointer;
}

.report-period-btn.active {
  background: var(--gold);
  color: #070707;
}

.analytics-merged-grid {
  grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.82fr);
}

.analytics-hero-card,
.analytics-signals-card,
.analytics-sync-card,
.analytics-commitments-card {
  min-height: auto;
}

.analytics-insight-card,
.analytics-signals-card,
.analytics-sync-card,
.analytics-commitments-card {
  grid-column: 1 / -1;
}

.analytics-update-stack {
  display: grid;
  gap: 12px;
  margin-top: auto;
}

.analytics-update-item {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border-med);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.analytics-update-item span {
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 950;
}

.analytics-update-item strong,
.report-operating-read strong,
.analytics-sync-pane-head strong {
  color: var(--text-1);
  font-size: 0.94rem;
  font-weight: 900;
}

.analytics-update-item p,
.report-operating-read span,
.report-table-sub {
  color: var(--text-2);
  font-size: 0.84rem;
  line-height: 1.5;
}

.analytics-update-item em {
  display: block;
  margin-top: 8px;
  color: var(--text-3);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 800;
}

.analytics-update-item.tone-risk {
  border-color: rgba(255,107,107,0.35);
}

.analytics-update-item.tone-win {
  border-color: rgba(77,204,143,0.3);
}

.report-operating-read {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--border-med);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.report-sync-status {
  margin-top: auto;
  color: var(--gold-lt);
  font-size: 0.8rem;
  font-weight: 900;
}

.analytics-sync-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.analytics-sync-pane {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--border-med);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.analytics-sync-pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.analytics-sync-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.analytics-sync-form-grid.mirror {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.compact-check {
  margin-top: -2px;
}

.settings-action-row.compact {
  margin-top: 0;
}

.report-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border-med);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.report-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.report-table th,
.report-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-med);
  text-align: left;
  vertical-align: top;
}

.report-table th {
  color: var(--text-2);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.report-table td {
  color: var(--text-1);
  font-size: 0.84rem;
}

.report-table tbody tr:last-child td {
  border-bottom: 0;
}

.report-table-main {
  color: var(--text-1);
  font-weight: 800;
  line-height: 1.45;
}

.report-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 900;
}

.report-status-pill.done {
  background: rgba(77,204,143,0.14);
  color: var(--success);
}

.report-status-pill.pending {
  background: rgba(201,168,76,0.14);
  color: var(--gold-lt);
}

.analytics-empty {
  color: var(--text-3);
  font-size: 0.84rem;
}

.meeting-connect-panel,
.meeting-modal-connect {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-3);
}

.meeting-modal-connect {
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.meeting-connect-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.meeting-connect-copy strong,
#meeting-modal-state {
  color: var(--text-1);
  font-size: 0.82rem;
  font-weight: 850;
}

.meeting-connect-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.meeting-connect-btn {
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid var(--border-med);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-1);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 850;
  cursor: pointer;
}

.meeting-connect-btn:hover,
.meeting-connect-btn.active,
.meeting-connect-btn.accent {
  border-color: rgba(201,168,76,0.48);
  color: var(--gold-lt);
  background: rgba(201,168,76,0.1);
}

.setting-intro {
  margin: -4px 0 16px;
  color: var(--text-2);
  font-size: 0.88rem;
  line-height: 1.55;
}

.settings-help-panel {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 14px 0 0;
  padding: 13px 14px;
  color: var(--text-2);
  font-size: 0.84rem;
  line-height: 1.5;
}

.settings-help-panel.compact {
  margin: 0 0 16px;
}

.gold-webhook-card {
  border-color: rgba(201,168,76,0.34);
}

.gold-webhook-card .ecosystem-card-toggle {
  background: linear-gradient(90deg, rgba(201,168,76,0.09), transparent);
}

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

.secret-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-3);
}

.secret-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.secret-card-head span {
  color: var(--text-1);
  font-size: 0.88rem;
  font-weight: 900;
}

.secret-card-head em,
.inline-status {
  color: var(--text-2);
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 800;
}

.secret-card input,
.mirror-config-grid input,
.mirror-config-grid select,
.cost-params-grid input,
.cost-params-grid select {
  width: 100%;
  min-width: 0;
}

.mirror-config-grid,
.cost-params-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(130px, 0.5fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.trigger-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 4px 0 16px;
}

.trigger-grid .settings-toggle {
  justify-content: flex-start;
  padding: 10px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-3);
}

.settings-action-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.settings-subtabs {
  display: inline-flex;
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-3);
}

.settings-subtab {
  min-height: 36px;
  padding: 8px 13px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 850;
  cursor: pointer;
}

.settings-subtab.active {
  background: rgba(201,168,76,0.14);
  color: var(--gold-lt);
}

.settings-tab-hidden {
  display: none !important;
}

.ecosystem-value-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px;
  gap: 18px;
  align-items: center;
  margin-bottom: 18px;
  padding: 18px;
  border: 1px solid rgba(201,168,76,0.36);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(201,168,76,0.16), rgba(255,255,255,0.03));
}

.ecosystem-value-banner strong {
  display: block;
  color: var(--text-1);
  font-size: 1rem;
  line-height: 1.35;
  margin: 4px 0;
}

.ecosystem-value-banner em {
  color: var(--text-2);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 800;
}

.connection-health-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  margin: 0 0 18px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.045);
}

.connection-health-copy strong {
  display: block;
  color: var(--text-1);
  font-size: 1rem;
  line-height: 1.3;
  margin: 4px 0 6px;
}

.connection-health-copy p {
  margin: 0;
  color: var(--text-3);
  font-size: 0.82rem;
  line-height: 1.5;
}

.connection-health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.connection-health-loading {
  color: var(--text-3);
  font-size: 0.8rem;
  font-weight: 800;
}

.connection-health-item {
  min-width: 0;
  min-height: 62px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-3);
}

.connection-health-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--warn);
  box-shadow: 0 0 0 4px var(--warn-dim);
}

.connection-health-item.ready .connection-health-dot {
  background: var(--success);
  box-shadow: 0 0 0 4px var(--success-dim);
}

.connection-health-item strong,
.connection-health-item em,
.connection-health-item b {
  display: block;
  min-width: 0;
}

.connection-health-item strong {
  color: var(--text-1);
  font-size: 0.82rem;
  font-weight: 900;
}

.connection-health-item em {
  color: var(--text-3);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 750;
  line-height: 1.35;
}

.connection-health-item b {
  color: var(--text-2);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.connection-health-item.ready b {
  color: var(--success);
}

.ecosystem-pushback-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.35fr);
  gap: 16px;
  align-items: center;
  margin: 0 0 18px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 12% 0%, rgba(255,255,255,0.12), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,0.065), rgba(201,168,76,0.08));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  overflow: hidden;
}

.ecosystem-pushback-card::after {
  content: "";
  position: absolute;
  inset: auto 18px 14px auto;
  width: 120px;
  height: 120px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(201,168,76,0.18), transparent 66%);
  pointer-events: none;
}

.ecosystem-pushback-card strong {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 680px;
  color: var(--text-1);
  font-size: 1.03rem;
  line-height: 1.35;
  letter-spacing: -0.015em;
}

.ecosystem-pushback-card p {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 7px 0 0;
  color: var(--text-2);
  font-size: 0.84rem;
  line-height: 1.5;
}

.pushback-status-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
}

.pushback-status-grid span {
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-2);
  background: rgba(255,255,255,0.045);
  font-size: 0.74rem;
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
}

.pushback-status-grid span.ready {
  color: #11100c;
  border-color: rgba(201,168,76,0.5);
  background: linear-gradient(135deg, var(--gold), var(--gold-lt));
  box-shadow: 0 0 26px rgba(201,168,76,0.22);
}

.ecosystem-meter {
  position: relative;
  height: 16px;
  border: 1px solid rgba(201,168,76,0.42);
  border-radius: 999px;
  overflow: hidden;
  background: var(--bg-2);
}

.ecosystem-meter span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: linear-gradient(90deg, var(--gold), var(--gold-lt));
  transition: width 0.35s ease;
}

.ecosystem-meter b {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--text-1);
  font-size: 0.68rem;
  font-weight: 900;
}

.ecosystem-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.ecosystem-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-3);
  overflow: hidden;
}

.ecosystem-card-toggle {
  width: 100%;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border: 0;
  background: transparent;
  color: var(--text-1);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ecosystem-card-toggle span {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ecosystem-card-toggle b {
  font-size: 0.98rem;
  font-weight: 900;
}

.ecosystem-card-toggle small {
  color: var(--text-2);
  font-size: 0.76rem;
  font-weight: 750;
}

.connection-status-badge {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.connection-status-badge.disconnected {
  color: var(--text-3);
  background: var(--surface-2);
  border: 1px solid var(--border-med);
}

.connection-status-badge.synced {
  color: #11100c;
  background: var(--gold-lt);
  box-shadow: 0 0 22px rgba(201,168,76,0.28);
}

.ecosystem-card-fields {
  max-height: 0;
  overflow: hidden;
  padding: 0 14px;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.ecosystem-card.expanded .ecosystem-card-fields {
  max-height: 520px;
  padding: 0 14px 14px;
}

.ecosystem-card-fields em {
  color: var(--text-2);
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 800;
}

.connection-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin: 12px 0;
}

.integration-how-panel {
  margin-top: 16px;
}

.integration-how-steps {
  list-style: none;
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  counter-reset: integration-step;
}

.integration-how-steps li {
  counter-increment: integration-step;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 4px 10px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.integration-how-steps li::before {
  content: counter(integration-step);
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--gold-dim);
  color: var(--gold-lt);
  font-size: 0.76rem;
  font-weight: 950;
}

.integration-how-steps strong,
.integration-how-steps span {
  grid-column: 2;
}

.integration-how-steps strong {
  color: var(--text-1);
  font-size: 0.9rem;
  font-weight: 900;
}

.integration-how-steps span {
  color: var(--text-2);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.45;
}

.integration-how-notes {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.integration-how-notes span {
  display: block;
  padding: 9px 10px;
  border: 1px dashed var(--border-med);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  background: rgba(255,255,255,0.025);
  font-size: 0.8rem;
  font-weight: 750;
  line-height: 1.4;
}

.integration-how-actions {
  display: flex;
  justify-content: flex-start;
  margin-top: 14px;
}

.workload-task-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.btn-xs {
  min-height: 28px;
  padding: 6px 9px;
  border-radius: 999px;
  font-size: 0.68rem;
  line-height: 1;
}

@media (max-width: 860px) {
  .connection-health-panel {
    grid-template-columns: 1fr;
  }

  .ecosystem-pushback-card {
    grid-template-columns: 1fr;
  }

  .pushback-status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .pushback-status-grid {
    grid-template-columns: 1fr;
  }

  .workload-task-actions .btn-xs {
    flex: 1 1 130px;
  }
}

.jira-config-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(110px, 0.45fr);
  gap: 10px;
  margin-top: 12px;
}

.jira-config-grid .field-group:nth-child(3),
.jira-config-grid .field-group:nth-child(4) {
  grid-column: span 1;
}

.advanced-setup {
  margin-top: 12px;
  border: 1px dashed var(--border-med);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.025);
}

.advanced-setup summary {
  min-height: 42px;
  display: flex;
  align-items: center;
  padding: 10px 12px;
  color: var(--text-1);
  font-size: 0.82rem;
  font-weight: 900;
  cursor: pointer;
}

.advanced-setup[open] {
  padding-bottom: 12px;
}

.advanced-setup .field-group {
  margin: 0 12px 12px;
}

.plain-feature-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}

.plain-feature-list span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-3);
  color: var(--text-2);
  font-size: 0.8rem;
  font-weight: 850;
}

.mirror-advanced {
  margin-top: 14px;
}

.oauth-toggle-btn {
  width: 100%;
  border: 1px solid var(--border-med);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-1);
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}

.oauth-toggle-btn.active {
  border-color: rgba(201,168,76,0.48);
  background: rgba(201,168,76,0.14);
  color: var(--gold-lt);
}

.member-card {
  margin-bottom: 10px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.member-name-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.member-meta {
  margin-top: 4px;
  color: var(--text-2);
  font-size: 0.8rem;
  font-weight: 650;
}

.member-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.role-select-sm {
  min-width: 118px;
  padding: 8px 10px;
  border: 1px solid var(--border-med);
  border-radius: var(--radius-sm);
  background: var(--bg-3);
  color: var(--text-1);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 800;
}

.role-badge-sm {
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.role-badge-sm.gold { color: var(--gold-lt); background: var(--gold-dim); }
.role-badge-sm.blue { color: #88b8ff; background: rgba(70,130,220,0.16); }
.role-badge-sm.muted { color: var(--text-2); background: var(--surface-2); }

.invite-avatar {
  border-radius: var(--radius-sm);
  color: var(--gold);
  background: var(--gold-dim);
}

body.pref-large-text .setting-intro,
body.pref-large-text .report-card p,
body.pref-large-text .meeting-connect-copy strong {
  line-height: 1.65;
}

body.pref-reduced-motion *,
body.pref-reduced-motion *::before,
body.pref-reduced-motion *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
  transition-duration: 0.001ms !important;
}

[data-theme="light"] body {
  background:
    radial-gradient(circle at 50% 0%, rgba(212,175,55,0.11), transparent 32%),
    radial-gradient(circle at 78% 18%, rgba(255,255,255,0.035), transparent 28%),
    linear-gradient(180deg, #000 0%, #030303 48%, #000 100%) !important;
  color: var(--text-1);
}

[data-theme="light"] #auth-screen,
[data-theme="light"] #app-screen {
  background:
    radial-gradient(circle at 50% 8%, rgba(212,175,55,0.12), transparent 34%),
    #000 !important;
}

[data-theme="light"] #app-screen .main {
  background:
    radial-gradient(circle at 48% -6%, rgba(212,175,55,0.085), transparent 30%),
    linear-gradient(180deg, #000 0%, #050505 44%, #000 100%) !important;
}

[data-theme="light"] #app-screen .sidebar {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.006)),
    #050505 !important;
  border-right-color: var(--border);
  box-shadow: 18px 0 70px rgba(0,0,0,0.42), inset -1px 0 0 rgba(255,255,255,0.03);
}

[data-theme="light"] #app-screen .topbar {
  background: rgba(5,5,5,0.78) !important;
  border-bottom-color: var(--border);
  box-shadow: 0 18px 70px rgba(0,0,0,0.36), inset 0 1px 0 rgba(255,255,255,0.035);
}

[data-theme="light"] #app-screen :where(
  .view-header,
  .dashboard-command-panel,
  .founder-command-tile,
  .founder-brief-panel,
  .setup-progress-panel,
  .role-access-card,
  .dashboard-nudge-card,
  .dashboard-action-card,
  .dashboard-deep-panel,
  .individual-summary,
  .workload-preview-card,
  .workload-member,
  .vital-card,
  .group-row,
  .group-card,
  .group-setup-panel,
  .group-detail-stats,
  .feed-item,
  .msg-card,
  .attachment-box,
  .report-card,
  .analytics-update-item,
  .analytics-sync-pane,
  .report-operating-read,
  .report-table-wrap,
  .sentinel-chat-col,
  .sv-orb-card,
  .sv-action-card,
  .native-assistant-card,
  .vx-history-panel,
  .vx-history-item,
  .meeting-connect-panel,
  .assistant-flow-card,
  .assistant-setup-panel,
  .assistant-device-item,
  .locker-card,
  .locker-node,
  .locker-node-card,
  .locker-intelligence-search,
  .locker-search-results,
  .knowledge-result,
  .platinum-actions,
  .action-helper-grid,
  .notification-card,
  .notif-item,
  .notif-row,
  .notification-bar,
  .member-row,
  .invite-row,
  .settings-summary,
  .settings-section,
  .ecosystem-card,
  .ecosystem-card-toggle,
  .ecosystem-value-banner,
  .connection-health-panel,
  .ecosystem-pushback-card,
  .api-status-row,
  .setting-row,
  .secret-card,
  .subscription-current,
  .subscription-plan-card,
  .subscription-usage-card,
  .subscription-entitlements,
  .subscription-page-shell,
  .owner-workspace-card,
  .owner-summary-card,
  .owner-broadcast-panel,
  .owner-line,
  .owner-detail-row,
  .owner-mini-metric,
  .owner-image-tile,
  .connections-panel,
  .connections-status-strip,
  .connection-card,
  .connection-status-card,
  .codeflow-status-strip,
  .codeflow-setup-card,
  .codeflow-pipeline-card,
  .codeflow-review-panel,
  .codeflow-guardrail-card,
  .codeflow-review-item,
  .codeflow-step,
  .codeflow-setup-step,
  .empty-state,
  .loading-state,
  .proof-card,
  .proof-row
) {
  border-color: var(--border) !important;
  background: var(--luxury-card-bg) !important;
  box-shadow: var(--luxury-inner-line), 0 22px 60px rgba(0,0,0,0.34) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

[data-theme="light"] #app-screen :where(
  .view-header,
  .dashboard-command-panel,
  .founder-brief-panel,
  .analytics-hero-card,
  .report-card.primary,
  .sentinel-chat-col,
  .sv-orb-card,
  .locker-intelligence-search,
  .codeflow-setup-card,
  .codeflow-pipeline-card,
  .subscription-current,
  .subscription-plan-card.active,
  .settings-summary,
  .owner-broadcast-panel
) {
  border-color: rgba(212,175,55,0.2) !important;
  background: var(--luxury-panel-bg) !important;
  box-shadow: var(--luxury-inner-line), 0 30px 82px rgba(0,0,0,0.42) !important;
}

[data-theme="light"] #auth-screen .auth-card,
[data-theme="light"] .modal,
[data-theme="light"] .onboarding-modal,
[data-theme="light"] .pilot-terms-modal {
  background: var(--luxury-panel-bg) !important;
  border-color: var(--border-med) !important;
  box-shadow: var(--shadow-lg), var(--luxury-inner-line) !important;
}

.btn-link {
  border: 0;
  background: transparent;
  color: var(--gold-lt);
  box-shadow: none;
}

.btn-link:hover {
  background: transparent;
  color: var(--gold-hover);
  transform: none;
}

body.pref-spacious .settings-section,
body.pref-spacious .report-card,
body.pref-spacious .ecosystem-card-toggle,
body.pref-spacious .setting-row {
  padding-block: calc(1em + 10px);
}

body.pref-contrast .secret-card,
body.pref-contrast .report-card,
body.pref-contrast .meeting-connect-panel,
body.pref-contrast .settings-help-panel {
  border-color: var(--border-med);
}

@media print {
  .sidebar,
  .topbar,
  .notification-bar,
  .report-toolbar,
  .btn-secondary,
  .btn-primary,
  .btn-ghost,
  .btn-ghost-danger {
    display: none !important;
  }
  .main {
    margin-left: 0 !important;
  }
  .view {
    display: none !important;
  }
  .view.active {
    display: block !important;
    padding: 0 !important;
  }
  body {
    background: #fff !important;
    color: #111 !important;
  }
}

@media (max-width: 1000px) {
  .settings-layout {
    grid-template-columns: 1fr;
  }
  .settings-summary {
    position: static;
  }
  .integration-key-grid,
  .ecosystem-card-grid,
  .report-grid,
  .analytics-sync-grid,
  .analytics-sync-form-grid,
  .analytics-sync-form-grid.mirror {
    grid-template-columns: 1fr;
  }
  .analytics-score-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mirror-config-grid,
  .jira-config-grid,
  .cost-params-grid {
    grid-template-columns: 1fr;
  }
  .ecosystem-value-banner {
    grid-template-columns: 1fr;
  }
  .trigger-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dashboard-action-grid {
    grid-template-columns: 1fr;
  }
  .dashboard-command-panel {
    grid-template-columns: 1fr;
  }
  .dashboard-command-action {
    width: 100%;
    justify-self: stretch;
  }
  .workload-preview-grid,
  .workload-stat-strip {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1180px) {
  #view-dashboard .vitals-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .topbar .search-wrap {
    display: none;
  }
  .ist-clock-date {
    display: none;
  }
  .ist-clock {
    min-width: 112px;
  }
}

@media (max-width: 760px) {
  .analytics-score-strip {
    grid-template-columns: 1fr;
  }
  .notification-bar,
  .individual-summary {
    align-items: flex-start;
    flex-direction: column;
  }
  .notification-bar {
    top: 60px;
    padding: 10px 18px;
  }
  #notification-bar-text {
    white-space: normal;
  }
  .individual-metrics {
    justify-content: flex-start;
  }
  .workload-member-head,
  .workload-task-row {
    grid-template-columns: 1fr;
  }
  .workload-member-score {
    text-align: left;
  }
  .workload-task-meta {
    justify-content: flex-start;
  }
  .workload-task-meta {
    justify-content: flex-start;
  }
  .workload-empty-line {
    padding-left: 0;
  }
  .identity-name,
  .search-wrap,
  .topbar-plan-btn {
    display: none;
  }
  .identity-pill {
    padding: 6px 10px;
  }
  .role-access-card,
  .setting-row {
    align-items: flex-start;
    flex-direction: column;
  }
  .report-toolbar {
    width: 100%;
    justify-content: flex-start;
  }
  .meeting-connect-panel {
    align-items: flex-start;
    flex-direction: column;
  }
  .meeting-connect-actions {
    width: 100%;
    justify-content: flex-start;
  }
  .trigger-grid {
    grid-template-columns: 1fr;
  }
  .dashboard-nudge-card {
    align-items: stretch;
    flex-direction: column;
  }
  .dashboard-mode-tabs {
    display: flex;
    width: 100%;
  }
  .dashboard-mode-tab {
    flex: 1;
  }
  .dashboard-command-side {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .nudge-card-select,
  .nudge-card-btn {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .settings-subtabs {
    width: 100%;
    flex-wrap: wrap;
  }
  .settings-subtab {
    flex: 1 1 calc(50% - 6px);
  }
  .ist-clock {
    min-width: 82px;
    grid-template-columns: 1fr;
    padding: 6px 8px;
  }
  .ist-clock-label {
    display: none;
  }
  .ist-clock-time {
    font-size: 0.76rem;
  }
}

@media (max-width: 640px) {
  html,
  body {
    overflow-x: hidden;
  }

  .view {
    padding-left: 12px;
    padding-right: 12px;
  }

  .view-header,
  .group-detail-stats,
  .locker-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .group-detail-stats .btn-sm,
  .locker-toolbar .filter-btn,
  .locker-toolbar .btn-primary {
    width: 100%;
    justify-content: center;
  }

  .feed-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .filter-btn {
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
    white-space: normal;
  }

  .msg-card {
    padding: 13px;
  }

  .msg-header {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: start;
  }

  .msg-main {
    min-width: 0;
  }

  .msg-meta-line {
    align-items: flex-start;
    gap: 6px 8px;
  }

  .msg-badge {
    max-width: 100%;
  }

  .msg-time {
    margin-left: 0;
  }

  .floating-image-strip {
    position: static;
    grid-template-columns: 1fr;
  }

  .locker-section-grid {
    grid-template-columns: 1fr;
  }

  .attachment-box {
    width: calc(100vw - 24px);
    padding: 16px;
  }
}

/* Mobile hardening pass: final overrides for phone layouts */
@media (max-width: 768px) {
  html {
    font-size: 15px;
  }

  #app-screen.screen.active {
    display: block;
  }

  .main {
    width: 100%;
    min-width: 0;
    margin-left: 0;
    overflow-x: clip;
  }

  .sidebar {
    width: min(86vw, 304px);
    max-width: 304px;
    box-shadow: 18px 0 48px rgba(0,0,0,0.38);
  }

  .sidebar-top {
    padding: 14px 12px 10px;
  }

  .sidebar-nav {
    padding: 6px 10px 12px;
  }

  .nav-btn {
    min-height: 44px;
    padding: 10px;
    font-size: 0.9rem;
  }

  .sidebar-user {
    padding: 12px 10px;
  }

  .topbar {
    min-height: 56px;
    padding: 8px 10px;
    gap: 8px;
  }

  .topbar-l {
    flex: 1 1 auto;
    gap: 8px;
    overflow: hidden;
  }

  .topbar-r {
    flex: 0 0 auto;
    gap: 6px;
  }

  .breadcrumb {
    max-width: 30vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9rem;
  }

  .topbar-beta-mark {
    padding: 0;
    border: 0;
    background: transparent;
  }

  .topbar-beta-mark span,
  .topbar-beta-mark em,
  .identity-copy,
  .topbar-avatar,
  .search-wrap,
  .ist-clock-date {
    display: none !important;
  }

  .identity-pill,
  .theme-btn,
  .icon-btn,
  .topbar-plan-btn,
  .mobile-menu-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    justify-content: center;
  }

  .ist-clock {
    min-width: 72px;
    min-height: 40px;
    grid-template-columns: 1fr;
    padding: 5px 8px;
  }

  .ist-clock-label {
    display: none;
  }

  .notification-bar {
    top: 56px;
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    padding: 9px 12px;
  }

  .notification-bar .btn-sm {
    width: 100%;
    justify-content: center;
  }

  #notification-bar-text {
    white-space: normal;
  }

  .view {
    width: 100%;
    padding: 16px 12px 28px;
  }

  .view-header {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 18px;
  }

  .view-header-r,
  .report-toolbar,
  .modal-actions,
  .input-btn-row,
  .group-actions,
  .meeting-connect-actions {
    align-items: stretch;
    flex-direction: column;
    width: 100%;
  }

  .view-header button,
  .report-toolbar button,
  .modal-actions button,
  .input-btn-row button,
  .group-actions button {
    width: 100%;
    justify-content: center;
  }

  .view-title {
    font-size: 1.42rem;
    line-height: 1.22;
  }

  .view-sub {
    font-size: 0.84rem;
    line-height: 1.45;
  }

  .section-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    margin-top: 22px;
  }

  .vitals-row,
  .analytics-score-strip,
  .dashboard-action-grid,
  .dashboard-command-panel,
  .workload-preview-grid,
  .workload-stat-strip,
  .groups-grid,
  .locker-grid,
  .settings-layout,
  .field-row-2,
  .google-summary-grid,
  .platinum-actions,
  .trigger-grid,
  .integration-key-grid,
  .ecosystem-card-grid,
  .report-grid,
  .mirror-config-grid,
  .cost-params-grid,
  .ecosystem-value-banner {
    grid-template-columns: 1fr !important;
  }

  .dashboard-command-panel {
    gap: 10px;
    padding: 16px;
  }

  .dashboard-command-side {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 12px 0 0;
    border-top: 1px solid var(--border);
    border-left: 0;
  }

  .dashboard-decision-chip {
    min-height: 66px;
    padding: 9px 8px;
  }

  .dashboard-command-action {
    width: 100%;
    justify-self: stretch;
  }

  .metric-info-popover {
    left: 12px;
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    width: auto;
    padding: 18px 40px 18px 18px;
  }

  .vital-card,
  .group-card,
  .locker-card,
  .dashboard-action-card,
  .workload-preview-card,
  .workload-stat-card,
  .settings-section,
  .settings-summary,
  .role-access-card,
  .dashboard-nudge-card,
  .individual-summary,
  .notification-card {
    min-width: 0;
    padding: 14px;
  }

  #view-dashboard .vital-card {
    min-height: 0;
    padding: 20px 18px;
    gap: 10px;
  }

  .metric-info-btn {
    top: 12px;
    right: 12px;
  }

  .vital-val {
    font-size: 2rem;
  }

  .dashboard-nudge-card,
  .role-access-card,
  .individual-summary,
  .group-card-top,
  .directive-card-top,
  .notif-item,
  .setting-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .nudge-card-select,
  .nudge-card-btn,
  .dashboard-mode-tabs,
  .dashboard-mode-tab {
    width: 100%;
  }

  .dashboard-mode-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .group-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding: 14px;
  }

  .group-ribbon,
  .group-completion-bar {
    grid-column: 2;
    width: 100%;
  }

  .group-row-stats,
  .group-card-stats,
  .stat-row {
    gap: 8px;
  }

  .group-detail-stats,
  .feed-filters,
  .locker-toolbar {
    gap: 8px;
  }

  .feed-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .msg-card,
  .feed-item,
  .directive-card {
    padding: 13px;
  }

  .msg-header,
  .feed-header {
    gap: 8px;
  }

  .msg-body,
  .feed-text,
  .directive-text {
    font-size: 0.9rem;
    line-height: 1.5;
  }

  .attach-chip {
    width: 100%;
    justify-content: flex-start;
  }

  .locker-section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .locker-card-icon {
    width: max-content;
  }

  .modal {
    width: calc(100vw - 18px);
    max-width: calc(100vw - 18px);
    max-height: calc(100dvh - 18px);
    padding: 18px;
    overflow-y: auto;
  }

  .modal-title {
    font-size: 1.25rem;
    padding-right: 34px;
  }

  #assistant-setup-modal.modal,
  #add-group-modal.modal {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    padding: 16px 12px;
    border-radius: var(--radius);
  }

  .assistant-setup-grid,
  .assistant-card-grid,
  .assistant-quick-steps {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .assistant-setup-panel,
  .assistant-flow-card,
  .group-setup-panel {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .assistant-flow-card,
  .assistant-quick-steps span,
  .assistant-device-list {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .auth-container {
    min-height: 100dvh;
    justify-content: center;
    gap: 18px;
    padding: 16px 12px;
  }

  .auth-card {
    padding: 22px 16px;
    border-radius: var(--radius);
  }
}

@media (max-width: 420px) {
  html {
    font-size: 14px;
  }

  .breadcrumb {
    max-width: 28vw;
  }

  .topbar-r {
    gap: 4px;
  }

  .identity-pill,
  .theme-btn,
  .icon-btn,
  .topbar-plan-btn,
  .mobile-menu-btn {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
  }

  .ist-clock {
    display: none;
  }

  .feed-filters,
  .dashboard-mode-tabs {
    grid-template-columns: 1fr;
  }

  .floating-image-card {
    grid-template-columns: 54px minmax(0, 1fr);
  }

  .floating-image-thumb {
    width: 54px;
  }
}

/* Owner workspace inventory */
.owner-workspaces-view {
  display: none;
}

.owner-workspaces-view.active {
  display: block;
}

.owner-workspaces-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.owner-broadcast-panel {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid var(--border-med);
  border-radius: 8px;
  background: var(--surface);
}

.owner-broadcast-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.owner-broadcast-head strong,
.owner-broadcast-head span {
  display: block;
}

.owner-broadcast-head strong {
  color: var(--text-1);
  font-size: 0.92rem;
  font-weight: 850;
}

.owner-broadcast-head span,
.owner-broadcast-status {
  color: var(--text-3);
  font-size: 0.78rem;
}

.owner-broadcast-panel textarea {
  width: 100%;
  min-height: 86px;
  resize: vertical;
  padding: 12px;
  border: 1px solid var(--border-med);
  border-radius: 8px;
  background: var(--bg-3);
  color: var(--text-1);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.92rem;
  line-height: 1.45;
}

.owner-broadcast-panel textarea:focus {
  border-color: var(--gold);
  outline: none;
}

.owner-summary-card {
  min-height: 94px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.owner-summary-card span,
.owner-summary-card em {
  color: var(--text-3);
  font-size: 0.76rem;
  font-style: normal;
}

.owner-summary-card strong {
  color: var(--text-1);
  font-size: 1.55rem;
  line-height: 1;
}

.owner-summary-card.is-loading strong {
  color: var(--text-3);
}

.owner-feature-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}

.owner-feature-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 0.78rem;
}

.owner-feature-pill strong {
  color: var(--text-1);
  font-weight: 650;
}

.owner-feature-pill em {
  color: var(--gold);
  font-style: normal;
  font-family: 'JetBrains Mono', monospace;
}

.owner-feature-empty,
.owner-unavailable-note {
  color: var(--text-3);
  font-size: 0.82rem;
}

.owner-workspaces-list {
  display: grid;
  gap: 14px;
}

.owner-workspace-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  padding: 16px;
}

.owner-workspace-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
  margin-bottom: 14px;
}

.owner-workspace-head h3 {
  margin: 0 0 6px;
  color: var(--text-1);
  font-size: 1.08rem;
  line-height: 1.25;
}

.owner-workspace-head p {
  margin: 0;
  color: var(--text-2);
  font-size: 0.86rem;
  line-height: 1.5;
}

.owner-workspace-plan {
  min-width: 150px;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-3);
  text-align: right;
}

.owner-workspace-plan span,
.owner-workspace-plan em {
  display: block;
  color: var(--text-3);
  font-size: 0.74rem;
  font-style: normal;
}

.owner-workspace-plan span {
  color: var(--text-1);
  font-weight: 700;
  text-transform: capitalize;
}

.owner-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.owner-mini-metric {
  min-height: 68px;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-3);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.owner-mini-metric span {
  color: var(--text-3);
  font-size: 0.72rem;
}

.owner-mini-metric strong {
  color: var(--text-1);
  font-size: 1.2rem;
  line-height: 1;
}

.owner-workspace-sections {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.owner-workspace-section {
  min-width: 0;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

.owner-workspace-section.wide {
  grid-column: span 3;
}

.owner-section-title {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
  color: var(--text-1);
  font-size: 0.82rem;
  font-weight: 750;
}

.owner-section-title span {
  color: var(--gold);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
}

.owner-line-list,
.owner-detail-list,
.owner-feature-list {
  display: grid;
  gap: 7px;
}

.owner-line,
.owner-detail-row {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-3);
}

.owner-line strong,
.owner-detail-row strong {
  display: block;
  min-width: 0;
  color: var(--text-1);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.owner-line span,
.owner-detail-row span,
.owner-detail-row em {
  display: block;
  min-width: 0;
  color: var(--text-3);
  font-size: 0.74rem;
  font-style: normal;
  line-height: 1.42;
  overflow-wrap: anywhere;
}

.owner-detail-row em {
  color: var(--text-2);
}

.owner-source {
  width: fit-content;
  margin-bottom: 5px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(211, 177, 106, 0.12);
  color: var(--gold) !important;
  text-transform: capitalize;
}

.owner-empty-line,
.owner-more-line {
  color: var(--text-3);
  font-size: 0.78rem;
  line-height: 1.45;
}

.owner-type-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.owner-type-pill,
.owner-feature-list span {
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--text-2);
  font-size: 0.76rem;
}

.owner-type-pill strong,
.owner-feature-list strong {
  color: var(--text-1);
  text-transform: capitalize;
}

.owner-type-pill em {
  color: var(--gold);
  font-style: normal;
  font-family: 'JetBrains Mono', monospace;
}

.owner-image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 9px;
}

.owner-image-tile {
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-3);
  color: var(--text-2);
  text-align: left;
  cursor: pointer;
}

.owner-image-tile:hover {
  border-color: rgba(211, 177, 106, 0.55);
}

.owner-image-tile img,
.owner-image-tile > span {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 6px;
  object-fit: cover;
  background: var(--surface-2);
  display: grid;
  place-items: center;
  color: var(--gold);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  margin-bottom: 7px;
}

.owner-image-tile strong,
.owner-image-tile em {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.owner-image-tile strong {
  color: var(--text-1);
  font-size: 0.76rem;
}

.owner-image-tile em {
  color: var(--text-3);
  font-size: 0.7rem;
  font-style: normal;
}

@media (max-width: 1100px) {
  .owner-workspace-sections {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .owner-workspace-section.wide {
    grid-column: span 2;
  }
}

@media (max-width: 720px) {
  .owner-workspace-head {
    grid-template-columns: 1fr;
  }

  .owner-workspace-plan {
    text-align: left;
  }

  .owner-broadcast-head {
    align-items: stretch;
    flex-direction: column;
  }

  .owner-broadcast-head .btn-sm {
    width: 100%;
    justify-content: center;
  }

  .owner-workspace-sections,
  .owner-workspace-section.wide {
    grid-template-columns: 1fr;
    grid-column: auto;
  }

  .owner-type-grid {
    grid-template-columns: 1fr;
  }
}

/* Unified professional product system */
:root {
  --radius: 8px;
  --radius-lg: 8px;
  --shadow: 0 12px 34px rgba(0,0,0,0.18);
  --shadow-lg: 0 24px 72px rgba(0,0,0,0.28);
}

body,
button,
input,
select,
textarea {
  letter-spacing: 0;
}

#auth-screen {
  background: var(--bg);
}

#auth-screen .auth-bg,
#auth-screen .auth-noise,
#auth-screen .auth-glow-orb {
  display: none;
}

#auth-screen .auth-container {
  max-width: 440px;
  gap: 26px;
}

#auth-screen .auth-card,
.pilot-terms-modal,
.onboarding-modal {
  border: 1px solid var(--border-med);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

#auth-screen .auth-card {
  padding: 32px;
}

#auth-screen .brand-name,
#auth-screen .brand-tagline,
#auth-screen .field-group label,
.nav-label,
.section-header h3,
.settings-section h3,
.report-kicker,
.sv-section-label,
.sv-actions-label {
  letter-spacing: 0;
}

#auth-screen .brand-name {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1.7rem;
  font-weight: 900;
}

#auth-screen .brand-tagline {
  font-size: 0.7rem;
  text-transform: none;
}

#auth-screen .auth-welcome h1,
.modal-title,
.sentinel-empty h3 {
  font-family: 'Inter', system-ui, sans-serif;
  letter-spacing: 0;
}

#app-screen .sidebar {
  background: #0D0D10;
  background-image: none;
  border-right: 1px solid rgba(255,255,255,0.075);
  box-shadow: none;
}

[data-theme="light"] #app-screen .sidebar {
  background: #F0EEE8;
  border-right-color: rgba(25,22,16,0.1);
}

#app-screen .sidebar-brand svg {
  filter: none;
}

#app-screen .nav-label {
  color: var(--text-3);
  font-size: 0.68rem;
  text-transform: none;
}

#app-screen .nav-btn {
  min-height: 42px;
  margin: 2px 0;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 0.88rem;
  font-weight: 680;
}

#app-screen .nav-btn:hover {
  border-color: var(--border);
  background: rgba(255,255,255,0.04);
  transform: none;
}

#app-screen .nav-btn.active {
  border-color: rgba(201,168,76,0.22);
  background: rgba(201,168,76,0.1);
  color: var(--gold-lt);
}

#app-screen .nav-btn.active::before {
  display: none;
}

#app-screen .sidebar-user {
  border-top: 1px solid var(--border);
  background: transparent;
}

#app-screen .topbar {
  min-height: 64px;
  border-bottom: 1px solid var(--border);
  background: rgba(13,13,16,0.94) !important;
  box-shadow: none;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

[data-theme="light"] #app-screen .topbar {
  background: rgba(240,238,232,0.94) !important;
}

#app-screen .topbar-beta-mark,
#app-screen .identity-pill,
#app-screen .topbar-plan-btn,
#app-screen .ist-clock,
#app-screen .search-wrap {
  border-color: var(--border);
  border-radius: var(--radius);
  background: transparent;
  box-shadow: none;
}

#app-screen .topbar-avatar,
#app-screen .user-avatar,
#app-screen .settings-summary-avatar {
  border-radius: var(--radius);
}

#app-screen .view {
  max-width: 1360px;
  padding: 32px 36px 52px;
}

#app-screen .view-header {
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

#app-screen .view-header::after {
  display: none;
}

#app-screen .view-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1.55rem;
  font-weight: 850;
  letter-spacing: 0;
}

#app-screen .view-sub {
  max-width: 760px;
  color: var(--text-3);
  line-height: 1.55;
}

#app-screen .section-header {
  margin-top: 30px;
  margin-bottom: 14px;
}

#app-screen .section-header h3,
#app-screen .settings-section h3 {
  color: var(--text-1);
  font-size: 0.94rem;
  font-weight: 800;
  text-transform: none;
}

#app-screen .settings-section h3::before {
  display: none;
}

#app-screen :where(
  .group-card,
  .group-row,
  .directive-card,
  .locker-node,
  .locker-node-card,
  .locker-card,
  .notification-card,
  .notif-item,
  .member-row,
  .invite-row,
  .settings-section,
  .settings-summary,
  .report-card,
  .workload-member,
  .workload-stat-card,
  .workload-preview-card,
  .individual-summary,
  .sentinel-chat-col,
  .sv-orb-card,
  .sv-action-card,
  .subscription-current,
  .subscription-plan-card,
  .subscription-usage-card,
  .subscription-entitlements,
  .ecosystem-card,
  .api-status-row,
  .owner-workspace-card,
  .owner-summary-card,
  .owner-broadcast-panel,
  .secret-card
) {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  background-image: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.025);
}

#app-screen :where(
  .group-card,
  .group-row,
  .locker-node,
  .locker-node-card,
  .workload-preview-card,
  .sv-action-card,
  .subscription-plan-card,
  .owner-image-tile
):hover {
  border-color: var(--border-med);
  background: var(--surface-2);
  box-shadow: none;
  transform: translateY(-1px);
}

#app-screen :where(
  .report-card.primary,
  .subscription-current,
  .subscription-plan-card.active,
  .workload-stat-card.is-primary,
  .workload-member.has-pending,
  .workload-member.has-uncompleted,
  .settings-summary,
  .ecosystem-value-banner
) {
  background: var(--surface);
  background-image: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.025);
}

#app-screen :where(.sv-card-danger, .sv-card-siri, .sv-card-notif) {
  border-color: var(--border) !important;
  background: var(--surface) !important;
  background-image: none !important;
}

#app-screen :where(
  .analytics-update-item,
  .analytics-sync-pane,
  .report-operating-read,
  .report-table-wrap,
  .settings-help-panel,
  .meeting-connect-panel,
  .meeting-modal-connect,
  .workload-task-row,
  .owner-line,
  .owner-detail-row,
  .owner-mini-metric,
  .owner-type-pill,
  .owner-feature-list span
) {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
}

#app-screen .settings-section .ecosystem-card {
  border-radius: 0;
  border-width: 1px 0 0;
  background: transparent;
  box-shadow: none;
}

#app-screen .settings-section .ecosystem-card:first-child {
  border-top: 0;
}

#app-screen .ecosystem-value-banner,
#app-screen .gold-webhook-card .ecosystem-card-toggle {
  border-color: var(--border);
  background: var(--surface);
  background-image: none;
}

#app-screen :where(
  .btn-primary,
  .btn-secondary,
  .btn-ghost,
  .btn-ghost-danger,
  .nudge-card-btn,
  .sv-tap-btn,
  .scope-btn,
  .meeting-connect-btn,
  .report-period-btn,
  .settings-subtab,
  .admin-tab,
  .filter-btn
),
#auth-screen :where(.btn-primary, .btn-google) {
  min-height: 42px;
  border-radius: var(--radius);
  box-shadow: none;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 750;
  letter-spacing: 0;
  transform: none;
}

#app-screen .btn-primary,
#auth-screen .btn-primary {
  border: 1px solid var(--gold);
  background: var(--gold) !important;
  background-image: none !important;
  color: #0C0B08;
}

#app-screen .btn-primary:hover,
#auth-screen .btn-primary:hover {
  border-color: var(--gold-lt);
  background: var(--gold-lt) !important;
  transform: none;
}

#app-screen :where(.btn-secondary, .btn-ghost, .nudge-card-btn, .sv-tap-btn, .scope-btn, .meeting-connect-btn),
#auth-screen .btn-google {
  border: 1px solid var(--border-med);
  background: var(--surface-2);
  color: var(--text-1);
}

#app-screen :where(.btn-secondary, .btn-ghost, .nudge-card-btn, .sv-tap-btn, .scope-btn, .meeting-connect-btn):hover,
#auth-screen .btn-google:hover {
  border-color: rgba(201,168,76,0.42);
  background: color-mix(in srgb, var(--surface-2) 92%, var(--gold) 8%);
  color: var(--text-1);
  transform: none;
}

#app-screen :where(.icon-btn, .theme-btn, .sidebar-toggle-btn, .modal-close),
.modal-close {
  border-radius: var(--radius);
  box-shadow: none;
}

#app-screen :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
#auth-screen :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
.modal :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  min-height: 44px;
  border: 1px solid var(--border-med);
  border-radius: var(--radius);
  background: var(--bg-3);
  color: var(--text-1);
  box-shadow: none;
  font-family: 'Inter', system-ui, sans-serif;
}

#app-screen :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus,
#auth-screen :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus,
.modal :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus {
  outline: none;
  border-color: rgba(201,168,76,0.62);
  box-shadow: 0 0 0 3px rgba(201,168,76,0.1);
}

#app-screen :where(.dashboard-mode-tabs, .settings-subtabs, .report-period-toggle, .admin-tabs) {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-3);
  box-shadow: none;
}

#app-screen :where(.dashboard-mode-tab, .settings-subtab, .report-period-btn, .admin-tab).active {
  border-color: transparent;
  background: var(--surface-2);
  color: var(--gold-lt);
  box-shadow: inset 0 0 0 1px var(--border);
}

#app-screen .filter-btn {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-2);
}

#app-screen .filter-btn.active,
#app-screen .filter-btn:hover {
  border-color: var(--border-med);
  background: var(--surface-2);
  color: var(--text-1);
}

.modal-backdrop,
.overlay-backdrop,
#confirm-overlay {
  background: rgba(0,0,0,0.64);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.modal,
.confirm-box {
  border: 1px solid var(--border-med);
  border-radius: var(--radius);
  background: var(--surface) !important;
  background-image: none !important;
  box-shadow: var(--shadow-lg);
}

.modal {
  padding: 24px;
}

.modal-title {
  color: var(--text-1);
  font-size: 1.25rem;
  font-weight: 850;
}

.modal-desc {
  color: var(--text-3);
  line-height: 1.55;
}

.modal-close {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-3);
}

#app-screen .report-card.primary,
#app-screen .analytics-hero-card,
#app-screen .subscription-plan-card.active {
  border-color: rgba(201,168,76,0.28);
}

#app-screen .report-table th {
  background: var(--surface-2);
  color: var(--text-2);
  letter-spacing: 0;
}

#app-screen .report-table tr:hover td {
  background: color-mix(in srgb, var(--surface-2) 94%, var(--gold) 6%);
}

#app-screen :where(
  .badge-milestone,
  .badge-delivery,
  .badge-risk,
  .badge-commitment,
  .badge-directive,
  .report-status-pill,
  .workload-chip,
  .stat-pill,
  .role-badge-sm,
  .group-ribbon
) {
  border-radius: 999px;
  letter-spacing: 0;
}

#app-screen .sentinel-master-grid {
  gap: 20px;
}

#app-screen .sentinel-bubble,
#app-screen .sv-response-inline {
  border-radius: var(--radius);
}

#app-screen .sentinel-input-bar,
#app-screen .sv-group-resp-row {
  border-color: var(--border);
  background: var(--surface-2);
}

#app-screen .subscription-plan-card.locked,
#app-screen .feature-lock-overlay,
#app-screen .group-lock-overlay {
  backdrop-filter: blur(5px);
}

#app-screen .toast,
.pwa-install-banner,
.backend-loading-pill {
  border-radius: var(--radius);
}

@media (max-width: 768px) {
  #app-screen .view {
    padding: 18px 14px 34px;
  }

  #app-screen .view-header {
    margin-bottom: 22px;
    padding-bottom: 16px;
  }

  #app-screen :where(
    .group-card,
    .directive-card,
    .locker-card,
    .notification-card,
    .settings-section,
    .settings-summary,
    .report-card,
    .workload-member,
    .subscription-current,
    .subscription-plan-card,
    .sentinel-chat-col,
    .sv-orb-card,
    .sv-action-card
  ) {
    padding: 18px;
  }

  #auth-screen .auth-card {
    padding: 24px 18px;
  }

  .modal {
    padding: 20px 18px;
  }

  #assistant-setup-modal.modal,
  #add-group-modal.modal {
    padding: 20px 18px;
    border-radius: var(--radius);
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   NOD GLOBAL LUXURY SHELL
   Applies the same Apple-inspired executive theme beyond Dashboard.
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  --bg: #07080B;
  --bg-2: #0B0C10;
  --bg-3: #12141A;
  --bg-4: #1A1D25;
  --surface: rgba(20, 22, 29, 0.74);
  --surface-2: rgba(29, 32, 41, 0.78);
  --surface-3: rgba(38, 41, 52, 0.82);
  --border: rgba(255, 255, 255, 0.095);
  --border-med: rgba(255, 255, 255, 0.16);
  --text-1: #F7F3EA;
  --text-2: #D3CFC4;
  --text-3: #9C978C;
  --radius: 18px;
  --radius-sm: 14px;
  --radius-lg: 26px;
  --luxury-glass: linear-gradient(145deg, rgba(255,255,255,0.105), rgba(255,255,255,0.025) 42%, rgba(201,168,76,0.055));
  --luxury-glass-soft: linear-gradient(150deg, rgba(255,255,255,0.07), rgba(255,255,255,0.018) 48%, rgba(201,168,76,0.04));
  --luxury-gold-glow: 0 0 0 1px rgba(201,168,76,0.08), 0 24px 70px rgba(0,0,0,0.34);
  --luxury-shadow: 0 18px 60px rgba(0,0,0,0.32);
  --luxury-inner-line: inset 0 1px 0 rgba(255,255,255,0.08);
}

[data-theme="light"] {
  --bg: #F5F3ED;
  --bg-2: #EFEEE8;
  --bg-3: #E9E6DD;
  --bg-4: #DEDAD0;
  --surface: rgba(255, 254, 250, 0.78);
  --surface-2: rgba(247, 245, 239, 0.86);
  --surface-3: rgba(238, 234, 224, 0.9);
  --border: rgba(36, 31, 21, 0.105);
  --border-med: rgba(36, 31, 21, 0.17);
  --text-1: #17130C;
  --text-2: #3D382D;
  --text-3: #706958;
  --luxury-glass: linear-gradient(145deg, rgba(255,255,255,0.88), rgba(255,255,255,0.54) 42%, rgba(201,168,76,0.09));
  --luxury-glass-soft: linear-gradient(150deg, rgba(255,255,255,0.7), rgba(255,255,255,0.38) 48%, rgba(201,168,76,0.07));
  --luxury-gold-glow: 0 0 0 1px rgba(201,168,76,0.08), 0 24px 62px rgba(35,28,14,0.12);
  --luxury-shadow: 0 18px 52px rgba(35,28,14,0.12);
  --luxury-inner-line: inset 0 1px 0 rgba(255,255,255,0.78);
}

body {
  background:
    radial-gradient(circle at 12% -8%, rgba(201,168,76,0.13), transparent 34%),
    radial-gradient(circle at 88% 2%, rgba(114,146,255,0.11), transparent 30%),
    linear-gradient(180deg, var(--bg), var(--bg-2) 54%, var(--bg));
}

[data-theme="light"] body {
  background:
    radial-gradient(circle at 10% -10%, rgba(201,168,76,0.18), transparent 34%),
    radial-gradient(circle at 90% 0%, rgba(121,151,205,0.14), transparent 30%),
    linear-gradient(180deg, var(--bg), var(--bg-2) 56%, #F9F7F1);
}

#auth-screen,
#app-screen,
#setup-guide-page {
  background:
    radial-gradient(circle at 16% 0%, rgba(201,168,76,0.1), transparent 32%),
    radial-gradient(circle at 82% 6%, rgba(118,153,255,0.09), transparent 30%),
    transparent;
}

#app-screen .main {
  background:
    radial-gradient(circle at 50% -16%, rgba(255,255,255,0.055), transparent 34%),
    radial-gradient(circle at 88% 18%, rgba(201,168,76,0.065), transparent 28%),
    transparent;
}

#app-screen .sidebar {
  background:
    linear-gradient(180deg, rgba(19,20,25,0.91), rgba(9,10,13,0.96)),
    rgba(9,10,13,0.92);
  border-right: 1px solid var(--border);
  box-shadow: 24px 0 70px rgba(0,0,0,0.26);
  backdrop-filter: blur(24px) saturate(130%);
  -webkit-backdrop-filter: blur(24px) saturate(130%);
}

[data-theme="light"] #app-screen .sidebar {
  background:
    linear-gradient(180deg, rgba(251,249,244,0.92), rgba(239,236,228,0.96)),
    rgba(245,242,235,0.92);
  box-shadow: 18px 0 54px rgba(52,43,24,0.08);
}

#app-screen .sidebar-brand,
#app-screen .sidebar-user,
#app-screen .topbar-beta-mark,
#app-screen .identity-pill,
#app-screen .topbar-plan-btn,
#app-screen .ist-clock,
#app-screen .search-wrap,
#app-screen .theme-btn,
#app-screen .icon-btn,
#app-screen .topbar-avatar {
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.035);
  box-shadow: var(--luxury-inner-line);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
}

[data-theme="light"] #app-screen .sidebar-brand,
[data-theme="light"] #app-screen .sidebar-user,
[data-theme="light"] #app-screen .topbar-beta-mark,
[data-theme="light"] #app-screen .identity-pill,
[data-theme="light"] #app-screen .topbar-plan-btn,
[data-theme="light"] #app-screen .ist-clock,
[data-theme="light"] #app-screen .search-wrap,
[data-theme="light"] #app-screen .theme-btn,
[data-theme="light"] #app-screen .icon-btn,
[data-theme="light"] #app-screen .topbar-avatar {
  background: rgba(255,255,255,0.56);
}

#app-screen .topbar {
  border-bottom: 1px solid var(--border);
  background:
    linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025)),
    rgba(8,9,12,0.72) !important;
  box-shadow: 0 18px 56px rgba(0,0,0,0.22);
  backdrop-filter: blur(28px) saturate(135%);
  -webkit-backdrop-filter: blur(28px) saturate(135%);
}

[data-theme="light"] #app-screen .topbar {
  background:
    linear-gradient(90deg, rgba(255,255,255,0.72), rgba(255,255,255,0.44)),
    rgba(244,241,234,0.78) !important;
  box-shadow: 0 16px 48px rgba(52,43,24,0.08);
}

#app-screen .nav-btn {
  border-radius: 16px;
  transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
}

#app-screen .nav-btn:hover {
  border-color: var(--border-med);
  background: rgba(255,255,255,0.06);
}

#app-screen .nav-btn.active {
  border-color: rgba(201,168,76,0.36);
  background:
    linear-gradient(135deg, rgba(201,168,76,0.19), rgba(255,255,255,0.045)),
    rgba(201,168,76,0.08);
  color: var(--gold-lt);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 12px 28px rgba(201,168,76,0.08);
}

#app-screen .view {
  max-width: 1420px;
}

#app-screen .view-header {
  position: relative;
  overflow: hidden;
  align-items: center;
  padding: 22px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--luxury-glass-soft), var(--surface);
  box-shadow: var(--luxury-inner-line), 0 18px 58px rgba(0,0,0,0.18);
  backdrop-filter: blur(24px) saturate(130%);
  -webkit-backdrop-filter: blur(24px) saturate(130%);
}

#app-screen .view-header::before {
  content: "";
  position: absolute;
  inset: -1px auto auto -1px;
  width: min(360px, 48%);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(201,168,76,0.75), rgba(255,255,255,0.18), transparent);
  pointer-events: none;
}

#app-screen .view-title {
  color: var(--text-1);
  font-size: clamp(1.42rem, 1.1rem + 0.82vw, 2.05rem);
  font-weight: 880;
  letter-spacing: -0.035em;
}

#app-screen .view-sub {
  margin-top: 7px;
  color: var(--text-3);
  font-size: 0.92rem;
}

#app-screen :where(
  .dashboard-command-panel,
  .role-access-card,
  .dashboard-nudge-card,
  .dashboard-action-card,
  .dashboard-deep-panel,
  .individual-summary,
  .vital-card,
  .group-card,
  .group-row,
  .group-setup-panel,
  .group-detail-stats,
  .feed-item,
  .msg-card,
  .attachment-box,
  .report-card,
  .analytics-hero-card,
  .analytics-update-item,
  .analytics-sync-pane,
  .report-operating-read,
  .report-table-wrap,
  .meeting-connect-panel,
  .meeting-modal-connect,
  .sentinel-chat-col,
  .sv-orb-card,
  .sv-action-card,
  .vx-scope-strip,
  .vx-group-row,
  .vx-response-panel,
  .vx-siri-panel,
  .vx-history-panel,
  .vx-history-item,
  .native-assistant-card,
  .assistant-flow-card,
  .assistant-setup-panel,
  .assistant-device-item,
  .platinum-actions,
  .action-helper-grid,
  .directive-card,
  .locker-intelligence-search,
  .locker-search-results,
  .knowledge-result,
  .locker-node,
  .locker-node-card,
  .locker-card,
  .locker-section,
  .floating-image-card,
  .notification-card,
  .notif-item,
  .notif-row,
  .notification-bar,
  .member-row,
  .invite-row,
  .settings-summary,
  .settings-section,
  .ecosystem-card,
  .ecosystem-card-toggle,
  .ecosystem-value-banner,
  .api-status-row,
  .setting-row,
  .secret-card,
  .subscription-current,
  .subscription-plan-card,
  .subscription-usage-card,
  .subscription-entitlements,
  .subscription-page-shell,
  .owner-workspace-card,
  .owner-summary-card,
  .owner-broadcast-panel,
  .owner-line,
  .owner-detail-row,
  .owner-mini-metric,
  .owner-image-tile,
  .codeflow-status-strip,
  .codeflow-pipeline-card,
  .codeflow-review-panel,
  .codeflow-guardrail-card,
  .codeflow-review-item,
  .codeflow-step,
  .empty-state,
  .loading-state
) {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--luxury-glass-soft), var(--surface);
  background-clip: padding-box;
  box-shadow: var(--luxury-inner-line);
  backdrop-filter: blur(22px) saturate(125%);
  -webkit-backdrop-filter: blur(22px) saturate(125%);
}

#app-screen :where(
  .dashboard-command-panel,
  .analytics-hero-card,
  .report-card.primary,
  .sentinel-chat-col,
  .sv-orb-card,
  .locker-intelligence-search,
  .codeflow-pipeline-card,
  .subscription-current,
  .subscription-plan-card.active,
  .settings-summary
) {
  background: var(--luxury-glass), var(--surface);
  border-color: rgba(201,168,76,0.18);
  box-shadow: var(--luxury-inner-line), var(--luxury-shadow);
}

#app-screen :where(
  .group-card,
  .group-row,
  .dashboard-action-card,
  .vital-card,
  .workload-preview-card,
  .workload-member,
  .locker-node,
  .locker-node-card,
  .locker-card,
  .sv-action-card,
  .subscription-plan-card,
  .ecosystem-card,
  .owner-workspace-card,
  .codeflow-review-item,
  .knowledge-result
) {
  transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

#app-screen :where(
  .group-card,
  .group-row,
  .dashboard-action-card,
  .vital-card,
  .workload-preview-card,
  .workload-member,
  .locker-node,
  .locker-node-card,
  .locker-card,
  .sv-action-card,
  .subscription-plan-card,
  .ecosystem-card,
  .owner-workspace-card,
  .codeflow-review-item,
  .knowledge-result
):hover {
  transform: translateY(-2px);
  border-color: rgba(201,168,76,0.34);
  background: var(--luxury-glass), var(--surface-2);
  box-shadow: var(--luxury-gold-glow);
}

#app-screen :where(.section-header h3, .settings-section h3, .sv-section-label, .sv-actions-label, .report-kicker, .codeflow-kicker, .dashboard-command-kicker, .stat-label, .vital-label) {
  color: var(--gold-lt);
  font-size: 0.72rem;
  font-weight: 860;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#app-screen :where(.section-header, .codeflow-card-head, .group-card-top, .sv-action-card-top, .assistant-card-head, .locker-section-head) {
  border-color: var(--border);
}

#app-screen :where(.group-card-icon, .sv-action-icon, .nudge-card-icon, .role-access-icon, .codeflow-review-avatar, .api-status-dot, .identity-role-dot) {
  border: 1px solid rgba(201,168,76,0.22);
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,0.26), transparent 32%),
    rgba(201,168,76,0.12) !important;
  color: var(--gold-lt) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}

#app-screen :where(.btn-primary, .btn-secondary, .btn-ghost, .btn-ghost-danger, .nudge-card-btn, .sv-tap-btn, .scope-btn, .meeting-connect-btn, .report-period-btn, .settings-subtab, .admin-tab, .filter-btn, .locker-source-chip, .platinum-action-btn) {
  min-height: 42px;
  border-radius: 999px;
  font-weight: 780;
  letter-spacing: -0.01em;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}

#app-screen .btn-primary,
#app-screen :where(.dashboard-mode-tab.active, .settings-subtab.active, .report-period-btn.active, .admin-tab.active, .locker-source-chip.active) {
  border-color: rgba(201,168,76,0.9);
  background:
    linear-gradient(180deg, var(--gold-lt), var(--gold)) !important;
  color: #141007 !important;
  box-shadow: 0 14px 34px rgba(201,168,76,0.18), inset 0 1px 0 rgba(255,255,255,0.38);
}

#app-screen :where(.btn-primary, .btn-secondary, .btn-ghost, .btn-ghost-danger, .nudge-card-btn, .sv-tap-btn, .scope-btn, .meeting-connect-btn, .filter-btn, .locker-source-chip, .platinum-action-btn):hover {
  transform: translateY(-1px);
  border-color: rgba(201,168,76,0.42);
  box-shadow: 0 14px 34px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.08);
}

#app-screen :where(.btn-secondary, .btn-ghost, .nudge-card-btn, .sv-tap-btn, .scope-btn, .meeting-connect-btn, .filter-btn, .locker-source-chip, .platinum-action-btn) {
  background: rgba(255,255,255,0.045);
  color: var(--text-1);
}

#app-screen :where(.dashboard-mode-tabs, .settings-subtabs, .report-period-toggle, .admin-tabs, .locker-toolbar, .locker-source-row, .sv-notif-types) {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,0.035);
  box-shadow: var(--luxury-inner-line);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
}

#app-screen :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
#auth-screen :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
.modal :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  border-color: var(--border);
  border-radius: 16px;
  background: rgba(255,255,255,0.045);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

[data-theme="light"] #app-screen :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
[data-theme="light"] #auth-screen :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
[data-theme="light"] .modal :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  background: rgba(255,255,255,0.62);
}

#app-screen :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus,
#auth-screen :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus,
.modal :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus {
  border-color: rgba(201,168,76,0.62);
  box-shadow: 0 0 0 4px rgba(201,168,76,0.11), inset 0 1px 0 rgba(255,255,255,0.08);
}

#app-screen :where(.report-table-wrap, .report-table, table) {
  overflow: hidden;
  border-radius: var(--radius);
}

#app-screen :where(.report-table th, .report-table td) {
  border-color: var(--border);
}

#app-screen .report-table th {
  background: rgba(255,255,255,0.055);
  color: var(--gold-lt);
  font-weight: 800;
}

#app-screen .report-table tr:hover td {
  background: rgba(201,168,76,0.07);
}

#app-screen :where(.badge-milestone, .badge-delivery, .badge-risk, .badge-commitment, .badge-directive, .report-status-pill, .workload-chip, .stat-pill, .role-badge-sm, .group-ribbon, .nav-gate, .ws-role-badge, .invite-status, .codeflow-update-status) {
  border: 1px solid rgba(201,168,76,0.18);
  background: rgba(201,168,76,0.09);
  color: var(--gold-lt);
  border-radius: 999px;
}

#auth-screen .auth-card,
.modal,
.confirm-box,
.setup-guide-card,
.setup-video-panel,
.pilot-terms-panel {
  border: 1px solid var(--border-med);
  border-radius: var(--radius-lg);
  background: var(--luxury-glass), var(--surface) !important;
  box-shadow: var(--luxury-inner-line), var(--luxury-shadow);
  backdrop-filter: blur(26px) saturate(130%);
  -webkit-backdrop-filter: blur(26px) saturate(130%);
}

#auth-screen .brand-name,
#auth-screen .auth-welcome h1 {
  letter-spacing: -0.04em;
}

.modal-backdrop,
.overlay-backdrop,
#confirm-overlay {
  background:
    radial-gradient(circle at 50% 0%, rgba(201,168,76,0.12), transparent 34%),
    rgba(0,0,0,0.68);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
}

@media (max-width: 768px) {
  #app-screen .view {
    padding: 18px 14px 34px;
  }

  #app-screen .view-header {
    padding: 18px;
    border-radius: 22px;
  }

  #app-screen :where(.dashboard-mode-tabs, .settings-subtabs, .report-period-toggle, .admin-tabs, .locker-toolbar, .locker-source-row, .sv-notif-types) {
    border-radius: 18px;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   NOD TEXT FIT + FINISHING POLISH
   Prevents cramped copy inside premium glass cards and adds a sharper finish.
   ════════════════════════════════════════════════════════════════════════════ */

#app-screen :where(.view-header, .topbar, .topbar-l, .topbar-r, .sidebar-brand, .sidebar-user, .nav-btn, .identity-pill, .settings-layout, .setting-row, .ecosystem-card-toggle, .group-card-top, .directive-card-top, .notif-item, .member-row, .invite-row, .dashboard-command-panel, .dashboard-command-main, .dashboard-command-side, .dashboard-decision-chip, .codeflow-status-strip, .codeflow-step, .knowledge-result, .locker-search-form, .sv-action-card-top, .assistant-card-head) > * {
  min-width: 0;
}

#app-screen :where(.view-title, .dashboard-command-main strong, .codeflow-card-head strong, .locker-search-copy strong, .settings-summary-name, .group-card-name, .sv-action-title, .assistant-flow-card h3, .subscription-plan-card h3, .report-card h3) {
  text-wrap: balance;
  overflow-wrap: anywhere;
}

#app-screen :where(.view-sub, .dashboard-command-main p, .vital-insight, .group-card-meta, .setting-desc, .ecosystem-card-toggle p, .ecosystem-card-toggle small, .api-status-detail, .sv-action-desc, .assistant-flow-card p, .codeflow-step small, .codeflow-guardrail-card p, .locker-search-copy small, .knowledge-result p, .notif-body, .notification-bar-main, .report-card p, .subscription-plan-card p, .member-meta, .invite-meta) {
  text-wrap: pretty;
  overflow-wrap: anywhere;
  hyphens: auto;
  line-height: 1.5;
}

#app-screen :where(.nav-btn > span:not(.nav-gate):not(.nav-risk-badge):not(.nav-notif-dot), .breadcrumb, .identity-role, .identity-name, .sidebar-ws > span:first-child, .user-details span, .topbar-plan-btn span, .ist-clock-date, .codeflow-status-strip strong, .locker-name, .floating-image-name, .knowledge-result strong, .api-status-name, .settings-summary-email) {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

#app-screen :where(.nav-btn > span:not(.nav-gate):not(.nav-risk-badge):not(.nav-notif-dot), .breadcrumb, .identity-role, .identity-name, .sidebar-ws > span:first-child, .user-details span, .topbar-plan-btn span, .ist-clock-date, .locker-name, .floating-image-name, .api-status-name, .settings-summary-email) {
  white-space: nowrap;
}

#app-screen .view-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
}

#app-screen .view-header > div {
  flex: 1 1 380px;
}

#app-screen .view-header-r {
  flex: 0 1 auto;
  min-width: min(100%, 260px);
}

#app-screen .view-header :where(.btn-primary, .btn-secondary, .btn-ghost, select) {
  flex: 0 0 auto;
}

#app-screen .topbar-l {
  flex: 1 1 auto;
}

#app-screen .topbar-r {
  flex: 0 1 auto;
}

#app-screen .search-wrap {
  flex: 1 1 min(320px, 26vw);
  min-width: 180px;
}

#app-screen .identity-pill {
  max-width: 190px;
}

#app-screen .identity-copy {
  min-width: 0;
}

#app-screen .topbar-plan-btn {
  max-width: 132px;
}

#app-screen .nav-gate,
#app-screen .ws-role-badge,
#app-screen .nav-risk-badge,
#app-screen .nav-notif-dot {
  flex: 0 0 auto;
}

#app-screen .dashboard-command-panel {
  grid-template-columns: minmax(0, 1.12fr) minmax(230px, 0.72fr) minmax(96px, auto);
}

#app-screen .dashboard-command-side {
  min-width: 0;
}

#app-screen .dashboard-decision-chip {
  min-width: 0;
}

#app-screen .dashboard-decision-chip strong {
  overflow-wrap: anywhere;
  line-height: 1.1;
}

#app-screen :where(.dashboard-action-card, .vital-card, .group-card, .workload-preview-card, .report-card, .subscription-plan-card, .sv-action-card, .assistant-flow-card, .codeflow-step, .codeflow-setup-step, .knowledge-result, .settings-section) {
  overflow: hidden;
}

#app-screen .vital-val {
  font-size: clamp(1.72rem, 1.25rem + 1.35vw, 2.28rem);
  line-height: 1;
}

#app-screen .vital-label {
  line-height: 1.25;
  white-space: normal;
}

#app-screen .codeflow-status-strip {
  grid-template-columns: repeat(5, minmax(140px, 1fr));
}

#app-screen .codeflow-status-strip strong {
  display: -webkit-box;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  line-height: 1.25;
}

#app-screen .codeflow-pipeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-items: stretch;
  gap: 12px;
}

#app-screen .codeflow-pipeline > i {
  display: none;
}

#app-screen .codeflow-step {
  position: relative;
  min-height: 108px;
}

#app-screen .codeflow-step > b {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 24px;
  height: 24px;
  line-height: 1.2;
  white-space: nowrap;
}

#app-screen .codeflow-step::after {
  content: "";
  position: absolute;
  top: 13px;
  right: 13px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(201,168,76,0.44);
  box-shadow: 0 0 18px rgba(201,168,76,0.26);
}

#app-screen .codeflow-step strong {
  line-height: 1.22;
}

#app-screen .locker-search-form {
  grid-template-columns: 20px minmax(120px, 1fr) auto;
}

#app-screen .locker-source-row,
#app-screen .locker-toolbar,
#app-screen .settings-subtabs,
#app-screen .admin-tabs,
#app-screen .report-period-toggle {
  flex-wrap: wrap;
  gap: 8px;
}

#app-screen .locker-source-row > span {
  flex: 1 1 160px;
  margin-left: 0;
  text-align: right;
}

#app-screen :where(.btn-primary, .btn-secondary, .btn-ghost, .btn-ghost-danger, .nudge-card-btn, .sv-tap-btn, .scope-btn, .meeting-connect-btn, .filter-btn, .locker-source-chip, .platinum-action-btn, .dashboard-command-action) {
  white-space: normal;
  text-align: center;
  line-height: 1.18;
}

#app-screen :where(.settings-section, .ecosystem-card, .setting-row, .member-row, .invite-row, .api-status-row) {
  min-width: 0;
}

#app-screen .setting-row,
#app-screen .member-row,
#app-screen .invite-row,
#app-screen .api-status-row,
#app-screen .ecosystem-card-toggle {
  gap: 14px;
}

#app-screen .setting-row > div,
#app-screen .member-row > div,
#app-screen .invite-row > div,
#app-screen .api-status-row > div,
#app-screen .ecosystem-card-toggle > div,
#app-screen .ecosystem-card-toggle > span {
  min-width: 0;
  flex: 1 1 auto;
}

#app-screen .ecosystem-card-toggle :where(b, strong) {
  display: block;
  overflow-wrap: anywhere;
  line-height: 1.22;
}

#app-screen .knowledge-result {
  grid-template-columns: 48px minmax(0, 1fr) minmax(52px, auto);
}

#app-screen :where(.notification-bar, .notif-item, .setting-row, .ecosystem-card-toggle, .member-row, .invite-row) {
  align-items: center;
}

#app-screen :where(
  .view-header,
  .dashboard-command-panel,
  .analytics-hero-card,
  .sentinel-chat-col,
  .sv-orb-card,
  .locker-intelligence-search,
  .codeflow-pipeline-card,
  .subscription-current,
  .subscription-plan-card.active,
  .settings-summary
) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

#app-screen :where(
  .dashboard-command-panel,
  .analytics-hero-card,
  .sentinel-chat-col,
  .sv-orb-card,
  .locker-intelligence-search,
  .codeflow-pipeline-card,
  .subscription-current,
  .subscription-plan-card.active,
  .settings-summary
)::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 0%, rgba(255,255,255,0.13), transparent 26%),
    radial-gradient(circle at 90% 18%, rgba(201,168,76,0.12), transparent 28%);
  opacity: 0.72;
}

#app-screen .view-header::after {
  content: "";
  position: absolute;
  right: -90px;
  top: -120px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,168,76,0.12), transparent 64%);
  pointer-events: none;
}

#app-screen :where(.group-card, .dashboard-action-card, .workload-preview-card, .locker-node, .locker-card, .sv-action-card, .subscription-plan-card, .ecosystem-card, .codeflow-review-item, .knowledge-result)::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(255,255,255,0.09), transparent 30%, rgba(201,168,76,0.05));
  opacity: 0;
  transition: opacity .22s ease;
}

#app-screen :where(.group-card, .dashboard-action-card, .workload-preview-card, .locker-node, .locker-card, .sv-action-card, .subscription-plan-card, .ecosystem-card, .codeflow-review-item, .knowledge-result):hover::before {
  opacity: 1;
}

@media (max-width: 1180px) {
  #app-screen .dashboard-command-panel {
    grid-template-columns: 1fr;
  }

  #app-screen .dashboard-command-side {
    padding: 12px 0 0;
    border-left: 0;
    border-top: 1px solid var(--border);
  }

  #app-screen .dashboard-command-action {
    justify-self: stretch;
    width: 100%;
  }

  #app-screen .codeflow-status-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 769px) {
  #app-screen .main {
    flex: 0 0 calc(100vw - var(--sidebar-w));
    width: calc(100vw - var(--sidebar-w));
    max-width: calc(100vw - var(--sidebar-w));
    min-width: 0;
  }

  #app-screen .sidebar.collapsed ~ .main {
    flex-basis: 100vw;
    width: 100vw;
    max-width: 100vw;
  }
}

@media (max-width: 860px) {
  #app-screen .topbar-r {
    min-width: 0;
  }

  #app-screen .search-wrap {
    min-width: 44px;
    flex-basis: 44px;
  }

  #app-screen .search-wrap input,
  #app-screen .identity-copy,
  #app-screen .ist-clock-date,
  #app-screen .topbar-plan-btn span {
    display: none;
  }

  #app-screen .identity-pill,
  #app-screen .topbar-plan-btn {
    width: 44px;
    max-width: 44px;
    justify-content: center;
    padding-inline: 0;
  }
}

@media (max-width: 720px) {
  #app-screen .main {
    flex: 1 1 auto;
    width: 100vw;
    max-width: 100vw;
    margin-left: 0;
  }

  #app-screen .view-header {
    align-items: stretch;
  }

  #app-screen .view-header > div,
  #app-screen .view-header-r {
    flex-basis: 100%;
  }

  #app-screen .view-header :where(.btn-primary, .btn-secondary, .btn-ghost, select) {
    width: 100%;
  }

  #app-screen .codeflow-status-strip {
    grid-template-columns: 1fr;
  }

  #app-screen .codeflow-pipeline {
    grid-template-columns: 1fr;
  }

  #app-screen .locker-search-form,
  #app-screen .knowledge-result {
    grid-template-columns: 1fr;
  }

  #app-screen .locker-search-form svg,
  #app-screen .knowledge-result-type,
  #app-screen .knowledge-result > em {
    display: none;
  }

  #app-screen .locker-source-row > span {
    flex-basis: 100%;
    text-align: left;
  }

  #app-screen .setting-row,
  #app-screen .member-row,
  #app-screen .invite-row,
  #app-screen .api-status-row,
  #app-screen .ecosystem-card-toggle,
  #app-screen .notification-bar {
    align-items: stretch;
    flex-direction: column;
  }

  #app-screen :where(.setting-row, .member-row, .invite-row, .api-status-row, .ecosystem-card-toggle, .notification-bar) :where(button, .btn-primary, .btn-secondary, .btn-ghost) {
    width: 100%;
  }
}

@media (max-width: 720px) {
  #app-screen {
    --surface: rgba(19, 21, 28, 0.96);
    --surface-2: rgba(27, 30, 39, 0.96);
    --surface-3: rgba(35, 39, 51, 0.96);
    --border: rgba(255,255,255,0.17);
    --border-med: rgba(255,255,255,0.26);
    --luxury-glass: linear-gradient(145deg, rgba(255,255,255,0.18), rgba(255,255,255,0.07) 46%, rgba(201,168,76,0.1));
    --luxury-glass-soft: linear-gradient(150deg, rgba(255,255,255,0.14), rgba(255,255,255,0.045) 48%, rgba(201,168,76,0.08));
  }

  [data-theme="light"] #app-screen {
    --surface: rgba(255, 254, 250, 0.97);
    --surface-2: rgba(248, 245, 239, 0.98);
    --surface-3: rgba(239, 235, 226, 0.98);
    --border: rgba(36,31,21,0.16);
    --border-med: rgba(36,31,21,0.26);
    --luxury-glass: linear-gradient(145deg, rgba(255,255,255,0.98), rgba(255,255,255,0.74) 48%, rgba(201,168,76,0.12));
    --luxury-glass-soft: linear-gradient(150deg, rgba(255,255,255,0.92), rgba(255,255,255,0.66) 48%, rgba(201,168,76,0.1));
  }

  #app-screen :where(
    .view-header,
    .dashboard-command-panel,
    .analytics-hero-card,
    .sentinel-chat-col,
    .sv-orb-card,
    .sv-action-card,
    .native-assistant-card,
    .vx-history-panel,
    .locker-intelligence-search,
    .codeflow-pipeline-card,
    .codeflow-review-panel,
    .codeflow-guardrail-card,
    .subscription-current,
    .settings-section,
    .ecosystem-card,
    .notification-card,
    .report-card
  ) {
    background: var(--luxury-glass), var(--surface) !important;
    border-color: var(--border-med);
    box-shadow: var(--luxury-inner-line), 0 16px 44px rgba(0,0,0,0.28);
  }

  [data-theme="light"] #app-screen :where(
    .view-header,
    .dashboard-command-panel,
    .analytics-hero-card,
    .sentinel-chat-col,
    .sv-orb-card,
    .sv-action-card,
    .native-assistant-card,
    .vx-history-panel,
    .locker-intelligence-search,
    .codeflow-pipeline-card,
    .codeflow-review-panel,
    .codeflow-guardrail-card,
    .subscription-current,
    .settings-section,
    .ecosystem-card,
    .notification-card,
    .report-card
  ) {
    box-shadow: var(--luxury-inner-line), 0 14px 36px rgba(52,43,24,0.12);
  }

  #app-screen .sentinel-master-grid {
    gap: 14px;
  }

  #app-screen .sentinel-chat-col {
    height: min(62vh, 480px);
    min-height: 360px;
    border-radius: 22px;
  }

  #app-screen .sentinel-chat-header,
  #app-screen .sentinel-input-bar {
    padding: 12px;
  }

  #app-screen .sentinel-feed {
    padding: 14px;
  }

  #app-screen .prompt-chips-inline {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  #app-screen .chip-sm {
    min-height: 34px;
    border-radius: 12px;
  }

  #app-screen .sentinel-bubble {
    max-width: 86%;
    padding: 10px 12px;
    font-size: 0.88rem;
  }

  #app-screen .sentinel-avatar {
    width: 28px;
    height: 28px;
  }

  #app-screen .sentinel-input-bar input {
    min-width: 0;
    padding: 11px 12px;
  }

  #app-screen .btn-send {
    flex: 0 0 44px;
  }

  #app-screen .sentinel-voice-col {
    gap: 12px;
  }

  #app-screen .sv-orb-card,
  #app-screen .sv-action-card,
  #app-screen .vx-history-panel,
  #app-screen .native-assistant-card {
    padding: 16px;
    border-radius: 20px;
  }

  #app-screen .sentinel-voice-col .vx-orb-zone {
    min-height: 160px;
    padding: 18px 0 12px;
    overflow: hidden;
  }

  #app-screen .sentinel-voice-col .vx-orb {
    width: 86px;
    height: 86px;
  }

  #app-screen .sentinel-voice-col .vx-ring.r1 { width: 112px; height: 112px; }
  #app-screen .sentinel-voice-col .vx-ring.r2 { width: 138px; height: 138px; }
  #app-screen .sentinel-voice-col .vx-ring.r3 { width: 162px; height: 162px; }

  #app-screen .vx-text-bar {
    gap: 8px;
  }

  #app-screen .vx-send-btn {
    flex: 0 0 48px;
    justify-content: center;
    padding: 0;
  }

  #app-screen .meeting-connect-actions,
  #app-screen .native-assistant-actions,
  #app-screen .assistant-card-grid,
  #app-screen .assistant-quick-steps {
    display: grid;
    grid-template-columns: 1fr;
  }

  #app-screen .native-assistant-meta div {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  #app-screen .sv-notif-types {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 6px;
    border-radius: 18px;
  }

  #app-screen .sv-notif-type-btn {
    min-height: 42px;
  }

  #app-screen .assistant-flow-card {
    padding: 14px;
  }

  #app-screen .assistant-qr-wrap {
    width: min(100%, 190px);
  }
}

/* Sentinel room repair: keep voice, Siri setup, and action cards readable. */
#app-screen #view-sentinel > .view-header > div {
  flex: 1 1 auto;
  min-height: 0;
}

#app-screen #view-sentinel .sentinel-master-grid {
  grid-template-columns: minmax(0, 1fr) minmax(340px, 400px);
  gap: 18px;
}

#app-screen #view-sentinel .sentinel-chat-col,
#app-screen #view-sentinel .sentinel-voice-col,
#app-screen #view-sentinel .sv-orb-card,
#app-screen #view-sentinel .sv-action-card,
#app-screen #view-sentinel .vx-history-panel {
  min-width: 0;
}

#app-screen #view-sentinel .sentinel-voice-col {
  gap: 12px;
  max-height: none;
  overflow: visible;
  scrollbar-width: auto;
}

#app-screen #view-sentinel .sv-orb-card,
#app-screen #view-sentinel .native-assistant-card,
#app-screen #view-sentinel .sv-action-card,
#app-screen #view-sentinel .vx-history-panel {
  position: relative;
  overflow: visible;
}

#app-screen #view-sentinel .sv-orb-card {
  display: grid;
  gap: 12px;
}

#app-screen #view-sentinel .sv-orb-header {
  margin-bottom: 0;
}

#app-screen #view-sentinel .sentinel-voice-col .vx-orb-zone {
  min-height: 156px;
  padding: 18px 0 8px;
  overflow: visible;
}

#app-screen #view-sentinel .vx-orb-hint {
  margin-top: 14px;
}

#app-screen #view-sentinel .vx-text-bar {
  min-width: 0;
  margin-bottom: 0;
}

#app-screen #view-sentinel .vx-text-input {
  min-width: 0;
}

#app-screen #view-sentinel .meeting-connect-panel {
  align-items: flex-start;
  flex-wrap: wrap;
}

#app-screen #view-sentinel .meeting-connect-copy {
  flex: 1 1 170px;
}

#app-screen #view-sentinel .meeting-connect-actions {
  flex: 1 1 180px;
  justify-content: flex-start;
}

#app-screen #view-sentinel .native-assistant-meta strong {
  white-space: normal;
  overflow-wrap: anywhere;
}

#app-screen #view-sentinel .native-assistant-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#app-screen #view-sentinel .sv-action-card-top > div:last-child {
  min-width: 0;
}

#app-screen #view-sentinel .sv-action-title,
#app-screen #view-sentinel .sv-action-desc {
  overflow-wrap: anywhere;
}

#app-screen #view-sentinel .sv-notif-types {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#app-screen #view-sentinel .sv-notif-type-btn {
  min-width: 0;
}

@media (max-width: 980px) {
  #app-screen #view-sentinel .sentinel-master-grid {
    grid-template-columns: 1fr;
  }

  #app-screen #view-sentinel .sentinel-chat-col {
    height: clamp(360px, 58vh, 520px);
    min-height: 360px;
  }
}

@media (max-width: 768px) {
  #app-screen #view-sentinel > .view-header > div {
    flex-basis: auto;
  }

  #app-screen #view-sentinel .meeting-connect-copy,
  #app-screen #view-sentinel .meeting-connect-actions {
    flex: 0 1 auto;
    width: 100%;
  }

  #app-screen #view-sentinel .native-assistant-actions,
  #app-screen #view-sentinel .sv-notif-types {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  #app-screen #view-sentinel .sentinel-voice-col .vx-orb-zone {
    min-height: 138px;
  }

  #app-screen #view-sentinel .sentinel-voice-col .vx-orb {
    width: 78px;
    height: 78px;
  }

  #app-screen #view-sentinel .sentinel-voice-col .vx-ring.r1 { width: 102px; height: 102px; }
  #app-screen #view-sentinel .sentinel-voice-col .vx-ring.r2 { width: 126px; height: 126px; }
  #app-screen #view-sentinel .sentinel-voice-col .vx-ring.r3 { width: 148px; height: 148px; }
}

/* Founder polish pass: keep the original NOD look, but make dense areas calmer and clearer. */
.founder-brief-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
  gap: 14px;
  margin: 14px 0;
  padding: 16px;
  border: 1px solid rgba(201,168,76,0.24);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(201,168,76,0.08), transparent 46%),
    var(--surface);
  box-shadow: 0 14px 44px rgba(0,0,0,0.18);
}

.founder-brief-main {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
}

.founder-brief-main h3 {
  margin: 0;
  color: var(--text-1);
  font-size: clamp(1.04rem, 1.5vw, 1.28rem);
  font-weight: 950;
  line-height: 1.22;
}

.founder-brief-main p {
  max-width: 760px;
  margin: 0;
  color: var(--text-2);
  font-size: .86rem;
  line-height: 1.55;
}

.founder-brief-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.founder-brief-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.founder-brief-stat {
  min-height: 82px;
  display: grid;
  align-content: space-between;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.026);
}

.founder-brief-stat span {
  color: var(--text-3);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.founder-brief-stat strong {
  color: var(--text-1);
  font-size: 1.28rem;
  font-weight: 950;
  line-height: 1;
}

.founder-brief-stat.danger { border-color: rgba(255,77,77,.28); }
.founder-brief-stat.warn { border-color: rgba(245,166,35,.28); }
.founder-brief-stat.success { border-color: rgba(77,204,143,.28); }

.setup-progress-panel {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-3);
}

.setup-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--text-2);
  font-size: .76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.setup-progress-head strong {
  color: var(--gold-lt);
  font-size: .9rem;
}

.setup-progress-bar {
  height: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,0.035);
}

.setup-progress-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold), var(--success));
}

.setup-progress-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.setup-progress-step {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font-size: .72rem;
  font-weight: 850;
}

.setup-progress-step b {
  color: var(--text-3);
  font-size: .62rem;
}

.setup-progress-step.done {
  border-color: rgba(77,204,143,.28);
  color: var(--success);
}

.setup-progress-step.todo {
  border-color: rgba(245,166,35,.24);
}

.setup-progress-step.muted {
  color: var(--text-3);
}

.codeflow-wizard {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  margin: 0 0 16px;
  padding: 14px;
  border: 1px solid rgba(104,180,255,.22);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(135deg, rgba(104,180,255,.075), transparent 52%),
    var(--bg-3);
}

.codeflow-wizard-rail {
  display: grid;
  grid-template-columns: repeat(4, 28px);
  gap: 6px;
  align-content: center;
}

.codeflow-wizard-rail span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid var(--border-med);
  border-radius: 50%;
  color: var(--text-2);
  font-size: .72rem;
  font-weight: 950;
}

.codeflow-wizard-rail span.active {
  border-color: var(--gold);
  background: rgba(201,168,76,.13);
  color: var(--gold-lt);
}

.codeflow-wizard-copy {
  min-width: 0;
}

.codeflow-wizard-copy strong {
  display: block;
  color: var(--text-1);
  font-size: .94rem;
  font-weight: 950;
}

.codeflow-wizard-copy p {
  margin: 5px 0 0;
  color: var(--text-2);
  font-size: .8rem;
  line-height: 1.55;
}

.codeflow-device-pass {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(3, auto);
  gap: 10px;
  align-items: center;
  margin: 0 0 16px;
  padding: 12px;
  border: 1px solid rgba(201,168,76,.28);
  border-radius: var(--radius-sm);
  background: rgba(201,168,76,.06);
}

.codeflow-device-pass div {
  min-width: 0;
}

.codeflow-device-pass span,
.codeflow-device-pass strong {
  display: block;
}

.codeflow-device-pass span {
  color: var(--gold-lt);
  font-size: .68rem;
  font-weight: 950;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.codeflow-device-pass strong {
  margin-top: 3px;
  color: var(--text-1);
  font-size: .88rem;
  line-height: 1.25;
}

.codeflow-token-panel {
  display: grid;
  grid-template-columns: minmax(150px, .45fr) minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  margin: -4px 0 16px;
  padding: 12px;
  border: 1px solid rgba(77,204,143,.28);
  border-radius: var(--radius-sm);
  background: rgba(77,204,143,.06);
}

.codeflow-token-panel.hidden {
  display: none;
}

.codeflow-token-copy {
  min-width: 0;
}

.codeflow-token-copy span,
.codeflow-token-copy strong {
  display: block;
}

.codeflow-token-copy span {
  color: var(--success);
  font-size: .68rem;
  font-weight: 950;
  text-transform: uppercase;
}

.codeflow-token-copy strong {
  margin-top: 3px;
  color: var(--text-1);
  font-size: .86rem;
}

.codeflow-token-panel input {
  width: 100%;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.workload-task-row {
  grid-template-columns: minmax(0, 1fr) minmax(220px, auto);
}

.workload-why {
  display: block;
  margin-top: 7px;
  color: var(--warn);
  font-size: .74rem;
  font-weight: 800;
  line-height: 1.4;
}

.workload-audit-strip {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.workload-audit-strip span {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  padding: 5px 8px;
  border: 1px solid rgba(201,168,76,.22);
  border-radius: 999px;
  background: rgba(201,168,76,.06);
  color: var(--text-2);
  font-size: .68rem;
  font-weight: 850;
}

.workload-task-actions {
  grid-column: 1 / -1;
  justify-content: flex-end;
}

.proof-modal-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.proof-modal-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, .9fr);
  gap: 14px;
}

.proof-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.proof-card h3 {
  margin: 0 0 12px;
  color: var(--text-1);
  font-size: .9rem;
}

.proof-list {
  display: grid;
  gap: 8px;
}

.proof-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-3);
}

.proof-row span {
  color: var(--text-3);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.proof-row strong {
  min-width: 0;
  color: var(--text-1);
  font-size: .82rem;
  font-weight: 800;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.proof-timeline {
  display: grid;
  gap: 10px;
}

.proof-timeline-item {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 10px;
}

.proof-timeline-item > span {
  width: 10px;
  height: 10px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(201,168,76,.12);
}

.proof-timeline-item strong,
.proof-timeline-item small {
  display: block;
}

.proof-timeline-item strong {
  color: var(--text-1);
  font-size: .82rem;
}

.proof-timeline-item small {
  margin-top: 3px;
  color: var(--text-3);
  font-size: .74rem;
  line-height: 1.45;
}

.loading-state.compact,
.empty-state.compact {
  min-height: 74px;
  padding: 18px;
}

#app-screen #view-sentinel .sentinel-master-grid {
  align-items: start;
}

#app-screen #view-sentinel .sentinel-chat-col,
#app-screen #view-sentinel .sv-orb-card,
#app-screen #view-sentinel .native-assistant-card,
#app-screen #view-sentinel .sv-action-card,
#app-screen #view-sentinel .vx-history-panel {
  border-radius: var(--radius-sm);
}

#app-screen #view-sentinel .native-assistant-card {
  padding: 14px;
}

#app-screen #view-sentinel .native-assistant-status {
  min-height: 42px;
  display: flex;
  align-items: center;
}

#app-screen #view-sentinel .sv-action-card {
  padding: 14px;
}

#app-screen #view-sentinel .sv-action-card-top {
  gap: 10px;
}

@media (max-width: 1180px) {
  .founder-brief-panel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .proof-modal-head,
  .codeflow-wizard {
    grid-template-columns: 1fr;
  }

  .codeflow-device-pass {
    grid-template-columns: 1fr;
  }

  .codeflow-token-panel {
    grid-template-columns: 1fr;
  }

  .proof-modal-head {
    flex-direction: column;
  }

  .proof-modal-grid,
  .workload-task-row {
    grid-template-columns: 1fr;
  }

  .workload-task-meta {
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  .founder-brief-grid,
  .codeflow-wizard-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .proof-row {
    grid-template-columns: 1fr;
  }

  .workload-task-actions {
    justify-content: stretch;
  }

  .workload-task-actions .btn-xs {
    flex: 1 1 120px;
  }
}

#app-screen .nav-btn.active {
  border-color: rgba(201,168,76,0.46);
  background:
    linear-gradient(90deg, rgba(201,168,76,0.16), rgba(201,168,76,0.045)),
    var(--surface);
  box-shadow: inset 3px 0 0 var(--gold), 0 10px 26px rgba(0,0,0,0.16);
}

#app-screen .nav-btn.active .nav-ico {
  color: var(--gold-lt);
}

.founder-command-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.founder-command-tile {
  min-height: 96px;
  display: grid;
  align-content: space-between;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-1);
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.founder-command-tile:hover {
  border-color: rgba(201,168,76,.36);
  background: rgba(255,255,255,.035);
  transform: translateY(-1px);
}

.founder-command-tile span,
.founder-command-tile em {
  color: var(--text-3);
  font-size: .68rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.founder-command-tile strong {
  color: var(--text-1);
  font-size: 1.55rem;
  font-weight: 950;
  line-height: 1;
}

.founder-command-tile.danger { border-color: rgba(224,85,85,.28); }
.founder-command-tile.warn { border-color: rgba(224,154,48,.3); }
.founder-command-tile.setup { border-color: rgba(93,172,226,.26); }

.workload-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 14px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.workload-filter {
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font-size: .76rem;
  font-weight: 850;
  cursor: pointer;
}

.workload-filter:hover,
.workload-filter.active {
  border-color: rgba(201,168,76,.36);
  background: rgba(201,168,76,.08);
  color: var(--gold-lt);
}

.workload-source-line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.workload-source-badge,
.workload-due-badge {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,.025);
  color: var(--text-2);
  font-size: .68rem;
  font-weight: 850;
  line-height: 1.2;
}

.workload-source-badge {
  border-color: rgba(104,180,255,.22);
}

.workload-due-badge.late {
  border-color: rgba(224,85,85,.36);
  color: var(--danger);
}

.workload-due-badge.soon {
  border-color: rgba(224,154,48,.34);
  color: var(--warn);
}

.workload-due-badge.muted {
  color: var(--text-3);
}

.connection-health-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 25px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,.025);
  color: var(--text-2);
  font-size: .68rem;
  font-weight: 900;
  white-space: nowrap;
}

.connection-health-pill b {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-3);
}

.connection-health-pill.connected {
  border-color: rgba(77,204,143,.3);
  color: var(--success);
}

.connection-health-pill.connected b { background: var(--success); }

.connection-health-pill.waiting {
  border-color: rgba(224,154,48,.34);
  color: var(--warn);
}

.connection-health-pill.waiting b { background: var(--warn); }

.connection-health-pill.issue {
  border-color: rgba(224,85,85,.36);
  color: var(--danger);
}

.connection-health-pill.issue b { background: var(--danger); }

.connection-health-pill.quiet {
  border-color: rgba(104,180,255,.24);
  color: var(--text-2);
}

.connection-health-pill.quiet b { background: #68B4FF; }

.group-connection-line,
.group-card-connection {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  color: var(--text-3);
  font-size: .72rem;
  line-height: 1.35;
}

.group-row-info {
  min-width: 0;
}

.group-row {
  align-items: center;
}

.group-card-connection {
  min-height: 30px;
}

.native-assistant-quick-status {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 8px 0 0;
}

.native-assistant-quick-status span {
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.025);
  color: var(--text-2);
  font-size: .7rem;
  font-weight: 850;
  overflow-wrap: anywhere;
}

#app-screen #view-sentinel .native-assistant-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 920px) {
  .founder-command-strip {
    grid-template-columns: 1fr;
  }

  #app-screen #view-sentinel .native-assistant-actions,
  .native-assistant-quick-status {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .workload-filter {
    flex: 1 1 130px;
  }

  .connection-health-pill {
    white-space: normal;
  }
}

/* Light theme glass finish */
[data-theme="light"] {
  --bg: #F6F4EE;
  --bg-2: #EFECE4;
  --bg-3: rgba(255, 255, 255, 0.5);
  --bg-4: rgba(245, 240, 229, 0.72);
  --surface: rgba(255, 255, 255, 0.58);
  --surface-2: rgba(255, 253, 248, 0.7);
  --surface-3: rgba(247, 242, 232, 0.76);
  --border: rgba(68, 55, 31, 0.13);
  --border-med: rgba(68, 55, 31, 0.2);
  --luxury-glass:
    linear-gradient(145deg, rgba(255,255,255,0.82), rgba(255,255,255,0.46) 44%, rgba(201,168,76,0.11)),
    radial-gradient(circle at 12% 0%, rgba(255,255,255,0.9), transparent 34%);
  --luxury-glass-soft:
    linear-gradient(150deg, rgba(255,255,255,0.68), rgba(255,255,255,0.34) 52%, rgba(201,168,76,0.08));
  --luxury-shadow: 0 20px 62px rgba(76, 62, 32, 0.13);
  --luxury-gold-glow: 0 0 0 1px rgba(201,168,76,0.12), 0 24px 60px rgba(76,62,32,0.14);
  --luxury-inner-line: inset 0 1px 0 rgba(255,255,255,0.82);
}

[data-theme="light"] body {
  background:
    radial-gradient(circle at 8% -8%, rgba(201,168,76,0.21), transparent 32%),
    radial-gradient(circle at 88% 2%, rgba(104,180,255,0.16), transparent 28%),
    radial-gradient(circle at 54% 112%, rgba(255,255,255,0.78), transparent 34%),
    linear-gradient(180deg, #F7F5EF, #EDE9DF 56%, #FAF8F2);
}

[data-theme="light"] #app-screen .main {
  background:
    radial-gradient(circle at 48% -10%, rgba(255,255,255,0.72), transparent 34%),
    radial-gradient(circle at 90% 18%, rgba(201,168,76,0.11), transparent 30%),
    transparent;
}

[data-theme="light"] #app-screen .sidebar {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.58), rgba(246,242,232,0.48)),
    rgba(255,255,255,0.34) !important;
  border-right-color: rgba(68,55,31,0.14);
  box-shadow: 18px 0 56px rgba(76,62,32,0.1), inset -1px 0 0 rgba(255,255,255,0.54);
  backdrop-filter: blur(30px) saturate(145%);
  -webkit-backdrop-filter: blur(30px) saturate(145%);
}

[data-theme="light"] #app-screen .topbar {
  background:
    linear-gradient(90deg, rgba(255,255,255,0.7), rgba(255,255,255,0.34)),
    rgba(255,255,255,0.32) !important;
  border-bottom-color: rgba(68,55,31,0.12);
  box-shadow: 0 18px 56px rgba(76,62,32,0.1), inset 0 1px 0 rgba(255,255,255,0.74);
  backdrop-filter: blur(30px) saturate(145%);
  -webkit-backdrop-filter: blur(30px) saturate(145%);
}

[data-theme="light"] #app-screen :where(
  .view-header,
  .dashboard-command-panel,
  .role-access-card,
  .dashboard-nudge-card,
  .dashboard-action-card,
  .dashboard-deep-panel,
  .individual-summary,
  .vital-card,
  .workload-preview-card,
  .workload-member,
  .group-card,
  .group-row,
  .group-setup-panel,
  .group-detail-stats,
  .feed-item,
  .msg-card,
  .attachment-box,
  .report-card,
  .analytics-hero-card,
  .analytics-update-item,
  .analytics-sync-pane,
  .report-operating-read,
  .report-table-wrap,
  .meeting-connect-panel,
  .sentinel-chat-col,
  .sv-orb-card,
  .sv-action-card,
  .vx-scope-strip,
  .vx-group-row,
  .vx-response-panel,
  .vx-siri-panel,
  .vx-history-panel,
  .vx-history-item,
  .native-assistant-card,
  .assistant-flow-card,
  .assistant-setup-panel,
  .assistant-device-item,
  .locker-card,
  .locker-node,
  .locker-node-card,
  .locker-intelligence-search,
  .knowledge-result,
  .platinum-actions,
  .action-helper-grid,
  .notification-card,
  .notif-item,
  .notif-row,
  .notification-bar,
  .member-row,
  .invite-row,
  .settings-summary,
  .settings-section,
  .ecosystem-card,
  .ecosystem-card-toggle,
  .ecosystem-value-banner,
  .api-status-row,
  .setting-row,
  .secret-card,
  .subscription-current,
  .subscription-plan-card,
  .subscription-usage-card,
  .subscription-entitlements,
  .subscription-page-shell,
  .owner-workspace-card,
  .owner-summary-card,
  .owner-broadcast-panel,
  .owner-line,
  .owner-detail-row,
  .owner-mini-metric,
  .owner-image-tile,
  .connections-shell,
  .connection-card,
  .connection-status-card,
  .codeflow-status-strip,
  .codeflow-setup-card,
  .codeflow-pipeline-card,
  .codeflow-review-panel,
  .codeflow-guardrail-card,
  .codeflow-review-item,
  .codeflow-step,
  .empty-state,
  .loading-state
) {
  border-color: rgba(68,55,31,0.14);
  background: var(--luxury-glass-soft), rgba(255,255,255,0.44) !important;
  box-shadow: var(--luxury-inner-line), 0 18px 50px rgba(76,62,32,0.1);
  backdrop-filter: blur(26px) saturate(140%);
  -webkit-backdrop-filter: blur(26px) saturate(140%);
}

[data-theme="light"] #app-screen :where(
  .view-header,
  .dashboard-command-panel,
  .analytics-hero-card,
  .report-card.primary,
  .sentinel-chat-col,
  .sv-orb-card,
  .locker-intelligence-search,
  .codeflow-setup-card,
  .codeflow-pipeline-card,
  .subscription-current,
  .subscription-plan-card.active,
  .settings-summary
) {
  background: var(--luxury-glass), rgba(255,255,255,0.52) !important;
  border-color: rgba(201,168,76,0.24);
  box-shadow: var(--luxury-inner-line), var(--luxury-shadow);
}

[data-theme="light"] #app-screen :where(
  .sidebar-brand,
  .sidebar-user,
  .topbar-beta-mark,
  .identity-pill,
  .topbar-plan-btn,
  .ist-clock,
  .search-wrap,
  .theme-btn,
  .icon-btn,
  .topbar-avatar,
  .dashboard-mode-tabs,
  .settings-subtabs,
  .report-period-toggle,
  .admin-tabs,
  .locker-toolbar,
  .locker-source-row,
  .sv-notif-types,
  .native-assistant-quick-status span,
  .connection-health-pill
) {
  border-color: rgba(68,55,31,0.14);
  background: rgba(255,255,255,0.42) !important;
  box-shadow: var(--luxury-inner-line), 0 12px 34px rgba(76,62,32,0.08);
  backdrop-filter: blur(22px) saturate(135%);
  -webkit-backdrop-filter: blur(22px) saturate(135%);
}

[data-theme="light"] #app-screen :where(.btn-secondary, .btn-ghost, .nudge-card-btn, .sv-tap-btn, .scope-btn, .meeting-connect-btn, .filter-btn, .locker-source-chip, .platinum-action-btn) {
  border-color: rgba(68,55,31,0.15);
  background: rgba(255,255,255,0.4) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
}

[data-theme="light"] #app-screen :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
[data-theme="light"] #auth-screen :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
[data-theme="light"] .modal :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  border-color: rgba(68,55,31,0.14);
  background: rgba(255,255,255,0.46) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.78), 0 10px 30px rgba(76,62,32,0.06);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
}

[data-theme="light"] #auth-screen .auth-card,
[data-theme="light"] .modal,
[data-theme="light"] .confirm-box,
[data-theme="light"] .setup-guide-card,
[data-theme="light"] .setup-video-panel,
[data-theme="light"] .pilot-terms-panel {
  background: var(--luxury-glass), rgba(255,255,255,0.54) !important;
  box-shadow: var(--luxury-inner-line), 0 26px 70px rgba(76,62,32,0.14);
  backdrop-filter: blur(30px) saturate(145%);
  -webkit-backdrop-filter: blur(30px) saturate(145%);
}

[data-theme="light"] .modal-backdrop,
[data-theme="light"] .overlay-backdrop,
[data-theme="light"] #confirm-overlay {
  background:
    radial-gradient(circle at 50% 0%, rgba(201,168,76,0.18), transparent 34%),
    rgba(246,242,232,0.48);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
}

/* ==========================================================================
   2026 luxury refinement layer
   Centralizes the black-and-gold product finish without touching app logic.
   ========================================================================== */

:root {
  --gold: #D4AF37;
  --gold-lt: #E6C766;
  --gold-soft: #C9A86A;
  --gold-deep: #8F6B22;
  --gold-hover: #E2C15C;
  --gold-dim: rgba(212,175,55,0.13);
  --gold-line: rgba(212,175,55,0.35);
  --gold-line-strong: rgba(212,175,55,0.7);
  --gold-metal:
    linear-gradient(135deg, #8f6b22 0%, #d4af37 30%, #f0d77a 50%, #c79a2b 70%, #8f6b22 100%);

  --bg: #000000;
  --bg-2: #070707;
  --bg-3: #0D0D0D;
  --bg-4: #151515;
  --surface: #111111;
  --surface-2: #151515;
  --surface-3: #1A1A1A;
  --border: rgba(255,255,255,0.08);
  --border-med: rgba(255,255,255,0.12);
  --text-1: #F5F5F7;
  --text-2: #A1A1A6;
  --text-3: #6E6E73;
  --text-inv: #090909;
  --danger: #D96A6A;
  --danger-dim: rgba(217,106,106,0.14);
  --success: #79AE8B;
  --success-dim: rgba(121,174,139,0.13);
  --warn: #CFA14A;
  --warn-dim: rgba(207,161,74,0.14);
  --shadow: 0 24px 70px rgba(0,0,0,0.48), 0 0 0 1px rgba(255,255,255,0.03);
  --shadow-lg: 0 34px 100px rgba(0,0,0,0.72), 0 0 0 1px rgba(255,255,255,0.04);
  --luxury-inner-line: inset 0 1px 0 rgba(255,255,255,0.055);
  --luxury-card-bg:
    linear-gradient(145deg, rgba(255,255,255,0.035), rgba(255,255,255,0.008) 42%, rgba(212,175,55,0.025)),
    var(--surface);
  --luxury-panel-bg:
    radial-gradient(circle at 50% 0%, rgba(212,175,55,0.08), transparent 38%),
    linear-gradient(145deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01) 48%),
    var(--surface);
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 24px;
}

[data-theme="light"] {
  --bg: #000000;
  --bg-2: #050505;
  --bg-3: #0B0B0B;
  --bg-4: #111111;
  --surface: #101010;
  --surface-2: #151515;
  --surface-3: #1A1A1A;
  --border: rgba(255,255,255,0.1);
  --border-med: rgba(255,255,255,0.15);
  --text-1: #F8F8FA;
  --text-2: #B5B5BA;
  --text-3: #7A7A80;
  --text-inv: #090909;
  --shadow: 0 24px 70px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.035);
  --shadow-lg: 0 34px 100px rgba(0,0,0,0.72), 0 0 0 1px rgba(255,255,255,0.045);
  --luxury-inner-line: inset 0 1px 0 rgba(255,255,255,0.06);
}

html {
  background: #000;
}

body {
  background:
    radial-gradient(circle at 50% 0%, rgba(212,175,55,0.11), transparent 32%),
    radial-gradient(circle at 78% 18%, rgba(255,255,255,0.035), transparent 28%),
    linear-gradient(180deg, #000 0%, #030303 48%, #000 100%);
  color: var(--text-1);
  letter-spacing: 0;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.014) 1px, transparent 1px);
  background-size: 120px 120px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.5), transparent 62%);
  opacity: 0.32;
}

:focus-visible {
  outline: 2px solid var(--gold-lt);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(212,175,55,0.16);
}

::selection {
  background: rgba(212,175,55,0.28);
  color: var(--text-1);
}

/* First viewport */
#auth-screen {
  min-height: 100vh;
  align-items: center;
  background:
    radial-gradient(circle at 50% 8%, rgba(212,175,55,0.12), transparent 34%),
    radial-gradient(circle at 22% 70%, rgba(255,255,255,0.035), transparent 30%),
    #000;
}

.auth-noise {
  opacity: 0.22;
}

.auth-glow-orb {
  display: none;
}

.auth-container {
  width: min(1180px, calc(100% - 40px));
  max-width: none;
  min-height: min(760px, calc(100vh - 64px));
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, 460px);
  align-items: center;
  gap: 56px;
  padding: 42px 0;
}

.auth-brand {
  position: absolute;
  top: 26px;
  left: 0;
}

.brand-mark,
.brand-mark svg,
.sidebar-brand svg,
.topbar-beta-mark svg {
  filter: drop-shadow(0 0 18px rgba(212,175,55,0.18));
}

.brand-name {
  color: var(--text-1);
}

.brand-tagline,
.auth-kicker,
.dashboard-command-kicker,
.codeflow-kicker,
.report-kicker {
  color: var(--gold-lt);
}

.auth-showcase {
  position: relative;
  display: grid;
  gap: 34px;
  padding-top: 54px;
}

.auth-showcase::before {
  content: "";
  position: absolute;
  left: -11%;
  top: 18%;
  width: 70%;
  height: 58%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,175,55,0.11), transparent 66%);
  filter: blur(24px);
  pointer-events: none;
}

.auth-showcase-copy {
  position: relative;
  max-width: 660px;
}

.auth-kicker {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 0 11px;
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  background: rgba(212,175,55,0.08);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.auth-showcase h1 {
  max-width: 760px;
  margin: 18px 0 0;
  color: var(--text-1);
  font-family: 'Bodoni Moda', serif;
  font-size: 4.6rem;
  font-weight: 800;
  line-height: 0.96;
}

.auth-showcase h1 span {
  color: transparent;
  background: var(--gold-metal);
  -webkit-background-clip: text;
  background-clip: text;
}

.auth-showcase p {
  max-width: 520px;
  margin-top: 22px;
  color: var(--text-2);
  font-size: 1.05rem;
  line-height: 1.65;
}

.product-frame {
  position: relative;
  width: min(100%, 760px);
  overflow: hidden;
  border: 1px solid var(--border-med);
  border-radius: 28px;
  background:
    radial-gradient(circle at 62% 0%, rgba(212,175,55,0.11), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,0.06), rgba(255,255,255,0.012) 48%),
    #080808;
  box-shadow:
    0 42px 120px rgba(0,0,0,0.78),
    0 0 0 1px rgba(212,175,55,0.08),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

.product-frame::after {
  content: "";
  position: absolute;
  inset: auto 12% -1px 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,0.7), transparent);
}

.product-frame-bar {
  height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,0.38);
}

.product-frame-bar span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,0.22);
}

.product-frame-bar span:first-child {
  background: var(--gold-soft);
}

.product-frame-bar strong {
  margin-left: 8px;
  color: var(--text-3);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.product-frame-body {
  display: grid;
  gap: 14px;
  padding: 20px;
}

.product-panel,
.product-stat-grid > div,
.product-rail {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(17,17,17,0.82);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.product-panel {
  min-height: 156px;
  padding: 24px;
}

.product-panel span,
.product-stat-grid span,
.product-rail span {
  display: block;
  color: var(--gold-lt);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.product-panel strong {
  display: block;
  margin-top: 12px;
  color: var(--text-1);
  font-size: 1.62rem;
  line-height: 1.18;
}

.product-panel p {
  margin: 10px 0 0;
  color: var(--text-2);
  font-size: 0.9rem;
}

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

.product-stat-grid > div {
  min-height: 104px;
  padding: 16px;
}

.product-stat-grid strong {
  display: block;
  margin-top: 14px;
  color: var(--text-1);
  font-size: 1.25rem;
}

.product-stat-grid > div:first-child strong {
  color: var(--gold-lt);
}

.product-rail {
  display: grid;
  grid-template-columns: 4px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 16px;
}

.product-rail i {
  width: 4px;
  min-height: 54px;
  border-radius: 999px;
  background: var(--gold-metal);
}

.product-rail strong {
  display: block;
  margin-top: 5px;
  color: var(--text-1);
  font-size: 0.95rem;
  line-height: 1.35;
}

.auth-card,
.modal,
.onboarding-modal,
.pilot-terms-modal {
  background: var(--luxury-panel-bg) !important;
  border: 1px solid var(--border-med);
  box-shadow: var(--shadow-lg), var(--luxury-inner-line);
  backdrop-filter: blur(22px) saturate(120%);
  -webkit-backdrop-filter: blur(22px) saturate(120%);
}

.auth-card {
  position: relative;
  z-index: 2;
  border-radius: 24px;
}

.auth-card::before,
.modal::before,
.onboarding-modal::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,0.08), transparent 28%, rgba(212,175,55,0.04));
  opacity: 0.7;
}

.auth-welcome h1,
.invite-title,
.view-title,
.vital-val,
.stat-val,
.group-detail-title,
.sentinel-empty h3 {
  color: var(--text-1);
}

/* App chrome */
#app-screen {
  background:
    radial-gradient(circle at 54% -8%, rgba(212,175,55,0.1), transparent 28%),
    #000;
}

#app-screen .main {
  background:
    radial-gradient(circle at 48% -6%, rgba(212,175,55,0.085), transparent 30%),
    linear-gradient(180deg, #000 0%, #050505 44%, #000 100%);
}

#app-screen .sidebar {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.006)),
    #050505 !important;
  border-right: 1px solid var(--border);
  box-shadow: 18px 0 70px rgba(0,0,0,0.42), inset -1px 0 0 rgba(255,255,255,0.03);
}

#app-screen .sidebar-brand,
#app-screen .sidebar-user {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255,255,255,0.025);
  padding: 12px;
}

#app-screen .sidebar-top {
  padding: 18px 14px 10px;
}

#app-screen .sidebar-nav {
  padding: 8px 10px;
}

#app-screen .nav-label {
  color: var(--text-3);
}

#app-screen .nav-btn {
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--text-2);
}

#app-screen .nav-btn:hover {
  border-color: var(--border);
  background: rgba(255,255,255,0.035);
  color: var(--text-1);
}

#app-screen .nav-btn.active {
  border-color: rgba(212,175,55,0.36);
  background:
    linear-gradient(90deg, rgba(212,175,55,0.16), rgba(212,175,55,0.035)),
    rgba(255,255,255,0.025);
  color: var(--gold-lt);
  box-shadow: inset 3px 0 0 var(--gold), 0 16px 34px rgba(0,0,0,0.25);
}

#app-screen .topbar {
  min-height: 70px;
  background: rgba(5,5,5,0.78) !important;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 18px 70px rgba(0,0,0,0.36), inset 0 1px 0 rgba(255,255,255,0.035);
  backdrop-filter: blur(24px) saturate(125%);
  -webkit-backdrop-filter: blur(24px) saturate(125%);
}

.topbar-beta-mark,
.ist-clock,
.identity-pill,
.topbar-plan-btn,
.search-wrap,
.theme-btn,
.topbar-avatar,
.icon-btn,
.dashboard-mode-tabs,
.settings-subtabs,
.admin-tabs,
.report-period-toggle,
.locker-toolbar,
.locker-source-row,
.workload-filter-bar,
.sv-notif-types {
  background: rgba(17,17,17,0.84) !important;
  border-color: var(--border) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.045);
}

.topbar-plan-btn,
.topbar-beta-mark {
  color: var(--gold-lt);
}

.topbar-beta-mark em {
  background: var(--gold-metal);
  color: #070707;
}

.breadcrumb {
  color: var(--text-1);
}

/* Controls */
.btn-primary,
.pwa-install-btn,
.btn-send,
.dashboard-command-action,
.assistant-main-btn,
.vx-send-btn {
  position: relative;
  overflow: hidden;
  border: 0;
  background: var(--gold-metal) !important;
  color: #070707 !important;
  box-shadow: 0 14px 34px rgba(212,175,55,0.18), inset 0 1px 0 rgba(255,255,255,0.28);
  text-shadow: none;
}

.btn-primary::after,
.pwa-install-btn::after,
.dashboard-command-action::after,
.btn-send::after,
.vx-send-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.32) 44%, transparent 62%);
  transform: translateX(-120%);
  transition: transform 0.42s ease;
}

.btn-primary:hover,
.pwa-install-btn:hover,
.btn-send:hover,
.dashboard-command-action:hover,
.assistant-main-btn:hover,
.vx-send-btn:hover {
  filter: brightness(1.04);
  transform: translateY(-2px);
  box-shadow: 0 18px 42px rgba(212,175,55,0.22), inset 0 1px 0 rgba(255,255,255,0.34);
}

.btn-primary:hover::after,
.pwa-install-btn:hover::after,
.dashboard-command-action:hover::after,
.btn-send:hover::after,
.vx-send-btn:hover::after {
  transform: translateX(120%);
}

.btn-primary:active,
.btn-secondary:active,
.btn-ghost:active,
.dashboard-command-action:active,
.nudge-card-btn:active,
.sv-tap-btn:active {
  transform: scale(0.98);
}

.btn-secondary,
.btn-ghost,
.btn-google,
.btn-copy,
.nudge-card-btn,
.sv-tap-btn,
.meeting-connect-btn,
.filter-btn,
.locker-source-chip,
.platinum-action-btn,
.scope-btn,
.workload-filter,
.group-manage-btn,
.btn-link {
  border-color: var(--border-med);
  background: rgba(17,17,17,0.74);
  color: var(--text-1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
}

.btn-secondary:hover,
.btn-ghost:hover,
.btn-google:hover,
.btn-copy:hover,
.nudge-card-btn:hover,
.sv-tap-btn:hover,
.meeting-connect-btn:hover,
.filter-btn:hover,
.locker-source-chip:hover,
.platinum-action-btn:hover,
.scope-btn:hover,
.workload-filter:hover,
.group-manage-btn:hover {
  border-color: var(--gold-line-strong);
  color: var(--gold-lt);
  background: rgba(212,175,55,0.08);
  transform: translateY(-1px);
}

.btn-ghost-danger,
.group-manage-btn.danger {
  border-color: rgba(217,106,106,0.35);
  color: var(--danger);
  background: rgba(217,106,106,0.08);
}

.btn-ghost-danger:hover,
.group-manage-btn.danger:hover {
  border-color: rgba(217,106,106,0.65);
  background: rgba(217,106,106,0.13);
}

/* Forms */
.field-group input,
.field-group select,
.field-group textarea,
#app-screen :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
.modal :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
.sentinel-input-bar input,
.vx-text-input,
.sv-action-select,
.nudge-card-select,
.filter-select {
  background: #090909 !important;
  border: 1px solid var(--border-med) !important;
  border-radius: 12px;
  color: var(--text-1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
}

.field-group input::placeholder,
.field-group textarea::placeholder,
#app-screen input::placeholder,
#app-screen textarea::placeholder {
  color: var(--text-3);
}

.field-group input:focus,
.field-group select:focus,
.field-group textarea:focus,
#app-screen :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus,
.modal :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus,
.sentinel-input-bar input:focus,
.vx-text-input:focus {
  border-color: var(--gold-line-strong) !important;
  box-shadow: 0 0 0 4px rgba(212,175,55,0.11), inset 0 1px 0 rgba(255,255,255,0.045);
  outline: none;
}

.phone-flag {
  background: #0F0F0F;
  border-color: var(--border-med);
  color: var(--gold-lt);
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--gold);
}

/* Premium surfaces */
#app-screen :where(
  .view-header,
  .dashboard-command-panel,
  .founder-command-tile,
  .founder-brief-panel,
  .setup-progress-panel,
  .role-access-card,
  .dashboard-nudge-card,
  .dashboard-action-card,
  .dashboard-deep-panel,
  .individual-summary,
  .workload-preview-card,
  .workload-member,
  .vital-card,
  .group-row,
  .group-card,
  .group-setup-panel,
  .group-detail-stats,
  .feed-item,
  .msg-card,
  .attachment-box,
  .report-card,
  .analytics-update-item,
  .analytics-sync-pane,
  .report-operating-read,
  .report-table-wrap,
  .sentinel-chat-col,
  .sv-orb-card,
  .sv-action-card,
  .native-assistant-card,
  .vx-history-panel,
  .vx-history-item,
  .meeting-connect-panel,
  .assistant-flow-card,
  .assistant-setup-panel,
  .assistant-device-item,
  .locker-card,
  .locker-node,
  .locker-node-card,
  .locker-intelligence-search,
  .locker-search-results,
  .knowledge-result,
  .platinum-actions,
  .action-helper-grid,
  .notification-card,
  .notif-item,
  .notif-row,
  .notification-bar,
  .member-row,
  .invite-row,
  .settings-summary,
  .settings-section,
  .ecosystem-card,
  .ecosystem-card-toggle,
  .ecosystem-value-banner,
  .connection-health-panel,
  .ecosystem-pushback-card,
  .api-status-row,
  .setting-row,
  .secret-card,
  .subscription-current,
  .subscription-plan-card,
  .subscription-usage-card,
  .subscription-entitlements,
  .subscription-page-shell,
  .owner-workspace-card,
  .owner-summary-card,
  .owner-broadcast-panel,
  .owner-line,
  .owner-detail-row,
  .owner-mini-metric,
  .owner-image-tile,
  .connections-panel,
  .connections-status-strip,
  .connection-card,
  .connection-status-card,
  .codeflow-status-strip,
  .codeflow-setup-card,
  .codeflow-pipeline-card,
  .codeflow-review-panel,
  .codeflow-guardrail-card,
  .codeflow-review-item,
  .codeflow-step,
  .codeflow-setup-step,
  .empty-state,
  .loading-state,
  .proof-card,
  .proof-row
) {
  border-color: var(--border);
  background: var(--luxury-card-bg) !important;
  box-shadow: var(--luxury-inner-line), 0 22px 60px rgba(0,0,0,0.34);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#app-screen :where(
  .view-header,
  .dashboard-command-panel,
  .founder-brief-panel,
  .analytics-hero-card,
  .report-card.primary,
  .sentinel-chat-col,
  .sv-orb-card,
  .locker-intelligence-search,
  .codeflow-setup-card,
  .codeflow-pipeline-card,
  .subscription-current,
  .subscription-plan-card.active,
  .settings-summary,
  .owner-broadcast-panel
) {
  border-color: rgba(212,175,55,0.2);
  background: var(--luxury-panel-bg) !important;
  box-shadow: var(--luxury-inner-line), 0 30px 82px rgba(0,0,0,0.42);
}

#app-screen :where(.group-card, .dashboard-action-card, .workload-preview-card, .locker-node, .locker-card, .sv-action-card, .subscription-plan-card, .ecosystem-card, .codeflow-review-item, .knowledge-result, .founder-command-tile, .report-card, .owner-workspace-card):hover {
  border-color: rgba(212,175,55,0.38);
  box-shadow: var(--luxury-inner-line), 0 30px 80px rgba(0,0,0,0.48);
  transform: translateY(-2px);
}

#app-screen :where(.group-card, .dashboard-action-card, .workload-preview-card, .locker-node, .locker-card, .sv-action-card, .subscription-plan-card, .ecosystem-card, .codeflow-review-item, .knowledge-result)::before {
  background: linear-gradient(120deg, rgba(255,255,255,0.08), transparent 34%, rgba(212,175,55,0.055));
}

#app-screen .view {
  padding: 34px 36px;
}

#app-screen .view-header {
  padding: 24px;
  border-radius: 22px;
}

.view-title {
  font-size: 2.12rem;
}

.view-sub {
  max-width: 760px;
  color: var(--text-2);
}

.section-header h3,
.vital-label,
.stat-label,
.nav-label,
.field-group label {
  color: var(--text-3);
}

.vitals-row {
  grid-template-columns: repeat(5, minmax(170px, 1fr));
  gap: 14px;
}

.vital-card {
  min-height: 164px;
  padding: 22px;
}

.vital-card::before {
  top: 0;
  bottom: auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,0.7), transparent);
}

.vital-card.accent .vital-val,
.stat-val,
.owner-summary-card strong,
.owner-mini-metric strong,
.workload-stat-card strong,
.founder-command-tile strong,
.founder-brief-stat strong {
  color: var(--gold-lt);
}

.vital-card.danger .vital-val,
.founder-command-tile.danger strong,
.founder-brief-stat.danger strong {
  color: var(--danger);
}

.vital-card.success .vital-val,
.founder-brief-stat.success strong {
  color: var(--success);
}

.vital-card.warn .vital-val,
.founder-command-tile.warn strong,
.founder-brief-stat.warn strong {
  color: var(--warn);
}

.dashboard-command-panel {
  gap: 22px;
  padding: 24px;
}

.dashboard-command-main strong {
  font-size: 1.42rem;
  color: var(--text-1);
}

.dashboard-decision-chip,
.founder-brief-stat,
.workload-stat-card,
.owner-summary-card,
.owner-mini-metric,
.product-stat-grid > div {
  border-color: var(--border);
  background: rgba(255,255,255,0.025);
}

.dashboard-decision-chip strong,
.setup-progress-head strong,
.connection-status-badge,
.ws-role-badge,
.nav-gate,
.invite-title span,
.nod-number-val {
  color: var(--gold-lt);
}

.setup-progress-bar span,
.progress-bar-fill,
.group-completion-fill,
.group-card-bar-fill,
.workload-loadbar span,
.ecosystem-meter span,
.subscription-usage-fill,
.backend-loading-strip span {
  background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-lt)) !important;
}

/* Preserve semantic meaning with muted colors */
.ribbon-on_track,
.badge-green,
.role-admin,
.directive-badge,
.connection-health-pill.connected,
.setup-progress-step.done,
.api-status-row.ok,
.workload-chip.low,
.report-status-pill.complete {
  color: var(--success);
}

.ribbon-stagnant,
.badge-commitment,
.workload-due-badge.soon,
.connection-health-pill.waiting,
.setup-progress-step.todo,
.workload-chip.medium,
.report-status-pill.watch {
  color: var(--warn);
}

.ribbon-at_risk,
.badge-risk,
.badge-red,
.msg-card.msg-risk,
.workload-due-badge.late,
.connection-health-pill.issue,
.workload-chip.high,
.report-status-pill.risk {
  color: var(--danger);
}

.badge-blue,
.badge-purple,
.badge-milestone,
.knowledge-result-type.is-drive {
  background: rgba(212,175,55,0.1) !important;
  color: var(--gold-lt) !important;
}

.codeflow-setup-card,
.codeflow-wizard,
.codeflow-guardrail-card,
.locker-intelligence-search {
  background:
    linear-gradient(145deg, rgba(212,175,55,0.055), transparent 46%),
    var(--surface) !important;
}

.founder-command-tile.setup,
.connection-health-pill.quiet,
.workload-source-badge {
  border-color: rgba(255,255,255,0.12);
}

.connection-health-pill.quiet b {
  background: var(--text-3);
}

/* Sentinel and voice */
#app-screen #view-sentinel .sentinel-master-grid {
  grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
}

.sentinel-chat-col,
.sv-orb-card {
  border-radius: 22px !important;
}

.sentinel-feed {
  scrollbar-color: rgba(212,175,55,0.45) transparent;
}

.sentinel-bubble,
.sv-response-inline,
.vx-text-bar,
.meeting-connect-panel,
.native-assistant-quick-status span,
.vx-history-item {
  border-color: var(--border);
  background: rgba(255,255,255,0.025);
}

.sentinel-msg.user .sentinel-bubble {
  background: rgba(212,175,55,0.12);
  border-color: rgba(212,175,55,0.36);
  color: var(--text-1);
}

.vx-orb,
.voice-orb {
  border-color: rgba(212,175,55,0.38);
  background:
    radial-gradient(circle at 50% 34%, rgba(230,199,102,0.2), transparent 48%),
    #0C0C0C;
  color: var(--gold-lt);
  box-shadow: 0 24px 70px rgba(0,0,0,0.52), inset 0 1px 0 rgba(255,255,255,0.08);
}

.vx-ring {
  border-color: rgba(212,175,55,0.16);
}

.vx-orb.recording,
.voice-orb.recording {
  border-color: rgba(217,106,106,0.6);
  background: rgba(217,106,106,0.12);
}

/* Modals, overlays, states */
.modal-backdrop,
.overlay-backdrop,
#confirm-overlay,
.lightbox-backdrop {
  background:
    radial-gradient(circle at 50% 0%, rgba(212,175,55,0.12), transparent 34%),
    rgba(0,0,0,0.76);
  backdrop-filter: blur(18px) saturate(115%);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
}

.modal {
  border-radius: 22px;
}

.modal-close,
.lightbox-close,
.metric-info-close {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  color: var(--text-2);
}

.modal-close:hover,
.lightbox-close:hover,
.metric-info-close:hover {
  border-color: rgba(212,175,55,0.5);
  color: var(--gold-lt);
}

.loading-state,
.empty-state,
.view-loading-card {
  color: var(--text-2);
}

.spinner,
.spinner.mini,
.view-loading-spinner {
  border-color: rgba(255,255,255,0.12);
  border-top-color: var(--gold-lt);
}

#toast-container .toast,
.toast {
  border: 1px solid var(--border-med);
  background: rgba(10,10,10,0.9);
  color: var(--text-1);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.toast.success { border-color: rgba(121,174,139,0.35); }
.toast.error { border-color: rgba(217,106,106,0.4); }
.toast.warn { border-color: rgba(207,161,74,0.4); }

/* Footer and install affordances */
.auth-footer,
.pwa-install-banner,
.backend-loading-pill {
  border: 1px solid var(--border);
  background: rgba(10,10,10,0.76);
  box-shadow: var(--luxury-inner-line), 0 18px 50px rgba(0,0,0,0.42);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
}

.setup-help-fab,
.sidebar-restore-btn {
  background:
    linear-gradient(145deg, rgba(212,175,55,0.16), rgba(10,10,10,0.96)),
    #090909;
  border-color: rgba(212,175,55,0.44);
  color: var(--gold-lt);
}

/* Mobile refinement */
@media (max-width: 1180px) {
  .auth-container {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
    gap: 34px;
  }

  .auth-showcase h1 {
    font-size: 3.7rem;
  }

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

@media (max-width: 860px) {
  .auth-container {
    min-height: 0;
    grid-template-columns: 1fr;
    width: min(100% - 28px, 560px);
    gap: 24px;
    padding-top: 96px;
  }

  .auth-brand {
    left: 0;
  }

  .auth-showcase {
    padding-top: 0;
  }

  .auth-showcase h1 {
    font-size: 3rem;
  }

  .auth-showcase p {
    font-size: 0.98rem;
  }

  .product-frame {
    border-radius: 22px;
  }

  .product-stat-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  body::before {
    opacity: 0.18;
  }

  #app-screen .view {
    padding: 18px 14px 28px;
  }

  #app-screen .view-header {
    padding: 18px;
    border-radius: 18px;
  }

  .view-title {
    font-size: 1.72rem;
  }

  .vitals-row {
    grid-template-columns: 1fr;
  }

  .vital-card {
    min-height: 138px;
  }

  .topbar {
    padding: 12px 14px;
  }

  #app-screen .sidebar {
    background: rgba(5,5,5,0.96) !important;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
  }
}

@media (max-width: 430px) {
  .auth-container {
    width: min(100% - 22px, 420px);
    padding-top: 88px;
  }

  .auth-showcase h1 {
    font-size: 2.42rem;
  }

  .auth-showcase p {
    font-size: 0.92rem;
  }

  .auth-card {
    padding: 26px 20px;
  }

  .product-frame-body {
    padding: 14px;
  }

  .product-panel {
    padding: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

body.pref-reduced-motion *,
body.pref-reduced-motion *::before,
body.pref-reduced-motion *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
  transition-duration: 0.001ms !important;
}

/* Final cascade locks for the luxury auth presentation. */
#auth-screen .auth-container {
  width: min(1180px, calc(100% - 40px));
  max-width: none;
  min-height: min(760px, calc(100vh - 64px));
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, 460px);
  align-items: center;
  gap: 56px;
  padding: 42px 0;
}

#auth-screen .auth-showcase {
  width: auto;
  min-width: 0;
}

#auth-screen .auth-showcase h1 {
  max-width: 650px;
}

#auth-screen .auth-card {
  width: 100%;
  max-width: 460px;
  justify-self: end;
}

#auth-screen .home-signal-strip {
  width: min(100%, 620px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 22px;
}

#auth-screen .home-signal-strip > div {
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.055), rgba(255,255,255,0.015)),
    rgba(10,10,10,0.58);
  box-shadow: var(--luxury-inner-line), 0 16px 42px rgba(0,0,0,0.26);
}

#auth-screen .home-signal-strip span,
#auth-screen .home-signal-strip strong {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

#auth-screen .home-signal-strip span {
  margin-bottom: 6px;
  color: var(--text-3);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

#auth-screen .home-signal-strip strong {
  color: var(--text-1);
  font-size: 0.95rem;
  line-height: 1.25;
}

html[data-theme="light"] #auth-screen .home-signal-strip > div {
  background: rgba(255,255,255,0.66);
  border-color: var(--border-med);
  box-shadow: var(--luxury-inner-line), 0 16px 34px rgba(64,52,28,0.08);
}

@media (max-width: 1180px) {
  #auth-screen .auth-container {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
    gap: 34px;
  }
}

@media (max-width: 860px) {
  #auth-screen .auth-container {
    width: min(100% - 28px, 560px);
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 24px;
    padding-top: 96px;
  }

  #auth-screen .auth-card {
    max-width: none;
    justify-self: stretch;
  }

  #auth-screen .auth-showcase {
    gap: 22px;
  }

  #auth-screen .product-frame {
    max-height: 380px;
    overflow: hidden;
  }
}

@media (max-width: 430px) {
  #auth-screen .auth-container {
    width: min(100% - 22px, 420px);
    padding-top: 88px;
  }

  #auth-screen .product-frame {
    max-height: 300px;
  }
}

@media (max-width: 340px) {
  #auth-screen .product-frame {
    max-height: 270px;
  }
}

#auth-screen .btn-primary,
#app-screen .btn-primary,
.modal .btn-primary,
.onboarding-modal .btn-primary,
.pilot-terms-modal .btn-primary,
#app-screen .dashboard-command-action {
  background: var(--gold-metal) !important;
  border-color: rgba(230,199,102,0.72) !important;
  color: var(--text-inv) !important;
  box-shadow: 0 14px 32px rgba(212,175,55,0.18), inset 0 1px 0 rgba(255,255,255,0.32) !important;
}

#auth-screen .btn-primary:hover,
#app-screen .btn-primary:hover,
.modal .btn-primary:hover,
.onboarding-modal .btn-primary:hover,
.pilot-terms-modal .btn-primary:hover,
#app-screen .dashboard-command-action:hover {
  filter: brightness(1.06);
  border-color: rgba(230,199,102,0.9) !important;
  transform: translateY(-2px);
  box-shadow: 0 18px 42px rgba(212,175,55,0.22), inset 0 1px 0 rgba(255,255,255,0.4) !important;
}

#auth-screen .btn-primary:active,
#app-screen .btn-primary:active,
.modal .btn-primary:active,
.onboarding-modal .btn-primary:active,
.pilot-terms-modal .btn-primary:active,
#app-screen .dashboard-command-action:active {
  transform: scale(0.98);
}

/* Final light-mode and positioning stabilization. */
#auth-screen {
  overflow-x: hidden;
  overflow-y: auto;
}

.view.view-loading > :not(.view-loading-overlay) {
  visibility: visible !important;
  opacity: 0.36;
  pointer-events: none !important;
  user-select: none;
}

.view.view-loading > .view-loading-overlay {
  background:
    radial-gradient(circle at 50% 42%, rgba(212,175,55,0.1), transparent 28%),
    rgba(0,0,0,0.42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

html[data-theme="light"] {
  --bg: #F7F4EC;
  --bg-2: #EEE8DB;
  --bg-3: #FFFFFF;
  --bg-4: #E6DECE;
  --surface: rgba(255,255,255,0.88);
  --surface-2: rgba(250,247,240,0.94);
  --surface-3: rgba(242,236,224,0.96);
  --border: rgba(28,24,17,0.11);
  --border-med: rgba(28,24,17,0.18);
  --text-1: #15120C;
  --text-2: #4B4437;
  --text-3: #766E5E;
  --text-inv: #090909;
  --shadow: 0 22px 70px rgba(64,52,28,0.14), 0 0 0 1px rgba(255,255,255,0.7);
  --shadow-lg: 0 34px 100px rgba(64,52,28,0.18), 0 0 0 1px rgba(255,255,255,0.8);
  --luxury-inner-line: inset 0 1px 0 rgba(255,255,255,0.86);
  --luxury-card-bg:
    linear-gradient(145deg, rgba(255,255,255,0.94), rgba(255,255,255,0.66) 44%, rgba(212,175,55,0.09)),
    var(--surface);
  --luxury-panel-bg:
    radial-gradient(circle at 50% 0%, rgba(212,175,55,0.12), transparent 38%),
    linear-gradient(145deg, rgba(255,255,255,0.98), rgba(255,255,255,0.7) 52%),
    var(--surface);
}

html[data-theme="light"],
html[data-theme="light"] body {
  background: #F7F4EC;
}

html[data-theme="light"] body {
  color: var(--text-1);
  background:
    radial-gradient(circle at 50% -12%, rgba(212,175,55,0.24), transparent 34%),
    radial-gradient(circle at 86% 8%, rgba(255,255,255,0.92), transparent 32%),
    linear-gradient(180deg, #F9F6EF 0%, #ECE5D6 54%, #F8F4EA 100%) !important;
}

html[data-theme="light"] body::before {
  background-image:
    linear-gradient(rgba(28,24,17,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28,24,17,0.028) 1px, transparent 1px);
  opacity: 0.28;
}

html[data-theme="light"] #auth-screen {
  background:
    radial-gradient(circle at 50% 6%, rgba(212,175,55,0.24), transparent 34%),
    radial-gradient(circle at 12% 74%, rgba(255,255,255,0.8), transparent 30%),
    #F7F4EC !important;
}

html[data-theme="light"] #app-screen,
html[data-theme="light"] #app-screen .main {
  background:
    radial-gradient(circle at 48% -8%, rgba(212,175,55,0.16), transparent 32%),
    linear-gradient(180deg, #F9F6EF 0%, #EEE7D9 48%, #F7F4EC 100%) !important;
}

html[data-theme="light"] .auth-card,
html[data-theme="light"] .product-frame,
html[data-theme="light"] .modal,
html[data-theme="light"] .onboarding-modal,
html[data-theme="light"] .pilot-terms-modal,
html[data-theme="light"] #app-screen :where(
  .view-header,
  .dashboard-command-panel,
  .vital-card,
  .dashboard-action-card,
  .dashboard-deep-panel,
  .individual-summary,
  .workload-preview-card,
  .workload-member,
  .group-card,
  .group-row,
  .report-card,
  .analytics-hero-card,
  .sentinel-chat-col,
  .sv-orb-card,
  .sv-action-card,
  .locker-card,
  .locker-node,
  .locker-node-card,
  .notification-card,
  .notif-item,
  .settings-summary,
  .settings-section,
  .ecosystem-card,
  .connection-card,
  .codeflow-setup-card,
  .codeflow-pipeline-card,
  .codeflow-review-panel,
  .subscription-current,
  .subscription-plan-card,
  .empty-state,
  .loading-state
) {
  background: var(--luxury-card-bg) !important;
  border-color: var(--border-med) !important;
  color: var(--text-1) !important;
  box-shadow: var(--luxury-inner-line), 0 28px 72px rgba(64,52,28,0.14) !important;
}

html[data-theme="light"] .product-panel,
html[data-theme="light"] .product-stat-grid > div,
html[data-theme="light"] .product-rail,
html[data-theme="light"] .dashboard-decision-chip,
html[data-theme="light"] .founder-brief-stat,
html[data-theme="light"] .workload-stat-card,
html[data-theme="light"] #app-screen :where(.sidebar-brand, .sidebar-user, .topbar-beta-mark, .identity-pill, .topbar-plan-btn, .ist-clock, .search-wrap, .theme-btn, .icon-btn, .topbar-avatar, .dashboard-mode-tabs, .settings-subtabs, .admin-tabs, .locker-toolbar, .sv-notif-types) {
  background: rgba(255,255,255,0.66) !important;
  border-color: var(--border) !important;
  color: var(--text-1) !important;
  box-shadow: var(--luxury-inner-line), 0 14px 34px rgba(64,52,28,0.08) !important;
}

html[data-theme="light"] #app-screen .sidebar {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.88), rgba(238,231,217,0.94)),
    #F5F0E5 !important;
  border-right-color: var(--border-med) !important;
  box-shadow: 18px 0 56px rgba(64,52,28,0.12), inset -1px 0 0 rgba(255,255,255,0.8) !important;
}

html[data-theme="light"] #app-screen .topbar {
  background: rgba(249,246,239,0.78) !important;
  border-bottom-color: var(--border) !important;
  box-shadow: 0 18px 56px rgba(64,52,28,0.1), inset 0 1px 0 rgba(255,255,255,0.88) !important;
}

html[data-theme="light"] :where(.brand-name, .auth-showcase h1, .auth-welcome h1, .view-title, .dashboard-command-main strong, .modal-title, .section-header h3) {
  color: var(--text-1) !important;
}

html[data-theme="light"] :where(.auth-showcase p, .auth-welcome p, .field-hint, .auth-legal, .view-sub, .dashboard-command-main p, .modal-desc, .nav-label) {
  color: var(--text-2) !important;
}

html[data-theme="light"] :where(.auth-kicker, .brand-tagline, .dashboard-command-kicker, .codeflow-kicker, .report-kicker, .stat-val, .vital-card.accent .vital-val) {
  color: var(--gold-deep) !important;
}

html[data-theme="light"] .auth-showcase h1 span {
  color: transparent !important;
  background: var(--gold-metal) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

html[data-theme="light"] :where(.field-group input, .field-group select, .field-group textarea, #app-screen input:not([type="checkbox"]):not([type="radio"]), #app-screen select, #app-screen textarea, .modal input:not([type="checkbox"]):not([type="radio"]), .modal select, .modal textarea) {
  background: rgba(255,255,255,0.82) !important;
  border-color: var(--border-med) !important;
  color: var(--text-1) !important;
}

html[data-theme="light"] :where(.btn-secondary, .btn-ghost, .btn-google, .btn-copy, .nudge-card-btn, .sv-tap-btn, .meeting-connect-btn, .filter-btn, .locker-source-chip, .platinum-action-btn, .scope-btn, .workload-filter, .group-manage-btn) {
  background: rgba(255,255,255,0.7) !important;
  border-color: var(--border-med) !important;
  color: var(--text-1) !important;
}

html[data-theme="light"] #app-screen .nav-btn {
  color: var(--text-2) !important;
}

html[data-theme="light"] #app-screen .nav-btn:hover {
  background: rgba(212,175,55,0.1) !important;
  color: var(--text-1) !important;
}

html[data-theme="light"] #app-screen .nav-btn.active {
  border-color: rgba(143,107,34,0.38) !important;
  background:
    linear-gradient(90deg, rgba(212,175,55,0.2), rgba(255,255,255,0.54)),
    rgba(255,255,255,0.68) !important;
  color: var(--gold-deep) !important;
  box-shadow: inset 3px 0 0 var(--gold), 0 16px 34px rgba(64,52,28,0.1) !important;
}

html[data-theme="light"] .view.view-loading > .view-loading-overlay {
  background:
    radial-gradient(circle at 50% 42%, rgba(212,175,55,0.16), transparent 30%),
    rgba(247,244,236,0.58);
}

html[data-theme="light"] .auth-footer {
  border-color: rgba(26,22,15,0.1);
  background:
    linear-gradient(0deg, rgba(247,244,236,0.92) 0%, rgba(247,244,236,0.68) 62%, transparent 100%);
  color: rgba(54,47,36,0.54);
  box-shadow: 0 -18px 42px rgba(64,52,28,0.08);
}

html[data-theme="light"] .theme-mini {
  color: var(--gold-deep);
}

@media (max-width: 860px) {
  #auth-screen {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-bottom: 24px;
  }

  .auth-footer {
    position: static;
    width: min(100% - 22px, 560px);
    margin: 8px auto 0;
    border-radius: 16px;
    background: rgba(10,10,10,0.62);
  }

  html[data-theme="light"] .auth-footer {
    background: rgba(255,255,255,0.66);
  }
}

@media (max-width: 560px) {
  #auth-screen {
    min-height: 100dvh;
    padding: 18px 0 20px;
  }

  #auth-screen .auth-container {
    width: 100%;
    padding: 12px 0 0;
    gap: 18px;
  }

  #auth-screen .auth-brand,
  #auth-screen .auth-showcase,
  #auth-screen .auth-card {
    width: min(calc(100% - 28px), 360px);
    margin-left: auto;
    margin-right: auto;
  }

  #auth-screen .auth-brand {
    position: static;
    justify-self: start;
  }

  #auth-screen .brand-name {
    font-size: 1.45rem;
  }

  #auth-screen .brand-tagline {
    font-size: 0.66rem;
    letter-spacing: 0.04em;
  }

  #auth-screen .auth-kicker {
    max-width: 100%;
    min-height: 24px;
    padding: 0 9px;
    font-size: 0.62rem;
    letter-spacing: 0.1em;
  }

  #auth-screen .auth-showcase {
    padding-top: 0;
    gap: 14px;
  }

  #auth-screen .auth-showcase h1 {
    max-width: 100%;
    margin-top: 14px;
    font-size: 2.08rem;
    line-height: 0.98;
  }

  #auth-screen .auth-showcase p {
    max-width: 100%;
    margin-top: 14px;
    font-size: 0.9rem;
    line-height: 1.52;
  }

  #auth-screen .home-signal-strip {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 16px;
  }

  #auth-screen .home-signal-strip > div {
    padding: 11px 12px;
  }

  #auth-screen .product-frame {
    display: none;
  }

  #auth-screen .auth-card {
    padding: 24px 18px;
    border-radius: 22px;
  }

  .auth-footer {
    width: min(calc(100% - 28px), 360px);
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 10px 12px;
    font-size: 0.72rem;
  }
}

@media (max-width: 340px) {
  #auth-screen .auth-showcase h1 {
    font-size: 1.9rem;
  }

  #auth-screen .auth-card {
    padding: 22px 14px;
  }
}

/* Final Sentinel mobile repair. This sits at the tail so later polish blocks cannot
   reintroduce the desktop two-column chat layout on phones. */
@media (max-width: 980px) {
  #app-screen #view-sentinel .sentinel-master-grid {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px;
  }

  #app-screen #view-sentinel .sentinel-chat-col,
  #app-screen #view-sentinel .sentinel-voice-col {
    width: 100%;
    min-width: 0;
  }

  #app-screen #view-sentinel .sentinel-chat-col {
    height: clamp(380px, 64dvh, 560px);
    min-height: 380px;
    max-height: none;
  }

  #app-screen #view-sentinel .sentinel-voice-col {
    max-height: none;
    overflow: visible;
  }
}

@media (max-width: 560px) {
  #app-screen #view-sentinel {
    padding-left: 10px;
    padding-right: 10px;
  }

  #app-screen #view-sentinel .view-header {
    gap: 10px;
  }

  #app-screen #view-sentinel .sentinel-chat-col {
    height: max(430px, calc(100dvh - 178px));
    min-height: 430px;
    border-radius: 18px !important;
  }

  #app-screen #view-sentinel .sentinel-chat-header,
  #app-screen #view-sentinel .sentinel-input-bar {
    padding: 11px;
  }

  #app-screen #view-sentinel .sentinel-feed {
    min-height: 0;
    padding: 12px;
  }

  #app-screen #view-sentinel .prompt-chips-inline {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  #app-screen #view-sentinel .chip-sm {
    width: 100%;
    min-width: 0;
    padding-inline: 8px;
  }

  #app-screen #view-sentinel .sentinel-bubble {
    max-width: calc(100vw - 96px);
    overflow-wrap: anywhere;
  }

  #app-screen #view-sentinel .sentinel-input-bar input {
    min-width: 0;
  }
}

/* Founder Dashboard command center refinement. */
#app-screen #view-dashboard.view.active {
  width: min(100%, 1280px);
  max-width: 1280px;
  margin-inline: auto;
  padding: 34px clamp(22px, 3vw, 42px) 48px;
  gap: 0;
}

#app-screen #view-dashboard > .view-header { order: 1; }
#app-screen #view-dashboard > .dashboard-command-panel { order: 2; }
#app-screen #view-dashboard > .dashboard-vitals-head { order: 3; }
#app-screen #view-dashboard > .vitals-row { order: 4; }
#app-screen #view-dashboard > .founder-brief-panel { order: 5; }
#app-screen #view-dashboard > .dashboard-insights-panel { order: 6; }
#app-screen #view-dashboard > .role-access-card { order: 7; }
#app-screen #view-dashboard > .dashboard-nudge-card { order: 8; }
#app-screen #view-dashboard > .metric-info-popover { order: 9; }
#app-screen #view-dashboard > .dashboard-deep-panel { order: 10; }

#app-screen #view-dashboard > .view-header {
  margin: 0 0 26px !important;
  padding: 0 !important;
  align-items: flex-end;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#app-screen #view-dashboard > .view-header::before,
#app-screen #view-dashboard > .view-header::after {
  display: none !important;
}

#app-screen #view-dashboard .dashboard-intro {
  min-width: min(100%, 420px);
}

#app-screen #view-dashboard .view-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(1.76rem, 1.44rem + 1vw, 2.42rem);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: 0;
}

#app-screen #view-dashboard .view-sub {
  max-width: 650px;
  margin-top: 8px;
  color: var(--text-2);
  font-size: 0.94rem;
  line-height: 1.5;
  letter-spacing: 0;
}

#app-screen #view-dashboard .dashboard-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}

#app-screen #view-dashboard .dashboard-header-actions > .btn-secondary {
  min-height: 38px;
  border-radius: 8px;
}

#app-screen #view-dashboard .dashboard-mode-tabs {
  margin: 0;
  padding: 3px;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,0.035) !important;
  box-shadow: none !important;
}

#app-screen #view-dashboard .dashboard-mode-tab {
  min-width: 84px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text-3);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0;
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

#app-screen #view-dashboard .dashboard-mode-tab:hover {
  color: var(--text-1);
  background: rgba(255,255,255,0.045);
}

#app-screen #view-dashboard .dashboard-mode-tab.active {
  border-color: rgba(212,175,55,0.38);
  background: rgba(212,175,55,0.14) !important;
  color: var(--gold-lt) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

#app-screen #view-dashboard .dashboard-command-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(310px, 0.54fr);
  grid-template-areas:
    "main side"
    "action side";
  align-items: stretch;
  gap: 26px 34px;
  min-height: 218px;
  margin: 0 0 34px;
  padding: clamp(26px, 3vw, 36px);
  border: 1px solid rgba(212,175,55,0.24) !important;
  border-radius: 8px !important;
  background:
    radial-gradient(circle at 16% 0%, rgba(212,175,55,0.12), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,0.052), rgba(255,255,255,0.012) 54%),
    #0E0E0E !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.065), 0 28px 78px rgba(0,0,0,0.42) !important;
}

#app-screen #view-dashboard .dashboard-command-panel::after {
  opacity: 0.42;
  background:
    radial-gradient(circle at 6% 0%, rgba(255,255,255,0.13), transparent 26%),
    radial-gradient(circle at 92% 100%, rgba(212,175,55,0.13), transparent 30%);
}

#app-screen #view-dashboard .dashboard-command-main {
  grid-area: main;
  gap: 10px;
  align-content: center;
}

#app-screen #view-dashboard .dashboard-command-kicker,
#app-screen #view-dashboard .dashboard-command-meta,
#app-screen #view-dashboard .dashboard-decision-chip span,
#app-screen #view-dashboard .dashboard-section-head span,
#app-screen #view-dashboard .dashboard-section-head em {
  letter-spacing: 0;
}

#app-screen #view-dashboard .dashboard-command-kicker {
  color: var(--gold-lt);
  font-size: 0.72rem;
}

#app-screen #view-dashboard .dashboard-command-main strong {
  max-width: 780px;
  color: var(--text-1) !important;
  font-size: clamp(1.56rem, 1.16rem + 1.35vw, 2.32rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: 0;
}

#app-screen #view-dashboard .dashboard-command-main p {
  max-width: 760px;
  color: var(--text-2) !important;
  font-size: clamp(0.96rem, 0.92rem + 0.18vw, 1.06rem);
  line-height: 1.58;
}

#app-screen #view-dashboard .dashboard-command-meta {
  color: var(--text-3);
  font-size: 0.72rem;
}

#app-screen #view-dashboard .dashboard-command-side {
  grid-area: side;
  align-self: end;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding: 0 0 0 24px;
  border-top: 0;
  border-left: 1px solid rgba(255,255,255,0.09);
}

#app-screen #view-dashboard .dashboard-decision-chip {
  min-height: 96px;
  padding: 10px 14px;
  border: 0 !important;
  border-left: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#app-screen #view-dashboard .dashboard-decision-chip:first-child {
  border-left: 0 !important;
}

#app-screen #view-dashboard .dashboard-decision-chip span {
  color: var(--text-3);
  font-size: 0.66rem;
}

#app-screen #view-dashboard .dashboard-decision-chip strong {
  color: var(--text-1);
  font-size: 1.18rem;
  font-weight: 900;
  letter-spacing: 0;
}

#app-screen #view-dashboard .dashboard-decision-chip.danger strong {
  color: var(--danger);
}

#app-screen #view-dashboard .dashboard-decision-chip.warn strong {
  color: var(--warn);
}

#app-screen #view-dashboard .dashboard-command-action {
  grid-area: action;
  justify-self: start;
  align-self: start;
  min-width: 148px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(212,175,55,0.42) !important;
  border-radius: 8px !important;
  background: rgba(212,175,55,0.12) !important;
  color: var(--gold-lt) !important;
  box-shadow: none !important;
  font-size: 0.86rem;
  font-weight: 850;
  letter-spacing: 0;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

#app-screen #view-dashboard .dashboard-command-action::after {
  content: " ->";
}

#app-screen #view-dashboard .dashboard-command-action:hover {
  border-color: rgba(230,199,102,0.76) !important;
  background: var(--gold-metal) !important;
  color: #090909 !important;
  filter: none;
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(212,175,55,0.16) !important;
}

#app-screen #view-dashboard .dashboard-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  margin: 0 0 14px;
}

#app-screen #view-dashboard .dashboard-section-head span {
  color: var(--text-2);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

#app-screen #view-dashboard .dashboard-section-head em {
  color: var(--text-3);
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 750;
}

#app-screen #view-dashboard .vitals-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin: 0 0 34px;
  padding: 22px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.036), rgba(255,255,255,0.012)),
    rgba(17,17,17,0.62);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.045);
}

#app-screen #view-dashboard .vital-card {
  min-height: 132px;
  min-width: 0;
  padding: 4px clamp(14px, 1.7vw, 22px);
  gap: 10px;
  border: 0 !important;
  border-left: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: none !important;
}

#app-screen #view-dashboard .vital-card:first-child {
  border-left: 0 !important;
}

#app-screen #view-dashboard .vital-card:hover {
  border-color: rgba(255,255,255,0.07) !important;
  background: rgba(255,255,255,0.035) !important;
  box-shadow: none !important;
  transform: translateY(-1px) !important;
}

#app-screen #view-dashboard .vital-card::before,
#app-screen #view-dashboard .vital-card::after {
  display: none !important;
}

#app-screen #view-dashboard .vital-label {
  padding-right: 32px;
  color: var(--text-3) !important;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

#app-screen #view-dashboard .vital-val {
  display: block;
  color: var(--text-1) !important;
  font-size: clamp(2rem, 1.62rem + 1.1vw, 2.72rem);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: 0;
}

#app-screen #view-dashboard .vital-val::after {
  content: "";
  display: block;
  width: min(148px, 100%);
  height: 2px;
  margin-top: 16px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,0.36), rgba(255,255,255,0.08));
}

#app-screen #view-dashboard .vital-card.accent .vital-val::after {
  background: linear-gradient(90deg, rgba(212,175,55,0.9), rgba(212,175,55,0.12));
}

#app-screen #view-dashboard .vital-card.alignment .vital-val::after {
  background: linear-gradient(90deg, rgba(141,190,255,0.74), rgba(141,190,255,0.08));
}

#app-screen #view-dashboard .vital-card.health .vital-val::after,
#app-screen #view-dashboard .vital-card.success .vital-val::after {
  background: linear-gradient(90deg, rgba(121,174,139,0.82), rgba(121,174,139,0.09));
}

#app-screen #view-dashboard .vital-card.danger .vital-val::after {
  background: linear-gradient(90deg, rgba(217,106,106,0.84), rgba(217,106,106,0.1));
}

#app-screen #view-dashboard .vital-card.warn .vital-val::after {
  background: linear-gradient(90deg, rgba(207,161,74,0.86), rgba(207,161,74,0.1));
}

#app-screen #view-dashboard .vital-insight {
  margin-top: auto;
  color: var(--text-3) !important;
  font-size: 0.78rem;
  line-height: 1.42;
}

#app-screen #view-dashboard .metric-info-btn {
  top: 2px;
  right: 14px;
  color: var(--text-3);
  transition: color 0.18s ease, background 0.18s ease;
}

#app-screen #view-dashboard .metric-info-btn:hover,
#app-screen #view-dashboard .metric-info-btn:focus-visible {
  color: var(--gold-lt);
  background: rgba(212,175,55,0.1);
}

#app-screen #view-dashboard .founder-brief-panel {
  grid-template-columns: minmax(0, 1fr) minmax(330px, 0.7fr);
  gap: 18px 24px;
  margin: 0 0 32px;
  padding: 20px;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.032), rgba(255,255,255,0.012)),
    rgba(15,15,15,0.76) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.045) !important;
}

#app-screen #view-dashboard .founder-brief-main {
  gap: 7px;
}

#app-screen #view-dashboard .founder-brief-main h3 {
  font-size: clamp(1rem, 0.94rem + 0.28vw, 1.16rem);
  font-weight: 900;
  letter-spacing: 0;
}

#app-screen #view-dashboard .founder-brief-main p {
  max-width: 680px;
  color: var(--text-2);
  font-size: 0.84rem;
  line-height: 1.5;
}

#app-screen #view-dashboard .founder-brief-actions {
  margin-top: 6px;
}

#app-screen #view-dashboard .founder-brief-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  align-content: center;
}

#app-screen #view-dashboard .founder-brief-stat {
  min-height: 56px;
  padding: 4px 12px;
  border: 0 !important;
  border-left: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#app-screen #view-dashboard .founder-brief-stat:first-child {
  border-left: 0 !important;
}

#app-screen #view-dashboard .founder-brief-stat span,
#app-screen #view-dashboard .founder-command-tile span,
#app-screen #view-dashboard .founder-command-tile em {
  letter-spacing: 0;
}

#app-screen #view-dashboard .founder-brief-stat strong {
  font-size: 1.24rem;
  font-weight: 900;
  letter-spacing: 0;
}

#app-screen #view-dashboard .founder-command-strip {
  grid-column: 1;
  grid-row: 2;
  gap: 8px;
  margin: 2px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.07);
}

#app-screen #view-dashboard .founder-command-tile {
  min-height: 60px;
  padding: 10px 12px;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,0.022) !important;
  box-shadow: none !important;
}

#app-screen #view-dashboard .founder-command-tile:hover {
  border-color: rgba(212,175,55,0.24) !important;
  background: rgba(255,255,255,0.042) !important;
  transform: translateY(-1px);
}

#app-screen #view-dashboard .founder-command-tile strong {
  color: var(--text-1);
  font-size: 1.18rem;
  letter-spacing: 0;
}

#app-screen #view-dashboard .founder-command-tile.danger strong,
#app-screen #view-dashboard .founder-brief-stat.danger strong {
  color: var(--danger);
}

#app-screen #view-dashboard .founder-command-tile.warn strong,
#app-screen #view-dashboard .founder-brief-stat.warn strong {
  color: var(--warn);
}

#app-screen #view-dashboard .founder-command-tile.setup strong,
#app-screen #view-dashboard .founder-brief-stat.success strong {
  color: var(--success);
}

#app-screen #view-dashboard .setup-progress-panel {
  grid-column: 2;
  grid-row: 2;
  gap: 9px;
  padding: 14px 0 0;
  border: 0 !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#app-screen #view-dashboard .setup-progress-head {
  font-size: 0.72rem;
  letter-spacing: 0;
}

#app-screen #view-dashboard .setup-progress-bar {
  height: 6px;
  border: 0;
  background: rgba(255,255,255,0.055);
}

#app-screen #view-dashboard .setup-progress-step {
  min-height: 28px;
  border-color: rgba(255,255,255,0.08);
  border-radius: 8px;
  background: rgba(255,255,255,0.026);
}

#app-screen #view-dashboard .dashboard-insights-panel {
  margin: 0 0 24px;
  padding: 24px 0 26px;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

#app-screen #view-dashboard .dashboard-insights-panel .dashboard-section-head {
  margin-bottom: 18px;
}

#app-screen #view-dashboard .dashboard-action-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
}

#app-screen #view-dashboard .dashboard-action-card {
  min-height: 146px;
  padding: 2px 24px;
  border: 0 !important;
  border-left: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background 0.18s ease, transform 0.18s ease;
}

#app-screen #view-dashboard .dashboard-action-card:first-child {
  border-left: 0 !important;
}

#app-screen #view-dashboard .dashboard-action-card:hover {
  background: rgba(255,255,255,0.035) !important;
  transform: translateY(-1px) !important;
}

#app-screen #view-dashboard .dashboard-action-card::before {
  display: none !important;
}

#app-screen #view-dashboard .dashboard-action-card span {
  color: var(--text-3);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0;
}

#app-screen #view-dashboard .dashboard-action-card strong {
  max-width: 330px;
  color: var(--text-1);
  font-size: 0.96rem;
  font-weight: 750;
  line-height: 1.48;
  letter-spacing: 0;
}

#app-screen #view-dashboard .dashboard-action-card em {
  color: var(--gold-lt);
  font-size: 0.78rem;
  letter-spacing: 0;
}

#app-screen #view-dashboard .dashboard-action-card em::after {
  content: " ->";
}

#app-screen #view-dashboard .dashboard-action-card.danger em {
  color: var(--danger);
}

#app-screen #view-dashboard .dashboard-action-card.warn em {
  color: var(--warn);
}

#app-screen #view-dashboard .dashboard-action-card.success em {
  color: var(--success);
}

#app-screen #view-dashboard .role-access-card {
  margin: 0 0 12px;
  padding: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 0.72;
}

#app-screen #view-dashboard .dashboard-nudge-card {
  margin: 0 0 26px;
  padding: 14px;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,0.022) !important;
  box-shadow: none !important;
}

#app-screen #view-dashboard .dashboard-nudge-card:hover {
  border-color: rgba(212,175,55,0.28) !important;
  background: rgba(255,255,255,0.034) !important;
  box-shadow: none !important;
}

#app-screen #view-dashboard .nudge-card-icon {
  color: var(--gold-lt);
  background: rgba(212,175,55,0.09);
}

#app-screen #view-dashboard .nudge-card-btn {
  border-color: rgba(212,175,55,0.26) !important;
  background: rgba(212,175,55,0.08) !important;
  color: var(--gold-lt) !important;
}

#app-screen #view-dashboard .nudge-card-btn:hover {
  border-color: rgba(212,175,55,0.48) !important;
  background: rgba(212,175,55,0.14) !important;
  box-shadow: none;
}

#app-screen #view-dashboard .dashboard-deep-panel {
  margin-top: 4px;
  border-radius: 8px !important;
}

@media (max-width: 1180px) {
  #app-screen #view-dashboard .dashboard-command-panel {
    grid-template-columns: 1fr;
    grid-template-areas:
      "main"
      "side"
      "action";
    min-height: 0;
  }

  #app-screen #view-dashboard .dashboard-command-side {
    padding: 16px 0 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    border-left: 0;
  }

  #app-screen #view-dashboard .dashboard-command-action {
    justify-self: start;
    width: auto;
  }

  #app-screen #view-dashboard .vitals-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 18px;
  }

  #app-screen #view-dashboard .vital-card:nth-child(3n + 1) {
    border-left: 0 !important;
  }

  #app-screen #view-dashboard .vital-card:nth-child(n + 4) {
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,0.07) !important;
  }
}

@media (max-width: 920px) {
  #app-screen #view-dashboard.view.active {
    padding-inline: 18px;
  }

  #app-screen #view-dashboard > .view-header {
    align-items: flex-start;
  }

  #app-screen #view-dashboard .dashboard-header-actions {
    justify-content: flex-start;
    width: 100%;
  }

  #app-screen #view-dashboard .founder-brief-panel {
    grid-template-columns: 1fr;
  }

  #app-screen #view-dashboard .founder-command-strip,
  #app-screen #view-dashboard .setup-progress-panel {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  #app-screen #view-dashboard .founder-brief-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  #app-screen #view-dashboard .dashboard-action-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  #app-screen #view-dashboard .dashboard-action-card {
    min-height: 112px;
    padding: 0 0 14px;
    border-left: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  }

  #app-screen #view-dashboard .dashboard-action-card:last-child {
    border-bottom: 0 !important;
    padding-bottom: 0;
  }

  #app-screen #view-dashboard .vitals-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #app-screen #view-dashboard .vital-card {
    border-left: 1px solid rgba(255,255,255,0.07) !important;
  }

  #app-screen #view-dashboard .vital-card:nth-child(3n + 1) {
    border-left: 1px solid rgba(255,255,255,0.07) !important;
  }

  #app-screen #view-dashboard .vital-card:nth-child(odd) {
    border-left: 0 !important;
  }

  #app-screen #view-dashboard .vital-card:nth-child(n + 3) {
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,0.07) !important;
  }
}

@media (max-width: 640px) {
  #app-screen #view-dashboard.view.active {
    padding: 22px 14px 34px;
  }

  #app-screen #view-dashboard .view-title {
    font-size: 1.52rem;
  }

  #app-screen #view-dashboard .view-sub {
    font-size: 0.86rem;
  }

  #app-screen #view-dashboard .dashboard-mode-tabs,
  #app-screen #view-dashboard .dashboard-header-actions > .btn-secondary {
    width: 100%;
  }

  #app-screen #view-dashboard .dashboard-mode-tabs {
    display: flex !important;
    flex-direction: row !important;
  }

  #app-screen #view-dashboard .dashboard-mode-tab {
    flex: 1 1 0;
    width: auto !important;
  }

  #app-screen #view-dashboard .dashboard-command-panel {
    padding: 20px;
    gap: 20px;
  }

  #app-screen #view-dashboard .founder-brief-grid,
  #app-screen #view-dashboard .founder-command-strip,
  #app-screen #view-dashboard .vitals-row {
    grid-template-columns: 1fr;
  }

  #app-screen #view-dashboard .dashboard-command-side {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #app-screen #view-dashboard .founder-brief-stat,
  #app-screen #view-dashboard .vital-card {
    border-left: 0 !important;
  }

  #app-screen #view-dashboard .dashboard-decision-chip {
    min-height: 72px;
    border-top: 0 !important;
    border-left: 1px solid rgba(255,255,255,0.07) !important;
  }

  #app-screen #view-dashboard .dashboard-decision-chip:first-child {
    border-left: 0 !important;
  }

  #app-screen #view-dashboard .dashboard-decision-chip + .dashboard-decision-chip,
  #app-screen #view-dashboard .founder-brief-stat + .founder-brief-stat,
  #app-screen #view-dashboard .vital-card + .vital-card {
    border-top: 1px solid rgba(255,255,255,0.07) !important;
  }

  #app-screen #view-dashboard .dashboard-decision-chip + .dashboard-decision-chip {
    border-top: 0 !important;
  }

  #app-screen #view-dashboard .dashboard-command-action {
    justify-self: stretch;
    width: 100%;
  }

  #app-screen #view-dashboard .dashboard-section-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  #app-screen #view-dashboard .dashboard-nudge-card {
    align-items: stretch;
  }
}

/* Sentinel Room viewport workspace refinement. */
body[data-view="sentinel"] .notification-bar:not(.has-alert):not(.has-success):not(.has-warning):not(.is-temporary) {
  display: none !important;
}

#app-screen #view-sentinel.view.active {
  display: flex !important;
  flex-direction: column;
  flex: 0 0 calc(100dvh - 64px) !important;
  width: min(100%, 1280px);
  max-width: 1280px;
  height: calc(100dvh - 64px);
  max-height: calc(100dvh - 64px);
  min-height: 0;
  margin-inline: auto;
  padding: 26px clamp(18px, 3vw, 40px) 28px;
  overflow: hidden;
  box-sizing: border-box;
}

#app-screen #view-sentinel > .view-header {
  flex: 0 0 auto;
  margin: 0 0 16px !important;
  padding: 0 !important;
  align-items: flex-end;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#app-screen #view-sentinel > .view-header::before,
#app-screen #view-sentinel > .view-header::after {
  display: none !important;
}

#app-screen #view-sentinel .sentinel-header-copy {
  min-width: min(100%, 360px);
}

#app-screen #view-sentinel .view-title {
  color: var(--text-1);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(1.62rem, 1.34rem + 0.8vw, 2.12rem);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: 0;
}

#app-screen #view-sentinel .view-sub {
  margin-top: 7px;
  color: var(--text-2);
  font-size: 0.9rem;
  font-weight: 650;
  letter-spacing: 0;
}

#app-screen #view-sentinel .sentinel-clear-btn {
  min-height: 36px;
  border-color: rgba(217,106,106,0.2) !important;
  background: rgba(217,106,106,0.055) !important;
  color: color-mix(in srgb, var(--danger) 82%, var(--text-2) 18%) !important;
  box-shadow: none !important;
}

#app-screen #view-sentinel .sentinel-clear-btn:hover {
  border-color: rgba(217,106,106,0.36) !important;
  background: rgba(217,106,106,0.1) !important;
  transform: none;
}

#app-screen #view-sentinel .sentinel-master-grid {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(292px, 320px);
  grid-template-rows: minmax(0, 1fr);
  gap: 18px;
  align-items: stretch !important;
  width: 100%;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
}

#app-screen #view-sentinel .sentinel-chat-col,
#app-screen #view-sentinel .sentinel-voice-col {
  min-width: 0;
  min-height: 0;
}

#app-screen #view-sentinel .sentinel-chat-col {
  display: flex;
  flex-direction: column;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  border: 1px solid rgba(212,175,55,0.17) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.036), rgba(255,255,255,0.012)),
    #0E0E0F !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.045), 0 24px 70px rgba(0,0,0,0.32) !important;
  overflow: hidden !important;
}

#app-screen #view-sentinel .sentinel-chat-col::before,
#app-screen #view-sentinel .sentinel-chat-col::after,
#app-screen #view-sentinel .sv-orb-card::before,
#app-screen #view-sentinel .sv-orb-card::after,
#app-screen #view-sentinel .sv-action-card::before,
#app-screen #view-sentinel .sv-action-card::after {
  display: none !important;
}

#app-screen #view-sentinel .sentinel-chat-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 56px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.075);
  background: rgba(255,255,255,0.018);
}

#app-screen #view-sentinel .sentinel-chat-label,
#app-screen #view-sentinel .sv-section-label,
#app-screen #view-sentinel .sv-actions-label {
  color: var(--text-2);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

#app-screen #view-sentinel .prompt-chips-inline {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
  min-width: 0;
}

#app-screen #view-sentinel .chip-sm {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 999px;
  background: rgba(255,255,255,0.026) !important;
  color: var(--text-3);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0;
  box-shadow: none !important;
}

#app-screen #view-sentinel .chip-sm:hover {
  border-color: rgba(212,175,55,0.34) !important;
  background: rgba(212,175,55,0.09) !important;
  color: var(--gold-lt);
}

#app-screen #view-sentinel .sentinel-feed {
  flex: 1 1 auto;
  min-height: 0;
  padding: 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(212,175,55,0.38) transparent;
}

#app-screen #view-sentinel .sentinel-empty {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 100%;
  padding: 28px;
  text-align: center;
}

#app-screen #view-sentinel .sentinel-icon-big {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  margin: 0 0 14px;
  border: 1px solid rgba(212,175,55,0.24);
  border-radius: 8px;
  background: rgba(212,175,55,0.08);
  color: var(--gold-lt);
  font-size: 0;
}

#app-screen #view-sentinel .sentinel-empty h3 {
  color: var(--text-1);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1.08rem;
  font-weight: 900;
  letter-spacing: 0;
}

#app-screen #view-sentinel .sentinel-empty p {
  max-width: 360px;
  margin: 7px auto 0;
  color: var(--text-3);
  font-size: 0.9rem;
}

#app-screen #view-sentinel .sentinel-msg {
  gap: 10px;
  padding: 7px 0;
}

#app-screen #view-sentinel .sentinel-avatar {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: var(--text-3);
  font-size: 0.66rem;
  letter-spacing: 0;
}

#app-screen #view-sentinel .sentinel-bubble {
  max-width: min(88%, 760px);
  padding: 11px 13px;
  border-radius: 8px !important;
  color: var(--text-1);
  font-size: 0.94rem;
  line-height: 1.58;
  overflow-wrap: anywhere;
  box-shadow: none !important;
}

#app-screen #view-sentinel .sentinel-msg.user .sentinel-bubble {
  max-width: min(72%, 620px);
  border-color: rgba(212,175,55,0.26) !important;
  background: rgba(212,175,55,0.1) !important;
  color: var(--text-1);
}

#app-screen #view-sentinel .sentinel-msg.sentinel .sentinel-bubble {
  border-color: rgba(255,255,255,0.09) !important;
  background: rgba(255,255,255,0.032) !important;
}

#app-screen #view-sentinel .sentinel-msg.user .sentinel-avatar {
  border-color: rgba(212,175,55,0.26);
  background: rgba(212,175,55,0.12);
  color: var(--gold-lt);
}

#app-screen #view-sentinel .sentinel-msg.sentinel .sentinel-avatar {
  border-color: rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.035);
}

#app-screen #view-sentinel .sentinel-input-bar {
  position: sticky;
  bottom: 0;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-top: 1px solid rgba(255,255,255,0.075) !important;
  background: rgba(10,10,10,0.96) !important;
  box-shadow: 0 -18px 34px rgba(0,0,0,0.18) !important;
}

#app-screen #view-sentinel .sentinel-input-bar input {
  min-height: 42px;
  border-radius: 8px;
  background: #090909 !important;
  font-size: 0.94rem;
}

#app-screen #view-sentinel .btn-send,
#app-screen #view-sentinel .vx-send-btn {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(212,175,55,0.55) !important;
  border-radius: 8px !important;
  background: var(--gold-metal) !important;
  color: #090909 !important;
  box-shadow: none !important;
}

#app-screen #view-sentinel .btn-send:hover,
#app-screen #view-sentinel .vx-send-btn:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

#app-screen #view-sentinel .sentinel-voice-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100% !important;
  max-height: 100% !important;
  padding-right: 2px;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(212,175,55,0.34) transparent;
}

#app-screen #view-sentinel .sentinel-voice-col::-webkit-scrollbar,
#app-screen #view-sentinel .sentinel-feed::-webkit-scrollbar,
#app-screen #view-sentinel #voice-history-list::-webkit-scrollbar {
  width: 8px;
}

#app-screen #view-sentinel .sentinel-voice-col::-webkit-scrollbar-thumb,
#app-screen #view-sentinel .sentinel-feed::-webkit-scrollbar-thumb,
#app-screen #view-sentinel #voice-history-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(212,175,55,0.3);
}

#app-screen #view-sentinel .sv-orb-card,
#app-screen #view-sentinel .native-assistant-card,
#app-screen #view-sentinel .sv-actions-section,
#app-screen #view-sentinel .vx-history-panel {
  border: 1px solid rgba(255,255,255,0.09) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)),
    #101010 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035) !important;
  overflow: hidden !important;
}

#app-screen #view-sentinel .sv-orb-card {
  flex: 0 0 auto;
  padding: 14px;
}

#app-screen #view-sentinel .sv-orb-header {
  margin-bottom: 8px;
}

#app-screen #view-sentinel .sentinel-voice-col .vx-orb-zone {
  min-height: 116px;
  padding: 10px 0 8px;
}

#app-screen #view-sentinel .vx-orb {
  width: 86px;
  height: 86px;
}

#app-screen #view-sentinel .vx-ring.r1 {
  width: 108px;
  height: 108px;
}

#app-screen #view-sentinel .vx-ring.r2 {
  width: 132px;
  height: 132px;
}

#app-screen #view-sentinel .vx-ring.r3 {
  display: none;
}

#app-screen #view-sentinel .vx-orb-hint {
  margin-top: 7px;
  color: var(--text-3);
  font-size: 0.78rem;
  letter-spacing: 0;
}

#app-screen #view-sentinel .vx-text-bar,
#app-screen #view-sentinel .meeting-connect-panel,
#app-screen #view-sentinel .sv-response-inline,
#app-screen #view-sentinel .native-assistant-status,
#app-screen #view-sentinel .native-assistant-quick-status span {
  border-color: rgba(255,255,255,0.08) !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,0.026) !important;
  box-shadow: none !important;
}

#app-screen #view-sentinel .vx-text-bar {
  gap: 8px;
  padding: 6px;
}

#app-screen #view-sentinel .vx-text-input {
  min-height: 40px;
  border: 0 !important;
  background: transparent !important;
}

#app-screen #view-sentinel .meeting-connect-panel {
  align-items: center;
  padding: 10px;
  gap: 10px;
}

#app-screen #view-sentinel .meeting-connect-copy {
  gap: 3px;
}

#app-screen #view-sentinel .meeting-connect-copy strong {
  color: var(--text-2);
  font-size: 0.8rem;
}

#app-screen #view-sentinel .meeting-connect-actions {
  gap: 6px;
}

#app-screen #view-sentinel .meeting-connect-btn {
  min-height: 30px;
  padding: 0 9px;
  border-radius: 7px !important;
  font-size: 0.72rem;
  font-weight: 850;
}

#app-screen #view-sentinel .sv-response-inline {
  max-height: 158px;
  padding: 11px;
  overflow-y: auto;
}

#app-screen #view-sentinel .sv-actions-section {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
}

#app-screen #view-sentinel .sv-action-cards {
  gap: 8px;
}

#app-screen #view-sentinel .sv-action-card {
  gap: 10px;
  padding: 12px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,0.022) !important;
  box-shadow: none !important;
  transform: none !important;
}

#app-screen #view-sentinel .sv-action-card:hover {
  border-color: rgba(212,175,55,0.22) !important;
  background: rgba(255,255,255,0.035) !important;
}

#app-screen #view-sentinel .sv-action-card-top {
  align-items: center;
  gap: 10px;
}

#app-screen #view-sentinel .sv-action-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.035) !important;
}

#app-screen #view-sentinel .sv-icon-danger {
  color: var(--danger);
}

#app-screen #view-sentinel .sv-icon-notif,
#app-screen #view-sentinel .sv-icon-siri {
  color: var(--gold-lt);
}

#app-screen #view-sentinel .sv-action-title {
  color: var(--text-1);
  font-size: 0.9rem;
  font-weight: 900;
  letter-spacing: 0;
}

#app-screen #view-sentinel .sv-action-desc {
  margin-top: 2px;
  color: var(--text-3);
  font-size: 0.76rem;
  line-height: 1.34;
}

#app-screen #view-sentinel .sv-action-select {
  min-height: 38px;
  border-radius: 8px;
  font-size: 0.82rem;
}

#app-screen #view-sentinel .sv-tap-btn,
#app-screen #view-sentinel .native-assistant-btn {
  min-height: 36px;
  border-radius: 8px !important;
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0;
  box-shadow: none !important;
}

#app-screen #view-sentinel .sv-tap-danger {
  border-color: rgba(217,106,106,0.28) !important;
  background: rgba(217,106,106,0.1) !important;
  color: var(--danger) !important;
}

#app-screen #view-sentinel .sv-tap-notif,
#app-screen #view-sentinel .native-assistant-btn:not(.ghost) {
  border-color: rgba(212,175,55,0.34) !important;
  background: rgba(212,175,55,0.1) !important;
  color: var(--gold-lt) !important;
}

#app-screen #view-sentinel .native-assistant-card {
  flex: 0 0 auto;
  padding: 12px !important;
}

#app-screen #view-sentinel .native-assistant-status {
  min-height: 34px;
  padding: 8px 10px;
  color: var(--text-2);
  font-size: 0.78rem;
  line-height: 1.35;
}

#app-screen #view-sentinel .native-assistant-quick-status {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

#app-screen #view-sentinel .native-assistant-quick-status span {
  min-height: 28px;
  padding: 6px 8px;
  color: var(--text-3);
  font-size: 0.72rem;
}

#app-screen #view-sentinel .native-assistant-meta {
  display: none !important;
}

#app-screen #view-sentinel .native-assistant-actions {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.8fr) minmax(0, 0.8fr);
  gap: 7px;
}

#app-screen #view-sentinel .sv-notif-types {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

#app-screen #view-sentinel .sv-notif-type-btn {
  min-width: 0;
  min-height: 32px;
  padding: 0 6px;
  border-radius: 7px;
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0;
}

#app-screen #view-sentinel .sv-notif-type-btn.active {
  border-color: rgba(121,174,139,0.42);
  background: rgba(121,174,139,0.12);
  color: var(--success);
}

#app-screen #view-sentinel .platinum-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
}

#app-screen #view-sentinel .platinum-action-btn {
  min-height: 38px;
  padding: 0 8px;
  border: 1px solid rgba(255,255,255,0.09) !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,0.024) !important;
  color: var(--text-2);
  box-shadow: none !important;
  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0;
}

#app-screen #view-sentinel .platinum-action-btn:hover {
  border-color: rgba(212,175,55,0.32) !important;
  background: rgba(212,175,55,0.08) !important;
  color: var(--gold-lt);
  transform: translateY(-1px);
}

#app-screen #view-sentinel .action-helper-grid {
  display: none !important;
}

#app-screen #view-sentinel .vx-history-panel {
  flex: 1 1 180px;
  min-height: 154px;
  display: flex;
  flex-direction: column;
}

#app-screen #view-sentinel .vx-history-header {
  flex: 0 0 auto;
  min-height: 42px;
  padding: 10px 12px;
  border-bottom-color: rgba(255,255,255,0.08);
  color: var(--text-2);
  font-size: 0.72rem;
  letter-spacing: 0;
}

#app-screen #view-sentinel .vx-history-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#app-screen #view-sentinel .vx-history-view-all,
#app-screen #view-sentinel .vx-history-refresh {
  min-height: 28px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 7px;
  background: rgba(255,255,255,0.024);
  color: var(--text-3);
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0;
}

#app-screen #view-sentinel .vx-history-view-all {
  padding: 0 9px;
}

#app-screen #view-sentinel .vx-history-view-all.hidden {
  display: none !important;
}

#app-screen #view-sentinel .vx-history-refresh {
  width: 28px;
  padding: 0;
  justify-content: center;
}

#app-screen #view-sentinel .vx-history-view-all:hover,
#app-screen #view-sentinel .vx-history-refresh:hover {
  border-color: rgba(212,175,55,0.28);
  color: var(--gold-lt);
}

#app-screen #view-sentinel #voice-history-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

#app-screen #view-sentinel .vx-history-panel:not(.is-expanded) .vx-history-item:nth-of-type(n+6) {
  display: none;
}

#app-screen #view-sentinel .vx-history-item {
  padding: 10px 12px;
  border-bottom-color: rgba(255,255,255,0.075);
  background: transparent;
}

#app-screen #view-sentinel .vx-history-item:hover {
  background: rgba(255,255,255,0.026);
}

#app-screen #view-sentinel .vx-history-q {
  color: var(--text-1);
  font-size: 0.83rem;
  font-weight: 850;
  letter-spacing: 0;
}

#app-screen #view-sentinel .vx-history-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 7px;
  color: var(--text-3);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.68rem;
}

#app-screen #view-sentinel .vx-history-meta span {
  min-width: 0;
}

#app-screen #view-sentinel .vx-history-scope {
  padding: 1px 6px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  color: var(--text-2);
  letter-spacing: 0;
  text-transform: none;
}

#app-screen #view-sentinel .vx-history-exec {
  color: var(--success);
}

#app-screen #view-sentinel .vx-history-fail {
  color: var(--danger);
}

#app-screen #view-sentinel .sentinel-rich-stack {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  white-space: normal;
}

#app-screen #view-sentinel .sentinel-rich-card,
#app-screen #view-sentinel .sentinel-rich-metric-grid,
#app-screen #view-sentinel .sentinel-rich-actions {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 8px;
  background: rgba(0,0,0,0.16);
}

#app-screen #view-sentinel .sentinel-rich-card.danger {
  border-color: rgba(217,106,106,0.2);
}

#app-screen #view-sentinel .sentinel-rich-card-head span {
  color: var(--text-3);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

#app-screen #view-sentinel .sentinel-rich-group,
#app-screen #view-sentinel .sentinel-risk-item {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.075);
  border-radius: 8px;
  background: rgba(255,255,255,0.022);
}

#app-screen #view-sentinel .sentinel-rich-group.danger,
#app-screen #view-sentinel .sentinel-risk-item.danger {
  border-color: rgba(217,106,106,0.22);
}

#app-screen #view-sentinel .sentinel-rich-group.warn,
#app-screen #view-sentinel .sentinel-risk-item.warn {
  border-color: rgba(207,161,74,0.24);
}

#app-screen #view-sentinel .sentinel-rich-group.success,
#app-screen #view-sentinel .sentinel-risk-item.success {
  border-color: rgba(121,174,139,0.2);
}

#app-screen #view-sentinel .sentinel-rich-group-head,
#app-screen #view-sentinel .sentinel-risk-item {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

#app-screen #view-sentinel .sentinel-rich-group-head {
  display: grid;
  gap: 8px;
}

#app-screen #view-sentinel .sentinel-rich-group strong,
#app-screen #view-sentinel .sentinel-risk-item strong,
#app-screen #view-sentinel .sentinel-rich-metric strong {
  display: block;
  min-width: 0;
  color: var(--text-1);
  font-size: 0.86rem;
  font-weight: 900;
  line-height: 1.28;
}

#app-screen #view-sentinel .sentinel-rich-group span,
#app-screen #view-sentinel .sentinel-risk-item span,
#app-screen #view-sentinel .sentinel-rich-metric span,
#app-screen #view-sentinel .sentinel-rich-actions span {
  color: var(--text-3);
  font-size: 0.74rem;
  line-height: 1.34;
}

#app-screen #view-sentinel .sentinel-risk-item em {
  justify-self: end;
  color: var(--danger);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

#app-screen #view-sentinel .sentinel-rich-meters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

#app-screen #view-sentinel .sentinel-rich-meter {
  display: grid;
  gap: 5px;
}

#app-screen #view-sentinel .sentinel-rich-meter-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--text-3);
  font-size: 0.68rem;
}

#app-screen #view-sentinel .sentinel-rich-meter-top strong {
  color: var(--text-1);
  font-size: 0.72rem;
}

#app-screen #view-sentinel .sentinel-rich-bar {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,0.075);
}

#app-screen #view-sentinel .sentinel-rich-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--text-3);
}

#app-screen #view-sentinel .sentinel-rich-meter.success .sentinel-rich-bar i {
  background: var(--success);
}

#app-screen #view-sentinel .sentinel-rich-meter.warn .sentinel-rich-bar i {
  background: var(--warn);
}

#app-screen #view-sentinel .sentinel-rich-meter.danger .sentinel-rich-bar i {
  background: var(--danger);
}

#app-screen #view-sentinel .sentinel-rich-metric-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#app-screen #view-sentinel .sentinel-rich-metric {
  min-width: 0;
}

#app-screen #view-sentinel .sentinel-rich-actions {
  grid-template-columns: 1fr;
}

#app-screen #view-sentinel .sentinel-rich-btn {
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(212,175,55,0.28);
  border-radius: 7px;
  background: rgba(212,175,55,0.08);
  color: var(--gold-lt);
  font: 850 0.7rem/1 'Inter', system-ui, sans-serif;
  cursor: pointer;
}

#app-screen #view-sentinel .sentinel-rich-btn:hover {
  border-color: rgba(212,175,55,0.48);
  background: rgba(212,175,55,0.14);
}

@media (max-width: 1100px) {
  #app-screen #view-sentinel .sentinel-master-grid {
    grid-template-columns: minmax(0, 1fr) minmax(286px, 304px);
  }
}

@media (max-width: 980px) {
  #app-screen #view-sentinel.view.active {
    flex: 1 1 auto !important;
    height: auto;
    max-height: none;
    min-height: calc(100dvh - 60px);
    padding: 22px 16px 34px;
    overflow: visible;
  }

  #app-screen #view-sentinel > .view-header {
    align-items: flex-start;
    margin-bottom: 14px !important;
  }

  #app-screen #view-sentinel .sentinel-master-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px;
    height: auto;
  }

  #app-screen #view-sentinel .sentinel-chat-col {
    height: clamp(480px, calc(100dvh - 196px), 660px) !important;
    min-height: 480px !important;
  }

  #app-screen #view-sentinel .sentinel-voice-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    height: auto !important;
    overflow: visible !important;
  }

  #app-screen #view-sentinel .sv-orb-card,
  #app-screen #view-sentinel .vx-history-panel {
    min-height: 100%;
  }

  #app-screen #view-sentinel .sv-actions-section,
  #app-screen #view-sentinel .vx-history-panel {
    flex: none;
  }
}

@media (max-width: 720px) {
  #app-screen #view-sentinel .sentinel-voice-col,
  #app-screen #view-sentinel .platinum-actions,
  #app-screen #view-sentinel .native-assistant-actions {
    grid-template-columns: 1fr;
  }

  #app-screen #view-sentinel .sentinel-chat-header {
    align-items: flex-start;
    flex-direction: column;
  }

  #app-screen #view-sentinel .prompt-chips-inline {
    justify-content: flex-start;
    width: 100%;
  }

  #app-screen #view-sentinel .chip-sm {
    flex: 1 1 calc(50% - 8px);
  }
}

@media (max-width: 560px) {
  #app-screen #view-sentinel.view.active {
    padding: 18px 12px 30px;
  }

  #app-screen #view-sentinel .sentinel-chat-col {
    height: clamp(460px, calc(100dvh - 178px), 620px) !important;
    min-height: 460px !important;
    border-radius: 8px !important;
  }

  #app-screen #view-sentinel .sentinel-feed {
    padding: 12px;
  }

  #app-screen #view-sentinel .sentinel-bubble,
  #app-screen #view-sentinel .sentinel-msg.user .sentinel-bubble {
    max-width: calc(100vw - 84px);
  }

  #app-screen #view-sentinel .sentinel-rich-meters,
  #app-screen #view-sentinel .sentinel-rich-metric-grid,
  #app-screen #view-sentinel .sentinel-rich-group-head,
  #app-screen #view-sentinel .sentinel-risk-item {
    grid-template-columns: 1fr;
  }

  #app-screen #view-sentinel .sentinel-risk-item em,
  #app-screen #view-sentinel .sentinel-rich-btn {
    justify-self: start;
  }

  #app-screen #view-sentinel .sv-notif-types {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Founder Directives command history refinement. */
body[data-view="directives"] .notification-bar:not(.has-alert):not(.has-success):not(.has-warning):not(.is-temporary) {
  display: none !important;
}

#app-screen #view-directives.view.active {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 1280px;
  min-width: 0;
  margin: 0 auto;
  padding: 24px 28px 44px;
  overflow-x: hidden;
  box-sizing: border-box;
}

#app-screen #view-directives > .view-header {
  align-items: flex-end;
  gap: 16px;
  margin: 0 0 4px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#app-screen #view-directives > .view-header::before,
#app-screen #view-directives > .view-header::after {
  display: none !important;
}

#app-screen #view-directives .directives-header-copy {
  display: grid;
  flex: 1 1 420px;
  gap: 6px;
  min-width: 0;
}

#app-screen #view-directives .view-title {
  margin: 0;
  font-size: 2.55rem;
  line-height: 0.96;
  letter-spacing: 0;
}

#app-screen #view-directives .view-sub {
  max-width: 640px;
  margin: 0;
  color: var(--text-2);
  font-size: 0.95rem;
  line-height: 1.5;
}

#app-screen #view-directives .directives-new-btn {
  min-height: 40px;
  border-radius: 8px;
  white-space: nowrap;
}

#app-screen #view-directives .directives-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.095);
  border-radius: 8px;
  background: rgba(255,255,255,0.095);
}

#app-screen #view-directives .directive-overview-item {
  display: grid;
  gap: 6px;
  min-height: 70px;
  padding: 14px 16px;
  background: rgba(12,13,16,0.76);
}

#app-screen #view-directives .directive-overview-item span {
  color: var(--text-3);
  font-size: 0.69rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

#app-screen #view-directives .directive-overview-item strong {
  color: var(--text-1);
  font: 900 1.6rem/1 'Inter', system-ui, sans-serif;
  letter-spacing: 0;
}

#app-screen #view-directives .directive-overview-item.sent strong {
  color: var(--success);
}

#app-screen #view-directives .directive-overview-item.pending strong {
  color: var(--warn);
}

#app-screen #view-directives .directive-overview-item.failed strong {
  color: var(--danger);
}

#app-screen #view-directives .directive-overview-item.draft strong {
  color: var(--text-2);
}

#app-screen #view-directives .directives-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 340px);
  gap: 12px;
  align-items: center;
  min-width: 0;
}

#app-screen #view-directives .directives-filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  padding-bottom: 1px;
}

#app-screen #view-directives .directive-filter-btn {
  min-height: 32px;
  flex: 0 0 auto;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  background: rgba(255,255,255,0.045);
  color: var(--text-2);
  font: 850 0.76rem/1 'Inter', system-ui, sans-serif;
  letter-spacing: 0;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}

#app-screen #view-directives .directive-filter-btn:hover,
#app-screen #view-directives .directive-filter-btn.active {
  border-color: rgba(212,175,55,0.38);
  background: rgba(212,175,55,0.13);
  color: var(--gold-lt);
}

#app-screen #view-directives .directives-search {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  background: rgba(12,13,16,0.72);
  color: var(--text-3);
}

#app-screen #view-directives .directives-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-1);
  font: 750 0.86rem/1.2 'Inter', system-ui, sans-serif;
}

#app-screen #view-directives .directives-search input::placeholder {
  color: var(--text-3);
}

#app-screen #view-directives .directives-history {
  display: grid;
  overflow: hidden;
  min-width: 0;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 8px;
  background: rgba(9,10,12,0.58);
}

#app-screen #view-directives .directives-history > .loading-state,
#app-screen #view-directives .directives-history > .empty-state {
  border: 0;
  border-radius: 0;
  background: transparent;
}

#app-screen #view-directives .directives-empty {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 42px 20px;
}

#app-screen #view-directives .directives-empty h3 {
  margin: 0;
  color: var(--text-1);
  font-size: 1rem;
  letter-spacing: 0;
}

#app-screen #view-directives .directives-empty p {
  max-width: 420px;
  margin: 0;
  color: var(--text-3);
  line-height: 1.45;
}

#app-screen #view-directives .directive-time-section {
  padding: 12px 16px 8px;
  border-top: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.025);
}

#app-screen #view-directives .directive-time-section:first-child {
  border-top: 0;
}

#app-screen #view-directives .directive-time-section h3 {
  margin: 0;
  color: var(--text-3);
  font: 900 0.68rem/1 'Inter', system-ui, sans-serif;
  letter-spacing: 0;
  text-transform: uppercase;
}

#app-screen #view-directives .directive-history-row {
  all: unset;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) minmax(132px, auto);
  gap: 12px;
  align-items: center;
  width: 100%;
  min-width: 0;
  padding: 13px 16px;
  border-top: 1px solid rgba(255,255,255,0.075);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}

#app-screen #view-directives .directive-time-section + .directive-history-row {
  border-top-color: rgba(255,255,255,0.04);
}

#app-screen #view-directives .directive-history-row:hover,
#app-screen #view-directives .directive-history-row:focus-visible {
  background: rgba(255,255,255,0.045);
}

#app-screen #view-directives .directive-history-row.status-failed {
  box-shadow: inset 3px 0 0 rgba(217,106,106,0.82);
}

#app-screen #view-directives .directive-history-row.status-pending {
  box-shadow: inset 3px 0 0 rgba(207,161,74,0.7);
}

#app-screen #view-directives .directive-history-row.status-sent {
  box-shadow: inset 3px 0 0 rgba(121,174,139,0.7);
}

#app-screen #view-directives .directive-history-row.status-draft {
  box-shadow: inset 3px 0 0 rgba(255,255,255,0.26);
}

#app-screen #view-directives .directive-row-icon {
  width: 34px;
  height: 34px;
  margin: 0;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  background: rgba(255,255,255,0.045);
  color: var(--text-2);
}

#app-screen #view-directives .directive-history-row.status-failed .directive-row-icon {
  color: var(--danger);
}

#app-screen #view-directives .directive-history-row.status-pending .directive-row-icon {
  color: var(--warn);
}

#app-screen #view-directives .directive-history-main {
  display: grid;
  gap: 6px;
  min-width: 0;
}

#app-screen #view-directives .directive-row-message {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text-1);
  font: 800 0.92rem/1.35 'Inter', system-ui, sans-serif;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

#app-screen #view-directives .directive-row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-width: 0;
  color: var(--text-3);
  font-size: 0.76rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

#app-screen #view-directives .directive-target-emoji {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-right: 1px;
}

#app-screen #view-directives .directive-history-side {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

#app-screen #view-directives .directive-history-side .stat-pill {
  justify-content: center;
  min-width: 82px;
}

#app-screen #view-directives .stat-pill.neutral {
  color: var(--text-2);
  background: rgba(255,255,255,0.07);
}

#app-screen #view-directives .directive-view-affordance {
  color: var(--text-3);
  font: 850 0.72rem/1 'Inter', system-ui, sans-serif;
  white-space: nowrap;
}

#app-screen #view-directives .directive-history-row:hover .directive-view-affordance,
#app-screen #view-directives .directive-history-row:focus-visible .directive-view-affordance {
  color: var(--gold-lt);
}

#app-screen #view-directives .directive-load-more {
  min-height: 42px;
  border: 0;
  border-top: 1px solid rgba(255,255,255,0.075);
  background: rgba(255,255,255,0.035);
  color: var(--gold-lt);
  font: 900 0.78rem/1 'Inter', system-ui, sans-serif;
  cursor: pointer;
}

#app-screen #view-directives .directive-load-more:hover {
  background: rgba(212,175,55,0.1);
}

.directive-detail-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1290;
  background: rgba(0,0,0,0.56);
  opacity: 0;
  transition: opacity 180ms ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.directive-detail-backdrop.active {
  opacity: 1;
}

.directive-detail-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 1300;
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: min(470px, calc(100vw - 18px));
  max-width: 100vw;
  height: 100dvh;
  padding: 22px;
  overflow-y: auto;
  border-left: 1px solid rgba(255,255,255,0.12);
  background: rgba(12,13,16,0.96);
  box-shadow: -24px 0 60px rgba(0,0,0,0.42);
  transform: translateX(102%);
  transition: transform 190ms ease;
  box-sizing: border-box;
}

.directive-detail-drawer.active {
  transform: translateX(0);
}

.directive-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.directive-detail-head h2 {
  margin: 4px 0 0;
  color: var(--text-1);
  font-size: 1.36rem;
  letter-spacing: 0;
}

.directive-detail-kicker {
  color: var(--gold-lt);
  font: 900 0.68rem/1 'Inter', system-ui, sans-serif;
  letter-spacing: 0;
  text-transform: uppercase;
}

.directive-detail-message {
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  background: rgba(255,255,255,0.045);
  color: var(--text-1);
  font-size: 0.96rem;
  line-height: 1.58;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.directive-detail-section {
  display: grid;
  gap: 10px;
}

.directive-detail-section h3 {
  margin: 0;
  color: var(--text-3);
  font: 900 0.7rem/1 'Inter', system-ui, sans-serif;
  letter-spacing: 0;
  text-transform: uppercase;
}

.directive-detail-grid {
  display: grid;
  gap: 8px;
}

.directive-detail-field {
  display: grid;
  grid-template-columns: minmax(104px, 0.45fr) minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,0.075);
}

.directive-detail-field:first-child {
  border-top: 0;
}

.directive-detail-field span {
  color: var(--text-3);
  font-size: 0.74rem;
}

.directive-detail-field strong {
  min-width: 0;
  color: var(--text-1);
  font-size: 0.84rem;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.directive-detail-error {
  padding: 12px;
  border: 1px solid rgba(217,106,106,0.2);
  border-radius: 8px;
  background: rgba(217,106,106,0.08);
}

.directive-detail-error p {
  margin: 0;
  color: var(--danger);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

#directive-modal.directive-compose-modal {
  width: min(560px, calc(100vw - 28px));
  border-radius: 8px;
}

#directive-modal .directive-compose-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0 18px;
}

#directive-modal .directive-compose-steps span {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 8px;
  background: rgba(255,255,255,0.045);
  color: var(--text-2);
  font: 850 0.74rem/1.1 'Inter', system-ui, sans-serif;
}

#directive-modal .directive-compose-steps b {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: var(--text-3);
  font-size: 0.68rem;
}

#directive-modal .directive-compose-steps .active {
  border-color: rgba(212,175,55,0.32);
  background: rgba(212,175,55,0.1);
  color: var(--gold-lt);
}

#directive-modal .directive-compose-steps .active b {
  background: rgba(212,175,55,0.18);
  color: var(--gold-lt);
}

#directive-modal textarea#dir-message {
  min-height: 150px;
  resize: vertical;
}

html[data-theme="light"] #app-screen #view-directives .directives-overview,
html[data-theme="light"] #app-screen #view-directives .directives-history,
html[data-theme="light"] #app-screen #view-directives .directives-search,
html[data-theme="light"] #app-screen #view-directives .directive-filter-btn {
  border-color: rgba(68,55,31,0.14);
}

html[data-theme="light"] #app-screen #view-directives .directive-overview-item,
html[data-theme="light"] #app-screen #view-directives .directives-history,
html[data-theme="light"] #app-screen #view-directives .directives-search,
html[data-theme="light"] .directive-detail-drawer {
  background: rgba(252,250,245,0.94);
}

html[data-theme="light"] #app-screen #view-directives .directive-history-row,
html[data-theme="light"] #app-screen #view-directives .directive-time-section,
html[data-theme="light"] .directive-detail-field {
  border-color: rgba(68,55,31,0.1);
}

html[data-theme="light"] #app-screen #view-directives .directive-history-row:hover,
html[data-theme="light"] #app-screen #view-directives .directive-history-row:focus-visible {
  background: rgba(117,84,28,0.055);
}

html[data-theme="light"] .directive-detail-backdrop {
  background: rgba(28,23,13,0.32);
}

html[data-theme="light"] .directive-detail-message,
html[data-theme="light"] #directive-modal .directive-compose-steps span {
  border-color: rgba(68,55,31,0.12);
  background: rgba(117,84,28,0.045);
}

/* Analytics historical intelligence workspace. */
body[data-view="analytics"] .notification-bar:not(.has-alert):not(.has-success):not(.has-warning):not(.is-temporary) {
  display: none !important;
}

#app-screen #view-analytics.view.active {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 1280px;
  min-width: 0;
  margin: 0 auto;
  padding: 24px 28px 44px;
  overflow-x: hidden;
  box-sizing: border-box;
}

#app-screen #view-analytics > .view-header {
  align-items: flex-end;
  gap: 16px;
  margin: 0 0 4px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#app-screen #view-analytics > .view-header::before,
#app-screen #view-analytics > .view-header::after {
  display: none !important;
}

#app-screen #view-analytics .analytics-header-copy {
  display: grid;
  flex: 1 1 420px;
  gap: 6px;
  min-width: 0;
}

#app-screen #view-analytics .view-title {
  margin: 0;
  font-size: 2.55rem;
  line-height: 0.96;
  letter-spacing: 0;
}

#app-screen #view-analytics .view-sub {
  max-width: 680px;
  margin: 0;
  color: var(--text-2);
  font-size: 0.95rem;
  line-height: 1.5;
}

#app-screen #view-analytics .analytics-header-actions {
  flex: 0 0 auto;
  justify-content: flex-end;
  flex-wrap: wrap;
}

#app-screen #view-analytics .report-period-toggle,
#app-screen #view-analytics .analytics-trend-tabs {
  border-radius: 8px;
  background: rgba(255,255,255,0.045);
}

#app-screen #view-analytics .report-period-btn {
  min-width: 74px;
  min-height: 32px;
  border-radius: 6px;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

#app-screen #view-analytics .report-period-btn.active {
  background: var(--gold);
  color: #0b0a07;
}

#app-screen #view-analytics .analytics-workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
  gap: 14px;
  min-width: 0;
}

#app-screen #view-analytics .analytics-panel {
  display: grid;
  gap: 16px;
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 8px;
  background: rgba(12,13,16,0.76);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.025);
}

#app-screen #view-analytics .analytics-performance-panel,
#app-screen #view-analytics .analytics-trends-panel,
#app-screen #view-analytics .analytics-commitments-card {
  grid-column: 1 / -1;
}

#app-screen #view-analytics .analytics-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
}

#app-screen #view-analytics .analytics-section-head.compact {
  align-items: center;
}

#app-screen #view-analytics .analytics-section-head h3 {
  margin: 5px 0 0;
  color: var(--text-1);
  font: 900 1.04rem/1.2 'Inter', system-ui, sans-serif;
  letter-spacing: 0;
}

#app-screen #view-analytics .analytics-section-head p,
#app-screen #view-analytics .analytics-panel-copy {
  margin: 5px 0 0;
  color: var(--text-3);
  font-size: 0.83rem;
  line-height: 1.5;
}

#app-screen #view-analytics .analytics-data-pill,
#app-screen #view-analytics .report-sync-status,
#app-screen #view-analytics .inline-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 999px;
  background: rgba(255,255,255,0.045);
  color: var(--text-2);
  font: 850 0.72rem/1 'Inter', system-ui, sans-serif;
  white-space: nowrap;
}

#app-screen #view-analytics .analytics-data-pill.has-history,
#app-screen #view-analytics .report-sync-status {
  border-color: rgba(201,168,76,0.28);
  background: rgba(201,168,76,0.1);
  color: var(--gold-lt);
}

#app-screen #view-analytics .analytics-data-pill.is-limited {
  border-color: rgba(245,166,35,0.22);
  background: rgba(245,166,35,0.08);
  color: var(--warn);
}

#app-screen #view-analytics .analytics-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.095);
  border-radius: 8px;
  background: rgba(255,255,255,0.095);
}

#app-screen #view-analytics .analytics-metric-card {
  all: unset;
  box-sizing: border-box;
  display: grid;
  gap: 7px;
  min-width: 0;
  min-height: 128px;
  padding: 16px;
  background: rgba(10,11,14,0.78);
  cursor: pointer;
  transition: background 180ms ease, box-shadow 180ms ease;
}

#app-screen #view-analytics .analytics-metric-card + .analytics-metric-card {
  border-left: 1px solid rgba(255,255,255,0.07);
}

#app-screen #view-analytics .analytics-metric-card:hover,
#app-screen #view-analytics .analytics-metric-card:focus-visible,
#app-screen #view-analytics .analytics-metric-card.is-selected {
  background: rgba(255,255,255,0.055);
}

#app-screen #view-analytics .analytics-metric-card.is-selected {
  box-shadow: inset 0 -2px 0 rgba(201,168,76,0.72);
}

#app-screen #view-analytics .analytics-metric-card span {
  color: var(--text-3);
  font: 900 0.68rem/1 'Inter', system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0;
}

#app-screen #view-analytics .analytics-metric-card strong {
  color: var(--text-1);
  font: 900 2rem/1 'Inter', system-ui, sans-serif;
  letter-spacing: 0;
}

#app-screen #view-analytics .analytics-metric-card small {
  min-height: 30px;
  color: var(--text-3);
  font: 760 0.74rem/1.35 'Inter', system-ui, sans-serif;
}

#app-screen #view-analytics .analytics-metric-card.trend-positive small,
#app-screen #view-analytics .analytics-signal-item.tone-positive .analytics-signal-token {
  color: var(--success);
}

#app-screen #view-analytics .analytics-metric-card.trend-negative small,
#app-screen #view-analytics .analytics-signal-item.tone-risk .analytics-signal-token {
  color: var(--danger);
}

#app-screen #view-analytics .analytics-metric-card.trend-attention small,
#app-screen #view-analytics .analytics-signal-item.tone-attention .analytics-signal-token {
  color: var(--warn);
}

#app-screen #view-analytics .analytics-sparkline {
  width: 100%;
  height: 30px;
  color: var(--gold-lt);
  opacity: 0.92;
}

#app-screen #view-analytics .analytics-sparkline path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#app-screen #view-analytics .analytics-operating-copy {
  max-width: 720px;
  margin: 0;
  color: var(--text-1);
  font-size: 0.98rem;
  font-weight: 760;
  line-height: 1.55;
}

#app-screen #view-analytics .analytics-update-stack {
  display: grid;
  gap: 8px;
  margin-top: 0;
}

#app-screen #view-analytics .analytics-update-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 11px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.075);
  border-radius: 8px;
  background: rgba(255,255,255,0.035);
  transition: background 180ms ease, border-color 180ms ease;
}

#app-screen #view-analytics .analytics-update-item:hover {
  border-color: rgba(201,168,76,0.2);
  background: rgba(255,255,255,0.05);
}

#app-screen #view-analytics .analytics-update-item > span {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 8px;
  color: var(--text-2);
  font-size: 0.72rem;
  font-weight: 900;
}

#app-screen #view-analytics .analytics-update-item.tone-risk > span {
  color: var(--danger);
}

#app-screen #view-analytics .analytics-update-item.tone-win > span {
  color: var(--success);
}

#app-screen #view-analytics .analytics-update-item strong {
  color: var(--text-1);
  font-size: 0.9rem;
}

#app-screen #view-analytics .analytics-update-item p,
#app-screen #view-analytics .analytics-update-item em {
  margin: 4px 0 0;
  color: var(--text-3);
  font-size: 0.8rem;
  line-height: 1.42;
}

#app-screen #view-analytics .analytics-watch-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#app-screen #view-analytics .analytics-watch-list li {
  padding: 0;
}

#app-screen #view-analytics .analytics-watch-list li::before {
  display: none;
}

#app-screen #view-analytics .analytics-signal-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 11px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.075);
  border-radius: 8px;
  background: rgba(255,255,255,0.035);
  transition: background 180ms ease, border-color 180ms ease;
}

#app-screen #view-analytics .analytics-signal-item:hover {
  border-color: rgba(201,168,76,0.2);
  background: rgba(255,255,255,0.05);
}

#app-screen #view-analytics .analytics-signal-token {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 8px;
  color: var(--text-2);
  font-size: 0.7rem;
  font-weight: 950;
}

#app-screen #view-analytics .analytics-signal-copy {
  min-width: 0;
}

#app-screen #view-analytics .analytics-signal-copy strong {
  display: block;
  color: var(--text-1);
  font-size: 0.9rem;
  line-height: 1.32;
}

#app-screen #view-analytics .analytics-signal-copy span {
  display: block;
  margin-top: 4px;
  color: var(--text-3);
  font-size: 0.8rem;
  line-height: 1.42;
}

#app-screen #view-analytics .analytics-trend-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 4px;
  overflow-x: auto;
}

#app-screen #view-analytics .analytics-trend-tab {
  min-height: 30px;
  flex: 0 0 auto;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-2);
  font: 850 0.73rem/1 'Inter', system-ui, sans-serif;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}

#app-screen #view-analytics .analytics-trend-tab:hover,
#app-screen #view-analytics .analytics-trend-tab.active {
  background: rgba(201,168,76,0.13);
  color: var(--gold-lt);
}

#app-screen #view-analytics .analytics-chart-shell {
  position: relative;
  min-height: 240px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.075);
  border-radius: 8px;
  background: rgba(7,8,10,0.54);
}

#app-screen #view-analytics .analytics-trend-chart {
  display: block;
  width: 100%;
  height: 240px;
}

#app-screen #view-analytics .analytics-trend-chart .axis {
  stroke: rgba(255,255,255,0.1);
  stroke-width: 1;
}

#app-screen #view-analytics .analytics-trend-chart .gridline {
  stroke: rgba(255,255,255,0.06);
  stroke-width: 1;
}

#app-screen #view-analytics .analytics-trend-chart .trend-line {
  fill: none;
  stroke: var(--gold-lt);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#app-screen #view-analytics .analytics-trend-chart .trend-point {
  fill: var(--bg);
  stroke: var(--gold-lt);
  stroke-width: 2;
}

#app-screen #view-analytics .analytics-trend-chart text {
  fill: var(--text-3);
  font: 700 11px 'Inter', system-ui, sans-serif;
}

#app-screen #view-analytics .analytics-trend-tooltip {
  position: absolute;
  z-index: 2;
  max-width: 190px;
  padding: 9px 10px;
  border: 1px solid rgba(201,168,76,0.32);
  border-radius: 8px;
  background: rgba(10,11,14,0.95);
  color: var(--text-1);
  font-size: 0.74rem;
  line-height: 1.35;
  pointer-events: none;
  box-shadow: 0 18px 40px rgba(0,0,0,0.32);
}

#app-screen #view-analytics .analytics-chart-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  place-items: center;
  text-align: center;
  padding: 24px;
}

#app-screen #view-analytics .analytics-empty-state {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.075);
  border-radius: 8px;
  background: rgba(255,255,255,0.035);
  color: var(--text-3);
  font-size: 0.84rem;
  line-height: 1.45;
}

#app-screen #view-analytics .analytics-empty-state strong {
  color: var(--text-1);
  font-size: 0.92rem;
}

#app-screen #view-analytics .report-table-wrap {
  overflow-x: auto;
  border-radius: 8px;
  background: rgba(7,8,10,0.42);
}

#app-screen #view-analytics .report-table {
  min-width: 720px;
}

#app-screen #view-analytics .report-table th,
#app-screen #view-analytics .report-table td {
  border-color: rgba(255,255,255,0.075);
}

#app-screen #view-analytics .report-table td {
  color: var(--text-1);
  line-height: 1.42;
}

#app-screen #view-analytics .report-table-sub {
  margin-top: 4px;
  color: var(--text-3);
  font-size: 0.76rem;
}

#app-screen #view-analytics .report-status-pill.done,
#app-screen #view-analytics .report-status-pill.active {
  background: rgba(77,204,143,0.12);
  color: var(--success);
}

#app-screen #view-analytics .report-status-pill.risk {
  background: rgba(255,77,77,0.12);
  color: var(--danger);
}

#app-screen #view-analytics .analytics-report-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

#app-screen #view-analytics .analytics-report-actions > button {
  flex: 1 1 150px;
}

#app-screen #view-analytics .analytics-destination-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#app-screen #view-analytics .analytics-destination {
  display: grid;
  gap: 6px;
  min-height: 92px;
  padding: 13px;
  border: 1px solid rgba(255,255,255,0.075);
  border-radius: 8px;
  background: rgba(255,255,255,0.035);
}

#app-screen #view-analytics .analytics-destination span {
  color: var(--text-3);
  font: 900 0.68rem/1 'Inter', system-ui, sans-serif;
  text-transform: uppercase;
}

#app-screen #view-analytics .analytics-destination strong {
  color: var(--text-1);
  font-size: 1rem;
  line-height: 1.25;
}

#app-screen #view-analytics .analytics-destination small {
  color: var(--text-3);
  font-size: 0.76rem;
  line-height: 1.35;
}

.analytics-sync-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1290;
  background: rgba(0,0,0,0.58);
  opacity: 0;
  transition: opacity 180ms ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.analytics-sync-backdrop.active {
  opacity: 1;
}

.analytics-sync-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 1300;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: min(720px, calc(100vw - 18px));
  max-width: 100vw;
  height: 100dvh;
  padding: 22px;
  overflow-y: auto;
  border-left: 1px solid rgba(255,255,255,0.12);
  background: rgba(12,13,16,0.96);
  box-shadow: -24px 0 60px rgba(0,0,0,0.42);
  transform: translateX(102%);
  transition: transform 190ms ease;
  box-sizing: border-box;
}

.analytics-sync-drawer.active {
  transform: translateX(0);
}

.analytics-sync-drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.analytics-sync-drawer-head h3 {
  margin: 5px 0 0;
  color: var(--text-1);
  font-size: 1.3rem;
  letter-spacing: 0;
}

#app-screen #view-analytics .analytics-sync-grid {
  grid-template-columns: 1fr;
  gap: 12px;
}

#app-screen #view-analytics .analytics-sync-pane {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 8px;
  background: rgba(255,255,255,0.035);
}

#app-screen #view-analytics .analytics-sync-pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

#app-screen #view-analytics .analytics-sync-form-grid,
#app-screen #view-analytics .analytics-sync-form-grid.mirror {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

html[data-theme="light"] #app-screen #view-analytics .analytics-panel,
html[data-theme="light"] .analytics-sync-drawer {
  border-color: rgba(68,55,31,0.12);
  background: rgba(252,250,245,0.94);
}

html[data-theme="light"] #app-screen #view-analytics .analytics-metric-grid,
html[data-theme="light"] #app-screen #view-analytics .analytics-destination,
html[data-theme="light"] #app-screen #view-analytics .analytics-empty-state,
html[data-theme="light"] #app-screen #view-analytics .analytics-update-item,
html[data-theme="light"] #app-screen #view-analytics .analytics-signal-item,
html[data-theme="light"] #app-screen #view-analytics .analytics-chart-shell,
html[data-theme="light"] #app-screen #view-analytics .analytics-sync-pane {
  border-color: rgba(68,55,31,0.1);
  background: rgba(117,84,28,0.045);
}

html[data-theme="light"] #app-screen #view-analytics .analytics-metric-card {
  background: rgba(255,255,255,0.72);
}

html[data-theme="light"] .analytics-sync-backdrop {
  background: rgba(28,23,13,0.32);
}

@media (max-width: 980px) {
  #app-screen #view-analytics.view.active {
    padding: 22px 16px 36px;
  }

  #app-screen #view-analytics > .view-header {
    align-items: flex-start;
  }

  #app-screen #view-analytics .analytics-workspace-grid {
    grid-template-columns: 1fr;
  }

  #app-screen #view-analytics .analytics-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #app-screen #view-analytics .analytics-metric-card:nth-child(odd) {
    border-left: 0;
  }

  #app-screen #view-analytics .analytics-metric-card:nth-child(n + 3) {
    border-top: 1px solid rgba(255,255,255,0.07);
  }
}

@media (max-width: 640px) {
  #app-screen #view-analytics.view.active {
    padding: 18px 12px 30px;
  }

  #app-screen #view-analytics .analytics-header-copy,
  #app-screen #view-analytics .analytics-header-actions {
    flex: 0 1 auto;
    width: 100%;
  }

  #app-screen #view-analytics .view-title {
    font-size: 2.05rem;
  }

  #app-screen #view-analytics .analytics-header-actions,
  #app-screen #view-analytics .analytics-section-head,
  #app-screen #view-analytics .analytics-section-head.compact {
    align-items: stretch;
    flex-direction: column;
  }

  #app-screen #view-analytics .report-period-toggle,
  #app-screen #view-analytics .analytics-header-actions > .btn-secondary,
  #app-screen #view-analytics .analytics-section-head .btn-secondary {
    width: 100%;
  }

  #app-screen #view-analytics .report-period-btn {
    flex: 1 1 0;
  }

  #app-screen #view-analytics .analytics-metric-grid,
  #app-screen #view-analytics .analytics-destination-grid,
  #app-screen #view-analytics .analytics-sync-form-grid,
  #app-screen #view-analytics .analytics-sync-form-grid.mirror {
    grid-template-columns: 1fr;
  }

  #app-screen #view-analytics .analytics-metric-card,
  #app-screen #view-analytics .analytics-metric-card + .analytics-metric-card {
    border-left: 0;
  }

  #app-screen #view-analytics .analytics-metric-card + .analytics-metric-card {
    border-top: 1px solid rgba(255,255,255,0.07);
  }

  .analytics-sync-drawer {
    width: min(100vw, calc(100vw - 10px));
    padding: 18px 14px;
  }
}

@media (max-width: 860px) {
  #app-screen #view-directives.view.active {
    padding: 22px 16px 36px;
  }

  #app-screen #view-directives > .view-header {
    align-items: flex-start;
  }

  #app-screen #view-directives .directives-toolbar {
    grid-template-columns: 1fr;
  }

  #app-screen #view-directives .directive-history-row {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  #app-screen #view-directives .directive-history-side {
    grid-column: 2;
    justify-content: space-between;
  }
}

@media (max-width: 560px) {
  #app-screen #view-directives.view.active {
    padding: 18px 12px 30px;
  }

  #app-screen #view-directives .view-title {
    font-size: 2.05rem;
  }

  #app-screen #view-directives .directives-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #app-screen #view-directives .directives-filter-group {
    gap: 6px;
  }

  #app-screen #view-directives .directive-filter-btn {
    flex: 1 0 calc(50% - 6px);
  }

  #app-screen #view-directives .directive-history-row {
    gap: 10px;
    padding: 12px;
  }

  #app-screen #view-directives .directive-history-side {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }

  #app-screen #view-directives .directive-history-side .stat-pill {
    min-width: 0;
  }

  .directive-detail-drawer {
    width: 100vw;
    padding: 18px 14px;
  }

  .directive-detail-field {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  #directive-modal .directive-compose-steps {
    grid-template-columns: 1fr;
  }
}

/* Groups operating workspace. */
body[data-view="groups"] .notification-bar:not(.has-alert):not(.has-success):not(.has-warning):not(.is-temporary) {
  display: none !important;
}

#app-screen :where(.sidebar, .sidebar-nav, .main, .modal, .sentinel-feed, .directives-history, .analytics-sync-drawer) {
  scrollbar-width: thin;
  scrollbar-color: rgba(201,168,76,0.38) transparent;
}

#app-screen :where(.sidebar, .sidebar-nav, .main, .modal, .sentinel-feed, .directives-history, .analytics-sync-drawer)::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

#app-screen :where(.sidebar, .sidebar-nav, .main, .modal, .sentinel-feed, .directives-history, .analytics-sync-drawer)::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(201,168,76,0.34);
  background-clip: padding-box;
}

#app-screen #view-groups.view.active {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 1280px;
  min-width: 0;
  margin: 0 auto;
  padding: 24px 28px 44px;
  overflow-x: hidden;
  box-sizing: border-box;
}

#app-screen #view-groups > .view-header {
  align-items: flex-end;
  gap: 16px;
  margin: 0 0 4px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#app-screen #view-groups > .view-header::before,
#app-screen #view-groups > .view-header::after {
  display: none !important;
}

#app-screen #view-groups .groups-header-copy {
  display: grid;
  flex: 1 1 420px;
  gap: 6px;
  min-width: 0;
}

#app-screen #view-groups .view-title {
  margin: 0;
  font-size: 2.55rem;
  line-height: 0.96;
  letter-spacing: 0;
}

#app-screen #view-groups .view-sub {
  max-width: 620px;
  margin: 0;
  color: var(--text-2);
  font-size: 0.95rem;
  line-height: 1.5;
}

#app-screen #view-groups .view-header-r {
  flex: 0 0 auto;
  justify-content: flex-end;
  gap: 9px;
}

#app-screen #view-groups .filter-select {
  min-width: 148px;
  min-height: 40px;
  border-radius: 8px;
}

#app-screen #view-groups #add-group-btn {
  min-height: 40px;
  border-radius: 8px;
  white-space: nowrap;
}

#app-screen #view-groups .groups-summary-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.095);
  border-radius: 8px;
  background: rgba(255,255,255,0.095);
}

#app-screen #view-groups .group-summary-item {
  display: grid;
  gap: 6px;
  min-height: 74px;
  padding: 14px 16px;
  background: rgba(12,13,16,0.76);
}

#app-screen #view-groups .group-summary-item span {
  color: var(--text-3);
  font: 900 0.68rem/1 'Inter', system-ui, sans-serif;
  letter-spacing: 0;
  text-transform: uppercase;
}

#app-screen #view-groups .group-summary-item strong {
  color: var(--text-1);
  font: 900 1.65rem/1 'Inter', system-ui, sans-serif;
  letter-spacing: 0;
}

#app-screen #view-groups .group-summary-item em {
  color: var(--text-3);
  font: 750 0.74rem/1.25 'Inter', system-ui, sans-serif;
  font-style: normal;
}

#app-screen #view-groups .group-summary-item.warn strong { color: var(--warn); }
#app-screen #view-groups .group-summary-item.risk strong { color: var(--danger); }

#app-screen #view-groups .groups-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(300px, 360px)) !important;
  justify-content: start;
  align-items: stretch;
  gap: 14px;
  min-width: 0;
}

#app-screen #view-groups .groups-grid > .loading-state,
#app-screen #view-groups .groups-grid > .groups-empty-state {
  grid-column: 1 / -1;
  width: min(100%, 760px);
}

#app-screen #view-groups .group-card {
  display: grid;
  grid-template-rows: auto auto minmax(42px, auto) auto auto auto auto;
  gap: 12px;
  min-height: 314px;
  padding: 16px;
  overflow: visible;
  border: 1px solid rgba(255,255,255,0.095);
  border-radius: 8px;
  background: rgba(12,13,16,0.78);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.025);
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

#app-screen #view-groups .group-card:hover,
#app-screen #view-groups .group-card:focus-visible {
  border-color: rgba(201,168,76,0.34);
  background: rgba(18,19,23,0.9);
  box-shadow: 0 18px 44px rgba(0,0,0,0.22), inset 0 0 0 1px rgba(201,168,76,0.07);
  transform: translateY(-2px);
  outline: 0;
}

#app-screen #view-groups .group-card-good { box-shadow: inset 3px 0 0 rgba(121,174,139,0.72); }
#app-screen #view-groups .group-card-warn { box-shadow: inset 3px 0 0 rgba(207,161,74,0.74); }
#app-screen #view-groups .group-card-risk { box-shadow: inset 3px 0 0 rgba(217,106,106,0.78); }

#app-screen #view-groups .group-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  min-width: 0;
}

#app-screen #view-groups .group-card-identity {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  min-width: 0;
}

#app-screen #view-groups .group-card-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  background: rgba(255,255,255,0.045);
  color: var(--gold-lt);
  font: 900 0.9rem/1 'Inter', system-ui, sans-serif;
}

#app-screen #view-groups .group-card-title-block {
  display: grid;
  gap: 5px;
  min-width: 0;
}

#app-screen #view-groups .group-card-name {
  color: var(--text-1);
  font: 900 1rem/1.24 'Inter', system-ui, sans-serif;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

#app-screen #view-groups .group-card-meta {
  margin: 0;
  color: var(--text-3);
  font: 760 0.78rem/1.3 'Inter', system-ui, sans-serif;
}

#app-screen #view-groups .group-card-head-tools {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 8px;
  min-width: 36px;
}

.group-card-menu {
  position: relative;
  z-index: 8;
}

.group-card-menu.inline {
  margin-left: auto;
}

.group-menu-trigger {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  color: var(--text-2);
  font: 900 1rem/1 'Inter', system-ui, sans-serif;
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.group-menu-trigger:hover,
.group-menu-trigger:focus-visible,
.group-menu-trigger[aria-expanded="true"] {
  border-color: rgba(201,168,76,0.34);
  background: rgba(201,168,76,0.1);
  color: var(--gold-lt);
  outline: 0;
}

.group-menu-popover {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  display: grid;
  gap: 3px;
  width: 154px;
  padding: 5px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  background: rgba(10,11,14,0.97);
  box-shadow: 0 18px 44px rgba(0,0,0,0.38);
}

.group-menu-item {
  min-height: 34px;
  width: 100%;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-1);
  font: 850 0.78rem/1 'Inter', system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
}

.group-menu-item:hover,
.group-menu-item:focus-visible {
  background: rgba(255,255,255,0.065);
  outline: 0;
}

.group-menu-item.danger {
  color: var(--danger);
}

.group-menu-item.danger:hover,
.group-menu-item.danger:focus-visible {
  background: rgba(217,106,106,0.12);
}

#app-screen #view-groups .group-card-status-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.group-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 26px;
  padding: 4px 9px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  color: var(--text-2);
  background: rgba(255,255,255,0.035);
  font: 900 0.68rem/1 'Inter', system-ui, sans-serif;
  letter-spacing: 0;
  text-transform: uppercase;
}

.group-status-badge b {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.group-status-badge.good {
  border-color: rgba(121,174,139,0.32);
  color: var(--success);
  background: rgba(121,174,139,0.1);
}

.group-status-badge.warn {
  border-color: rgba(207,161,74,0.34);
  color: var(--warn);
  background: rgba(207,161,74,0.1);
}

.group-status-badge.risk {
  border-color: rgba(217,106,106,0.36);
  color: var(--danger);
  background: rgba(217,106,106,0.1);
}

#app-screen #view-groups .group-card-message {
  min-height: 40px;
  margin: 0;
  color: var(--text-2);
  font: 760 0.82rem/1.45 'Inter', system-ui, sans-serif;
}

#app-screen #view-groups .group-card-bar {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,0.075);
}

#app-screen #view-groups .group-card-bar-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold), var(--gold-lt));
  transition: width 420ms ease;
}

#app-screen #view-groups .group-card-good .group-card-bar-fill { background: linear-gradient(90deg, rgba(121,174,139,0.95), rgba(201,168,76,0.92)); }
#app-screen #view-groups .group-card-warn .group-card-bar-fill { background: linear-gradient(90deg, rgba(207,161,74,0.95), rgba(201,168,76,0.92)); }
#app-screen #view-groups .group-card-risk .group-card-bar-fill { background: linear-gradient(90deg, rgba(217,106,106,0.95), rgba(207,161,74,0.86)); }

#app-screen #view-groups .group-card-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
}

#app-screen #view-groups .group-card-metric {
  display: grid;
  gap: 5px;
  min-width: 0;
  min-height: 58px;
  padding: 9px 10px;
  border: 1px solid rgba(255,255,255,0.075);
  border-radius: 8px;
  background: rgba(255,255,255,0.035);
}

#app-screen #view-groups .group-card-metric span {
  color: var(--text-3);
  font: 900 0.62rem/1 'Inter', system-ui, sans-serif;
  letter-spacing: 0;
  text-transform: uppercase;
}

#app-screen #view-groups .group-card-metric strong {
  color: var(--text-1);
  font: 900 1rem/1 'Inter', system-ui, sans-serif;
  letter-spacing: 0;
}

#app-screen #view-groups .group-card-metric.good strong { color: var(--success); }
#app-screen #view-groups .group-card-metric.warn strong { color: var(--warn); }
#app-screen #view-groups .group-card-metric.risk strong { color: var(--danger); }

#app-screen #view-groups .group-card-activity {
  display: grid;
  gap: 6px;
  padding-top: 1px;
}

#app-screen #view-groups .group-card-activity > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--text-3);
  font-size: 0.72rem;
  line-height: 1.35;
}

#app-screen #view-groups .group-card-activity small {
  color: var(--text-3);
  font: 760 0.72rem/1.35 'Inter', system-ui, sans-serif;
}

#app-screen #view-groups .group-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 2px;
  color: var(--text-3);
  font: 900 0.72rem/1 'Inter', system-ui, sans-serif;
}

#app-screen #view-groups .group-card-footer svg {
  transition: transform 180ms ease, color 180ms ease;
}

#app-screen #view-groups .group-card:hover .group-card-footer,
#app-screen #view-groups .group-card:focus-visible .group-card-footer {
  color: var(--gold-lt);
}

#app-screen #view-groups .group-card:hover .group-card-footer svg,
#app-screen #view-groups .group-card:focus-visible .group-card-footer svg {
  transform: translateX(2px);
}

#app-screen #view-groups .group-lock-overlay {
  display: none;
}

#app-screen #view-groups .groups-empty-state {
  display: grid;
  justify-items: start;
  gap: 9px;
  padding: 26px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 8px;
  background: rgba(12,13,16,0.74);
}

#app-screen #view-groups .groups-empty-state strong {
  color: var(--text-1);
  font-size: 1rem;
}

#app-screen #view-groups .groups-empty-state span {
  max-width: 460px;
  color: var(--text-3);
  line-height: 1.45;
}

#add-group-modal {
  border-radius: 8px;
}

#add-group-modal .modal-desc {
  margin-bottom: 16px;
}

#add-group-modal .group-modal-stack {
  display: grid;
  gap: 12px;
}

#add-group-modal .group-modal-section {
  display: grid;
  gap: 13px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 8px;
  background: rgba(255,255,255,0.035);
}

#add-group-modal .group-modal-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

#add-group-modal .group-modal-section-head strong {
  color: var(--text-1);
  font: 900 0.85rem/1.15 'Inter', system-ui, sans-serif;
}

#add-group-modal .group-modal-section-head > span:not(.group-modal-connection-state) {
  color: var(--text-3);
  font: 760 0.75rem/1.25 'Inter', system-ui, sans-serif;
}

#add-group-modal .group-setup-panel {
  margin: 0;
}

#add-group-modal .group-icon-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

#add-group-modal .group-icon-preview {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(201,168,76,0.26);
  border-radius: 8px;
  background: rgba(201,168,76,0.09);
  color: var(--gold-lt);
  font: 900 1.05rem/1 'Inter', system-ui, sans-serif;
}

#add-group-modal #new-group-emoji {
  width: min(150px, 100%);
}

#add-group-modal .group-icon-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

#add-group-modal .group-icon-picker button {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  color: var(--text-1);
  font: 900 0.88rem/1 'Inter', system-ui, sans-serif;
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}

#add-group-modal .group-icon-picker button:hover,
#add-group-modal .group-icon-picker button:focus-visible {
  border-color: rgba(201,168,76,0.34);
  background: rgba(201,168,76,0.1);
  color: var(--gold-lt);
  outline: 0;
}

#add-group-modal .group-modal-connection-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 26px;
  padding: 4px 9px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  color: var(--text-2);
  background: rgba(255,255,255,0.035);
  font: 900 0.68rem/1 'Inter', system-ui, sans-serif;
  white-space: nowrap;
}

#add-group-modal .group-modal-connection-state b {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

#add-group-modal .group-modal-connection-state.connected {
  border-color: rgba(121,174,139,0.32);
  color: var(--success);
  background: rgba(121,174,139,0.1);
}

#add-group-modal .group-modal-connection-state.waiting {
  border-color: rgba(207,161,74,0.34);
  color: var(--warn);
  background: rgba(207,161,74,0.1);
}

#add-group-modal .group-modal-connection-state.issue {
  border-color: rgba(217,106,106,0.36);
  color: var(--danger);
  background: rgba(217,106,106,0.1);
}

#add-group-modal .group-modal-connection-state.quiet {
  border-color: rgba(104,180,255,0.24);
  color: var(--text-2);
  background: rgba(104,180,255,0.08);
}

#add-group-modal .nod-number-card {
  margin-top: 0;
  border-radius: 8px;
}

#add-group-modal .btn-copy.copied {
  border-color: rgba(121,174,139,0.36);
  color: var(--success);
  background: rgba(121,174,139,0.1);
}

#add-group-modal #group-submit-btn:disabled {
  opacity: 0.48;
  cursor: not-allowed;
  transform: none;
}

html[data-theme="light"] #app-screen #view-groups .groups-summary-strip,
html[data-theme="light"] #app-screen #view-groups .group-card,
html[data-theme="light"] #app-screen #view-groups .groups-empty-state,
html[data-theme="light"] #add-group-modal .group-modal-section,
html[data-theme="light"] .group-menu-popover {
  border-color: rgba(68,55,31,0.12);
}

html[data-theme="light"] #app-screen #view-groups .group-summary-item,
html[data-theme="light"] #app-screen #view-groups .group-card,
html[data-theme="light"] #app-screen #view-groups .groups-empty-state,
html[data-theme="light"] #add-group-modal .group-modal-section,
html[data-theme="light"] .group-menu-popover {
  background: rgba(252,250,245,0.94);
}

html[data-theme="light"] #app-screen #view-groups .group-card-metric,
html[data-theme="light"] #add-group-modal .group-icon-picker button,
html[data-theme="light"] .group-menu-trigger,
html[data-theme="light"] .group-menu-item:hover,
html[data-theme="light"] .group-menu-item:focus-visible {
  background: rgba(117,84,28,0.045);
}

@media (max-width: 860px) {
  #app-screen #view-groups.view.active {
    padding: 22px 16px 36px;
  }

  #app-screen #view-groups > .view-header {
    align-items: flex-start;
  }

  #app-screen #view-groups .groups-header-copy,
  #app-screen #view-groups .view-header-r {
    flex: 0 1 auto;
    width: 100%;
  }

  #app-screen #view-groups .view-header-r {
    justify-content: stretch;
  }

  #app-screen #view-groups .filter-select,
  #app-screen #view-groups #add-group-btn {
    flex: 1 1 160px;
  }
}

@media (max-width: 640px) {
  #app-screen #view-groups.view.active {
    padding: 18px 12px 30px;
  }

  #app-screen #view-groups .view-title {
    font-size: 2.05rem;
  }

  #app-screen #view-groups .groups-summary-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #app-screen #view-groups .groups-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #app-screen #view-groups .group-card {
    min-height: 0;
  }

  #add-group-modal .group-modal-section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  #add-group-modal .group-icon-input-row,
  #add-group-modal .nod-number-card,
  #add-group-modal .group-setup-actions {
    align-items: stretch;
    flex-direction: column;
  }

  #add-group-modal #new-group-emoji {
    width: 100%;
  }
}

/* Workload decision and evidence view. */
body[data-view="workload"] .notification-bar:not(.has-alert):not(.has-success):not(.has-warning):not(.is-temporary) {
  display: none !important;
}

#app-screen #view-workload.view.active {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 1280px;
  min-width: 0;
  margin: 0 auto;
  padding: 24px 28px 44px;
  overflow-x: hidden;
  box-sizing: border-box;
}

#app-screen #view-workload > .view-header {
  align-items: flex-end;
  gap: 16px;
  margin: 0 0 2px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#app-screen #view-workload > .view-header::before,
#app-screen #view-workload > .view-header::after {
  display: none !important;
}

#app-screen #view-workload .workload-header-copy {
  display: grid;
  flex: 1 1 520px;
  gap: 6px;
  min-width: 0;
}

#app-screen #view-workload .view-title {
  margin: 0;
  color: var(--text-1);
  font-size: 2.55rem;
  line-height: 0.96;
  letter-spacing: 0;
}

#app-screen #view-workload .view-sub {
  max-width: 650px;
  margin: 0;
  color: var(--text-2);
  font-size: 0.95rem;
  line-height: 1.5;
}

#app-screen #view-workload .workload-refresh-btn {
  min-height: 40px;
  border-radius: 8px;
  white-space: nowrap;
}

#app-screen #view-workload.is-refreshing .workload-stat-strip,
#app-screen #view-workload.is-refreshing .workload-roster {
  opacity: 0.72;
  transition: opacity 180ms ease;
}

#app-screen #view-workload .workload-stat-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(132px, 1fr));
  gap: 1px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.095);
  border-radius: 8px;
  background: rgba(255,255,255,0.095);
}

#app-screen #view-workload .workload-stat-card,
#app-screen #view-workload .workload-stat-card.is-primary {
  min-height: 74px;
  gap: 6px;
  padding: 14px 16px;
  border: 0;
  border-radius: 0;
  background: rgba(12,13,16,0.76);
  box-shadow: none;
}

#app-screen #view-workload .workload-stat-card strong {
  color: var(--text-1);
  font: 900 1.62rem/1 'Inter', system-ui, sans-serif;
  letter-spacing: 0;
}

#app-screen #view-workload .workload-stat-card.is-primary strong {
  color: var(--gold-lt);
}

#app-screen #view-workload .workload-stat-card span {
  color: var(--text-3);
  font: 900 0.66rem/1 'Inter', system-ui, sans-serif;
  letter-spacing: 0;
  text-transform: uppercase;
}

#app-screen #view-workload .workload-stat-card em {
  color: var(--text-3);
  font: 750 0.72rem/1.25 'Inter', system-ui, sans-serif;
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
}

#app-screen #view-workload .workload-urgency-line {
  min-height: 38px;
  display: flex;
  align-items: center;
  padding: 10px 13px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 8px;
  background: rgba(255,255,255,0.035);
  color: var(--text-2);
  font: 820 0.82rem/1.35 'Inter', system-ui, sans-serif;
}

#app-screen #view-workload .workload-urgency-line.is-risk {
  border-color: rgba(217,106,106,0.28);
  background: rgba(217,106,106,0.08);
  color: var(--danger);
}

#app-screen #view-workload .workload-urgency-line.is-clear {
  border-color: rgba(121,174,139,0.24);
  background: rgba(121,174,139,0.07);
  color: var(--success);
}

#app-screen #view-workload .workload-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
  padding: 7px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 8px;
  background: rgba(12,13,16,0.72);
}

#app-screen #view-workload .workload-filter {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-2);
  font: 850 0.75rem/1 'Inter', system-ui, sans-serif;
  letter-spacing: 0;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}

#app-screen #view-workload .workload-filter strong {
  color: var(--text-1);
  font: 900 0.78rem/1 'Inter', system-ui, sans-serif;
}

#app-screen #view-workload .workload-filter:hover,
#app-screen #view-workload .workload-filter:focus-visible,
#app-screen #view-workload .workload-filter.active {
  border-color: rgba(201,168,76,0.34);
  background: rgba(201,168,76,0.09);
  color: var(--gold-lt);
  outline: 0;
}

#app-screen #view-workload .workload-filter.active strong {
  color: var(--gold-lt);
}

#app-screen #view-workload .workload-roster {
  display: grid;
  gap: 12px;
  min-width: 0;
}

#app-screen #view-workload .workload-member {
  display: block;
  padding: 0;
  overflow: visible;
  border: 1px solid rgba(255,255,255,0.095);
  border-radius: 8px;
  background: rgba(12,13,16,0.78);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.025);
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

#app-screen #view-workload .workload-member.has-pending {
  border-color: rgba(207,161,74,0.28);
}

#app-screen #view-workload .workload-member.has-uncompleted {
  border-color: rgba(217,106,106,0.36);
  background: linear-gradient(180deg, rgba(217,106,106,0.06), transparent 38%), rgba(12,13,16,0.78);
}

#app-screen #view-workload .workload-member.is-clear {
  border-color: rgba(121,174,139,0.23);
}

#app-screen #view-workload .workload-member-head {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto 24px;
  gap: 12px;
  align-items: center;
  padding: 16px;
  cursor: pointer;
  list-style: none;
}

#app-screen #view-workload .workload-member-head::-webkit-details-marker {
  display: none;
}

#app-screen #view-workload .workload-member-head:focus-visible {
  outline: 2px solid rgba(201,168,76,0.58);
  outline-offset: -3px;
}

#app-screen #view-workload .workload-avatar {
  width: 44px;
  height: 44px;
  border-color: rgba(255,255,255,0.1);
  border-radius: 8px;
  background: rgba(255,255,255,0.045);
  color: var(--gold-lt);
  font: 900 0.82rem/1 'Inter', system-ui, sans-serif;
}

#app-screen #view-workload .workload-member-copy {
  min-width: 0;
}

#app-screen #view-workload .workload-member-copy strong {
  margin: 0;
  color: var(--text-1);
  font: 900 1rem/1.2 'Inter', system-ui, sans-serif;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

#app-screen #view-workload .workload-member-copy span {
  margin-top: 5px;
  color: var(--text-3);
  font: 760 0.78rem/1.3 'Inter', system-ui, sans-serif;
}

#app-screen #view-workload .workload-member-score {
  min-width: 72px;
  text-align: right;
}

#app-screen #view-workload .workload-member-score strong {
  color: var(--text-1);
  font: 900 1.35rem/1 'Inter', system-ui, sans-serif;
}

#app-screen #view-workload .workload-member-score span {
  margin-top: 4px;
  color: var(--text-3);
  font: 900 0.64rem/1 'Inter', system-ui, sans-serif;
  text-transform: uppercase;
}

#app-screen #view-workload .workload-member-score.is-risk strong,
#app-screen #view-workload .workload-member-score.is-risk span {
  color: var(--danger);
}

#app-screen #view-workload .workload-member-score.is-clear strong,
#app-screen #view-workload .workload-member-score.is-clear span {
  color: var(--success);
}

#app-screen #view-workload .workload-member-chevron {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: var(--text-3);
  transition: transform 180ms ease, color 180ms ease;
}

#app-screen #view-workload .workload-member[open] .workload-member-chevron {
  transform: rotate(180deg);
  color: var(--gold-lt);
}

#app-screen #view-workload .workload-member-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0 16px 12px;
}

#app-screen #view-workload .workload-member-meta-row span {
  min-height: 26px;
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,0.075);
  border-radius: 8px;
  background: rgba(255,255,255,0.035);
  color: var(--text-2);
  font: 850 0.7rem/1 'Inter', system-ui, sans-serif;
}

#app-screen #view-workload .workload-member-meta-row span.is-risk {
  border-color: rgba(217,106,106,0.28);
  color: var(--danger);
  background: rgba(217,106,106,0.08);
}

#app-screen #view-workload .workload-loadbar-wrap {
  display: grid;
  gap: 8px;
  padding: 0 16px 14px;
}

#app-screen #view-workload .workload-loadbar-label {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--text-3);
  font: 850 0.68rem/1 'Inter', system-ui, sans-serif;
  text-transform: uppercase;
}

#app-screen #view-workload .workload-loadbar-label strong {
  color: var(--text-2);
  font: 850 0.68rem/1 'Inter', system-ui, sans-serif;
  text-transform: none;
}

#app-screen #view-workload .workload-loadbar {
  height: 7px;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.075);
}

#app-screen #view-workload .workload-loadbar span {
  min-width: 0;
  background: rgba(201,168,76,0.86);
  transition: width 420ms ease;
}

#app-screen #view-workload .workload-member.has-uncompleted .workload-loadbar span {
  background: rgba(217,106,106,0.86);
}

#app-screen #view-workload .workload-member.is-clear .workload-loadbar span {
  background: rgba(121,174,139,0.86);
}

#app-screen #view-workload .workload-task-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0 16px 16px;
}

#app-screen #view-workload .workload-task-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 12px;
  align-items: start;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.085);
  border-radius: 8px;
  background: rgba(255,255,255,0.035);
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

#app-screen #view-workload .workload-task-row:hover,
#app-screen #view-workload .workload-task-row.is-expanded {
  border-color: rgba(201,168,76,0.24);
  background: rgba(255,255,255,0.048);
}

#app-screen #view-workload .workload-task-row.due-late {
  border-color: rgba(217,106,106,0.28);
  background: linear-gradient(180deg, rgba(217,106,106,0.045), transparent 78%), rgba(255,255,255,0.035);
}

#app-screen #view-workload .workload-task-row.due-today,
#app-screen #view-workload .workload-task-row.due-soon,
#app-screen #view-workload .workload-task-row.due-approval {
  border-color: rgba(207,161,74,0.25);
}

#app-screen #view-workload .workload-task-row.due-complete {
  border-color: rgba(121,174,139,0.22);
}

#app-screen #view-workload .workload-task-toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(118px, auto) auto;
  gap: 12px;
  align-items: start;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

#app-screen #view-workload .workload-task-toggle:focus-visible {
  outline: 2px solid rgba(201,168,76,0.56);
  outline-offset: 4px;
  border-radius: 6px;
}

#app-screen #view-workload .workload-task-main {
  display: grid;
  gap: 6px;
  min-width: 0;
}

#app-screen #view-workload .workload-task-main strong {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text-1);
  font: 900 0.94rem/1.36 'Inter', system-ui, sans-serif;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

#app-screen #view-workload .workload-task-row.is-expanded .workload-task-main strong {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
}

#app-screen #view-workload .workload-task-main span,
#app-screen #view-workload .workload-task-main small {
  color: var(--text-3);
  font: 760 0.76rem/1.35 'Inter', system-ui, sans-serif;
}

#app-screen #view-workload .workload-task-state {
  display: grid;
  justify-items: end;
  gap: 6px;
  min-width: 112px;
}

#app-screen #view-workload .workload-state-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 25px;
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  background: rgba(255,255,255,0.035);
  color: var(--text-2);
  font: 900 0.66rem/1 'Inter', system-ui, sans-serif;
  text-transform: uppercase;
  white-space: nowrap;
}

#app-screen #view-workload .workload-state-badge.late {
  border-color: rgba(217,106,106,0.34);
  background: rgba(217,106,106,0.1);
  color: var(--danger);
}

#app-screen #view-workload .workload-state-badge.today,
#app-screen #view-workload .workload-state-badge.soon,
#app-screen #view-workload .workload-state-badge.approval {
  border-color: rgba(207,161,74,0.32);
  background: rgba(207,161,74,0.1);
  color: var(--warn);
}

#app-screen #view-workload .workload-state-badge.complete {
  border-color: rgba(121,174,139,0.32);
  background: rgba(121,174,139,0.1);
  color: var(--success);
}

#app-screen #view-workload .workload-task-state small {
  color: var(--text-3);
  font: 760 0.72rem/1.25 'Inter', system-ui, sans-serif;
  text-align: right;
}

#app-screen #view-workload .workload-expand-label {
  min-width: 48px;
  color: var(--text-3);
  font: 850 0.7rem/1 'Inter', system-ui, sans-serif;
  text-align: right;
  transition: color 180ms ease;
}

#app-screen #view-workload .workload-task-toggle:hover .workload-expand-label,
#app-screen #view-workload .workload-task-toggle[aria-expanded="true"] .workload-expand-label {
  color: var(--gold-lt);
}

#app-screen #view-workload .workload-task-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  grid-column: auto;
  margin: 0;
}

#app-screen #view-workload .workload-task-actions .btn-xs {
  min-height: 30px;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 0.7rem;
  white-space: nowrap;
}

#app-screen #view-workload .workload-overflow {
  position: relative;
}

#app-screen #view-workload .workload-overflow-trigger {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  color: var(--text-2);
  font: 900 0.78rem/1 'Inter', system-ui, sans-serif;
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}

#app-screen #view-workload .workload-overflow-trigger:hover,
#app-screen #view-workload .workload-overflow-trigger:focus-visible,
#app-screen #view-workload .workload-overflow-trigger[aria-expanded="true"] {
  border-color: rgba(201,168,76,0.34);
  background: rgba(201,168,76,0.1);
  color: var(--gold-lt);
  outline: 0;
}

#app-screen #view-workload .workload-overflow-menu {
  position: absolute;
  z-index: 18;
  top: calc(100% + 7px);
  right: 0;
  display: grid;
  gap: 3px;
  width: 158px;
  padding: 5px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  background: rgba(10,11,14,0.98);
  box-shadow: 0 18px 44px rgba(0,0,0,0.38);
}

#app-screen #view-workload .workload-overflow-menu[hidden] {
  display: none !important;
}

#app-screen #view-workload .workload-menu-item {
  min-height: 34px;
  width: 100%;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-1);
  font: 850 0.78rem/1 'Inter', system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
}

#app-screen #view-workload .workload-menu-item:hover,
#app-screen #view-workload .workload-menu-item:focus-visible {
  background: rgba(255,255,255,0.065);
  outline: 0;
}

#app-screen #view-workload .workload-task-details {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

#app-screen #view-workload .workload-task-details[hidden] {
  display: none !important;
}

#app-screen #view-workload .workload-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

#app-screen #view-workload .workload-detail-field {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(255,255,255,0.075);
  border-radius: 8px;
  background: rgba(12,13,16,0.52);
}

#app-screen #view-workload .workload-detail-field.is-wide {
  grid-column: 1 / -1;
}

#app-screen #view-workload .workload-detail-field span {
  color: var(--text-3);
  font: 900 0.62rem/1 'Inter', system-ui, sans-serif;
  text-transform: uppercase;
}

#app-screen #view-workload .workload-detail-field strong {
  color: var(--text-1);
  font: 760 0.8rem/1.42 'Inter', system-ui, sans-serif;
  overflow-wrap: anywhere;
}

#app-screen #view-workload .workload-detail-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

#app-screen #view-workload .workload-empty-state {
  display: grid;
  justify-items: start;
  gap: 8px;
  padding: 24px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 8px;
  background: rgba(12,13,16,0.76);
}

#app-screen #view-workload .workload-empty-state strong {
  color: var(--text-1);
  font: 900 1rem/1.25 'Inter', system-ui, sans-serif;
}

#app-screen #view-workload .workload-empty-state span {
  max-width: 520px;
  color: var(--text-3);
  font: 760 0.82rem/1.45 'Inter', system-ui, sans-serif;
}

#app-screen #view-workload .workload-empty-line {
  padding: 12px;
  border: 1px dashed rgba(255,255,255,0.11);
  border-radius: 8px;
  background: rgba(255,255,255,0.025);
  color: var(--text-3);
}

#app-screen #view-workload .workload-skeleton {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 8px;
  background: rgba(12,13,16,0.76);
}

#app-screen #view-workload .workload-skeleton.short {
  width: min(100%, 760px);
}

#app-screen #view-workload .workload-skeleton span {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,0.055), rgba(255,255,255,0.12), rgba(255,255,255,0.055));
}

#app-screen #view-workload .workload-skeleton span:nth-child(1) { width: 38%; }
#app-screen #view-workload .workload-skeleton span:nth-child(2) { width: 78%; }
#app-screen #view-workload .workload-skeleton span:nth-child(3) { width: 55%; }

#workload-proof-modal {
  border-radius: 8px;
}

#workload-proof-modal .proof-modal-head {
  align-items: flex-start;
  gap: 14px;
}

#workload-proof-modal .proof-card {
  border-radius: 8px;
  background: rgba(12,13,16,0.76);
}

#workload-proof-modal .proof-row {
  border-radius: 8px;
  background: rgba(255,255,255,0.035);
}

html[data-theme="light"] #app-screen #view-workload .workload-stat-strip,
html[data-theme="light"] #app-screen #view-workload .workload-filter-bar,
html[data-theme="light"] #app-screen #view-workload .workload-member,
html[data-theme="light"] #app-screen #view-workload .workload-task-row,
html[data-theme="light"] #app-screen #view-workload .workload-empty-state,
html[data-theme="light"] #workload-proof-modal .proof-card,
html[data-theme="light"] #workload-proof-modal .proof-row {
  border-color: rgba(68,55,31,0.12);
}

html[data-theme="light"] #app-screen #view-workload .workload-stat-card,
html[data-theme="light"] #app-screen #view-workload .workload-filter-bar,
html[data-theme="light"] #app-screen #view-workload .workload-member,
html[data-theme="light"] #app-screen #view-workload .workload-task-row,
html[data-theme="light"] #app-screen #view-workload .workload-empty-state,
html[data-theme="light"] #workload-proof-modal .proof-card,
html[data-theme="light"] #workload-proof-modal .proof-row {
  background: rgba(252,250,245,0.94);
}

html[data-theme="light"] #app-screen #view-workload .workload-detail-field,
html[data-theme="light"] #app-screen #view-workload .workload-overflow-trigger,
html[data-theme="light"] #app-screen #view-workload .workload-menu-item:hover,
html[data-theme="light"] #app-screen #view-workload .workload-menu-item:focus-visible {
  background: rgba(117,84,28,0.045);
}

@media (max-width: 980px) {
  #app-screen #view-workload .workload-stat-strip,
  #app-screen #view-workload .workload-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #app-screen #view-workload .workload-task-row,
  #app-screen #view-workload .workload-task-toggle {
    grid-template-columns: 1fr;
  }

  #app-screen #view-workload .workload-task-state {
    justify-items: start;
  }

  #app-screen #view-workload .workload-task-state small {
    text-align: left;
  }

  #app-screen #view-workload .workload-expand-label {
    text-align: left;
  }

  #app-screen #view-workload .workload-task-actions,
  #app-screen #view-workload .workload-detail-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 860px) {
  #app-screen #view-workload.view.active {
    padding: 22px 16px 36px;
  }

  #app-screen #view-workload > .view-header {
    align-items: flex-start;
  }

  #app-screen #view-workload .workload-header-copy {
    flex: 0 1 auto;
    width: 100%;
  }

  #app-screen #view-workload .workload-refresh-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 640px) {
  #app-screen #view-workload.view.active {
    padding: 18px 12px 30px;
  }

  #app-screen #view-workload .view-title {
    font-size: 2.05rem;
  }

  #app-screen #view-workload .workload-stat-strip,
  #app-screen #view-workload .workload-detail-grid {
    grid-template-columns: 1fr;
  }

  #app-screen #view-workload .workload-filter {
    flex: 1 1 136px;
  }

  #app-screen #view-workload .workload-member-head {
    grid-template-columns: 40px minmax(0, 1fr) 24px;
    padding: 14px;
  }

  #app-screen #view-workload .workload-member-score {
    grid-column: 2 / 3;
    text-align: left;
  }

  #app-screen #view-workload .workload-member-chevron {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
  }

  #app-screen #view-workload .workload-member-meta-row,
  #app-screen #view-workload .workload-loadbar-wrap,
  #app-screen #view-workload .workload-task-list {
    padding-left: 14px;
    padding-right: 14px;
  }

  #app-screen #view-workload .workload-task-actions .btn-xs {
    flex: 1 1 122px;
  }

  #app-screen #view-workload .workload-overflow {
    flex: 0 0 auto;
  }

  #app-screen #view-workload .workload-overflow-menu {
    left: 0;
    right: auto;
  }
}

/* Codeflow command center refinement */
#app-screen #view-development.view.active {
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-x: hidden;
}

#app-screen #view-development > .view-header {
  order: 1;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 0;
}

#app-screen #view-development .codeflow-kicker {
  letter-spacing: 0;
}

#app-screen #view-development .codeflow-header-copy {
  min-width: 0;
  max-width: 720px;
}

#app-screen #view-development .codeflow-connection-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  margin-top: 12px;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 8px;
  background: rgba(255,255,255,0.035);
  color: var(--text-2);
  font: 780 0.78rem/1.25 'Inter', system-ui, sans-serif;
  overflow-wrap: anywhere;
}

#app-screen #view-development .codeflow-connection-line::before,
#app-screen #view-development .codeflow-connected-pill i {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 0 3px rgba(255,77,77,0.12);
}

#app-screen #view-development.is-connected .codeflow-connection-line::before,
#app-screen #view-development .codeflow-connected-pill.is-ready i {
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(77,204,143,0.12);
}

#app-screen #view-development .codeflow-connected-pill.is-attention i {
  background: var(--warn);
  box-shadow: 0 0 0 3px rgba(245,166,35,0.13);
}

#app-screen #view-development .codeflow-header-actions {
  align-items: center;
  gap: 10px;
}

#app-screen #view-development .codeflow-header-link {
  color: var(--text-2);
  font: 850 0.76rem/1.2 'Inter', system-ui, sans-serif;
  text-decoration: none;
}

#app-screen #view-development .codeflow-header-link:hover,
#app-screen #view-development .codeflow-header-link:focus-visible {
  color: var(--gold-lt);
}

#app-screen #view-development .codeflow-connected-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  background: rgba(255,255,255,0.035);
  color: var(--text-1);
  font: 900 0.72rem/1 'Inter', system-ui, sans-serif;
}

#app-screen #view-development .codeflow-status-strip {
  order: 2;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  border-color: rgba(255,255,255,0.09);
  border-radius: 8px;
  background: rgba(18,19,23,0.82);
}

#app-screen #view-development .codeflow-status-strip > div {
  padding: 15px 18px;
}

#app-screen #view-development .codeflow-status-strip span {
  color: var(--text-3);
  font: 850 0.66rem/1 'Inter', system-ui, sans-serif;
  letter-spacing: 0;
  text-transform: uppercase;
}

#app-screen #view-development .codeflow-status-strip strong {
  margin-top: 8px;
  color: var(--text-1);
  font: 880 0.95rem/1.2 'Inter', system-ui, sans-serif;
}

#app-screen #view-development .codeflow-status-strip strong.is-ready { color: var(--success); }
#app-screen #view-development .codeflow-status-strip strong.is-active { color: var(--warn); }
#app-screen #view-development .codeflow-status-strip strong.is-blocked { color: var(--danger); }
#app-screen #view-development .codeflow-status-strip strong.is-waiting { color: var(--text-2); }

#app-screen #view-development #codeflow-setup-card {
  order: 3;
  margin: 0;
  padding: 18px;
  border-color: rgba(255,255,255,0.09);
  border-radius: 8px;
  background: rgba(18,19,23,0.82);
}

#app-screen #view-development.is-connected #codeflow-pipeline-card { order: 3; }
#app-screen #view-development.is-connected .codeflow-grid { order: 4; }
#app-screen #view-development.is-connected #codeflow-setup-card { order: 5; }
#app-screen #view-development.is-connected #codeflow-setup-card.is-collapsed { display: none; }

#app-screen #view-development #codeflow-pipeline-card {
  order: 4;
  margin: 0;
  padding: 18px;
  border-color: rgba(255,255,255,0.09);
  border-radius: 8px;
  background: rgba(18,19,23,0.82);
}

#app-screen #view-development .codeflow-card-head {
  margin-bottom: 14px;
}

#app-screen #view-development .codeflow-card-head strong {
  font: 900 1rem/1.2 'Inter', system-ui, sans-serif;
}

#app-screen #view-development .codeflow-card-head em,
#app-screen #view-development #codeflow-bottleneck-label {
  max-width: 360px;
  border-color: rgba(255,255,255,0.12);
  color: var(--text-2);
  text-align: right;
  white-space: normal;
}

#app-screen #view-development #codeflow-bottleneck-label.is-ready {
  border-color: rgba(77,204,143,0.26);
  color: var(--success);
}

#app-screen #view-development #codeflow-bottleneck-label.is-active {
  border-color: rgba(245,166,35,0.26);
  color: var(--warn);
}

#app-screen #view-development #codeflow-bottleneck-label.is-blocked {
  border-color: rgba(255,77,77,0.28);
  color: var(--danger);
}

#app-screen #view-development .codeflow-stepper {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

#app-screen #view-development .codeflow-stepper-item {
  min-width: 0;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 7px 9px;
  align-items: center;
  padding: 11px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  background: rgba(255,255,255,0.025);
}

#app-screen #view-development .codeflow-stepper-item b {
  grid-row: 1 / span 2;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%;
  color: var(--text-3);
  font: 900 0.62rem/1 'Inter', system-ui, sans-serif;
}

#app-screen #view-development .codeflow-stepper-item span,
#app-screen #view-development .codeflow-current-step span,
#app-screen #view-development .codeflow-secret-row span,
#app-screen #view-development .codeflow-mini-steps b {
  color: var(--text-3);
  font: 900 0.64rem/1 'Inter', system-ui, sans-serif;
  letter-spacing: 0;
  text-transform: uppercase;
}

#app-screen #view-development .codeflow-stepper-item strong {
  color: var(--text-1);
  font: 840 0.75rem/1.25 'Inter', system-ui, sans-serif;
  overflow-wrap: anywhere;
}

#app-screen #view-development .codeflow-stepper-item.is-ready b,
#app-screen #view-development .codeflow-stepper-item.is-ready strong { color: var(--success); }
#app-screen #view-development .codeflow-stepper-item.is-active b,
#app-screen #view-development .codeflow-stepper-item.is-active strong { color: var(--warn); }
#app-screen #view-development .codeflow-stepper-item.is-blocked b,
#app-screen #view-development .codeflow-stepper-item.is-blocked strong { color: var(--danger); }

#app-screen #view-development .codeflow-current-step {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 15px;
  border: 1px dashed rgba(255,255,255,0.12);
  border-radius: 8px;
  background: rgba(255,255,255,0.025);
}

#app-screen #view-development .codeflow-current-step > div:first-child {
  min-width: 0;
}

#app-screen #view-development .codeflow-current-step strong,
#app-screen #view-development .codeflow-secret-row strong,
#app-screen #view-development .codeflow-setup-mini strong {
  display: block;
  margin-top: 5px;
  color: var(--text-1);
  font: 900 0.92rem/1.24 'Inter', system-ui, sans-serif;
}

#app-screen #view-development .codeflow-current-step p,
#app-screen #view-development .codeflow-setup-note {
  max-width: 640px;
  margin: 7px 0 0;
  color: var(--text-3);
  font: 720 0.78rem/1.5 'Inter', system-ui, sans-serif;
}

#app-screen #view-development .codeflow-current-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

#app-screen #view-development .codeflow-device-credentials {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: stretch;
  margin-top: 12px;
}

#app-screen #view-development .codeflow-device-credentials.hidden {
  display: none !important;
}

#app-screen #view-development .codeflow-secret-row {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  background: rgba(255,255,255,0.025);
}

#app-screen #view-development #codeflow-project-copy-label {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

#app-screen #view-development .codeflow-token-panel {
  margin: 12px 0 0;
  border-radius: 8px;
}

#app-screen #view-development .codeflow-pipeline {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

#app-screen #view-development .codeflow-pipeline > i {
  position: relative;
  flex: 0 0 22px;
  align-self: center;
  height: 1px;
  min-width: 22px;
  background: rgba(255,255,255,0.14);
  transform: none;
}

#app-screen #view-development .codeflow-pipeline > i::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  border-top: 1px solid rgba(255,255,255,0.22);
  border-right: 1px solid rgba(255,255,255,0.22);
  transform: translateY(-50%) rotate(45deg);
}

#app-screen #view-development .codeflow-step {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding: 13px;
  border-color: rgba(255,255,255,0.08);
  border-radius: 8px;
  background: rgba(255,255,255,0.025);
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

#app-screen #view-development .codeflow-step::after {
  display: none;
}

#app-screen #view-development .codeflow-step:hover,
#app-screen #view-development .codeflow-step:focus-visible {
  border-color: rgba(255,255,255,0.16);
  transform: translateY(-1px);
}

#app-screen #view-development .codeflow-step > b {
  color: var(--text-3);
}

#app-screen #view-development .codeflow-step strong {
  margin-bottom: 5px;
  font: 900 0.78rem/1.18 'Inter', system-ui, sans-serif;
}

#app-screen #view-development .codeflow-step small,
#app-screen #view-development .codeflow-step span em {
  display: block;
  color: var(--text-3);
  font-style: normal;
  line-height: 1.35;
}

#app-screen #view-development .codeflow-step small {
  color: var(--text-2);
  font-weight: 900;
}

#app-screen #view-development .codeflow-step span em {
  margin-top: 5px;
  font-size: 0.68rem;
}

#app-screen #view-development .codeflow-step.is-ready {
  border-color: rgba(77,204,143,0.24);
  background: rgba(77,204,143,0.055);
}

#app-screen #view-development .codeflow-step.is-ready > b,
#app-screen #view-development .codeflow-step.is-ready small {
  color: var(--success);
}

#app-screen #view-development .codeflow-step.is-active {
  border-color: rgba(245,166,35,0.25);
  background: rgba(245,166,35,0.06);
}

#app-screen #view-development .codeflow-step.is-active > b,
#app-screen #view-development .codeflow-step.is-active small {
  color: var(--warn);
}

#app-screen #view-development .codeflow-step.is-blocked {
  border-color: rgba(255,77,77,0.26);
  background: rgba(255,77,77,0.055);
}

#app-screen #view-development .codeflow-step.is-blocked > b,
#app-screen #view-development .codeflow-step.is-blocked small {
  color: var(--danger);
}

#app-screen #view-development .codeflow-grid {
  order: 5;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr);
  gap: 16px;
  align-items: start;
  margin-top: 0;
}

#app-screen #view-development .codeflow-review-panel,
#app-screen #view-development .codeflow-guardrail-card,
#app-screen #view-development .codeflow-setup-mini {
  border-color: rgba(255,255,255,0.09);
  border-radius: 8px;
  background: rgba(18,19,23,0.82);
}

#app-screen #view-development .codeflow-review-panel {
  min-width: 0;
  padding: 18px;
}

#app-screen #view-development .codeflow-review-panel .section-header {
  align-items: flex-start;
  margin: 0 0 14px;
}

#app-screen #view-development .codeflow-review-panel .section-header > span {
  align-self: center;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  color: var(--text-2);
  font: 900 0.68rem/1 'Inter', system-ui, sans-serif;
}

#app-screen #view-development .codeflow-review-list {
  gap: 10px;
}

#app-screen #view-development .codeflow-review-item {
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding: 14px;
  border-color: rgba(255,255,255,0.08);
  border-radius: 8px;
  background: rgba(255,255,255,0.025);
}

#app-screen #view-development .codeflow-review-item.is-active {
  border-color: rgba(245,166,35,0.16);
}

#app-screen #view-development .codeflow-review-item.is-blocked {
  border-color: rgba(255,77,77,0.22);
}

#app-screen #view-development .codeflow-review-avatar {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: rgba(255,255,255,0.055);
  color: var(--text-1);
}

#app-screen #view-development .codeflow-review-body {
  min-width: 0;
}

#app-screen #view-development .codeflow-review-meta {
  color: var(--text-3);
  font: 780 0.7rem/1.35 'Inter', system-ui, sans-serif;
  overflow-wrap: anywhere;
}

#app-screen #view-development .codeflow-review-body > strong {
  margin: 6px 0 5px;
  color: var(--text-1);
  font: 900 0.98rem/1.25 'Inter', system-ui, sans-serif;
  overflow-wrap: anywhere;
}

#app-screen #view-development .codeflow-review-body > p {
  margin: 0 0 9px;
  color: var(--text-2);
  font: 720 0.78rem/1.45 'Inter', system-ui, sans-serif;
  overflow-wrap: anywhere;
}

#app-screen #view-development .codeflow-review-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

#app-screen #view-development .codeflow-review-facts span {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  padding: 6px 8px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  background: rgba(255,255,255,0.025);
}

#app-screen #view-development .codeflow-review-facts b,
#app-screen #view-development .codeflow-review-facts em {
  min-width: 0;
  color: var(--text-2);
  font: 850 0.66rem/1 'Inter', system-ui, sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app-screen #view-development .codeflow-review-facts em {
  color: var(--text-3);
  font-style: normal;
}

#app-screen #view-development .codeflow-review-facts span.is-ready b { color: var(--success); }
#app-screen #view-development .codeflow-review-facts span.is-active b { color: var(--warn); }
#app-screen #view-development .codeflow-review-facts span.is-blocked b { color: var(--danger); }

#app-screen #view-development .codeflow-update-status {
  padding: 6px 9px;
  border: 1px solid rgba(245,166,35,0.22);
  border-radius: 999px;
  color: var(--warn);
  white-space: nowrap;
}

#app-screen #view-development .codeflow-update-status.is-ready {
  border-color: rgba(77,204,143,0.22);
  color: var(--success);
}

#app-screen #view-development .codeflow-update-status.is-blocked {
  border-color: rgba(255,77,77,0.24);
  color: var(--danger);
}

#app-screen #view-development .codeflow-review-actions {
  grid-column: 2 / -1;
  justify-content: flex-end;
}

#app-screen #view-development .codeflow-review-next {
  grid-column: 2 / -1;
  border-color: rgba(245,166,35,0.16);
  border-radius: 8px;
  background: rgba(245,166,35,0.055);
}

#app-screen #view-development .codeflow-empty {
  justify-items: start;
  padding: 24px;
  border-color: rgba(255,255,255,0.11);
  border-radius: 8px;
  text-align: left;
  background: rgba(255,255,255,0.02);
}

#app-screen #view-development .codeflow-empty > span {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: rgba(255,255,255,0.045);
  color: var(--text-2);
}

#app-screen #view-development .codeflow-empty strong {
  color: var(--text-1);
  font: 900 1rem/1.25 'Inter', system-ui, sans-serif;
}

#app-screen #view-development .codeflow-empty p {
  max-width: 560px;
  margin: 4px 0 10px;
  color: var(--text-3);
}

#app-screen #view-development .codeflow-side-stack {
  min-width: 0;
  display: grid;
  gap: 12px;
}

#app-screen #view-development .codeflow-guardrail-card,
#app-screen #view-development .codeflow-setup-mini {
  padding: 15px;
}

#app-screen #view-development .codeflow-guardrail-card summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
}

#app-screen #view-development .codeflow-guardrail-card summary::-webkit-details-marker {
  display: none;
}

#app-screen #view-development .codeflow-guardrail-card summary strong {
  display: block;
  margin-top: 4px;
  color: var(--text-1);
  font: 900 0.92rem/1.2 'Inter', system-ui, sans-serif;
}

#app-screen #view-development .codeflow-guardrail-card summary > span:last-child {
  flex: 0 0 auto;
  color: var(--text-2);
  font: 900 0.68rem/1 'Inter', system-ui, sans-serif;
}

#app-screen #view-development .codeflow-guardrail-card[open] summary {
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

#app-screen #view-development .codeflow-guardrail-card p {
  margin: 12px 0 0;
}

#app-screen #view-development .codeflow-guardrail-card li::before {
  border-color: var(--success);
}

#app-screen #view-development.is-disconnected .codeflow-setup-mini {
  display: none;
}

#app-screen #view-development .codeflow-mini-steps {
  display: grid;
  gap: 7px;
  margin: 12px 0;
}

#app-screen #view-development .codeflow-mini-steps span {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  background: rgba(255,255,255,0.025);
}

#app-screen #view-development .codeflow-mini-steps em {
  min-width: 0;
  color: var(--text-2);
  font: 780 0.68rem/1.25 'Inter', system-ui, sans-serif;
  font-style: normal;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app-screen #view-development .codeflow-mini-steps .is-ready em { color: var(--success); }
#app-screen #view-development .codeflow-mini-steps .is-active em { color: var(--warn); }
#app-screen #view-development .codeflow-mini-steps .is-blocked em { color: var(--danger); }

html[data-theme="light"] #app-screen #view-development .codeflow-status-strip,
html[data-theme="light"] #app-screen #view-development #codeflow-setup-card,
html[data-theme="light"] #app-screen #view-development #codeflow-pipeline-card,
html[data-theme="light"] #app-screen #view-development .codeflow-review-panel,
html[data-theme="light"] #app-screen #view-development .codeflow-guardrail-card,
html[data-theme="light"] #app-screen #view-development .codeflow-setup-mini,
html[data-theme="light"] #app-screen #view-development .codeflow-review-item {
  border-color: rgba(68,55,31,0.12);
  background: rgba(252,250,245,0.94);
}

html[data-theme="light"] #app-screen #view-development .codeflow-step,
html[data-theme="light"] #app-screen #view-development .codeflow-stepper-item,
html[data-theme="light"] #app-screen #view-development .codeflow-current-step,
html[data-theme="light"] #app-screen #view-development .codeflow-secret-row,
html[data-theme="light"] #app-screen #view-development .codeflow-review-facts span,
html[data-theme="light"] #app-screen #view-development .codeflow-mini-steps span {
  background: rgba(117,84,28,0.045);
}

@media (max-width: 1180px) {
  #app-screen #view-development .codeflow-pipeline {
    display: grid;
    grid-template-columns: 1fr;
  }

  #app-screen #view-development .codeflow-pipeline > i {
    width: 1px;
    height: 18px;
    min-width: 0;
    justify-self: 27px;
  }

  #app-screen #view-development .codeflow-pipeline > i::after {
    right: 50%;
    top: auto;
    bottom: 0;
    transform: translateX(50%) rotate(135deg);
  }

  #app-screen #view-development .codeflow-grid,
  #app-screen #view-development .codeflow-device-credentials {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  #app-screen #view-development.view.active {
    padding: 22px 16px 36px;
  }

  #app-screen #view-development > .view-header {
    align-items: flex-start;
  }

  #app-screen #view-development .codeflow-header-copy,
  #app-screen #view-development .codeflow-header-actions {
    width: 100%;
  }

  #app-screen #view-development .codeflow-header-actions {
    justify-content: flex-start;
  }

  #app-screen #view-development .codeflow-stepper,
  #app-screen #view-development .codeflow-status-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #app-screen #view-development .codeflow-status-strip > div:nth-child(2n) {
    border-right: 0;
  }

  #app-screen #view-development .codeflow-status-strip > div:nth-child(-n+2) {
    border-bottom: 1px solid var(--border);
  }

  #app-screen #view-development .codeflow-current-step {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  #app-screen #view-development.view.active {
    padding: 18px 12px 30px;
  }

  #app-screen #view-development .view-title {
    font-size: 2.05rem;
  }

  #app-screen #view-development .codeflow-status-strip,
  #app-screen #view-development .codeflow-stepper,
  #app-screen #view-development .codeflow-review-item {
    grid-template-columns: 1fr;
  }

  #app-screen #view-development .codeflow-status-strip > div {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  #app-screen #view-development .codeflow-status-strip > div:last-child {
    border-bottom: 0;
  }

  #app-screen #view-development .codeflow-update-status,
  #app-screen #view-development .codeflow-review-actions,
  #app-screen #view-development .codeflow-review-next {
    grid-column: 1 / -1;
  }

  #app-screen #view-development .codeflow-update-status {
    justify-self: start;
  }

  #app-screen #view-development .codeflow-review-actions,
  #app-screen #view-development .codeflow-current-actions {
    justify-content: stretch;
    width: 100%;
  }

  #app-screen #view-development .codeflow-review-actions :where(button, a),
  #app-screen #view-development .codeflow-current-actions :where(button, a),
  #app-screen #view-development .codeflow-header-actions :where(button, a) {
    flex: 1 1 150px;
    justify-content: center;
  }
}

/* Connections page refinement */
#app-screen #view-connections.view.active {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  padding: 24px clamp(18px, 3vw, 34px) 40px;
  overflow-x: hidden;
}

#app-screen #view-connections .connections-command-header {
  align-items: flex-end;
  min-height: 0;
  margin: 0;
  padding: 0 0 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: transparent;
  box-shadow: none;
}

#app-screen #view-connections .connections-command-header::before,
#app-screen #view-connections .connections-command-header::after {
  display: none;
}

#app-screen #view-connections .connections-command-header > div:first-child {
  max-width: 680px;
}

#app-screen #view-connections .codeflow-kicker {
  color: var(--gold-lt);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

#app-screen #view-connections .view-title {
  margin-top: 6px;
  font-size: clamp(2rem, 4vw, 3.15rem);
  letter-spacing: 0;
  line-height: 0.98;
}

#app-screen #view-connections .view-sub {
  max-width: 560px;
  margin-top: 8px;
  color: var(--text-2);
  font-size: 0.94rem;
  line-height: 1.55;
}

#app-screen #view-connections .codeflow-header-actions {
  justify-content: flex-end;
  gap: 8px;
}

#app-screen #view-connections .codeflow-header-actions :where(button, a) {
  min-height: 38px;
  border-radius: 8px;
  white-space: nowrap;
}

#app-screen #view-connections .connections-status-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  border-color: rgba(255,255,255,0.09);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012)),
    rgba(255,255,255,0.025);
  box-shadow: none;
}

#app-screen #view-connections .connections-status-strip > div {
  min-height: 92px;
  padding: 16px 18px;
  border-color: rgba(255,255,255,0.08);
}

#app-screen #view-connections .connections-status-strip span,
#app-screen #view-connections .connections-status-strip small {
  color: var(--text-3);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0;
  line-height: 1.35;
}

#app-screen #view-connections .connections-status-strip strong {
  margin: 6px 0 3px;
  color: var(--text-1);
  font-size: clamp(1.32rem, 2vw, 1.85rem);
  line-height: 1;
  letter-spacing: 0;
}

#app-screen #view-connections .connections-status-strip strong.is-connected { color: var(--success); }
#app-screen #view-connections .connections-status-strip strong.is-attention { color: var(--warn); }
#app-screen #view-connections .connections-status-strip strong.is-lost { color: var(--danger); }
#app-screen #view-connections .connections-status-strip strong.is-neutral { color: var(--text-2); }

#app-screen #view-connections .connections-layout {
  gap: 16px;
  margin: 0;
}

#app-screen #view-connections .connections-layout-wide,
#app-screen #view-connections .connections-layout-equal {
  grid-template-columns: 1fr;
}

#app-screen #view-connections .connections-ops-row {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.72fr);
  align-items: start;
}

#app-screen #view-connections .connections-panel {
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#app-screen #view-connections .connections-panel:focus {
  outline: none;
}

#app-screen #view-connections .connections-panel.is-highlighted {
  animation: connectionPanelPulse 1.2s ease;
}

@keyframes connectionPanelPulse {
  0% { filter: brightness(1); }
  32% { filter: brightness(1.2); }
  100% { filter: brightness(1); }
}

#app-screen #view-connections .codeflow-card-head {
  align-items: center;
  gap: 12px;
  margin: 0 0 11px;
}

#app-screen #view-connections .codeflow-card-head span {
  color: var(--text-3);
  font-size: 0.68rem;
  font-weight: 780;
  letter-spacing: 0;
  text-transform: uppercase;
}

#app-screen #view-connections .codeflow-card-head strong {
  margin-top: 3px;
  color: var(--text-1);
  font-size: 0.98rem;
  line-height: 1.25;
}

#app-screen #view-connections .codeflow-card-head .btn-ghost {
  min-height: 32px;
  border-radius: 8px;
}

#app-screen #view-connections .connection-app-grid,
#app-screen #view-connections .connection-available-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  gap: 10px;
  min-width: 0;
}

#app-screen #view-connections .connection-available-list {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

#app-screen #view-connections .connection-app-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 12px;
  min-height: 190px;
  min-width: 0;
  padding: 14px;
  overflow: visible;
  border: 1px solid rgba(255,255,255,0.095);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.036), rgba(255,255,255,0.014)),
    rgba(255,255,255,0.026);
  box-shadow: none;
}

#app-screen #view-connections .connection-app-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: 8px 0 0 8px;
  background: rgba(255,255,255,0.22);
}

#app-screen #view-connections .connection-app-card.is-connected::before { background: var(--success); }
#app-screen #view-connections .connection-app-card.is-attention::before { background: var(--warn); }
#app-screen #view-connections .connection-app-card.is-lost::before { background: var(--danger); }
#app-screen #view-connections .connection-app-card.is-neutral::before { background: rgba(255,255,255,0.2); }

#app-screen #view-connections .connection-app-card.is-connected {
  border-color: rgba(77,204,143,0.22);
  background:
    linear-gradient(180deg, rgba(77,204,143,0.042), rgba(255,255,255,0.012)),
    rgba(255,255,255,0.026);
}

#app-screen #view-connections .connection-app-card.is-attention {
  border-color: rgba(245,166,35,0.26);
  background:
    linear-gradient(180deg, rgba(245,166,35,0.055), rgba(255,255,255,0.014)),
    rgba(255,255,255,0.026);
}

#app-screen #view-connections .connection-app-card.is-lost {
  border-color: rgba(217,106,106,0.34);
  background:
    linear-gradient(180deg, rgba(217,106,106,0.065), rgba(255,255,255,0.014)),
    rgba(255,255,255,0.026);
}

#app-screen #view-connections .connection-app-card.is-neutral {
  border-color: rgba(255,255,255,0.082);
}

#app-screen #view-connections .connection-app-top {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}

#app-screen #view-connections .connection-app-top > div {
  min-width: 0;
}

#app-screen #view-connections .connection-app-top strong {
  display: block;
  max-width: 100%;
  color: var(--text-1);
  font-size: 0.92rem;
  font-weight: 900;
  line-height: 1.22;
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app-screen #view-connections .connection-app-mark {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  background: rgba(255,255,255,0.045);
  color: var(--text-2);
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0;
}

#app-screen #view-connections .connection-app-card.is-connected .connection-app-mark {
  border-color: rgba(77,204,143,0.28);
  background: rgba(77,204,143,0.095);
  color: var(--success);
}

#app-screen #view-connections .connection-app-card.is-attention .connection-app-mark {
  border-color: rgba(245,166,35,0.3);
  background: rgba(245,166,35,0.1);
  color: var(--warn);
}

#app-screen #view-connections .connection-app-card.is-lost .connection-app-mark {
  border-color: rgba(217,106,106,0.34);
  background: rgba(217,106,106,0.1);
  color: var(--danger);
}

#app-screen #view-connections .connection-state-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  margin-top: 7px;
  padding: 4px 7px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  background: rgba(255,255,255,0.035);
  color: var(--text-3);
  font-size: 0.64rem;
  font-style: normal;
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
}

#app-screen #view-connections .connection-state-pill b {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}

#app-screen #view-connections .connection-state-pill.is-connected {
  border-color: rgba(77,204,143,0.22);
  background: rgba(77,204,143,0.08);
  color: var(--success);
}

#app-screen #view-connections .connection-state-pill.is-attention {
  border-color: rgba(245,166,35,0.24);
  background: rgba(245,166,35,0.085);
  color: var(--warn);
}

#app-screen #view-connections .connection-state-pill.is-lost {
  border-color: rgba(217,106,106,0.28);
  background: rgba(217,106,106,0.085);
  color: var(--danger);
}

#app-screen #view-connections .connection-state-pill.is-neutral {
  border-color: rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.03);
  color: var(--text-3);
}

#app-screen #view-connections .connection-app-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
  align-content: start;
}

#app-screen #view-connections .connection-app-copy span,
#app-screen #view-connections .connection-app-copy small {
  min-width: 0;
  overflow: hidden;
  color: var(--text-2);
  font-size: 0.78rem;
  line-height: 1.42;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app-screen #view-connections .connection-app-copy small {
  color: var(--text-3);
}

#app-screen #view-connections .connection-app-meta {
  align-self: end;
  margin: 0;
  color: var(--text-3);
  font-size: 0.68rem;
  line-height: 1.3;
}

#app-screen #view-connections .connection-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  margin: 0;
}

#app-screen #view-connections .connection-card-actions .btn-sm {
  min-height: 32px;
  border-radius: 8px;
  font-size: 0.72rem;
}

#app-screen #view-connections .connection-card-menu {
  position: relative;
  flex: 0 0 auto;
}

#app-screen #view-connections .connection-card-menu summary {
  display: grid;
  width: 34px;
  height: 32px;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  background: rgba(255,255,255,0.026);
  color: var(--text-2);
  cursor: pointer;
  list-style: none;
}

#app-screen #view-connections .connection-card-menu summary::-webkit-details-marker {
  display: none;
}

#app-screen #view-connections .connection-card-menu summary:hover {
  border-color: rgba(201,168,76,0.32);
  color: var(--gold-lt);
}

#app-screen #view-connections .connection-card-menu-popover {
  position: absolute;
  z-index: 30;
  right: 0;
  top: calc(100% + 6px);
  display: grid;
  width: 170px;
  padding: 6px;
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 8px;
  background: rgba(17,17,17,0.98);
  box-shadow: 0 18px 44px rgba(0,0,0,0.34);
}

#app-screen #view-connections .connection-card-menu-popover button {
  min-height: 34px;
  padding: 8px 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-2);
  font: 800 0.72rem/1.1 'Inter', system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
}

#app-screen #view-connections .connection-card-menu-popover button:hover,
#app-screen #view-connections .connection-card-menu-popover button:focus-visible {
  background: rgba(255,255,255,0.06);
  color: var(--text-1);
}

#app-screen #view-connections .connection-card-menu-popover button.danger {
  color: color-mix(in srgb, var(--danger) 84%, var(--text-1) 16%);
}

#app-screen #view-connections .connections-available-panel {
  padding-top: 4px;
}

#app-screen #view-connections .connections-available-panel .connection-app-card {
  min-height: 170px;
}

#app-screen #view-connections .connections-ops-row .connections-panel {
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

#app-screen #view-connections .connection-health-summary {
  margin-bottom: 10px;
}

#app-screen #view-connections .connection-health-state {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 12px 13px;
  border: 1px solid rgba(255,255,255,0.095);
  border-radius: 8px;
  background: rgba(255,255,255,0.026);
}

#app-screen #view-connections .connection-health-state span,
#app-screen #view-connections .connection-health-issue-icon,
#app-screen #view-connections .connection-check-item > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: var(--text-2);
  font-size: 0.58rem;
  font-weight: 950;
  letter-spacing: 0;
}

#app-screen #view-connections .connection-health-state strong {
  min-width: 0;
  color: var(--text-1);
  font-size: 0.84rem;
  line-height: 1.3;
}

#app-screen #view-connections .connection-health-state.is-ready span {
  border-color: rgba(77,204,143,0.28);
  background: rgba(77,204,143,0.09);
  color: var(--success);
}

#app-screen #view-connections .connection-health-state.is-attention span {
  border-color: rgba(245,166,35,0.28);
  background: rgba(245,166,35,0.09);
  color: var(--warn);
}

#app-screen #view-connections .connection-health-state.is-neutral span {
  border-color: rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.035);
  color: var(--text-3);
}

#app-screen #view-connections .connections-check-list {
  display: grid;
  gap: 8px;
}

#app-screen #view-connections .connection-health-detail-list {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

#app-screen #view-connections .connection-health-issue,
#app-screen #view-connections .connection-check-item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 11px;
  border: 1px solid rgba(255,255,255,0.095);
  border-radius: 8px;
  background: rgba(255,255,255,0.024);
}

#app-screen #view-connections .connection-health-issue.is-attention {
  border-color: rgba(245,166,35,0.24);
  background: rgba(245,166,35,0.055);
}

#app-screen #view-connections .connection-health-issue.is-lost,
#app-screen #view-connections .connection-check-item.is-lost {
  border-color: rgba(217,106,106,0.3);
  background: rgba(217,106,106,0.06);
}

#app-screen #view-connections .connection-check-item.ready {
  border-color: rgba(77,204,143,0.18);
}

#app-screen #view-connections .connection-check-item.needs-work.is-neutral {
  border-color: rgba(255,255,255,0.085);
  background: rgba(255,255,255,0.018);
}

#app-screen #view-connections .connection-check-item.ready > span {
  border-color: rgba(77,204,143,0.26);
  background: rgba(77,204,143,0.08);
  color: var(--success);
}

#app-screen #view-connections .connection-check-item.needs-work.is-neutral > span {
  color: var(--text-3);
}

#app-screen #view-connections .connection-health-issue.is-attention .connection-health-issue-icon {
  border-color: rgba(245,166,35,0.28);
  background: rgba(245,166,35,0.1);
  color: var(--warn);
}

#app-screen #view-connections .connection-health-issue.is-lost .connection-health-issue-icon,
#app-screen #view-connections .connection-check-item.is-lost > span {
  border-color: rgba(217,106,106,0.34);
  background: rgba(217,106,106,0.1);
  color: var(--danger);
}

#app-screen #view-connections .connection-health-issue > div,
#app-screen #view-connections .connection-check-item > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

#app-screen #view-connections .connection-health-issue strong,
#app-screen #view-connections .connection-check-item strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text-1);
  font-size: 0.8rem;
  font-weight: 880;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app-screen #view-connections .connection-health-issue small,
#app-screen #view-connections .connection-check-item small {
  min-width: 0;
  overflow: hidden;
  color: var(--text-3);
  font-size: 0.7rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app-screen #view-connections .connection-health-issue em {
  color: var(--warn);
  font-size: 0.64rem;
  font-style: normal;
  font-weight: 850;
  line-height: 1.2;
  text-transform: uppercase;
}

#app-screen #view-connections .connection-health-issue.is-lost em {
  color: var(--danger);
}

#app-screen #view-connections .connections-audit-list {
  display: grid;
  gap: 8px;
}

#app-screen #view-connections .connection-audit-item {
  display: grid;
  grid-template-columns: minmax(82px, auto) minmax(0, 1fr);
  column-gap: 10px;
  row-gap: 2px;
  align-items: center;
  min-width: 0;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  border-radius: 0;
  background: transparent;
}

#app-screen #view-connections .connection-audit-item:last-child {
  border-bottom: 0;
}

#app-screen #view-connections .connection-audit-item span {
  grid-row: 1 / 3;
  color: var(--text-3);
  font-size: 0.66rem;
  line-height: 1.35;
}

#app-screen #view-connections .connection-audit-item strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text-1);
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app-screen #view-connections .connection-audit-item small {
  min-width: 0;
  overflow: hidden;
  color: var(--text-3);
  font-size: 0.68rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app-screen #view-connections .connections-empty {
  display: grid;
  justify-items: start;
  gap: 8px;
  min-height: 0;
  padding: 16px;
  border: 1px dashed rgba(255,255,255,0.14);
  border-radius: 8px;
  background: rgba(255,255,255,0.018);
  color: var(--text-3);
  text-align: left;
}

#app-screen #view-connections .connections-empty.compact {
  padding: 13px;
}

#app-screen #view-connections .connections-empty strong {
  color: var(--text-1);
  font-size: 0.82rem;
  line-height: 1.25;
}

#app-screen #view-connections .connections-empty span {
  color: var(--text-3);
  font-size: 0.74rem;
  line-height: 1.45;
}

html[data-theme="light"] #app-screen #view-connections .connections-command-header,
html[data-theme="light"] #app-screen #view-connections .connections-ops-row .connections-panel,
html[data-theme="light"] #app-screen #view-connections .connection-health-detail-list,
html[data-theme="light"] #app-screen #view-connections .connection-audit-item {
  border-color: rgba(68,55,31,0.12);
}

html[data-theme="light"] #app-screen #view-connections .connections-status-strip,
html[data-theme="light"] #app-screen #view-connections .connection-app-card,
html[data-theme="light"] #app-screen #view-connections .connection-health-state,
html[data-theme="light"] #app-screen #view-connections .connection-health-issue,
html[data-theme="light"] #app-screen #view-connections .connection-check-item,
html[data-theme="light"] #app-screen #view-connections .connections-empty {
  border-color: rgba(68,55,31,0.12);
  background: rgba(252,250,245,0.86);
}

html[data-theme="light"] #app-screen #view-connections .connection-app-card.is-connected {
  border-color: rgba(121,174,139,0.28);
  background: rgba(248,252,247,0.9);
}

html[data-theme="light"] #app-screen #view-connections .connection-app-card.is-attention,
html[data-theme="light"] #app-screen #view-connections .connection-health-issue.is-attention {
  border-color: rgba(207,161,74,0.28);
  background: rgba(255,250,239,0.9);
}

html[data-theme="light"] #app-screen #view-connections .connection-app-card.is-lost,
html[data-theme="light"] #app-screen #view-connections .connection-health-issue.is-lost,
html[data-theme="light"] #app-screen #view-connections .connection-check-item.is-lost {
  border-color: rgba(217,106,106,0.28);
  background: rgba(255,246,246,0.92);
}

html[data-theme="light"] #app-screen #view-connections .connection-card-menu-popover {
  border-color: rgba(68,55,31,0.14);
  background: rgba(255,253,248,0.98);
  box-shadow: 0 18px 40px rgba(64,52,28,0.14);
}

@media (max-width: 1100px) {
  #app-screen #view-connections .connections-ops-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  #app-screen #view-connections.view.active {
    padding: 22px 16px 34px;
  }

  #app-screen #view-connections .connections-command-header {
    align-items: flex-start;
  }

  #app-screen #view-connections .connections-command-header > div,
  #app-screen #view-connections .codeflow-header-actions {
    width: 100%;
  }

  #app-screen #view-connections .codeflow-header-actions {
    justify-content: flex-start;
  }

  #app-screen #view-connections .connections-status-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #app-screen #view-connections .connections-status-strip > div:nth-child(2n) {
    border-right: 0;
  }

  #app-screen #view-connections .connections-status-strip > div:nth-child(-n+2) {
    border-bottom: 1px solid var(--border);
  }
}

@media (max-width: 640px) {
  #app-screen #view-connections.view.active {
    padding: 18px 12px 30px;
    gap: 14px;
  }

  #app-screen #view-connections .view-title {
    font-size: 2.05rem;
  }

  #app-screen #view-connections .codeflow-header-actions :where(button, a),
  #app-screen #view-connections .codeflow-card-head > button,
  #app-screen #view-connections .connection-card-actions > button {
    flex: 1 1 140px;
    justify-content: center;
  }

  #app-screen #view-connections .connections-status-strip,
  #app-screen #view-connections .connection-app-grid,
  #app-screen #view-connections .connection-available-list,
  #app-screen #view-connections .connection-health-issue,
  #app-screen #view-connections .connection-check-item {
    grid-template-columns: 1fr;
  }

  #app-screen #view-connections .connections-status-strip > div {
    min-height: 78px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  #app-screen #view-connections .connections-status-strip > div:last-child {
    border-bottom: 0;
  }

  #app-screen #view-connections .connection-app-card {
    min-height: 0;
  }

  #app-screen #view-connections .connection-app-top {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  #app-screen #view-connections .connection-app-mark {
    width: 38px;
    height: 38px;
  }

  #app-screen #view-connections .connection-card-actions {
    justify-content: stretch;
    width: 100%;
  }

  #app-screen #view-connections .connection-card-menu {
    flex: 0 0 auto;
  }

  #app-screen #view-connections .connection-card-menu-popover {
    right: 0;
    left: auto;
    max-width: calc(100vw - 34px);
  }

  #app-screen #view-connections .connection-health-issue > .connection-card-actions,
  #app-screen #view-connections .connection-check-item > .connection-card-actions {
    justify-content: flex-start;
  }

  #app-screen #view-connections .connection-audit-item {
    grid-template-columns: 1fr;
  }

  #app-screen #view-connections .connection-audit-item span {
    grid-row: auto;
  }
}

/* Locker premium refinement */
#app-screen #view-locker.view.active {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  padding: 24px clamp(18px, 3vw, 34px) 40px;
  overflow-x: hidden;
}

#app-screen #view-locker .locker-command-header {
  align-items: center;
  min-height: 0;
  margin: 0;
  padding: 0 0 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: transparent;
  box-shadow: none;
}

#app-screen #view-locker .locker-command-header::before,
#app-screen #view-locker .locker-command-header::after {
  display: none;
}

#app-screen #view-locker .locker-command-header > div:first-child {
  max-width: 640px;
}

#app-screen #view-locker .view-title {
  margin: 0;
  color: var(--text-1);
  font-size: 2.45rem;
  line-height: 1;
  letter-spacing: 0;
}

#app-screen #view-locker .view-sub {
  max-width: 580px;
  margin-top: 8px;
  color: var(--text-2);
  font-size: 0.94rem;
  line-height: 1.5;
}

#app-screen #view-locker #pin-document-btn {
  min-height: 38px;
  border-radius: 8px;
  white-space: nowrap;
}

#app-screen #view-locker .locker-intelligence-search {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(212,175,55,0.045), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,0.034), rgba(255,255,255,0.014)),
    rgba(255,255,255,0.026) !important;
  box-shadow: none;
}

#app-screen #view-locker .locker-search-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

#app-screen #view-locker .locker-search-copy .codeflow-kicker,
#app-screen #view-locker .locker-section-head .codeflow-kicker,
#app-screen #view-locker .knowledge-result-head .codeflow-kicker {
  color: var(--gold-lt);
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

#app-screen #view-locker .locker-search-copy strong {
  color: var(--text-1);
  font-size: 1rem;
  line-height: 1.25;
  letter-spacing: 0;
}

#app-screen #view-locker .locker-search-copy small {
  margin: 0;
  color: var(--text-3);
  font-size: 0.78rem;
  line-height: 1.4;
}

#app-screen #view-locker .locker-search-form {
  grid-template-columns: 20px minmax(120px, 1fr) auto;
  gap: 9px;
  min-width: 0;
  min-height: 46px;
  margin: 0;
  padding: 5px 5px 5px 13px;
  border-color: rgba(255,255,255,0.1);
  border-radius: 8px;
  background: rgba(255,255,255,0.045);
}

#app-screen #view-locker .locker-search-form:focus-within {
  border-color: rgba(212,175,55,0.42);
  box-shadow: 0 0 0 3px rgba(212,175,55,0.085);
}

#app-screen #view-locker .locker-search-form svg {
  color: var(--gold-lt);
}

#app-screen #view-locker .locker-search-form input {
  min-width: 0;
  color: var(--text-1);
  font-size: 0.9rem;
}

#app-screen #view-locker .locker-search-form input::placeholder {
  color: rgba(255,255,255,0.42);
}

#app-screen #view-locker .locker-search-form .btn-primary {
  min-height: 36px;
  border-radius: 8px;
}

#app-screen #view-locker .locker-filter-stack {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.92fr) auto;
  gap: 10px;
  align-items: end;
  min-width: 0;
}

#app-screen #view-locker .locker-filter-group {
  display: grid;
  gap: 6px;
  min-width: 0;
}

#app-screen #view-locker .locker-filter-label {
  color: var(--text-3);
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

#app-screen #view-locker .locker-source-row,
#app-screen #view-locker .locker-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-width: 0;
  margin: 0;
  padding: 4px;
  border: 1px solid rgba(255,255,255,0.085);
  border-radius: 8px;
  background: rgba(255,255,255,0.028);
  box-shadow: none;
}

#app-screen #view-locker .locker-source-chip,
#app-screen #view-locker .locker-toolbar .filter-btn {
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--text-3);
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0;
  line-height: 1;
  text-transform: none;
  box-shadow: none;
}

#app-screen #view-locker .locker-source-chip:hover,
#app-screen #view-locker .locker-toolbar .filter-btn:hover {
  border-color: rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.055);
  color: var(--text-1);
  transform: none;
}

#app-screen #view-locker .locker-source-chip.active,
#app-screen #view-locker .locker-toolbar .filter-btn.active {
  border-color: rgba(212,175,55,0.22);
  background: rgba(255,255,255,0.072);
  color: var(--text-1);
  box-shadow: inset 0 0 0 1px rgba(212,175,55,0.055);
}

#app-screen #view-locker .locker-search-state {
  justify-self: end;
  min-width: max-content;
  color: var(--text-3);
  font-size: 0.7rem;
  font-weight: 750;
  line-height: 1.3;
}

#app-screen #view-locker .locker-search-results {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent !important;
  box-shadow: none;
}

#app-screen #view-locker.is-search-mode #locker-grid {
  display: none;
}

#app-screen #view-locker .knowledge-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  margin: 0 0 10px;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,0.085);
  border-radius: 8px;
  background: rgba(255,255,255,0.026);
}

#app-screen #view-locker .knowledge-result-head > div {
  min-width: 0;
}

#app-screen #view-locker .knowledge-result-head strong {
  display: block;
  min-width: 0;
  margin-top: 4px;
  overflow: hidden;
  color: var(--text-1);
  font-size: 1rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app-screen #view-locker .knowledge-result-head small {
  display: block;
  margin-top: 4px;
  color: var(--text-3);
  font-size: 0.72rem;
  line-height: 1.35;
}

#app-screen #view-locker .knowledge-result-head .btn-ghost {
  flex: 0 0 auto;
  min-height: 32px;
  border-radius: 8px;
}

#app-screen #view-locker .locker-search-warning {
  margin-bottom: 10px;
  padding: 9px 11px;
  border: 1px solid rgba(245,166,35,0.22);
  border-radius: 8px;
  background: rgba(245,166,35,0.06);
  color: var(--warn);
  font-size: 0.74rem;
  line-height: 1.4;
}

#app-screen #view-locker .locker-search-loading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 76px;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,0.085);
  border-radius: 8px;
  background: rgba(255,255,255,0.026);
}

#app-screen #view-locker .locker-search-loading > div {
  min-width: 0;
}

#app-screen #view-locker .locker-search-loading strong {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: var(--text-1);
  font-size: 1rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app-screen #view-locker .locker-search-loading small {
  display: block;
  margin-top: 4px;
  color: var(--text-3);
  font-size: 0.72rem;
  line-height: 1.35;
}

#app-screen #view-locker .knowledge-result-list,
#app-screen #view-locker .locker-file-list {
  display: grid;
  gap: 8px;
  min-width: 0;
}

#app-screen #view-locker .knowledge-result,
#app-screen #view-locker .locker-file-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 72px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.085);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.034), rgba(255,255,255,0.012)),
    rgba(255,255,255,0.02);
  box-shadow: none;
  cursor: default;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

#app-screen #view-locker .knowledge-result:hover,
#app-screen #view-locker .knowledge-result:focus,
#app-screen #view-locker .locker-file-row:hover,
#app-screen #view-locker .locker-file-row:focus {
  border-color: rgba(212,175,55,0.24);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.016)),
    rgba(255,255,255,0.026);
  outline: none;
  transform: translateY(-1px);
}

#app-screen #view-locker .locker-file-row.is-pinned {
  border-color: rgba(212,175,55,0.18);
  background:
    linear-gradient(90deg, rgba(212,175,55,0.052), transparent 58%),
    rgba(255,255,255,0.024);
}

#app-screen #view-locker .knowledge-result-type,
#app-screen #view-locker .locker-file-type {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  color: var(--gold-lt);
  font-size: 0.62rem;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1;
}

#app-screen #view-locker .knowledge-result-type.is-drive {
  border-color: rgba(115,163,255,0.2) !important;
  background: rgba(115,163,255,0.075) !important;
  color: #9bbcff !important;
}

#app-screen #view-locker .knowledge-result-main,
#app-screen #view-locker .locker-file-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

#app-screen #view-locker .knowledge-result-source,
#app-screen #view-locker .locker-file-meta {
  min-width: 0;
  overflow: hidden;
  color: var(--text-3);
  font-size: 0.68rem;
  font-weight: 720;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app-screen #view-locker .knowledge-result-main strong,
#app-screen #view-locker .locker-file-main strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text-1);
  font-size: 0.88rem;
  font-weight: 880;
  letter-spacing: 0;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app-screen #view-locker .knowledge-result-main p,
#app-screen #view-locker .locker-file-main p {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--text-3);
  font-size: 0.73rem;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app-screen #view-locker .knowledge-match-pill {
  width: max-content;
  max-width: 100%;
  padding: 3px 7px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 7px;
  background: rgba(255,255,255,0.036);
  color: var(--text-2);
  font-size: 0.66rem;
  font-weight: 780;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app-screen #view-locker .locker-file-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}

#app-screen #view-locker .locker-file-tags span {
  max-width: 150px;
  padding: 3px 7px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.085);
  border-radius: 7px;
  background: rgba(255,255,255,0.035);
  color: var(--text-3);
  font-size: 0.64rem;
  font-weight: 760;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app-screen #view-locker .locker-row-action {
  min-width: 62px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(212,175,55,0.28);
  border-radius: 8px;
  background: rgba(212,175,55,0.075);
  color: var(--gold-lt);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0;
  text-align: center;
  cursor: pointer;
}

#app-screen #view-locker .locker-row-action:hover {
  border-color: rgba(212,175,55,0.38);
  background: rgba(212,175,55,0.105);
}

#app-screen #view-locker .locker-row-action.muted {
  display: inline-grid;
  place-items: center;
  border-color: rgba(255,255,255,0.08);
  background: transparent;
  color: var(--text-3);
}

#app-screen #view-locker .locker-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

#app-screen #view-locker .locker-section {
  gap: 9px;
  min-width: 0;
}

#app-screen #view-locker .locker-section + .locker-section {
  margin-top: 4px;
}

#app-screen #view-locker .locker-section-head {
  align-items: end;
  min-width: 0;
  padding: 0 0 8px;
  border-color: rgba(255,255,255,0.08);
}

#app-screen #view-locker .locker-section-head > div {
  min-width: 0;
}

#app-screen #view-locker .locker-section-head h3 {
  margin-top: 3px;
  color: var(--text-1);
  font-size: 0.96rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.2;
}

#app-screen #view-locker .locker-section-head > span {
  color: var(--text-3);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0;
}

#app-screen #view-locker .locker-empty-state,
#app-screen #view-locker .locker-results-empty {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 10px;
  min-height: 280px;
  width: 100%;
  min-width: 0;
  padding: 28px;
  border: 1px dashed rgba(255,255,255,0.14);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.028), rgba(255,255,255,0.012)),
    rgba(255,255,255,0.018);
  color: var(--text-3);
  text-align: center;
}

#app-screen #view-locker .locker-empty-state.compact,
#app-screen #view-locker .locker-results-empty {
  min-height: 190px;
}

#app-screen #view-locker .locker-empty-state.is-warning,
#app-screen #view-locker .locker-results-empty.is-warning {
  border-color: rgba(245,166,35,0.22);
  background: rgba(245,166,35,0.045);
}

#app-screen #view-locker .locker-empty-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  color: var(--gold-lt);
}

#app-screen #view-locker .locker-empty-state strong,
#app-screen #view-locker .locker-results-empty strong {
  color: var(--text-1);
  font-size: 1.02rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.2;
}

#app-screen #view-locker .locker-empty-state span,
#app-screen #view-locker .locker-results-empty span,
#app-screen #view-locker .locker-results-empty small {
  max-width: 520px;
  color: var(--text-3);
  font-size: 0.78rem;
  line-height: 1.45;
}

#app-screen #view-locker .locker-empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  margin-top: 4px;
}

#app-screen #view-locker .locker-empty-actions button {
  min-height: 34px;
  border-radius: 8px;
}

#app-screen #view-locker .locker-drive-pill {
  display: inline-grid;
  min-height: 34px;
  place-items: center;
  padding: 0 11px;
  border: 1px solid rgba(77,204,143,0.22);
  border-radius: 8px;
  background: rgba(77,204,143,0.075);
  color: var(--success);
  font-size: 0.72rem;
  font-weight: 820;
}

#app-screen #view-locker .loading-state.compact {
  min-height: 120px;
  padding: 26px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  background: rgba(255,255,255,0.018);
}

html[data-theme="light"] #app-screen #view-locker .locker-command-header,
html[data-theme="light"] #app-screen #view-locker .locker-section-head {
  border-color: rgba(68,55,31,0.12);
}

html[data-theme="light"] #app-screen #view-locker .locker-intelligence-search,
html[data-theme="light"] #app-screen #view-locker .locker-search-form,
html[data-theme="light"] #app-screen #view-locker .locker-source-row,
html[data-theme="light"] #app-screen #view-locker .locker-toolbar,
html[data-theme="light"] #app-screen #view-locker .knowledge-result-head,
html[data-theme="light"] #app-screen #view-locker .knowledge-result,
html[data-theme="light"] #app-screen #view-locker .locker-file-row,
html[data-theme="light"] #app-screen #view-locker .locker-empty-state,
html[data-theme="light"] #app-screen #view-locker .locker-results-empty,
html[data-theme="light"] #app-screen #view-locker .loading-state.compact {
  border-color: rgba(68,55,31,0.12);
  background: rgba(252,250,245,0.88) !important;
}

html[data-theme="light"] #app-screen #view-locker .locker-source-chip.active,
html[data-theme="light"] #app-screen #view-locker .locker-toolbar .filter-btn.active,
html[data-theme="light"] #app-screen #view-locker .knowledge-match-pill,
html[data-theme="light"] #app-screen #view-locker .locker-file-tags span {
  border-color: rgba(68,55,31,0.12);
  background: rgba(255,255,255,0.72);
}

html[data-theme="light"] #app-screen #view-locker .locker-search-form input::placeholder {
  color: rgba(58,47,28,0.46);
}

@media (max-width: 980px) {
  #app-screen #view-locker .locker-filter-stack {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  #app-screen #view-locker .locker-search-state {
    justify-self: start;
    min-width: 0;
  }
}

@media (max-width: 760px) {
  #app-screen #view-locker.view.active {
    padding: 22px 16px 34px;
  }

  #app-screen #view-locker .locker-command-header {
    align-items: flex-start;
  }

  #app-screen #view-locker .locker-command-header > div,
  #app-screen #view-locker #pin-document-btn {
    width: 100%;
  }

  #app-screen #view-locker .view-title {
    font-size: 2.05rem;
  }
}

@media (max-width: 620px) {
  #app-screen #view-locker.view.active {
    padding: 18px 12px 30px;
    gap: 14px;
  }

  #app-screen #view-locker .locker-intelligence-search {
    padding: 14px;
  }

  #app-screen #view-locker .locker-search-form {
    grid-template-columns: 20px minmax(0, 1fr);
  }

  #app-screen #view-locker .locker-search-form button {
    grid-column: 1 / -1;
    width: 100%;
  }

  #app-screen #view-locker .knowledge-result,
  #app-screen #view-locker .locker-file-row {
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: start;
  }

  #app-screen #view-locker .knowledge-result-type,
  #app-screen #view-locker .locker-file-type {
    width: 40px;
    height: 40px;
  }

  #app-screen #view-locker .locker-row-action {
    grid-column: 2;
    justify-self: start;
    min-width: 72px;
  }

  #app-screen #view-locker .knowledge-result-head,
  #app-screen #view-locker .locker-search-loading {
    align-items: flex-start;
    flex-direction: column;
  }

  #app-screen #view-locker .knowledge-result-head strong,
  #app-screen #view-locker .locker-search-loading strong {
    white-space: normal;
  }

  #app-screen #view-locker .locker-empty-state,
  #app-screen #view-locker .locker-results-empty {
    min-height: 230px;
    padding: 22px 16px;
  }
}

/* Shared workspace dialogs and notifications */
#confirm-overlay.app-dialog-overlay {
  z-index: 10020;
  padding: 24px;
  overflow-y: auto;
}
#confirm-dialog.app-dialog {
  width: min(100%, 540px);
  max-width: 540px;
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  margin: auto;
  padding: 28px;
  text-align: left;
  color: var(--text-1);
  background: var(--bg-2);
  border: 1px solid var(--border-med);
  border-top: 2px solid var(--gold);
  border-radius: 20px;
  box-shadow: 0 28px 100px rgba(0,0,0,.42);
  animation: nod-dialog-in .18s ease both;
}
@keyframes nod-dialog-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.app-dialog-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; }
.app-dialog-mark {
  width: 32px; height: 32px; display: grid; place-items: center; flex-shrink: 0;
  border: 1px solid var(--gold); border-radius: 9px; color: var(--gold);
  font: 24px 'Bebas Neue', sans-serif;
}
.app-dialog-eyebrow { color: var(--text-3); font: 10px 'JetBrains Mono', monospace; letter-spacing: .1em; }
.app-dialog-close, .toast-dismiss {
  display: grid; place-items: center; flex-shrink: 0; padding: 0;
  width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 9px;
  background: transparent; color: var(--text-3); cursor: pointer;
}
.app-dialog-close { margin-left: auto; }
.app-dialog-close:hover, .toast-dismiss:hover { background: var(--surface-2); color: var(--text-1); }
#confirm-dialog.app-dialog #confirm-title {
  margin: 0 0 10px; color: var(--text-1);
  font: 400 32px/1.12 'Bebas Neue', 'Inter', sans-serif;
  letter-spacing: .02em; overflow-wrap: anywhere;
}
#confirm-dialog.app-dialog #confirm-message {
  margin: 0 0 24px; font: 400 13px/1.7 'Inter', sans-serif; color: var(--text-2);
  white-space: pre-line; overflow-wrap: anywhere;
}
.app-dialog-fields { display: grid; gap: 18px; }
.app-dialog-fields:empty { display: none; }
.app-dialog .field-group { margin: 0; }
.app-dialog .field-group label {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
  color: var(--text-1); font: 600 12px 'Inter', sans-serif;
}
.app-dialog-optional { margin-left: auto; color: var(--text-3); font-size: 10px; font-weight: 400; }
.app-dialog .field-group :is(input, textarea) {
  box-sizing: border-box; display: block; width: 100%; min-width: 0;
  border: 1px solid var(--border-med); border-radius: 10px;
  background: var(--bg); padding: 12px 14px; color: var(--text-1);
  font: 400 13px/1.6 'Inter', sans-serif; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.app-dialog .field-group textarea { resize: vertical; min-height: 100px; max-height: 240px; }
.app-dialog .field-group :is(input, textarea)::placeholder { color: var(--text-3); }
.app-dialog .field-group :is(input, textarea):focus {
  border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-dim);
}
.app-dialog .field-group :is(input, textarea)[aria-invalid='true'] { border-color: var(--danger); }
.app-dialog .field-group small { display: block; margin-top: 7px; color: var(--text-3); font-size: 11px; line-height: 1.6; }
.app-dialog-error {
  margin: 18px 0 0; padding: 12px 14px; border: 1px solid var(--danger);
  border-radius: 10px; background: var(--danger-dim); color: var(--danger);
  font-size: 12px; line-height: 1.6; overflow-wrap: anywhere;
}
.app-dialog-error[hidden] { display: none; }
#confirm-dialog .confirm-actions {
  margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: 10px;
}
#confirm-dialog .confirm-actions button {
  flex: 0 1 auto; min-height: 44px; padding: 11px 18px; border-radius: 10px;
  font: 600 12px/1.4 'Inter', sans-serif; white-space: normal;
}
#confirm-dialog .confirm-actions .btn-primary { background: var(--gold); border: 1px solid var(--gold); color: #111; box-shadow: none; }
#confirm-dialog .confirm-actions .btn-primary:hover { filter: brightness(1.08); }
#confirm-dialog button:disabled { opacity: .6; cursor: wait; }
#confirm-dialog :is(button, input, textarea):focus-visible,
.toast-dismiss:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.modal.active { max-height: calc(100dvh - 40px); overflow-y: auto; border: 1px solid var(--border-med); border-top: 2px solid var(--gold); }
.modal .modal-title { padding-right: 28px; }
.modal .modal-desc { color: var(--text-2); line-height: 1.7; }
.modal .modal-actions { padding-top: 18px; border-top: 1px solid var(--border); }
#toast-container {
  z-index: 10030; right: 24px; bottom: 24px;
  width: min(400px, calc(100vw - 32px)); max-width: none;
  display: flex; flex-direction: column; gap: 10px; pointer-events: none;
}
#toast-container .toast {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; min-width: 0;
  box-sizing: border-box; padding: 16px; margin: 0;
  background: var(--bg-2); color: var(--text-1); border: 1px solid var(--border-med);
  border-radius: 14px; box-shadow: var(--shadow-lg); pointer-events: auto;
}
.toast-icon {
  display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px;
  border-radius: 9px; background: var(--gold-dim); color: var(--gold);
}
.toast.success .toast-icon { background: var(--success-dim); color: var(--success); }
.toast.error .toast-icon { background: var(--danger-dim); color: var(--danger); }
.toast.warning .toast-icon { background: var(--warn-dim); color: var(--warn); }
.toast-copy { display: grid; flex: 1; min-width: 0; gap: 4px; }
.toast-copy strong { font: 600 12px/1.5 'Inter', sans-serif; }
.toast-copy span { color: var(--text-2); font: 400 12px/1.6 'Inter', sans-serif; overflow-wrap: anywhere; }
.toast-dismiss { width: 28px; height: 28px; border: 0; }
@media (max-width: 600px) {
  #confirm-overlay.app-dialog-overlay { padding: 12px; }
  #confirm-dialog.app-dialog { max-height: calc(100dvh - 24px); padding: 22px 18px; border-radius: 16px; }
  #confirm-dialog.app-dialog #confirm-title { font-size: 28px; }
  .app-dialog .field-group :is(input, textarea) { font-size: 16px; }
  #confirm-dialog .confirm-actions button { flex: 1; padding: 12px; }
  #toast-container { right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  #confirm-overlay, #confirm-dialog.app-dialog, #toast-container .toast { animation: none; }
}

/* Subscription page refinement */
#app-screen #view-subscription.view.active {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 28px clamp(18px, 3vw, 40px) 44px;
}

#app-screen #view-subscription .view-header {
  margin-bottom: 16px;
  padding: 20px 22px;
  border-radius: 14px;
}

#app-screen #view-subscription .view-title {
  margin: 0;
  color: var(--text-1);
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
}

#app-screen #view-subscription .view-sub {
  margin-top: 8px;
  color: var(--text-2);
  font-size: 0.92rem;
  line-height: 1.45;
  letter-spacing: 0;
}

#app-screen #view-subscription .subscription-page-shell {
  width: 100%;
  max-width: 1180px;
}

#app-screen #view-subscription .subscription-layout {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#app-screen #view-subscription .subscription-competition-banner,
#app-screen #view-subscription .subscription-current,
#app-screen #view-subscription .subscription-plan-card,
#app-screen #view-subscription .subscription-comparison,
#app-screen #view-subscription .subscription-empty,
#app-screen #view-subscription .subscription-refresh-note {
  border: 1px solid var(--border);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.055), rgba(255,255,255,0.014) 54%, rgba(212,175,55,0.035)),
    var(--surface);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 18px 52px rgba(0,0,0,0.24);
}

#app-screen #view-subscription .subscription-competition-banner {
  display: grid;
  gap: 6px;
  padding: 16px 18px;
  border-color: rgba(212,175,55,0.22);
  background:
    linear-gradient(135deg, rgba(212,175,55,0.11), rgba(255,255,255,0.018)),
    var(--surface);
}

#app-screen #view-subscription .subscription-competition-banner span,
#app-screen #view-subscription .subscription-kicker,
#app-screen #view-subscription .subscription-section-title,
#app-screen #view-subscription .subscription-plan-badge {
  color: var(--gold-lt);
  font-size: 0.72rem;
  font-weight: 860;
  letter-spacing: 0;
  text-transform: uppercase;
}

#app-screen #view-subscription .subscription-competition-banner strong {
  color: var(--text-1);
  font-size: 0.95rem;
  font-weight: 760;
  line-height: 1.45;
}

#app-screen #view-subscription .subscription-current {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  align-items: start;
  padding: 22px;
  border-color: rgba(212,175,55,0.25);
}

#app-screen #view-subscription .subscription-current-copy {
  display: grid;
  gap: 14px;
  min-width: 0;
}

#app-screen #view-subscription .subscription-current-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
}

#app-screen #view-subscription .subscription-plan-name {
  margin: 0;
  color: var(--text-1);
  font-size: 1.72rem;
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: 0;
}

#app-screen #view-subscription .subscription-plan-meta {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 6px;
  color: var(--text-3);
  font-size: 0.84rem;
  line-height: 1.45;
  letter-spacing: 0;
}

#app-screen #view-subscription .subscription-current-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#app-screen #view-subscription .subscription-current-meta span {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,0.035);
  color: var(--text-2);
  font-size: 0.8rem;
  font-weight: 760;
}

#app-screen #view-subscription .subscription-access-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
  color: var(--text-1);
  font-size: 0.88rem;
  font-weight: 780;
}

#app-screen #view-subscription .subscription-access-line b {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(77,204,143,0.12);
  color: var(--success);
  font-size: 0.78rem;
  flex: 0 0 auto;
}

#app-screen #view-subscription .subscription-access-line button {
  margin-left: auto;
}

#app-screen #view-subscription .subscription-price-block {
  min-width: 116px;
  text-align: right;
  white-space: nowrap;
}

#app-screen #view-subscription .subscription-price {
  display: block;
  color: var(--text-1);
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
}

#app-screen #view-subscription .subscription-price-note {
  display: block;
  margin-top: 8px;
  color: var(--text-3);
  font-size: 0.78rem;
  font-weight: 760;
  letter-spacing: 0;
}

#app-screen #view-subscription .subscription-manage-btn {
  flex: 0 0 auto;
}

#app-screen #view-subscription .subscription-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 0 10px;
}

#app-screen #view-subscription .subscription-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

#app-screen #view-subscription .subscription-plan-card {
  display: flex;
  flex-direction: column;
  min-height: 338px;
  padding: 20px;
  overflow: hidden;
}

#app-screen #view-subscription .subscription-plan-card.active {
  border-color: rgba(212,175,55,0.45);
  background:
    linear-gradient(145deg, rgba(212,175,55,0.13), rgba(255,255,255,0.018) 46%),
    var(--surface);
}

#app-screen #view-subscription .subscription-plan-card.locked {
  opacity: 0.72;
}

#app-screen #view-subscription .subscription-plan-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px;
}

#app-screen #view-subscription .subscription-plan-top h3 {
  margin: 8px 0 0;
  color: var(--text-1);
  font-size: 1.02rem;
  font-weight: 850;
  line-height: 1.32;
  letter-spacing: 0;
}

#app-screen #view-subscription .current-plan-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border: 1px solid rgba(212,175,55,0.35);
  border-radius: 999px;
  background: rgba(212,175,55,0.12);
  color: var(--gold-lt);
  font-size: 0.68rem;
  font-weight: 860;
  letter-spacing: 0;
}

#app-screen #view-subscription .subscription-plan-price {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-bottom: 10px;
}

#app-screen #view-subscription .subscription-plan-price strong {
  color: var(--text-1);
  font-size: 1.7rem;
  font-weight: 900;
  line-height: 1;
}

#app-screen #view-subscription .subscription-plan-price span {
  color: var(--text-3);
  font-size: 0.8rem;
  font-weight: 740;
}

#app-screen #view-subscription .subscription-plan-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 18px 0 20px;
  padding: 0;
  list-style: none;
}

#app-screen #view-subscription .subscription-plan-list li {
  position: relative;
  padding-left: 18px;
  color: var(--text-2);
  font-size: 0.84rem;
  line-height: 1.42;
}

#app-screen #view-subscription .subscription-plan-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
}

#app-screen #view-subscription .subscription-action,
#app-screen #view-subscription .subscription-current-status {
  width: 100%;
  min-height: 38px;
  margin-top: auto;
}

#app-screen #view-subscription .subscription-current-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(77,204,143,0.22);
  border-radius: 10px;
  background: rgba(77,204,143,0.08);
  color: var(--success);
  font-size: 0.84rem;
  font-weight: 850;
}

#app-screen #view-subscription .subscription-lock-note {
  margin: auto 0 12px;
  padding: 9px 11px;
  border: 1px solid rgba(245,158,11,0.28);
  border-radius: 10px;
  color: var(--warn);
  background: rgba(245,158,11,0.08);
  font-size: 0.76rem;
  font-weight: 780;
  line-height: 1.35;
}

#app-screen #view-subscription .subscription-comparison {
  padding: 0;
  overflow: hidden;
}

#app-screen #view-subscription .subscription-comparison summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 18px;
  color: var(--text-1);
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 850;
  list-style: none;
}

#app-screen #view-subscription .subscription-comparison summary::-webkit-details-marker {
  display: none;
}

#app-screen #view-subscription .subscription-comparison[open] summary {
  border-bottom: 1px solid var(--border);
}

#app-screen #view-subscription .subscription-comparison p {
  margin: 14px 18px 0;
  color: var(--text-3);
  font-size: 0.84rem;
  line-height: 1.5;
}

#app-screen #view-subscription .subscription-table-wrap {
  overflow-x: auto;
  padding: 16px 18px 18px;
}

#app-screen #view-subscription .subscription-comparison table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
}

#app-screen #view-subscription .subscription-comparison th,
#app-screen #view-subscription .subscription-comparison td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text-2);
  font-size: 0.82rem;
  text-align: center;
}

#app-screen #view-subscription .subscription-comparison th:first-child {
  text-align: left;
  color: var(--text-1);
}

#app-screen #view-subscription .subscription-comparison thead th {
  color: var(--gold-lt);
  font-size: 0.72rem;
  font-weight: 860;
  letter-spacing: 0;
  text-transform: uppercase;
}

#app-screen #view-subscription .subscription-comparison .is-on {
  color: var(--success);
  font-weight: 900;
}

#app-screen #view-subscription .subscription-comparison .is-off {
  color: var(--text-3);
}

#app-screen #view-subscription .subscription-refresh-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  color: var(--text-2);
  font-size: 0.84rem;
  font-weight: 740;
}

#app-screen #view-subscription .subscription-refresh-note.warn {
  border-color: rgba(245,158,11,0.28);
  color: var(--warn);
}

#app-screen #view-subscription .subscription-empty {
  display: grid;
  gap: 10px;
  padding: 22px;
}

#app-screen #view-subscription .subscription-empty strong {
  color: var(--text-1);
  font-size: 1rem;
}

#app-screen #view-subscription .subscription-empty span {
  color: var(--text-2);
  line-height: 1.5;
}

#app-screen #view-subscription .subscription-skeleton-line,
#app-screen #view-subscription .subscription-skeleton-chip,
#app-screen #view-subscription .subscription-skeleton-price,
#app-screen #view-subscription .subscription-skeleton-list {
  display: block;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,0.08), rgba(255,255,255,0.16), rgba(255,255,255,0.08));
  background-size: 220% 100%;
  animation: subscriptionSkeleton 1.35s ease-in-out infinite;
}

#app-screen #view-subscription .subscription-skeleton-line {
  height: 12px;
  margin-top: 10px;
}

#app-screen #view-subscription .subscription-skeleton-line.w-34 { width: 34%; }
#app-screen #view-subscription .subscription-skeleton-line.w-42 { width: 42%; height: 22px; }
#app-screen #view-subscription .subscription-skeleton-line.w-60 { width: 60%; }
#app-screen #view-subscription .subscription-skeleton-line.w-70 { width: 70%; }

#app-screen #view-subscription .subscription-skeleton-chip {
  width: 128px;
  height: 30px;
}

#app-screen #view-subscription .subscription-skeleton-chip.wide {
  width: 188px;
}

#app-screen #view-subscription .subscription-skeleton-price {
  width: 88px;
  height: 34px;
  margin-left: auto;
}

#app-screen #view-subscription .subscription-skeleton-list {
  height: 138px;
  margin-top: 24px;
  border-radius: 12px;
}

@keyframes subscriptionSkeleton {
  0% { background-position: 140% 0; }
  100% { background-position: -80% 0; }
}

@media (max-width: 980px) {
  #app-screen #view-subscription .subscription-plans {
    grid-template-columns: 1fr;
  }

  #app-screen #view-subscription .subscription-plan-card {
    min-height: 0;
  }
}

@media (max-width: 760px) {
  #app-screen #view-subscription.view.active {
    padding: 18px 12px 32px;
  }

  #app-screen #view-subscription .view-header {
    padding: 18px;
  }

  #app-screen #view-subscription .view-title {
    font-size: 1.72rem;
  }

  #app-screen #view-subscription .subscription-current,
  #app-screen #view-subscription .subscription-current-main {
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  #app-screen #view-subscription .subscription-current-main,
  #app-screen #view-subscription .subscription-access-line {
    align-items: stretch;
  }

  #app-screen #view-subscription .subscription-access-line button,
  #app-screen #view-subscription .subscription-manage-btn {
    width: 100%;
    margin-left: 0;
  }

  #app-screen #view-subscription .subscription-price-block {
    text-align: left;
  }

  #app-screen #view-subscription .subscription-skeleton-price {
    margin-left: 0;
  }

  #app-screen #view-subscription .subscription-refresh-note {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  #app-screen #view-subscription .subscription-skeleton-line,
  #app-screen #view-subscription .subscription-skeleton-chip,
  #app-screen #view-subscription .subscription-skeleton-price,
  #app-screen #view-subscription .subscription-skeleton-list {
    animation: none;
  }
}

/* Notifications - Founder Action Inbox */
#app-screen #view-notifications.view.active {
  width: min(100%, 1120px);
  margin: 0 auto;
  padding: 22px 22px 40px;
}

#app-screen #view-notifications .notifications-header {
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  min-height: 0;
  margin-bottom: 14px;
  padding: 20px 22px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(18,19,23,0.94), rgba(13,13,15,0.96));
}

#app-screen #view-notifications .view-title {
  margin: 0;
  color: var(--text-1);
  font-size: 1.95rem;
  line-height: 1.02;
  letter-spacing: 0;
}

#app-screen #view-notifications .view-sub {
  max-width: 620px;
  margin-top: 8px;
  color: var(--text-2);
  font-size: 0.88rem;
  line-height: 1.45;
}

#app-screen #view-notifications .notif-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

#app-screen #view-notifications .notif-unread-summary {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 7px 10px;
  border: 1px solid rgba(201,168,76,0.22);
  border-radius: 999px;
  background: rgba(201,168,76,0.08);
  color: var(--gold-lt);
  font: 850 0.74rem/1 'Inter', system-ui, sans-serif;
}

#app-screen #view-notifications .notifications-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
}

#app-screen #view-notifications .notif-filter-group {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  min-width: 0;
}

#app-screen #view-notifications .notif-filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 8px;
  background: rgba(255,255,255,0.035);
  color: var(--text-2);
  font: 850 0.74rem/1 'Inter', system-ui, sans-serif;
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}

#app-screen #view-notifications .notif-filter-btn em {
  min-width: 18px;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.055);
  color: var(--text-3);
  font-style: normal;
  font-size: 0.68rem;
  text-align: center;
}

#app-screen #view-notifications .notif-filter-btn:hover:not(:disabled),
#app-screen #view-notifications .notif-filter-btn:focus-visible,
#app-screen #view-notifications .notif-filter-btn.active {
  border-color: rgba(201,168,76,0.36);
  background: rgba(201,168,76,0.08);
  color: var(--gold-lt);
}

#app-screen #view-notifications .notif-filter-btn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

#app-screen #view-notifications .notif-group-filter select {
  min-height: 32px;
  max-width: 210px;
  padding: 6px 32px 6px 10px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 8px;
  background: rgba(255,255,255,0.035);
  color: var(--text-2);
  font: 850 0.74rem/1 'Inter', system-ui, sans-serif;
}

#app-screen #view-notifications .notif-list {
  display: grid;
  gap: 10px;
  min-width: 0;
}

#app-screen #view-notifications .notif-refresh-warning {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 9px 11px;
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 8px;
  background: rgba(201,168,76,0.07);
  color: var(--gold-lt);
  font: 780 0.78rem/1.35 'Inter', system-ui, sans-serif;
}

#app-screen #view-notifications .notif-date-group {
  display: grid;
  gap: 10px;
}

#app-screen #view-notifications .notif-date-group + .notif-date-group {
  margin-top: 8px;
}

#app-screen #view-notifications .notif-date-group > h3 {
  margin: 8px 0 0;
  color: var(--text-3);
  font: 900 0.67rem/1 'Inter', system-ui, sans-serif;
  letter-spacing: 0;
}

#app-screen #view-notifications .notif-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  min-height: 78px;
  padding: 13px 14px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  background: rgba(18,19,23,0.84);
  color: var(--text-1);
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

#app-screen #view-notifications .notif-row:hover,
#app-screen #view-notifications .notif-row:focus-visible {
  border-color: rgba(201,168,76,0.24);
  background: rgba(22,23,27,0.94);
  outline: none;
}

#app-screen #view-notifications .notif-row.is-unread {
  background: rgba(23,24,28,0.94);
  border-color: rgba(201,168,76,0.18);
}

#app-screen #view-notifications .notif-row.is-actionable {
  border-color: rgba(201,168,76,0.26);
  box-shadow: inset 2px 0 0 rgba(201,168,76,0.58);
}

#app-screen #view-notifications .notif-row.is-read {
  opacity: 0.82;
}

#app-screen #view-notifications .notif-signal {
  display: grid;
  justify-items: center;
  gap: 8px;
}

#app-screen #view-notifications .notif-unread-dot,
#app-screen #view-notifications .notif-read-spacer {
  width: 8px;
  height: 8px;
  border-radius: 999px;
}

#app-screen #view-notifications .notif-unread-dot {
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(201,168,76,0.11);
}

#app-screen #view-notifications .notif-icon {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  color: var(--text-2);
}

#app-screen #view-notifications .tone-action .notif-icon,
#app-screen #view-notifications .tone-risk .notif-icon {
  border-color: rgba(201,168,76,0.28);
  background: rgba(201,168,76,0.08);
  color: var(--gold-lt);
}

#app-screen #view-notifications .tone-success .notif-icon {
  border-color: rgba(77,204,143,0.28);
  background: rgba(77,204,143,0.08);
  color: var(--success);
}

#app-screen #view-notifications .notif-main {
  min-width: 0;
}

#app-screen #view-notifications .notif-label-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

#app-screen #view-notifications .notif-type-label {
  color: var(--text-3);
  font: 900 0.66rem/1 'Inter', system-ui, sans-serif;
  letter-spacing: 0;
}

#app-screen #view-notifications .tone-action .notif-type-label,
#app-screen #view-notifications .tone-risk .notif-type-label {
  color: var(--gold-lt);
}

#app-screen #view-notifications .tone-success .notif-type-label {
  color: var(--success);
}

#app-screen #view-notifications .notif-action-state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 22px;
  padding: 5px 8px;
  border: 1px solid rgba(77,204,143,0.24);
  border-radius: 999px;
  background: rgba(77,204,143,0.08);
  color: var(--success);
  font: 850 0.68rem/1 'Inter', system-ui, sans-serif;
}

#app-screen #view-notifications .notif-title {
  margin: 0;
  color: var(--text-1);
  font: 900 0.96rem/1.28 'Inter', system-ui, sans-serif;
  overflow-wrap: anywhere;
}

#app-screen #view-notifications .is-unread .notif-title,
#app-screen #view-notifications .is-actionable .notif-title {
  color: #F7F4EA;
}

#app-screen #view-notifications .notif-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
  color: var(--text-3);
  font: 780 0.74rem/1.35 'Inter', system-ui, sans-serif;
}

#app-screen #view-notifications .notif-desc {
  max-width: 760px;
  margin: 8px 0 0;
  color: var(--text-2);
  font: 680 0.82rem/1.48 'Inter', system-ui, sans-serif;
  overflow-wrap: anywhere;
  white-space: pre-line;
}

#app-screen #view-notifications .notif-quote {
  max-width: 740px;
  margin-top: 10px;
  padding: 9px 11px;
  border-left: 2px solid rgba(201,168,76,0.58);
  border-radius: 0 8px 8px 0;
  background: rgba(255,255,255,0.035);
}

#app-screen #view-notifications .notif-quote span {
  display: block;
  margin-bottom: 5px;
  color: var(--text-3);
  font: 850 0.72rem/1.2 'Inter', system-ui, sans-serif;
}

#app-screen #view-notifications .notif-quote q {
  display: block;
  color: var(--text-1);
  font: 760 0.84rem/1.45 'Inter', system-ui, sans-serif;
  quotes: none;
  overflow-wrap: anywhere;
}

#app-screen #view-notifications .notif-quote q::before,
#app-screen #view-notifications .notif-quote q::after {
  content: "";
}

#app-screen #view-notifications .notif-why {
  margin-top: 8px;
  color: var(--text-3);
  font: 820 0.74rem/1.35 'Inter', system-ui, sans-serif;
}

#app-screen #view-notifications .notif-action-cards {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 11px;
}

#app-screen #view-notifications .notif-action-card,
#app-screen #view-notifications .notif-overflow-trigger,
#app-screen #view-notifications .notif-menu-item {
  min-height: 30px;
  border-radius: 8px;
  font: 850 0.74rem/1 'Inter', system-ui, sans-serif;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}

#app-screen #view-notifications .notif-action-card {
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.045);
  color: var(--text-2);
  cursor: pointer;
}

#app-screen #view-notifications .notif-action-card:hover:not(:disabled),
#app-screen #view-notifications .notif-action-card:focus-visible {
  border-color: rgba(201,168,76,0.38);
  color: var(--gold-lt);
  outline: none;
}

#app-screen #view-notifications .notif-action-card.approve {
  border-color: rgba(201,168,76,0.56);
  background: var(--gold);
  color: #11100C;
}

#app-screen #view-notifications .notif-action-card.approve:hover:not(:disabled),
#app-screen #view-notifications .notif-action-card.approve:focus-visible {
  background: var(--gold-lt);
  color: #11100C;
}

#app-screen #view-notifications .notif-action-card:disabled {
  cursor: wait;
  opacity: 0.72;
}

#app-screen #view-notifications .notif-overflow {
  position: relative;
}

#app-screen #view-notifications .notif-overflow-trigger {
  display: inline-grid;
  place-items: center;
  width: 32px;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.035);
  color: var(--text-2);
  cursor: pointer;
}

#app-screen #view-notifications .notif-overflow-trigger:hover,
#app-screen #view-notifications .notif-overflow-trigger:focus-visible,
#app-screen #view-notifications .notif-overflow-trigger[aria-expanded="true"] {
  border-color: rgba(201,168,76,0.34);
  color: var(--gold-lt);
  outline: none;
}

#app-screen #view-notifications .notif-overflow-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 40;
  display: grid;
  min-width: 138px;
  padding: 6px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  background: #111215;
  box-shadow: 0 18px 44px rgba(0,0,0,0.36);
}

#app-screen #view-notifications .notif-overflow-menu[hidden] {
  display: none;
}

#app-screen #view-notifications .notif-menu-item {
  width: 100%;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  color: var(--text-2);
  text-align: left;
  cursor: pointer;
}

#app-screen #view-notifications .notif-menu-item:hover,
#app-screen #view-notifications .notif-menu-item:focus-visible {
  background: rgba(255,255,255,0.055);
  outline: none;
}

#app-screen #view-notifications .notif-menu-item.danger {
  color: var(--danger);
}

#app-screen #view-notifications .notif-empty-state {
  display: grid;
  justify-items: start;
  gap: 8px;
  padding: 24px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  background: rgba(18,19,23,0.74);
}

#app-screen #view-notifications .notif-empty-mark {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(77,204,143,0.24);
  border-radius: 8px;
  background: rgba(77,204,143,0.08);
  color: var(--success);
}

#app-screen #view-notifications .notif-error-state .notif-empty-mark {
  border-color: rgba(201,168,76,0.26);
  background: rgba(201,168,76,0.08);
  color: var(--gold-lt);
}

#app-screen #view-notifications .notif-empty-state strong {
  color: var(--text-1);
  font: 900 1rem/1.25 'Inter', system-ui, sans-serif;
}

#app-screen #view-notifications .notif-empty-state p {
  max-width: 520px;
  margin: 0;
  color: var(--text-2);
  font: 680 0.84rem/1.45 'Inter', system-ui, sans-serif;
}

#app-screen #view-notifications .notif-skeleton-list {
  display: grid;
  gap: 10px;
}

#app-screen #view-notifications .notif-skeleton-row {
  height: 86px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.055), rgba(255,255,255,0.12), rgba(255,255,255,0.055)),
    rgba(18,19,23,0.84);
  background-size: 220% 100%;
  animation: notificationSkeleton 1.35s ease-in-out infinite;
}

#app-screen #view-notifications .notif-skeleton-row.short {
  height: 72px;
}

@keyframes notificationSkeleton {
  0% { background-position: 140% 0; }
  100% { background-position: -80% 0; }
}

html[data-theme="light"] #app-screen #view-notifications .notifications-header,
html[data-theme="light"] #app-screen #view-notifications .notif-row,
html[data-theme="light"] #app-screen #view-notifications .notif-empty-state {
  border-color: rgba(28,25,18,0.12);
  background: rgba(252,250,245,0.88);
}

html[data-theme="light"] #app-screen #view-notifications .is-unread .notif-title,
html[data-theme="light"] #app-screen #view-notifications .is-actionable .notif-title {
  color: #17140F;
}

html[data-theme="light"] #app-screen #view-notifications .notif-overflow-menu {
  border-color: rgba(28,25,18,0.12);
  background: #FCFAF5;
  box-shadow: 0 18px 44px rgba(28,25,18,0.14);
}

html[data-theme="light"] #app-screen #view-notifications .notif-skeleton-row {
  border-color: rgba(28,25,18,0.1);
  background:
    linear-gradient(90deg, rgba(28,25,18,0.045), rgba(28,25,18,0.1), rgba(28,25,18,0.045)),
    rgba(252,250,245,0.92);
  background-size: 220% 100%;
}

@media (max-width: 760px) {
  #app-screen #view-notifications.view.active {
    padding: 18px 12px 34px;
  }

  #app-screen #view-notifications .notifications-header,
  #app-screen #view-notifications .notifications-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  #app-screen #view-notifications .notifications-header {
    padding: 18px;
  }

  #app-screen #view-notifications .view-title {
    font-size: 1.62rem;
  }

  #app-screen #view-notifications .notif-header-actions {
    justify-content: flex-start;
  }

  #app-screen #view-notifications .notif-filter-group {
    width: 100%;
  }

  #app-screen #view-notifications .notif-filter-btn {
    flex: 1 1 120px;
  }

  #app-screen #view-notifications .notif-group-filter select {
    width: 100%;
    max-width: none;
  }

  #app-screen #view-notifications .notif-row {
    grid-template-columns: 30px minmax(0, 1fr);
    padding: 12px;
  }

  #app-screen #view-notifications .notif-action-card {
    flex: 1 1 118px;
  }

  #app-screen #view-notifications .notif-overflow {
    flex: 1 1 52px;
  }

  #app-screen #view-notifications .notif-overflow-trigger {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  #app-screen #view-notifications .notif-row,
  #app-screen #view-notifications .notif-action-card,
  #app-screen #view-notifications .notif-filter-btn,
  #app-screen #view-notifications .notif-overflow-trigger,
  #app-screen #view-notifications .notif-menu-item,
  #app-screen #view-notifications .notif-skeleton-row {
    animation: none;
    transition: none;
  }
}

/* ─── TEAM & INVITES REFINEMENT ───────────────────────────── */
#app-screen #view-admin.view.active {
  max-width: 1180px;
  margin: 0 auto;
  padding-top: 22px;
}

#app-screen #view-admin .team-admin-shell {
  display: grid;
  gap: 14px;
  width: 100%;
}

#app-screen #view-admin .team-admin-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 20px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  background: rgba(18,19,23,0.84);
  box-shadow: 0 18px 48px rgba(0,0,0,0.22);
}

#app-screen #view-admin .team-admin-title-block {
  min-width: 0;
}

#app-screen #view-admin .team-admin-kicker {
  display: block;
  margin-bottom: 7px;
  color: var(--gold-lt);
  font: 850 0.68rem/1 'Inter', system-ui, sans-serif;
  letter-spacing: 0.12em;
}

#app-screen #view-admin .view-title {
  margin: 0;
  font-size: 1.72rem;
  line-height: 1.08;
  letter-spacing: 0;
}

#app-screen #view-admin .team-admin-title-block p {
  margin: 8px 0 0;
  color: var(--text-2);
  font: 680 0.9rem/1.45 'Inter', system-ui, sans-serif;
}

#app-screen #view-admin .team-admin-summary {
  margin-top: 10px;
  color: var(--text-3);
  font: 760 0.78rem/1.3 'Inter', system-ui, sans-serif;
}

#app-screen #view-admin .team-invite-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding-inline: 14px;
  border-radius: 8px;
  white-space: nowrap;
}

#app-screen #view-admin .team-invite-btn span {
  font-size: 1.1rem;
  line-height: 1;
}

#app-screen #view-admin .team-admin-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#app-screen #view-admin .admin-tabs.compact {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  border: 0;
}

#app-screen #view-admin .admin-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  color: var(--text-3);
  font: 800 0.8rem/1 'Inter', system-ui, sans-serif;
  letter-spacing: 0;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

#app-screen #view-admin .admin-tab:hover,
#app-screen #view-admin .admin-tab:focus-visible {
  border-color: rgba(201,168,76,0.28);
  color: var(--text-1);
  outline: none;
}

#app-screen #view-admin .admin-tab.active {
  border-color: rgba(201,168,76,0.38);
  background: rgba(201,168,76,0.08);
  color: var(--gold-lt);
}

#app-screen #view-admin .admin-tab-count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: currentColor;
  font: 850 0.72rem/1 'JetBrains Mono', monospace;
}

#app-screen #view-admin .team-member-search {
  flex: 0 1 260px;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 11px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  background: rgba(12,13,15,0.66);
  color: var(--text-3);
}

#app-screen #view-admin .team-member-search[hidden] {
  display: none;
}

#app-screen #view-admin .team-member-search:focus-within {
  border-color: rgba(201,168,76,0.36);
  color: var(--gold-lt);
}

#app-screen #view-admin .team-member-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-1);
  font: 700 0.84rem/1 'Inter', system-ui, sans-serif;
}

#app-screen #view-admin .team-section-label {
  margin: 6px 0 8px;
  color: var(--text-3);
  font: 900 0.68rem/1 'Inter', system-ui, sans-serif;
  letter-spacing: 0.12em;
}

#app-screen #view-admin .admin-panel[hidden] {
  display: none;
}

#app-screen #view-admin .team-list {
  display: grid;
  gap: 8px;
}

#app-screen #view-admin .team-list-head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1.35fr) minmax(130px, 0.72fr) minmax(140px, 0.72fr) minmax(148px, 0.62fr);
  gap: 14px;
  align-items: center;
  padding: 0 14px 2px;
  color: var(--text-3);
  font: 850 0.66rem/1 'Inter', system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#app-screen #view-admin .team-list-head.invite-head {
  grid-template-columns: 42px minmax(0, 1.25fr) minmax(125px, 0.62fr) minmax(130px, 0.62fr) minmax(155px, 0.72fr) minmax(110px, 0.48fr);
}

#app-screen #view-admin .team-list-head span:first-child {
  grid-column: 2;
}

#app-screen #view-admin .team-row-list {
  display: grid;
  gap: 8px;
}

#app-screen #view-admin .team-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1.35fr) minmax(130px, 0.72fr) minmax(140px, 0.72fr) minmax(148px, 0.62fr);
  gap: 14px;
  align-items: center;
  min-height: 78px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,0.075);
  border-radius: 8px;
  background: rgba(18,19,23,0.78);
  box-shadow: 0 10px 30px rgba(0,0,0,0.16);
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

#app-screen #view-admin .team-row:hover {
  transform: translateY(-1px);
  border-color: rgba(201,168,76,0.22);
  background: rgba(22,23,27,0.9);
}

#app-screen #view-admin .team-row.is-founder {
  border-color: rgba(201,168,76,0.2);
}

#app-screen #view-admin .invite-card {
  grid-template-columns: 42px minmax(0, 1.25fr) minmax(125px, 0.62fr) minmax(130px, 0.62fr) minmax(155px, 0.72fr) minmax(110px, 0.48fr);
}

#app-screen #view-admin .team-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(201,168,76,0.16);
  background: rgba(201,168,76,0.09);
  color: var(--gold-lt);
  font: 900 0.78rem/1 'Inter', system-ui, sans-serif;
  letter-spacing: 0;
}

#app-screen #view-admin .invite-avatar {
  border-color: rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.05);
  color: var(--text-2);
}

#app-screen #view-admin .team-member-cell,
#app-screen #view-admin .team-role-cell,
#app-screen #view-admin .team-groups-cell,
#app-screen #view-admin .team-invite-meta {
  display: grid;
  min-width: 0;
  gap: 4px;
}

#app-screen #view-admin .team-member-cell strong,
#app-screen #view-admin .team-groups-cell strong {
  overflow: hidden;
  color: var(--text-1);
  font: 850 0.92rem/1.2 'Inter', system-ui, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app-screen #view-admin .team-member-cell span,
#app-screen #view-admin .team-role-cell small,
#app-screen #view-admin .team-groups-cell span,
#app-screen #view-admin .team-invite-meta span {
  overflow: hidden;
  color: var(--text-3);
  font: 700 0.78rem/1.32 'Inter', system-ui, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app-screen #view-admin .role-badge-sm {
  width: fit-content;
  max-width: 100%;
  padding: 4px 8px;
  border-radius: 999px;
  font: 900 0.66rem/1 'Inter', system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#app-screen #view-admin .role-badge-sm.gold {
  border: 1px solid rgba(201,168,76,0.36);
  background: rgba(201,168,76,0.12);
  color: var(--gold-lt);
}

#app-screen #view-admin .role-badge-sm.blue {
  border: 1px solid rgba(92,168,255,0.26);
  background: rgba(92,168,255,0.1);
  color: #8FC4FF;
}

#app-screen #view-admin .role-badge-sm.muted {
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.045);
  color: var(--text-2);
}

#app-screen #view-admin .team-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

#app-screen #view-admin .team-static-actions {
  color: var(--text-3);
  font: 800 0.76rem/1 'Inter', system-ui, sans-serif;
}

#app-screen #view-admin .team-role-select {
  width: 132px;
  height: 34px;
  padding: 0 9px;
  border-color: rgba(255,255,255,0.1);
  border-radius: 8px;
  background-color: rgba(12,13,15,0.76);
  color: var(--text-1);
  font: 800 0.78rem/1 'Inter', system-ui, sans-serif;
}

#app-screen #view-admin .team-role-select:focus-visible {
  border-color: rgba(201,168,76,0.44);
  outline: none;
}

#app-screen #view-admin .team-role-select.is-saving {
  cursor: wait;
  opacity: 0.7;
}

#app-screen #view-admin .team-overflow {
  position: relative;
}

#app-screen #view-admin .team-overflow-trigger {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  background: rgba(255,255,255,0.035);
  color: var(--text-2);
  cursor: pointer;
}

#app-screen #view-admin .team-overflow-trigger:hover,
#app-screen #view-admin .team-overflow-trigger:focus-visible,
#app-screen #view-admin .team-overflow-trigger[aria-expanded="true"] {
  border-color: rgba(201,168,76,0.34);
  color: var(--gold-lt);
  outline: none;
}

#app-screen #view-admin .team-overflow-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 45;
  display: grid;
  min-width: 158px;
  padding: 6px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  background: #111215;
  box-shadow: 0 18px 44px rgba(0,0,0,0.36);
}

#app-screen #view-admin .team-overflow-menu[hidden] {
  display: none;
}

#app-screen #view-admin .team-menu-item {
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-2);
  text-align: left;
  cursor: pointer;
  font: 800 0.78rem/1.2 'Inter', system-ui, sans-serif;
}

#app-screen #view-admin .team-menu-item:hover,
#app-screen #view-admin .team-menu-item:focus-visible {
  background: rgba(255,255,255,0.055);
  outline: none;
}

#app-screen #view-admin .team-menu-item.danger {
  color: var(--danger);
}

#app-screen #view-admin .team-status-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  font: 900 0.66rem/1 'Inter', system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#app-screen #view-admin .team-status-chip.pending {
  border: 1px solid rgba(255,194,102,0.26);
  background: rgba(255,194,102,0.1);
  color: var(--warn);
}

#app-screen #view-admin .team-refresh-warning {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(255,194,102,0.18);
  border-radius: 8px;
  background: rgba(255,194,102,0.07);
  color: var(--warn);
  font: 760 0.78rem/1.35 'Inter', system-ui, sans-serif;
}

#app-screen #view-admin .team-empty-state {
  display: grid;
  justify-items: start;
  gap: 8px;
  padding: 22px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  background: rgba(18,19,23,0.78);
}

#app-screen #view-admin .team-empty-mark {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(77,204,143,0.24);
  border-radius: 8px;
  background: rgba(77,204,143,0.08);
  color: var(--success);
}

#app-screen #view-admin .team-error-state .team-empty-mark {
  border-color: rgba(201,168,76,0.26);
  background: rgba(201,168,76,0.08);
  color: var(--gold-lt);
}

#app-screen #view-admin .team-empty-state strong {
  color: var(--text-1);
  font: 900 1rem/1.25 'Inter', system-ui, sans-serif;
}

#app-screen #view-admin .team-empty-state p {
  max-width: 540px;
  margin: 0;
  color: var(--text-2);
  font: 680 0.84rem/1.45 'Inter', system-ui, sans-serif;
}

#app-screen #view-admin .team-skeleton-list {
  display: grid;
  gap: 8px;
}

#app-screen #view-admin .team-skeleton-row {
  height: 78px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.055), rgba(255,255,255,0.12), rgba(255,255,255,0.055)),
    rgba(18,19,23,0.84);
  background-size: 220% 100%;
  animation: teamSkeleton 1.35s ease-in-out infinite;
}

#app-screen #view-admin .team-skeleton-row.short {
  height: 66px;
}

@keyframes teamSkeleton {
  0% { background-position: 140% 0; }
  100% { background-position: -80% 0; }
}

html[data-theme="light"] #app-screen #view-admin .team-admin-header,
html[data-theme="light"] #app-screen #view-admin .team-row,
html[data-theme="light"] #app-screen #view-admin .team-empty-state {
  border-color: rgba(28,25,18,0.12);
  background: rgba(252,250,245,0.88);
  box-shadow: 0 18px 44px rgba(28,25,18,0.1);
}

html[data-theme="light"] #app-screen #view-admin .team-member-search,
html[data-theme="light"] #app-screen #view-admin .team-role-select,
html[data-theme="light"] #app-screen #view-admin .admin-tab,
html[data-theme="light"] #app-screen #view-admin .team-overflow-trigger {
  border-color: rgba(28,25,18,0.12);
  background: rgba(252,250,245,0.78);
}

html[data-theme="light"] #app-screen #view-admin .team-overflow-menu {
  border-color: rgba(28,25,18,0.12);
  background: #FCFAF5;
  box-shadow: 0 18px 44px rgba(28,25,18,0.14);
}

html[data-theme="light"] #app-screen #view-admin .team-skeleton-row {
  border-color: rgba(28,25,18,0.1);
  background:
    linear-gradient(90deg, rgba(28,25,18,0.045), rgba(28,25,18,0.1), rgba(28,25,18,0.045)),
    rgba(252,250,245,0.92);
  background-size: 220% 100%;
}

@media (max-width: 980px) {
  #app-screen #view-admin .team-list-head {
    display: none;
  }

  #app-screen #view-admin .team-row,
  #app-screen #view-admin .invite-card {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: start;
  }

  #app-screen #view-admin .team-role-cell,
  #app-screen #view-admin .team-groups-cell,
  #app-screen #view-admin .team-invite-meta {
    grid-column: 2;
  }

  #app-screen #view-admin .team-actions {
    grid-column: 3;
    grid-row: 1 / span 4;
    align-self: center;
  }
}

@media (max-width: 680px) {
  #app-screen #view-admin.view.active {
    padding: 18px 12px 34px;
  }

  #app-screen #view-admin .team-admin-header,
  #app-screen #view-admin .team-admin-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  #app-screen #view-admin .team-admin-header {
    padding: 18px;
  }

  #app-screen #view-admin .view-title {
    font-size: 1.48rem;
  }

  #app-screen #view-admin .team-invite-btn,
  #app-screen #view-admin .team-member-search {
    width: 100%;
  }

  #app-screen #view-admin .admin-tabs.compact {
    width: 100%;
  }

  #app-screen #view-admin .admin-tab {
    flex: 1 1 145px;
    justify-content: center;
  }

  #app-screen #view-admin .team-row,
  #app-screen #view-admin .invite-card {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px 12px;
    padding: 12px;
  }

  #app-screen #view-admin .team-avatar {
    width: 38px;
    height: 38px;
  }

  #app-screen #view-admin .team-role-cell,
  #app-screen #view-admin .team-groups-cell,
  #app-screen #view-admin .team-invite-meta,
  #app-screen #view-admin .team-actions {
    grid-column: 2;
  }

  #app-screen #view-admin .team-actions {
    grid-row: auto;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  #app-screen #view-admin .team-role-select {
    width: min(100%, 168px);
  }
}

@media (prefers-reduced-motion: reduce) {
  #app-screen #view-admin .team-row,
  #app-screen #view-admin .admin-tab,
  #app-screen #view-admin .team-overflow-trigger,
  #app-screen #view-admin .team-menu-item,
  #app-screen #view-admin .team-skeleton-row {
    animation: none;
    transition: none;
  }
}

/* SETTINGS REFINEMENT */
#app-screen #view-settings.view.active {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding-top: 22px;
}

#app-screen #view-settings .view-header {
  margin-bottom: 14px;
  padding: 0 0 14px;
}

#app-screen #view-settings .view-title {
  margin: 0;
  font-size: 1.72rem;
  line-height: 1.08;
  letter-spacing: 0;
}

#app-screen #view-settings .view-sub {
  max-width: 660px;
  margin-top: 8px;
  color: var(--text-2);
  font: 680 0.92rem/1.5 'Inter', system-ui, sans-serif;
}

#app-screen #view-settings .settings-layout {
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
  gap: 20px;
  width: 100%;
  align-items: start;
}

#app-screen #view-settings .settings-summary {
  top: 84px;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  background:
    linear-gradient(160deg, rgba(201,168,76,0.07), transparent 45%),
    rgba(18,19,23,0.84);
  box-shadow: 0 18px 48px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.035);
}

#app-screen #view-settings .settings-summary-avatar {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  border-color: rgba(201,168,76,0.34);
  background: rgba(201,168,76,0.11);
  font-size: 0.96rem;
}

#app-screen #view-settings .settings-summary-name {
  font: 900 1rem/1.2 'Inter', system-ui, sans-serif;
}

#app-screen #view-settings .settings-summary-email {
  color: var(--text-3);
  font: 700 0.8rem/1.35 'Inter', system-ui, sans-serif;
}

#app-screen #view-settings .settings-summary-grid {
  gap: 0;
}

#app-screen #view-settings .settings-summary-grid div,
#app-screen #view-settings .settings-account-grid div {
  display: grid;
  grid-template-columns: minmax(82px, auto) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 38px;
  border-top: 1px solid rgba(255,255,255,0.075);
}

#app-screen #view-settings .settings-summary-grid span,
#app-screen #view-settings .settings-account-grid span {
  color: var(--text-3);
  font: 850 0.68rem/1 'Inter', system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#app-screen #view-settings .settings-summary-grid strong,
#app-screen #view-settings .settings-account-grid strong {
  min-width: 0;
  color: var(--text-1);
  font: 850 0.82rem/1.25 'Inter', system-ui, sans-serif;
  text-align: right;
  overflow-wrap: anywhere;
}

#app-screen #view-settings .settings-stack {
  gap: 14px;
}

#app-screen #view-settings .settings-subtabs {
  position: sticky;
  top: 74px;
  z-index: 5;
  width: fit-content;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 2px;
  padding: 5px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  background: rgba(12,13,15,0.84);
  box-shadow: 0 12px 34px rgba(0,0,0,0.18);
  backdrop-filter: blur(10px);
}

#app-screen #view-settings .settings-subtab {
  min-width: 104px;
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text-3);
  background: transparent;
  font: 850 0.82rem/1 'Inter', system-ui, sans-serif;
  letter-spacing: 0;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

#app-screen #view-settings .settings-subtab:hover,
#app-screen #view-settings .settings-subtab:focus-visible {
  border-color: rgba(201,168,76,0.28);
  color: var(--text-1);
  outline: none;
}

#app-screen #view-settings .settings-subtab.active {
  border-color: rgba(201,168,76,0.38);
  background: rgba(201,168,76,0.11);
  color: var(--gold-lt);
}

#app-screen #view-settings .settings-section {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 20px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  background: rgba(18,19,23,0.82);
  box-shadow: 0 18px 48px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.035);
}

#app-screen #view-settings .settings-section[hidden],
#app-screen #view-settings .settings-tab-hidden {
  display: none !important;
}

#app-screen #view-settings .settings-section h3 {
  margin: 0;
  color: var(--text-1);
  font: 900 0.82rem/1.2 'Inter', system-ui, sans-serif;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

#app-screen #view-settings .settings-section h3::before {
  width: 5px;
  height: 16px;
  border-radius: 999px;
  box-shadow: none;
}

#app-screen #view-settings .setting-intro {
  max-width: 760px;
  margin: -6px 0 0;
  color: var(--text-2);
  font: 680 0.86rem/1.5 'Inter', system-ui, sans-serif;
}

#app-screen #view-settings .field-group {
  display: grid;
  gap: 7px;
  margin: 0;
}

#app-screen #view-settings .field-group label,
#app-screen #view-settings .setting-label {
  color: var(--text-1);
  font: 850 0.84rem/1.25 'Inter', system-ui, sans-serif;
}

#app-screen #view-settings :where(input, select, textarea) {
  min-height: 42px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  background: rgba(11,12,14,0.78);
  color: var(--text-1);
  font: 720 0.88rem/1.2 'Inter', system-ui, sans-serif;
}

#app-screen #view-settings :where(input, select, textarea):focus {
  border-color: rgba(201,168,76,0.44);
  box-shadow: 0 0 0 3px rgba(201,168,76,0.12);
  outline: none;
}

#app-screen #view-settings :where(input, select, textarea):disabled {
  color: var(--text-3);
  background: rgba(255,255,255,0.035);
}

#app-screen #view-settings .phone-wrap {
  border-radius: 8px;
}

#app-screen #view-settings .field-hint,
#app-screen #view-settings .setting-desc,
#app-screen #view-settings .settings-help-panel span {
  color: var(--text-3) !important;
  font: 680 0.78rem/1.45 'Inter', system-ui, sans-serif;
}

#app-screen #view-settings .cost-params-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(130px, 0.42fr);
  gap: 12px;
}

#app-screen #view-settings .settings-help-panel {
  margin: 0;
  padding: 12px;
  border: 1px dashed rgba(255,255,255,0.1);
  border-radius: 8px;
  background: rgba(255,255,255,0.025);
}

#app-screen #view-settings .settings-help-panel strong {
  display: block;
  margin-bottom: 4px;
  color: var(--text-2);
  font: 850 0.82rem/1.25 'Inter', system-ui, sans-serif;
}

#app-screen #view-settings .settings-action-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0;
}

#app-screen #view-settings .settings-action-row.compact {
  justify-content: flex-start;
  margin-top: -4px;
}

#app-screen #view-settings .inline-status {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  color: var(--success);
  font: 800 0.78rem/1.25 'Inter', system-ui, sans-serif;
}

#app-screen #view-settings .setting-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  min-height: 58px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.075);
}

#app-screen #view-settings .setting-row:last-child {
  border-bottom: 0;
}

#app-screen #view-settings .settings-segmented {
  display: inline-flex;
  gap: 5px;
  padding: 5px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  background: rgba(10,11,13,0.76);
}

#app-screen #view-settings .settings-segmented .scope-btn {
  min-height: 32px;
  min-width: 72px;
  border-radius: 6px;
}

#app-screen #view-settings .settings-switch {
  position: relative;
  gap: 9px;
  min-width: 86px;
  justify-content: flex-end;
}

#app-screen #view-settings .settings-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  opacity: 0;
  pointer-events: none;
}

#app-screen #view-settings .settings-switch-track {
  position: relative;
  width: 44px;
  height: 24px;
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  transition: background 0.18s ease, border-color 0.18s ease;
}

#app-screen #view-settings .settings-switch-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text-2);
  box-shadow: 0 2px 8px rgba(0,0,0,0.28);
  transition: transform 0.18s ease, background 0.18s ease;
}

#app-screen #view-settings .settings-switch input:checked + .settings-switch-track {
  border-color: rgba(201,168,76,0.44);
  background: rgba(201,168,76,0.22);
}

#app-screen #view-settings .settings-switch input:checked + .settings-switch-track::after {
  transform: translateX(20px);
  background: var(--gold-lt);
}

#app-screen #view-settings .settings-switch input:focus-visible + .settings-switch-track {
  box-shadow: 0 0 0 3px rgba(201,168,76,0.16);
}

#app-screen #view-settings .settings-switch-state {
  min-width: 28px;
  color: var(--text-3);
  font: 900 0.7rem/1 'JetBrains Mono', monospace;
  letter-spacing: 0.04em;
}

#app-screen #view-settings .settings-switch.is-on .settings-switch-state {
  color: var(--gold-lt);
}

#app-screen #view-settings .setup-guide-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

#app-screen #view-settings .setup-guide-card {
  min-height: 214px;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 16px;
  border-radius: 8px;
}

#app-screen #view-settings .setup-step-badge {
  width: fit-content;
  min-width: 34px;
  height: 28px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0;
}

#app-screen #view-settings .setup-guide-card strong {
  font-size: 0.95rem;
  line-height: 1.25;
}

#app-screen #view-settings .setup-guide-card p {
  margin: 0;
  font-size: 0.8rem;
}

#app-screen #view-settings .nod-number-card {
  border-radius: 8px;
}

#app-screen #view-settings .settings-connected-services,
#app-screen #view-settings .ecosystem-connections-section {
  gap: 14px;
}

#app-screen #view-settings .settings-service-row,
#app-screen #view-settings .ecosystem-card {
  display: grid;
  gap: 0;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  background: rgba(12,13,15,0.66);
  overflow: hidden;
}

#app-screen #view-settings .settings-service-row {
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 72px;
  padding: 12px;
}

#app-screen #view-settings .settings-service-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
}

#app-screen #view-settings .settings-service-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

#app-screen #view-settings .settings-service-copy strong,
#app-screen #view-settings .ecosystem-card-toggle b {
  color: var(--text-1);
  font: 880 0.94rem/1.25 'Inter', system-ui, sans-serif;
}

#app-screen #view-settings .settings-service-copy span:not(.connection-status-badge),
#app-screen #view-settings .ecosystem-card-toggle small,
#app-screen #view-settings .settings-service-meta {
  color: var(--text-3);
  font: 680 0.78rem/1.35 'Inter', system-ui, sans-serif;
}

#app-screen #view-settings .settings-service-actions,
#app-screen #view-settings .connection-action-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

#app-screen #view-settings .settings-service-actions .btn-secondary,
#app-screen #view-settings .settings-service-actions .btn-ghost-danger,
#app-screen #view-settings .connection-action-row .btn-secondary,
#app-screen #view-settings .connection-action-row .btn-ghost,
#app-screen #view-settings .connection-action-row .btn-ghost-danger {
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 8px;
}

#app-screen #view-settings .connection-status-badge {
  width: fit-content;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  color: var(--text-3);
  background: rgba(255,255,255,0.045);
  font: 900 0.66rem/1 'Inter', system-ui, sans-serif;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

#app-screen #view-settings .connection-status-badge.synced,
#app-screen #view-settings .integration-badge.connected {
  border-color: rgba(77,204,143,0.24);
  color: var(--success);
  background: rgba(77,204,143,0.09);
  box-shadow: none;
}

#app-screen #view-settings .connection-status-badge.disconnected,
#app-screen #view-settings .connection-status-badge.not-connected {
  color: var(--text-3);
  background: rgba(255,255,255,0.04);
}

#app-screen #view-settings .ecosystem-connections-section {
  display: flex;
  flex-direction: column;
}

#app-screen #view-settings .ecosystem-connections-section h3,
#app-screen #view-settings .ecosystem-connections-section > .setting-intro {
  order: 0;
}

#app-screen #view-settings .ecosystem-card-grid {
  order: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 0;
}

#app-screen #view-settings .settings-behavior-card {
  order: 2;
}

#app-screen #view-settings .ecosystem-connections-section > .settings-action-row {
  order: 3;
}

#app-screen #view-settings .ecosystem-card-toggle {
  min-height: 72px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
}

#app-screen #view-settings .ecosystem-card-toggle:hover,
#app-screen #view-settings .ecosystem-card-toggle:focus-visible {
  background: rgba(255,255,255,0.035);
  outline: none;
}

#app-screen #view-settings .ecosystem-card-fields {
  padding: 0 12px;
}

#app-screen #view-settings .ecosystem-card.expanded .ecosystem-card-fields {
  padding: 0 12px 12px;
}

#app-screen #view-settings .settings-behavior-card {
  grid-template-columns: minmax(0, 1fr) minmax(210px, 0.48fr);
  align-items: center;
  gap: 14px;
  margin: 6px 0 0;
  padding: 16px;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(201,168,76,0.08), transparent 55%),
    rgba(12,13,15,0.66);
}

#app-screen #view-settings .settings-behavior-card::after {
  display: none;
}

#app-screen #view-settings .settings-behavior-card strong {
  font-size: 0.98rem;
  letter-spacing: 0;
}

#app-screen #view-settings .settings-behavior-card p {
  margin-top: 5px;
  font-size: 0.82rem;
}

#app-screen #view-settings .pushback-status-grid {
  grid-template-columns: 1fr;
  gap: 7px;
}

#app-screen #view-settings .pushback-status-grid span {
  border-radius: 8px;
  text-align: left;
  color: var(--text-2);
  background: rgba(255,255,255,0.04);
}

#app-screen #view-settings .pushback-status-grid span.ready {
  color: var(--success);
  border-color: rgba(77,204,143,0.24);
  background: rgba(77,204,143,0.08);
  box-shadow: none;
}

#app-screen #view-settings .codeflow-settings-steps {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#app-screen #view-settings .settings-account-section {
  gap: 14px;
}

#app-screen #view-settings .settings-account-grid {
  display: grid;
  gap: 0;
  padding: 0 0 4px;
}

#app-screen #view-settings .settings-account-grid div:first-child {
  border-top: 0;
}

#app-screen #view-settings .session-row {
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,77,77,0.18);
}

html[data-theme="light"] #app-screen #view-settings .settings-summary,
html[data-theme="light"] #app-screen #view-settings .settings-section,
html[data-theme="light"] #app-screen #view-settings .settings-service-row,
html[data-theme="light"] #app-screen #view-settings .ecosystem-card,
html[data-theme="light"] #app-screen #view-settings .settings-subtabs {
  border-color: rgba(28,25,18,0.12);
  background: rgba(252,250,245,0.88);
  box-shadow: 0 18px 44px rgba(28,25,18,0.1);
}

html[data-theme="light"] #app-screen #view-settings :where(input, select, textarea),
html[data-theme="light"] #app-screen #view-settings .settings-segmented {
  border-color: rgba(28,25,18,0.12);
  background: rgba(255,253,247,0.9);
}

html[data-theme="light"] #app-screen #view-settings .settings-service-row,
html[data-theme="light"] #app-screen #view-settings .ecosystem-card,
html[data-theme="light"] #app-screen #view-settings .settings-behavior-card {
  background: rgba(255,253,247,0.78);
}

@media (max-width: 1100px) {
  #app-screen #view-settings.view.active {
    max-width: 100%;
  }

  #app-screen #view-settings .settings-layout {
    grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
  }
}

@media (max-width: 920px) {
  #app-screen #view-settings .settings-layout {
    grid-template-columns: 1fr;
  }

  #app-screen #view-settings .settings-summary,
  #app-screen #view-settings .settings-subtabs {
    position: static;
  }

  #app-screen #view-settings .settings-summary {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
  }

  #app-screen #view-settings .settings-summary-grid {
    grid-column: 1 / -1;
  }

  #app-screen #view-settings .setup-guide-grid,
  #app-screen #view-settings .cost-params-grid {
    grid-template-columns: 1fr;
  }

  #app-screen #view-settings .settings-behavior-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  #app-screen #view-settings.view.active {
    padding: 18px 12px 34px;
  }

  #app-screen #view-settings .view-title {
    font-size: 1.5rem;
  }

  #app-screen #view-settings .settings-subtabs {
    width: 100%;
  }

  #app-screen #view-settings .settings-subtab {
    flex: 1 1 135px;
  }

  #app-screen #view-settings .settings-section,
  #app-screen #view-settings .settings-summary {
    padding: 16px;
  }

  #app-screen #view-settings .setting-row,
  #app-screen #view-settings .settings-service-row,
  #app-screen #view-settings .ecosystem-card-toggle {
    grid-template-columns: 1fr;
    align-items: start;
  }

  #app-screen #view-settings .settings-service-actions,
  #app-screen #view-settings .connection-action-row,
  #app-screen #view-settings .settings-action-row {
    justify-content: flex-start;
  }

  #app-screen #view-settings .settings-service-actions :where(button, .btn-secondary, .btn-ghost-danger),
  #app-screen #view-settings .connection-action-row :where(button, .btn-secondary, .btn-ghost, .btn-ghost-danger),
  #app-screen #view-settings .setting-row > button,
  #app-screen #view-settings .settings-action-row > button {
    width: 100%;
  }

  #app-screen #view-settings .settings-switch {
    justify-content: flex-start;
  }

  #app-screen #view-settings .codeflow-settings-steps {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  #app-screen #view-settings .settings-subtab,
  #app-screen #view-settings .settings-switch-track,
  #app-screen #view-settings .settings-switch-track::after,
  #app-screen #view-settings .ecosystem-card-fields {
    transition: none;
  }
}

/* GLOBAL SHELL REFINEMENT */
:root {
  --sidebar-w: 232px;
  --shell-collapsed-w: 68px;
  --shell-topbar-h: 62px;
  --shell-control-h: 40px;
  --shell-radius: 8px;
  --shell-bg: #070708;
  --shell-bg-raised: rgba(16,17,20,0.94);
  --shell-bg-soft: rgba(255,255,255,0.038);
  --shell-bg-hover: rgba(255,255,255,0.064);
  --shell-border: rgba(255,255,255,0.085);
  --shell-border-strong: rgba(255,255,255,0.14);
  --shell-gold: rgba(201,168,76,0.82);
  --shell-gold-soft: rgba(201,168,76,0.11);
  --shell-gold-border: rgba(201,168,76,0.28);
}

[data-theme="light"] {
  --shell-bg: #F5F1E8;
  --shell-bg-raised: rgba(252,250,245,0.94);
  --shell-bg-soft: rgba(255,255,255,0.68);
  --shell-bg-hover: rgba(255,255,255,0.86);
  --shell-border: rgba(35,30,22,0.105);
  --shell-border-strong: rgba(35,30,22,0.16);
  --shell-gold: #8F6B22;
  --shell-gold-soft: rgba(143,107,34,0.09);
  --shell-gold-border: rgba(143,107,34,0.24);
}

#app-screen {
  --sidebar-w: 232px;
}

#app-screen .sidebar {
  width: var(--sidebar-w) !important;
  overflow-x: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), transparent 36%),
    var(--shell-bg) !important;
  border-right: 1px solid var(--shell-border) !important;
  box-shadow: none !important;
  backdrop-filter: blur(14px) saturate(112%);
  -webkit-backdrop-filter: blur(14px) saturate(112%);
  transition: width 0.22s ease, transform 0.22s ease;
}

#app-screen .main {
  margin-left: var(--sidebar-w);
  min-width: 0;
  transition: margin-left 0.22s ease, width 0.22s ease, max-width 0.22s ease, flex-basis 0.22s ease;
}

#app-screen .sidebar-top {
  padding: 12px 10px 8px;
}

#app-screen .sidebar-brand,
#app-screen .sidebar-user {
  border: 1px solid var(--shell-border) !important;
  border-radius: var(--shell-radius) !important;
  background: var(--shell-bg-soft) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#app-screen .sidebar-brand {
  min-height: 50px;
  padding: 9px 10px !important;
  gap: 9px;
}

#app-screen .sidebar-brand > svg {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}

#app-screen .sidebar-ws {
  display: grid;
  gap: 2px;
}

#app-screen .sidebar-ws > span:first-child {
  font-size: 0.86rem;
  font-weight: 850;
  letter-spacing: 0;
}

#app-screen .ws-role-badge {
  font-size: 0.58rem;
  line-height: 1.1;
  letter-spacing: 0.09em;
  color: var(--shell-gold);
}

#app-screen .sidebar-toggle-btn {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--shell-border);
  border-radius: 7px;
  background: rgba(255,255,255,0.028);
  color: var(--text-3);
}

#app-screen .sidebar-toggle-btn:hover {
  border-color: var(--shell-border-strong);
  background: var(--shell-bg-hover);
  color: var(--text-1);
}

#app-screen .sidebar-toggle-btn svg {
  transition: transform 0.18s ease;
}

#app-screen .sidebar-nav {
  padding: 6px 8px 10px;
  scrollbar-gutter: stable;
}

#app-screen .nav-label {
  padding: 12px 8px 5px;
  color: var(--text-3);
  font-size: 0.59rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.13em;
}

#app-screen .nav-btn {
  min-height: 42px;
  padding: 0 10px;
  gap: 10px;
  border: 1px solid transparent !important;
  border-radius: var(--shell-radius) !important;
  background: transparent !important;
  color: var(--text-2);
  font-size: 0.84rem;
  font-weight: 760;
  letter-spacing: 0;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

#app-screen .nav-btn > span:not(.nav-gate):not(.nav-risk-badge):not(.nav-notif-dot) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app-screen .nav-ico {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
}

#app-screen .nav-btn:hover {
  border-color: var(--shell-border) !important;
  background: var(--shell-bg-hover) !important;
  color: var(--text-1);
  transform: none;
}

#app-screen .nav-btn.active {
  border-color: var(--shell-gold-border) !important;
  background: var(--shell-gold-soft) !important;
  color: var(--gold-lt);
  box-shadow: inset 2px 0 0 var(--shell-gold) !important;
}

#app-screen .nav-gate {
  min-height: 18px;
  max-width: 58px;
  padding: 3px 6px;
  border: 1px solid var(--shell-gold-border);
  border-radius: 999px;
  background: rgba(201,168,76,0.055);
  color: var(--shell-gold);
  font-size: 0.52rem;
  line-height: 1;
  letter-spacing: 0.07em;
  opacity: 0.92;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app-screen .nav-risk-badge,
#app-screen .nav-notif-dot {
  width: 7px;
  height: 7px;
  box-shadow: 0 0 0 3px rgba(255,77,77,0.1);
}

#app-screen .sidebar-user {
  min-height: 56px;
  margin: 8px;
  padding: 8px !important;
  gap: 9px;
}

#app-screen .user-avatar,
#app-screen .topbar-avatar {
  border-radius: var(--shell-radius);
  background: var(--shell-gold-soft) !important;
  border-color: var(--shell-gold-border) !important;
  color: var(--gold-lt);
  box-shadow: none;
}

#app-screen .user-avatar {
  width: 36px;
  height: 36px;
  font-size: 0.74rem;
}

#app-screen .user-details {
  min-width: 0;
}

#app-screen .user-details span:first-child {
  font-size: 0.82rem;
  font-weight: 850;
}

#app-screen .user-details span:last-child {
  font-size: 0.68rem;
  font-weight: 650;
}

#app-screen .logout-btn {
  width: 34px;
  height: 34px;
  border-radius: var(--shell-radius);
}

#app-screen .topbar {
  min-height: var(--shell-topbar-h);
  height: var(--shell-topbar-h);
  padding: 10px 18px;
  gap: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.038), transparent),
    rgba(7,8,10,0.92) !important;
  border-bottom: 1px solid var(--shell-border) !important;
  box-shadow: none !important;
  backdrop-filter: blur(16px) saturate(115%);
  -webkit-backdrop-filter: blur(16px) saturate(115%);
}

#app-screen .topbar-l,
#app-screen .topbar-r,
#app-screen .topbar-l nav {
  min-width: 0;
}

#app-screen .topbar-l {
  flex: 1 1 auto;
  gap: 9px;
  overflow: hidden;
}

#app-screen .topbar-r {
  flex: 0 1 auto;
  gap: 6px;
  justify-content: flex-end;
}

#app-screen .topbar-beta-mark,
#app-screen .ist-clock,
#app-screen .search-wrap,
#app-screen .theme-btn,
#app-screen .topbar-plan-btn,
#app-screen .identity-pill,
#app-screen .icon-btn,
#app-screen .topbar-avatar {
  height: var(--shell-control-h);
  min-height: var(--shell-control-h);
  border: 1px solid var(--shell-border) !important;
  border-radius: var(--shell-radius) !important;
  background: var(--shell-bg-soft) !important;
  color: var(--text-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

#app-screen .topbar-beta-mark:hover,
#app-screen .ist-clock:hover,
#app-screen .search-wrap:focus-within,
#app-screen .search-wrap:hover,
#app-screen .theme-btn:hover,
#app-screen .topbar-plan-btn:hover,
#app-screen .identity-pill:hover,
#app-screen .icon-btn:hover,
#app-screen .topbar-avatar:hover {
  border-color: var(--shell-border-strong) !important;
  background: var(--shell-bg-hover) !important;
  color: var(--text-1);
  transform: none;
}

#app-screen .topbar-beta-mark {
  flex: 0 0 auto;
  gap: 7px;
  padding: 0 10px;
  color: var(--shell-gold);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

#app-screen .topbar-beta-mark svg {
  width: 17px;
  height: 17px;
}

#app-screen .topbar-beta-mark em {
  display: inline-grid;
  place-items: center;
  min-height: 18px;
  padding: 0 6px;
  border: 1px solid var(--shell-gold-border);
  border-radius: 6px;
  background: rgba(201,168,76,0.12);
  color: var(--shell-gold);
  font-size: 0.53rem;
  font-weight: 950;
  letter-spacing: 0.08em;
}

#app-screen .breadcrumb {
  min-width: 0;
  max-width: 32vw;
  overflow: hidden;
  color: var(--text-1);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.98rem;
  font-weight: 880;
  line-height: 1.2;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app-screen .ist-clock {
  width: auto;
  min-width: 118px;
  max-width: 132px;
  grid-template-columns: auto minmax(0,1fr);
  column-gap: 7px;
  padding: 5px 8px;
  flex: 0 0 auto;
  color: var(--text-1);
}

#app-screen .ist-clock-label {
  width: 26px;
  height: 28px;
  border-radius: 6px;
  background: rgba(201,168,76,0.12);
  color: var(--shell-gold);
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  box-shadow: none;
}

#app-screen .ist-clock-time {
  color: var(--text-1);
  font-size: 0.78rem;
  font-weight: 950;
}

#app-screen .ist-clock-date {
  min-width: 0;
  max-width: 78px;
  overflow: hidden;
  color: var(--text-3);
  font-size: 0.6rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app-screen .search-wrap {
  width: clamp(178px, 20vw, 278px);
  min-width: 178px;
  padding: 0 10px;
  gap: 7px;
  flex: 0 1 278px;
}

#app-screen .search-wrap svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

#app-screen .search-wrap input {
  min-width: 0;
  height: 100%;
  color: var(--text-1);
  font-size: 0.82rem;
  font-weight: 650;
}

#app-screen .search-kbd {
  min-width: 34px;
  min-height: 21px;
  display: grid;
  place-items: center;
  padding: 0 5px;
  border: 1px solid var(--shell-border);
  border-radius: 5px;
  background: rgba(255,255,255,0.035);
  color: var(--text-3);
  font-size: 0.62rem;
}

#app-screen .theme-btn,
#app-screen .icon-btn,
#app-screen .topbar-avatar {
  width: var(--shell-control-h);
  min-width: var(--shell-control-h);
  padding: 0;
  flex: 0 0 var(--shell-control-h);
}

#app-screen .theme-btn {
  font-size: 0.98rem;
}

#app-screen #theme-icon {
  display: inline-grid;
  place-items: center;
  line-height: 1;
}

#app-screen .topbar-plan-btn {
  max-width: 130px;
  padding: 0 10px;
  gap: 7px;
  flex: 0 1 auto;
  color: var(--shell-gold);
  font-size: 0.76rem;
  font-weight: 850;
}

#app-screen .topbar-plan-btn span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app-screen .topbar-plan-btn svg,
#app-screen .notif-btn svg,
#app-screen .logout-btn svg {
  flex: 0 0 auto;
}

#app-screen .identity-pill {
  width: auto;
  min-width: 0;
  max-width: 176px;
  padding: 0 10px 0 9px;
  gap: 8px;
  flex: 0 1 176px;
  text-align: left;
}

#app-screen .identity-role-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  background: var(--shell-gold);
  box-shadow: 0 0 0 3px rgba(201,168,76,0.1);
}

#app-screen .identity-copy {
  min-width: 0;
  gap: 1px;
}

#app-screen .identity-role {
  color: var(--text-3);
  font-size: 0.57rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

#app-screen .identity-name {
  max-width: 122px;
  color: var(--text-1);
  font-size: 0.76rem;
  font-weight: 850;
}

#app-screen .topbar-avatar {
  color: var(--gold-lt);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.02em;
}

#app-screen .notif-indicator {
  top: 7px;
  right: 7px;
  width: 7px;
  height: 7px;
  box-shadow: 0 0 0 3px rgba(255,77,77,0.12);
}

#app-screen .mobile-menu-btn,
#app-screen .topbar-back-btn {
  width: var(--shell-control-h);
  min-width: var(--shell-control-h);
}

#app-screen .setup-help-fab {
  width: 42px;
  height: 42px;
  left: 18px;
  bottom: 18px;
  border: 1px solid var(--shell-border) !important;
  border-radius: var(--shell-radius);
  background: var(--shell-bg-raised) !important;
  color: var(--shell-gold);
  box-shadow: none;
}

#app-screen .setup-help-fab:hover {
  border-color: var(--shell-gold-border) !important;
  background: var(--shell-bg-hover) !important;
  color: var(--gold-lt);
  transform: translateY(-1px);
}

[data-theme="light"] #app-screen .sidebar {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.68), rgba(255,255,255,0.24) 46%, transparent),
    var(--shell-bg) !important;
  border-right-color: var(--shell-border) !important;
}

[data-theme="light"] #app-screen .topbar {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.36)),
    rgba(246,242,234,0.94) !important;
  border-bottom-color: var(--shell-border) !important;
}

[data-theme="light"] #app-screen .topbar-beta-mark,
[data-theme="light"] #app-screen .ist-clock,
[data-theme="light"] #app-screen .search-wrap,
[data-theme="light"] #app-screen .theme-btn,
[data-theme="light"] #app-screen .topbar-plan-btn,
[data-theme="light"] #app-screen .identity-pill,
[data-theme="light"] #app-screen .icon-btn,
[data-theme="light"] #app-screen .topbar-avatar,
[data-theme="light"] #app-screen .sidebar-brand,
[data-theme="light"] #app-screen .sidebar-user,
[data-theme="light"] #app-screen .setup-help-fab {
  background: var(--shell-bg-soft) !important;
  border-color: var(--shell-border) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.72) !important;
}

[data-theme="light"] #app-screen .topbar-beta-mark em,
[data-theme="light"] #app-screen .ist-clock-label,
[data-theme="light"] #app-screen .nav-gate {
  background: var(--shell-gold-soft);
  color: var(--shell-gold);
}

[data-theme="light"] #app-screen .nav-btn.active {
  color: var(--shell-gold);
}

@media (min-width: 769px) {
  #app-screen .main {
    flex: 0 0 calc(100vw - var(--sidebar-w)) !important;
    width: calc(100vw - var(--sidebar-w)) !important;
    max-width: calc(100vw - var(--sidebar-w)) !important;
  }

  #app-screen .sidebar.collapsed {
    width: var(--shell-collapsed-w) !important;
    transform: none !important;
  }

  #app-screen .sidebar.collapsed ~ .main {
    margin-left: var(--shell-collapsed-w) !important;
    flex-basis: calc(100vw - var(--shell-collapsed-w)) !important;
    width: calc(100vw - var(--shell-collapsed-w)) !important;
    max-width: calc(100vw - var(--shell-collapsed-w)) !important;
  }

  #app-screen .sidebar.collapsed + .sidebar-restore-btn {
    display: none !important;
  }

  #app-screen .sidebar.collapsed .sidebar-top {
    padding: 12px 8px 8px;
  }

  #app-screen .sidebar.collapsed .sidebar-brand {
    min-height: 50px;
    display: grid;
    place-items: center;
    padding: 9px 0 !important;
    position: relative;
  }

  #app-screen .sidebar.collapsed .sidebar-toggle-btn {
    position: absolute;
    right: 4px;
    top: 4px;
    width: 24px;
    height: 24px;
    color: var(--shell-gold);
  }

  #app-screen .sidebar.collapsed .sidebar-toggle-btn svg {
    transform: rotate(180deg);
  }

  #app-screen .sidebar.collapsed .sidebar-ws,
  #app-screen .sidebar.collapsed .nav-label,
  #app-screen .sidebar.collapsed .nav-btn > span:not(.nav-risk-badge):not(.nav-notif-dot),
  #app-screen .sidebar.collapsed .user-details,
  #app-screen .sidebar.collapsed .logout-btn {
    display: none !important;
  }

  #app-screen .sidebar.collapsed .sidebar-nav {
    padding: 8px;
  }

  #app-screen .sidebar.collapsed .nav-btn {
    justify-content: center;
    padding: 0;
  }

  #app-screen .sidebar.collapsed .nav-risk-badge,
  #app-screen .sidebar.collapsed .nav-notif-dot {
    position: absolute;
    right: 13px;
    top: 9px;
    margin: 0;
  }

  #app-screen .sidebar.collapsed .sidebar-user {
    justify-content: center;
    margin: 8px;
    padding: 8px !important;
  }
}

@media (max-width: 1240px) {
  #app-screen .breadcrumb {
    max-width: 24vw;
  }

  #app-screen .search-wrap {
    width: clamp(160px, 17vw, 220px);
    min-width: 160px;
  }

  #app-screen .identity-pill {
    max-width: 146px;
  }

  #app-screen .identity-name {
    max-width: 94px;
  }
}

@media (max-width: 1080px) {
  #app-screen .ist-clock-date,
  #app-screen .identity-role {
    display: none;
  }

  #app-screen .ist-clock {
    min-width: 88px;
  }

  #app-screen .identity-pill {
    max-width: 118px;
  }
}

@media (max-width: 940px) {
  #app-screen .ist-clock {
    display: none;
  }

  #app-screen .search-wrap {
    width: 150px;
    min-width: 150px;
    flex-basis: 150px;
  }
}

@media (max-width: 860px) {
  #app-screen .topbar {
    height: auto;
    min-height: 58px;
    padding: 9px 12px;
  }

  #app-screen .topbar-r {
    gap: 5px;
  }

  #app-screen .search-wrap {
    display: flex !important;
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    flex: 0 0 40px;
    justify-content: center;
    padding: 0;
  }

  #app-screen .search-wrap input,
  #app-screen .search-kbd,
  #app-screen .identity-copy,
  #app-screen .topbar-plan-btn span {
    display: none !important;
  }

  #app-screen .identity-pill,
  #app-screen .topbar-plan-btn {
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    flex: 0 0 40px;
    justify-content: center;
    padding-inline: 0;
  }

  #app-screen .topbar-beta-mark {
    height: 40px;
    min-height: 40px;
  }
}

@media (max-width: 768px) {
  :root {
    --sidebar-w: min(284px, calc(100vw - 28px));
  }

  #app-screen {
    --sidebar-w: min(284px, calc(100vw - 28px));
  }

  #app-screen .main {
    flex: 1 1 auto !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: 0 !important;
  }

  #app-screen .sidebar,
  #app-screen .sidebar.collapsed {
    width: var(--sidebar-w) !important;
    transform: translateX(calc(-100% - 8px)) !important;
    box-shadow: 20px 0 50px rgba(0,0,0,0.42) !important;
  }

  #app-screen .sidebar.mobile-open,
  #app-screen .sidebar.collapsed.mobile-open {
    transform: translateX(0) !important;
  }

  #app-screen .sidebar-restore-btn {
    display: none !important;
  }

  #app-screen .mobile-menu-btn {
    display: inline-flex !important;
  }
}

@media (max-width: 640px) {
  #app-screen .topbar {
    gap: 8px;
    padding-inline: 10px;
  }

  #app-screen .breadcrumb {
    max-width: 34vw;
    font-size: 0.88rem;
  }

  #app-screen .topbar-beta-mark {
    width: 40px;
    padding: 0;
    justify-content: center;
  }

  #app-screen .topbar-beta-mark span,
  #app-screen .topbar-beta-mark em,
  #app-screen .search-wrap {
    display: none !important;
  }
}

@media (max-width: 420px) {
  #app-screen .topbar-r {
    gap: 4px;
  }

  #app-screen .topbar-plan-btn,
  #app-screen .identity-pill,
  #app-screen .notif-btn {
    width: 38px;
    min-width: 38px;
    max-width: 38px;
    flex-basis: 38px;
  }

  #app-screen .theme-btn,
  #app-screen .topbar-avatar,
  #app-screen .mobile-menu-btn,
  #app-screen .topbar-back-btn {
    width: 38px;
    min-width: 38px;
    flex-basis: 38px;
  }
}
/* Subscription trial and recurring billing */
.subscription-trial-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 26px; border: 1px solid rgba(185,148,85,.45); border-radius: 16px;
  background: linear-gradient(120deg, rgba(185,148,85,.14), rgba(185,148,85,.03));
}
.subscription-trial-banner h3 { margin: 9px 0; font-size: 21px; }
.subscription-trial-banner p, .subscription-billing-note p { margin: 0; line-height: 1.65; }
.subscription-trial-banner .btn-primary { flex-shrink: 0; }
.subscription-trial-tag { white-space: nowrap; font-size: 13px; font-weight: 600; }
.subscription-billing-note { padding: 20px 24px; border: 1px solid rgba(128,128,128,.25); border-radius: 14px; }
.subscription-billing-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.subscription-billing-copy { margin: 0; font-size: 12px; line-height: 1.7; opacity: .75; }
/* Everyday usability: consistent hierarchy, readable copy, and input feedback. */
html[data-theme="dark"] { --bg: #101215; --bg-2: #181b20; --bg-3: #20242a; --surface: #1b1f25; --text-2: #c3c7d0; --text-3: #a3a9b5; }
html[data-theme="light"] { --bg: #f5f6f8; --bg-2: #eef0f3; --bg-3: #e6e9ee; --surface: #ffffff; --surface-2: #f8f9fb; --text-1: #18202b; --text-2: #424d5c; --text-3: #5e6877; --gold: #86651c; --gold-lt: #705314; --gold-dim: rgba(134,101,28,.1); --border: #dce0e6; --border-med: #c7cdd5; --shadow: 0 2px 8px rgba(24,32,43,.05); --shadow-lg: 0 12px 32px rgba(24,32,43,.1); }
html[data-theme="light"] #app-screen { --shell-gold: #80611d; }
html[data-theme="light"] #app-screen * { box-shadow: none !important; }
html[data-theme="light"] #app-screen :is(.founder-brief-panel, .sentinel-chat-col, .sv-orb-card, .sv-action-card, .sv-actions-section, .vx-history-panel, .sentinel-bubble, .sentinel-input-bar, .sentinel-chat-header, .founder-command-tile) { background: var(--surface) !important; border-color: var(--border) !important; }
html[data-theme="light"] #app-screen #view-dashboard :is(.founder-brief-panel,.founder-command-tile) { background: var(--surface) !important; border-color: var(--border) !important; }
html[data-theme="light"] #app-screen #view-sentinel :is(.sentinel-chat-col,.sentinel-feed,.sentinel-bubble,.sentinel-input-bar,.sentinel-chat-header,.sv-orb-card,.sv-action-card,.sv-actions-section,.vx-history-panel,.vx-text-bar,.sv-response-inline) { background: var(--surface) !important; color: var(--text-1); border-color: var(--border) !important; box-shadow: none !important; }
html[data-theme="light"] #app-screen #view-sentinel :is(input,textarea,select) { background: var(--surface) !important; color: var(--text-1) !important; }
html[data-theme="light"] #app-screen .nav-btn:not(.active) { color: var(--text-2) !important; }
html[data-theme="light"] #app-screen .nav-btn:not(.active) > span { color: var(--text-2) !important; }
html[data-theme="light"] #app-screen .nav-btn.active > span { color: #705314 !important; }
html[data-theme="light"] #app-screen :is(input:not([type="checkbox"]), textarea, select) { background: var(--surface) !important; color: var(--text-1) !important; border-color: var(--border-med) !important; }
html[data-theme="light"] :is(.modal, .app-dialog, .directive-detail-drawer, .analytics-sync-drawer, .attachment-box) { background: var(--surface) !important; color: var(--text-1); border-color: var(--border-med) !important; }
#app-screen .btn-send svg, #app-screen .vx-send-btn svg { width: 18px !important; height: 18px !important; flex: 0 0 18px; }
#app-screen .main { background: var(--bg) !important; }
#app-screen :where(.view-title, .view-title *, .breadcrumb, .workload-member-copy strong, .workload-task-main strong) { font-weight: 650 !important; }
#app-screen :where(.view-sub, .nav-btn, .btn-secondary, .btn-primary, .scope-btn, .dashboard-command-action, .founder-command-tile em) { font-weight: 500 !important; }
#app-screen .view-title { font-size: clamp(24px, 2.6vw, 34px) !important; }
#app-screen .topbar-avatar { display: none !important; }
#app-screen .topbar-plan-btn { min-width: 92px; }
#app-screen #view-dashboard .dashboard-command-panel { padding: 26px 28px !important; min-height: 0 !important; background: var(--bg-2) !important; box-shadow: none !important; }
#app-screen #view-dashboard .dashboard-command-panel::after { display: none; }
#app-screen #view-dashboard #dashboard-command-title { font-weight: 600 !important; font-size: 25px !important; }
#app-screen #view-dashboard .dashboard-command-side { min-height: 0; }
#app-screen #view-dashboard .founder-brief-panel { order: 3 !important; }
#app-screen #view-dashboard .founder-command-tile strong { font-weight: 600 !important; }
#app-screen #view-dashboard .dashboard-command-meta { color: var(--text-3); }
.skip-link { position: fixed; top: -100px; left: 20px; z-index: 20000; padding: 14px 20px; border-radius: 10px; background: var(--gold); color: #171513; font-weight: 700; }
.skip-link:focus { top: 14px; }
.page-help-btn { border: 0; background: transparent; color: var(--text-2); text-decoration: underline; text-underline-offset: 4px; padding: 10px 2px; font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; }
#app-screen .view-header { flex-wrap: wrap; gap: 14px; }
#app-screen .view-header > :first-child { flex: 1; min-width: min(100%, 230px); }
#app-screen .view-title { font-family: 'Inter', system-ui, sans-serif; text-transform: none; letter-spacing: -0.035em; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.2; }
#app-screen .view-sub { max-width: 720px; font-size: 14px; line-height: 1.65; color: var(--text-2); }
#app-screen .sidebar-nav .nav-label { font-size: 11px; letter-spacing: .06em; padding-top: 22px; }
#app-screen .sidebar-nav .nav-label:first-child { padding-top: 6px; }
#app-screen .nav-btn { min-height: 44px; }
.interface-disclosure { border: 1px solid var(--border-med); border-radius: 14px; background: var(--bg-2); min-width: 0; }
.interface-disclosure > summary { cursor: pointer; padding: 17px 20px; color: var(--text-1); font-size: 14px; font-weight: 600; line-height: 1.6; }
.interface-disclosure > summary span { display: block; color: var(--text-3); font-size: 12px; font-weight: 400; margin-top: 3px; }
.interface-disclosure[open] > summary { border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.interface-disclosure > .setup-progress-panel { margin: 16px; }
#app-screen #view-dashboard .founder-brief-grid,
#app-screen #view-dashboard #role-access-card { display: none; }
#app-screen #view-dashboard .founder-brief-panel { display: flex; flex-direction: column; gap: 18px; }
#app-screen #view-dashboard .founder-brief-actions { margin-top: 12px; }
#app-screen #view-dashboard .setup-disclosure { width: 100%; }
#app-screen #view-dashboard .dashboard-command-panel { background: var(--bg-2); border-left: 3px solid var(--gold); }
#app-screen #view-dashboard .dashboard-command-title,
#app-screen #view-dashboard #dashboard-command-title { line-height: 1.3; font-size: clamp(20px, 2.2vw, 28px); }
#app-screen #view-dashboard .dashboard-command-body,
#app-screen #view-dashboard #dashboard-command-body { line-height: 1.7; color: var(--text-2); }
#app-screen #view-dashboard #individual-summary { order: 5; }
#app-screen #view-dashboard #dashboard-workload-preview { order: 6; }
#app-screen #view-dashboard .dashboard-nudge-card { order: 7; }
#app-screen #view-dashboard #dashboard-deep-panel { order: 8; }
#app-screen #view-dashboard #dashboard-deep-panel > .vitals-row { margin-top: 12px; }
#app-screen #view-sentinel.view.active { height: auto !important; max-height: none !important; min-height: calc(100dvh - 64px); overflow: visible !important; flex: 0 0 auto !important; }
#app-screen #view-sentinel .sentinel-master-grid { grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto; height: auto !important; max-height: none !important; overflow: visible !important; }
#app-screen #view-sentinel .sentinel-chat-col { min-height: 450px !important; height: min(640px, 68vh) !important; }
#app-screen #view-sentinel .sentinel-tools { grid-column: 1/-1; }
#app-screen #view-sentinel .sentinel-voice-col { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; padding: 0 18px 18px; height: auto !important; max-height: none !important; overflow: visible !important; align-items: start; }
#app-screen #view-sentinel .sv-orb-card { grid-row: auto; min-height: 0; height: auto; }
#app-screen #view-sentinel .vx-text-bar { flex: 0 0 auto; min-height: 44px; align-items: center; }
#app-screen #view-sentinel .vx-text-input { height: 44px; min-height: 44px; }
#auth-screen.active { flex-direction: column; }
#auth-screen .auth-footer { position: relative; inset: auto; flex: 0 0 auto; margin: 0 auto; width: 100%; z-index: 1; }
.interface-load-error { display: flex; align-items: center; gap: 16px; justify-content: space-between; padding: 16px 20px; border: 1px solid var(--warn); background: var(--warn-dim); border-radius: 12px; margin-bottom: 20px; font-size: 14px; }
.field-error { color: var(--danger); font-size: 13px; line-height: 1.6; margin-top: 7px; }
#app-screen #view-settings .settings-switch { position: relative; }
#app-screen #view-settings .settings-switch input[type="checkbox"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; z-index: 2; clip: auto; clip-path: none; pointer-events: auto; }
[aria-invalid="true"] { border-color: var(--danger) !important; }
.modal { max-height: calc(100dvh - 40px); overflow-y: auto; overscroll-behavior: contain; }
.modal :where(input,textarea,select) { scroll-margin: 60px; }
#navigation-scrim { position: fixed; inset: 0; z-index: 499; background: rgba(0,0,0,.48); backdrop-filter: blur(3px); }
#navigation-scrim[hidden] { display: none; }
body:has(#navigation-scrim:not([hidden])) #sidebar { z-index: 500 !important; }
button[aria-busy="true"] { cursor: progress; }
@media (max-width: 768px) {
  #app-screen #view-groups .view-header-r { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%; }
  #app-screen #view-groups .view-header-r :is(select,button) { min-width: 0; width: 100%; height: 44px; min-height: 44px; max-height: 48px; flex: 0 0 auto; }
  #app-screen .view-header { align-items: flex-start; }
  #app-screen .page-help-btn { font-size: 12px; min-height: 36px; }
  #app-screen .view-sub { font-size: 13px; }
  #app-screen #view-sentinel .sentinel-voice-col { grid-template-columns: minmax(0,1fr); padding: 0 12px 12px; }
  #app-screen #view-sentinel .sentinel-chat-col { height: 58dvh !important; min-height: 350px !important; }
  #app-screen :where(input:not([type="checkbox"]):not([type="range"]), textarea, select), .modal :where(input,textarea,select) { font-size: 16px; }
  #app-screen :where(.btn-primary,.btn-secondary,.nav-btn,.workload-task-toggle,.scope-btn,.settings-subtab) { min-height: 44px; }
  #app-screen #view-dashboard .founder-command-strip { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .modal { max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); padding: 24px 18px; }
  .page-help-btn { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media (max-width: 700px) {
  .subscription-trial-banner { align-items: flex-start; flex-direction: column; padding: 20px; gap: 16px; }
  .subscription-trial-banner .btn-primary { width: 100%; }
}

/* Small access labels keep NOD's feature names easy to scan. */
html:not([data-development-tools-enabled="enabled"]) [data-development-tools] { display: none !important; }
#development-tools-toggle { accent-color: var(--gold); }
#development-tools-scope { margin: 12px 0 8px; }
#development-tools-status { display: block; }
#app-screen #view-settings #development-tools-status { color: var(--text-2); }
#app-screen #view-settings .development-tools-switch { min-height: 44px; }
html[data-theme="light"] #app-screen #view-settings .development-tools-switch .settings-switch-track { background: #d5dae1; border-color: #788496; }
html[data-theme="light"] #app-screen #view-settings .development-tools-switch input:checked + .settings-switch-track { background: #80611b; border-color: #705314; }
html[data-theme="light"] #app-screen #view-settings .development-tools-switch input:checked + .settings-switch-track::after { background: #fff; }
html[data-theme="light"] #app-screen #view-settings .development-tools-switch.is-on .settings-switch-state { color: #705314; }
#app-screen .feature-access-badge {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  width: auto;
  max-width: none;
  padding: 3px 7px;
  border: 1px solid var(--border-med);
  border-radius: 6px;
  background: var(--bg-3);
  color: var(--text-2);
  font: 600 10px/1.4 'Inter', system-ui, sans-serif;
  letter-spacing: 0;
  text-transform: none;
  opacity: 1;
  white-space: nowrap;
}
#app-screen .nav-btn .feature-access-badge { margin-left: auto; }
#app-screen .page-access-badge { align-self: flex-start; width: fit-content; max-width: 100%; margin: 8px 0 0; font-size: 11px; }
#app-screen .feature-access-badge.access-plan { border-color: var(--shell-gold-border); background: var(--gold-dim); color: var(--gold-lt); }
html[data-theme="light"] #app-screen .nav-btn .feature-access-badge,
html[data-theme="light"] #app-screen .page-access-badge { background: #f0f2f5; border-color: #d5dae1; color: #465267 !important; }
html[data-theme="light"] #app-screen .nav-btn .feature-access-badge.access-plan,
html[data-theme="light"] #app-screen .page-access-badge.access-plan { background: #fff5d6; border-color: #e8d49a; color: #705314 !important; }
/* Essential onboarding and workspace mode. */
.workspace-choice { border:0; padding:0; margin:0 0 20px; min-width:0; }
.workspace-choice legend { font-weight:600; margin-bottom:10px; }
.workspace-choice label { display:flex; align-items:center; gap:12px; border:1px solid var(--border); border-radius:10px; padding:12px; margin:8px 0; cursor:pointer; min-height:60px; }
.workspace-choice label:has(input:checked) { border-color:var(--gold); background:var(--surface-2); }
.workspace-choice input { width:20px; height:20px; flex:0 0 20px; accent-color:var(--gold); }
.workspace-choice small { display:block; margin-top:4px; color:var(--text-2); line-height:1.5; }
#tab-signup .auth-welcome p, #tab-signup .auth-note, .auth-legal { color:var(--text-2) !important; line-height:1.55; font-size:13px; }
.individual-workspace.no-group-signal #individual-summary,
.individual-workspace.no-group-signal #dashboard-workload-preview { display:none !important; }
.workspace-hidden { display:none !important; }
.personal-work { border:1px solid var(--border); border-radius:16px; padding:22px; margin:20px 0; background:var(--surface); }
#app-screen #view-dashboard .dashboard-topline { order:0 !important; }
#app-screen #view-dashboard #personal-work { order:2; }
.individual-workspace #app-screen #view-dashboard #personal-work { order:1; }
.personal-work h3 { font-size:20px; margin-bottom:6px; }
.personal-work p, #workspace-experience-settings p { color:var(--text-2); line-height:1.6; margin:8px 0 16px; }
.personal-task-entry, .workspace-quick-actions { display:flex; gap:10px; flex-wrap:wrap; margin:10px 0; }
.personal-task-entry input { flex:1 1 220px; min-width:0; padding:12px; border:1px solid var(--border); border-radius:8px; background:var(--bg-2); color:var(--text-1); font:inherit; }
.personal-task-row { display:flex; align-items:center; gap:12px; padding:12px 0; min-height:48px; overflow-wrap:anywhere; }
.personal-task-row input { width:20px; height:20px; flex:0 0 20px; accent-color:var(--gold); }
.personal-task-row:has(input:checked) span { text-decoration:line-through; opacity:.7; }
.workspace-next { margin-top:18px; border-top:1px solid var(--border); padding-top:8px; }
.workspace-next summary { cursor:pointer; padding:12px 0; min-height:44px; }
.individual-workspace #founder-brief-panel,
.individual-workspace #role-access-card,
.individual-workspace #dashboard-nudge-widget,
.individual-workspace .dashboard-vitals-head,
.individual-workspace #vitals-grid,
.individual-workspace .dashboard-insights-panel,
.individual-workspace .founder-config-section:not(:has(#jira-connection-card)),
.individual-workspace .settings-section:has(#development-tools-toggle),
.individual-workspace [data-connection-key="slack"],
.individual-workspace [data-connection-key="github"],
.individual-workspace [data-connection-key="codeflow"],
.individual-workspace [data-connection-key="webhook"],
.individual-workspace [data-connection-key="mirror"] { display:none !important; }
.individual-workspace .ecosystem-connections-section .ecosystem-card:not(#jira-connection-card),
.individual-workspace #ecosystem-pushback-card { display:none!important; }
#workspace-experience-settings input, #workspace-experience-settings select { min-height:44px; max-width:100%; }
.report-schedule-card { min-width:0; border:1px solid var(--border); border-radius:12px; padding:18px; margin:16px 0; }
.report-schedule-card legend { padding:0 8px; font-weight:600; }
.report-schedule-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.report-schedule-grid .field-group { min-width:0; margin:0; }
.report-schedule-grid input,.report-schedule-grid select { width:100%; box-sizing:border-box; }
.report-schedule-card[hidden],.jira-action-form [hidden] { display:none!important; }
.jira-action-form { margin-top:20px; }
.jira-receipt { overflow-wrap:anywhere; }
@media(max-width:600px) { .report-schedule-grid { grid-template-columns:minmax(0,1fr); } }
.workspace-choice :focus-visible, .personal-work :focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
@media(max-width:600px) {
  .personal-work { padding:16px; }
  .personal-task-entry > * { width:100%; }
  .workspace-quick-actions > * { min-height:44px; flex:1 1 130px; justify-content:center; }
  .auth-showcase { display:none; }
  .workspace-choice label { padding:10px; }
}
:root { --resource-gap: 14px; }
.resource-controls { margin: 24px 0; padding: 20px; border: 1px solid var(--border, #303036); border-radius: 12px; max-width: 100%; overflow-wrap: anywhere; }
.resource-controls h3,.resource-controls h4 { margin: 0 0 12px; }
.resource-controls p { margin: 10px 0; line-height: 1.6; }
.resource-controls progress { width: 100%; height: 12px; accent-color: var(--gold); }
.resource-controls a { color: var(--gold-lt); text-underline-offset: 3px; }
.resource-form { margin-top: 24px; display: grid; gap: var(--resource-gap); }
.resource-form fieldset { display: flex; flex-wrap: wrap; gap: var(--resource-gap); border: 1px solid var(--border, #303036); padding: 14px; min-width: 0; }
.resource-form label { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; max-width: 100%; }
.resource-form label:has(input[type=checkbox]) { display: grid; grid-template-columns: 16px minmax(0,1fr); align-items: start; line-height: 1.5; }
.resource-form input[type=checkbox] { margin-top: 4px; width: 14px; height: 14px; }
.resource-form input:not([type=checkbox]),.resource-form select { padding: 9px; background: var(--bg, #101014); color: inherit; border: 1px solid var(--border, #303036); border-radius: 6px; max-width: 100%; min-width: 0; }
.resource-version { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 10px 0; flex-wrap: wrap; }
.resource-controls summary { cursor: pointer; padding: 10px 0; }

/* Secondary sections keep the main navigation focused on the ten work areas. */
.section-navigation { display:flex; gap:8px; flex-wrap:wrap; padding:20px 32px 0; }
.section-nav-btn { font:inherit; font-size:13px; font-weight:600; padding:10px 16px; border:1px solid var(--border); border-radius:9px; background:var(--surface); color:var(--text-2); cursor:pointer; }
.section-nav-btn:hover, .section-nav-btn.active { color:var(--text-1); border-color:var(--gold); background:var(--gold-dim, rgba(217,184,88,.1)); }
.section-nav-btn:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
.section-nav-btn[hidden] { display:none; }
.topbar-sentinel { white-space:nowrap; }
@media(max-width:768px) { .section-navigation { padding:16px 16px 0; gap:6px; } .section-nav-btn { padding:9px 12px; } .topbar-sentinel { font-size:12px; padding:8px; } }