/* =====================================================================
   ViaHopTrip Sales CRM — design system
   Tokens → base → layout (sidebar, top bar, tab bar, sheet) → components
   (cards, KPIs, tables, pills, buttons, forms, states) → views → page scripts.
   ===================================================================== */

/* ============ Tokens ============ */
:root {
  /* type scale */
  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --fs-xs: .75rem; --fs-sm: .8125rem; --fs-md: .875rem; --fs-base: .9375rem; --fs-lg: 1.0625rem; --fs-xl: 1.25rem; --fs-2xl: 1.625rem;
  /* spacing scale (4px grid) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px;
  /* radius & elevation */
  --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-full: 999px;
  --radius: var(--r-lg); --gap: 16px;
  --shadow-xs: 0 1px 2px rgb(16 24 40 / .05);
  --shadow-sm: 0 1px 3px rgb(16 24 40 / .06), 0 1px 2px rgb(16 24 40 / .04);
  --shadow-md: 0 6px 16px -4px rgb(16 24 40 / .10), 0 2px 6px -2px rgb(16 24 40 / .05);
  --shadow-lg: 0 20px 40px -12px rgb(16 24 40 / .22);
  --sidebar-w: 248px; --sidebar-w-min: 72px; --tabbar-h: 58px; --bottom-bar-h: 0px;
  --ease: cubic-bezier(.2, .8, .2, 1);

  /* color: light */
  --bg: #f5f6f8; --surface: #ffffff; --surface-2: #f2f4f7; --surface-3: #e9ecf1; --zebra: #fafbfc; --hover: #f4f6fa;
  --text: #101828; --text-2: #344054; --muted: #667085; --border: #e4e7ec; --border-strong: #d0d5dd;
  --accent: #2563eb; --accent-hover: #1d4ed8; --accent-text: #ffffff; --accent-soft: #eef3ff; --accent-fg: #1d4ed8; --ring: rgb(37 99 235 / .28);
  --ok: #067647; --ok-bg: #ecfdf3; --ok-border: #abefc6;
  --danger: #b42318; --danger-strong: #d92d20; --danger-bg: #fef3f2; --danger-border: #fecdca;
  --warn: #93370d; --warn-bg: #fffaeb; --warn-border: #fedf89;
  --info: #175cd3; --info-bg: #eff8ff;
  --violet: #5925dc; --violet-bg: #f4f3ff;
  --gold: #8a5a00; --gold-bg: #fef7c3;
  --c-calls: #2a78d6; --c-qual: #1baf7a; --c-cost: #eb6834; --c-stage: #2563eb;
  --agent-bg: #eef3ff; --cust-bg: #f2f4f7;
  --nav-bg: #0d1424; --nav-bg-2: #141d31; --nav-text: #c2cad8; --nav-muted: #7d889c; --nav-active: #ffffff; --nav-active-bg: rgb(255 255 255 / .09); --nav-border: rgb(255 255 255 / .07);
  --topbar-bg: rgb(245 246 248 / .86);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1115; --surface: #171a21; --surface-2: #1d2129; --surface-3: #262b35; --zebra: #1a1d24; --hover: #20242d;
    --text: #e8eaef; --text-2: #c5cad4; --muted: #98a1b0; --border: #2a2f3a; --border-strong: #363c49;
    --accent: #3d6df2; --accent-hover: #2f5fe4; --accent-text: #ffffff; --accent-soft: #1b2440; --accent-fg: #8eabff; --ring: rgb(110 145 255 / .38);
    --ok: #4ade80; --ok-bg: #0f2a1c; --ok-border: #1d5236;
    --danger: #f97066; --danger-strong: #e5484d; --danger-bg: #331616; --danger-border: #5c2323;
    --warn: #fdb022; --warn-bg: #2e2510; --warn-border: #5a4511;
    --info: #84caff; --info-bg: #102a43;
    --violet: #bdb4fe; --violet-bg: #251d45;
    --gold: #fde272; --gold-bg: #3a3110;
    --c-calls: #3987e5; --c-qual: #199e70; --c-cost: #d95926; --c-stage: #5b85f5;
    --agent-bg: #1b2440; --cust-bg: #262b35;
    --nav-bg: #0a0c10; --nav-bg-2: #12151b; --nav-text: #b9c0cc; --nav-muted: #6f7888; --nav-active: #ffffff; --nav-active-bg: rgb(255 255 255 / .07); --nav-border: rgb(255 255 255 / .06);
    --topbar-bg: rgb(15 17 21 / .84);
    --shadow-sm: 0 1px 2px rgb(0 0 0 / .4); --shadow-md: 0 8px 20px -6px rgb(0 0 0 / .55); --shadow-lg: 0 24px 48px -12px rgb(0 0 0 / .7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0f1115; --surface: #171a21; --surface-2: #1d2129; --surface-3: #262b35; --zebra: #1a1d24; --hover: #20242d;
  --text: #e8eaef; --text-2: #c5cad4; --muted: #98a1b0; --border: #2a2f3a; --border-strong: #363c49;
  --accent: #3d6df2; --accent-hover: #2f5fe4; --accent-text: #ffffff; --accent-soft: #1b2440; --accent-fg: #8eabff; --ring: rgb(110 145 255 / .38);
  --ok: #4ade80; --ok-bg: #0f2a1c; --ok-border: #1d5236;
  --danger: #f97066; --danger-strong: #e5484d; --danger-bg: #331616; --danger-border: #5c2323;
  --warn: #fdb022; --warn-bg: #2e2510; --warn-border: #5a4511;
  --info: #84caff; --info-bg: #102a43;
  --violet: #bdb4fe; --violet-bg: #251d45;
  --gold: #fde272; --gold-bg: #3a3110;
  --c-calls: #3987e5; --c-qual: #199e70; --c-cost: #d95926; --c-stage: #5b85f5;
  --agent-bg: #1b2440; --cust-bg: #262b35;
  --nav-bg: #0a0c10; --nav-bg-2: #12151b; --nav-text: #b9c0cc; --nav-muted: #6f7888; --nav-active: #ffffff; --nav-active-bg: rgb(255 255 255 / .07); --nav-border: rgb(255 255 255 / .06);
  --topbar-bg: rgb(15 17 21 / .84);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / .4); --shadow-md: 0 8px 20px -6px rgb(0 0 0 / .55); --shadow-lg: 0 24px 48px -12px rgb(0 0 0 / .7);
  color-scheme: dark;
}

/* ============ Base ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body { margin: 0; font: 400 var(--fs-md)/1.5 var(--font); background: var(--bg); color: var(--text); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "cv11", "ss01"; }
h1 { font-size: var(--fs-lg); font-weight: 650; margin: 0; letter-spacing: -.01em; }
h2 { font-size: var(--fs-base); font-weight: 650; margin: 0 0 var(--s3); letter-spacing: -.005em; }
h3 { font-size: var(--fs-md); font-weight: 650; margin: 0 0 var(--s2); width: 100%; }
p { margin: 0 0 var(--s2); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }
code { font-family: var(--mono); font-size: .85em; background: var(--surface-2); padding: .05em .35em; border-radius: 4px; }
a { color: var(--accent-fg); text-decoration: none; }
a:hover { text-decoration: underline; }
[hidden] { display: none !important; }
.num, td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.skip-link { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--surface); padding: 8px 12px; border-radius: var(--r-md); box-shadow: var(--shadow-md); }
.skip-link:focus { left: 8px; }
.ico { display: inline-flex; width: 1.15em; height: 1.15em; flex: none; }
.ico svg, svg.icon { width: 100%; height: 100%; display: block; }
svg.icon { width: 20px; height: 20px; flex: none; }

/* ============ App shell ============ */
.app { display: flex; min-height: 100vh; min-height: 100dvh; }
.main-col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

