/* =====================================================================
   v3 — PWA chrome (install, update, offline), quick search, dark theme.
   ===================================================================== */
.skip-link { position: absolute; inset-inline-start: 12px; top: -48px; z-index: 2000; background: var(--primary); color: #fff; padding: 8px 14px; border-radius: 10px; }
.skip-link:focus { top: 12px; }
.boot { min-height: 100dvh; display: grid; place-content: center; justify-items: center; gap: 10px; color: var(--primary-strong); font-weight: 600; letter-spacing: 1px; }
.boot img { border-radius: 18px; box-shadow: 0 12px 30px -14px rgb(10 74 75 / 70%); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(.94); opacity: .8; } }
.logo-img { border-radius: 10px; box-shadow: 0 6px 14px -6px rgb(15 110 110 / 60%); flex-shrink: 0; }
kbd { font: 600 11px/1 var(--font); padding: 3px 6px; border-radius: 6px; background: var(--surface); border: 1px solid var(--border-strong); color: var(--muted); direction: ltr; }

/* quick search trigger */
.search-trigger { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 12px; margin: 4px 0 6px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--border); color: var(--faint); font-size: 13.5px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.search-trigger:hover { border-color: var(--border-strong); }
.search-trigger:focus-visible { outline: 2px solid var(--primary); }
.search-trigger span { flex: 1; }
.search-trigger .ico { width: 18px; height: 18px; }
.search-trigger.wide { margin-bottom: 14px; padding: 12px 14px; }

/* install call-to-action */
.install-cta { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; margin: 8px 0; border-radius: 12px; cursor: pointer;
  background: linear-gradient(135deg, var(--primary-soft), transparent); color: var(--primary-strong); font-weight: 600; font-size: 13.5px; border: 1px dashed rgb(15 110 110 / 35%); }
.install-cta:hover { background: var(--primary-soft); }
.install-cta:focus-visible { outline: 2px solid var(--primary); }

