.topbar { --logo-face: var(--top-bg); display: flex; align-items: center; gap: 24px; padding: 10px 24px; background: var(--top-bg); color: var(--top-ink); border-top: 4px solid var(--top-line); border-bottom: 0; position: sticky; top: 0; z-index: 20; }
.topbar .brand { text-decoration: none; color: var(--top-ink); display: inline-flex; }
.topbar .dt-logo, .topbar .dt-suffix { color: var(--top-ink); }
.topbar .dt-suffix { border-left-color: rgba(255,255,255,.45); opacity: .85; }
.topbar nav { display: flex; gap: 18px; }
.topbar nav a { color: var(--top-ink); opacity: .85; text-decoration: none; font-weight: 600; font-size: 14px; }
.topbar nav a:hover { opacity: 1; }
main { padding: 24px; max-width: 1400px; margin: 0 auto; }
.loading { color: var(--muted); padding: 40px; text-align: center; }
.page-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head h1 { margin: 0; line-height: 1.1; padding-bottom: 2px; }
.tabs { display: flex; gap: 4px; background: var(--neutral-soft); padding: 4px; border-radius: 10px; }
.tabs a { padding: 6px 14px; border-radius: 7px; font-weight: 600; font-size: 14px; color: var(--muted); text-decoration: none; }
.tabs a.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.survey-table td.name { font-weight: 600; min-width: 200px; }   /* names wrap; the table fits an ordinary laptop window without scrolling */
.survey-table th, .survey-table td { padding: 8px 8px; }
.survey-table td.name a:first-child { display: inline; }
.survey-table td.when { white-space: nowrap; }
.list-card { overflow-x: auto; }
.survey-table a { text-decoration: none; }
.survey-table .actions { white-space: nowrap; }
.survey-table th.sort { cursor: pointer; user-select: none; white-space: nowrap; }
.survey-table th.sort:hover, .survey-table th.sort.on { color: var(--text); }
.survey-table th.sort .dir { display: inline-block; width: 10px; margin-left: 3px; font-size: 11px; }
.list-search { width: 280px; max-width: 40vw; padding: 7px 12px; border-radius: 999px; }
.status-ctl.row { align-items: flex-start; }
.status-ctl.row .status-menu, .status-ctl.row .status-msg { left: 0; transform: none; }
/* Builder */
.builder { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 20px; align-items: start; }
.sidebar { position: sticky; top: 76px; max-height: calc(100vh - 100px); overflow: auto; display: flex; flex-direction: column; gap: 12px; }
.qlist { list-style: none; margin: 0; padding: 0; }
.qlist li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 13.5px; border: 1px solid transparent; }
.qlist li:hover { background: var(--hover); }
.qlist li.on { background: var(--accent-soft); border-color: var(--accent); }
.qlist li .code { font-family: ui-monospace, Menlo, monospace; font-weight: 700; font-size: 12px; flex: 0 0 48px; color: var(--accent); }
.qlist li .qt { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qlist li .type { font-size: 11px; color: var(--muted); }
.qlist li .logic { font-size: 11px; color: var(--warn); }
.qlist li .mv { display: none; gap: 2px; }
.qlist li:hover .mv { display: inline-flex; }
.qlist li .mv button { padding: 1px 6px; font-size: 11px; border-radius: 5px; }
.editor .card { margin-bottom: 16px; }
.editor h2 { display: flex; align-items: center; gap: 10px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.three { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.lang-tag { display: inline-block; font-size: 10px; font-weight: 700; background: var(--neutral-soft); color: var(--muted); border-radius: 4px; padding: 1px 5px; margin-right: 6px; vertical-align: middle; }
.opt-row { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.opt-row .labels { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.opt-row .labels input { padding: 6px 9px; font-size: 14px; }
.opt-row .flags { display: flex; gap: 10px; padding-top: 7px; font-size: 12px; white-space: nowrap; }
.opt-row .flags label { display: inline-flex; gap: 4px; align-items: center; color: var(--muted); }
.opt-row .flags input { width: auto; }
.opt-row .del { padding: 4px 8px; margin-top: 2px; }
.rule { display: grid; grid-template-columns: 1.3fr 1fr 1.6fr auto; gap: 8px; align-items: start; margin-bottom: 8px; }
.rule select, .rule input { padding: 6px 9px; font-size: 14px; }
.checklist { display: flex; flex-wrap: wrap; gap: 6px 12px; padding: 6px 0; }
.checklist label { font-size: 13px; display: inline-flex; gap: 4px; align-items: center; }
.checklist input { width: auto; }
.save-bar { display: flex; gap: 10px; align-items: center; }
.dirty { color: var(--warn); font-weight: 600; font-size: 13px; }
.errors { margin-bottom: 16px; }
.imgs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.imgs .img { position: relative; }
.imgs img { height: 120px; max-width: 260px; object-fit: contain; border-radius: 8px; border: 1px solid var(--line); background: #fff; display: block; }
.imgs .img button { position: absolute; top: 4px; right: 4px; }
.errors li { color: var(--bad); }
/* The status pill in the page header is a select: same colours as a pill, a small chevron, saves on change */
/* Status control: a "Status" label over the pill, which opens a list of the three states */
.status-ctl { position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 3px; }
.status-lbl { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); line-height: 1; }
.pill-btn { appearance: none; -webkit-appearance: none; border: 1px solid transparent; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; line-height: 1.4; padding: 3px 8px 3px 11px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; }
.pill-btn svg { display: block; }
.pill-btn.draft { background: var(--warn-soft); color: var(--warn); border-color: #E8A9B2; }
.pill-btn.live { background: var(--ok-soft); color: var(--ok-ink); border-color: #8FCBA8; }
.pill-btn.closed { background: var(--neutral-soft); color: var(--muted); border-color: #CFC4B8; }
.pill-btn:hover, .pill-btn[aria-expanded="true"] { box-shadow: 0 0 0 3px var(--accent-soft); }
.pill-btn:focus-visible { outline: 2px solid rgba(78,111,152,.45); outline-offset: 2px; }
.status-menu { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 30; width: 232px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 28px rgba(31,43,58,.14); padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.status-menu[hidden] { display: none; }
.status-menu button { font: inherit; font-size: 13px; font-weight: 600; text-align: left; padding: 7px 10px; border: 0; background: transparent; color: var(--text); border-radius: 7px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
.status-menu button:hover, .status-menu button.cur, .status-menu button:focus-visible { background: var(--hover); outline: none; }
.status-menu .note { font-size: 12px; color: var(--muted); font-weight: 500; }
.status-ctl .status-msg { position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%); white-space: nowrap; z-index: 5; }
/* Results */
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 20px; }
.filters label.field { margin: 0; min-width: 150px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.tile b { display: block; font-size: 26px; line-height: 1.1; font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tile.wide { grid-column: span 2; display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; align-items: center; }
.tile.wide b { grid-row: 1; }
.tile.wide span { grid-row: 2; }
.tile.wide svg { grid-row: 1 / 3; width: 100%; height: 48px; display: block; }
.tile span { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.qcard { margin-bottom: 16px; }
.qcard .qh { display: flex; gap: 12px; align-items: baseline; margin-bottom: 12px; }
.qcard .qh .code { font-family: ui-monospace, Menlo, monospace; color: var(--accent); font-weight: 700; }
.qcard .qh h3 { flex: 1; margin: 0; font-size: 15px; font-weight: 600; }
.qcard .qh .base { color: var(--muted); font-size: 13px; white-space: nowrap; }
.bars { display: grid; grid-template-columns: minmax(140px, 1fr) 3fr 56px 56px; gap: 6px 12px; align-items: center; font-size: 13.5px; }
.bars .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bars .bar { height: 18px; background: var(--neutral-soft); border-radius: 4px; overflow: hidden; }
.bars .bar div { height: 100%; background: var(--accent); border-radius: 4px; min-width: 2px; }
.bars .pct { font-weight: 700; text-align: right; }
.bars .n { color: var(--muted); text-align: right; }
.stats { display: flex; gap: 20px; margin-bottom: 10px; font-size: 14px; }
.stats b { font-size: 18px; }
.heat td { text-align: center; }
.heat td.cell { font-weight: 600; }
.heat td.rowlbl { text-align: left; }
.verbatims { max-height: 320px; overflow: auto; }
.verbatims li { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.verbatims li span { color: var(--muted); font-size: 12px; margin-left: 8px; }
.other-list { margin-top: 10px; font-size: 13px; color: var(--muted); }
.fw-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.test-notice { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: var(--hover); border: 1px dashed var(--accent); color: var(--text); font-weight: 500; margin-bottom: 16px; }
.test-notice b { color: var(--accent); }
/* Fieldwork tab: simple view */
.fw-head { margin-bottom: 16px; }
.fw-big { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.fw-big b { font-family: var(--font-display); font-size: 44px; font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.fw-big .of { font-size: 20px; color: var(--muted); font-weight: 600; }
.fw-big .lbl { color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.pbar { height: 8px; background: var(--neutral-soft); border-radius: 4px; overflow: hidden; }
.pbar div { height: 100%; background: var(--ok-ink); border-radius: 4px; transition: width .3s; }
.pbar.big { height: 14px; border-radius: 7px; margin-bottom: 12px; }
.fw-facts { display: flex; flex-wrap: wrap; gap: 6px 22px; color: var(--muted); font-size: 14px; }
.fw-facts b { color: var(--text); font-variant-numeric: tabular-nums; }
.fw-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; margin-bottom: 16px; }
.fw-two > .card { min-width: 0; overflow-x: auto; }   /* a wide table scrolls inside its card, never the page */
.fw-field .qtable td.when { white-space: normal; }
.fw-head, .fw-buckets, .fw-targets { min-width: 0; overflow-x: auto; }
.fw-field h3 { margin-bottom: 0; }
.qtable { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 8px; }
.qtable th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--line); font-weight: 600; }
.qtable td { padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.qtable td.num, .qtable th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.qtable td.prog { width: 28%; min-width: 90px; }
.qtable td.when { white-space: nowrap; }
.qtable th:first-child { min-width: 140px; }
.qtable tr.done td:first-child::after { content: ' ✓'; color: var(--ok-ink); font-weight: 700; }
.fw-link .link-box { display: flex; gap: 8px; align-items: center; }
.fw-link .link-box input { flex: 1; font-size: 13px; }
.fw-more { margin: 4px 0 20px; }
.fw-h2 { margin: 24px 0 12px; font-size: 18px; }
.fw-targets { margin-bottom: 16px; border-color: var(--accent); }
.tgt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 8px; }
.tgt-grid h4 { margin: 0 0 4px; font-size: 14px; }
.tgt-grid input { padding: 4px 8px; }
@media (max-width: 600px) { .fw-link .link-box { flex-wrap: wrap; } .fw-two { grid-template-columns: 1fr; } }
.minibar { display: inline-block; max-width: 70%; height: 10px; background: var(--accent); border-radius: 3px; vertical-align: middle; margin-right: 6px; }
.empty { text-align: center; padding: 50px; color: var(--muted); }
@media (max-width: 900px) { .builder { grid-template-columns: 1fr; } .sidebar { position: static; max-height: none; } .rule { grid-template-columns: 1fr; } .bars { grid-template-columns: 1fr 2fr 50px 50px; } }

/* Review */
.badge { display: inline-block; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 7px; vertical-align: middle; text-decoration: none; }
.tabs a .badge { margin-left: 2px; }
.review { margin-bottom: 14px; border-left: 4px solid var(--warn); }
.review.approved { border-left-color: var(--ok); }
.review.reverted { border-left-color: var(--muted); }
.review .rh { display: flex; gap: 10px; align-items: baseline; margin-bottom: 6px; flex-wrap: wrap; }
.review .rh .code { font-family: ui-monospace, Menlo, monospace; color: var(--accent); font-weight: 700; }
.review .rh .kind { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.review .rh h3 { flex: 1; margin: 0; font-size: 15px; }
.review .pill.pending { background: var(--warn-soft); color: var(--warn); }
.review .pill.approved { background: var(--ok-soft); color: var(--ok); }
.review .pill.reverted { background: var(--neutral-soft); color: var(--muted); }
.changes { font-size: 13.5px; margin-top: 8px; }
.changes td:first-child { width: 22%; }

/* New survey */
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.dropzone { border: 2px dashed #B3DCC1; border-radius: 12px; padding: 34px 16px; text-align: center; cursor: pointer; color: var(--muted); background: #E9F6EE; transition: border-color .15s, background .15s; }
.dropzone b { color: var(--text); }
.dropzone:hover, .dropzone:focus, .dropzone.over { border-color: #7FBF98; background: #C9E9D2; outline: none; }
.dropzone.busy { pointer-events: none; opacity: .6; }
.new-hero { padding: 26px 28px 22px; }
.new-hero h2 { margin: 0 0 6px; font-size: 22px; }
.new-hero > p { margin: 0 0 18px; max-width: 80ch; }
.dropzone.big { padding: 46px 20px 40px; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 15px; }
.dropzone.big svg { width: 46px; height: 46px; color: #2E7D52; margin-bottom: 8px; }
.dropzone.big b { font-size: 19px; }
.dropzone.big .tiny { margin-top: 8px; }
.new-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); list-style: none; counter-reset: step; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.new-steps li { position: relative; padding-left: 32px; }
.new-steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.new-steps b { color: var(--text); display: block; margin-bottom: 3px; }
.new-alt { margin-top: 22px; }
.stage { margin-top: 12px; }
.row-cond { margin: -4px 0 10px 4px; }
.row-cond.on { padding: 8px 10px 10px; border-left: 3px solid var(--accent-soft); background: var(--bg); border-radius: 0 8px 8px 0; }
.row-cond .rule { grid-template-columns: 1fr 1fr auto; gap: 6px 8px; }
.row-cond .rule > select:first-child { grid-column: 1 / -1; }
.row-cond .rule .checklist { grid-column: 1 / -1; }
.row-cond .rule .btn-danger { justify-self: end; align-self: center; padding: 4px 8px; }
.row-cond .rule select, .row-cond .rule input { font-size: 13px; padding: 5px 8px; }
.row-cond .row.small { margin-bottom: 6px; }
.stage h3 { margin: 0; }
.stage > .row.between { margin-bottom: 4px; }
.stage-files { display: grid; gap: 8px; margin: 12px 0 14px; }
.stage-file { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); font-size: 14px; font-weight: 600; }
.stage-file select { width: auto; font-weight: 400; }
.new-alt-title { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.new-alt-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.new-alt-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.new-alt-item .row { flex-wrap: nowrap; }
.new-alt-item select, .new-alt-item input { flex: 1; min-width: 0; font-size: 13px; }
@media (max-width: 760px) { .new-steps, .new-alt-row { grid-template-columns: 1fr; } }
.progress-box { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 10px; background: var(--hover); border: 1px solid var(--line); }
.spinner { flex: 0 0 18px; width: 18px; height: 18px; border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; margin-top: 2px; }
@keyframes spin { to { transform: rotate(360deg); } }

.review-h { font-size: 16px; margin: 22px 0 10px; display: flex; gap: 10px; align-items: baseline; }

.bylist { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 6px; }
.bylist textarea { flex: 1; font-size: 13px; padding: 6px 8px; }

/* Build progress */
.build-progress { --logo-face: var(--hover); display: flex; gap: 22px; align-items: center; padding: 18px; border-radius: 12px; background: var(--hover); border: 1px solid var(--line); }
.build-mark { flex: 0 0 120px; color: var(--text); }
.build-title { font-size: 17px; margin-bottom: 10px; }
.pbar { height: 10px; background: var(--line); border-radius: 5px; overflow: hidden; margin-bottom: 6px; }
.pbar div { height: 100%; background: var(--accent); border-radius: 5px; transition: width .7s ease; }
@media (max-width: 600px) { .build-progress { flex-direction: column; align-items: flex-start; } }

.review.deferred, .review.client_approved, .review.client_reverted { border-left-color: var(--accent); }
.review .pill.deferred { background: var(--accent-soft); color: var(--accent); }
.review .pill.client_approved { background: var(--ok-soft); color: var(--ok-ink); }
.review .pill.client_reverted { background: var(--neutral-soft); color: var(--muted); }
.badge.blue { background: var(--accent); }
.badge.green { background: var(--ok); }

.img-need { padding: 10px 0; border-top: 1px solid var(--line); }
.img-need:first-of-type { border-top: 0; }
.img-need .code { font-family: ui-monospace, Menlo, monospace; color: var(--accent); font-weight: 700; }
.img-need .imgs { margin: 8px 0; }

/* Film by rating (Survey settings) */
.film-rated { margin: 4px 0 14px 26px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: #f9fafb; }
.film-controls { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: flex-end; }
.film-controls .field { margin: 0; }
.film-controls .field > span { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.film-controls .ratings { display: flex; gap: 12px; flex-wrap: wrap; min-height: 36px; align-items: center; }
.film-controls input[type="date"] { width: 150px; }
.film-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 4px 14px; }
.film-list li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.film-list li b { font-weight: 600; flex: 1 1 auto; min-width: 0; }
.film-list li > span:first-child { flex: 1 1 auto; }
.film-list .rating { flex: 0 0 auto; font-family: ui-monospace, Menlo, monospace; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px; background: var(--accent-soft, #E3EAF3); color: var(--accent, #4E6F98); }
.film-list li button { flex: 0 0 auto; }
.film-cands { margin-top: 12px; }
.film-cands summary { cursor: pointer; font-size: 13px; color: var(--muted); font-weight: 600; }
.film-cands .film-list { margin-top: 8px; }
.film-cands .film-list li { color: var(--muted); }

/* Ad video to reminder GIF progress */
.gif-status:empty { display: none; }
.gif-status { margin-top: 10px; }
.gif-progress .pbar { max-width: 420px; }

/* NCM deliverables (Results tab): icon tiles in the top band */
.ncm { margin-bottom: 20px; }
.ncm .ncm-head { align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.ncm .ncm-head h3 { margin: 0 0 2px; }
.ncm .ncm-links { display: flex; flex-wrap: wrap; gap: 2px; }
.ncm .ncm-links button { padding: 6px 10px; font-size: 13px; color: var(--muted); }
.ncm .ncm-links button:hover, .ncm .ncm-links button.on { color: var(--accent); background: var(--accent-soft); border-color: transparent; }
.ncm .dls { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-top: 14px; }
.ncm .dl { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 18px 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-weight: 500; transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease; }
.ncm .dl:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(31,43,58,.10); border-color: #B7C6D8; }
.ncm .dl:hover .ico { background: linear-gradient(180deg, var(--accent-hi), var(--accent)); color: var(--accent-ink); }
.ncm .dl .ico { width: 52px; height: 52px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; margin-bottom: 6px; transition: background .12s ease, color .12s ease; }
.ncm .dl .ico svg { width: 26px; height: 26px; }
.ncm .dl b { font-size: 14px; font-weight: 700; font-family: var(--font-display); letter-spacing: -.01em; }
.ncm .dl .sub { font-size: 12px; color: var(--muted); }
.ncm .dl .fname { font-size: 10.5px; color: var(--muted); font-family: ui-monospace, Menlo, monospace; margin-top: 4px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ncm .ncm-panel { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.ncm .settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 14px; margin-top: 10px; }
.ncm .settings-grid .field { margin: 0; }
.ncm textarea.sites { width: 100%; font-family: ui-monospace, Menlo, monospace; font-size: 12px; margin-top: 8px; }
.ncm table.codebook { font-size: 12px; margin-top: 8px; }
.ncm .data-line { font-size: 13px; margin-top: 6px; color: var(--ink); }
.ncm .notice.warn { border-color: #F0B9C0; background: var(--warn-soft); margin-top: 10px; }
.ncm .row.wrap { flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.ncm .field.inline { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; }
.ncm .plan { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.ncm .plan.bad { border-color: #E39A9A; background: #FFF5F5; }
.ncm .plan p { margin: 0 0 6px; }
.ncm .plan .modes { display: grid; gap: 8px; margin-bottom: 8px; }
.ncm .plan .modes .check { align-items: flex-start; font-size: 13px; line-height: 1.4; }
.ncm .plan .modes input { margin-top: 3px; }
.ncm .plan ul { margin: 4px 0 8px 18px; }
.ncm .plan ul.errs { color: #B42318; }
.ncm .plan ul.warns { color: var(--warn); }
.ncm .original { margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--line); }
.ncm table.codebook td { vertical-align: top; }
.ncm .status { margin-top: 8px; font-size: 13px; }
.ncm .notice { margin-top: 12px; }

/* Creative Content (Build → Survey settings) */
.creative-drop { padding: 22px 16px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.creative-drop svg { width: 34px; height: 34px; color: var(--accent); margin-bottom: 4px; }
.creative-drop b { font-size: 15px; }
.creative-shown { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.creative-shown .shown-q { display: inline-block; margin: 2px 8px 2px 0; padding: 3px 8px; border-radius: 6px; background: var(--accent-soft); font-size: 13px; }
.creative-list { margin-top: 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 4px 16px; max-height: 320px; overflow: auto; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; }
.creative-list label.check { font-size: 13px; }

/* Settings: site lists with codes */
.sites-row td { padding: 4px 10px 16px; background: var(--hover); }
.sites-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 16px 24px; }
.sites-block { margin-bottom: 4px; }
.sites-block .row.between { margin-bottom: 4px; }
.sites-table { width: 100%; font-size: 13px; }
.sites-table th { font-size: 11px; padding: 4px 6px; }
.sites-table td { padding: 3px 6px; border-bottom: 1px solid var(--line); }
.sites-table input { padding: 5px 8px; font-size: 13px; }
.sites-table td:first-child { width: 78px; }
.sites-table td:nth-child(2) { width: 30%; }
.sites-table td:last-child { width: 40px; }

/* Surveys list: Control / Test counts */
.survey-table td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.survey-table td.num.single { text-align: left; }
.survey-table th.sort[data-key="control"], .survey-table th.sort[data-key="test"] { text-align: right; }
.survey-table .count { color: var(--text); }
.survey-table .count .of { color: var(--muted); font-weight: 500; }
.survey-table .count.reached b { color: var(--ok-ink); }
button.link { background: none; border: 0; padding: 0; margin: 0; color: var(--accent); text-decoration: underline; cursor: pointer; font: inherit; }
.notice-card { margin-bottom: 14px; border-left: 4px solid var(--accent); }
.notice-card a { color: var(--accent); }

/* Settings → Clients */
.clients { margin-top: 16px; }
.client-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; margin-top: 12px; }
.client-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: var(--bg); }
.client-card.new { border-color: var(--accent); }
.client-card .cc-head { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.client-card .cc-head .grow { display: flex; align-items: center; gap: 8px; }
.client-card .cc-head input { font-weight: 700; font-size: 16px; }
.client-card .cc-logo { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: 12px; font-weight: 700; color: var(--muted); }
.client-card .cc-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.client-card h4 { margin: 12px 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.client-card .cc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.client-card .cc-checks { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 8px; }
.client-card .check { display: flex; align-items: flex-start; gap: 8px; font-weight: 500; margin-bottom: 6px; line-height: 1.3; }
.client-card .check input { margin-top: 3px; }
.client-card .field { margin-bottom: 8px; }
.field-like { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 10px; }
.field-like .check { font-weight: 500; color: var(--text); font-size: 13px; margin-top: 6px; }

/* Targets editor and quota facts */
.tgt-head { gap: 10px; margin-bottom: 14px; }
.tgt-head h3 { margin: 0; }
.tgt-eyebrow { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.tgt-note { font-size: 12px; color: var(--muted); }
/* the arithmetic strip: project totals + over-collection = fieldwork totals */
.tgt-strip { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 14px 18px; padding: 14px 18px; background: var(--hover); border-radius: 10px; margin-bottom: 16px; }
.tgt-strip .tgt-group { display: flex; flex-direction: column; }
.tgt-strip .tgt-boxes { display: flex; gap: 8px; }
.tgt-strip .field { display: flex; flex-direction: column; gap: 3px; margin: 0; font-size: 12px; font-weight: 500; color: var(--muted); }
.tgt-strip .field input { width: 88px; padding: 7px 9px; font-size: 15px; font-weight: 600; margin: 0; }
.tgt-strip .field input.big { width: 100px; padding: 4px 9px; font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.tgt-strip .field.pct { flex-direction: row; align-items: center; gap: 5px; font-size: 14px; }
.tgt-strip .field.pct input { width: 60px; }
.tgt-strip .tgt-op { font-size: 20px; color: #B7C6D8; padding-bottom: 8px; }
.tgt-strip .tgt-note { max-width: 210px; padding-bottom: 6px; }
/* the rules: two columns of segmented switches */
.tgt-rules2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px 24px; margin-bottom: 16px; }
.tgt-ctl { gap: 10px; }
.seg { display: inline-flex; background: var(--neutral-soft); border-radius: 9px; padding: 3px; }
.seg label { position: relative; }
.seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg span { display: inline-block; padding: 6px 12px; border-radius: 7px; font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.seg input:checked + span { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(31,43,58,.1); }
.seg input:focus-visible + span { outline: 2px solid rgba(78,111,152,.45); outline-offset: 1px; }
.tgt-rules2 .field.inline { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; font-weight: 500; white-space: nowrap; }
.tgt-rules2 .field.inline select { padding: 5px 8px; font-size: 13px; margin: 0; }
.tgt-bk-preview { display: flex; flex-wrap: wrap; gap: 2px 16px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; margin-top: 8px; }
.tgt-bk-preview b { color: var(--text); }
.tgt-bk-preview .warn-text { color: var(--warn); font-weight: 600; }
.tgt-sites { max-width: 760px; margin-top: 0; }
.tgt-sites td, .tgt-sites th { padding: 6px 8px; }
.tgt-sites input { width: 84px; padding: 4px 8px; }
.tgt-sites td.sum { color: var(--muted); font-variant-numeric: tabular-nums; }
.tgt-sites tfoot td { font-weight: 700; border-top: 2px solid var(--line); border-bottom: 0; font-variant-numeric: tabular-nums; }
.tgt-sites tfoot td.off { color: var(--warn); }
.qtable td .cells b.ok { color: var(--ok-ink); }
@media (max-width: 900px) { .tgt-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .tgt-top { grid-template-columns: 1fr; } .client-card .cc-row { grid-template-columns: 1fr; } }
.fw-cells { display: flex; gap: 20px; margin-top: 8px; font-size: 14px; color: var(--muted); }
.fw-cells b { color: var(--text); font-variant-numeric: tabular-nums; }
.fw-cells .reached b { color: var(--ok-ink); }
.qtable td .cells { margin-top: 2px; font-variant-numeric: tabular-nums; }
.qtable td .cells b { color: var(--text); font-weight: 600; }

/* Surveys list: one Actions menu per row (floats above the table, which may scroll sideways) */
.survey-table .menu-btn { white-space: nowrap; }
.survey-table .menu-btn .caret { font-size: 10px; margin-left: 2px; }
.row-menu { position: fixed; z-index: 40; width: 180px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 28px rgba(31,43,58,.14); padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.row-menu[hidden] { display: none; }
.row-menu a, .row-menu button { font: inherit; font-size: 13px; font-weight: 600; text-align: left; padding: 7px 10px; border: 0; background: transparent; color: var(--text); border-radius: 7px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-decoration: none; }
.row-menu a:hover, .row-menu button:hover, .row-menu a:focus-visible, .row-menu button:focus-visible { background: var(--hover); outline: none; }
.row-menu button.danger { color: var(--bad); }
.row-menu button[disabled] { color: var(--muted); cursor: not-allowed; }
.row-menu button.danger { border-top: 1px solid var(--line); border-radius: 0 0 7px 7px; margin-top: 2px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.field-like.dates { margin-bottom: 10px; }
.field-like.dates .field { margin-bottom: 4px; font-size: 12px; }
.field-like.dates input[type="date"] { width: 100%; padding: 6px 8px; font-size: 13px; }
.field-like.dates .tiny { display: block; }
.page-head .tabs { margin-left: 8px; }

/* Full-size viewer for stills and the reminder GIF */
.imgs .img img { cursor: zoom-in; }
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(31, 43, 58, .86); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; padding: 24px; cursor: zoom-out; }
.lightbox img { max-width: min(92vw, 1200px); max-height: 82vh; border-radius: 10px; background: #fff; box-shadow: 0 20px 60px rgba(0, 0, 0, .4); }
.lightbox .lb-close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); color: var(--text); font-size: 18px; cursor: pointer; }
.lightbox .lb-close:hover, .lightbox .lb-close:focus-visible { background: #fff; outline: none; }
.lightbox .lb-hint { color: rgba(255, 255, 255, .75); font-size: 13px; }
body.lightbox-open { overflow: hidden; }

/* Quota buckets */

@media (max-width: 800px) { .tgt-bk-grid { grid-template-columns: 1fr; } }
.fw-buckets { margin-bottom: 16px; }
.bk-table { max-width: 640px; }
.bk-table.sites { max-width: none; margin-top: 14px; }
.bk-table td.full b { color: var(--ok-ink); }
.bk-table .need { display: block; font-size: 11px; color: var(--warn); font-weight: 700; }
.bk-table td[rowspan] { vertical-align: top; font-weight: 600; }
.sites-table tr.off input:not([type="checkbox"]) { color: var(--muted); }
.sites-table td.ctr, .sites-table th:nth-child(4) { text-align: center; }
.sites-table td.ctr input { width: auto; }
.bylist .grow { flex: 1; min-width: 0; }
.bylist .grow textarea { width: 100%; }
.avail { margin-top: 4px; line-height: 1.7; }
.avail button.link { margin-right: 4px; }

/* The stills editor under the Creative Content card */
.stills-editor { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.stills-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.still { position: relative; display: block; cursor: pointer; border-radius: 8px; overflow: hidden; background: var(--neutral-soft); }
.still input { position: absolute; top: 6px; left: 6px; z-index: 1; width: 18px; height: 18px; margin: 0; }
.still img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; opacity: .55; transition: opacity .12s ease; }
.still.on img { opacity: 1; outline: 3px solid var(--accent); outline-offset: -3px; }
.still:hover img { opacity: .85; }
.still span { position: absolute; right: 6px; bottom: 4px; font-size: 11px; font-weight: 600; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
/* Brand target (beta) */
.bt .beta { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 2px 8px; vertical-align: middle; margin-left: 6px; }
.bt .bt-h4 { margin: 16px 0 4px; font-size: 14px; }
.bt .bt-h4 .tiny { font-weight: 400; display: block; max-width: 90ch; margin-top: 2px; }
.bt .bt-sets { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-top: 12px; }
.bt .bt-sets h4 { margin: 0 0 6px; font-size: 14px; }
.bt .bt-sets .field { margin-bottom: 6px; }
.bt .bt-table { margin-top: 10px; }
.bt .bt-table.edit input { width: 72px; padding: 3px 6px; text-align: right; }
.bt .bt-table.edit select { padding: 3px 6px; }
.bt .bt-table tr.missed td { background: var(--warn-soft); }
.bt .pill.bt-met { background: var(--ok-soft); color: var(--ok-ink); }
.bt .pill.bt-held { background: var(--accent-soft); color: var(--accent); }
.bt .pill.bt-missed { background: var(--warn-soft); color: var(--warn); }
.bt .pill.bt-moved, .bt .pill.bt-ignored { background: var(--line); color: var(--muted); }
.bt .bt-notes { margin: 8px 0 0; }
.bt .bt-demo { margin-top: 12px; }
.bt .bt-demo summary { cursor: pointer; color: var(--muted); }
.bt .data-line { margin-top: 8px; }
/* Settings: the note that the settings were saved, and the inactive save button */
.saved-note { color: var(--ok-ink); font-weight: 600; margin-right: 8px; }
.saved-note .tick { color: var(--ok); font-weight: 800; }
.bk-table .plus, .fw-facts .plus { color: var(--accent); font-weight: 700; font-size: 12px; margin-left: 3px; }

/* ---------- Data checks (Fieldwork) ---------- */
.fw-checks { margin-bottom: 16px; min-width: 0; }
.fw-checks h3 { margin-bottom: 0; }
.fw-checks h4 { margin: 0 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.ck-who { display: inline-flex; align-items: center; gap: 6px; }
.ck-who input { width: 150px; font-size: 13px; padding: 4px 8px; }
.ck-sum { margin: 6px 0 10px; }
.ck-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.ck-tabs button { appearance: none; border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); padding: 7px 10px; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
.ck-tabs button.on { color: var(--text); border-bottom-color: var(--accent); }
.ck-tabs .cnt { display: inline-block; margin-left: 6px; font-size: 11px; padding: 0 6px; border-radius: 999px; background: var(--neutral-soft); color: var(--muted); font-variant-numeric: tabular-nums; }
.ck-tabs .cnt.hot { background: var(--warn-soft); color: var(--warn); }
.ck-empty { padding: 6px 0 2px; }
.ck-list { display: flex; flex-direction: column; gap: 10px; }
.ck-item { border: 1px solid var(--line); border-left: 4px solid var(--accent-soft); border-radius: 8px; padding: 10px 12px; background: var(--bg); }
.ck-meta { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.ck-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.ck-chips .chip { appearance: none; font: inherit; font-size: 12px; font-weight: 600; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; cursor: pointer; }
.ck-chips .chip.on { color: var(--text); border-color: var(--accent); background: var(--accent-soft); }
.ck-chips .cnt { font-variant-numeric: tabular-nums; opacity: .8; }
.ck-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }
.ck-badge { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 2px 8px; border-radius: 999px; background: var(--neutral-soft); color: var(--muted); white-space: nowrap; }
.ck-badge.straight { background: var(--accent-soft); color: var(--accent); }
.ck-badge.speed { background: var(--warn-soft); color: var(--warn); }
.ck-badge.nonsense { background: #fee2e2; color: var(--bad); }
.ck-why { font-size: 14px; margin: 0 0 6px; }
.ck-why ul { margin: 2px 0 0 18px; padding: 0; }
.ck-why li { margin: 2px 0; }
.ck-review { font-size: 13px; margin: 2px 0 8px; font-weight: 600; }
.ck-review.accepted { color: var(--ok-ink); }
.ck-review.rejected { color: var(--bad); }
.ck-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ck-reject { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ck-reject input { width: 260px; max-width: 100%; font-size: 13px; padding: 5px 8px; }
.ck-answers { margin-top: 10px; font-size: 13px; }
.ck-answers tr.hit td { background: var(--warn-soft); }
.ck-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.ck-two > div { min-width: 0; overflow-x: auto; }
.ck-rates tr.warn td { background: var(--warn-soft); }
.ck-rules { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 12px; }
.ck-rule { display: flex; gap: 10px; align-items: baseline; font-size: 14px; cursor: pointer; }
.ck-rule.off span { color: var(--muted); }
.ck-rule .ck-badge { margin-right: 6px; }
.ck-rule input[type="checkbox"] { flex: none; width: auto; margin: 0; position: relative; top: 2px; }   /* the shared input rule is width: 100%; a full-width checkbox pushes the text out of the card */
.ck-speed { margin: 0 0 12px; }
.ck-speed input { width: 64px; font-size: 13px; padding: 4px 6px; text-align: right; }
.ck-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ck-add .lbl, .ck-add .with { color: var(--muted); }
.ck-add select { max-width: 260px; font-size: 13px; padding: 5px 8px; }
.ck-note { margin-bottom: 14px; }
.ck-note a { color: inherit; }
.redo { color: var(--bad); }
.fw-facts .redo b { color: var(--bad); }

/* ---------- Panel Dashboard additions (on top of the Survey Dashboard's stylesheet) ---------- */
.topbar nav a.on { opacity: 1; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.who { display: inline-flex; align-items: center; gap: 10px; color: var(--top-ink); font-size: 14px; }
.who a { color: var(--top-ink); text-decoration: none; font-weight: 600; }
.who .btn-ghost { color: var(--top-ink); border-color: rgba(255,255,255,.4); }
.auth-card { max-width: 420px; margin: 60px auto; }
.auth-card h1 { margin-bottom: 6px; }
.toast { position: fixed; right: 20px; bottom: 20px; background: var(--text); color: #fff; padding: 10px 14px; border-radius: 10px; font-weight: 600; box-shadow: var(--shadow); z-index: 50; max-width: 420px; }
.toast.bad { background: var(--bad); }
.badge-src { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 2px 7px; border-radius: 6px; background: var(--neutral-soft); color: var(--muted); }
.badge-src.purespectrum { background: var(--accent-soft); color: var(--accent); }
.badge-src.email { background: var(--ok-soft); color: var(--ok-ink); }
.badge-src.internal { background: var(--warn-soft); color: var(--warn); }
.pill.on_hold { background: var(--neutral-soft); color: var(--muted); }
.pill.open { background: var(--accent-soft); color: var(--accent); }
.pill.reconciled { background: var(--accent-soft); color: var(--accent); }
.pill.billed { background: #E6E1F3; color: #4B3F7A; }
.status-menu button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.status-menu button .tiny { font-weight: 400; }
.page-head .tiny .badge-src { vertical-align: middle; }
.pbar.mini { height: 4px; margin-top: 4px; width: 90px; }
.pbar.done > div { background: var(--ok); }
.projects-table td.name a { font-weight: 600; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 16px; }
.form-grid .field.wide { grid-column: 1 / -1; }
.form-grid .field .row { gap: 6px; flex-wrap: nowrap; }
.form-grid .field .row input { flex: 1 1 auto; }
.new-form { max-width: 980px; }
.setup-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .setup-grid { grid-template-columns: 1fr; } }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }
.save-bar { position: sticky; bottom: 12px; margin-top: 16px; display: flex; align-items: center; gap: 12px; }
.cells-table { width: 100%; }
.cells-table th, .cells-table td { text-align: center; }
.cells-table td.band, .cells-table th:first-child { text-align: left; font-weight: 600; white-space: nowrap; }
.cells-table input.cell-in { width: 80px; text-align: right; display: inline-block; }
.cells-table label.check { margin-left: 6px; color: var(--muted); }
.cells-table tfoot td { border-bottom: 0; }
.mix-table td { border-bottom: 0; padding: 4px 6px; }
.mix-table input { width: 80px; display: inline-block; }
.mix-table select { width: auto; }
.settings-list { display: flex; flex-direction: column; gap: 10px; }
.setting { display: grid; grid-template-columns: 150px 1fr; gap: 12px; align-items: start; }
.setting-ctl input[type=checkbox] { width: 18px; height: 18px; margin-top: 2px; }
.setting-ctl select { width: 100%; }
.kv { width: 100%; }
.kv th { width: 36%; text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; color: var(--muted); }
.kv td, .kv th { padding: 6px 8px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); }
.tile .lbl { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.tile .n { font-family: var(--font-display); font-size: 28px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 4px; }
.tile .n.small-n { font-size: 18px; }
.tile .n .of { font-size: 16px; color: var(--muted); font-weight: 600; }
.tile.big { grid-column: span 2; }
.spark { color: var(--accent); display: block; margin-top: 4px; }
.event-list { list-style: none; margin: 0; padding: 0; }
.event-list li { display: grid; grid-template-columns: 160px 140px 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.event-list .when { color: var(--muted); white-space: nowrap; }
.event-list .who { color: var(--text); font-weight: 600; }
.chip { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 5px; background: var(--neutral-soft); color: var(--muted); margin-right: 4px; text-transform: uppercase; letter-spacing: .03em; }
.note-bar { background: var(--warn-soft); color: var(--warn); border-radius: 10px; padding: 8px 12px; font-size: 13px; margin-bottom: 14px; }
.warn-text { color: var(--warn); font-weight: 700; }
.survey-table td.num, .survey-table th.num { text-align: right; }
.list-search { max-width: 320px; }

.excl-list { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow: auto; }
.excl-list .check { font-weight: 500; }

.inv-grid { display: grid; grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 1000px) { .inv-grid { grid-template-columns: 1fr; } }
.inv-preview iframe { width: 100%; height: 760px; border: 1px solid var(--line); border-radius: 10px; background: #F0F1F9; margin-top: 6px; }
.inv-form .field { margin-bottom: 8px; }
.inv-form .btn-ghost.tiny { padding: 0 6px; font-size: 11px; }

.switch { position: relative; display: inline-block; width: 40px; height: 22px; flex: none; margin-top: 1px; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch .slider { position: absolute; inset: 0; background: var(--neutral-soft); border: 1px solid var(--line); border-radius: 999px; transition: background .15s; cursor: pointer; }
.switch .slider::before { content: ''; position: absolute; width: 16px; height: 16px; left: 2px; top: 2px; background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
.switch input:checked + .slider { background: var(--accent); border-color: var(--accent); }
.switch input:checked + .slider::before { transform: translateX(18px); }
.switch input:disabled + .slider { opacity: .5; cursor: default; }
.switch input:focus-visible + .slider { outline: 2px solid rgba(78,111,152,.45); outline-offset: 2px; }
.setting { grid-template-columns: 128px 1fr; column-gap: 16px; align-items: center; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface); width: 108px; }
.seg-btn { border: 0; border-radius: 0; padding: 0; height: 30px; flex: 1 1 0; justify-content: center; background: transparent; color: var(--muted); display: inline-flex; align-items: center; }
.seg-btn svg { width: 18px; height: 18px; }
.seg-btn + .seg-btn { border-left: 1px solid var(--line); }
.seg-btn:hover { background: var(--hover); color: var(--text); }
.seg-btn.on, .seg-btn.on:hover { background: var(--accent); color: #fff; }
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 10px 0 6px; }
.excl-row span:first-of-type { font-weight: 600; }

.link-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.link-row .lbl { width: 92px; flex: none; font-size: 13px; font-weight: 600; color: var(--muted); }
.link-row code { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; padding: 6px 8px; }
.link-row code.wrap { white-space: normal; word-break: break-all; }

.wave-in { width: 90px; text-align: right; display: inline-block; }

label.dropzone { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px; border: 2px dashed var(--line); border-radius: 10px; cursor: pointer; background: var(--hover); font-size: 14px; }
label.dropzone:hover { border-color: var(--accent); }
label.dropzone span { font-size: 12px; color: var(--muted); }
details summary { cursor: pointer; }

.badge-src.tx { background: #E6E1F3; color: #4B3F7A; }