/* ---- Sidebar ---- */
.sidebar { position: sticky; top: 0; height: 100vh; height: 100dvh; width: var(--sidebar-w); flex: none; background: var(--nav-bg); color: var(--nav-text); display: flex; flex-direction: column; z-index: 30; transition: width .2s var(--ease); border-right: 1px solid var(--nav-border); }
.brand { display: flex; align-items: center; gap: 10px; padding: 16px 14px 14px 18px; min-height: 64px; }
.brand-mark { width: 32px; height: 32px; border-radius: 9px; display: inline-grid; place-items: center; font-weight: 800; font-size: 16px; color: #fff; background: linear-gradient(135deg, #3d7bff 0%, #6a4dff 100%); box-shadow: 0 4px 12px -2px rgb(61 123 255 / .45); flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand-text b { color: #fff; font-size: var(--fs-base); letter-spacing: -.01em; }
.brand-text span { color: var(--nav-muted); font-size: var(--fs-xs); }
.sidebar-toggle { margin-left: auto; color: var(--nav-muted); }
.sidebar-toggle:hover { color: #fff; background: var(--nav-active-bg); }
.side-nav { flex: 1 1 auto; overflow-y: auto; padding: 6px 10px 12px; scrollbar-width: thin; scrollbar-color: var(--nav-bg-2) transparent; display: block; border: 0; }
.nav-group { margin-top: 14px; }
.nav-group:first-child { margin-top: 2px; }
.nav-group-label { font-size: 11px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--nav-muted); padding: 0 10px 6px; white-space: nowrap; }
.side-nav a { display: flex; align-items: center; gap: 11px; padding: 0 10px; height: 38px; border-radius: var(--r-md); color: var(--nav-text); text-decoration: none; font-weight: 520; font-size: var(--fs-md); white-space: nowrap; position: relative; border: 0; margin: 1px 0; }
.side-nav a .ico { width: 19px; height: 19px; opacity: .85; }
.side-nav a .nav-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.side-nav a:hover { background: var(--nav-active-bg); color: #fff; text-decoration: none; }
.side-nav a[aria-current="page"] { background: var(--nav-active-bg); color: var(--nav-active); font-weight: 620; }
.side-nav a[aria-current="page"]::before { content: ""; position: absolute; left: -10px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: #6f9bff; }
.side-nav a[aria-current="page"] .ico { opacity: 1; color: #8fb0ff; }
.side-foot { border-top: 1px solid var(--nav-border); padding: 12px; display: grid; gap: 10px; }
.user-chip { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 2px 4px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; color: #fff; background: linear-gradient(135deg, #6a7fa8, #46557a); text-transform: uppercase; }
.avatar.lg { width: 52px; height: 52px; font-size: 19px; border-radius: 14px; background: linear-gradient(135deg, #3d7bff 0%, #6a4dff 100%); }
.user-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.user-meta b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar .user-meta b { color: #fff; font-size: var(--fs-md); }
.sidebar .user-meta .muted { color: var(--nav-muted); text-transform: capitalize; }
.theme-switch { display: flex; background: var(--nav-bg-2); border-radius: var(--r-md); padding: 3px; gap: 2px; }
.theme-switch button { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 30px; padding: 0 6px; border: 0; background: transparent; color: var(--nav-muted); font-size: var(--fs-xs); font-weight: 600; border-radius: 6px; box-shadow: none; }
.theme-switch button .ico { width: 15px; height: 15px; }
.theme-switch button:hover { color: #fff; background: transparent; }
.theme-switch button[aria-pressed="true"] { background: rgb(255 255 255 / .1); color: #fff; }
.sidebar .side-signout { color: var(--nav-text); justify-content: flex-start; gap: 10px; border: 0; background: transparent; min-height: 34px; padding: 0 8px; font-weight: 520; }
.sidebar .side-signout:hover { background: var(--nav-active-bg); color: #fff; border: 0; }
.side-signout .ico { width: 18px; height: 18px; }

/* Collapsed sidebar (icons only): tablets by default, desktop on request */
@media (min-width: 768px) and (max-width: 1199px) {
  .app:not(.nav-open) .sidebar { width: var(--sidebar-w-min); }
}
@media (min-width: 1200px) {
  .app.nav-min .sidebar { width: var(--sidebar-w-min); }
}
.sidebar.is-min .brand { padding: 16px 0 12px; justify-content: center; flex-direction: column; gap: 8px; }
.sidebar.is-min .brand-text, .sidebar.is-min .nav-label, .sidebar.is-min .user-meta, .sidebar.is-min .theme-switch button .lbl, .sidebar.is-min .side-signout .lbl { display: none; }
.sidebar.is-min .sidebar-toggle { margin: 0; }
.sidebar.is-min .side-nav { padding: 6px 12px; }
.sidebar.is-min .nav-group-label { font-size: 0; height: 1px; background: var(--nav-border); margin: 6px 6px 8px; padding: 0; }
.sidebar.is-min .nav-group:first-child .nav-group-label { display: none; }
.sidebar.is-min .side-nav a { justify-content: center; padding: 0; height: 42px; }
.sidebar.is-min .side-nav a .ico { width: 21px; height: 21px; }
.sidebar.is-min .side-nav a .count { position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; font-size: 10px; padding: 0 4px; line-height: 16px; }
.sidebar.is-min .side-foot { padding: 10px 8px; justify-items: center; }
.sidebar.is-min .user-chip { padding: 0; }
.sidebar.is-min .theme-switch { flex-direction: column; width: 44px; }
.sidebar.is-min .side-signout { justify-content: center; width: 44px; padding: 0; }

/* ---- Top bar ---- */
.topbar { position: sticky; top: 0; z-index: 20; background: var(--topbar-bg); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--border); }
.topbar-row { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; padding: 10px 28px; min-height: 64px; }
.page-title { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 0 1 auto; }
.page-title h1 { font-size: var(--fs-xl); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badges { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.badge { padding: 1px 8px; border-radius: var(--r-full); font-size: 11px; font-weight: 650; border: 1px solid var(--border); white-space: nowrap; color: var(--muted); background: var(--surface); line-height: 18px; letter-spacing: .01em; }
.badge.sim { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-border); }
.badge.live-warn { background: var(--danger-strong); color: #fff; border-color: var(--danger-strong); animation: pulse 2s infinite; }
@keyframes pulse { 50% { opacity: .72; } }
.live { font-size: var(--fs-xs); color: var(--muted); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); flex: none; }
.live.on::before { background: #12b76a; box-shadow: 0 0 0 3px rgb(18 183 106 / .18); }

.controlbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-left: auto; }
.ctl { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--muted); font-weight: 550; }
.ctl select { font-weight: 620; color: var(--text); min-width: 132px; }
.ctl-hint { font-size: var(--fs-xs); max-width: 16rem; display: none; }
@media (min-width: 1680px) { .ctl-hint { display: inline; } }
.spend { display: flex; gap: 6px 14px; flex-wrap: wrap; font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.spend b { color: var(--text); font-weight: 650; }
.spend .over, .spend .over b { color: var(--danger); }
.import-btn .ico { width: 17px; height: 17px; }
.estop { background: var(--danger-strong); border-color: var(--danger-strong); color: #fff; font-weight: 800; letter-spacing: .04em; padding: 0 16px; min-height: 38px; font-size: var(--fs-sm); box-shadow: 0 2px 8px -2px rgb(217 45 32 / .55); }
.estop:hover { background: #b42318; border-color: #b42318; }
.estop.on { background: #fff; color: var(--danger-strong); box-shadow: inset 0 0 0 2px var(--danger-strong); }
.estop .lbl-short { display: none; }
.alert-banner { background: var(--warn-bg); color: var(--warn); padding: 8px 28px; text-align: center; border-top: 1px solid var(--warn-border); font-weight: 550; font-size: var(--fs-sm); }
.alert-banner.critical { background: var(--danger-strong); color: #fff; font-weight: 650; border-color: transparent; }
.estop-banner { background: var(--danger-strong); color: #fff; font-weight: 700; padding: 9px 28px; text-align: center; letter-spacing: .02em; font-size: var(--fs-sm); }
body.estop-on .topbar { border-bottom: 3px solid var(--danger-strong); }
.settings { margin: 0 28px 14px; padding: 16px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-md); max-height: 72vh; overflow-y: auto; }
.spend-strip { display: none; }
@media (max-width: 1599px) {
  .ctl > span:first-child, .wide, #spendBox span + span { display: none; }
  .ctl select { min-width: 120px; }
}
@media (min-width: 768px) and (max-width: 1599px) {
  #companiesTable th:nth-child(9), #companiesTable td:nth-child(9) { display: none; }
}
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
  .deal .deal-move { opacity: 0; height: 0; overflow: hidden; transition: opacity .15s; }
  .deal:hover .deal-move, .deal:focus-within .deal-move { opacity: 1; height: auto; overflow: visible; }
}
@media (max-width: 1199px) {
  .controlbar { order: 10; flex: 1 1 100%; margin-left: 0; }
  .page-title { flex: 1 1 auto; }
  .live { margin-left: auto; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .import-btn { width: 38px; padding: 0; }
  .import-btn .lbl { display: none; }
  .page-title h1 { font-size: var(--fs-lg); }
}

/* ---- Main ---- */
main { padding: 24px 28px 48px; max-width: 1480px; width: 100%; margin: 0 auto; outline: none; }
.view { display: grid; gap: var(--gap); min-width: 0; align-content: start; }
.view > * { min-width: 0; }

/* ---- Bottom tab bar (phones) ---- */
.tabbar { display: none; }
.sheet { position: fixed; inset: 0; z-index: 60; background: var(--bg); display: flex; flex-direction: column; animation: sheet-in .22s var(--ease); }
@keyframes sheet-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: calc(10px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) 10px calc(16px + env(safe-area-inset-left)); border-bottom: 1px solid var(--border); background: var(--surface); }
.sheet-head h2 { margin: 0; font-size: var(--fs-xl); }
.sheet-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 16px calc(16px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left)); display: grid; gap: 20px; align-content: start; }
.sheet-user { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.sheet-user .avatar { width: 44px; height: 44px; font-size: 16px; }
.sheet-user .user-meta b { font-size: var(--fs-base); }
.sheet-user .user-meta .muted { text-transform: capitalize; }
.more-nav { display: grid; gap: 18px; }
.more-group h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 0 0 8px 4px; }
.more-group ul { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.more-group li + li { border-top: 1px solid var(--border); }
.more-group a { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 16px; color: var(--text); font-weight: 550; font-size: var(--fs-base); text-decoration: none; }
.more-group a .ico { width: 21px; height: 21px; color: var(--muted); }
.more-group a .nav-label { flex: 1 1 auto; }
.more-group a .chev { width: 16px; height: 16px; color: var(--border-strong); }
.more-group a[aria-current="page"] { color: var(--accent-fg); }
.more-group a[aria-current="page"] .ico { color: var(--accent-fg); }
.more-group a:active { background: var(--hover); }
.sheet-section { display: grid; gap: 10px; }
.sheet-section h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 0 0 0 4px; }
.wide-switch { background: var(--surface-2); border: 1px solid var(--border); }
.wide-switch button { min-height: 40px; color: var(--muted); font-size: var(--fs-md); }
.wide-switch button:hover { color: var(--text); }
.wide-switch button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
body.sheet-open { overflow: hidden; }

/* ============ Cards ============ */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px; min-width: 0; box-shadow: var(--shadow-xs); }
.card > h2:first-child { margin-bottom: 14px; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 14px; }
.card-head h2 { margin: 0; }
.card-sub { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--muted); }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.page-head h2 { font-size: var(--fs-xl); margin: 0; letter-spacing: -.015em; }
.count-total { font-weight: 500; font-size: var(--fs-base); }
.grid2 { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); min-width: 0; }
.grid2.even { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .grid2, .grid2.even { grid-template-columns: minmax(0, 1fr); } }
.campaign-select { display: flex; gap: 8px; align-items: center; font-size: var(--fs-sm); color: var(--muted); min-width: 0; max-width: 100%; }
.campaign-select select { flex: 0 1 auto; min-width: 0; text-overflow: ellipsis; }

/* ============ KPI tiles ============ */
.kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); }
.kpi { position: relative; display: flex; flex-direction: column; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px 16px; color: inherit; text-decoration: none; min-width: 0; transition: border-color .15s, box-shadow .15s, transform .15s; }
a.kpi:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); text-decoration: none; transform: translateY(-1px); }
a.kpi::after { content: "→"; position: absolute; top: 12px; right: 14px; color: var(--muted); opacity: 0; transition: opacity .15s; }
a.kpi:hover::after { opacity: 1; }
.kpi.alert { border-color: var(--danger-border); background: var(--danger-bg); }
.kpi.alert .value { color: var(--danger); }
.kpi .label { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; letter-spacing: .01em; }
.kpi .value { font-size: 1.6rem; font-weight: 680; line-height: 1.15; letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kpi .value.na { font-size: var(--fs-base); font-weight: 600; color: var(--muted); letter-spacing: 0; padding: 6px 0 3px; }
.kpi .sub { font-size: var(--fs-xs); color: var(--muted); }

/* ============ Pipeline bars (overview) ============ */
.pipeline { display: grid; gap: 6px; }
.stage-row { display: grid; grid-template-columns: minmax(110px, 200px) 1fr 3.5rem; gap: 12px; align-items: center; color: inherit; text-decoration: none; padding: 5px 8px; border-radius: var(--r-md); }
.stage-row:hover { background: var(--hover); text-decoration: none; }
.stage-name { font-size: var(--fs-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 520; }
.track { height: 10px; background: var(--surface-2); border-radius: var(--r-full); overflow: hidden; }
.track .fill { display: block; height: 100%; background: linear-gradient(90deg, var(--c-stage), color-mix(in srgb, var(--c-stage) 70%, #8b5cf6)); border-radius: var(--r-full); min-width: 3px; }
.stage-n { text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; }
.side-stages { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border); }
.chip { display: inline-flex; gap: 6px; align-items: center; padding: 3px 10px; border: 1px solid var(--border); border-radius: var(--r-full); font-size: var(--fs-sm); color: var(--text-2); text-decoration: none; background: var(--surface); min-height: 28px; }
.chip:hover { border-color: var(--border-strong); background: var(--hover); text-decoration: none; }

/* ============ Chart ============ */
.chart svg { width: 100%; height: auto; display: block; }
.chart .axis { fill: var(--muted); font-size: 10px; }
.chart .grid { stroke: var(--border); }
.legend { display: flex; gap: 8px; align-items: center; font-size: var(--fs-sm); color: var(--muted); flex-wrap: wrap; margin-top: 8px; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.sw.calls { background: var(--c-calls); } .sw.qual { background: var(--c-qual); } .sw.cost { background: var(--c-cost); }
.outcomes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.outcomes li { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; font-size: var(--fs-md); }
.outcomes .bar { grid-column: 1 / -1; height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.outcomes .bar span { display: block; height: 100%; background: var(--accent); border-radius: 3px; }

/* ============ Tables ============ */
.table-wrap { overflow: auto; max-width: 100%; border: 1px solid var(--border); border-radius: var(--r-md); }
.card > .table-wrap:only-child { border: 0; }
@media (min-width: 768px) { .table-wrap { max-height: 72vh; } }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-md); }
th, td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
td.primary { white-space: normal; min-width: 12rem; }
.data-table th, .data-table td, .table-wrap th, .table-wrap td { padding: 10px 12px; white-space: nowrap; }
.data-table th[data-sort] { padding: 0; }
.table-wrap td.primary, .table-wrap td.empty { white-space: normal; }
th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); color: var(--muted); font-weight: 620; font-size: var(--fs-xs); letter-spacing: .02em; text-transform: none; }
th.num { text-align: right; }
tbody tr:nth-child(even) { background: var(--zebra); }
tbody tr:hover { background: var(--hover); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr.clickable { cursor: pointer; }
tbody tr.clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
tbody tr.selected, tbody tr.selected:nth-child(even) { background: var(--accent-soft); }
td.empty { text-align: center; color: var(--muted); padding: 32px 16px; white-space: normal; }
th[data-sort] { padding: 0; }
th .sort-btn { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 4px; width: 100%; padding: 10px 12px; cursor: pointer; color: inherit; font: inherit; }
th.num .sort-btn { justify-content: flex-end; }
th .sort-btn:hover { color: var(--text); }
th .sort-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
th .sort-btn .ind { width: 12px; height: 12px; opacity: .35; }
th[aria-sort] .sort-btn { color: var(--text); }
th[aria-sort] .sort-btn .ind { opacity: 1; color: var(--accent-fg); }
th.sel, td.sel { width: 44px; padding-right: 0; }
.cell-sub { color: var(--muted); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; max-width: 26rem; }
.cell-title { font-weight: 620; color: var(--text); }
a.cell-title:hover { color: var(--accent-fg); }
.prio { display: inline-flex; gap: 2px; vertical-align: middle; }
.prio i { width: 6px; height: 12px; border-radius: 2px; background: var(--surface-3); }
.prio i.on { background: #f79009; }
.prio.p3 i.on { background: var(--danger-strong); }
.pager { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.pager > span { margin-right: auto; }
.table-card { padding: 0; overflow: hidden; }
.table-card > .filters { padding: 16px 16px 12px; margin: 0; }
.table-card > .table-wrap { border: 0; border-top: 1px solid var(--border); border-radius: 0; }
.table-card > .pager { padding: 0 16px 14px; }

/* Stacked tables: rows become cards on phones */
@media (max-width: 767px) {
  table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack tr { position: relative; border: 1px solid var(--border); border-radius: var(--r-lg); padding: 12px 14px; margin-bottom: 10px; background: var(--surface); box-shadow: var(--shadow-xs); }
  table.stack tbody tr:nth-child(even) { background: var(--surface); }
  table.stack tr.selected { background: var(--accent-soft); border-color: var(--accent); }
  table.stack td { border: 0; padding: 4px 0; white-space: normal; text-align: right; min-width: 0; overflow-wrap: anywhere; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
  table.stack td > * { min-width: 0; }
  table.stack td::before { content: attr(data-label); color: var(--muted); font-size: var(--fs-xs); font-weight: 600; text-align: left; flex: none; max-width: 45%; }
  table.stack td .actions { justify-content: flex-end; }
  table.stack td.primary { text-align: left; font-size: var(--fs-base); padding: 0 0 8px; margin-bottom: 4px; border-bottom: 1px solid var(--border); display: block; }
  table.stack td.primary::before, table.stack td.empty::before, table.stack td:not([data-label])::before, table.stack td.sel::before { content: none; }
  table.stack td.empty { display: block; text-align: center; }
  table.stack td.sel { position: absolute; top: 6px; right: 6px; width: auto; padding: 0; }
  table.stack.selectable td.primary { padding-right: 44px; }
  table.stack td.na-cell, #companiesTable td:nth-child(9) { display: none; }
  .table-wrap:has(table.stack) { overflow: visible; max-height: none; border: 0; border-radius: 0; }
  .table-card > .table-wrap:has(table.stack) { padding: 12px; }
  table.stack th { position: static; }
}

/* ============ Pills ============ */
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 1px 9px; border-radius: var(--r-full); background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); font-size: 12px; font-weight: 560; line-height: 18px; white-space: nowrap; margin-right: 4px; vertical-align: middle; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .7; display: none; }
.pill[class*="stage-"]::before { display: inline-block; }
.pill.running, .pill.qualified, .pill.converted, .pill.completed, .pill.sent, .pill.delivered, .pill.interested, .pill.approved, .pill.done,
.pill.stage-interested, .pill.stage-registered, .pill.stage-activated, .pill.act-active { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-border); }
.pill.stage-contacting, .pill.stage-contacted { background: var(--info-bg); color: var(--info); border-color: transparent; }
.pill.stage-link_sent { background: var(--violet-bg); color: var(--violet); border-color: transparent; }
.pill.stage-paying { background: var(--gold-bg); color: var(--gold); border-color: transparent; font-weight: 680; }
.pill.failed, .pill.dnc, .pill.not_interested, .pill.bounced, .pill.complained, .pill.rejected, .pill.overdue, .pill.declined, .pill.escalate,
.pill.stage-do_not_contact, .pill.stage-not_interested, .pill.stage-failed, .pill.stopped { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border); }
.pill.paused, .pill.callback, .pill.pending_approval, .pill.queued, .pill.stage-callback, .pill.callback_request, .pill.stage-busy, .pill.stage-no_answer { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-border); }
.pill.ai { background: var(--accent-soft); color: var(--accent-fg); border-color: transparent; }
.pill[class*="reg-"]:not(.reg-none) { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-border); }

/* ============ Buttons ============ */
button, .btn { font: inherit; font-weight: 600; font-size: var(--fs-md); display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 14px; min-height: 36px; border-radius: var(--r-md); border: 1px solid var(--accent); background: var(--accent); color: var(--accent-text); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s, color .15s, box-shadow .15s; box-shadow: var(--shadow-xs); line-height: 1.2; }
button:hover, .btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); text-decoration: none; }
button .ico, .btn .ico { width: 16px; height: 16px; }
button.secondary, .btn.secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
button.secondary:hover, .btn.secondary:hover { background: var(--hover); border-color: var(--border-strong); }
button.danger, .btn.danger { background: var(--surface); color: var(--danger); border-color: var(--danger-border); }
button.danger:hover, .btn.danger:hover { background: var(--danger-bg); border-color: var(--danger); }
button.ghost, .btn.ghost { background: transparent; color: var(--text-2); border-color: transparent; box-shadow: none; }
button.ghost:hover, .btn.ghost:hover { background: var(--hover); }
button.small, .btn.small { padding: 0 10px; font-size: var(--fs-sm); min-height: 30px; }
button.block, .btn.block { width: 100%; }
.icon-btn { padding: 0; width: 36px; min-width: 36px; }
.icon-btn .ico, .icon-btn svg.icon { width: 19px; height: 19px; }
button:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
button:focus-visible, .btn:focus-visible, a:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-group { display: inline-flex; }
.btn-group > * { border-radius: 0; margin-left: -1px; }
.btn-group > :first-child { border-radius: var(--r-md) 0 0 var(--r-md); margin-left: 0; }
.btn-group > :last-child { border-radius: 0 var(--r-md) var(--r-md) 0; }

/* ============ Forms ============ */
input, select, textarea { font: inherit; font-size: var(--fs-md); padding: 0 10px; min-height: 36px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); color: var(--text); max-width: 100%; min-width: 0; transition: border-color .15s, box-shadow .15s; }
textarea { width: 100%; resize: vertical; padding: 8px 10px; line-height: 1.45; }
select { padding-right: 30px; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23667085' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 8 4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; background-size: 16px; }
input[type="checkbox"], input[type="radio"] { min-height: 0; width: 16px; height: 16px; padding: 0; accent-color: var(--accent); }
input[type="file"] { padding: 6px; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .8; }
input:hover, select:hover, textarea:hover { border-color: var(--muted); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.form { display: flex; flex-wrap: wrap; gap: 12px 14px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.form.tight, .form.panel, .settings.form { margin-top: 0; padding-top: 0; border-top: 0; }
.card.form { margin-top: 0; padding-top: 20px; border-top: 1px solid var(--border); }
.form.panel { margin-top: 12px; padding: 16px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-2); }
.settings.form { padding: 16px; }
.form label { display: flex; flex-direction: column; gap: 5px; font-size: var(--fs-sm); color: var(--text-2); font-weight: 560; flex: 1 1 180px; min-width: 0; }
.form label.full, .form .full { flex-basis: 100%; }
.form label.check, label.check { flex: 0 0 auto; flex-direction: row; align-items: center; gap: 8px; font-size: var(--fs-md); color: var(--text); font-weight: 500; }
.form label input, .form label select, .form label textarea { width: 100%; color: var(--text); font-weight: 400; }
.form .section-title { margin-top: 8px; padding-top: 14px; border-top: 1px dashed var(--border); }
.row { display: flex; gap: 8px; align-items: flex-end; width: 100%; }
.row.wrap { flex-wrap: wrap; }
.row.wrap label { display: flex; flex-direction: column; gap: 5px; font-size: var(--fs-sm); color: var(--text-2); font-weight: 560; flex: 1 1 150px; min-width: 0; }
.row.wrap label.check { flex: 0 0 auto; flex-direction: row; color: var(--text); }
.inline-label { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--muted); font-weight: 560; }
.actions { display: flex; gap: 6px; align-items: center; }
.actions.wrap { flex-wrap: wrap; }
.hint { margin: 0; width: 100%; font-size: var(--fs-sm); color: var(--muted); }
.notice { padding: 10px 14px; border-radius: var(--r-md); background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn-border); margin: 0 0 var(--gap); font-weight: 520; }
.notice.error { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border); }
.form .notice, .tl-body .notice, .result .notice, .msg-detail .notice { margin: 4px 0; }
#notice { position: fixed; left: 50%; transform: translateX(-50%); bottom: 24px; z-index: 80; max-width: min(560px, calc(100vw - 32px)); width: max-content; box-shadow: var(--shadow-lg); margin: 0; background: var(--text); color: var(--bg); border: 0; animation: toast-in .2s var(--ease); }
#notice.error { background: var(--danger-strong); color: #fff; }
@keyframes toast-in { from { transform: translate(-50%, 8px); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }

/* Companies filters */
.filters { display: grid; gap: 12px; margin-bottom: 14px; }
.filter-top { display: flex; gap: 8px; align-items: center; }
.search-box { position: relative; display: flex; align-items: center; flex: 1 1 auto; min-width: 0; }
.search-box .ico { position: absolute; left: 11px; width: 17px; height: 17px; color: var(--muted); pointer-events: none; }
.search-box input { width: 100%; padding-left: 36px; }
.filter-toggle .count { margin-left: 2px; }
.filter-more { display: grid; gap: 10px 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); align-items: end; }
.filter-more label { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-xs); color: var(--muted); font-weight: 600; min-width: 0; }
.filter-more input, .filter-more select { width: 100%; }
@media (min-width: 768px) { .filter-toggle { display: none !important; } }
input.short { max-width: 6rem; }
.count { display: inline-grid; place-items: center; background: var(--accent); color: #fff; border-radius: var(--r-full); font-size: 11px; font-weight: 700; padding: 0 6px; min-width: 20px; height: 20px; line-height: 20px; font-variant-numeric: tabular-nums; }
.count.warn { background: var(--danger-strong); color: #fff; }

/* Bulk action bar */
.bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 16px; background: var(--accent-soft); border-top: 1px solid var(--border); }
.bulk-count { font-size: var(--fs-md); color: var(--text); margin-right: 4px; }
.bulk-value { display: inline-flex; gap: 8px; min-width: 0; }
.bulk-value select, .bulk-value input { min-width: 150px; }

/* ============ States: skeleton, empty, error ============ */
.skel { display: block; border-radius: 6px; height: 12px; background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%); background-size: 400% 100%; animation: shimmer 1.3s ease infinite; }
.skel.lg { height: 26px; width: 60%; margin-top: 6px; }
.skel.sm { height: 10px; width: 40%; }
.skel.w80 { width: 80%; } .skel.w60 { width: 60%; } .skel.w40 { width: 40%; }
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.kpi.skeleton { gap: 8px; }
tr.skel-row td { padding: 14px 12px; }
.skel-stack { display: grid; gap: 12px; padding: 4px 0; }
.empty-state { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 36px 16px; color: var(--muted); }
.empty-state .ico { width: 34px; height: 34px; color: var(--border-strong); margin-bottom: 4px; }
.empty-state b { color: var(--text); font-size: var(--fs-base); }
.state-error { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border: 1px solid var(--danger-border); background: var(--danger-bg); color: var(--danger); border-radius: var(--r-lg); }
.state-error .ico { width: 20px; height: 20px; }
.state-error .msg { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.state-error .msg b { display: block; }
.view-error { margin-bottom: 0; }

/* ============ Company profile ============ */
.profile-head { display: grid; gap: 14px; }
.back { font-size: var(--fs-sm); display: inline-flex; align-items: center; gap: 4px; width: max-content; color: var(--muted); font-weight: 560; }
.back .ico { width: 15px; height: 15px; }
.profile-title { display: flex; gap: 14px; align-items: center; min-width: 0; }
.profile-title-text { min-width: 0; }
.profile-title h2 { margin: 0; font-size: var(--fs-2xl); overflow-wrap: anywhere; letter-spacing: -.02em; line-height: 1.2; }
#profileSubline { font-size: var(--fs-md); margin-top: 2px; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; margin: 0; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.facts > div { padding: 10px 14px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); margin: 0 -1px -1px 0; min-width: 0; }
.facts dt { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }
.facts dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.quick-actions button { min-height: 36px; }
.profile-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; margin-bottom: -4px; }
.profile-tabs::-webkit-scrollbar { display: none; }
.profile-tabs button { background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--muted); box-shadow: none; padding: 0 14px; min-height: 42px; font-weight: 600; }
.profile-tabs button:hover { color: var(--text); background: transparent; }
.profile-tabs button[aria-selected="true"] { color: var(--accent-fg); border-bottom-color: var(--accent); }
.tab-n { font-size: var(--fs-xs); color: var(--muted); background: var(--surface-2); border-radius: var(--r-full); padding: 0 6px; min-width: 20px; text-align: center; line-height: 18px; }
.tab-n:empty { display: none; }
.profile-grid { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 360px) minmax(0, 1fr); align-items: start; }
.profile-grid .col { display: grid; gap: var(--gap); min-width: 0; }
.profile-main > [data-pane] { display: none; }
#profileGrid[data-tab="activity"] [data-pane="activity"], #profileGrid[data-tab="calls"] [data-pane="calls"], #profileGrid[data-tab="emails"] [data-pane="emails"],
#profileGrid[data-tab="tasks"] [data-pane="tasks"], #profileGrid[data-tab="details"] [data-pane="details"] { display: block; }
@media (min-width: 1024px) { .profile-tabs [data-ptab="overview"] { display: none; } }
@media (max-width: 1023px) {
  .profile-grid { grid-template-columns: minmax(0, 1fr); }
  #profileGrid:not([data-tab="overview"]) .profile-aside { display: none; }
  #profileGrid[data-tab="overview"] .profile-main { display: none; }
}
.kv { grid-template-columns: minmax(96px, auto) 1fr; gap: 8px 14px; margin: 0; font-size: var(--fs-md); }
.kv dt { color: var(--muted); font-weight: 520; }
.kv dd { font-weight: 520; }
.memory { display: grid; grid-template-columns: minmax(80px, auto) 1fr; gap: 6px 14px; margin: 0; font-size: var(--fs-md); }
.memory dt { color: var(--muted); text-transform: capitalize; }
.memory dd { margin: 0; overflow-wrap: anywhere; }
.memory p { grid-column: 1 / -1; margin: 0; }
.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.list > li { padding-bottom: 10px; border-bottom: 1px solid var(--border); font-size: var(--fs-md); min-width: 0; }
.list > li:last-child { border-bottom: 0; padding-bottom: 0; }
.inline-form { display: flex; gap: 8px; flex-wrap: wrap; }
.inline-form input[name="title"] { flex: 2 1 160px; }
.inline-form input, .inline-form select { flex: 1 1 120px; }