/* update + network bars */
.update-bar { position: fixed; z-index: 1500; inset-inline: 16px; bottom: 20px; margin-inline: auto; max-width: 520px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: #10302e; color: #fff; padding: 10px 12px 10px 16px; border-radius: 14px; box-shadow: 0 18px 40px -16px rgb(0 0 0 / 50%); animation: fadeIn .2s ease-out; }
.update-bar .btn.light { background: #fff; color: var(--primary-strong); border-color: #fff; }
@media (max-width: 900px) { .update-bar { bottom: 80px; } }
.net-bar { position: sticky; top: 0; z-index: 1400; text-align: center; padding: 6px 12px; font-size: 13px; background: var(--warning-soft); color: var(--warning); border-bottom: 1px solid #f3dcb0; }

/* palette */
.palette .search { position: relative; display: block; }
.palette .search .ico { position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%); color: var(--faint); width: 20px; height: 20px; }
.palette .search input { padding-inline-start: 42px; min-height: 48px; font-size: 16px; border-radius: 12px; }
.palette-list { list-style: none; margin: 10px 0 0; padding: 0; max-height: min(60dvh, 420px); overflow-y: auto; }
.palette-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-areas: 'i t k' 'i s k'; column-gap: 12px; align-items: center; padding: 9px 12px; border-radius: 10px; cursor: pointer; }
.palette-list li .ico { grid-area: i; color: var(--muted); }
.palette-list li .t { grid-area: t; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-list li .s { grid-area: s; font-size: 12.5px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-list li .k { grid-area: k; font-size: 11.5px; color: var(--faint); }
.palette-list li[aria-selected="true"] { background: var(--primary-soft); }
.palette-list li[aria-selected="true"] .ico { color: var(--primary); }
.palette-list .empty-row { display: block; color: var(--muted); cursor: default; text-align: center; padding: 18px; }
.palette-hint { margin-top: 10px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
@media (hover: none) { .palette-hint, .search-trigger kbd { display: none; } }

/* theme switch */
.theme-switch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; padding: 4px; border-radius: 12px; background: var(--surface-2); }
.theme-switch button { all: unset; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; border-radius: 9px; cursor: pointer; font-size: 13px; color: var(--muted); }
.theme-switch button[aria-pressed="true"] { background: var(--surface); color: var(--primary-strong); box-shadow: var(--shadow); font-weight: 600; }
.theme-switch button:focus-visible { outline: 2px solid var(--primary); }

/* skeleton loading */
.loading { color: transparent; position: relative; min-height: 220px; }
.loading::before { content: ''; position: absolute; inset: 0; border: 0; border-radius: 16px; animation: shimmer 1.2s linear infinite; width: auto; height: auto; margin: 0;
  background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 40%, var(--surface) 80%) 0 0 / 200% 100%; }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .loading::before, .boot img { animation: none; } }

/* installed app: respect the notch / status bar */
@media (display-mode: standalone) {
  .main { padding-top: max(14px, env(safe-area-inset-top)); }
  .sidebar { padding-top: max(18px, env(safe-area-inset-top)); }
}

/* ---------------- dark theme ---------------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d1716; --surface: #142220; --surface-2: #1a2b29; --border: #233936; --border-strong: #31504c;
  --text: #e6efed; --muted: #a3b5b1; --faint: #74898a;
  --primary: #3fb8a8; --primary-strong: #7fd8cb; --primary-soft: #173a36;
  --danger: #ff8a7a; --danger-soft: #3a1d1a; --warning: #f2b85c; --warning-soft: #352a15;
  --success: #6fd394; --success-soft: #16301f; --info: #8db8ff; --info-soft: #18263b; --muted-soft: #1d2d2b;
  --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 6px 18px -8px rgb(0 0 0 / 60%);
}
:root[data-theme="dark"] body { background: var(--bg); }
:root[data-theme="dark"] .sidebar { background: #101c1b; }
:root[data-theme="dark"] .btn.primary { background: #1e8c80; border-color: #1e8c80; color: #fff; }
:root[data-theme="dark"] .btn.primary:hover { background: #23a092; }
:root[data-theme="dark"] .btn.call { background: #2a9a57; border-color: #2a9a57; }
:root[data-theme="dark"] .hero { background: radial-gradient(120% 140% at 100% 0%, #13665f 0%, #0d4542 50%, #0a2f2e 100%); }
:root[data-theme="dark"] .hero .btn.light { background: #e6efed; color: #0a3d3b; }
:root[data-theme="dark"] .hero-stat.hot { background: #3a1d1a; color: #ff8a7a; border-color: #5a2a24; }
:root[data-theme="dark"] .hero-stat.hot .l { color: #ffb3a8; }
:root[data-theme="dark"] .acct-actions { background: rgb(20 34 32 / 94%); }
:root[data-theme="dark"] .preview { background: #12302b; border-color: #23423d; }
:root[data-theme="dark"] .toast { background: #e6efed; color: #0d1716; }
:root[data-theme="dark"] .toast.error { background: #ff8a7a; color: #2a0b07; }
:root[data-theme="dark"] .alert.danger, :root[data-theme="dark"] .banner.danger { border-color: #5a2a24; }
:root[data-theme="dark"] .alert.warning, :root[data-theme="dark"] .banner.warning { border-color: #4d3a17; }
:root[data-theme="dark"] .alert.info, :root[data-theme="dark"] .banner.info { border-color: #26405f; }
:root[data-theme="dark"] .net-bar { border-color: #4d3a17; }
:root[data-theme="dark"] dialog { background: var(--surface); color: var(--text); }
:root[data-theme="dark"] .bottom-nav { background: #101c1b; border-color: var(--border); }
:root[data-theme="dark"] td.st-uncertain input { background: #2c2413; }
:root[data-theme="dark"] td.st-conflict input { background: #172437; }
:root[data-theme="dark"] tbody tr:hover { background: var(--surface-2); }
:root[data-theme="dark"] meter { filter: saturate(.8) brightness(1.1); }
:root[data-theme="dark"] .install-cta { border-color: rgb(63 184 168 / 40%); }
:root[data-theme="dark"] .choice input:checked + span { background: #1e8c80; border-color: #1e8c80; }
:root[data-theme="dark"] .nav .count.info { background: #2f5f9e; }

/* ---------- home indicators ---------- */
.indicators { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
@media (max-width: 1100px) { .indicators { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .indicators { gap: 8px; } }
.ind { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); color: var(--text); text-decoration: none !important; transition: transform .15s, box-shadow .15s; min-width: 0; }
.ind:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgb(10 60 55 / 6%), 0 12px 26px -14px rgb(10 60 55 / 30%); }
.ind:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.ind-body { display: flex; flex-direction: column; min-width: 0; }
.ind-l { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); }
.ind-l .ico { color: var(--primary); }
.ind b { font-size: 22px; line-height: 1.3; font-variant-numeric: tabular-nums; }
.ind-t { font-size: 14px; color: var(--faint); font-weight: 400; }
.ind-s { font-size: 12px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ind-icon { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); flex-shrink: 0; }
.ring2 { width: 52px; height: 52px; flex-shrink: 0; }
.ring2 circle { fill: none; stroke-width: 3.6; }
.ring2 .track { stroke: var(--muted-soft); }
.ring2 .val { stroke: var(--primary); stroke-linecap: round; transition: stroke-dasharray .6s ease; }
.ring2.good .val { stroke: var(--success); }
.ring2.mid .val { stroke: #d98b00; }
.ring2.low .val { stroke: var(--danger); }
.ring2.info .val { stroke: var(--info); }
@media (max-width: 520px) { .ind { padding: 10px; gap: 8px; } .ring2, .ind-icon { width: 42px; height: 42px; } .ind b { font-size: 19px; } .ind-l { font-size: 11.5px; } }
.trend { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 600; padding: 1px 6px; border-radius: 999px; vertical-align: middle; }
.trend.up { color: var(--success); background: var(--success-soft); }
.trend.down { color: var(--danger); background: var(--danger-soft); }
.mini-kpi .l > span { display: inline-flex; align-items: center; gap: 4px; }
.mini-kpi .l .ico { color: var(--primary); }

/* ---------- guided tour ---------- */
.tour { position: fixed; inset: 0; z-index: 1800; }
.tour-hole { position: fixed; border-radius: 14px; box-shadow: 0 0 0 9999px rgb(8 28 26 / 58%); outline: 2px solid rgb(255 255 255 / 85%); transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease; pointer-events: none; }
.tour-card { position: fixed; background: var(--surface); color: var(--text); border-radius: 16px; padding: 16px 18px 14px; box-shadow: 0 24px 50px -18px rgb(0 0 0 / 45%); animation: fadeIn .2s ease-out; }
.tour-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.tour-head .ico { color: var(--primary); width: 32px; height: 32px; padding: 6px; border-radius: 10px; background: var(--primary-soft); }
.tour-head h2 { font-size: 16px; }
.tour-card p { font-size: 14px; color: var(--muted); margin: 0 0 12px; text-wrap: pretty; }
.tour-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tour-btns { display: flex; gap: 6px; }
.tour-dots { display: inline-flex; gap: 5px; }
.tour-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); transition: width .2s; }
.tour-dots i.on { width: 18px; border-radius: 999px; background: var(--primary); }
@media (prefers-reduced-motion: reduce) { .tour-hole { transition: none; } }

