/* LeadAXE 1.0 Beta
   Premium dark operations UI. This file intentionally overrides the earlier
   cyberpunk prototype without risking the working component contracts. */

:root {
  --bg: #071015;
  --panel: #0d171d;
  --panel2: #122129;
  --line: #263943;
  --line2: rgba(245, 156, 74, 0.55);
  --cyan: #39d4e8;
  --orange: #f59c4a;
  --green: #37c98b;
  --red: #f4696b;
  --yellow: #f2c14e;
  --ink: #f4f7f8;
  --muted: #a8b6bd;
  --deep: #071015;
  --shadow: 0 12px 34px rgba(0, 0, 0, 0.22);
}

html { scroll-behavior: smooth; }

html {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background:
    radial-gradient(70% 55% at 60% -10%, rgba(57, 212, 232, 0.08), transparent 65%),
    var(--bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

button,
input,
select,
textarea,
.nav,
.tab,
label,
.metric-card span {
  letter-spacing: normal;
  text-transform: none;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--cyan) !important;
  outline-offset: 2px;
}

.eyebrow {
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--cyan);
  font-size: 10px;
}

h1 {
  font-size: 22px;
  letter-spacing: -0.025em;
  text-shadow: none;
}

h2 {
  font-size: clamp(30px, 3vw, 42px);
  letter-spacing: -0.045em;
  line-height: 1.05;
}

h3 { font-size: 15px; }

p,
small,
label,
input,
select,
textarea,
button { font-size: 14px; }

.topbar {
  height: 72px;
  padding: 11px 22px;
  background: rgba(7, 16, 21, 0.94);
  border-color: var(--line);
}

.brand-mark { width: 42px; height: 42px; flex: 0 0 42px; display: block; filter: drop-shadow(0 8px 18px rgba(28, 198, 217, 0.12)); }
.login-mark { width: 58px; height: 58px; margin-bottom: 8px; }