.note-form { display: flex; gap: 8px; align-items: flex-end; margin-bottom: 10px; }
.note-form textarea { flex: 1; }
.tl-filter { margin: 4px 0 12px; gap: 6px; }
.chip-check { border: 1px solid var(--border); border-radius: var(--r-full); padding: 3px 12px 3px 8px; font-size: var(--fs-sm) !important; min-height: 30px; cursor: pointer; background: var(--surface); }
.chip-check:has(input:checked) { background: var(--accent-soft); border-color: transparent; color: var(--accent-fg); }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.tl { display: grid; grid-template-columns: 7rem 1fr; gap: 14px; padding: 14px 0; border-top: 1px solid var(--border); min-width: 0; }
.timeline > .tl:first-child { border-top: 0; }
.tl-time { font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; padding-top: 3px; }
.tl-content { min-width: 0; }
.tl-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tl-icon { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--surface-2); color: var(--muted); flex: none; }
.tl-icon .ico { width: 14px; height: 14px; }
.tl.call .tl-icon { background: var(--info-bg); color: var(--info); }
.tl.email .tl-icon { background: var(--violet-bg); color: var(--violet); }
.tl.note .tl-icon { background: var(--warn-bg); color: var(--warn); }
.tl-body { margin-top: 6px; font-size: var(--fs-md); overflow-wrap: anywhere; }
.tl.activity .tl-body { color: var(--muted); font-size: var(--fs-sm); }
.tl.note .note-text { white-space: pre-wrap; background: var(--warn-bg); padding: 8px 12px; border-radius: var(--r-md); }
.tl .subject { font-weight: 620; }
.tl details { margin-top: 6px; }
.tl summary { cursor: pointer; color: var(--accent-fg); font-size: var(--fs-sm); font-weight: 560; }
.audio { width: 100%; max-width: 440px; margin: 6px 0; display: block; height: 40px; }
.modal-audio { margin-bottom: 12px; }
.mail-body { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: var(--fs-md); background: var(--surface-2); padding: 10px 14px; border-radius: var(--r-md); margin: 6px 0; max-width: 100%; }
@media (max-width: 520px) { .tl { grid-template-columns: 1fr; gap: 4px; } }

