/* Tremor-inspired UI, adapted to the existing vanilla dashboard. */
@font-face { font-family: Inter; src: url('/InterVariable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
:root {
  font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif; font-optical-sizing: auto; -webkit-font-smoothing: antialiased;
  font-size: var(--font-body); color: var(--ink); background: var(--bg); color-scheme: light;
  --font-small: 12px; --font-body: 14px; --font-section: 16px; --font-heading: 22px; --font-title: 28px; --font-metric: 28px;
  --panel-gutter: 24px; --panel-space: 20px;
  --bg: #f8fafc; --card: #fff; --ink: #182235; --muted: #5c697d; --line: #dce3ed;
  --teal: #2563eb; --teal-soft: #eff6ff; --sidebar: #fff; --input: #fff;
  --shadow: 0 1px 3px #0f172a08, 0 3px 12px #0f172a03; --focus: #60a5fa; --accent: var(--teal);
  --border: var(--line); --surface: var(--bg); --text-muted: var(--muted); --hover-border: #a9c5f6; --lift-shadow: 0 8px 24px #1e3a8a12;
  --good: #117c60; --good-bg: #eaf8f1; --good-line: #c9eadb;
  --warn: #936012; --warn-bg: #fff6e6; --warn-line: #f0dfbd;
  --bad: #b23b51; --bad-bg: #fceef1; --bad-line: #f1d5dc;
}
* { box-sizing: border-box; }
body { margin: 0; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background .18s, border-color .18s, transform .18s; }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { cursor: not-allowed; opacity: .5; }
a { color: var(--teal); text-decoration: none; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
svg { width: 19px; height: 19px; display: block; }
span[data-icon] { display: inline-flex; flex-shrink: 0; }
[hidden] { display: none !important; }
.skip { position: fixed; top: -70px; left: 15px; z-index: 100; background: var(--card); padding: 15px; border-radius: 12px; }
.skip:focus { top: 10px; }

/* Workspace navigation */
.sidebar { position: fixed; inset: 0 auto 0 0; width: 252px; background: var(--sidebar); color: var(--muted); display: flex; flex-direction: column; padding: 24px 16px 16px; border-right: 1px solid var(--line); z-index: 40; }
.brand-row { display: flex; align-items: center; justify-content: space-between; }
.brand-row .brand { flex: 1; }
.brand { display: flex; gap: 12px; align-items: center; color: var(--ink); font-size: var(--font-section); line-height: 1.2; font-weight: 700; letter-spacing: -.35px; padding: 0 6px; min-width: 0; }
.brand > span:last-child { white-space: nowrap; }
.brand-mark { flex-shrink: 0; width: 38px; height: 38px; background: linear-gradient(145deg,#3b82f6,#1d4ed8); border: 1px solid #2563eb; border-radius: 10px; display: grid; place-items: center; color: #fff; box-shadow: 0 3px 8px #2563eb22; }
.brand-mark svg { width: 29px; height: 29px; }
.brand-small { display: block; color: var(--muted); font-size: var(--font-small); letter-spacing: 1.2px; margin-top: 7px; font-weight: 650; }
.workspace-switch { display: flex; gap: 9px; align-items: center; padding: 13px 10px; margin: 22px 0 14px; border: 1px solid var(--line); background: var(--bg); border-radius: 9px; font-size: var(--font-small); color: var(--ink); }
.workspace-switch small { display: block; font-size: var(--font-small); color: var(--muted); margin-top: 5px; }
.workspace-avatar { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 10px; background: var(--teal-soft); color: var(--teal); font-weight: 700; flex-shrink: 0; }
.environment { margin-left: auto; font-size: var(--font-small); font-weight: 750; letter-spacing: .5px; color: var(--teal); }
.nav-search { display: flex; align-items: center; gap: 8px; padding: 0 11px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; margin-bottom: 10px; flex-shrink: 0; box-shadow: var(--shadow); }
.nav-search > span { color: var(--muted); }
.nav-search input[type=search] { border: 0; background: transparent; padding: 11px 0; min-width: 0; font-size: var(--font-body); }
.nav-search:focus-within { border-color: var(--focus); }
.nav-search-empty { padding: 8px 12px; margin: 0; font-size: var(--font-small); }
nav { overflow: auto; overflow-x: hidden; min-height: 0; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.nav-label { font-size: var(--font-small); letter-spacing: 1.4px; font-weight: 700; color: var(--muted); margin: 20px 12px 10px; }
.nav-link { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 11px; border-radius: 7px; color: var(--muted); font-size: var(--font-body); font-weight: 500; margin: 3px 0; transition: background .18s, color .18s, transform .18s; }
.nav-link:hover { color: var(--ink); background: var(--bg); transform: translateX(2px); }
.nav-link.active { color: var(--teal); background: var(--teal-soft); font-weight: 600; }
.nav-link.active:before { content: ""; position: absolute; left: 0; background: var(--teal); width: 3px; height: 20px; border-radius: 0 3px 3px 0; }
.nav-link svg { width: 18px; height: 18px; }
.nav-count { margin-left: auto; background: var(--card); padding: 3px 7px; border-radius: 7px; font-size: var(--font-small); color: var(--teal); font-variant-numeric: tabular-nums; }
.sidebar-bottom { margin-top: auto; padding-top: 12px; flex-shrink: 0; }
.local-note { display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); background: var(--bg); border-radius: 13px; padding: 12px; font-size: var(--font-small); color: var(--ink); }
.local-note small { display: block; color: var(--muted); font-size: var(--font-small); margin-top: 5px; }
.status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #8794b2; flex-shrink: 0; }
.status-dot.green { background: #149e78; box-shadow: 0 0 0 3px #149e7814; }
.status-dot.amber { background: #df9b2d; }
.connection-button { border: 0; background: transparent; color: var(--ink); width: 100%; padding: 13px 10px 2px; text-align: left; justify-content: start; border-radius: 10px; font-size: var(--font-body); }
.connection-button:hover { background: var(--bg); }
.connection-button small { display: block; color: var(--muted); font-size: var(--font-small); margin-top: 4px; }
.connection-button > span:last-child { margin-left: auto; }
.app-shell { margin-left: 252px; min-height: 100vh; background: var(--bg); }
.topbar { display: flex; justify-content: space-between; align-items: center; min-height: 70px; padding: 0 32px; gap: 10px; background: var(--card); border-bottom: 1px solid var(--line); }
.breadcrumb { display: flex; align-items: center; gap: 12px; font-size: var(--font-small); color: var(--muted); min-width: 0; }
.breadcrumb strong { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.breadcrumb-slash { color: var(--muted); opacity: .6; }
.topbar-actions { display: flex; gap: 12px; align-items: center; flex-shrink: 0; }
.topbar-actions .pill { border: 0; background: transparent; }
.top-avatar { display: grid; place-items: center; width: 33px; height: 33px; border-radius: 50%; background: var(--teal-soft); color: var(--teal); font-size: var(--font-small); font-weight: 700; }
.icon-button { border: 0; background: transparent; color: var(--muted); padding: 8px; border-radius: 10px; min-width: 36px; min-height: 36px; font-size: var(--font-title); line-height: 1; }
.icon-button:hover { background: var(--bg); color: var(--ink); }
.menu-toggle, .mobile-close { display: none; }

/* Shared surfaces, controls and tables */
main { padding: 28px 32px 16px; max-width: 1780px; margin: auto; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.eyebrow { font-size: var(--font-small); letter-spacing: 1.6px; color: var(--muted); font-weight: 700; margin-bottom: 9px; }
h1 { margin: 0; font-size: var(--font-title); font-weight: 650; letter-spacing: -.8px; line-height: 1.3; }
h2 { margin: 0; font-size: var(--font-section); font-weight: 600; letter-spacing: -.25px; }
h3 { margin: 0; font-size: var(--font-body); font-weight: 650; }
p { color: var(--muted); line-height: 1.65; }
.page-heading p { font-size: var(--font-body); margin: 9px 0 0; }
.heading-actions { display: flex; align-items: center; gap: 10px; }
.button { min-height: 39px; border-radius: 7px; padding: 10px 14px; font-size: var(--font-body); font-weight: 550; border: 1px solid transparent; white-space: nowrap; }
.button.primary { background: linear-gradient(180deg,#3479f6,#2563eb); color: #fff; border-color: #2563eb; box-shadow: 0 1px 2px #1e3a8a18; }
.button.primary:hover { background: linear-gradient(180deg,#2563eb,#1d4ed8); box-shadow: 0 4px 10px #2563eb26; }
.button.secondary { color: var(--ink); background: var(--card); border-color: var(--line); }
.button.secondary:hover { background: var(--teal-soft); border-color: var(--hover-border); box-shadow: 0 2px 5px #2563eb0c; }
.button.danger { color: var(--bad); background: var(--bad-bg); border-color: var(--bad-line); }
.button.small { font-size: var(--font-body); min-height: 32px; padding: 7px 10px; border-radius: 6px; }
.text-button, .link-button { border: 0; background: transparent; color: var(--teal); font-weight: 650; font-size: var(--font-body); padding: 8px 0; text-align: left; }
.link-button { padding: 0; }
.link-button:hover { text-decoration: underline; }
.pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: var(--font-small); white-space: nowrap; font-weight: 500; }
.pill.good { color: var(--good); background: var(--good-bg); border-color: var(--good-line); }
.pill.warn { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-line); }
.pill.bad { color: var(--bad); background: var(--bad-bg); border-color: var(--bad-line); }
.pill.neutral { color: var(--muted); background: var(--bg); }
.pill.teal { color: var(--teal); background: var(--teal-soft); border-color: var(--line); }
.banner { border: 1px solid var(--warn-line); background: var(--warn-bg); border-radius: 14px; padding: 14px 18px; margin-bottom: 20px; color: var(--warn); font-size: var(--font-body); line-height: 1.6; }
.banner.error, .form-error { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad); }
.banner.info { background: var(--teal-soft); color: var(--teal); border-color: var(--line); }
.stats-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; margin-bottom: 24px; }
.stat-card { border: 1px solid var(--line); background: var(--card); border-radius: 10px; padding: 22px; box-shadow: var(--shadow); min-width: 0; transition: transform .2s, box-shadow .2s, border-color .2s; }
.stat-label { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--muted); font-size: var(--font-body); font-weight: 550; }
.stat-icon { background: var(--teal-soft); border: 1px solid var(--line); border-radius: 7px; padding: 8px; color: var(--teal); flex-shrink: 0; }
.stat-value { font-size: var(--font-metric); letter-spacing: -1px; font-weight: 600; margin: 14px 0 10px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.stat-foot { display: flex; gap: 7px; align-items: center; color: var(--muted); font-size: var(--font-small); line-height: 1.6; }
.stat-foot strong { color: var(--teal); font-weight: 650; }
.grid-two { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(290px,1fr); gap: 22px; margin-bottom: 22px; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); min-width: 0; margin-bottom: 22px; overflow: hidden; transition: box-shadow .2s, border-color .2s; }
.grid-two .panel { margin-bottom: 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: var(--panel-space) var(--panel-gutter); border-bottom: 1px solid var(--line); background: linear-gradient(180deg,var(--card),var(--bg)); }
.panel-head p { font-size: var(--font-body); margin: 6px 0 0; }
.panel-body { padding: var(--panel-space) var(--panel-gutter); }
.panel-header-label { display: flex; align-items: center; gap: 8px; }
.kicker { font-size: var(--font-small); color: var(--muted); }
.panel-bottom { display: flex; justify-content: space-between; align-items: center; padding: 14px var(--panel-gutter); border-top: 1px solid var(--line); font-size: var(--font-small); color: var(--muted); gap: 10px; }
.pipeline { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 14px 0 20px; }
.pipeline-step { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 16px; position: relative; transition: transform .2s, box-shadow .2s, border-color .2s; }
.pipeline-step:not(:last-child):after { content: "→"; position: absolute; right: -11px; top: 45%; z-index: 2; background: var(--card); border-radius: 50%; color: var(--teal); font-size: var(--font-body); }
.step-icon { width: 34px; height: 34px; border-radius: 7px; background: var(--card); border: 1px solid var(--line); display: grid; place-items: center; color: var(--teal); margin-bottom: 12px; }
.pipeline-step .number { font-weight: 750; font-size: var(--font-metric); margin: 8px 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.pipeline-step small { color: var(--muted); font-size: var(--font-small); }
.progress-track { display: flex; gap: 3px; height: 9px; border-radius: 8px; overflow: hidden; margin: 20px 0 16px; background: var(--bg); }
.progress-track span { min-width: 3px; }
.legend { display: flex; flex-wrap: wrap; gap: 15px; font-size: var(--font-small); color: var(--muted); }
.legend-item { display: flex; align-items: center; gap: 6px; }
.legend-dot { width: 7px; height: 7px; border-radius: 50%; }
.legend strong { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 650; }
.summary-list { display: flex; flex-direction: column; }
.summary-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); padding: 14px 0; font-size: var(--font-body); }
.summary-row:last-child { border-bottom: 0; }
.summary-row strong { font-weight: 650; text-align: right; }
.subtle-note { font-size: var(--font-small); line-height: 1.7; color: var(--muted); background: var(--bg); padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px; margin-top: 16px; }
table { width: 100%; border-collapse: collapse; text-align: left; white-space: nowrap; }
th { font-size: var(--font-body); letter-spacing: 0; font-weight: 600; color: var(--ink); background: var(--bg); padding: 14px var(--panel-gutter); border-bottom: 1px solid var(--line); }
td { padding: 16px var(--panel-gutter); border-bottom: 1px solid var(--line); font-size: var(--font-body); color: var(--ink); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--bg); }
.table-wrap { overflow-x: auto; scrollbar-width: thin; }
.page-cell { display: flex; gap: 11px; align-items: center; }
.page-avatar { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 11px; background: var(--teal-soft); color: var(--teal); font-size: var(--font-small); font-weight: 750; flex-shrink: 0; }
.page-cell strong { display: block; font-size: var(--font-body); font-weight: 650; max-width: 250px; overflow: hidden; text-overflow: ellipsis; }
.page-cell small, .stack small { display: block; color: var(--muted); font-size: var(--font-small); margin-top: 5px; }
.mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: var(--font-small); color: var(--muted); }
.stack { max-width: 330px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toolbar { display: flex; align-items: center; gap: 10px; padding: 16px var(--panel-gutter); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.search-field { position: relative; flex: 1; min-width: 200px; max-width: 340px; }
.search-field > span { position: absolute; left: 12px; top: 12px; color: var(--muted); }
.search-field input { padding-left: 38px !important; }
.toolbar select { width: auto; min-width: 125px; }
.toolbar .spacer { flex: 1; }
.field { display: block; font-size: var(--font-body); font-weight: 650; color: var(--ink); margin-bottom: 16px; }
.field input, .field select, .field textarea { margin-top: 8px; }
input:not([type=checkbox]), select, textarea { width: 100%; border: 1px solid var(--line); border-radius: 7px; background: var(--input); color: var(--ink); padding: 11px 12px; font-size: var(--font-body); min-height: 40px; box-shadow: 0 1px 2px #0f172a04; transition: border-color .18s, box-shadow .18s; }
input::placeholder, textarea::placeholder { color: var(--muted); }
input[type=checkbox] { accent-color: var(--teal); width: 16px; height: 16px; }
textarea { min-height: 90px; resize: vertical; }
.help { font-size: var(--font-body); color: var(--muted); font-weight: 400; line-height: 1.65; display: block; margin-top: 7px; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 18px; }
.form-grid .full { grid-column: 1/-1; }
.check-field { display: flex; align-items: flex-start; gap: 9px; font-size: var(--font-body); line-height: 1.6; color: var(--muted); margin: 14px 0; }
.check-field input { margin-top: 2px; flex-shrink: 0; }
.pagination { display: flex; align-items: center; justify-content: space-between; padding: 16px var(--panel-gutter); border-top: 1px solid var(--line); gap: 12px; color: var(--muted); font-size: var(--font-small); }
.pagination-actions { display: flex; gap: 8px; align-items: center; }
.empty { padding: 46px 24px; text-align: center; color: var(--muted); line-height: 1.7; font-size: var(--font-body); }
.empty-icon { display: grid; place-items: center; margin: 0 auto 16px; width: 52px; height: 52px; background: var(--teal-soft); border-radius: 17px; color: var(--teal); }
.empty h3 { color: var(--ink); margin-bottom: 8px; }
.empty .button { margin-top: 10px; }
.row-actions, .flow-label { display: flex; gap: 8px; align-items: center; }
.step-number { display: grid; place-items: center; width: 25px; height: 25px; color: var(--teal); background: var(--teal-soft); border-radius: 50%; font-size: var(--font-small); }
.connection-state { display: flex; align-items: center; gap: 7px; font-size: var(--font-body); color: var(--muted); }
.section-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }
.section-tabs button { color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: 7px; padding: 10px 15px; font-size: var(--font-body); }
.section-tabs button:hover { background: var(--card); color: var(--ink); }
.section-tabs button.active { background: var(--card); border-color: var(--line); color: var(--teal); font-weight: 600; box-shadow: var(--shadow); }
.comment-editor { border: 1px solid var(--line); border-radius: 13px; padding: 16px; margin-bottom: 12px; background: var(--bg); }
.comment-editor .field { margin-bottom: 10px; }
.comment-editor-head { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: var(--font-small); margin-bottom: 8px; }
.comment-editors { margin: 15px 0; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 10px 0 22px; }
.detail-item { min-width: 0; }
.detail-item dt { font-size: var(--font-small); color: var(--muted); margin-bottom: 7px; }
.detail-item dd { margin: 0; font-size: var(--font-body); overflow-wrap: anywhere; line-height: 1.6; }
.wrap-text { white-space: pre-wrap; word-break: break-word; line-height: 1.7; font-size: var(--font-body); }
.archive-json { background: var(--bg); border: 1px solid var(--line); padding: 16px; border-radius: 12px; max-height: 430px; overflow: auto; }
.worker-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; margin-bottom: 22px; }
.worker-card { padding: 22px; border: 1px solid var(--line); background: var(--card); border-radius: 10px; min-width: 0; box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s, border-color .2s; }
.worker-card .step-icon { margin-bottom: 15px; }
.worker-card p { font-size: var(--font-small); margin: 8px 0 15px; }
.worker-card small { color: var(--muted); font-size: var(--font-small); }
.metric-bars { display: flex; flex-direction: column; gap: 18px; margin: 15px 0; }
.metric-row { display: grid; grid-template-columns: 115px 1fr 45px; align-items: center; gap: 12px; font-size: var(--font-body); }
.metric-row .bar { height: 12px; background: var(--bg); border-radius: 6px; overflow: hidden; }
.metric-row .bar span { display: block; height: 100%; background: var(--teal); border-radius: 6px; }
.footer { display: flex; justify-content: space-between; gap: 12px; font-size: var(--font-small); color: var(--muted); padding: 8px 0 16px; margin-top: 8px; }
.footer-dot { margin: 0 8px; opacity: .6; }
dialog { border: 1px solid var(--line); border-radius: 12px; max-width: 810px; width: calc(100% - 32px); background: var(--card); color: var(--ink); padding: 28px; max-height: 88vh; box-shadow: 0 25px 80px #0f172a40; }
dialog::backdrop { background: #151d4266; backdrop-filter: blur(4px); }
.modal-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 22px; }
.modal-head h2 { font-size: var(--font-heading); }
.modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 22px; }
.form-error { padding: 13px; border-radius: 11px; font-size: var(--font-body); margin-top: 16px; }
.toast { position: fixed; bottom: 22px; right: 24px; border: 1px solid var(--line); background: var(--card); box-shadow: 0 8px 30px #25335a20; border-radius: 14px; padding: 16px 22px; font-size: var(--font-body); z-index: 100; max-width: calc(100% - 40px); }
.toast.bad { border-color: var(--bad-line); color: var(--bad); }
.loading { animation: pulse 1.2s ease-in-out infinite; }
.loading-placeholder { height: 140px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; display: grid; place-items: center; color: var(--muted); font-size: var(--font-body); }
.body-note { font-size: var(--font-body); color: var(--muted); line-height: 1.7; margin: 0 0 18px; }
@keyframes pulse { 50% { opacity: .5; } }

/* Overview briefing: all counts come from the existing Core summary. */
.workspace-briefing { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; gap: 28px; background: linear-gradient(110deg,var(--card) 40%,var(--teal-soft)); color: var(--ink); border: 1px solid var(--line); border-left: 3px solid var(--teal); border-radius: 10px; padding: 24px; margin-bottom: 24px; box-shadow: var(--shadow); }
.workspace-briefing:after { content: ""; position: absolute; width: 240px; height: 240px; right: 90px; top: -155px; border: 35px solid #3b82f608; border-radius: 50%; pointer-events: none; }
.briefing-copy, .briefing-snapshot { position: relative; z-index: 1; }
.briefing-copy { max-width: 590px; }
.briefing-label { font-size: var(--font-small); letter-spacing: 1.2px; font-weight: 600; color: var(--teal); }
.briefing-copy h2 { font-size: var(--font-heading); margin: 10px 0 8px; line-height: 1.4; color: var(--ink); }
.briefing-copy p { font-size: var(--font-body); margin: 0; color: var(--muted); }
.briefing-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.button.briefing-button { background: var(--teal); color: #fff; border-color: var(--teal); font-size: var(--font-body); min-height: 36px; }
.button.briefing-button:hover { filter: brightness(.95); box-shadow: 0 4px 10px #2563eb20; }
.button.briefing-button.ghost { background: var(--card); color: var(--ink); border-color: var(--line); }
.button.briefing-button.ghost:hover { background: var(--teal-soft); border-color: var(--hover-border); }
.briefing-snapshot { flex-shrink: 0; border: 1px solid var(--line); background: var(--card); border-radius: 8px; padding: 18px 20px; min-width: 238px; box-shadow: var(--shadow); }
.briefing-snapshot .pill.neutral { color: var(--teal); background: var(--teal-soft); border-color: var(--line); }
.briefing-numbers { display: flex; flex-wrap: wrap; gap: 18px 28px; margin-top: 18px; }
.briefing-snapshot { max-width: 460px; }
.briefing-count-note { display: block; margin-top: 16px; color: var(--muted); }
.processing-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }
.processing-controls > span { color: var(--muted); font-size: var(--font-small); }
.briefing-numbers > div { display: flex; flex-direction: column; gap: 6px; }
.briefing-numbers strong { font-size: var(--font-metric); letter-spacing: -.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.briefing-numbers span { font-size: var(--font-small); color: var(--muted); }

/* Dark tokens also apply to sidebar, forms and status indicators. */
[data-theme=dark] { --bg: #090e1a; --card: #111827; --sidebar: #0d1422; --ink: #f1f5f9; --muted: #a4b0c2; --line: #2b3546; --input: #111827; --teal: #93c5fd; --teal-soft: #172b49; --shadow: 0 1px 3px #0003; --focus: #60a5fa; --hover-border: #486a9a; --lift-shadow: 0 8px 24px #0005; --good: #8ce1bd; --good-bg: #163e35; --good-line: #295448; --warn: #f0d18f; --warn-bg: #3b3222; --warn-line: #584932; --bad: #f4a4b4; --bad-bg: #422735; --bad-line: #643747; color-scheme: dark; }
[data-theme=dark] .button.primary { background: linear-gradient(180deg,#3479f6,#2563eb); color: #fff; border-color: #3b82f6; }
[data-theme=dark] .button.primary:hover { background: linear-gradient(180deg,#2563eb,#1d4ed8); }

/* Responsive layout retains a drawer and horizontal scrolling for data tables. */
@media(min-width:1500px) { main { padding: 30px 44px; } .topbar { padding: 0 44px; } .stat-card { padding: 24px; } }
@media(max-width:1200px) { .sidebar { width: 240px; padding: 24px 14px 14px; } .app-shell { margin-left: 240px; } main { padding: 24px; } .topbar { padding: 0 24px; } .grid-two { grid-template-columns: minmax(0,1.4fr) minmax(260px,1fr); } .stats-grid { gap: 12px; } .stat-card { padding: 18px; } .stat-icon { padding: 8px; } .worker-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .workspace-briefing { padding: 24px; gap: 20px; } .briefing-snapshot { min-width: 210px; padding: 16px; } }
@media(max-width:1000px) { .grid-two { grid-template-columns: 1fr; } .stats-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .page-heading { flex-wrap: wrap; gap: 16px; } .page-heading h1 { font-size: var(--font-title); } .workspace-briefing { flex-wrap: wrap; } .briefing-snapshot { width: 100%; max-width: none; } }
@media(max-width:760px) {
  :root { --panel-gutter: 16px; --panel-space: 16px; }
  .sidebar { width: min(280px,calc(100vw - 40px)); transform: translateX(-100%); visibility: hidden; transition: transform .2s,visibility .2s; }
  .sidebar.open { transform: translateX(0); visibility: visible; }
  .app-shell { margin-left: 0; }
  .menu-toggle, .mobile-close { display: inline-flex; }
  .mobile-close { margin-left: auto; }
  .brand { font-size: var(--font-section); }
  .topbar { min-height: 68px; padding: 0 16px; }
  .topbar-actions { gap: 6px; padding: 5px 7px; }
  .breadcrumb { gap: 8px; font-size: var(--font-small); }
  .breadcrumb > span:first-of-type, .breadcrumb-slash { display: none; }
  main { padding: 22px 16px 8px; }
  .page-heading { gap: 14px; margin-bottom: 20px; }
  .page-heading p { font-size: var(--font-body); max-width: 400px; }
  .heading-actions { width: 100%; justify-content: flex-end; }
  .stats-grid { gap: 10px; margin-bottom: 18px; }
  .stat-card { padding: 16px; border-radius: 10px; }
  .stat-label { font-size: var(--font-body); }
  .stat-icon { padding: 7px; }
  .stat-icon svg { width: 16px; height: 16px; }
  .stat-foot { font-size: var(--font-small); }
  .panel { border-radius: 10px; margin-bottom: 18px; }
  .panel-head { padding: var(--panel-space) var(--panel-gutter); flex-wrap: wrap; gap: 10px; }
  .panel-body { padding: var(--panel-space) var(--panel-gutter); }
  .panel-bottom { padding: 14px var(--panel-gutter); flex-wrap: wrap; }
  .grid-two { gap: 18px; margin-bottom: 18px; }
  .toolbar { padding: 16px var(--panel-gutter); }
  .toolbar .search-field { max-width: none; flex-basis: 100%; }
  .toolbar select { flex: 1; max-width: 100%; }
  .pagination { padding: 16px var(--panel-gutter); flex-wrap: wrap; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .full { grid-column: auto; }
  .pipeline { gap: 8px; }
  .pipeline-step { padding: 13px 10px; }
  .pipeline-step h3 { font-size: var(--font-body); }
  .pipeline-step small { font-size: var(--font-small); }
  .pipeline-step .number { font-size: var(--font-metric); }
  .footer { font-size: var(--font-small); flex-wrap: wrap; }
  #overlay { position: fixed; inset: 0; background: #10152b88; z-index: 39; }
  .toast { bottom: 15px; right: 15px; }
  .metric-row { grid-template-columns: 90px 1fr 35px; font-size: var(--font-body); gap: 8px; }
  .workspace-briefing { border-radius: 10px; padding: 22px; margin-bottom: 18px; }
  .briefing-copy h2 { font-size: var(--font-heading); }
  .briefing-snapshot { padding: 15px; flex-wrap: wrap; }
  .briefing-numbers { gap: 26px; }
  dialog { padding: 22px; border-radius: 12px; }
}
@media(max-width:400px) { .stat-icon { display: none; } .topbar .pill { padding: 5px; font-size: var(--font-small); } .topbar .top-avatar { display: none; } .heading-actions .button { flex: 1; } .stat-foot { display: block; } .stat-foot strong { display: block; margin-bottom: 4px; } .worker-grid, .detail-grid { grid-template-columns: 1fr; } .briefing-actions .button { flex: 1; } }
@media(prefers-reduced-motion:reduce) { *, *:before, *:after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* Existing feature-specific layouts. */
.operation-result{white-space:pre-wrap;overflow-wrap:anywhere;padding:16px;background:var(--bg);border-radius:12px;font-size: var(--font-body);max-height:360px;overflow:auto}.row-actions{display:flex;flex-wrap:wrap;gap:8px}.stat-value{overflow-wrap:anywhere;font-size: var(--font-metric)}

.auth-intro{display:flex;gap:16px;align-items:center;margin-bottom:24px}.auth-intro .step-icon{flex:none}.auth-intro p{margin:0}.auth-intro~.field{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin-top:18px}.auth-intro~.field input{width:100%}.auth-intro~.modal-actions .primary{width:100%;justify-content:center}

dialog:has(.auth-form){width:min(480px,calc(100vw - 32px))}.auth-form .auth-intro{align-items:flex-start}.auth-form .auth-intro p{font-size: var(--font-body);line-height:1.7}.auth-form .modal-actions{margin-top:26px}.auth-form>.help{font-size: var(--font-body);line-height:1.6;text-align:center;margin-top:16px}

.button.text-link{padding:0;border:0;background:transparent;color:var(--teal);font-weight:600;text-align:left;white-space:normal}.time-slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:16px 0}.time-slot{display:flex;align-items:end;gap:8px}.time-slot .field{flex:1;margin:0}.time-slot .button{margin-bottom:2px}

.pages-grid table { min-width: 1380px; }
.pages-grid td:first-child,.pages-grid th:first-child { width: 52px; text-align: center; }
.metric-cell { display: flex; flex-direction: column; gap: 5px; min-width: 145px; font-variant-numeric: tabular-nums; }
.metric-cell strong { font-size: var(--font-section); }
.metric-cell small { font-size: var(--font-small); line-height: 1.5; color: var(--text-muted,#71828c); }
.metric-cell .metric-up { color: #168568; }
.metric-cell .metric-down { color: #c45454; }
.pages-grid .row-actions { min-width: 180px; flex-wrap: wrap; }
.toolbar .check-field { margin: 0; white-space: nowrap; }

.page-stats-summary{margin:0 0 16px}.page-stats-summary .stat-card{border:1px solid var(--border);box-shadow:none}.toolbar{flex-wrap:wrap}.check-field{display:flex;align-items:center;gap:8px;margin:12px 0;font-size: var(--font-body)}.check-field input[type=checkbox]{width:16px;height:16px;accent-color:var(--teal)}

.page-bulk-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;width:100%;padding:12px;border-radius:12px;background:var(--surface,#f5f9f8);border:1px solid var(--border,#dde5e3)}.page-bulk-toolbar select{min-width:190px;max-width:100%;padding:10px;border:1px solid var(--border,#dde5e3);border-radius:8px;background:var(--card,#fff);color:inherit}.qr-preview img{max-width:180px;max-height:180px;border-radius:12px;border:1px solid #dde5e3}.qr-preview{grid-column:1/-1}.pages-grid td{vertical-align:middle}

/* Page sorting: keyboard buttons and explicit direction on the active column. */
.pages-grid th .column-sort{padding:4px 0;min-height:32px;border:0;background:transparent;color:inherit;box-shadow:none;font:inherit;font-weight:inherit;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.pages-grid th .column-sort:hover{color:var(--accent,#0d9488)}
.pages-grid th .column-sort:focus-visible{outline:2px solid var(--accent,#0d9488);outline-offset:3px}
.pages-grid th[aria-sort="ascending"],.pages-grid th[aria-sort="descending"]{color:var(--accent,#0d9488)}
.pages-grid .sort-arrow{font-size: var(--font-body);opacity:.7}

.manager-form{display:grid;gap:16px}.manager-form textarea{min-height:100px}.hunter-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:var(--panel-space) var(--panel-gutter)}.hunter-form .field:first-child{grid-column:1/-1}.crm-thread{display:flex;flex-direction:column;gap:14px;max-height:48vh;overflow:auto;padding:16px;background:var(--bg);border-radius:12px}.crm-bubble{align-self:flex-start;max-width:85%;padding:12px 16px;border:1px solid var(--line);border-radius:14px;background:var(--card)}.crm-bubble.out{align-self:flex-end;border-color:var(--teal);background:var(--teal-soft)}.crm-bubble p{white-space:pre-wrap;overflow-wrap:anywhere;margin:6px 0}.crm-bubble small{color:var(--muted)}.crm-detail{display:grid;gap:14px}.manager-form input[type=checkbox]{width:20px;height:20px}.toolbar input[type=checkbox]{width:20px;height:20px}.hunter-form .field{min-width:0}@media(max-width:800px){.hunter-form{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:480px){.hunter-form{grid-template-columns:1fr;padding:var(--panel-space) var(--panel-gutter)}.crm-bubble{max-width:95%}}

/* Pancake-style CRM workspace: list, conversation, and customer context. */
.crm-workspace{border:1px solid var(--line);border-radius:14px;background:var(--card);overflow:hidden}
.crm-filters{display:grid;grid-template-columns:repeat(5,minmax(100px,1fr)) minmax(180px,1.5fr);gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.crm-filters .field{min-width:0}.crm-filters input,.crm-filters select{width:100%}
.crm-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 20px;border-bottom:1px solid var(--line)}
.crm-count{margin-right:auto;color:var(--muted);font-size:13px}
.crm-layout{display:grid;grid-template-columns:340px minmax(0,1fr);height:clamp(580px,74vh,1000px);min-height:0}
.crm-sidebar{display:flex;flex-direction:column;min-width:0;min-height:0;border-right:1px solid var(--line);background:#fff}
.crm-list{flex:1;overflow:auto;min-height:0;overscroll-behavior:contain}.crm-list-pager{border-top:1px solid var(--line)}
.crm-list-pager .pagination{padding:10px;gap:6px;flex-wrap:wrap}.crm-list-pager .button{padding:6px 8px}
.crm-conversation{display:flex;gap:12px;padding:17px 15px;border-bottom:1px solid #edf1f7;cursor:pointer;outline-offset:-3px;min-height:100px;transition:background .15s}
.crm-conversation:hover{background:#f7f9fe}.crm-conversation.active{background:#edf3ff;box-shadow:inset 3px 0 #3677fa}
.crm-conversation.unread .crm-name{font-weight:800;color:#152238}.crm-conversation.unread .crm-preview{font-weight:650;color:#334155}
.crm-avatar{width:44px;height:44px;min-width:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;position:relative;color:#fff;font-size:16px;font-weight:600}
.crm-unread-badge{position:absolute;top:-5px;right:-4px;background:#ef4444;border:2px solid #fff;border-radius:20px;min-width:21px;height:21px;padding:0 4px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800}
.crm-conversation-info{min-width:0;flex:1}.crm-conversation-heading{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.crm-name{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}
.crm-time{font-size:11px;color:#8190a8;white-space:nowrap;font-weight:400}.crm-preview{margin:5px 0 7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:#718096;font-weight:400}
.crm-conversation-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:11px;color:#60738f}
.crm-page-name{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crm-kind{font-size:9px;font-weight:750;letter-spacing:.025em;border-radius:4px;padding:2px 5px}.crm-kind.comment{background:#dcfce7;color:#15803d}.crm-kind.inbox{background:#e0f2fe;color:#0369a1}
.crm-tag,.crm-tag-button{border-radius:18px;font-size:11px;padding:4px 9px;font-weight:600}
.tone-0{background:#e9f4ff;color:#3974c6}.tone-1{background:#e8faef;color:#238552}.tone-2{background:#fff8cf;color:#9b7418}.tone-3{background:#fff0f1;color:#d64b62}.tone-4{background:#f1edff;color:#7852cc}.tone-5{background:#fff0e2;color:#c16a27}.tone-6{background:#edf1f7;color:#526581}
.crm-chat{display:flex;flex-direction:column;min-width:0;min-height:0;background:#e8edf3}.crm-chat>.empty{margin:auto}
.crm-chat-header{display:flex;align-items:center;gap:12px;padding:15px 20px;border-bottom:1px solid var(--line);background:#fff;flex-shrink:0}
.crm-chat-heading{min-width:0;flex:1}.crm-chat-heading h2{margin:0 0 5px;font-size:16px;overflow-wrap:anywhere}
.crm-chat-history{flex:1;min-height:0;overflow:auto;padding:24px;display:flex;flex-direction:column;gap:22px;overscroll-behavior:contain}
.crm-message-row{display:flex;gap:10px;align-items:flex-start;max-width:85%;align-self:flex-start}.crm-message-row.out{align-self:flex-end;flex-direction:row-reverse}
.crm-message-row .crm-avatar{width:32px;height:32px;min-width:32px;font-size:12px}.crm-message-content{min-width:0}
.crm-message-bubble{background:#fff;border-radius:0 18px 18px 18px;padding:12px 15px;color:#243952;font-size:14px;box-shadow:0 1px 1px #10203005}
.crm-message-row.out .crm-message-bubble{background:#1687fa;color:#fff;border-radius:18px 0 18px 18px}
.crm-message-row.out .crm-message-bubble p{color:inherit}
.crm-message-bubble p{white-space:pre-wrap;overflow-wrap:anywhere;margin:0;line-height:1.6}.crm-message-bubble img{display:block;max-width:100%;max-height:260px;border-radius:10px;margin-top:8px}
.crm-message-meta{display:flex;align-items:center;gap:8px;margin-top:5px;font-size:11px;color:#718096}.crm-message-row.out .crm-message-meta{justify-content:flex-end}
.crm-message-meta small{font-size:11px}.crm-message-meta .crm-reply-link{background:none;border:0;padding:0;font-size:11px;color:#2875d4;min-height:0}
.crm-quoted{display:block;padding:5px 8px;margin-bottom:7px;border-left:2px solid currentColor;opacity:.85;overflow-wrap:anywhere}
.crm-message-row.pending .crm-message-bubble{background:#dceaff;color:#2c5588;border:1px dashed #93b7e7}
.crm-reply-status,.crm-reply-error{display:block;font-size:11px;margin-top:4px}.crm-reply-status.failed,.crm-reply-error{color:#b42339}.crm-reply-status.unknown{color:#a56615}.crm-load-older{align-self:center}.crm-loading{padding:30px}
.crm-tags{display:flex;gap:7px;flex-wrap:wrap;padding:11px 18px;background:#fff;border-top:1px solid var(--line)}
.crm-tag-button.button{border:1px solid transparent;box-shadow:none;padding:5px 10px;font-size:11px;min-height:0}.crm-tag-button.selected{border-color:currentColor;box-shadow:0 0 0 1px currentColor}
.crm-composer{background:#fff;border-top:1px solid var(--line);padding:13px 18px;flex-shrink:0}.crm-compose-row{display:flex;gap:12px;align-items:center}
.crm-reply-input{flex:1;min-width:0;resize:vertical;max-height:140px;min-height:60px;background:#f1f5f9;border:1px solid #e3e9f2;border-radius:14px;padding:12px 14px;font:inherit;font-size:13px}
.crm-reply-target{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px;min-width:0}.crm-reply-target-text{font-size:12px;color:#3871b5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crm-send-feedback{font-size:12px;color:#576c88;margin:6px 0}.crm-send-feedback:empty{display:none}.crm-composer>.help{font-size:11px}
.crm-profile{border-left:1px solid var(--line);padding:18px;background:#fff;overflow:auto;min-width:0}.crm-profile[hidden]{display:none}
.crm-layout.with-profile{grid-template-columns:300px minmax(0,1fr) 290px}.crm-profile-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:16px}.crm-profile-heading h3{font-size:14px;margin:0}
.crm-customer-form{display:grid;gap:12px;margin-bottom:24px}.crm-customer-form textarea{min-height:68px}.crm-customer-form .field{min-width:0}.crm-order-card{display:grid;gap:5px;padding:12px;border:1px solid var(--line);border-radius:10px;margin-top:10px;overflow-wrap:anywhere}.crm-order-card small{color:var(--muted)}
@media(min-width:1200px){body:has(.crm-workspace) .page-heading{margin-bottom:18px}body:has(.crm-workspace) #view{gap:0}}
@media(max-width:1300px){.crm-filters{grid-template-columns:repeat(3,minmax(0,1fr))}.crm-layout{grid-template-columns:280px minmax(0,1fr)}.crm-layout.with-profile{grid-template-columns:260px minmax(0,1fr)}.crm-layout{position:relative}.crm-layout.with-profile .crm-profile{position:absolute;top:0;right:0;bottom:0;width:min(310px,calc(100% - 260px));z-index:2;box-shadow:-8px 0 24px #1e3a8a14}}
@media(min-width:801px){
 body:has(.crm-workspace) .app-shell{height:100dvh;min-height:0;display:flex;flex-direction:column;overflow:hidden}
 body:has(.crm-workspace) .topbar{flex-shrink:0;min-height:56px}
 body:has(.crm-workspace) #content{display:flex;flex-direction:column;flex:1;min-height:0;width:100%;max-width:none;padding:14px 20px 8px;margin:0}
 body:has(.crm-workspace) .page-heading{flex-shrink:0;margin-bottom:12px;gap:12px}
 body:has(.crm-workspace) .page-heading .eyebrow,body:has(.crm-workspace) #newPublication{display:none}
 body:has(.crm-workspace) .page-heading h1{font-size:22px}
 body:has(.crm-workspace) .page-heading p{font-size:12px;margin-top:4px}
 body:has(.crm-workspace) #view{flex:1;min-height:0;display:flex}
 body:has(.crm-workspace) .footer{flex-shrink:0;padding:6px 0 0;margin:0}
 .crm-workspace{display:flex;flex-direction:column;flex:1;min-height:0}
 .crm-filters,.crm-toolbar{flex-shrink:0;padding:10px 14px}
 .crm-filters{gap:8px 12px}.crm-filters input,.crm-filters select{padding:8px 10px;min-height:36px}
 .crm-layout,.crm-layout.with-profile{flex:1;min-height:0;height:auto}
 .crm-composer{padding:9px 14px}.crm-tags{padding:8px 14px}.crm-chat-header{padding:10px 14px}
}
@media(max-width:800px){.crm-layout,.crm-layout.with-profile{grid-template-columns:1fr;height:auto}.crm-sidebar{height:320px;border-right:0;border-bottom:1px solid var(--line)}.crm-chat{height:620px}.crm-layout.with-profile .crm-sidebar{height:320px}.crm-layout.with-profile .crm-chat{height:620px}.crm-filters{grid-template-columns:repeat(2,minmax(0,1fr));padding:12px}.crm-toolbar{padding:12px}.crm-count{width:100%}.crm-chat-header{padding:12px;flex-wrap:wrap}.crm-chat-history{padding:16px}.crm-message-row{max-width:95%}.crm-compose-row{gap:8px}.crm-composer{padding:12px}.crm-compose-row .button{padding:9px}.crm-profile{border-left:0;border-top:1px solid var(--line)}}
@media(max-width:800px){.crm-layout.with-profile .crm-profile{position:static;width:auto;max-height:400px;box-shadow:none}}

/* Interaction depth without moving data tables or altering click targets. */
@media(hover:hover) and (pointer:fine) {
  .stat-card:hover, .worker-card:hover, .pipeline-step:hover { transform: translateY(-3px); border-color: var(--hover-border); box-shadow: var(--lift-shadow); }
  .panel:hover { border-color: var(--hover-border); box-shadow: var(--lift-shadow); }
  .button:not(:disabled):hover { transform: translateY(-1px); }
  .button:not(:disabled):active { transform: translateY(0); }
}
.stat-card:focus-within, .worker-card:focus-within, .pipeline-step:focus-within { border-color: var(--focus); box-shadow: var(--lift-shadow); }
[data-theme=dark] .button.briefing-button:not(.ghost) { background: #2563eb; border-color: #3b82f6; }
.metric-cell .metric-up { color: var(--good); }
.metric-cell .metric-down { color: var(--bad); }
.page-stats-summary .stat-card { box-shadow: var(--shadow); }
@media(prefers-reduced-motion:reduce) { .stat-card:hover, .worker-card:hover, .pipeline-step:hover, .nav-link:hover, .button:not(:disabled):hover, button:active:not(:disabled) { transform: none !important; } }

/* Contain long Page names in shared filters on narrow screens. */
.toolbar .field { min-width: 0; max-width: 100%; }
.toolbar .field select { width: 100%; min-width: 0; }
#view > .toolbar { background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); margin-bottom: 20px; }
@media(max-width:760px) { .toolbar .field { width: 100%; flex-basis: 100%; } }

/* Shared content rhythm: keep descriptions and controls inside panel gutters. */
p { overflow-wrap: anywhere; }
.panel-head > div, .panel-body, .heading-actions { min-width: 0; }
.panel-body > :first-child { margin-top: 0; }
.panel-body > :last-child { margin-bottom: 0; }
.panel > :is(.body-note, .help, .metric-bars), .panel-content > :is(.body-note, .help) { margin: 0; padding: var(--panel-space) var(--panel-gutter); }
.panel > p + p { padding-top: 0; }
.panel .metric-bars { gap: 16px; }
.panel-content .body-note { border-bottom: 1px solid var(--line); }
.page-stats-overview { border-bottom: 1px solid var(--line); }
.page-stats-overview .help { margin: 12px 0 0; }
.toolbar { align-items: center; }
.toolbar .field { flex: 1 1 200px; margin: 0; }
.toolbar .field input, .toolbar .field select { margin-top: 8px; }
.toolbar .check-field { white-space: normal; }
.panel-head .row-actions, .panel-head .actions { display: flex; flex-wrap: wrap; gap: 10px; }
.panel-bottom, .summary-row, .heading-actions { flex-wrap: wrap; }
#view > .button, #view > .row-actions { margin-bottom: 20px; }
.button { font-size: var(--font-body); line-height: 1.4; white-space: normal; max-width: 100%; }
.stat-foot, .pipeline-step small, .briefing-numbers span, .page-cell small, .stack small, .crm-bubble small, .footer, small { font-size: var(--font-small); line-height: 1.6; }
.stat-value { display: block; line-height: 1.2; }
@media(max-width:480px) { .stats-grid { grid-template-columns: 1fr; } }

.toolbar .search-field { flex: 1 1 220px; min-width: min(100%,200px); }

.panel > .button { margin: 0 var(--panel-gutter) var(--panel-space); max-width: calc(100% - var(--panel-gutter) - var(--panel-gutter)); }

.render-music-picker{display:grid;gap:12px;max-width:860px}.render-music-picker select[multiple]{min-height:180px;width:100%}.render-upload-progress{width:100%;height:14px;accent-color:var(--accent)}.render-music-picker [hidden]{display:none!important}

.published-totals,.published-days{display:grid;gap:14px;grid-template-columns:repeat(3,minmax(0,1fr))}
.published-days{grid-template-columns:repeat(7,minmax(0,1fr));margin-top:18px}
.published-statistics .stat-card{min-width:0;padding:18px}.published-days .stat-label{font-size:12px;gap:4px}.published-days .stat-icon{display:none}.published-days .stat-value{font-size:24px;overflow-wrap:anywhere}
.published-stat-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;color:var(--muted);font-size:12px}
.stats-grid.overview-secondary{grid-template-columns:repeat(3,minmax(0,1fr))}
.hunter-workspace{display:grid;gap:20px;min-width:0}.hunter-tabs{display:flex;flex-wrap:wrap;gap:10px}.hunter-tabs [aria-pressed=true]{background:var(--teal-soft);border-color:var(--teal);color:var(--teal)}
.hunter-filter-form{padding:20px 24px}.hunter-primary-fields{display:grid;gap:16px;grid-template-columns:2fr 1fr 1fr 1fr;align-items:start}.hunter-secondary-fields{display:grid;gap:16px;grid-template-columns:repeat(4,minmax(0,1fr));padding-top:16px}.hunter-filter-form .field{min-width:0;margin:0}.hunter-advanced{margin-top:18px;border-top:1px solid var(--line);padding-top:16px}.hunter-advanced summary{cursor:pointer;color:var(--teal);font-weight:600}.hunter-filter-actions{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap}
.hunter-run-select,.hunter-result-actions,.hunter-progress{padding:16px 24px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}.hunter-run-select .field{width:100%;max-width:620px;margin:0;min-width:0}.hunter-result-actions{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.hunter-result-actions .field{flex:1 1 240px;margin:0;min-width:0}.hunter-error{color:var(--bad);flex-basis:100%}
.hunter-results table{min-width:1150px}.hunter-results td{padding:18px 14px;vertical-align:top}.hunter-identity{display:flex;gap:12px;min-width:230px;max-width:290px}.hunter-identity>div,.hunter-counts,.hunter-channel-actions{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.hunter-avatar{width:54px;height:54px;border-radius:50%;object-fit:cover;flex-shrink:0}.hunter-image-fallback{display:grid;place-items:center;background:var(--teal-soft);color:var(--teal);font-weight:700}.hunter-bio{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;color:var(--muted)}.hunter-sample{display:grid;gap:8px;max-width:190px;min-width:150px}.hunter-sample .stack>span{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}.hunter-cover{width:72px;height:96px;border-radius:8px;object-fit:cover}.hunter-channel-actions .button{white-space:nowrap}.hunter-results .stack{gap:8px}.hunter-counts .button,.hunter-results .stack .button{padding:5px 8px}.hunter-workspace .pagination{padding:16px 24px}
@media(max-width:1450px){.published-days{grid-template-columns:repeat(4,minmax(0,1fr))}.hunter-primary-fields{grid-template-columns:repeat(3,minmax(0,1fr))}.hunter-keywords{grid-column:1/-1}}
@media(max-width:800px){.published-days{grid-template-columns:repeat(2,minmax(0,1fr))}.published-totals,.stats-grid.overview-secondary{grid-template-columns:1fr}.hunter-secondary-fields{grid-template-columns:repeat(2,minmax(0,1fr))}.hunter-primary-fields{grid-template-columns:1fr}.hunter-filter-form,.hunter-run-select,.hunter-result-actions,.hunter-progress{padding:16px}.hunter-workspace{max-width:100%}.hunter-results{min-width:0}.hunter-results .table-wrap{max-width:100%}}

/* Analytics: persistent topology, moving rainbow packets, theme-aware cards. */
.activity-workspace { display:flex; flex-direction:column; gap:20px; }
.activity-workspace > .panel { min-width:0; }
.activity-table-wrap { max-width:100%; }
.activity-outcomes td { white-space:normal; overflow-wrap:anywhere; }
.activity-attention td:nth-child(2) { color:var(--amber, #b7791f); font-weight:600; }
.activity-toolbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.activity-toolbar > .button { margin-left:auto; }
.activity-stamp { font-size:12px; color:var(--muted); }
.activity-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.activity-metrics .stat-card { display:flex; flex-direction:column; gap:12px; }
.activity-grid { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:20px; align-items:start; }
.activity-grid > .panel { min-width:0; margin:0; overflow:hidden; }
.activity-viewport { height:530px; overflow:hidden; position:relative; touch-action:none; cursor:grab; background-color:var(--bg); background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:32px 32px; }
.activity-viewport.dragging { cursor:grabbing; }
.activity-scene { position:absolute; transform-origin:0 0; }
.activity-edges { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.activity-node-layer { position:absolute; inset:0; pointer-events:none; }
.activity-link { fill:none; stroke:var(--line); stroke-width:1.5; }
.activity-link-glow,.activity-link-stream { fill:none; opacity:0; stroke-linecap:round; }
.activity-link-glow { stroke-width:9; filter:blur(6px); }
.activity-link-stream { stroke-width:2.5; stroke-dasharray:12 10; }
.activity-packets { display:none; filter:drop-shadow(0 0 4px #22d3ee); }
.activity-edge.is-active .activity-link { stroke:#55c6be; opacity:.45; }
.activity-edge.is-active .activity-link-glow { opacity:.55; }
.activity-edge.is-active .activity-link-stream { opacity:1; animation:activity-stream 1.4s linear infinite; }
.activity-edge.is-active .activity-packets { display:block; }
@keyframes activity-stream { to { stroke-dashoffset:-88; } }
.activity-node { position:absolute; transform:translate(-50%,-50%); width:212px; min-height:78px; border:1px solid var(--line); background:var(--card); color:var(--ink); border-radius:12px; padding:14px; gap:11px; justify-content:flex-start; text-align:left; box-shadow:0 3px 12px #0f172a09; pointer-events:auto; isolation:isolate; }
.activity-node:active:not(:disabled) { transform:translate(-50%,-50%); }
.activity-node:hover,.activity-node.selected { border-color:var(--teal); }
.activity-node-icon { width:38px; height:38px; display:grid; place-items:center; color:var(--teal); background:var(--teal-soft); border-radius:9px; flex-shrink:0; }
.activity-node-icon svg { width:21px; height:21px; }
.activity-node-copy { display:flex; flex-direction:column; gap:6px; min-width:0; flex:1; }
.activity-node-copy strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; font-weight:650; }
.activity-node-copy small { font-size:11px; color:var(--muted); white-space:nowrap; }
.activity-node.role-core { background:var(--teal-soft); border-color:#93b5f4; }
.activity-node.role-core .activity-node-icon { color:white; background:linear-gradient(135deg,#3b82f6,#6366f1); }
.activity-node.role-s3 .activity-node-icon { background:#fff4dd; color:#ae7100; }
.activity-node.role-publisher .activity-node-icon { background:#f0eaff; color:#8255c8; }
.activity-node.role-commenter .activity-node-icon { background:#e9f7f3; color:#238e75; }
.activity-node.is-active { border-color:#54cbbc; box-shadow:0 0 0 1px #56d6c34d,0 0 26px #40cfaa35; }
.activity-node.is-active::before { content:''; position:absolute; inset:-3px; border-radius:14px; z-index:-1; background:linear-gradient(100deg,#ff5e751f,#ffae423a,#f3df454d,#4ade8040,#22d3ee50,#6594ff40,#c084fc30); background-size:300% 100%; filter:blur(10px); animation:activity-aura 3s linear infinite; }
@keyframes activity-aura { 0% { background-position:0% 50%; } 100% { background-position:300% 50%; } }
.activity-node.is-active .activity-node-copy strong { color:var(--teal); }
.activity-node.is-offline:not(.is-active) { border-style:dashed; }
.activity-node-badge { display:grid; place-items:center; font-size:11px; font-weight:700; color:#0b6566; background:#b9f3e7; border-radius:50%; min-width:21px; height:21px; box-shadow:0 0 12px #4ade8040; }
.activity-controls { display:flex; align-items:center; gap:7px; padding:12px 18px; border-top:1px solid var(--line); flex-wrap:wrap; }
.activity-controls > .button:last-child { margin-left:auto; }
.activity-zoom { min-width:46px; text-align:center; color:var(--muted); font-size:12px; }
.activity-legend { padding:0 20px 14px; display:flex; flex-wrap:wrap; gap:16px; color:var(--muted); font-size:11px; }
.activity-legend > span { display:flex; align-items:center; gap:7px; }
.activity-legend i { display:block; width:20px; height:3px; background:var(--line); border-radius:3px; }
.activity-legend i.rainbow { background:linear-gradient(90deg,#ff5e75,#ffae42,#f3df45,#4ade80,#22d3ee,#6594ff,#c084fc); }
.activity-legend i.offline { border-top:2px dashed var(--muted); height:0; background:none; }
.activity-details { margin:0 20px 18px; padding:12px 14px; border:1px solid var(--line); border-radius:9px; background:var(--bg); color:var(--muted); font-size:12px; display:flex; flex-direction:column; gap:7px; }
.activity-details strong { color:var(--ink); }
.activity-note { font-size:12px; color:var(--muted); margin:0; line-height:1.6; }
.activity-feed { height:658px; overflow:auto; scrollbar-width:thin; }
.activity-event { display:flex; align-items:flex-start; gap:10px; padding:17px 18px; border-top:1px solid var(--line); }
.activity-event:first-child { border-top:0; }
.activity-event > div { flex:1; min-width:0; }
.activity-event-dot { width:7px; height:7px; border-radius:50%; background:#60a5fa; flex-shrink:0; margin-top:5px; }
.activity-event-dot.good { background:#28b88c; }
.activity-event-dot.bad { background:#ea7185; }
.activity-event-top { display:flex; align-items:center; justify-content:space-between; gap:7px; }
.activity-event-top strong { font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.activity-event-top time { font-size:10px; color:var(--muted); white-space:nowrap; }
.activity-event-label { display:block; font-size:12px; margin-top:7px; }
.activity-event small { display:block; font-size:11px; color:var(--muted); margin-top:5px; line-height:1.45; overflow-wrap:anywhere; }
.activity-feed .empty { padding:55px 20px; }
.activity-workspace.is-demo .activity-viewport { box-shadow:inset 0 0 0 2px #e9bd56; }
.activity-workspace.motion-paused .activity-link-stream,.activity-workspace.motion-paused .activity-node::before { animation-play-state:paused; }
[data-theme=dark] .activity-node.role-s3 .activity-node-icon { background:#423421; color:#f3c261; }
[data-theme=dark] .activity-node.role-publisher .activity-node-icon { background:#312844; color:#c5a2fd; }
[data-theme=dark] .activity-node.role-commenter .activity-node-icon { background:#203d37; color:#6edab9; }
@media(min-width:1600px) { .activity-viewport { height:620px; } .activity-feed { height:748px; } }
@media(max-width:1350px) { .activity-grid { grid-template-columns:1fr; } .activity-feed { height:320px; } }
@media(max-width:640px) { .activity-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .activity-toolbar { gap:8px; } .activity-toolbar > .button { margin-left:0; } .activity-viewport { height:420px; } .activity-controls { padding:10px; } .activity-controls > .button:last-child { margin-left:0; } }
@media(prefers-reduced-motion:reduce) { .activity-edge.is-active .activity-packets { display:none; } .activity-edge.is-active .activity-link-stream,.activity-node.is-active::before { animation:none; } }

.activity-node { cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; }
.activity-node.is-dragging { cursor:grabbing; z-index:5; box-shadow:0 8px 28px #2563eb30; }

.pill.purple{color:#6d28d9;background:#ede9fe;border-color:#c4b5fd}
[data-theme=dark] .pill.purple{color:#ddd6fe;background:#3b2463;border-color:#76549e}

.worker-hosts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:20px;margin:20px 0}.worker-monitor>.panel{margin-top:20px}.worker-host-heading,.worker-slot-heading,.worker-gate{display:flex;align-items:center;justify-content:space-between;gap:12px}.worker-slots{display:grid;gap:12px;margin-top:14px}.worker-slot{border:1px solid var(--border);border-radius:12px;padding:16px}.worker-slot h3{margin:12px 0 6px}.worker-slot progress{display:block;width:100%;height:12px;accent-color:#3b82f6;margin:12px 0}.worker-job-meta{display:block;margin-top:10px;opacity:.7;overflow-wrap:anywhere}.worker-gate{padding:10px 0;border-bottom:1px solid var(--border)}.worker-monitor .stat-value{font-size:clamp(18px,2vw,30px)}