.beta-mark {
  display: inline-flex;
  vertical-align: 3px;
  padding: 3px 6px;
  border: 1px solid rgba(57, 212, 232, 0.35);
  border-radius: 6px;
  color: var(--cyan);
  background: rgba(57, 212, 232, 0.08);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.status-pill {
  border-radius: 999px;
  box-shadow: none;
  padding: 6px 10px;
  text-transform: none;
  letter-spacing: 0;
}

.layout { grid-template-columns: 218px minmax(0, 1fr); }

.rail {
  top: 72px;
  height: calc(100vh - 72px);
  padding: 20px 14px 14px;
  gap: 3px;
  overflow-y: auto;
  background: rgba(8, 18, 23, 0.76);
  border-color: var(--line);
}

.nav-group-label {
  padding: 15px 10px 6px;
  color: #778992;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.nav-group-label:first-child { padding-top: 2px; }
.rail-spacer { flex: 1 1 18px; min-height: 8px; }

.nav {
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 9px 10px;
  background: transparent;
  color: #a8b6bd;
  font-size: 15px;
  font-weight: 600;
}

.nav:hover { color: var(--ink); background: rgba(255, 255, 255, 0.035); border-color: transparent; box-shadow: none; }
.nav.active { color: #eefdff; background: rgba(57, 212, 232, 0.1); border-color: rgba(57, 212, 232, 0.2); box-shadow: none; }
.nav.link { margin-top: 0; color: var(--muted); border-color: transparent; }
.nav-icon { width: 18px; color: currentColor; font-size: 16px; text-align: center; }
.nav-badge { margin-left: auto; min-width: 21px; padding: 1px 6px; border-radius: 999px; background: var(--orange); color: #1c1208; font-size: 11px; text-align: center; }

.workspace { width: 100%; max-width: none; padding: 30px clamp(22px, 2.4vw, 54px) 68px; }
.screen-head { align-items: center; margin-bottom: 24px; }
.screen-head h2:focus { outline: none; }
.screen-subtitle { margin-top: 7px; color: var(--muted); font-size: 14px; }
.dashboard-head { align-items: flex-end; }
.dashboard-date { margin-top: 9px; color: #748992; font-size: 12px; font-weight: 650; }
.dashboard-head-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.icon-button { display: grid; place-items: center; width: 42px; min-width: 42px; height: 42px; padding: 0; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: var(--panel); font-size: 18px; }
.icon-button:hover { color: var(--cyan); border-color: rgba(57, 212, 232, 0.42); }

.panel,
.metric-card,
.kill-panel,
.notice,
.global-error {
  border-color: var(--line);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.global-error[data-refresh-banner="true"] { display: grid; gap: 9px; }
.stale-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.stale-row > div { display: grid; gap: 2px; }
.stale-row span { color: #f0b9c2; font-size: 13px; }

.panel { padding: 18px; }
.panel-head { align-items: center; }
.panel-copy { margin-top: 5px; color: var(--muted); font-size: 14px; max-width: 780px; }
.mini { color: #84939b; letter-spacing: 0; text-transform: none; }

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

.metric-card {
  min-height: 130px;
  padding: 18px;
  border-color: var(--line);
  box-shadow: none;
}

.metric-card span { color: var(--muted); font-size: 12px; font-weight: 650; }
.metric-card strong { font-size: clamp(27px, 3vw, 39px); letter-spacing: -0.045em; }
.metric-card small { color: #84939b; }

.dashboard-pipeline-panel { margin-top: 14px; padding: 16px 18px; }
.pipeline-snapshot { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 8px; margin-top: 14px; }
.pipeline-pulse {
  position: relative;
  min-width: 0;
  min-height: 84px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 12px;
  align-items: start;
  padding: 13px;
  overflow: hidden;
  border: 1px solid #223640;
  border-radius: 9px;
  color: var(--ink);
  background: #0a1419;
  text-align: left;
}

/* Craig Kam referral command center */
.craig-head { align-items: flex-end; }
.craig-status-banner {
  display: grid;
  grid-template-columns: auto minmax(240px, 1fr) auto;
  gap: 10px 18px;
  align-items: center;
  margin-bottom: 14px;
  padding: 15px 18px;
  border: 1px solid rgba(245, 156, 74, 0.34);
  border-radius: 10px;
  background: linear-gradient(105deg, rgba(245, 156, 74, 0.12), rgba(13, 23, 29, 0.96) 56%);
}
.craig-status-banner > span { color: var(--orange); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.craig-status-banner > strong { font-size: 17px; }
.craig-status-banner > small { color: var(--muted); text-align: right; }
.craig-status-banner.clear { border-color: rgba(55, 201, 139, 0.34); background: linear-gradient(105deg, rgba(55, 201, 139, 0.1), rgba(13, 23, 29, 0.96) 56%); }
.craig-status-banner.clear > span { color: var(--green); }
.craig-metrics .alert-metric { border-color: rgba(245, 156, 74, 0.36); }
.craig-metrics .alert-metric strong { color: var(--orange); }
.craig-metrics .win-metric strong { color: var(--green); }
.craig-main-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(290px, 0.75fr); gap: 14px; margin: 14px 0; }
.craig-funnel { display: grid; gap: 11px; margin-top: 15px; }
.craig-funnel-row { display: grid; grid-template-columns: minmax(180px, 1fr) auto; gap: 4px 18px; align-items: center; }
.craig-funnel-row > div { display: grid; }
.craig-funnel-row strong { font-size: 13px; }
.craig-funnel-row small { color: var(--muted); font-size: 11px; }
.craig-funnel-row > b { color: var(--ink); font-size: 16px; }
.craig-funnel-row > i { grid-column: 1 / -1; height: 5px; overflow: hidden; border-radius: 99px; background: #1b2c34; }
.craig-funnel-row > i span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), #79e7f2); }
.craig-speed { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 16px; margin-top: 5px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 8px; background: #0a1419; }
.craig-speed span { color: var(--cyan); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.craig-speed strong { font-size: 13px; text-align: right; }
.craig-speed small { grid-column: 1 / -1; color: var(--muted); font-size: 11px; }
.craig-health-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 15px; }
.craig-health-item { display: grid; gap: 5px; min-height: 80px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #0a1419; }
.craig-health-item span { color: var(--muted); font-size: 11px; }
.craig-health-item strong { align-self: end; font-size: 22px; }
.craig-health-item.warning strong { color: var(--orange); }
.craig-health-item.good strong { color: var(--green); }
.craig-caveats { grid-column: 1 / -1; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; }
.craig-caveats summary { color: var(--muted); font-size: 12px; cursor: pointer; }
.craig-caveats ul { margin: 9px 0 0; padding-left: 18px; color: var(--muted); font-size: 12px; }
.craig-queue-panel { margin-bottom: 14px; }
.craig-action-queue { display: grid; max-height: min(62vh, 760px); margin-top: 13px; overflow-y: auto; border-top: 1px solid var(--line); }
.craig-queue-row {
  display: grid;
  grid-template-columns: 34px minmax(150px, 0.72fr) minmax(190px, 1fr) minmax(230px, 1.25fr) minmax(180px, 0.8fr);
  gap: 13px;
  align-items: center;
  padding: 14px 2px;
  border-bottom: 1px solid rgba(38, 57, 67, 0.72);
}
.craig-queue-row.stale { box-shadow: inset 3px 0 0 rgba(245, 156, 74, 0.72); }
.craig-queue-rank { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; color: var(--muted); background: #14242c; font-size: 11px; font-weight: 800; }
.craig-queue-person, .craig-queue-reason, .craig-queue-evidence, .craig-queue-move { min-width: 0; display: grid; gap: 4px; }
.craig-queue-person > strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.craig-queue-person > span { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.craig-queue-person > span b { color: var(--muted); font-size: 11px; }
.craig-queue-reason > strong { color: #f4e1ce; font-size: 13px; }
.craig-queue-reason > span, .craig-queue-evidence > span { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.craig-queue-move small { color: var(--cyan); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.craig-queue-move strong { font-size: 12px; }
.craig-queue-move button { justify-self: start; margin-top: 3px; }
.craig-stage-panel { margin-bottom: 20px; }
.craig-stage-distribution { display: grid; grid-template-columns: repeat(5, minmax(130px, 1fr)); gap: 8px; margin-top: 14px; }
.craig-stage-cell { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #0a1419; }
.craig-stage-cell > div { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.craig-stage-cell span { color: var(--muted); font-size: 11px; }
.craig-stage-cell strong { font-size: 20px; }
.craig-stage-cell > i { height: 4px; overflow: hidden; border-radius: 99px; background: #1b2c34; }
.craig-stage-cell > i span { display: block; height: 100%; border-radius: inherit; background: var(--orange); }
.craig-stage-cell small { color: #78909b; font-size: 10px; }

body[data-mode="mobile"] .mobile-craig-command { margin: 11px 0 12px; }
body[data-mode="mobile"] .mobile-craig-command .panel-head { margin-bottom: 10px; }
body[data-mode="mobile"] .mobile-craig-command h3 { font-size: 20px; }
body[data-mode="mobile"] .mobile-craig-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--line); }
body[data-mode="mobile"] .mobile-craig-summary > div { display: grid; gap: 2px; padding: 10px 8px; background: #0a1419; text-align: center; }
body[data-mode="mobile"] .mobile-craig-summary span { color: var(--muted); font-size: 10px; }
body[data-mode="mobile"] .mobile-craig-summary strong { font-size: 19px; }
body[data-mode="mobile"] .mobile-craig-queue { display: grid; gap: 1px; margin-top: 10px; }
body[data-mode="mobile"] .mobile-craig-label { margin-bottom: 3px; color: var(--orange); font-size: 10px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; }
body[data-mode="mobile"] .mobile-craig-item { display: grid; gap: 1px; padding: 8px 0; border-top: 1px solid rgba(38, 57, 67, 0.65); }
body[data-mode="mobile"] .mobile-craig-item strong { font-size: 13px; }
body[data-mode="mobile"] .mobile-craig-item span { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.pipeline-pulse:hover { border-color: rgba(57, 212, 232, 0.45); background: #0c181e; }
.pipeline-pulse span { min-width: 0; overflow: hidden; color: #b7c5ca; font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.pipeline-pulse strong { color: var(--cyan); font-size: 22px; line-height: 1; }
.pipeline-pulse small { grid-column: 1 / -1; color: #6f838c; font-size: 11px; }
.pipeline-pulse i { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: rgba(57, 212, 232, 0.09); }
.pipeline-pulse i::after { content: ""; display: block; width: var(--pulse-width, 0%); height: 100%; background: linear-gradient(90deg, #24b8ca, #77e8f4); }

.attention-strip {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  margin: 14px 0;
  padding: 14px 16px;
  border: 1px solid rgba(245, 156, 74, 0.42);
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(245, 156, 74, 0.13), rgba(245, 156, 74, 0.045));
  cursor: pointer;
}

.attention-strip.clear { border-color: rgba(55, 201, 139, 0.28); background: rgba(55, 201, 139, 0.055); }
.attention-strip p { margin-top: 2px; color: var(--muted); font-size: 13px; }
.attention-strip > span { color: var(--orange); font-weight: 700; font-size: 13px; }
.attention-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: rgba(245, 156, 74, 0.16); color: var(--orange); font-weight: 900; }
.attention-strip.clear .attention-icon { color: var(--green); background: rgba(55, 201, 139, 0.12); }

.dashboard-primary { grid-template-columns: minmax(0, 1.15fr) minmax(330px, 0.85fr); }
.dashboard-secondary { grid-template-columns: 1fr 1fr; margin-top: 14px; }
.action-stack, .appointment-stack { max-height: 420px; overflow: auto; }
.compact-stack { max-height: 320px; overflow: auto; }
.appointment-item { display: grid !important; grid-template-columns: 92px 1fr; gap: 12px; align-items: center; }
.appointment-item time { color: var(--cyan); font-size: 12px; font-weight: 750; }

.disclosure-panel { margin-top: 14px; }
.disclosure-panel > summary { margin: 0; cursor: pointer; list-style: none; }
.disclosure-panel > summary::-webkit-details-marker { display: none; }
.disclosure-panel > summary::after { content: "+"; color: var(--cyan); font-size: 20px; }
.disclosure-panel[open] > summary { margin-bottom: 16px; }
.disclosure-panel[open] > summary::after { content: "−"; }

.traffic-grid { grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 10px; overflow-x: auto; }
.traffic-items { max-height: 480px; overflow-y: auto; }

.kanban {
  grid-auto-columns: minmax(285px, 315px);
  gap: 12px;
  max-height: calc(100vh - 190px);
  min-height: 590px;
  scroll-snap-type: x proximity;
}

.stage {
  min-height: 560px;
  max-height: calc(100vh - 205px);
  overflow-y: auto;
  padding: 12px;
  border-radius: 10px;
  background: rgba(13, 23, 29, 0.88);
  scroll-snap-align: start;
}

.stage h3 { position: sticky; top: -12px; z-index: 2; padding: 12px 2px 10px; background: rgba(13, 23, 29, 0.97); }
.opp-card { border-color: #293e48; border-radius: 9px; background: #0a1419; padding: 13px; }
.opp-card:hover { border-color: rgba(57, 212, 232, 0.48); transform: translateY(-1px); }
.opp-card-head { display: flex; justify-content: space-between; gap: 10px; }
.opp-card .value { margin: 0; font-size: 12px; white-space: nowrap; }
.opp-meta { display: grid; gap: 4px; margin-top: 10px; color: #8fa0a8; font-size: 13px; }
.opp-meta span:last-child { color: #bac5ca; }
.opp-meta .overdue { color: var(--orange); }

.contact-tools { display: grid; grid-template-columns: minmax(220px, 1fr) auto auto; width: min(720px, 100%); }
.contact-viewbar { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 12px; }
.contact-views { display: flex; overflow-x: auto; padding: 3px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); }
.contact-views button { flex: 0 0 auto; min-height: 38px; border: 0; border-radius: 7px; padding: 7px 12px; color: var(--muted); background: transparent; }
.contact-views button.active { color: var(--ink); background: rgba(57, 212, 232, 0.12); }
.contact-filters { display: flex; align-items: center; gap: 8px; }
.contact-directory-panel { margin-bottom: 14px; padding: 0; overflow: hidden; }
.contact-directory { max-height: 390px; overflow-y: auto; }
.directory-contact { width: 100%; display: grid; grid-template-columns: 42px minmax(0, 1fr) minmax(170px, 0.55fr); gap: 12px; align-items: center; min-height: 64px; padding: 9px 14px; border: 0; border-bottom: 1px solid rgba(38, 57, 67, 0.62); color: var(--ink); background: transparent; text-align: left; }
.directory-contact:hover { background: rgba(255, 255, 255, 0.025); }
.directory-contact.active { background: rgba(57, 212, 232, 0.08); box-shadow: inset 3px 0 var(--cyan); }
.directory-avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; color: var(--cyan); background: rgba(57, 212, 232, 0.1); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.directory-main, .directory-meta { display: grid; gap: 2px; min-width: 0; }
.directory-main strong, .directory-main small, .directory-meta small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.directory-main small, .directory-meta small { color: var(--muted); font-size: 13px; }
.directory-meta { text-align: right; }
.directory-meta b { color: #b9c7cd; font-size: 11px; font-weight: 700; text-transform: capitalize; }
.directory-footer { display: flex; justify-content: center; padding: 9px; background: rgba(0, 0, 0, 0.09); }
.internal-picker { position: absolute !important; width: 1px !important; height: 1px !important; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.contact-tag-bar { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 9px; }
.contact-tag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px 4px 9px; border: 1px solid rgba(57, 212, 232, 0.25); border-radius: 999px; color: #bfeff5; background: rgba(57, 212, 232, 0.08); font-size: 12px; }
.contact-tag button { display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; color: var(--muted); background: rgba(255, 255, 255, 0.05); }
.tag-manager { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; margin-bottom: 12px; }
.pipeline-lifecycle-block { display: grid; gap: 10px; margin: 12px 0; padding: 13px; border: 1px solid rgba(57, 212, 232, 0.3); border-radius: 9px; background: rgba(57, 212, 232, 0.045); }
.pipeline-lifecycle-block .panel-head { align-items: flex-start; }
.pipeline-lifecycle-list { display: grid; gap: 7px; }
.pipeline-lifecycle-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 8px; background: #0a1419; }
.pipeline-lifecycle-row.active { border-color: rgba(57, 212, 232, 0.4); box-shadow: inset 3px 0 var(--cyan); }
.pipeline-lifecycle-row > div { display: grid; }
.pipeline-lifecycle-row span { color: var(--muted); font-size: 11px; }
.pipeline-lifecycle-row strong { font-size: 16px; }
.pipeline-lifecycle-row > b { align-self: start; padding: 3px 7px; border-radius: 999px; color: var(--green); background: rgba(55, 201, 139, 0.09); font-size: 10px; text-transform: capitalize; }
.pipeline-lifecycle-row > small { grid-column: 1 / -1; color: var(--muted); font-size: 11px; }
.pipeline-lifecycle-empty { display: grid; gap: 2px; padding: 11px; border: 1px dashed var(--line); border-radius: 8px; }
.pipeline-lifecycle-empty strong { color: var(--orange); }
.pipeline-lifecycle-empty span { color: var(--muted); font-size: 12px; }
.pipeline-lifecycle-actions { margin-top: 0; }
.record-pipeline-rule { padding: 10px 12px; border-left: 3px solid var(--orange); border-radius: 0 8px 8px 0; color: #ffd9b5; background: rgba(245, 156, 74, 0.08); font-size: 12px; }
.danger-button { min-height: 40px; padding: 8px 12px; border: 1px solid rgba(244, 105, 107, 0.4); border-radius: 8px; color: #ffb5b6; background: rgba(244, 105, 107, 0.08); }
.next-action-block { margin: 12px 0; padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: rgba(0, 0, 0, 0.1); }
.next-action-block .panel-head { margin-bottom: 9px; }
.next-action-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(185px, 0.7fr) auto; gap: 7px; }
.task-presets { grid-column: 2 / -1; display: flex; justify-content: flex-end; gap: 6px; }
.contact-task-list { display: grid; gap: 6px; margin-top: 9px; }
.contact-task { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px; border-radius: 7px; background: rgba(255, 255, 255, 0.025); }
.contact-task > div { display: grid; }
.contact-task small { color: var(--muted); }
.missing-action { padding: 8px; color: var(--orange); }

.view-count {
  display: inline-grid;
  place-items: center;
  min-width: 25px;
  margin-left: 5px;
  padding: 1px 6px;
  border-radius: 999px;
  color: var(--cyan);
  background: rgba(57, 212, 232, 0.1);
  font-size: 11px;
}

.automation-cycle-panel { margin: 0 0 16px; border-color: rgba(57, 212, 232, 0.34); background: linear-gradient(120deg, rgba(57, 212, 232, 0.065), rgba(13, 23, 29, 0.98) 42%); }
.record-chip { display: inline-flex; align-items: center; min-height: 34px; padding: 6px 10px; border: 1px solid rgba(57, 212, 232, 0.26); border-radius: 999px; color: #c8f4f8; background: rgba(57, 212, 232, 0.08); font-size: 12px; font-weight: 700; }
.automation-cycle-grid { display: grid; grid-template-columns: minmax(330px, 0.78fr) minmax(420px, 1.22fr); gap: 18px; }
.automation-picker-card { padding: 15px; border: 1px solid var(--line); border-radius: 10px; background: rgba(4, 11, 15, 0.38); }
.automation-picker-card > label { display: block; margin-bottom: 7px; color: #d8e2e6; font-weight: 750; }
.automation-picker-card > select { width: 100%; }
.automation-preview { min-height: 62px; margin: 10px 0; padding: 11px 12px; border-left: 3px solid var(--cyan); border-radius: 0 8px 8px 0; color: #c4d1d6; background: rgba(57, 212, 232, 0.055); line-height: 1.45; }
.automation-preview strong { color: var(--ink); }
.automation-preview.warn { border-color: var(--orange); background: rgba(245, 156, 74, 0.07); }
.automation-actions { flex-wrap: wrap; }
.automation-status { min-height: 23px; margin-top: 9px; color: var(--green); font-size: 13px; font-weight: 700; }
.automation-status.error { color: var(--red); }
.subsection-title { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.subsection-title h4 { margin: 0; font-size: 14px; }
.automation-enrollment-list { display: grid; gap: 8px; }
.automation-enrollment { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; min-height: 70px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255, 255, 255, 0.025); }
.automation-enrollment strong { display: block; font-size: 14px; }
.automation-enrollment small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
.cycle-status { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 999px; color: #bcefd8; background: rgba(55, 201, 139, 0.1); font-size: 11px; font-weight: 800; text-transform: capitalize; }
.cycle-status.paused, .cycle-status.removed, .cycle-status.finished { color: #ffd2a5; background: rgba(245, 156, 74, 0.1); }

.file-drop { display: flex; justify-content: space-between; align-items: center; min-height: 54px; margin: 16px 0 12px; padding: 10px 13px; border: 1px dashed rgba(57, 212, 232, 0.45); border-radius: 9px; color: var(--cyan); background: rgba(57, 212, 232, 0.04); }
.file-drop input { max-width: 62%; color: var(--muted); }
.import-dialog { width: min(900px, calc(100vw - 28px)); }
.import-mapping { display: grid; max-height: 300px; overflow-y: auto; border: 1px solid var(--line); border-radius: 9px; }
.mapping-head, .mapping-row { display: grid; grid-template-columns: minmax(150px, 0.7fr) minmax(220px, 1.3fr); gap: 12px; align-items: center; min-height: 45px; padding: 6px 11px; border-bottom: 1px solid rgba(38, 57, 67, 0.65); }
.mapping-head { position: sticky; top: 0; z-index: 1; color: var(--muted); background: var(--panel2); font-size: 11px; }
.mapping-row span { color: #c4cfd4; font-size: 13px; }
.mapping-row select { min-height: 34px; }
.import-options { margin: 11px 0; }
.import-options label { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.import-preview { max-height: 280px; overflow: auto; margin: 10px 0; border: 1px solid var(--line); border-radius: 9px; }
.import-count { padding: 10px 12px; color: var(--muted); }
.table-scroll { overflow-x: auto; }
.import-preview table { width: 100%; border-collapse: collapse; font-size: 12px; }
.import-preview th, .import-preview td { max-width: 220px; padding: 7px 10px; border-bottom: 1px solid rgba(38, 57, 67, 0.55); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.import-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); }
.import-stats > div { display: grid; padding: 12px; background: var(--panel); }
.import-stats strong { font-size: 24px; }
.import-stats span { color: var(--muted); font-size: 11px; }
.validation-list > div { display: grid; grid-template-columns: 70px 150px 1fr; gap: 9px; padding: 7px 10px; border-top: 1px solid rgba(38, 57, 67, 0.6); }
.validation-list span { color: var(--cyan); text-transform: capitalize; }
.validation-list .validation-skip_invalid { color: var(--red); }
.validation-list .validation-skip_duplicate { color: var(--yellow); }
.validation-list small { color: var(--muted); }

.triage-panel { margin-bottom: 14px; }
.triage-summary { display: grid; grid-template-columns: auto auto auto auto; align-items: baseline; gap: 4px 8px; }
.triage-summary strong { color: var(--orange); font-size: 23px; }
.triage-summary span { color: var(--muted); font-size: 11px; }
.triage-list { max-height: 520px; overflow-y: auto; border-top: 1px solid var(--line); }
.triage-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 13px; align-items: center; padding: 14px 2px; border-bottom: 1px solid rgba(38, 57, 67, 0.7); }
.sender-avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(57, 212, 232, 0.11); color: var(--cyan); font-size: 11px; font-weight: 800; }
.triage-copy > div { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.triage-copy p { max-width: 720px; margin: 4px 0; color: #c6d0d4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.triage-copy small { color: #84939b; }
.channel-chip, .warn-chip { padding: 2px 6px; border-radius: 999px; background: rgba(57, 212, 232, 0.09); color: var(--cyan); font-size: 10px; }
.warn-chip { color: var(--orange); background: rgba(245, 156, 74, 0.1); }
.triage-actions { display: flex; gap: 7px; }
.compact { min-height: 36px; padding: 7px 10px; font-size: 12px; }
.inbox-layout { grid-template-columns: minmax(280px, 0.85fr) minmax(360px, 1.15fr); }
#inboxList { max-height: 62vh; overflow-y: auto; }
#replyBody { min-height: 112px; }
.conversation-row { display: block; width: 100%; color: inherit; background: transparent; text-align: left; }
.conversation-row:hover, .conversation-row.active { border-color: rgba(57, 212, 232, 0.46); background: rgba(57, 212, 232, 0.07); }
.conversation-row p:last-of-type { display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; }
.conversation-workspace { min-width: 0; }
.conversation-auto-status { min-height: 16px; margin: 7px 0 0; color: var(--cyan); }
.conversation-thread { display: flex; flex-direction: column; gap: 10px; min-height: 260px; max-height: 48vh; margin: 8px 0 12px; padding: 14px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; background: rgba(3, 10, 14, 0.62); }
.conversation-bubble { align-self: flex-start; width: min(82%, 620px); padding: 11px 13px; border: 1px solid rgba(38, 57, 67, 0.86); border-radius: 5px 13px 13px 13px; background: #101d23; }
.conversation-bubble.out { align-self: flex-end; border-color: rgba(57, 212, 232, 0.28); border-radius: 13px 5px 13px 13px; background: rgba(57, 212, 232, 0.1); }
.conversation-bubble > div { color: var(--ink); line-height: 1.48; white-space: pre-wrap; overflow-wrap: anywhere; }
.conversation-bubble small { display: block; margin-top: 7px; color: var(--muted); font-size: 11px; text-transform: capitalize; }
.conversation-actions { display: flex; justify-content: flex-end; margin: -4px 0 10px; }
.conversation-reply-status { min-height: 18px; margin: 8px 0 0; color: var(--cyan); }

.match-dialog { width: min(680px, calc(100vw - 28px)); padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--panel2); color: var(--ink); box-shadow: 0 26px 80px rgba(0, 0, 0, 0.55); }
.match-dialog::backdrop { background: rgba(1, 7, 10, 0.76); backdrop-filter: blur(5px); }
.match-card { padding: 20px; }
.match-card .panel-head { margin-bottom: 10px; }
.icon-button { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: transparent; font-size: 22px; }
.match-results { display: grid; gap: 7px; max-height: 310px; overflow-y: auto; margin: 10px 0; }
.match-result { display: flex; justify-content: space-between; align-items: center; min-height: 48px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: #0b171d; text-align: left; }
.match-result:hover { border-color: var(--cyan); }
.match-result span { color: var(--muted); font-size: 12px; }
.create-contact-inline { padding-top: 10px; border-top: 1px solid var(--line); }
.create-contact-inline summary { color: var(--cyan); cursor: pointer; font-weight: 700; }
.create-contact-inline .form-grid { margin-top: 12px; }

.learn-head .input { width: min(380px, 100%); }
.learn-hero { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 16px; padding: 24px; border: 1px solid rgba(57, 212, 232, 0.24); border-radius: 12px; background: linear-gradient(120deg, rgba(57, 212, 232, 0.12), rgba(13, 23, 29, 0.8)); }
.learn-hero h3 { margin: 3px 0 7px; font-size: 22px; }
.learn-hero p { color: var(--muted); }
.lesson-kicker { color: var(--cyan); font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.manual-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 14px; }
.manual-toc { display: flex; flex-direction: column; align-self: start; position: sticky; top: 86px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.manual-toc button { min-height: 40px; padding: 8px 10px; border: 0; border-radius: 7px; color: var(--muted); background: transparent; text-align: left; }
.manual-toc button:hover, .manual-toc button.active { color: var(--ink); background: rgba(57, 212, 232, 0.1); }
.manual-article { min-height: 620px; max-height: calc(100vh - 190px); overflow-y: auto; padding: clamp(22px, 4vw, 48px); }
.manual-article > h2 { margin: 5px 0 28px; font-size: 34px; }
.manual-article h3 { margin: 30px 0 9px; color: #f6fafb; font-size: 19px; }
.manual-article h4 { margin: 24px 0 8px; }
.manual-article p { max-width: 830px; margin: 0 0 13px; color: #c1ccd1; }
.manual-article ol, .manual-article ul { max-width: 830px; margin: 0 0 18px; padding-left: 24px; color: #c1ccd1; }
.manual-article li { margin: 7px 0; padding-left: 4px; }

@media (max-width: 1100px) {
  .grid.metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-primary, .dashboard-secondary { grid-template-columns: 1fr; }
  .traffic-grid { grid-template-columns: repeat(2, minmax(230px, 1fr)); }
  .automation-cycle-grid { grid-template-columns: 1fr; }
  .craig-main-grid { grid-template-columns: 1fr; }
  .craig-queue-row { grid-template-columns: 32px minmax(140px, 0.7fr) minmax(180px, 1fr) minmax(200px, 1fr); }
  .craig-queue-move { grid-column: 2 / -1; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
  .craig-queue-move button { margin-top: 0; }
  .craig-stage-distribution { grid-template-columns: repeat(3, minmax(130px, 1fr)); }
}

@media (min-width: 1800px) {
  .layout { grid-template-columns: 242px minmax(0, 1fr); }
  .workspace { padding: 38px clamp(42px, 3vw, 86px) 80px; }
  .screen-head { margin-bottom: 30px; }
  .screen-head h2 { font-size: 48px; }
  .grid.metrics { gap: 16px; }
  .metric-card { min-height: 148px; padding: 22px; }
  .dashboard-primary { grid-template-columns: minmax(0, 1.42fr) minmax(430px, 0.58fr); }
  .dashboard-secondary { grid-template-columns: minmax(0, 1.25fr) minmax(420px, 0.75fr); }
  .contact-directory { max-height: 470px; }
  .directory-contact { min-height: 72px; padding: 11px 17px; }
  .contact-shell { grid-template-columns: minmax(520px, 0.9fr) minmax(560px, 1.1fr); gap: 20px; }
  .automation-cycle-grid { grid-template-columns: minmax(440px, 0.7fr) minmax(600px, 1.3fr); }
  .campaign-layout { grid-template-columns: minmax(390px, 0.65fr) minmax(720px, 1.35fr); }
  .manual-layout { grid-template-columns: 280px minmax(0, 1fr); }
  .craig-main-grid { grid-template-columns: minmax(760px, 1.6fr) minmax(410px, 0.7fr); }
  .craig-action-queue { max-height: 52vh; overflow-y: auto; }
}

@media (min-width: 2400px) {
  .kanban { grid-auto-columns: minmax(260px, 1fr); }
  .opp-card { padding: 14px; }
  .directory-main strong { font-size: 15px; }
}

@media (max-width: 780px) {
  body[data-mode="desktop"] { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
  body[data-mode="desktop"] .layout { display: block; }
  body[data-mode="desktop"] .rail {
    position: fixed;
    z-index: 80;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    height: calc(62px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: row;
    gap: 2px;
    padding: 5px 8px env(safe-area-inset-bottom, 0px);
    overflow-x: auto;
    border: 0;
    border-top: 1px solid var(--line);
    background: rgba(7, 16, 21, 0.98);
  }
  body[data-mode="desktop"] .nav-group-label,
  body[data-mode="desktop"] .rail-spacer,
  body[data-mode="desktop"] .rail [data-screen="campaigns"],
  body[data-mode="desktop"] .rail [data-screen="templates"],
  body[data-mode="desktop"] .rail [data-screen="approve"],
  body[data-mode="desktop"] .rail [data-screen="scripts"],
  body[data-mode="desktop"] .rail [data-screen="soda"],
  body[data-mode="desktop"] .rail [data-screen="settings"],
  body[data-mode="desktop"] .rail .link { display: none; }
  body[data-mode="desktop"] .nav { flex: 1 0 64px; min-height: 54px; flex-direction: column; justify-content: center; gap: 1px; padding: 3px 6px; font-size: 10px; text-align: center; }
  body[data-mode="desktop"] .nav-icon { font-size: 17px; }
  .topbar { position: sticky; height: 58px; flex-direction: row; align-items: center; padding: 8px 13px; }
  .topbar .status-note { display: none; }
  .topbar .sigil { width: 28px; height: 28px; }
  .topbar .brand-mark { width: 32px; height: 32px; flex-basis: 32px; }
  .topbar h1 { font-size: 18px; }
  .workspace { padding: 18px 13px 30px; }
  .screen-head { align-items: flex-start; }
  .dashboard-head { gap: 15px; }
  .craig-head { align-items: flex-start; gap: 15px; }
  .craig-status-banner { grid-template-columns: 1fr; gap: 4px; }
  .craig-status-banner > small { text-align: left; }
  .craig-main-grid { grid-template-columns: 1fr; }
  .craig-health-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .craig-queue-row { grid-template-columns: 30px minmax(0, 1fr); align-items: start; }
  .craig-queue-reason, .craig-queue-evidence, .craig-queue-move { grid-column: 2; }
  .craig-queue-move { grid-template-columns: 1fr; }
  .craig-stage-distribution { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-head-actions { width: 100%; justify-content: stretch; }
  .dashboard-head-actions > button:not(.icon-button) { flex: 1; }
  .screen-head h2 { font-size: 31px; }
  .grid.metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pipeline-snapshot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-card { min-height: 112px; padding: 14px; }
  .metric-card strong { font-size: 28px; }
  .attention-strip { grid-template-columns: auto 1fr; }
  .attention-strip > span { display: none; }
  .triage-row { grid-template-columns: 38px minmax(0, 1fr); }
  .triage-actions { grid-column: 1 / -1; }
  .triage-actions button { flex: 1; min-height: 44px; }
  .triage-summary { grid-template-columns: auto auto; }
  .triage-copy p { max-width: calc(100vw - 100px); }
  .inbox-layout { grid-template-columns: 1fr; }
  #inboxList { max-height: 380px; }
  .kanban { grid-auto-columns: minmax(270px, 88vw); min-height: 520px; max-height: 65vh; }
  .stage { min-height: 500px; max-height: 64vh; }
  .learn-head { flex-direction: column; }
  .learn-hero { align-items: flex-start; flex-direction: column; }
  .manual-layout { grid-template-columns: 1fr; }
  .manual-toc { position: static; flex-direction: row; overflow-x: auto; }
  .manual-toc button { flex: 0 0 auto; }
  .manual-article { max-height: none; min-height: 420px; padding: 20px; }
  .traffic-grid { grid-template-columns: 1fr; }
  #screen-contact .screen-head { flex-direction: column; align-items: stretch; }
  .contact-tools { grid-template-columns: 1fr 1fr; width: 100%; }
  .contact-tools #contactSearch { grid-column: 1 / -1; }
  .contact-viewbar { align-items: stretch; flex-direction: column; }
  .contact-filters { overflow-x: auto; }
  .directory-contact { grid-template-columns: 38px minmax(0, 1fr); }
  .directory-meta { grid-column: 2; text-align: left; }
  .mapping-head, .mapping-row { grid-template-columns: 120px minmax(180px, 1fr); }
  .import-stats { grid-template-columns: repeat(2, 1fr); }
  .next-action-form { grid-template-columns: 1fr; }
  .task-presets { grid-column: 1; justify-content: flex-start; }
  .automation-cycle-panel .panel-head { align-items: flex-start; flex-direction: column; }
  .automation-actions > * { flex: 1 1 130px; }
}

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

body[data-mode="mobile"] .tabbar { grid-template-columns: repeat(7, 1fr); }
body[data-mode="mobile"] .tab { padding-inline: 2px; font-size: 9px; }
body[data-mode="mobile"] .mobile-reply { position: sticky; top: 76px; z-index: 4; margin: 0 0 10px; }
body[data-mode="mobile"] .mobile-inbox-list { max-height: 52vh; overflow-y: auto; }
body[data-mode="mobile"] #mConversationPanel[hidden], body[data-mode="mobile"] #mInboxListPanel[hidden] { display: none; }
body[data-mode="mobile"] .mobile-reply { position: static; }
body[data-mode="mobile"] #mConversationPanel { scroll-margin-top: 76px; }
body[data-mode="mobile"] .mobile-conversation-thread { min-height: 46vh; max-height: 55vh; padding: 10px; }
body[data-mode="mobile"] .conversation-bubble { width: 90%; }
body[data-mode="mobile"] #mReplyBody { min-height: 124px; margin-top: 10px; font-size: 16px; }
body[data-mode="mobile"] #mConversationOpenContact { width: 100%; margin-bottom: 4px; }
body[data-mode="mobile"] .mobile-manual-toc { position: static; flex-direction: row; overflow-x: auto; margin: 10px 0; }
body[data-mode="mobile"] .mobile-manual-toc button { flex: 0 0 auto; }
body[data-mode="mobile"] .mobile-manual { max-height: none; min-height: 420px; padding: 18px; }
body[data-mode="mobile"] .mobile-stage-tabs { display: flex; gap: 7px; margin-bottom: 10px; overflow-x: auto; scroll-snap-type: x proximity; }
body[data-mode="mobile"] .mobile-stage-tabs button { flex: 0 0 auto; min-height: 44px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: var(--panel); scroll-snap-align: start; }
body[data-mode="mobile"] .mobile-stage-tabs button.active { color: var(--ink); border-color: rgba(57, 212, 232, 0.45); background: rgba(57, 212, 232, 0.1); }
body[data-mode="mobile"] .mobile-stage-tabs b { margin-left: 5px; color: var(--cyan); }
body[data-mode="mobile"] .mobile-single-stage { min-height: 0; max-height: none; overflow: visible; }
body[data-mode="mobile"] .mobile-head .brand-mark { width: 34px; height: 34px; flex-basis: 34px; }
body[data-mode="mobile"] .mobile-contact-toolbar { display: flex; align-items: center; gap: 9px; margin: 10px 0; }
body[data-mode="mobile"] #mContactSearch { width: 100%; min-height: 46px; font-size: 16px; }
body[data-mode="mobile"] .mobile-contact-toolbar .select { flex: 1; }
body[data-mode="mobile"] .mobile-contact-list { display: grid; max-height: 46vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; }
body[data-mode="mobile"] .mobile-contact-list .directory-contact { grid-template-columns: 38px minmax(0, 1fr); min-height: 62px; padding: 9px 11px; }
body[data-mode="mobile"] .mobile-contact-list .directory-meta { display: none; }
body[data-mode="mobile"] .mobile-load-more { width: 100%; margin: 8px 0 12px; }
body[data-mode="mobile"] .mobile-contact-detail { margin-top: 0; }
body[data-mode="mobile"] .mobile-pipeline-lifecycle { display: grid; gap: 9px; margin: 12px 0; padding: 12px 0; border-top: 1px solid var(--line); }
body[data-mode="mobile"] .mobile-pipeline-lifecycle > button { width: 100%; }
body[data-mode="mobile"] .mobile-automation-block { display: grid; gap: 9px; padding-top: 12px; border-top: 1px solid var(--line); }
body[data-mode="mobile"] .mobile-automation-block > h3 { font-size: 17px; }
body[data-mode="mobile"] .mobile-automation-block .button-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
body[data-mode="mobile"] .mobile-automation-block .button-row button { min-width: 0; padding: 8px 5px; }
body[data-mode="mobile"] .automation-enrollment { grid-template-columns: 1fr; }
body[data-mode="mobile"] .tab { min-width: 0; padding: 4px 2px; font-size: 11px; font-weight: 750; }

@media (min-width: 781px) and (max-width: 1500px) {
  .contact-viewbar { align-items: stretch; flex-direction: column; }
  .contact-views { flex-wrap: wrap; overflow: visible; }
  .contact-views button { flex: 1 1 auto; }
}

[aria-busy="true"] .metric-card,
[aria-busy="true"] .mobile-metrics article { animation: loading-pulse 1s ease-in-out infinite alternate; }

.safety-lock { padding: 8px 11px; border: 1px solid rgba(245, 156, 74, 0.34); border-radius: 999px; color: var(--orange); background: rgba(245, 156, 74, 0.08); font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.ai-team-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, 0.75fr); gap: 14px; margin: 14px 0; }
.ai-session-queue, .ai-roster, .ai-source-list { display: grid; gap: 9px; }
.ai-session-card, .ai-agent-card, .ai-source-card { padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel2); }
.ai-session-card.needs-human { border-color: rgba(245, 156, 74, 0.52); box-shadow: inset 3px 0 0 var(--orange); }
.ai-session-top, .ai-agent-card > div, .ai-source-card > div { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ai-session-top > div { display: grid; gap: 3px; }
.ai-session-card p, .ai-agent-card p, .ai-source-card p { margin: 8px 0; color: var(--muted); }
.ai-session-meta { display: flex; flex-wrap: wrap; gap: 7px 14px; margin-bottom: 10px; color: var(--muted); font-size: 11px; }
.ai-stage, .ai-agent-status, .ai-source-status { flex: 0 0 auto; padding: 4px 7px; border: 1px solid rgba(57, 212, 232, 0.28); border-radius: 999px; color: var(--cyan); font-size: 10px; font-weight: 850; text-transform: uppercase; }
.ai-agent-status.planned, .ai-source-status.draft { color: var(--muted); border-color: var(--line); }
.ai-source-status.stale { color: var(--orange); border-color: rgba(245, 156, 74, 0.46); }
.ai-knowledge-grid { display: grid; grid-template-columns: minmax(320px, 0.8fr) minmax(0, 1.2fr); gap: 18px; align-items: start; }
.ai-source-list { max-height: 540px; overflow-y: auto; }
.ai-source-card button, .ai-source-card > .mini { margin-top: 9px; }

@media (max-width: 1050px) {
  .ai-team-grid, .ai-knowledge-grid { grid-template-columns: 1fr; }
}

body[data-mode="mobile"] .ai-session-card .button-row { align-items: stretch; flex-direction: column; }
body[data-mode="mobile"] .ai-session-card .button-row button { width: 100%; min-height: 44px; }
body[data-mode="mobile"] .ai-roster, body[data-mode="mobile"] .ai-source-list { max-height: none; }

.ai-intelligence-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(340px, 0.9fr); gap: 14px; margin: 14px 0; }
.ai-inline-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; align-items: end; }
.ai-inline-form label { display: grid; gap: 6px; }
.ai-result { margin: 12px 0; padding: 13px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: var(--panel2); }
.ai-result.answered { border-color: rgba(72, 211, 149, 0.42); }
.ai-result.refused, .ai-result.escalated { border-color: rgba(245, 156, 74, 0.48); }
.ai-result-head { display: flex; justify-content: space-between; gap: 10px; text-transform: capitalize; }
.ai-result p { margin: 8px 0; color: var(--ink); }
.ai-booking-list, .ai-marketing-list { display: grid; gap: 9px; margin-top: 12px; max-height: 520px; overflow-y: auto; }
.ai-output { margin: 9px 0; padding: 10px; overflow-x: auto; border-radius: 8px; color: var(--ink); background: rgba(3, 7, 11, 0.55); font-family: inherit; font-size: 12px; line-height: 1.55; white-space: pre-wrap; }
.ai-marketing-panel { margin-bottom: 14px; }

@media (max-width: 1050px) {
  .ai-intelligence-grid { grid-template-columns: 1fr; }
}

body[data-mode="mobile"] .ai-inline-form { grid-template-columns: 1fr; }
body[data-mode="mobile"] .ai-booking-list, body[data-mode="mobile"] .ai-marketing-list { max-height: none; }

.ai-release-panel { margin: 14px 0; border-color: rgba(57, 212, 232, 0.36); background: linear-gradient(135deg, rgba(57, 212, 232, 0.055), var(--panel) 38%); }
.ai-release-gates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 14px 0; }
.ai-gate { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel2); }
.ai-gate > span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-weight: 900; }
.ai-gate > div { display: grid; gap: 3px; min-width: 0; }
.ai-gate strong { text-transform: capitalize; }
.ai-gate small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.ai-gate.passed { border-color: rgba(72, 211, 149, 0.34); }
.ai-gate.passed > span { color: var(--green); background: rgba(72, 211, 149, 0.12); }
.ai-gate.blocked > span { color: var(--orange); background: rgba(245, 156, 74, 0.12); }
.ai-reviewer-field { display: grid; grid-template-columns: auto minmax(260px, 480px); gap: 10px; align-items: center; margin-top: 12px; color: var(--muted); font-size: 12px; }
.ai-governance-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 14px 0; }
.ai-secondary-form { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }

@media (max-width: 1050px) {
  .ai-governance-grid { grid-template-columns: 1fr; }
}

body[data-mode="mobile"] .ai-release-gates { grid-template-columns: 1fr; }
body[data-mode="mobile"] .ai-gate small { white-space: normal; }

@keyframes loading-pulse {
  from { opacity: 0.58; }
  to { opacity: 1; }
}