/* ============ Pipeline board ============ */
.board { display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px 12px; align-items: flex-start; scrollbar-width: thin; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.lane { flex: 0 0 286px; display: flex; flex-direction: column; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-lg); max-height: calc(100dvh - 210px); min-height: 160px; min-width: 0; }
.lane-head { display: flex; align-items: center; gap: 8px; padding: 12px 12px 10px; border-bottom: 1px solid var(--border); }
.lane-head h3 { margin: 0; width: auto; font-size: var(--fs-md); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lane-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--muted); }
.lane-n { font-size: var(--fs-xs); font-weight: 650; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-full); padding: 0 8px; line-height: 20px; font-variant-numeric: tabular-nums; }
.lane-body { padding: 10px; display: grid; gap: 8px; overflow-y: auto; align-content: start; flex: 1 1 auto; min-height: 60px; transition: background .15s; border-radius: 0 0 var(--r-lg) var(--r-lg); }
.lane.drop-ok .lane-body { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.lane-more { font-size: var(--fs-sm); text-align: center; padding: 6px; }
.lane-empty { font-size: var(--fs-sm); color: var(--muted); text-align: center; padding: 18px 6px; border: 1px dashed var(--border-strong); border-radius: var(--r-md); }
.lane.collapsed { flex-basis: 56px; cursor: pointer; }
.lane.collapsed .lane-head { flex-direction: column; border: 0; padding: 12px 4px; gap: 10px; }
.lane.collapsed .lane-head h3 { writing-mode: vertical-rl; transform: rotate(180deg); overflow: visible; }
.lane.collapsed .lane-body { display: none; }
.lane-toggle { min-height: 28px; width: 28px; padding: 0; }
.lane-sub { font-size: var(--fs-xs); font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin: 6px 2px 0; display: flex; justify-content: space-between; }
.deal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 12px; display: grid; gap: 6px; box-shadow: var(--shadow-xs); min-width: 0; cursor: grab; transition: box-shadow .15s, border-color .15s; }
.deal:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.deal.dragging { opacity: .5; }
.deal.locked { cursor: default; }
.deal-top { display: flex; align-items: flex-start; gap: 8px; }
.deal-name { font-weight: 640; color: var(--text); flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; line-height: 1.3; }
.deal-name:hover { color: var(--accent-fg); }
.deal-score { font-size: var(--fs-xs); font-weight: 700; padding: 0 7px; border-radius: var(--r-full); background: var(--surface-2); color: var(--text-2); line-height: 20px; flex: none; font-variant-numeric: tabular-nums; }
.deal-score.hot { background: var(--ok-bg); color: var(--ok); }
.deal-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: var(--fs-xs); color: var(--muted); }
.deal-meta span { display: inline-flex; align-items: center; gap: 4px; }
.deal-meta .ico { width: 13px; height: 13px; }
.deal-next { font-size: var(--fs-xs); color: var(--text-2); }
.deal-next.overdue { color: var(--danger); font-weight: 600; }
.deal-move { display: flex; }
.deal-move select { width: 100%; min-height: 30px; font-size: var(--fs-sm); color: var(--muted); }