/* Import: what the column detection understood */
.map-stats { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-inline-start: 8px; vertical-align: middle; }
.field .map-why { display: inline-flex; align-items: center; gap: 4px; color: var(--info); }
.field .map-why.ignored { color: var(--warning); }
.smart-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.smart-list li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.75; color: var(--muted); }
.smart-list li > svg { flex: none; margin-top: 4px; color: var(--primary); }
.smart-list b { color: var(--text); }

/* Templates: channel-true previews */
.tabs a { display: inline-flex; align-items: center; gap: 6px; }
.tpl-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.tpl { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border); transition: border-color .25s cubic-bezier(.32,.72,0,1), transform .25s cubic-bezier(.32,.72,0,1); }
.tpl:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.tpl-head { display: flex; align-items: flex-start; gap: 10px; }
.tpl-ico { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #e5f6ec; color: #128c4a; }
.tpl.is-mail .tpl-ico { background: var(--info-soft); color: var(--info); }
.tpl-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.5; }
.tpl-meta { font-size: 12px; color: var(--faint); }
.tpl .actions { display: flex; gap: 2px; margin-inline-start: auto; }
.wa-prev { background: #efeae2; border-radius: 12px; padding: 10px 12px; }
.wa-bubble { background: #d9fdd3; color: #111b21; border-radius: 10px; border-start-end-radius: 2px; padding: 8px 10px; white-space: pre-wrap; font-size: 13.5px; line-height: 1.8; box-shadow: 0 1px 1px rgb(0 0 0 / 8%); max-width: 92%; margin-inline-start: auto; }
.mail-prev { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.mail-subj { padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 600; line-height: 1.7; }
.mail-body { padding: 10px 12px; white-space: pre-wrap; font-size: 13.5px; line-height: 1.8; color: var(--muted); }
.wa-bubble.clamp, .mail-body.clamp { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.var-chip { display: inline-block; padding: 0 7px; margin: 0 1px; border-radius: 6px; background: var(--primary-soft); color: var(--primary-strong); font-size: .88em; font-weight: 600; line-height: 1.7; white-space: nowrap; }
.var-chip.as-btn { border: 1px dashed color-mix(in srgb, var(--primary) 35%, transparent); cursor: pointer; margin: 3px; font-family: inherit; }
.var-chip.as-btn:hover { background: var(--primary); color: #fff; }
.var-pick > div { margin-top: 6px; }
:root[data-theme="dark"] .wa-prev { background: #0b141a; }
:root[data-theme="dark"] .wa-bubble { background: #005c4b; color: #e9edef; }
:root[data-theme="dark"] .tpl-ico { background: #12302b; color: #4ade80; }
:root[data-theme="light"] { color-scheme: light; }

/* Offline outbox */
.outbox-pill { position: fixed; inset-inline-start: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 40; display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 999px; border: 0; background: #7a4a00; color: #fff; font: 600 13px var(--font); box-shadow: 0 8px 24px -8px rgb(0 0 0 / 35%); cursor: pointer; }
@media (max-width: 900px) { .outbox-pill { bottom: calc(76px + env(safe-area-inset-bottom)); } }
.best-time { display: inline-flex; align-items: center; gap: 6px; }
.best-time.now { color: var(--success); font-weight: 600; }
.push-state { display: flex; gap: 8px; align-items: flex-start; line-height: 1.8; color: var(--muted); }
.push-state.on { color: var(--success); font-weight: 600; }
.push-card .actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 10px; }

/* mobile polish: names wrap instead of being cut, reachable tap targets */
@media (max-width: 640px) {
  .acard .nm { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .lead-actions .menu > summary { min-height: 40px; min-width: 40px; }
}

/* tour invitation: inline, never covers the work */
.tour-invite { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 10px 14px; margin-bottom: 14px; border-radius: 14px; background: var(--primary-soft); color: var(--primary-strong); }
.tour-invite span { flex: 1 1 200px; font-weight: 600; font-size: 13.5px; }
.tour-invite .ico { flex-shrink: 0; }
@media (max-width: 520px) { .ind-s { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } }

/* platform administrator: always-visible cue that another company is on screen */
.view-strip { position: fixed; inset-inline: 0; top: 0; z-index: 40; height: 36px; display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--warning); color: #fff; font-size: 13px; }
.view-strip button { all: unset; cursor: pointer; padding: 2px 12px; border-radius: 8px; background: rgb(255 255 255 / 22%); font-weight: 600; }
.view-strip button:focus-visible { outline: 2px solid #fff; }
.shell.viewing .sidebar { inset-block-start: 36px; }
.shell.viewing .main { margin-top: 36px; }
.org-card .list { margin-top: 8px; }

/* two-step verification */
.qr-box { display: grid; place-items: center; margin: 12px 0; }
.qr-box svg { width: 200px; height: 200px; border-radius: 12px; border: 1px solid var(--border); background: #fff; }
.codes { list-style: none; margin: 12px 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.codes li { background: var(--surface-2); border-radius: 10px; padding: 8px 12px; text-align: center; font-size: 15px; letter-spacing: 1px; }
.notice.warn { background: var(--warning-soft); color: var(--warning); border-radius: 12px; padding: 10px 14px; margin-bottom: 10px; font-size: 13.5px; }

/* send queue */
.qprog { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; font-size: 13px; color: var(--muted); }
.qprog .bar { flex: 1; height: 6px; border-radius: 6px; background: var(--muted-soft); overflow: hidden; }
.qprog .bar i { display: block; height: 100%; background: var(--primary); border-radius: 6px; }
.qcard { background: var(--surface); border-radius: 18px; box-shadow: var(--shadow); padding: clamp(16px, 3vw, 24px); margin-bottom: 16px; }
.qhead { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.qcard h2 { font-size: 20px; margin-bottom: 2px; }
.qcard h2 a { color: var(--text); }
.qcard textarea { min-height: 170px; line-height: 1.9; font-size: 15px; }
.qactions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.qsend { min-height: 46px; padding-inline: 22px; font-size: 15px; flex: 1 1 220px; }
@media (max-width: 640px) { .qactions > .btn, .qactions > .menu { flex: 1 1 45%; } .qsend { flex-basis: 100%; order: -1; } }
.toast { display: flex; align-items: center; gap: 12px; }
.toast-action { all: unset; cursor: pointer; font-weight: 600; text-decoration: underline; padding: 2px 6px; border-radius: 6px; }
.toast-action:focus-visible { outline: 2px solid #fff; }

/* templates: search, smart suggestion */
.tpl-search { display: flex; align-items: center; gap: 8px; max-width: 520px; margin: 4px 0 12px; }
.tpl-search input { flex: 1; min-height: 42px; border-radius: 12px; }
.sug { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 4px; }
.chip.as-btn { cursor: pointer; border: 0; font: inherit; }
.chip.as-btn:focus-visible { outline: 2px solid var(--primary); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* discover + voice */
.found { padding: 10px 0; border-bottom: 1px solid var(--border); }
.found.dim { opacity: .6; }
.found .check { align-items: flex-start; }
.warn-text { color: var(--warning); }
.mic { gap: 6px; }
.mic.listening { color: #fff; background: var(--danger); border-color: var(--danger); animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgb(180 35 24 / 18%); } }
@media (prefers-reduced-motion: reduce) { .mic.listening { animation: none; } }