:root {
  --bg: #0b0b0d;
  --panel: #17140f;
  --panel2: #1c1712;
  --line: #332821;
  --text: #f6f2e9;
  --muted: #a89a89;
  --green: #8bd450;
  --lime: #c5f06c;
  --amber: #f6ba55;
  --red: #f37868;
  --blue: #77cbe5;
  --brand: #a81f1f;
  --brand-deep: #6e1212;
  --gold: #c9a24b;
}

/* Command center shell */
.command-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); min-height: calc(100vh - 74px); }
.command-nav { padding: 24px 14px; border-right: 1px solid var(--border); background: rgba(9, 17, 31, .72); }
.command-nav nav { display: grid; gap: 8px; position: sticky; top: 20px; }
.command-nav-button { min-height: 48px; padding: 0 16px; border: 1px solid transparent; border-radius: 10px; color: var(--muted); background: transparent; text-align: left; font: inherit; font-weight: 700; cursor: pointer; }
.command-nav-button:hover, .command-nav-button.active { color: var(--text); border-color: var(--border); background: var(--panel); }
.command-nav-button:focus-visible, .button:focus-visible, input:focus-visible, select:focus-visible, .command-list button:focus-visible { outline: 3px solid #75b8ff; outline-offset: 2px; }
.command-main { min-width: 0; padding: 32px; }
.command-section { display: none; }
.command-section.active { display: block; }
#section-calls:empty { min-height: 1px; }
.command-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)); gap: 14px; margin-top: 22px; }
.command-stat { display: grid; gap: 8px; min-height: 118px; padding: 20px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); }
.command-stat strong { font-size: 2rem; }
.command-stat span { color: var(--muted); }
.command-heading { display: flex; justify-content: space-between; gap: 20px; align-items: end; margin-bottom: 20px; }
.command-heading label, .login-card label { display: grid; gap: 7px; color: var(--muted); font-weight: 700; }
.command-heading input, .command-heading select, .login-card input { min-height: 46px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; color: var(--text); background: var(--panel); font: inherit; }
.command-detail-layout { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(280px, 1fr); gap: 18px; }
.command-list { display: grid; gap: 10px; }
.command-list button { display: grid; gap: 5px; min-height: 74px; padding: 14px; border: 1px solid var(--border); border-radius: 10px; color: var(--text); background: var(--panel); text-align: left; cursor: pointer; }
.command-list span, .command-list small { color: var(--muted); }
.command-detail, .command-alert-card { padding: 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); }
.command-detail dl, .command-alert-card dl { display: grid; grid-template-columns: 120px 1fr; gap: 9px 14px; }
.command-detail dt, .command-alert-card dt { color: var(--muted); }
.command-detail dd, .command-alert-card dd { margin: 0; overflow-wrap: anywhere; }
.command-alert-list { display: grid; gap: 12px; }
.command-alert-card > div { display: flex; justify-content: space-between; gap: 12px; }
.command-alert-card .escalated { color: #ffcc71; font-weight: 700; }
.legacy-token { display: none; }
body[data-office-role="readonly"] [data-office-action], body[data-office-role="readonly"] .action { display: none !important; }
.login-page { display: grid; place-items: center; min-height: 100vh; padding: 20px; }
.login-card { width: min(100%, 420px); padding: 28px; border: 1px solid var(--border); border-radius: 16px; background: var(--panel); }
.login-card form { display: grid; gap: 18px; margin-top: 22px; }
.login-card .button { min-height: 48px; }

@media (max-width: 760px) {
  .topbar { align-items: flex-start; }
  .top-actions { justify-content: flex-end; }
  .command-layout { display: block; }
  .command-nav { padding: 10px; border-right: 0; border-bottom: 1px solid var(--border); overflow-x: auto; }
  .command-nav nav { display: flex; position: static; min-width: max-content; }
  .command-nav-button { min-width: 112px; text-align: center; }
  .command-main { padding: 22px 14px; }
  .command-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .command-heading { display: grid; align-items: stretch; }
  .command-detail-layout { grid-template-columns: 1fr; }
  .command-alert-card dl { grid-template-columns: 94px 1fr; }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: radial-gradient(circle at 88% -15%, #3a1414 0, transparent 38%), var(--bg);
  color: var(--text);
  font: 14px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-text-size-adjust: 100%;
}
.shell { max-width: 1440px; margin: auto; padding: 0 28px 48px; }
.topbar {
  height: 74px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--line);
  gap: 12px;
  flex-wrap: wrap;
}
.brand {
  color: #fff;
  text-decoration: none;
  font-weight: 900;
  letter-spacing: .04em;
  font-size: 18px;
  line-height: .85;
}
.brand span { color: var(--brand); filter: brightness(1.35); }
.brand small {
  display: block;
  font-size: 8px;
  color: var(--muted);
  letter-spacing: .18em;
  margin-top: 6px;
}
.top-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.quiet { color: var(--muted); font-size: 12px; }
.hero {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: end;
  padding: 40px 4px 28px;
}
.eyebrow {
  font-size: 10px;
  font-weight: 800;
  color: var(--gold);
  letter-spacing: .15em;
  margin: 0 0 7px;
}
.hero h1 {
  font-size: clamp(28px, 4.5vw, 48px);
  line-height: .98;
  letter-spacing: -.055em;
  margin: 0;
}
.lead { max-width: 620px; color: var(--muted); font-size: 15px; margin: 14px 0 0; }
.readiness {
  border: 1px solid var(--line);
  background: #120f0c;
  padding: 12px 15px;
  border-radius: 999px;
  white-space: nowrap;
  color: var(--muted);
  font-size: 12px;
}
.signal {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 100%;
  background: var(--amber);
  margin-right: 8px;
}

/* Loud attention for stale Hermes / overdue commitments */
.attention-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 18px;
}
.attention-card {
  flex: 1 1 280px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid #6a3934;
  background: linear-gradient(135deg, #3a1816, #2a1210);
  color: #ffc1b9;
  animation: pulseAttention 2.4s ease-in-out infinite;
}
.attention-card.hermes {
  border-color: #6a4a20;
  background: linear-gradient(135deg, #3a2a12, #2a1f0e);
  color: #ffd982;
}
.attention-card strong { display: block; font-size: 16px; margin-bottom: 4px; color: #fff; }
.attention-card button {
  margin-top: 8px;
  font: inherit;
  font-weight: 700;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  padding: 5px 10px;
  border-radius: 7px;
  cursor: pointer;
}
@keyframes pulseAttention {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  50% { box-shadow: 0 0 0 3px rgba(243, 120, 104, 0.18); }
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}
.metric {
  border: 1px solid var(--line);
  background: linear-gradient(135deg, #1c1712, #141110);
  padding: 16px;
  border-radius: 14px;
}
.metric .value { font-size: 28px; font-weight: 800; letter-spacing: -.04em; }
.metric .label { color: var(--muted); font-size: 12px; margin-top: 4px; }
.metric.alert-metric { border-color: #6a3934; background: linear-gradient(135deg, #2e1917, #1a1010); }
.metric.alert-metric .value { color: var(--red); }

.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.tab {
  color: var(--muted);
  font: inherit;
  font-weight: 700;
  border: 0;
  background: none;
  padding: 13px 15px;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tab.active { color: var(--gold); border-color: var(--brand); }
.tab-count {
  font-size: 10px;
  font-weight: 800;
  background: #3a2a10;
  color: #ffd982;
  border: 1px solid #5a4218;
  border-radius: 999px;
  padding: 1px 7px;
  min-width: 1.4em;
  text-align: center;
}
.tab-count.danger {
  background: #4a2725;
  border-color: #6a3934;
  color: #ffaca1;
}
.view { display: none; }
.view.active { display: block; }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}
.panel {
  background: rgba(23, 20, 15, .88);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
.panel-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 21px 22px 15px;
}
.panel h2 { font-size: 17px; letter-spacing: -.025em; margin: 0; }
.panel-head-text { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.panel-note { padding: 0 22px 10px; margin: 0; }

.data-badge {
  padding: 2px 9px;
  border-radius: 999px;
  background: #241d17;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.data-badge.seeded,
.data-badge.projection {
  background: #3a2a10;
  border-color: #5a4218;
  color: #f3cf8c;
}
.data-badge.live {
  background: #1f3f35;
  border-color: #2d5a4a;
  color: #93e6bd;
}
.data-badge.local {
  background: #1a2430;
  border-color: #2a3a4a;
  color: #9ec5e8;
}
.data-badge.warning-badge {
  background: #4a2725;
  border-color: #6a3934;
  color: #ffaca1;
}
.data-badge.role-owner {
  background: #1f3f35;
  border-color: #2d5a4a;
  color: #93e6bd;
}
.data-badge.role-operator {
  background: #3a2a10;
  border-color: #5a4218;
  color: #f3cf8c;
}

.list, .table-list { padding: 0 12px 12px; }
.row {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  padding: 13px 10px;
  border-top: 1px solid var(--line);
}
.row-main { min-width: 0; flex: 1; }
.row-title {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.row-meta { color: var(--muted); font-size: 12px; margin-top: 3px; }
.row.stale {
  background: linear-gradient(90deg, rgba(243, 120, 104, 0.12), transparent);
  border-left: 3px solid var(--red);
  padding-left: 10px;
}
.row.overdue-row {
  background: linear-gradient(90deg, rgba(243, 120, 104, 0.1), transparent);
  border-left: 3px solid var(--red);
  padding-left: 10px;
}
.row.failed-row {
  background: linear-gradient(90deg, rgba(243, 120, 104, 0.08), transparent);
  border-left: 3px solid var(--amber);
  padding-left: 10px;
}
.badge {
  padding: 3px 8px;
  border-radius: 999px;
  background: #2a221a;
  color: #e7dcc9;
  text-transform: capitalize;
  font-size: 11px;
  white-space: nowrap;
}
.badge.warning { background: #49391c; color: #ffd982; }
.badge.danger { background: #4a2725; color: #ffaca1; }
.badge.done { background: #1f3f35; color: #93e6bd; }

.inbox-banner {
  margin: 0 16px 12px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #5a4218;
  background: #3a2a12;
  color: #ffd982;
  font-weight: 700;
}
.inbox-banner.danger {
  border-color: #6a3934;
  background: #2e1917;
  color: #ffc1b9;
}
.truth-banner {
  margin: 0 16px 14px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px dashed #6a3934;
  background: #2a1412;
  color: #ffc1b9;
  font-size: 13px;
}
.truth-banner code {
  font-size: 11px;
  color: #f3cf8c;
}

.transfer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 4px 22px 20px;
}
.transfer {
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.transfer strong { display: block; font-size: 12px; }
.transfer span { font-size: 11px; color: var(--muted); }
.ready { color: var(--green) !important; }

.milestones { padding: 0 22px 20px; }
.milestone {
  display: grid;
  grid-template-columns: minmax(100px, 1fr) 3fr 35px;
  gap: 10px;
  align-items: center;
  margin: 10px 0;
  font-size: 12px;
}
.bar {
  height: 7px;
  background: #241d17;
  border-radius: 9px;
  overflow: hidden;
}
.bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--brand-deep), var(--gold));
  border-radius: inherit;
}

.text-button {
  color: var(--gold);
  background: transparent;
  border: 0;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  min-width: 280px;
}
.search input {
  border: 0;
  background: transparent;
  color: var(--text);
  outline: 0;
  width: 100%;
  font: inherit;
}
.customer-layout {
  display: grid;
  grid-template-columns: minmax(300px, .8fr) minmax(360px, 1.2fr);
  min-height: 480px;
  border-top: 1px solid var(--line);
}
.customer-list {
  border-right: 1px solid var(--line);
  max-height: 650px;
  overflow: auto;
}
.customer, .case, .conversation {
  padding: 15px 22px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.customer:hover, .customer.selected,
.case:hover, .case.selected,
.conversation:hover, .conversation.selected {
  background: #231b14;
}
.case.overdue-case, .conversation.needs-review {
  border-left: 3px solid var(--red);
}
.customer-detail { padding: 22px; overflow: auto; }
.detail-head { border-bottom: 1px solid var(--line); padding-bottom: 15px; margin-bottom: 14px; }
.detail-head h3 { font-size: 22px; margin: 0 0 4px; }
.detail-section { margin: 18px 0; }
.detail-section h4 {
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--muted);
  margin: 0 0 8px;
}
.detail-item { padding: 9px 0; border-bottom: 1px solid #241d17; }
.table-list .row { padding: 14px 10px; }
.action {
  font: inherit;
  font-weight: 700;
  border: 1px solid #5a4530;
  color: #f0e2cc;
  background: #241c14;
  padding: 7px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.button {
  font: inherit;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #c22a2a 0, var(--brand-deep) 100%);
  border: 0;
  padding: 9px 14px;
  border-radius: 9px;
  cursor: pointer;
}
.button.secondary {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text);
}
.button:disabled, .action:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.empty { padding: 28px 10px; color: var(--muted); text-align: center; }
.alert {
  margin: 0 0 18px;
  padding: 13px 16px;
  border: 1px solid #6a3934;
  background: #2e1917;
  color: #ffc1b9;
  border-radius: 9px;
}
.case-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.case-filters input, .case-filters select {
  background: #0f0d0b;
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
}
.note-list { margin: 0; padding-left: 18px; color: var(--text); }
.transcript { display: flex; flex-direction: column; gap: 8px; }
.transcript-turn {
  padding: 10px 12px;
  border-radius: 8px;
  background: #14110e;
  border: 1px solid #241d17;
}
.transcript-turn b {
  display: block;
  font-size: 11px;
  color: var(--gold);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.recording-player { width: 100%; margin-top: 10px; }
.conversation-preview {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.recording-preview {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.recording-identifiers {
  margin-top: 10px;
  color: var(--muted);
  font: 11px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow-wrap: anywhere;
}
.recording-transcript {
  padding: 14px;
  border: 1px solid #241d17;
  border-radius: 10px;
  background: #14110e;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.age-chip {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  background: #4a2725;
  color: #ffaca1;
}
.age-chip.fresh {
  background: #1f3f35;
  color: #93e6bd;
}

.cost-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
  padding: 0 22px 16px;
}
.cost-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}
.cost-form label.check { flex-direction: row; align-items: center; gap: 6px; padding-bottom: 8px; }
.cost-form input, .cost-form select {
  background: #0f0d0b;
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  min-width: 100px;
}
.owner-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 4px 10px 12px;
}
.owner-tile {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  background: #14110e;
}
.owner-tile .k { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.owner-tile .v { font-size: 22px; font-weight: 800; margin-top: 4px; }

dialog {
  background: #1c1712;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 0;
  max-width: 390px;
}
dialog::backdrop { background: #020201aa; }
dialog form { padding: 26px; }
dialog h2 { margin: 0; font-size: 22px; }
dialog p:not(.eyebrow) { color: var(--muted); }
dialog input {
  width: 100%;
  padding: 11px;
  margin: 12px 0 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0f0d0b;
  color: #fff;
  font: inherit;
}
.dialog-actions { display: flex; justify-content: flex-end; gap: 9px; }

@media (max-width: 850px) {
  .split { grid-template-columns: 1fr; }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .customer-layout { grid-template-columns: 1fr; }
  .customer-list { border-right: 0; border-bottom: 1px solid var(--line); max-height: 330px; }
  .hero { align-items: start; flex-direction: column; }
  .search { min-width: 0; width: 100%; }
  .panel-head { align-items: flex-start; flex-direction: column; }
  .owner-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  html, body { overflow-x: hidden; max-width: 100%; }
  .shell { padding: 0 14px 28px; max-width: 100vw; }
  .topbar { height: auto; padding: 14px 0; flex-direction: column; align-items: flex-start; gap: 10px; }
  .top-actions { width: 100%; }
  .hero { padding: 26px 0 24px; }
  .hero h1 { font-size: 28px; }
  .metric-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .transfer-grid { grid-template-columns: 1fr; }
  .row { flex-wrap: wrap; }
  .row-title { white-space: normal; overflow-wrap: anywhere; }
  dialog { max-width: calc(100vw - 32px); }
}