/* ============ Inbox ============ */
.folders { display: flex; gap: 4px; overflow-x: auto; padding: 4px; scrollbar-width: none; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); width: max-content; max-width: 100%; }
.folders::-webkit-scrollbar { display: none; }
.folders button { background: transparent; color: var(--muted); border-color: transparent; white-space: nowrap; box-shadow: none; min-height: 32px; font-size: var(--fs-sm); }
.folders button:hover { background: var(--hover); color: var(--text); }
.folders button[aria-selected="true"] { background: var(--surface); border-color: var(--border); color: var(--text); box-shadow: var(--shadow-sm); }
.inbox { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--gap); align-items: start; }
.msg-list { list-style: none; margin: 0; padding: 6px; max-height: calc(100dvh - 210px); overflow-y: auto; }
.msg-list li.empty { padding: 24px; text-align: center; }
.msg { display: block; width: 100%; text-align: left; background: transparent; color: var(--text); border: 0; border-radius: var(--r-md); padding: 10px 12px; box-shadow: none; white-space: normal; font-weight: 400; min-height: 0; line-height: 1.4; }
.msg:hover { background: var(--hover); }
.msg-list li + li .msg { margin-top: 2px; }
.msg.selected { background: var(--accent-soft); }
.msg.inbound .msg-subject { font-weight: 650; }
.msg-top { display: flex; justify-content: space-between; gap: 8px; }
.msg-who { font-weight: 620; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-subject { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-md); }
.msg-preview { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.msg-tags { margin-top: 4px; }
.msg-detail { min-width: 0; position: sticky; top: 88px; max-height: calc(100dvh - 120px); overflow-y: auto; }
.detail-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.meta { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: var(--fs-md); margin: 0 0 12px; }
.meta dt { color: var(--muted); }
.meta dd { margin: 0; overflow-wrap: anywhere; min-width: 0; }
.back-mobile { display: none !important; }
@media (max-width: 900px) {
  .inbox { grid-template-columns: minmax(0, 1fr); }
  .msg-list, .msg-detail { max-height: none; position: static; }
  .msg-detail:not(.open) { display: none; }
  .msg-detail.open + * { display: none; }
  .inbox:has(.msg-detail.open) .msg-list { display: none; }
  .back-mobile { display: inline-flex !important; }
}

/* ============ Calendar ============ */
.week-wrap { overflow-x: auto; }
.week { display: grid; grid-template-columns: repeat(7, minmax(150px, 1fr)); gap: 8px; min-width: 1050px; }
.day { background: var(--surface-2); border-radius: var(--r-md); padding: 8px; min-height: 200px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.day.today { box-shadow: inset 0 0 0 2px var(--accent); background: var(--accent-soft); }
.day-head { font-weight: 650; font-size: var(--fs-sm); padding: 2px 4px; color: var(--text-2); }
.task-item { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--border-strong); border-radius: var(--r-md); padding: 8px 10px; font-size: var(--fs-sm); min-width: 0; overflow-wrap: anywhere; }
.list > li.task-item { border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.task-item.call { border-left-color: var(--accent); }
.task-item.pending { border-left-color: #f79009; background: var(--warn-bg); }
.task-item.overdue { border-left-color: var(--danger-strong); background: var(--danger-bg); }
.task-item.closed { opacity: .6; }
.task-item.closed .task-title { text-decoration: line-through; }
.task-head { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.task-time { font-weight: 650; font-variant-numeric: tabular-nums; margin-right: 4px; }
.task-title { margin: 4px 0; font-weight: 520; }
.task .actions { margin-top: 6px; }
.resched { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.resched input { flex: 1 1 140px; }
.task-item.compact .task-head .pill { font-size: 11px; }
.cal-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.cal-day-head { font-weight: 650; margin-top: 10px; color: var(--text-2); }
.cal-day-head.today { color: var(--accent-fg); }
.overdue-box { margin-bottom: 12px; border: 1px solid var(--danger-border); background: var(--danger-bg); border-radius: var(--r-md); padding: 10px 14px; }
.overdue-box summary { cursor: pointer; color: var(--danger); font-weight: 650; }
.overdue-box .list { margin-top: 8px; }

/* ============ Dialogs, call modal & transcript ============ */
dialog { border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--surface); color: var(--text); padding: 20px; width: min(720px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); box-shadow: var(--shadow-lg); }
dialog::backdrop { background: rgb(10 14 24 / .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.modal-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 6px; }
.modal-head h2 { margin: 0; font-size: var(--fs-lg); }
.summary { margin: 10px 0; padding: 10px 14px; border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: 0 var(--r-md) var(--r-md) 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.transcript { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.bubble { max-width: 80%; padding: 8px 12px; border-radius: 14px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--fs-md); }
.bubble .who { display: block; font-size: 11px; color: var(--muted); margin-bottom: 2px; text-transform: capitalize; font-weight: 600; }
.bubble.agent { align-self: flex-start; background: var(--agent-bg); border-bottom-left-radius: 4px; }
.bubble.customer { align-self: flex-end; background: var(--cust-bg); border-bottom-right-radius: 4px; }
.bubble.system { align-self: center; font-size: var(--fs-sm); color: var(--muted); font-style: italic; }
#tokenModal { width: min(420px, calc(100vw - 32px)); padding: 28px; }
#tokenForm { display: grid; gap: 14px; }
#tokenForm h2 { margin: 0; font-size: var(--fs-xl); }
#tokenForm .hint { margin-top: -6px; }
#tokenForm label { display: flex; flex-direction: column; gap: 6px; font-weight: 560; font-size: var(--fs-sm); color: var(--text-2); }
.token-brand { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.token-brand b { color: var(--text); }

/* ============ Agent & integrations ============ */
.section-gap { margin-top: 20px; }
.settings-link { margin-left: auto; align-self: center; font-size: var(--fs-sm); padding: 8px 0; }
.steps { margin: 4px 0 0; padding-left: 20px; display: grid; gap: 6px; font-size: var(--fs-md); overflow-wrap: anywhere; }
.danger-text { color: var(--danger); }
#agentFacts { max-height: 420px; overflow-y: auto; }
#secretBox { scroll-margin-top: 120px; }
#secretValue { font-family: var(--mono); }
#platformActions { margin-top: 4px; }

/* ============ Role-aware UI ============ */
body.role-viewer [data-write] { display: none !important; }
body.role-viewer #modeSelect, body.role-viewer #estopBtn { opacity: .55; pointer-events: none; }

/* ============ Tablet ============ */
@media (max-width: 1023px) {
  main { padding: 20px 20px 40px; }
  .topbar-row { padding: 10px 20px; }
  .settings { margin: 0 20px 12px; }
}

/* ============ Phone ============ */
@media (max-width: 767px) {
  :root { --bottom-bar-h: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
  .sidebar { display: none; }
  main { padding: 12px max(12px, env(safe-area-inset-right)) calc(var(--tabbar-h) + 28px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
  .card { padding: 14px; border-radius: var(--r-lg); }
  .topbar-row { padding: calc(6px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 6px max(12px, env(safe-area-inset-left)); gap: 8px; min-height: 0; flex-wrap: nowrap; }
  .page-title, .live, .controlbar, .import-btn { display: none !important; }
  .badge { font-size: 10px; padding: 0 6px; line-height: 16px; }
  .estop { padding: 0 12px; font-size: 13px; letter-spacing: .02em; flex: none; }
  .estop .lbl-long { display: none; }
  .estop .lbl-short { display: inline; }
  .spend-strip { display: flex; align-items: center; gap: 8px 10px; justify-content: space-between; flex-wrap: wrap; padding: 0 2px 10px; }
  .spend-mobile { display: flex; font-size: var(--fs-xs); gap: 4px 12px; flex-wrap: wrap; }
  .spend-strip .mode-select { width: auto; min-width: 0; max-width: 52%; font-size: 15px; min-height: 36px; }
  .alert-banner, .estop-banner { padding: 8px 14px; }
  .page-head h2 { font-size: var(--fs-lg); }
  [data-view="pipeline"] .page-head { display: none; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kpi { padding: 12px; }
  .kpi .value { font-size: 1.3rem; }
  .stage-row { grid-template-columns: 7.5rem 1fr 2.5rem; gap: 8px; padding: 6px 4px; }
  .bubble { max-width: 92%; }
  .note-form { flex-direction: column; align-items: stretch; }
  /* Touch: 40px tap targets; 16px text in fields so iOS Safari does not zoom on focus. */
  button, button.small { min-height: 40px; }
  button, button.small, .btn, .btn.small, .chip, .chip-check, .folders button { min-height: 44px; }
  button.small, .btn.small { padding: 0 12px; }
  input, select, textarea { font-size: 16px; min-height: 44px; }
  input[type="checkbox"], input[type="radio"] { min-height: 0; width: 22px; height: 22px; }
  .settings-link { margin-left: 0; flex-basis: 100%; }
  .icon-btn { width: 44px; min-width: 44px; }
  .page-head .actions > * { flex: 1 1 auto; }
  .filter-more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-more:not(.open) { display: none; }
  .table-card { overflow: visible; background: transparent; border: 0; box-shadow: none; }
  .table-card > .filters { padding: 0; margin-bottom: 12px; }
  .table-card > .table-wrap { border-top: 0; }
  .table-card > .table-wrap:has(table.stack) { padding: 0; }
  .table-card > .pager { padding: 0; }
  .bulk-bar { position: fixed; z-index: 40; left: 8px; right: 8px; bottom: calc(var(--tabbar-h) + 8px + env(safe-area-inset-bottom)); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--border); background: var(--surface); padding: 10px 12px; }
  .bulk-bar select, .bulk-value, .bulk-value select, .bulk-value input { flex: 1 1 100%; min-width: 0; width: 100%; }
  .bulk-bar #bulkApply { flex: 1 1 auto; }
  .lane { flex-basis: 84vw; scroll-snap-align: start; max-height: none; }
  .board { scroll-snap-type: x mandatory; scroll-padding: 0 12px; margin: 0 -12px; padding: 2px 12px 12px; }
  .lane.collapsed { flex-basis: 64px; }
  .profile-title h2 { font-size: var(--fs-xl); }
  .avatar.lg { width: 44px; height: 44px; font-size: 16px; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quick-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quick-actions button { width: 100%; }
  .profile-tabs { margin: 0 -12px -4px; padding: 0 12px; position: sticky; top: calc(56px + env(safe-area-inset-top)); z-index: 5; background: var(--bg); }
  .profile-tabs button { padding: 0 12px; }
  .folders { width: 100%; }
  .msg-list { padding: 4px; }
  dialog { width: 100%; max-width: 100%; max-height: 92dvh; margin: auto 0 0; border-radius: 20px 20px 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); }
  #tokenModal { margin: auto; border-radius: var(--r-xl); width: calc(100vw - 24px); }
  #notice { bottom: calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom)); }
  .grid2.even { gap: 12px; }

  .tabbar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--topbar-bg); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); border-top: 1px solid var(--border); padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
  .tabbar a, .tabbar button { all: unset; box-sizing: border-box; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: var(--tabbar-h); min-width: 44px; color: var(--muted); font-size: 10.5px; font-weight: 600; cursor: pointer; text-align: center; }
  .tabbar .ico { width: 24px; height: 24px; }
  .tabbar [aria-current="page"], .tabbar [aria-expanded="true"] { color: var(--accent-fg); }
  .tabbar .count { position: absolute; top: 5px; left: calc(50% + 6px); min-width: 18px; height: 18px; line-height: 18px; font-size: 10px; padding: 0 5px; }
  .tabbar a:focus-visible, .tabbar button:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; border-radius: 10px; }
}
@media (max-width: 380px) {
  .estop { padding: 0 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ============ Access page (access.js) ============ */
.access-created { margin: 12px 0; display: grid; gap: 8px; }
.access-created input { width: 100%; font-size: 16px; }
.access-row, .audit-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.access-row.revoked { opacity: .6; }
.audit-row { display: block; }
.audit-row.failed .mono { color: var(--danger-strong); }
.audit-top { display: flex; justify-content: space-between; gap: 8px; }
.audit-row .mono { overflow-wrap: anywhere; font-size: var(--fs-sm); }
.warn-text { color: var(--warn); font-weight: 600; }
.mono { font-family: var(--mono); }
#accessRoot { display: grid; gap: var(--gap); min-width: 0; }

/* ============ Lead sources (leadSources.js) ============ */
#sourcesRoot { display: grid; gap: var(--gap); min-width: 0; }
#sourcesRoot .pill.created, #sourcesRoot .pill.ok { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-border); }
#sourcesRoot .pill.updated { background: var(--accent-soft); color: var(--accent-fg); border-color: transparent; }
#sourcesRoot .pill.duplicate { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-border); }
.src-off { opacity: .75; }
.src-meta { margin: 0 0 12px; overflow-wrap: anywhere; }
.src-kpis { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.src-settings, .src-actions, .src-filters { margin-top: 12px; }
.src-settings select, .src-filters select { width: 100%; min-width: 0; }
.src-keybox { border-color: var(--danger-border); }
.src-keyrow { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; margin-bottom: 12px; }
.src-keyrow input { flex: 1 1 220px; min-width: 0; font-family: var(--mono); }
.src-code { margin: 8px 0; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); font: .78rem/1.45 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; }
.src-url { overflow-wrap: anywhere; }
.src-reasons { overflow-wrap: anywhere; max-width: 28rem; }
@media (max-width: 767px) {
  .src-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .src-keyrow button, .src-actions button { min-height: 44px; flex: 1 1 auto; }
  .src-keyrow input, .src-settings select, .src-filters select { font-size: 16px; min-height: 44px; }
  .src-reasons { max-width: none; }
}

/* ============ Manager & agents (manager.js) ============ */
.mgr-grid { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; min-width: 0; }
.mgr-side { display: grid; gap: var(--gap); min-width: 0; }
.mgr-chat { display: flex; flex-direction: column; min-width: 0; }
.mgr-chat-list { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; overscroll-behavior: contain; min-height: 220px; max-height: min(62vh, 640px); padding: 4px 2px 8px; -webkit-overflow-scrolling: touch; }
.mgr-msg { max-width: 88%; padding: 8px 12px; border-radius: 14px; overflow-wrap: anywhere; font-size: var(--fs-md); }
.mgr-msg .who { display: block; font-size: 11px; color: var(--muted); margin-bottom: 2px; font-weight: 600; }
.mgr-msg .body { white-space: pre-wrap; }
.mgr-msg.user { align-self: flex-end; background: var(--cust-bg); border-bottom-right-radius: 4px; }
.mgr-msg.assistant { align-self: flex-start; background: var(--agent-bg); border-bottom-left-radius: 4px; }
.mgr-msg.pending .body { color: var(--muted); font-style: italic; }
.mgr-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.mgr-chip { display: inline-block; max-width: 100%; padding: 1px 8px; border-radius: var(--r-full); font-size: 11px; background: var(--surface); border: 1px solid var(--border); color: var(--muted); overflow-wrap: anywhere; }
.mgr-chip.write { color: var(--ok); border-color: var(--ok-border); background: var(--ok-bg); }
.mgr-chip.failed { color: var(--danger); border-color: var(--danger-border); background: var(--danger-bg); }
.mgr-chat-form { display: flex; gap: 8px; align-items: flex-end; padding-top: 10px; border-top: 1px solid var(--border); background: var(--surface); position: sticky; bottom: 0; }
.mgr-chat-form textarea { flex: 1 1 auto; min-height: 44px; max-height: 30vh; resize: none; font-size: 16px; }
.mgr-send { min-height: 44px; min-width: 4.5rem; }
.mgr-note { margin: 0 0 8px; }
.mgr-empty { margin: 4px 0; font-size: var(--fs-md); }
.mgr-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--fs-md); max-height: 420px; overflow-y: auto; }
.mgr-proposals { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mgr-proposal { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); overflow-wrap: anywhere; }
.mgr-actions { align-items: center; flex-wrap: wrap; width: auto; }
.agent-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); min-width: 0; }
.agent-card { display: grid; gap: 8px; align-content: start; }
.agent-card .card-head { margin-bottom: 0; }
.agent-card h3 { width: auto; margin: 0; }
.agent-card p { margin: 0; }
.agent-card.agent-blocked { border-color: var(--danger-border); }
.agent-card.agent-paused { border-color: var(--warn-border); }
.pill.idle { color: var(--muted); }
.agent-counts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; }
.agent-counts > div { background: var(--surface-2); border-radius: var(--r-md); padding: 6px 10px; min-width: 0; }
.agent-counts dt { font-size: 11px; color: var(--muted); font-weight: 600; }
.agent-counts dd { margin: 0; font-size: var(--fs-lg); font-weight: 680; font-variant-numeric: tabular-nums; }
.agent-recent summary { cursor: pointer; font-size: var(--fs-md); padding: 6px 0; min-height: 40px; display: flex; align-items: center; }
.agent-recent ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: var(--fs-sm); overflow-wrap: anywhere; }
@media (max-width: 900px) { .mgr-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) {
  .mgr-chat-list { max-height: 55vh; min-height: 180px; }
  .mgr-msg { max-width: 94%; }
  .agent-grid { grid-template-columns: minmax(0, 1fr); }
  .mgr-actions button { min-height: 44px; }
}

/* ============ Projects scope, language switch, sub-tabs (app.js shell) ============ */
:root { --topbar-h: 64px; }
.proj-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); flex: none; box-shadow: 0 0 0 2px rgb(255 255 255 / .12); }
.proj-dot.lg { width: 14px; height: 14px; }
.proj-dot.all { background: conic-gradient(#2563eb 0 25%, #db2777 0 50%, #16a34a 0 75%, #ea580c 0); }
.proj-status { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 650; padding: 1px 8px; border-radius: var(--r-full); line-height: 18px; white-space: nowrap; border: 1px solid var(--border); color: var(--muted); background: var(--surface-2); }
.proj-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.proj-status.ps-active { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-border); }
.proj-status.ps-paused { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-border); }
.proj-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-full); padding: 0 8px 0 6px; line-height: 18px; white-space: nowrap; vertical-align: middle; margin-left: 6px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.proj-badge .proj-dot { width: 8px; height: 8px; box-shadow: none; }
.msg-tags .proj-badge, .deal-meta .proj-badge, .badges .proj-badge, dd .proj-badge, td.col-project .proj-badge { margin-left: 0; }

.proj-switch { min-width: 0; }
.proj-btn { width: 100%; justify-content: flex-start; gap: 10px; padding: 6px 10px; min-height: 44px; text-align: left; font-weight: 600; box-shadow: none; }
.proj-btn-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; flex: 1 1 auto; }
.proj-btn-kicker { font-size: 10.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; opacity: .65; }
.proj-btn-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-md); }
.proj-btn .proj-caret { width: 16px; height: 16px; opacity: .7; }
.proj-btn .proj-status { flex: none; }
.proj-switch.side { padding: 0 10px 8px; }
.proj-switch.side .proj-btn { background: var(--nav-bg-2); border: 1px solid var(--nav-border); color: #fff; }
.proj-switch.side .proj-btn:hover { background: rgb(255 255 255 / .08); }
.proj-switch.side .proj-status { background: transparent; border-color: rgb(255 255 255 / .14); }
.proj-switch.side .proj-status.ps-active { color: #6ce9a6; }
.proj-switch.side .proj-status.ps-paused { color: #fdb022; }
.proj-switch.side .proj-status.ps-inactive { color: var(--nav-muted); }
.proj-switch.side .proj-btn .proj-status { display: none; }
.sidebar.is-min .proj-switch.side { padding: 0 12px 8px; }
.sidebar.is-min .proj-btn { justify-content: center; padding: 0; }
.sidebar.is-min .proj-btn-text, .sidebar.is-min .proj-btn .proj-caret, .sidebar.is-min .proj-btn .proj-status { display: none; }
.sidebar.is-min .proj-btn .proj-dot { width: 14px; height: 14px; }
.proj-switch.top { flex: 0 1 auto; }
.proj-switch.top .proj-btn { background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--r-full); min-height: 40px; padding: 4px 12px 4px 12px; max-width: 320px; }
.proj-switch.top .proj-btn:hover { background: var(--hover); }
.proj-switch.top .proj-btn-kicker { display: none; }
.proj-switch.top .proj-btn-name { font-size: var(--fs-md); font-weight: 650; }
body.scope-all .proj-switch.top .proj-btn { border-style: dashed; }
@media (min-width: 768px) { .proj-switch.top .proj-status { display: none; } }

.proj-menu { position: fixed; z-index: 90; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden; animation: toast-in-menu .14s var(--ease); }
@keyframes toast-in-menu { from { transform: translateY(-4px); opacity: 0; } to { transform: none; opacity: 1; } }
.proj-menu-list { overflow-y: auto; padding: 6px; overscroll-behavior: contain; }
.proj-item { width: 100%; justify-content: flex-start; gap: 10px; background: transparent; color: var(--text); border: 0; box-shadow: none; min-height: 40px; padding: 0 10px; font-weight: 550; border-radius: var(--r-md); }
.proj-item:hover, .proj-item:focus-visible { background: var(--hover); }
.proj-item-name { flex: 1 1 auto; text-align: left; overflow: hidden; text-overflow: ellipsis; }
.proj-item .proj-check { width: 16px; height: 16px; color: var(--accent-fg); visibility: hidden; }
.proj-item[aria-checked="true"] { background: var(--accent-soft); color: var(--accent-fg); }
.proj-item[aria-checked="true"] .proj-check { visibility: visible; }
.proj-menu-foot { border-top: 1px solid var(--border); padding: 6px; display: grid; gap: 2px; background: var(--surface-2); }
.proj-link { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border-radius: var(--r-md); color: var(--text); font-weight: 600; }
.proj-link:hover, .proj-link:focus-visible { background: var(--hover); text-decoration: none; }
.proj-link .ico { width: 17px; height: 17px; color: var(--muted); }

.lang-switch { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border); flex: none; }
.lang-switch button { min-height: 30px; padding: 0 9px; border: 0; background: transparent; color: var(--muted); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; box-shadow: none; border-radius: 6px; }
.lang-switch button:hover { background: transparent; color: var(--text); }
.lang-switch button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.lang-switch.dark { background: var(--nav-bg-2); border-color: transparent; }
.lang-switch.dark button { color: var(--nav-muted); }
.lang-switch.dark button:hover { color: #fff; }
.lang-switch.dark button[aria-pressed="true"] { background: rgb(255 255 255 / .1); color: #fff; box-shadow: none; }
.lang-switch.wide-switch { display: flex; max-width: 420px; }
.lang-switch.wide-switch button { flex: 1 1 0; min-height: 40px; font-size: var(--fs-md); letter-spacing: 0; font-weight: 600; }
.side-switches { display: flex; gap: 6px; align-items: stretch; }
.side-switches .theme-switch { flex: 1 1 auto; }
.sidebar.is-min .side-switches { flex-direction: column; align-items: center; }
.sidebar.is-min .side-switches .lang-switch { display: none; }
.sidebar:not(.is-min) .theme-switch button .lbl { display: none; }

.page-title { flex-direction: column; }
.page-kicker { font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); line-height: 1; }
.page-kicker:empty { display: none; }
.limits-link .ico { width: 16px; height: 16px; }

.subtabs { position: sticky; top: var(--topbar-h); z-index: 15; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  margin: -24px -28px 18px; padding: 0 28px; background: var(--bg); border-bottom: 1px solid var(--border); }
.subtabs::-webkit-scrollbar { display: none; }
.subtabs a { position: relative; display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 46px; padding: 0 12px; color: var(--muted); font-weight: 600; font-size: var(--fs-md); white-space: nowrap; text-decoration: none; }
.subtabs a:hover { color: var(--text); text-decoration: none; }
.subtabs a[aria-current="page"] { color: var(--text); }
.subtabs a[aria-current="page"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px 2px 0 0; background: var(--accent); }
.subtabs .count { height: 18px; min-width: 18px; line-height: 18px; font-size: 10px; padding: 0 5px; }
.side-nav a .count { margin-left: auto; }

.estop { gap: 6px; }
.estop .ico { width: 16px; height: 16px; }
.estop.on .lbl-long, .estop.on .lbl-short { letter-spacing: .02em; }
.estop-banner { display: flex; align-items: center; justify-content: center; gap: 10px 14px; flex-wrap: wrap; }
.estop-banner .estop-release { background: #fff; color: var(--danger-strong); border-color: #fff; min-height: 30px; }
.estop-banner .estop-release:hover { background: #fde8e7; }

/* campaigns list: project column only for All projects */
#campaignsTable.scoped .col-project { display: none; }
.lang-field { flex-basis: 260px; }
.field-hint { font-size: var(--fs-xs); color: var(--muted); font-weight: 450; line-height: 1.4; }

/* limits & preferences */
.mode-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.ctl-big { display: flex; flex-direction: column; gap: 5px; font-size: var(--fs-sm); font-weight: 560; color: var(--text-2); min-width: 220px; }
.mode-row .hint { flex: 1 1 320px; }
.settings-form h2 { margin-bottom: 0; }
.prefs-card { display: grid; gap: 10px; max-width: 760px; }
.prefs-card h2 { margin: 0; }
.prefs-card .theme-switch.wide-switch { max-width: 420px; }
.prefs-card .sheet-user { padding: 0; border: 0; background: transparent; }
.prefs-card .row { justify-content: flex-start; }

/* ============ Settings > Projects (projects.js) ============ */
.pj-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); align-items: start; }
.pj-card { display: grid; gap: 12px; }
.pj-card.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-sm); }
.pj-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pj-head h2, .pj-head h3 { margin: 0; font-size: var(--fs-lg); overflow: hidden; text-overflow: ellipsis; }
.pj-title { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.pj-desc { margin: 0; color: var(--text-2); font-size: var(--fs-md); }
.pj-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.pj-stat { background: var(--surface); padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pj-stat-v { font-weight: 700; font-size: var(--fs-base); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pj-stat-k { font-size: 11px; color: var(--muted); line-height: 1.25; }
.pj-meta { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: var(--fs-sm); }
.pj-meta dt { color: var(--muted); }
.pj-meta dd { margin: 0; overflow-wrap: anywhere; }
.pj-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-top: 10px; border-top: 1px solid var(--border); }
.pj-actions-gap { flex: 1 1 auto; }
.pj-actions .btn .ico { width: 15px; height: 15px; }
.pj-form { display: grid; gap: 16px; margin-top: 12px; }
.pj-section { border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px 16px 16px; margin: 0; min-width: 0; }
.pj-section legend { font-weight: 650; padding: 0 6px; margin-left: -6px; }
.pj-section > .hint { margin-bottom: 10px; }
.pj-form .form label textarea { min-height: 0; }
.pj-color input[type="color"] { padding: 2px; height: 36px; width: 64px; }
.pj-lang-field { display: grid; gap: 10px; }
.pj-langs { display: flex; flex-wrap: wrap; gap: 6px; }
.pj-lang { display: inline-flex !important; flex: 0 0 auto !important; flex-direction: row !important; align-items: center; gap: 6px !important; border: 1px solid var(--border-strong); border-radius: var(--r-full); padding: 4px 10px; min-height: 32px; font-weight: 550 !important; color: var(--text) !important; background: var(--surface); cursor: pointer; }
.pj-lang:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-fg) !important; }
.pj-lang input { width: 15px !important; height: 15px; }
.pj-lang-field > label { max-width: 320px; }
.pj-form-actions { justify-content: flex-start; }
.pj-steps { list-style: none; display: flex; gap: 8px; margin: 0 0 14px; padding: 0; counter-reset: none; flex-wrap: wrap; }
.pj-steps li { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--muted); font-weight: 600; flex: 1 1 0; min-width: 0; padding-bottom: 8px; border-bottom: 3px solid var(--border); }
.pj-steps li.on { color: var(--text); border-color: var(--accent); }
.pj-steps li.done { color: var(--ok); border-color: var(--ok); }
.pj-step-n { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 12px; background: var(--surface-2); flex: none; }
.pj-steps li.on .pj-step-n { background: var(--accent); color: #fff; }
.pj-steps li.done .pj-step-n { background: var(--ok-bg); }
.pj-steps .ico { width: 13px; height: 13px; }
.pj-wizard .notice { margin: 0; }
[data-view="projects"] .back, .view > .back { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }

@media (max-width: 1023px) {
  .subtabs { margin: -20px -20px 16px; padding: 0 20px; }
}
@media (max-width: 767px) {
  .proj-switch.top { flex: 1 1 auto; }
  .proj-switch.top .proj-btn { max-width: none; border-radius: var(--r-md); min-height: 44px; padding: 4px 10px; }
  .proj-switch.top .proj-btn-kicker { display: block; }
  .proj-switch.top .proj-status { font-size: 10px; padding: 0 6px; }
  .proj-switch.top .proj-status::before { display: none; }
  .lang-switch.top button { min-height: 36px; padding: 0 8px; }
  .subtabs { margin: -12px calc(-1 * max(12px, env(safe-area-inset-right))) 12px calc(-1 * max(12px, env(safe-area-inset-left))); padding: 0 max(8px, env(safe-area-inset-left)); }
  .subtabs a { min-height: 44px; padding: 0 10px; font-size: var(--fs-md); }
  .spend-strip-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .pj-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pj-meta { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pj-meta dd { margin-bottom: 6px; }
  .pj-actions > * { flex: 1 1 auto; }
  .pj-actions-gap { display: none; }
  .pj-steps li > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pj-section { padding: 12px; }
  .proj-menu { left: 8px !important; right: 8px; width: auto !important; }
  .tabbar a { font-size: 10px; letter-spacing: -.01em; padding: 0 1px; gap: 2px; }
  .tabbar a .tab-lbl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabbar .ico { width: 23px; height: 23px; }
  .mode-row { display: grid; }
  .ctl-big { min-width: 0; }
}

/* Desktop: the sidebar holds the project selector; the header shows the scope next to the section name. */
.page-kicker { display: flex; align-items: center; gap: 8px; min-width: 0; }
.page-scope { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: var(--r-full); padding: 2px 8px; font: inherit; letter-spacing: 0; text-transform: none; font-weight: 600; font-size: 11px; line-height: 16px; cursor: pointer; max-width: 260px; }
.page-scope > span:not(.proj-dot) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-scope:hover { background: var(--hover); }
.page-scope .proj-caret, .page-scope .ico { width: 12px; height: 12px; }
.page-scope .proj-dot { width: 8px; height: 8px; }
@media (min-width: 768px) { .proj-switch.top { display: none; } }
@media (max-width: 767px) { .page-scope { display: none; } }
/* Long Russian words in owner KPI labels must not widen the phone grid. */
.oc-kpis > .oc-kpi { min-width: 0; }
.oc-kpi .oc-kpi-label { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
/* Keep the desktop header on one row up to wide screens: icon-only import, compact mode select. */
@media (min-width: 1200px) and (max-width: 1599px) {
  .import-btn { width: 38px; padding: 0; justify-content: center; }
  .import-btn .lbl { display: none; }
  .controlbar .ctl select.mode-select { min-width: 0; width: 132px; }
  .live { font-size: 0; gap: 0; }
  /* The expanded sidebar already shows RU/EN right below; free the header row. */
  .sidebar:not(.is-min) ~ .main-col .lang-switch.top { display: none; }
  .topbar-row { gap: 10px 12px; }
}
.page-scope svg { width: 12px; height: 12px; flex: none; }
.page-title h1 { line-height: 1.15; }

/* ============ Sign in, password setup ============ */
body.auth-open .app, body.auth-open .tabbar, body.auth-open .skip-link, body.auth-open #notice { display: none !important; }
.auth { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: max(24px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: radial-gradient(1200px 600px at 50% -10%, var(--accent-soft), transparent 70%), var(--bg); }
.auth-card { margin: auto; width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); padding: 28px; }
.auth-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.auth-form { display: grid; gap: 14px; }
.auth-form h1 { margin: 0; font-size: var(--fs-2xl); line-height: 1.2; letter-spacing: -.01em; }
.auth-form .hint { margin-top: -6px; }
.auth-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 560; font-size: var(--fs-sm); color: var(--text-2); }
.auth-form input { width: 100%; font-size: 16px; min-height: 46px; padding: 0 12px; }
.auth-form button[type="submit"] { min-height: 46px; font-size: var(--fs-base); margin-top: 2px; }
.auth-form button[aria-busy="true"] { opacity: .75; cursor: progress; }
.pw-field { position: relative; display: block; }
.pw-field input { padding-right: 48px; }
.pw-toggle { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); min-height: 42px; width: 44px; padding: 0; color: var(--muted); }
.pw-toggle .icon { width: 20px; height: 20px; }
.auth-error { margin: 0; padding: 10px 12px; border-radius: var(--r-md); background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger-border); font-size: var(--fs-md); font-weight: 520; }
.auth-foot { margin: 0; text-align: center; font-size: var(--fs-sm); }
.link-btn { background: none; border: 0; box-shadow: none; color: var(--accent-fg); padding: 6px 4px; min-height: 32px; font-weight: 560; font-size: var(--fs-sm); white-space: normal; }
.link-btn:hover { background: none; text-decoration: underline; }
.pw-meter { display: grid; gap: 6px; margin-top: -4px; font-size: var(--fs-sm); color: var(--muted); }
.pw-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.pw-bar i { height: 4px; border-radius: 2px; background: var(--surface-3); }
.pw-meter[data-score="0"] .pw-bar i:nth-child(-n+1), .pw-meter[data-score="1"] .pw-bar i:nth-child(-n+1) { background: var(--danger-strong); }
.pw-meter[data-score="2"] .pw-bar i:nth-child(-n+2) { background: var(--warn); }
.pw-meter[data-score="3"] .pw-bar i:nth-child(-n+3), .pw-meter[data-score="4"] .pw-bar i { background: var(--ok); }
.pw-meter[data-score="0"] .pw-text, .pw-meter[data-score="1"] .pw-text { color: var(--danger); }
@media (max-width: 480px) {
  .auth { padding-left: 12px; padding-right: 12px; }
  .auth-card { padding: 22px 18px; border-radius: var(--r-lg); }
  .auth-form h1 { font-size: var(--fs-xl); }
}

