/* ============================================================
   Store Scout PHONE - cold-call cockpit.
   Reuses the base design system from styles.css and re-skins the
   accent to the aegent cobalt.
   ============================================================ */
:root {
  --accent:    #23c8b6;
  --accent-2:  #5ee6d8;
  --accent-dim:#23c8b622;
  --accent-line:#23c8b642;
  --bg:        #0a0e13;
}
.phone-app .btn-primary {
  background: linear-gradient(180deg, #35e0cd, var(--accent));
  color: #04201c; box-shadow: 0 6px 18px -8px #23c8b690, inset 0 1px 0 #ffffff30;
}
.phone-app .btn-primary:hover { box-shadow: 0 10px 26px -8px #23c8b6b0, inset 0 1px 0 #ffffff45; filter: brightness(1.05); }
.phone-app .bg-glow-a { background: radial-gradient(circle, #23c8b62e, transparent 68%); }
.phone-app .bg-glow-b { background: radial-gradient(circle, #2f8bff22, transparent 66%); }
.phone-app .brand-mark { filter: drop-shadow(0 2px 8px #23c8b640); }

.btn-sm { height: 32px; padding: 0 12px; font-size: 12.5px; }
.brand-pill {
  margin-left: 2px; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-2); background: var(--accent-dim); border: 1px solid var(--accent-line);
  padding: 3px 7px; border-radius: 6px;
}

/* mode switch active color on the phone side */
.phone-app .mode-switch a.phone.active { color: var(--accent-2); }

/* ============================================================
   COCKPIT
   ============================================================ */
.cockpit { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 20px; align-items: start; }
.cq-list { padding: 10px; position: sticky; top: calc(var(--topbar-h) + var(--tabs-h) + 20px); max-height: 78vh; display: flex; flex-direction: column; }
.cq-list-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 6px 10px; }
.cq-count { font-family: var(--mono); font-size: 12px; color: var(--txt-3); }
.cq-rows { overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.cq-row { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 10px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; transition: background .12s, border-color .12s; }
.cq-row:hover { background: var(--panel-2); }
.cq-row.is-active { background: var(--accent-dim); border-color: var(--accent-line); }
.cq-badge { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-family: var(--mono); font-weight: 700; font-size: 13px; border: 1px solid var(--line-2); }
.cq-badge.v-Hot { color: var(--hot); border-color: #ff6a3d55; background: #ff6a3d12; }
.cq-badge.v-Warm { color: var(--warm); border-color: #f5b13c50; background: #f5b13c10; }
.cq-badge.v-Cold { color: var(--cold); border-color: #4fa8ff45; background: #4fa8ff0c; }
.cq-badge.v-Skip { color: var(--skip); }
/* these are <span>s: min-width and text-overflow do nothing on an inline box, so
   long company names ran under the status badge instead of truncating. */
.cq-body { display: block; min-width: 0; overflow: hidden; }
.cq-name { display: block; font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cq-meta { font-size: 11px; color: var(--txt-3); margin-top: 2px; display: flex; align-items: center; gap: 6px; }
.cq-st { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 3px 7px; border-radius: 5px; background: var(--panel-hi); color: var(--txt-3); }
.cq-st.s-interested { color: var(--good); background: #43d18a15; }
.cq-st.s-callback { color: var(--warm); background: #f5b13c15; }
.cq-st.s-dead, .cq-st.s-dnc { color: var(--txt-4); }
.cq-st.s-no_answer, .cq-st.s-wrong_number { color: var(--cold); background: #4fa8ff12; }
.dup-flag { font-size: 9px; font-weight: 700; color: var(--warm); border: 1px solid #f5b13c40; background: #f5b13c12; border-radius: 4px; padding: 1px 5px; text-transform: uppercase; letter-spacing: .03em; cursor: help; }

/* call card */
.cq-main { display: flex; flex-direction: column; gap: 16px; }
.cq-stats { display: flex; gap: 12px; }
.cq-stat { flex: 1; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.cq-stat .n { font-family: var(--mono); font-size: 22px; font-weight: 700; }
.cq-stat .l { font-size: 11px; color: var(--txt-3); margin-top: 2px; }
.call-card { padding: 24px; min-height: 480px; }
.cc-empty { display: grid; place-items: center; height: 420px; text-align: center; color: var(--txt-3); }
.cc-top { display: flex; align-items: flex-start; gap: 16px; }
.cc-title { flex: 1; min-width: 0; }
.cc-company { font-size: 22px; font-weight: 700; letter-spacing: -0.03em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cc-addr { color: var(--txt-3); font-size: 13px; margin-top: 4px; }
.cc-addr a { color: var(--accent-2); text-decoration: none; }
.cc-scorebox { flex: none; width: 76px; height: 64px; border-radius: 13px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid; }
.cc-scorebox .num { font-family: var(--mono); font-size: 25px; font-weight: 700; line-height: 1; }
.cc-scorebox .v { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }

.cc-phone-row { display: flex; align-items: center; gap: 14px; margin: 20px 0; padding: 16px 18px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line-2); }
.cc-phone-num { font-family: var(--mono); font-size: 24px; font-weight: 700; letter-spacing: -0.01em; }
.cc-phone-meta { flex: 1; min-width: 0; }
.cc-ptype { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 3px 8px; border-radius: 6px; margin-left: 8px; vertical-align: middle; }
.pt-direct { color: var(--good); background: #43d18a15; border: 1px solid #43d18a40; }
.pt-mobile { color: var(--accent-2); background: var(--accent-dim); border: 1px solid var(--accent-line); }
.pt-switchboard { color: var(--txt-3); background: var(--panel-hi); border: 1px solid var(--line-2); }
.conf-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.conf-track { flex: 1; max-width: 220px; height: 7px; border-radius: 4px; background: var(--panel-hi); overflow: hidden; }
.conf-bar { height: 100%; border-radius: 4px; background: linear-gradient(90deg, #23c8b680, var(--accent)); }
.conf-pct { font-family: var(--mono); font-size: 12px; color: var(--txt-2); }
.conf-lbl { font-size: 11px; color: var(--txt-3); }
.cc-call-btn { flex: none; }
.call-go { height: 60px; width: 60px; border-radius: 50%; border: none; background: linear-gradient(180deg, #35e0cd, var(--accent)); color: #04201c; display: grid; place-items: center; box-shadow: 0 8px 22px -6px #23c8b6a0; transition: transform .12s, filter .15s; }
.call-go:hover { filter: brightness(1.06); transform: translateY(-1px); }
.call-go svg { width: 26px; height: 26px; }
/* real-call button is inert until a German caller ID exists: greyed, no hover, not clickable */
.call-go.is-off { width: auto; padding: 0 14px; height: 44px; border-radius: 12px; gap: 6px;
  background: #17211f; color: var(--txt-4); box-shadow: none; cursor: not-allowed; }
.call-go.is-off:hover { filter: none; transform: none; }
.call-go.is-off svg { width: 18px; height: 18px; opacity: .5; }
.call-go .go-off-lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }

/* ---- dialer & test view: isolated from the real lead queue ---- */
.dialer-wrap { max-width: 560px; }
/* ---- dialer panel: the single, separate place testing + calling status lives ---- */
.dialer-panel { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.dp-row { display: flex; align-items: center; gap: 12px; }
.dp-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: 0 0 0 4px #ffffff08; }
.dp-dot.on { background: var(--good, #43d18a); }
.dp-dot.warn { background: var(--warm, #f5b13c); }
.dp-dot.off { background: var(--txt-4, #5c6b73); }
.dp-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dp-txt b { font-size: 13.5px; color: var(--txt); }
.dp-txt span { font-size: 12px; color: var(--txt-3); line-height: 1.45; }
.dp-txt span b { color: var(--txt-2); font-weight: 600; }
.dp-bal { font-family: var(--mono); font-size: 12px; color: var(--txt-2); flex: none;
  background: #ffffff08; border-radius: 8px; padding: 4px 8px; }
.dp-dial { display: flex; gap: 8px; align-items: stretch; }
.dp-num { flex: 1; min-width: 0; font-family: var(--mono); letter-spacing: .01em; }
.dp-dial .btn-sm { flex: none; padding: 0 18px; }
.dp-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.dp-hint { font-size: 11.5px; color: var(--txt-4); margin: 0; line-height: 1.4; }
.dp-hint b { color: var(--txt-3); font-weight: 600; }
.dp-hint.warn { color: var(--warm, #f5b13c); }
/* diagnostic trail */
.dp-diag { border-top: 1px solid #ffffff0f; padding-top: 12px; }
.dpd-head { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--txt-4); margin-bottom: 8px; }
.dpd-rows { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto;
  background: #0000001f; border-radius: 10px; padding: 8px 10px; }
.dpd-empty { font-size: 12px; color: var(--txt-4); line-height: 1.5; }
.dpd-row { display: flex; gap: 10px; font-family: var(--mono); font-size: 11.5px; line-height: 1.5; }
.dpd-t { color: var(--txt-4); flex: none; }
.dpd-m { color: var(--txt-2); word-break: break-word; }
.dpd-row.lvl-err .dpd-m { color: #ff8a6a; }
.dpd-row.lvl-ok .dpd-m { color: #5ee6d8; }

.cc-dm { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--txt-2); margin-bottom: 4px; }
.cc-dm svg { width: 15px; height: 15px; flex: none; color: var(--good); }
.cc-dm b { color: var(--txt); } .cc-dm .role { color: var(--txt-3); }
/* trust tags: proven vs. not-yet-proven facts, so nothing looks confirmed unless it is */
.role-unc { color: var(--warm); font-size: 11px; font-weight: 600; cursor: help; }
.ver-ok { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--good); background: #43d18a15; border: 1px solid #43d18a40; border-radius: 5px; padding: 1px 6px; margin-left: 6px; vertical-align: middle; cursor: help; }
.ver-ok svg { width: 11px; height: 11px; color: var(--good); }
.ver-unc { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--warm); background: #f5b13c15; border: 1px solid #f5b13c45; border-radius: 5px; padding: 1px 6px; margin-left: 6px; vertical-align: middle; cursor: help; }
.cc-dm .role-unc { margin-left: 0; }
/* guard: any inline icon that ships without width/height stays small */
.dr-close svg { width: 17px; height: 17px; }
.cc-angle svg, .cc-script svg { width: 15px; height: 15px; }

.cc-angle { padding: 14px 16px; border-radius: 12px; background: linear-gradient(150deg, #23c8b614, #23c8b606); border: 1px solid var(--accent-line); margin: 16px 0; }
.cc-angle .l { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--accent-2); margin-bottom: 6px; }
.cc-angle .t { font-size: 14.5px; line-height: 1.5; }

.cc-script { border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); padding: 16px; font-size: 14px; line-height: 1.65; white-space: pre-wrap; max-height: 190px; overflow-y: auto; }
.cc-script .ph { color: var(--accent-2); font-weight: 600; }

.cc-notes { width: 100%; margin-top: 14px; min-height: 60px; resize: vertical; }
.cc-detail-link { margin-top: 12px; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--accent-2); cursor: pointer; }

/* dispositions */
.disp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.disp { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 13px 8px; border-radius: 11px; border: 1px solid var(--line-2); background: var(--panel); color: var(--txt-2); font-weight: 600; font-size: 12.5px; transition: all .12s; }
.disp svg { width: 20px; height: 20px; }
.disp:hover { border-color: var(--line-hi); transform: translateY(-1px); }
.disp.d-interested:hover { border-color: #43d18a60; color: var(--good); }
.disp.d-callback:hover { border-color: #f5b13c60; color: var(--warm); }
.disp.d-dead:hover, .disp.d-dnc:hover { border-color: #f0546a50; color: var(--bad); }
.disp.d-no_answer:hover, .disp.d-wrong_number:hover { border-color: #4fa8ff55; color: var(--cold); }

/* ============================================================
   FIND LEADS
   ============================================================ */
.find-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: 20px; align-items: start; }
.find-form { padding: 22px; }
.find-side { padding: 22px; min-height: 360px; position: sticky; top: calc(var(--topbar-h) + var(--tabs-h) + 20px); }
.ff-sec-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--txt-3); margin: 18px 0 12px; }
.find-form > .ff-sec-title:first-child { margin-top: 0; }
.ff-sec-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 6px; }
.ff-sec-row .ff-sec-title { margin: 0; }
.ff-note { font-size: 11.5px; color: var(--txt-3); line-height: 1.55; margin: 14px 0 0; }
.mode-row { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 14px; }
.mode-row .field { margin-top: 0; }
.mode-num { flex: none; width: 110px; }
.src-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.src { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--bg-2); cursor: pointer; }
.src.on { border-color: var(--accent-line); }
.src input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.src-body { flex: 1; min-width: 0; } .src-body b { font-size: 13.5px; } .src-body i { display: block; font-style: normal; font-size: 11.5px; color: var(--txt-3); margin-top: 2px; }
.src-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 3px 7px; border-radius: 5px; background: #43d18a15; color: var(--good); }
.src-tag.key { background: var(--panel-hi); color: var(--txt-3); }

/* ============================================================
   CAMPAIGN & SCORING
   ============================================================ */
.camp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.camp-card { padding: 22px; }
.camp-wide { grid-column: 1 / -1; }
.camp-help { font-size: 12px; color: var(--txt-3); margin: 0 0 16px; line-height: 1.5; }
.ver-pill { font-family: var(--mono); font-size: 11px; color: var(--accent-2); background: var(--accent-dim); border: 1px solid var(--accent-line); padding: 2px 7px; border-radius: 5px; margin-left: 8px; }
.weights { display: flex; flex-direction: column; gap: 16px; }
.weight { display: grid; grid-template-columns: 150px 1fr 40px; gap: 12px; align-items: center; }
.weight .wl { font-size: 12.5px; font-weight: 600; color: var(--txt-2); }
.weight input[type=range] { width: 100%; accent-color: var(--accent); }
.weight .wv { font-family: var(--mono); font-size: 12px; color: var(--txt-2); text-align: right; }
.thresholds { display: flex; flex-direction: column; gap: 14px; }
.thr { display: grid; grid-template-columns: 90px 1fr 46px; gap: 12px; align-items: center; }
.thr .tl { font-size: 12.5px; font-weight: 700; }
.thr input[type=range] { width: 100%; accent-color: var(--accent); }
.code-area { min-height: 200px; resize: vertical; font-family: var(--mono); font-size: 13px; line-height: 1.6; }

/* ---- Advanced settings (Find leads): collapsible research + scoring ---- */
.adv-region { margin-top: 22px; }
.adv-toggle { display: flex; align-items: center; gap: 11px; width: 100%; padding: 14px 16px;
  background: var(--surface-2, rgba(255,255,255,.03)); border: 1px solid var(--border, rgba(255,255,255,.08));
  border-radius: 12px; color: var(--txt-1, #e7edf3); font: inherit; cursor: pointer; text-align: left;
  transition: border-color .15s, background .15s; }
.adv-toggle:hover { border-color: var(--accent); background: rgba(35,200,182,.06); }
.adv-toggle .adv-chev { flex: none; color: var(--txt-3, #8aa); transition: transform .18s ease; }
.adv-toggle.is-open .adv-chev { transform: rotate(90deg); color: var(--accent); }
.adv-toggle-title { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.adv-toggle .adv-hint { margin-left: auto; font-style: normal; font-weight: 500; font-size: 12.5px; color: var(--txt-3, #8aa); }
@media (max-width: 620px) { .adv-toggle .adv-hint { display: none; } }
.adv-panel { margin-top: 14px; }
.adv-region-sub { margin: 0 0 16px; font-size: 13px; line-height: 1.55; color: var(--txt-3, #8aa); max-width: 780px; }
.adv-note { min-height: 104px; }

/* ---- daily research quota (Find leads) ---- */
.ff-quota { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--panel-2); }
.ff-quota .ffq-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--txt-2); }
.ff-quota .ffq-row b { color: var(--txt); font-variant-numeric: tabular-nums; }
.ff-quota .ffq-bar { height: 6px; border-radius: 4px; background: var(--line-2); margin: 8px 0 6px; overflow: hidden; }
.ff-quota .ffq-bar span { display: block; height: 100%; background: var(--accent); border-radius: 4px; transition: width .3s; }
.ff-quota .ffq-note { font-size: 12px; color: var(--txt-3); }
.ff-quota.is-warn .ffq-bar span { background: var(--warm); }
.ff-quota.is-warn { border-color: #f5b13c55; }
.ff-quota.is-full { border-color: #f0546a66; background: #f0546a12; }
.ff-quota.is-full .ffq-bar span { background: #f0546a; }
.ff-quota.is-full .ffq-note { color: #ff8a8a; }

/* ---- per-user daily lead cap (Account) ---- */
.au-cap { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--txt-3); white-space: nowrap; }
.au-cap .au-capin { width: 74px; height: 30px; padding: 0 8px; font-size: 13px; }
.au-cap-unl { font-style: italic; }

/* ============================================================
   LOGS
   ============================================================ */
.logs-wrap { display: flex; flex-direction: column; gap: 20px; }
.log-card { padding: 20px 22px; }
.log-table { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; }
.log-row { display: grid; gap: 12px; align-items: center; padding: 11px 12px; border-radius: 9px; font-size: 12.5px; border: 1px solid transparent; }
.log-row.head { color: var(--txt-3); font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; border-bottom: 1px solid var(--line); border-radius: 0; }
.log-row:not(.head):hover { background: var(--panel-2); }
.runs-cols { grid-template-columns: 150px 1fr 90px 90px 70px; }
.calls-cols { grid-template-columns: 150px 1fr 120px 90px 90px; }
.log-mono { font-family: var(--mono); color: var(--txt-3); font-size: 11.5px; }
.log-disp { font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; padding: 3px 7px; border-radius: 5px; display: inline-block; }
.log-disp.interested { color: var(--good); background: #43d18a15; }
.log-disp.callback { color: var(--warm); background: #f5b13c15; }
.log-disp.dead, .log-disp.dnc { color: var(--txt-4); background: var(--panel-hi); }
.log-disp.no_answer, .log-disp.wrong_number { color: var(--cold); background: #4fa8ff12; }

/* ============================================================
   DO-NOT-CALL
   ============================================================ */
.dnc-wrap { padding: 20px 22px; }
.dnc-add { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.dnc-add .txt { flex: 1; min-width: 160px; }
.dnc-rows { display: flex; flex-direction: column; gap: 6px; }
.dnc-item { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 9px; background: var(--bg-2); border: 1px solid var(--line); }
.dnc-item .p { font-family: var(--mono); font-weight: 600; }
.dnc-item .r { flex: 1; font-size: 12px; color: var(--txt-3); }
.dnc-item .t { font-size: 11px; color: var(--txt-4); font-family: var(--mono); }
.dnc-item button { border: none; background: transparent; color: var(--txt-4); cursor: pointer; font-size: 16px; }
.dnc-item button:hover { color: var(--bad); }
/* full contact cards for do-not-call leads */
.dnc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.dnc-card { border: 1px solid var(--line-2); border-radius: 12px; background: var(--bg-2); padding: 15px 16px; }
.dnc-card-top { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.dnc-card-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dnc-card-id b { font-size: 14.5px; }
.dnc-card-id span { font-size: 12px; color: var(--txt-3); }
.dnc-badge { flex: none; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: #ff8a8a; background: #f0546a18; border: 1px solid #f0546a44; border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.dnc-card-rows { display: flex; flex-direction: column; gap: 7px; }
.dnc-f { display: flex; gap: 10px; font-size: 13px; }
.dnc-fk { flex: none; width: 108px; color: var(--txt-3); }
.dnc-fv { flex: 1; min-width: 0; color: var(--txt); word-break: break-word; }
.dnc-card-reason { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line-2); font-size: 12.5px; color: var(--txt-3); }
.dnc-num-list { display: flex; flex-direction: column; gap: 6px; }

/* ============================================================
   LEAD DETAIL DRAWER (reuses base .drawer / .dr-section)
   ============================================================ */
.d-kv { display: grid; grid-template-columns: 130px 1fr; gap: 8px 14px; font-size: 13px; }
.d-kv .k { color: var(--txt-3); }
.d-kv .v { color: var(--txt); }
.conf-break { display: flex; flex-direction: column; gap: 10px; }
.cb-item { display: grid; grid-template-columns: 170px 1fr 42px; gap: 10px; align-items: center; }
.cb-item .cbl { font-size: 12px; color: var(--txt-2); }
.cb-item .cbt { height: 7px; border-radius: 4px; background: var(--panel-hi); overflow: hidden; }
.cb-item .cbf { height: 100%; background: linear-gradient(90deg, #23c8b680, var(--accent)); }
.cb-item .cbv { font-family: var(--mono); font-size: 11.5px; color: var(--txt-3); text-align: right; }
.src-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; padding: 4px 9px; border-radius: 6px; background: var(--panel-hi); border: 1px solid var(--line-2); color: var(--txt-2); margin: 0 6px 6px 0; }
.src-pill .agree { color: var(--good); font-family: var(--mono); }
.dup-note { padding: 12px 14px; border-radius: 10px; background: #f5b13c10; border: 1px solid #f5b13c35; font-size: 12.5px; color: var(--txt-2); }
.dup-note b { color: var(--warm); }
/* provenance / proof list */
.prov-item { padding: 9px 11px; border-radius: 9px; background: var(--bg-2); border: 1px solid var(--line); margin-bottom: 8px; }
.prov-top { display: flex; align-items: center; gap: 8px; }
.prov-field { font-size: 11px; font-weight: 600; text-transform: capitalize; color: var(--txt-2); min-width: 62px; }
.prov-src { font-size: 11px; font-family: var(--mono); color: var(--accent); text-decoration: none; }
.prov-src:hover { text-decoration: underline; }
.prov-badge { margin-left: auto; font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.prov-badge.ok { color: var(--good); background: color-mix(in srgb, var(--good) 15%, transparent); }
.prov-badge.unc { color: var(--warm); background: #f5b13c1a; }
.prov-quote { margin-top: 6px; font-size: 12px; color: var(--txt-3); font-style: italic; line-height: 1.4; }
.call-hist { display: flex; flex-direction: column; gap: 8px; }
.ch-item { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 8px; background: var(--bg-2); border: 1px solid var(--line); font-size: 12.5px; }
.ch-item .ch-time { font-family: var(--mono); color: var(--txt-3); font-size: 11px; }

/* freshness + change surfaces */
.cq-stale { color: var(--warm); font-weight: 600; }
.cq-changed { color: var(--accent-2); font-weight: 600; }
.dr-fresh { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; padding: 7px 11px; border-radius: 9px; margin: 4px 0 14px; }
.dr-fresh svg { width: 14px; height: 14px; }
.dr-fresh.is-fresh { color: var(--good); background: color-mix(in srgb, var(--good) 12%, transparent); border: 1px solid color-mix(in srgb, var(--good) 30%, transparent); }
.dr-fresh.is-stale { color: var(--warm); background: #f5b13c14; border: 1px solid #f5b13c40; }
.chg-item { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 9px 11px; border-radius: 9px; background: var(--bg-2); border: 1px solid var(--line); margin-bottom: 8px; font-size: 12.5px; color: var(--txt-2); }
.chg-item.conflict { border-color: #f5b13c40; background: #f5b13c10; }
.chg-field { font-size: 11px; font-weight: 700; text-transform: capitalize; color: var(--txt-3); min-width: 54px; }
.chg-old { color: var(--txt-4); text-decoration: line-through; }
.chg-new { color: var(--good); font-weight: 600; }
.chg-arrow { color: var(--txt-4); }

/* calibration card */
.cal-card .cal-body { padding: 2px 0; }
.cal-empty, .cal-thin { color: var(--txt-4); font-size: 12.5px; }
.cal-verdict { font-size: 13px; line-height: 1.5; padding: 11px 13px; border-radius: 10px; margin-bottom: 14px; }
.cal-verdict.ok { color: var(--good); background: color-mix(in srgb, var(--good) 12%, transparent); border: 1px solid color-mix(in srgb, var(--good) 28%, transparent); }
.cal-verdict.bad { color: var(--hot); background: #ff6a3d12; border: 1px solid #ff6a3d40; }
.cal-verdict.neu { color: var(--txt-2); background: var(--panel); border: 1px solid var(--line-2); }
.cal-table { display: flex; flex-direction: column; gap: 4px; }
.cal-row { display: grid; grid-template-columns: 74px 1fr 1fr 1.4fr .8fr; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; background: var(--bg-2); border: 1px solid var(--line); font-size: 12.5px; color: var(--txt-2); }
.cal-row.head { background: transparent; border: none; color: var(--txt-3); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; padding-bottom: 2px; }
.cal-rate { font-family: var(--mono); font-weight: 700; color: var(--txt); }
.cal-note { font-size: 11.5px; color: var(--txt-4); margin-top: 10px; line-height: 1.5; }
.cal-sub { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--txt-3); margin: 18px 0 9px; }
.cal-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.cal-pill { font-size: 12px; padding: 5px 10px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line-2); color: var(--txt-2); }
.cal-pill b { color: var(--accent-2); text-transform: capitalize; }
.cal-sugg { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.cal-sugg li { font-size: 12.5px; color: var(--txt-2); line-height: 1.5; }

/* callback quick chips */
.cb-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.cb-chip { padding: 8px 12px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--panel); color: var(--txt-2); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.cb-chip:hover, .cb-chip.on { border-color: var(--accent-line); color: var(--accent-2); background: var(--accent-dim); }

@media (max-width: 1080px) {
  .cockpit { grid-template-columns: 1fr; }
  .cq-list { position: static; max-height: none; }
  .find-grid, .camp-grid { grid-template-columns: 1fr; }
  .find-side { position: static; }
  .disp-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- account: user chip in the topbar + team management ---- */
/* Telnyx balance pill in the header: always visible, tabular so digits do not
   jitter as it ticks down. Colour warns as the runway gets short. */
.bal-pill { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px;
  border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line-2); color: var(--txt-2);
  font-size: 13px; font-weight: 600; cursor: pointer; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bal-pill:hover { border-color: var(--line-hi); color: var(--txt); }
.bal-pill .bp-ico { display: grid; place-items: center; color: var(--good); }
.bal-pill .bp-ico svg { width: 15px; height: 15px; }
.bal-pill .bp-val { color: var(--txt); }
.bal-pill .bp-delta { color: var(--txt-3); font-size: 11.5px; }
.bal-pill.mid { border-color: #f5b13c55; }
.bal-pill.mid .bp-ico { color: var(--warm); }
.bal-pill.low { border-color: #f0546a66; background: #f0546a12; }
.bal-pill.low .bp-ico, .bal-pill.low .bp-val { color: #ff8a8a; }
@media (max-width: 640px) { .bal-pill .bp-delta { display: none; } .bal-pill { height: 32px; padding: 0 10px; } }

/* ---- clock in/out pill (top bar) ---- */
.clock-pill { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px;
  border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line-2); color: var(--txt-2);
  font-size: 13px; font-weight: 600; cursor: pointer; font-variant-numeric: tabular-nums; white-space: nowrap; }
.clock-pill:hover { border-color: var(--line-hi); color: var(--txt); }
.clock-pill .cp-ico { display: grid; place-items: center; color: var(--txt-3); }
.clock-pill .cp-ico svg { width: 15px; height: 15px; }
.clock-pill .cp-time { color: var(--txt); font-weight: 700; }
.clock-pill.is-in { border-color: #23c8b655; background: rgba(35,200,182,.10); color: var(--txt); }
.clock-pill.is-in .cp-lbl { color: var(--accent); }
.clock-pill .cp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(35,200,182,.55); animation: cpPulse 1.8s infinite; }
@keyframes cpPulse { 0% { box-shadow: 0 0 0 0 rgba(35,200,182,.5); } 70% { box-shadow: 0 0 0 7px rgba(35,200,182,0); } 100% { box-shadow: 0 0 0 0 rgba(35,200,182,0); } }
@media (max-width: 640px) { .clock-pill .cp-lbl { display: none; } .clock-pill { height: 32px; padding: 0 10px; } }

/* ---- Zeiten (timesheet) ---- */
.tm-seg { margin-bottom: 16px; }
.tm-card { padding: 18px; margin-bottom: 14px; }
.tm-status { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--line-2); }
.tm-status > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tm-status b { font-size: 14.5px; }
.tm-status span span { font-variant-numeric: tabular-nums; }
.tm-status > div > span { font-size: 12.5px; color: var(--txt-3); }
.tm-status .tm-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.tm-status.in .tm-dot { background: var(--accent); box-shadow: 0 0 0 0 rgba(35,200,182,.5); animation: cpPulse 1.8s infinite; }
.tm-status.out .tm-dot { background: var(--txt-3); opacity: .5; }
.tm-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tm-metric { background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; }
.tm-metric .tm-k { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--txt-3); }
.tm-metric .tm-v { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tm-list { display: flex; flex-direction: column; }
.tm-row { display: grid; grid-template-columns: 1.4fr 1fr .8fr 1.4fr; gap: 10px; align-items: center; padding: 11px 4px; border-bottom: 1px solid var(--line-2); font-size: 13px; }
.tm-row:last-child { border-bottom: none; }
.tm-row > div { min-width: 0; }
.tm-row-day { font-weight: 600; }
.tm-row-span, .tm-row-dur { color: var(--txt-2); font-variant-numeric: tabular-nums; }
.tm-row-calls { color: var(--txt-3); text-align: right; }
.tm-row.flagged { background: #f0546a0d; border-radius: 8px; }
.tm-flag { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; background: #f0546a1c; color: #ff8a8a; }
.tm-flag.warn { background: #f5b13c1c; color: var(--warm); }
.tm-empty { padding: 20px 4px; color: var(--txt-3); font-size: 13px; }
.tm-user-head { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; margin-bottom: 6px; border-bottom: 1px solid var(--line-2); }
.tm-user-head b { font-size: 15px; }
.tm-user-total { margin-left: auto; font-size: 12.5px; color: var(--txt-3); font-variant-numeric: tabular-nums; }
.tm-live-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--accent); font-weight: 600; }
.tm-live-tag .tm-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: cpPulse 1.8s infinite; }
@media (max-width: 640px) {
  .tm-metrics { grid-template-columns: 1fr; }
  .tm-row { grid-template-columns: 1fr auto; row-gap: 4px; }
  .tm-row-span { grid-column: 1; } .tm-row-dur { grid-column: 2; text-align: right; }
  .tm-row-calls { grid-column: 1 / -1; text-align: left; }
}

.user-chip { display: flex; align-items: center; }
.uc-btn { display: flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--line-2);
  border-radius: 10px; padding: 5px 10px 5px 5px; cursor: pointer; color: var(--txt-2); transition: border-color .12s, background .12s; }
.uc-btn:hover { border-color: var(--accent-line); background: var(--panel-2); }
.uc-av { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; font-size: 11px;
  font-weight: 800; color: #04201c; background: linear-gradient(180deg, #35e0cd, var(--accent)); }
.uc-name { font-size: 12.5px; font-weight: 600; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uc-role { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--accent-2);
  background: var(--accent-dim); border: 1px solid var(--accent-line); border-radius: 5px; padding: 2px 5px; }

/* ---- Übersicht (admin dashboard) ---- */
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.dash-metric { background: var(--panel); border: 1px solid var(--line-2); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.dash-metric .dash-k { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--txt-3); }
.dash-metric .dash-v { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.dash-metric.good .dash-v { color: var(--accent); }
.dash-person { padding: 18px; margin-top: 14px; }
.dash-person-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line-2); }
.dash-person-head b { font-size: 16px; }
.dash-pay { margin-left: auto; font-size: 16px; font-weight: 800; color: var(--txt); font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 6px; }
.dash-pay em { font-style: normal; font-size: 11.5px; font-weight: 500; color: var(--txt-3); }
.dash-person-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.dash-stat { background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 10px; padding: 11px 13px; display: flex; flex-direction: column; gap: 3px; }
.dash-stat .dash-k { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--txt-3); }
.dash-stat .dash-v { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dash-pct .dash-v { color: var(--txt); }
.dash-pct.good .dash-v { color: var(--accent); }
.dash-pct.warn .dash-v { color: var(--warm); }
.dash-pct.bad .dash-v { color: #ff8a8a; }
.dash-bar { height: 8px; border-radius: 5px; background: var(--line-2); overflow: hidden; margin: 14px 0 8px; }
.dash-bar span { display: block; height: 100%; border-radius: 5px; background: var(--txt-3); transition: width .3s; }
.dash-bar span.good { background: var(--accent); }
.dash-bar span.warn { background: var(--warm); }
.dash-bar span.bad { background: #f0546a; }
.dash-gaps { margin-top: 12px; }
.dash-gaps-none { font-size: 12.5px; color: var(--txt-3); padding: 8px 0; }
.dash-gaps.flagged { border: 1px solid #f5b13c44; background: #f5b13c0d; border-radius: 10px; padding: 12px 14px; }
.dash-gaps-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 8px; }
.dash-gaps-head span { font-size: 13px; font-weight: 700; color: var(--warm); }
.dash-gaps-head em { font-style: normal; font-size: 11.5px; color: var(--txt-3); }
.dash-gaps-list { display: flex; flex-direction: column; gap: 2px; }
.dash-gap { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid var(--line-2); font-size: 12.5px; }
.dash-gap:first-child { border-top: none; }
.dash-gap span { color: var(--txt-2); }
.dash-gap b { color: var(--warm); font-variant-numeric: tabular-nums; }
.dash-total { padding: 16px 18px; margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.dash-total span { font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--txt-3); }
.dash-total b { font-size: 15px; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .dash-pay { font-size: 15px; } .dash-total { flex-direction: column; align-items: flex-start; gap: 4px; } }

/* ---- Account collapsible sections (Zeiten / Dialer / Logs) ---- */
.acc-sec { margin-top: 14px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel); overflow: hidden; }
.acc-sec-head { display: flex; align-items: center; gap: 11px; width: 100%; padding: 15px 16px; background: none;
  border: none; color: var(--txt); font: inherit; cursor: pointer; text-align: left; }
.acc-sec-head:hover { background: rgba(255,255,255,.02); }
.acc-sec-head .acc-chev { flex: none; color: var(--txt-3); transition: transform .18s ease; }
.acc-sec.is-open .acc-sec-head .acc-chev { transform: rotate(90deg); color: var(--accent); }
.acc-sec-head .acc-ic { flex: none; color: var(--txt-2); }
.acc-sec.is-open .acc-sec-head .acc-ic { color: var(--accent); }
.acc-sec-title { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.acc-sec-hint { margin-left: auto; font-style: normal; font-weight: 500; font-size: 12.5px; color: var(--txt-3); }
@media (max-width: 620px) { .acc-sec-hint { display: none; } }
.acc-sec-body { padding: 4px 16px 18px; border-top: 1px solid var(--line-2); }

.acct-me { padding: 16px 18px; margin-bottom: 16px; }
.acct-me-row { display: flex; align-items: center; gap: 14px; }
.acct-av { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 16px;
  font-weight: 800; color: #04201c; background: linear-gradient(180deg, #35e0cd, var(--accent)); flex: none; }
.acct-me-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.acct-me-txt b { font-size: 15px; }
.acct-me-txt span { font-size: 12.5px; color: var(--txt-3); }
.acct-users { padding: 18px; }
.acct-user-rows { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.acct-user { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 10px;
  background: var(--panel); border: 1px solid var(--line); }
.au-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.au-id b { font-size: 13.5px; } .au-id span { font-size: 11.5px; color: var(--txt-4); }
.au-role { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--txt-3);
  background: var(--panel-hi); border: 1px solid var(--line-2); border-radius: 5px; padding: 3px 7px; }
.au-toggle { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--txt-3); cursor: pointer; }
.au-you { font-size: 11px; color: var(--txt-4); font-style: italic; }
.acct-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.acct-add .txt { flex: 1; min-width: 120px; }
.acct-add #nuRole { flex: 0 0 auto; min-width: 90px; }
.acct-cc { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--txt-3); white-space: nowrap; }

/* ============================================================
   iOS PWA + PHONE LAYOUT
   Safe areas (Dynamic Island / notch / home indicator), a
   thumb-reachable bottom nav, and a queue-list -> call-card flow
   so the whole pipeline works one-handed. Desktop is unchanged.
   ============================================================ */

/* Paint the full canvas so the home-indicator strip never shows a grey
   system bar. Rule from WEBAPP-PROXY-GUIDE: never put an explicit height
   on <html> under viewport-fit=cover, but do give it a background. */
html { height: auto; background: var(--bg); }
/* 100lvh, NOT dvh: iOS 26 clips dvh/fixed layers ~59pt above the screen bottom,
   which reintroduces the grey home-indicator bar. Flow body + lvh is the fix. */
body { min-height: 100vh; min-height: 100lvh; }

/* Top bar drops below the Dynamic Island / notch and clears side insets. */
.topbar {
  height: calc(var(--topbar-h) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  padding-bottom: 0;
  padding-left: max(clamp(16px, 3vw, 32px), env(safe-area-inset-left));
  padding-right: max(clamp(16px, 3vw, 32px), env(safe-area-inset-right));
}
/* Tabs (desktop / tablet) stick just under the taller top bar. */
.tabs {
  top: calc(var(--topbar-h) + env(safe-area-inset-top));
  padding-left: max(clamp(16px, 3vw, 32px), env(safe-area-inset-left));
  padding-right: max(clamp(16px, 3vw, 32px), env(safe-area-inset-right));
}

/* Hidden until the phone breakpoint. */
.mobnav { display: none; }
.cq-back { display: none; }

/* --- "More" bottom sheet (works at any width, only opened on phone) --- */
.msheet-scrim {
  position: fixed; inset: 0; z-index: 120; background: rgba(4,6,10,.6);
  backdrop-filter: blur(3px); display: flex; align-items: flex-end;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.msheet-scrim.show { opacity: 1; pointer-events: auto; }
.msheet {
  width: 100%; background: var(--bg-2); border-top: 1px solid var(--line-2);
  border-radius: 20px 20px 0 0; box-shadow: 0 -22px 60px -30px #000c;
  padding: 6px 14px calc(14px + env(safe-area-inset-bottom));
  transform: translateY(100%); transition: transform .28s var(--ease-out);
}
.msheet-scrim.show .msheet { transform: none; }
.msheet-grab { width: 40px; height: 4px; border-radius: 3px; background: var(--line-hi); margin: 9px auto 10px; }
.ms-item {
  display: flex; align-items: center; gap: 14px; width: 100%;
  background: none; border: none; color: var(--txt); text-align: left;
  font-size: 15px; font-weight: 550; padding: 15px 8px; border-radius: 12px;
  -webkit-tap-highlight-color: transparent;
}
.ms-item + .ms-item { border-top: 1px solid var(--line); }
.ms-item svg { width: 21px; height: 21px; color: var(--accent-2); flex: none; }
.ms-item:active { background: var(--panel-2); }

@media (max-width: 760px) {
  /* --- chrome --- */
  .tabs { display: none; }        /* replaced by the bottom nav */
  #findCta { display: none; }     /* the Find tab already covers this */
  /* top bar: brand on the left, the pills on the right, nothing in the middle,
     so it can never overflow the screen and cause a sideways scroll */
  .topbar { gap: 10px; grid-template-columns: 1fr auto; }
  .topbar-mid { display: none; }
  .topbar-right { gap: 8px; }
  .uc-name, .uc-role { display: none; }   /* avatar only, keeps the row narrow */
  .brand-pill { display: none; }

  /* "What to search": stack the side-by-side fields so nothing is cramped */
  .mode-row { flex-direction: column; align-items: stretch; gap: 12px; }
  .mode-num { width: 100%; }
  /* the "Ready to crawl" placeholder is desktop chrome; on a phone it is just an
     empty box, so only show the side panel once a crawl is actually running */
  .find-side { min-height: 0; }
  .find-side:has(.scout-progress[hidden]) { display: none; }

  /* Account member rows: let them wrap instead of forcing a too-wide row */
  .acct-user { flex-wrap: wrap; row-gap: 10px; }
  .au-id { flex: 1 1 100%; }

  /* dashboard person header wraps so the pay drops under the name */
  .dash-person-head { flex-wrap: wrap; }
  .dash-pay { margin-left: 0; }

  .stage {
    padding: 14px max(14px, env(safe-area-inset-left))
             calc(80px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-right));
  }
  .view-head { margin-bottom: 16px; }
  .view-title { font-size: 22px; }
  .view-sub { font-size: 12.5px; }

  /* --- bottom nav --- */
  .mobnav {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: color-mix(in srgb, var(--bg) 90%, transparent);
    backdrop-filter: blur(20px) saturate(1.3);
    border-top: 1px solid var(--line);
    padding: 7px max(6px, env(safe-area-inset-left))
             calc(6px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-right));
  }
  .mn-btn {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px;
    background: none; border: none; color: var(--txt-4);
    font-size: 10.5px; font-weight: 600; letter-spacing: -0.01em; padding: 5px 2px;
    border-radius: 12px; -webkit-tap-highlight-color: transparent;
  }
  .mn-btn svg { width: 23px; height: 23px; opacity: .9; }
  .mn-btn.is-active { color: var(--accent-2); }
  .mn-btn.is-active svg { opacity: 1; }
  .mn-count {
    position: absolute; top: -1px; left: 54%;
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
    background: var(--accent); color: #04201c; font-family: var(--mono);
    font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
  }
  .mn-count:empty { display: none; }

  /* --- queue cockpit becomes a list <-> call-card flow --- */
  .cockpit { grid-template-columns: 1fr; gap: 0; }
  .cq-list { position: static; max-height: none; padding: 6px; }
  .cq-main { display: none; }
  .cockpit.mob-card .cq-list { display: none; }
  .cockpit.mob-card .cq-main { display: flex; }
  .cockpit.mob-card .cq-stats { display: none; }   /* focus the card */
  .cq-back {
    display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
    background: var(--panel); border: 1px solid var(--line-2); color: var(--txt-2);
    font-size: 13px; font-weight: 600; padding: 9px 14px; border-radius: 11px;
    margin-bottom: 4px; -webkit-tap-highlight-color: transparent;
  }
  .cq-back svg { width: 16px; height: 16px; }
  .call-card { padding: 18px 15px; min-height: 0; }
  .cq-row { padding: 13px 10px; }          /* bigger touch target */
  .cq-name { font-size: 14.5px; }
  .cc-company { font-size: 20px; }
  .cc-phone-num { font-size: 21px; }
  /* dispositions: two clear rows of large targets */
  .disp-grid { grid-template-columns: repeat(2, 1fr); gap: 9px; }
  .disp { padding: 15px 8px; font-size: 13px; }

  /* --- overlays clear the nav + insets --- */
  .toasts { left: 12px; right: 12px; bottom: calc(86px + env(safe-area-inset-bottom)); align-items: stretch; }
  .drawer { width: 100vw; padding-top: env(safe-area-inset-top); }
  .modal-scrim {
    padding: 20px max(20px, env(safe-area-inset-left))
             calc(20px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-right));
  }
}

/* ============================================================
   Quality gate: Einzelunternehmen switch, parked leads, legal form
   ============================================================ */
/* custom switch (no native checkbox) */
.adv-switch-row { display: flex; align-items: flex-start; gap: 13px; margin-top: 16px;
  padding-top: 15px; border-top: 1px solid var(--line, #1c2630); }
.adv-switch { flex: none; width: 44px; height: 26px; padding: 0; border: none; background: none;
  cursor: pointer; margin-top: 1px; }
.adv-switch-track { display: block; width: 44px; height: 26px; border-radius: 999px;
  background: var(--panel-hi, #1a232b); border: 1px solid var(--line-2, #263440);
  transition: background .16s ease, border-color .16s ease; position: relative; }
.adv-switch-knob { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--txt-3, #8aa); transition: transform .16s ease, background .16s ease; }
.adv-switch.is-on .adv-switch-track { background: var(--accent-dim); border-color: var(--accent-line); }
.adv-switch.is-on .adv-switch-knob { transform: translateX(18px); background: var(--accent); }
.adv-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 999px; }
.adv-switch-txt { display: flex; flex-direction: column; gap: 3px; }
.adv-switch-title { font-size: 13.5px; font-weight: 700; color: var(--txt, #e6edf3); }
.adv-switch-hint { font-style: normal; font-size: 12px; line-height: 1.5; color: var(--txt-3, #8aa); max-width: 560px; }

/* parked lead rows in the queue */
.cq-row.is-parked { opacity: .72; }
.cq-row.is-parked .cq-badge { opacity: .6; }
.cq-st.s-parked { color: var(--warm, #f5b13c); background: #f5b13c14; }

/* legal form chip on the call card */
.cc-lf { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .02em;
  color: var(--txt-2, #c4cdd6); background: var(--panel-hi, #1a232b);
  border: 1px solid var(--line-2, #263440); border-radius: 5px; padding: 0 6px; vertical-align: middle; }

/* parked notice banner on the card */
.cc-parked { margin: 12px 0 4px; padding: 11px 14px; border-radius: 12px;
  background: #f5b13c10; border: 1px solid #f5b13c33; }
.cc-parked b { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--warm, #f5b13c); margin-bottom: 3px; }
.cc-parked span { font-size: 12.5px; line-height: 1.5; color: var(--txt-3, #8aa); }

/* dashboard park breakdown */
.dash-park { margin-top: 10px; font-size: 12.5px; color: var(--txt-3, #8aa); line-height: 1.9; }
.dash-park-tag { display: inline-block; font-weight: 700; color: var(--txt-2, #c4cdd6);
  background: var(--panel-hi, #1a232b); border: 1px solid var(--line-2, #263440);
  border-radius: 6px; padding: 1px 8px; margin-right: 4px; }
.dash-park em { font-style: normal; color: var(--txt-4, #5c6b73); }