/* ============ Owner-only controls shown to admins ============ */
button.locked, .btn.locked, button[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
button.locked:hover { background: var(--surface); border-color: var(--border-strong); }
button.locked:not(.secondary):not(.danger):not(.estop-release) { background: var(--surface-2); color: var(--text-2); border-color: var(--border-strong); }

/* ============ Users & My account (users.js) ============ */
.us-list { display: grid; gap: 10px; }
.us-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.us-row.disabled { background: var(--surface-2); }
.us-row.disabled .us-name { color: var(--muted); }
.us-main { min-width: 0; display: grid; gap: 3px; }
.us-name { font-weight: 650; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.us-email { color: var(--text-2); font-size: var(--fs-md); overflow-wrap: anywhere; }
.us-meta { color: var(--muted); font-size: var(--fs-sm); }
.us-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.us-edit { grid-column: 1 / -1; }
.us-badge { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: 650; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); }
.us-badge.st-active { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-border); }
.us-badge.st-pending { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-border); }
.us-badge.st-disabled { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border); }
.us-badge.role-owner { background: var(--violet-bg); color: var(--violet); border-color: transparent; }
.us-badge.role-admin { background: var(--accent-soft); color: var(--accent-fg); border-color: transparent; }
.us-link { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--warn-border); background: var(--warn-bg); border-radius: var(--r-md); margin-top: 12px; }
.us-link .warn-line { color: var(--warn); font-weight: 560; margin: 0; }
.us-link-row { display: flex; gap: 8px; }
.us-link-row input { flex: 1 1 auto; font-family: var(--mono); font-size: 16px; min-width: 0; }
.acct-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); align-items: start; }
.acct-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; margin: 0 0 16px; font-size: var(--fs-md); }
.acct-facts dt { color: var(--muted); }
.acct-facts dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 767px) {
  .us-row { grid-template-columns: minmax(0, 1fr); }
  .us-actions { justify-content: flex-start; }
  .us-actions button { min-height: 40px; }
}
.auth-foot:has(> [hidden]:only-child) { display: none; }


/* ============ Auth v2: sign-in steps, links, 2FA setup, recovery codes ============ */
.auth-card.auth-wide { max-width: 480px; }
.auth-form .label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.link-btn.inline { padding: 0; min-height: 0; font-size: var(--fs-sm); }
.link-btn.quiet { color: var(--muted); font-weight: 500; }
.auth-form label.check { flex-direction: row; align-items: flex-start; gap: 10px; font-weight: 500; color: var(--text); font-size: var(--fs-md); cursor: pointer; }
.auth-form label.check input { width: 20px; height: 20px; min-height: 0; margin: 1px 0 0; padding: 0; flex: none; }
.auth-form label.check > span { display: grid; gap: 1px; }
.auth-form label.check small { font-size: var(--fs-xs); font-weight: 400; }
.auth-alt { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--border); text-align: center; }
.auth-text { margin: 0; color: var(--text-2); font-size: var(--fs-base); line-height: 1.5; }
.auth-text.center, .hint.center { text-align: center; }
.auth-info { margin: 0; padding: 10px 12px; border-radius: var(--r-md); background: var(--ok-bg); color: var(--ok); border: 1px solid var(--ok-border); font-size: var(--fs-md); font-weight: 520; }
.auth-icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-fg); }
.auth-icon .ico, .auth-icon .icon { width: 26px; height: 26px; }
.auth-icon.ok { background: var(--ok-bg); color: var(--ok); }
.auth-icon.warn { background: var(--warn-bg); color: var(--warn); }
.auth-spinner { width: 34px; height: 34px; margin: 18px auto 4px; border-radius: 50%; border: 3px solid var(--surface-3); border-top-color: var(--accent); animation: auth-spin .8s linear infinite; }
.auth-spinner[hidden] { display: none; }
@keyframes auth-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .auth-spinner { animation-duration: 2.4s; } }
.otp-input { font-family: var(--mono); font-size: 22px !important; letter-spacing: .35em; text-align: center; font-variant-numeric: tabular-nums; }
.otp-input::placeholder { letter-spacing: .35em; opacity: .35; }
.auth-who { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); min-width: 0; }
.auth-who[hidden] { display: none; }
.auth-who-text { display: grid; min-width: 0; font-size: var(--fs-md); }
.auth-who-text b { overflow-wrap: anywhere; font-weight: 600; }
.auth-who-text .muted { font-size: var(--fs-sm); }

.mfa-setup { display: grid; gap: 14px; min-width: 0; }
.mfa-setup h1 { margin: 0; font-size: var(--fs-2xl); line-height: 1.2; letter-spacing: -.01em; }
.mfa-setup h3 { margin: 0; }
.mfa-steps { list-style: none; counter-reset: mfa; margin: 0; padding: 0; display: grid; gap: 16px; }
.mfa-steps > li { counter-increment: mfa; position: relative; padding-left: 38px; display: grid; gap: 8px; min-width: 0; }
.mfa-steps > li::before { content: counter(mfa); position: absolute; left: 0; top: -1px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-fg); font-weight: 700; font-size: var(--fs-sm); }
.mfa-steps > li > b { font-weight: 620; }
.mfa-steps > li > span { color: var(--muted); font-size: var(--fs-md); }
.mfa-qr { width: 196px; max-width: 100%; aspect-ratio: 1; padding: 10px; background: #fff; border-radius: var(--r-lg); border: 1px solid var(--border); }
.mfa-qr svg { display: block; width: 100%; height: 100%; }
.mfa-open { margin: 2px 0; }
.mfa-key summary { cursor: pointer; color: var(--accent-fg); font-weight: 560; font-size: var(--fs-md); padding: 4px 0; }
.mfa-key[open] summary { margin-bottom: 6px; }
.mfa-key .hint { margin-bottom: 8px; }
.mfa-secret { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mfa-secret code { display: flex; flex-wrap: wrap; gap: 4px 10px; font-family: var(--mono); font-size: 15px; letter-spacing: .04em; padding: 8px 10px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border); user-select: all; -webkit-user-select: all; min-width: 0; }
.mfa-confirm { display: grid; gap: 10px; }
.mfa-confirm label { display: grid; gap: 6px; font-size: var(--fs-sm); color: var(--text-2); font-weight: 560; }
.mfa-confirm input { width: 100%; min-height: 46px; font-size: 16px; }
.mfa-confirm button { min-height: 46px; }
.mfa-done { display: flex; align-items: center; gap: 8px; color: var(--ok); font-weight: 600; }
.mfa-done .ico { width: 20px; height: 20px; }
.rc-view { display: grid; gap: 12px; }
.rc-view h1, .rc-view h3 { margin: 0; }
.rc-view h1 { font-size: var(--fs-2xl); line-height: 1.2; }
.rc-codes { list-style: none; margin: 0; padding: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; border: 1px dashed var(--border-strong); border-radius: var(--r-lg); background: var(--surface-2); counter-reset: rc; }
.rc-codes li { counter-increment: rc; display: flex; gap: 6px; align-items: baseline; font-family: var(--mono); font-size: 15px; }
.rc-codes li::before { content: counter(rc) "."; color: var(--muted); font-size: var(--fs-xs); min-width: 1.6em; text-align: right; }
.rc-codes code { font-family: inherit; user-select: all; -webkit-user-select: all; }
.rc-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.rc-actions button { flex: 1 1 140px; }
.warn-hint { color: var(--warn); display: flex; gap: 6px; align-items: flex-start; }
.warn-hint .ico { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.rc-check { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; font-weight: 560; cursor: pointer; }
.rc-check input { width: 20px; height: 20px; flex: none; margin: 1px 0 0; }
.rc-view button.block { min-height: 46px; }

/* Sign-out dialog (and other small dialogs) */
dialog.small-dialog { width: min(420px, calc(100vw - 32px)); padding: 22px; }
.signout-form, .us-del-form { display: grid; gap: 14px; }
.signout-form h2, .us-del-form h2 { margin: 0; font-size: var(--fs-lg); }
.signout-form .hint { margin: 0; }
.us-del-form p { margin: 0; color: var(--text-2); }
.us-del-form label { display: grid; gap: 6px; font-size: var(--fs-sm); font-weight: 560; color: var(--text-2); overflow-wrap: anywhere; }
.us-del-form input { width: 100%; font-size: 16px; min-height: 44px; }
.dialog-actions { justify-content: flex-end; }
button.danger-solid { background: var(--danger-strong); border-color: var(--danger-strong); color: #fff; }
button.danger-solid:hover { background: var(--danger); border-color: var(--danger); }
#signOutAllRow[hidden] { display: none; }

/* Project-limited accounts */
body.restricted [data-global] { display: none !important; }
.no-projects { padding-top: 8px; }
.no-projects .center-row { justify-content: center; padding-bottom: 20px; }
.proj-none { cursor: default; }

/* ============ Users (owner) ============ */
.us-card .us-roles { margin: 14px 0 4px; }
.us-done { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 12px; border-radius: var(--r-md); background: var(--ok-bg); color: var(--ok); border: 1px solid var(--ok-border); font-weight: 560; }
.us-done > span { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.us-done .ico { width: 18px; height: 18px; flex: none; }
.us-done button.icon-only { color: inherit; padding: 0 8px; }
.us-invite h3, .us-edit h3 { margin: 0; font-size: var(--fs-base); }
.us-roles-pick { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 8px; min-width: 0; }
.us-roles-pick legend { padding: 0; margin-bottom: 6px; font-size: var(--fs-sm); color: var(--text-2); font-weight: 560; }
.form .us-role-opt, .us-role-opt { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); cursor: pointer; font-weight: 400; color: var(--text); }
.form .us-role-opt input { width: 18px; height: 18px; margin-top: 2px; flex: none; }
.us-role-opt:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: var(--accent-soft); }
.us-roles-pick[disabled] .us-role-opt { opacity: .6; cursor: not-allowed; }
.us-role-text { display: grid; gap: 2px; min-width: 0; }
.us-role-text b { font-weight: 620; font-size: var(--fs-md); }
.us-role-text span { font-size: var(--fs-sm); color: var(--muted); line-height: 1.35; }
.us-proj-box { display: grid; gap: 6px; }
.us-proj-box[hidden] { display: none; }
.us-proj-box .label { font-size: var(--fs-sm); color: var(--text-2); font-weight: 560; }
.us-projects { display: flex; flex-wrap: wrap; gap: 6px; }
.form .us-projects label.check { flex: 0 0 auto; }
.us-send { display: grid; gap: 4px; }
.us-send input:disabled + span { color: var(--muted); }

.us-table-wrap { margin-top: 14px; }
.us-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-md); }
.us-table th { text-align: left; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.us-table td { padding: 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.us-table td.num { font-variant-numeric: tabular-nums; }
.us-table tr.st-suspended td { background: var(--surface-2); }
.us-table tr.st-suspended .us-who b { color: var(--muted); }
.us-table tr.us-sub td { padding: 0 0 14px; border-bottom: 1px solid var(--border); }
.us-table tr.us-sub .form.panel { margin-top: 0; }
.us-who { display: flex; align-items: center; gap: 10px; min-width: 220px; }
.avatar.sm { width: 32px; height: 32px; font-size: 12px; }
.us-who-text { display: grid; gap: 1px; min-width: 0; }
.us-who-text b { font-weight: 620; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.us-email { color: var(--text-2); font-size: var(--fs-sm); overflow-wrap: anywhere; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.us-verified { display: inline-flex; color: var(--ok); }
.us-verified .ico { width: 14px; height: 14px; }
.us-unverified { font-size: var(--fs-xs); color: var(--warn); }
.us-badge { gap: 4px; white-space: nowrap; }
.us-badge .ico { width: 12px; height: 12px; }
.us-badge.you { background: var(--accent-soft); color: var(--accent-fg); border-color: transparent; }
.us-badge.st-invited { background: var(--info-bg); color: var(--info); border-color: transparent; }
.us-badge.st-suspended, .us-badge.st-locked { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border); }
.us-badge.mfa-on { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-border); }
.us-badge.mfa-off { color: var(--muted); }
.us-sub-meta { display: block; margin-top: 3px; font-size: var(--fs-xs); color: var(--muted); }
.us-sub-meta.warn { color: var(--warn); }
.us-proj-list { display: flex; flex-wrap: wrap; gap: 4px; }
.us-table time { white-space: nowrap; }
.us-actions-cell { text-align: right; width: 1%; }
.us-menu { position: relative; display: inline-block; }
.us-menu > summary { list-style: none; cursor: pointer; }
.us-menu > summary::-webkit-details-marker { display: none; }
.us-menu .dots { letter-spacing: 1px; font-size: 10px; }
.us-menu-lbl { display: none; }
.us-menu-list { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 250px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); display: grid; gap: 2px; text-align: left; }
.us-menu.up .us-menu-list { top: auto; bottom: calc(100% + 4px); }
.us-menu-list hr { border: 0; border-top: 1px solid var(--border); margin: 4px 2px; }
.us-mi { justify-content: flex-start; width: 100%; background: transparent; border-color: transparent; color: var(--text); box-shadow: none; font-weight: 500; min-height: 36px; padding: 0 10px; }
.us-mi:hover { background: var(--hover); border-color: transparent; }
.us-mi.danger { color: var(--danger); }
.us-mi.danger:hover { background: var(--danger-bg); }
.us-mi:disabled:hover { background: transparent; }
.us-mi .ico { width: 16px; height: 16px; color: var(--muted); }
.us-mi.danger .ico { color: inherit; }
@media (max-width: 1100px) and (min-width: 768px) {
  .us-table th:nth-child(7), .us-table td:nth-child(7) { display: none; }
}
@media (max-width: 767px) {
  /* Rows become cards. */
  .us-table, .us-table tbody { display: block; }
  .us-table thead { display: none; }
  .us-table tr.us-tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 12px; padding: 14px; margin-bottom: 10px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); position: relative; }
  .us-table tr.us-tr.st-suspended { background: var(--surface-2); }
  .us-table tr.us-tr td { display: block; padding: 0; border: 0; background: transparent !important; min-width: 0; }
  .us-table tr.us-tr td[data-label]::before { content: attr(data-label); display: block; font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; margin-bottom: 3px; }
  .us-table td.us-who-cell { grid-column: 1 / -1; min-width: 0; padding-right: 56px; }
  .us-who { min-width: 0; }
  .us-table td.us-actions-cell { position: absolute; top: 12px; right: 12px; width: auto; }
  .us-table tr.us-sub { display: block; }
  .us-table tr.us-sub td { display: block; padding: 0 0 12px; border: 0; }
  .us-menu > summary { min-height: 44px; min-width: 44px; }
  .us-menu-list { min-width: min(280px, calc(100vw - 48px)); }
  .us-mi { min-height: 44px; }
  .us-link-row { flex-direction: column; }
}

/* ============ My account: 2FA, sessions ============ */
.acct-mfa .mfa-setup, .acct-mfa .rc-view { margin-top: 4px; }
.mfa-status { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface-2); }
.mfa-status > div { display: grid; gap: 2px; }
.mfa-status .ico { width: 22px; height: 22px; flex: none; }
.mfa-status.on { background: var(--ok-bg); border-color: var(--ok-border); }
.mfa-status.on .ico, .mfa-status.on b { color: var(--ok); }
.mfa-status.off .ico { color: var(--warn); }
.mfa-inline { margin-top: 12px; }
.mfa-inline .otp-input { max-width: 220px; }
.acct-sessions { grid-column: 1 / -1; }
.sess-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sess-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-md); }
.sess-row.current { border-color: var(--ok-border); background: var(--ok-bg); }
.sess-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); flex: none; }
.sess-row.current .sess-ico { background: var(--surface); }
.sess-ico .ico { width: 18px; height: 18px; }
.sess-main { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.sess-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sess-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: var(--fs-sm); color: var(--muted); }
.sess-foot { margin-top: 14px; }
@media (max-width: 767px) {
  .sess-row { flex-wrap: wrap; }
  .sess-row > button { flex: 1 1 100%; }
  .sess-foot > button { flex: 1 1 100%; }
  .mfa-inline .otp-input { max-width: none; }
}
/* Long words and wide content never widen the sign-in card. */
.auth-form, .mfa-setup, .mfa-steps > li, .rc-view, .mfa-confirm { grid-template-columns: minmax(0, 1fr); }
.mfa-open { white-space: normal; text-align: center; line-height: 1.3; padding-top: 8px; padding-bottom: 8px; }
.mfa-secret code { flex: 1 1 auto; }
.auth-card { min-width: 0; }
.us-table .us-email { display: block; overflow-wrap: anywhere; }
.us-table .us-verified { vertical-align: -2px; margin-left: 4px; }
.us-table .us-unverified { margin-left: 6px; white-space: nowrap; }
@media (min-width: 768px) { .us-who { min-width: 200px; } .us-table td.us-who-cell { width: 30%; } }
@media (max-width: 1300px) and (min-width: 768px) { .us-table th:nth-child(7), .us-table td:nth-child(7) { display: none; } }

/* Campaign approval line under the status (Autopilot: the owner approves the first start once). */
.camp-approval-box { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; min-width: 10rem; }
.camp-approval { font-size: 12px; line-height: 1.35; white-space: normal; }
.camp-approval.ok { color: var(--ok); }
.camp-approval.need { color: var(--warn); font-weight: 600; }
.camp-approval.muted { color: var(--muted); }