/* ─────────────────────────────────────────────
   REVENECT by Gildana — design tokens
   Violet → blue → cyan on a cool light ground.
   Legacy gold/paper names are kept as aliases at the bottom of this block: 27 rules and a
   number of inline styles in PHP/JS still reference them, and an alias renders correctly
   where a missing variable would silently fall back to nothing.
───────────────────────────────────────────── */
:root {
  /* brand */
  --brand:       #7C3AED;                 /* violet — primary action, active state */
  --brand-soft:  #9366F2;                 /* hover */
  --brand-tint:  rgba(124,58,237,.10);    /* wash behind active/hover rows */
  --brand-2:     #2563EB;                 /* blue — secondary */
  --accent:      #06B6D4;                 /* cyan — highlights */
  --brand-grad:  linear-gradient(135deg, #7C3AED 0%, #2563EB 55%, #06B6D4 100%);

  /* neutrals */
  --ink:         #0D1321;                 /* headings + dark surfaces */
  --text:        #1F2937;                 /* body copy */
  --slate:       #475569;                 /* secondary copy */
  --bg:          #F3F4F6;                 /* page */
  --surface:     #FFFFFF;                 /* cards */
  --white:       #FFFFFF;
  --ink-rgb:     13,19,33;                /* for washes: rgba(var(--ink-rgb), .05) */
  --line:        rgba(var(--ink-rgb),.10);
  --line-strong: rgba(var(--ink-rgb),.18);
  --muted:       rgba(var(--ink-rgb),.55);
  --on-ink:      #FFFFFF;                 /* text on an --ink surface */
  --surface-2:   #F6F7FA;
  --chip:        #EEF0F5;
  --chat-bg:     #F4EFE9;
  --bubble-in:   #FFFFFF;
  --bubble-out:  #D9FDD3;

  /* soft tints behind labels, with the ink that reads on them */
  --tint-warn:   #FFFBEB;  --tint-warn-ink:   #92400E;
  --tint-red:    #FDECEC;  --tint-red-ink:    #B42318;
  --tint-orange: #FFF4E5;  --tint-orange-ink: #9A4A00;
  --tint-blue:   #EAF2FB;  --tint-blue-ink:   #1F5FA8;
  --tint-peach:  #FDF0E9;
  --tint-green:  #E8F5EA;  --tint-green-ink:  #1E7A3C;

  /* status */
  --danger:      #B91C1C;  --danger-bg:  #FEF2F2;
  --success:     #059669;  --success-bg: #ECFDF5;
  --info:        #2563EB;  --info-bg:    #EFF6FF;
  --wa:          #25D366;                 /* WhatsApp green — kept, it means WhatsApp */

  --sans:        "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sidebar-w:   232px;
  --topbar-h:    58px;
  --radius:      12px;

  /* deprecated aliases — prefer the names above in new code */
  --gold:        var(--brand);
  --gold-soft:   var(--brand-soft);
  --gold-light:  var(--brand-tint);
  --black:       var(--ink);
  --brown:       var(--slate);
  --paper:       var(--bg);
  --panel:       var(--surface);
}


/* Dark: chosen in Profile (data-theme="dark"), or the device's setting when left on Automatic. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --brand-tint:  rgba(147,102,242,.22);
  --ink:         #EEF1F7;
  --ink-rgb:     226,232,242;
  --text:        #D6DCE6;
  --slate:       #A7B1C2;
  --bg:          #0E131C;
  --surface:     #171D29;
  --white:       #171D29;
  --on-ink:      #0E131C;
  --surface-2:   #1D2432;
  --chip:        #232B3A;
  --chat-bg:     #10151E;
  --bubble-in:   #1F2735;
  --bubble-out:  #134D37;
  --danger:      #F87171;  --danger-bg:  #3A1719;
  --success:     #34D399;  --success-bg: #0F2E24;
  --info:        #60A5FA;  --info-bg:    #14243F;
  --tint-warn:   #3A2E10;  --tint-warn-ink:   #F6CF72;
  --tint-red:    #3D1A1C;  --tint-red-ink:    #F7A09A;
  --tint-orange: #3B2512;  --tint-orange-ink: #F5B47A;
  --tint-blue:   #152A45;  --tint-blue-ink:   #8EC0F5;
  --tint-peach:  #3A2419;
  --tint-green:  #133222;  --tint-green-ink:  #7ED9A0;
  color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --brand-tint:  rgba(147,102,242,.22);
  --ink:         #EEF1F7;
  --ink-rgb:     226,232,242;
  --text:        #D6DCE6;
  --slate:       #A7B1C2;
  --bg:          #0E131C;
  --surface:     #171D29;
  --white:       #171D29;
  --on-ink:      #0E131C;
  --surface-2:   #1D2432;
  --chip:        #232B3A;
  --chat-bg:     #10151E;
  --bubble-in:   #1F2735;
  --bubble-out:  #134D37;
  --danger:      #F87171;  --danger-bg:  #3A1719;
  --success:     #34D399;  --success-bg: #0F2E24;
  --info:        #60A5FA;  --info-bg:    #14243F;
  --tint-warn:   #3A2E10;  --tint-warn-ink:   #F6CF72;
  --tint-red:    #3D1A1C;  --tint-red-ink:    #F7A09A;
  --tint-orange: #3B2512;  --tint-orange-ink: #F5B47A;
  --tint-blue:   #152A45;  --tint-blue-ink:   #8EC0F5;
  --tint-peach:  #3A2419;
  --tint-green:  #133222;  --tint-green-ink:  #7ED9A0;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
}
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
h1 { font-size: 22px; letter-spacing: .01em; }
h2 { font-size: 17px; }
small { font-size: 12px; }

/* ── TOPBAR ── */
.topbar {
  position: sticky; top: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  height: var(--topbar-h); padding: 0 22px;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.topbar-brand { display: flex; align-items: center; gap: 10px; }
.brand-svg { display: block; }
.brand-mark { display: inline-flex; align-items: center; color: var(--ink); }
.topbar-sub { color: var(--muted); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.topbar-nav { display: flex; align-items: center; gap: 12px; }
.topbar-email { color: var(--muted); font-size: 12px; }

/* ── signed-in user + notification bell ── */
.topbar-user {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 3px 10px 3px 3px; border-radius: 999px;
  color: var(--ink); text-decoration: none; border: 1px solid transparent;
}
.topbar-user:hover { border-color: var(--line); background: var(--paper); }
.topbar-user-name { font-size: 13px; font-weight: 600; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { border-radius: 50%; object-fit: cover; display: block; flex: none; }
.avatar-initials {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-tint); color: var(--brand);
  font-weight: 700; letter-spacing: .02em; line-height: 1;
}
.topbar-bell {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px;
  color: var(--muted); border: 1px solid transparent;
}
.topbar-bell:hover { color: var(--brand); border-color: var(--line); background: var(--paper); }
/* The count sits on the bell rather than beside it so the bar keeps its width as it changes. */
.bell-dot {
  position: absolute; top: 1px; inset-inline-end: 0;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: var(--danger, #c0392b); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}
/* A taller logo must not squash the bar's contents. */
.topbar-brand .brand-img, .brand-mark img { max-height: calc(var(--topbar-h) - 18px); width: auto; }
.credits-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px;
  background: var(--brand-tint); color: var(--brand);
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
}
.credits-chip.low { background: var(--danger-bg); color: var(--danger); }

.btn-top {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  cursor: pointer; border: 1px solid var(--line-strong);
  background: transparent; color: var(--slate); border-radius: 6px;
  transition: all .15s;
}
.btn-top:hover { border-color: var(--brand); color: var(--brand); }
.btn-top.gold { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 700; }
.btn-top.gold:hover { background: var(--brand-soft); }

/* ── SHELL ── */
.shell { display: flex; min-height: calc(100vh - var(--topbar-h)); }
.sidebar {
  width: var(--sidebar-w); flex-shrink: 0;
  background: var(--panel); border-inline-end: 1px solid var(--line);
  padding: 16px 12px; position: sticky; top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
}
.sb-nav { display: flex; flex-direction: column; gap: 2px; }
.sb-link {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px; border-radius: 8px;
  color: var(--slate); font-size: 13.5px; font-weight: 500;
  transition: background .12s, color .12s;
}
.sb-link svg { opacity: .7; flex-shrink: 0; }
.sb-link:hover { background: var(--brand-tint); color: var(--ink); }
.sb-link.active { background: var(--brand); color: #fff; }
.sb-link.active svg { opacity: 1; }

/* A section with its own pages (the CRM): the head link, a chevron, and the pages under it. */
.sidebar { overflow-y: auto; }
.sb-head { position: relative; }
.sb-head .sb-link { padding-inline-end: 34px; }
.sb-toggle { position: absolute; inset-inline-end: 4px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px;
  border: 0; border-radius: 6px; background: transparent; color: inherit; cursor: pointer; display: grid; place-items: center; color: var(--slate); }
.sb-head .sb-link.active + .sb-toggle { color: #fff; }
.sb-toggle:hover { background: rgba(var(--ink-rgb),.07); }
.sb-toggle svg { transition: transform .15s; }
.sb-group.open .sb-toggle svg { transform: rotate(180deg); }
.sb-sub { display: none; flex-direction: column; gap: 1px; margin: 3px 0 6px 26px; padding-inline-start: 10px; border-inline-start: 1px solid var(--line); }
.sb-group.open .sb-sub { display: flex; }
.sb-sublink { padding: 6px 10px; border-radius: 6px; font-size: 13px; color: var(--slate); }
.sb-sublink:hover { background: var(--brand-tint); color: var(--ink); }
.sb-sublink.active { color: var(--brand); font-weight: 600; background: var(--brand-tint); }
@media (prefers-reduced-motion: reduce) { .sb-toggle svg { transition: none; } }

/* min-width:0 is load-bearing. A flex item defaults to min-width:auto, so it refuses to
   shrink below its content's min-content width — and the flow editor's toolbar made that
   1180px, which pushed the whole shell to 1412px and scrolled the ENTIRE dashboard
   sideways on any 1280-wide laptop, logo and sidebar included. The things that legitimately
   need to be wide (.canvas-wrap, .table-wrap) scroll inside themselves already. */
.content { flex: 1; min-width: 0; padding: 26px 30px 60px; max-width: 1180px; width: 100%; }

/* ── PAGE HEAD ── */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.page-actions { display: flex; gap: 10px; align-items: center; }

/* ── CARDS / PANELS ── */
.card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px 22px; margin-bottom: 20px;
}
.card h2 { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.card-flush { padding: 0; overflow: hidden; }

/* ── STAT TILES ── */
.stats-row { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 14px; margin-bottom: 22px; }
.stat-tile {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; position: relative;
}
/* These are <span>s in the markup, so without display:block the label, value and sub-text
   run together on one line ("CREDITS4,9871 credit / message"). */
.stat-tile .lbl, .stat-tile .val, .stat-tile .sub { display: block; }
.stat-tile .lbl { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .09em; }
.stat-tile .val { font-size: 27px; font-weight: 800; color: var(--ink); margin-top: 6px; line-height: 1; }
.stat-tile .val.accent { color: var(--brand); }
.stat-tile .val.danger { color: var(--danger); }
.stat-tile .sub { color: var(--muted); font-size: 11.5px; margin-top: 4px; }

/* ── TABLES ── */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data th {
  text-align: start; padding: 11px 14px; background: var(--bg);
  color: var(--slate); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
table.data td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.data tr:last-child td { border-bottom: 0; }
table.data tr:hover td { background: rgba(124,58,237,.04); }
.mono { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 12.5px; }

/* ── BADGES / PILLS ── */
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .02em; }
.pill.gray    { background: rgba(var(--ink-rgb),.07);  color: var(--muted); }
.pill.green   { background: var(--success-bg);    color: var(--success); }
.pill.gold    { background: var(--brand-tint);    color: var(--brand); }
.pill.red     { background: var(--danger-bg);     color: var(--danger); }
.pill.blue    { background: var(--info-bg);       color: var(--brand-2); }
.pill.dot::before { content:""; width:6px; height:6px; border-radius:50%; background: currentColor; display:inline-block; }

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 16px; border-radius: 8px; cursor: pointer; border: 1px solid transparent;
  font-size: 13px; font-weight: 600; letter-spacing: .01em; transition: all .14s; white-space: nowrap;
}
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-soft); }
.btn-dark { background: var(--ink); color: var(--on-ink); }
.btn-dark:hover { background: #1b2436; }
.btn-ghost { background: var(--white); border-color: var(--line-strong); color: var(--ink); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { filter: brightness(1.06); }
.btn-sm { padding: 6px 11px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-link { background: none; border: none; color: var(--brand); cursor: pointer; font-weight: 600; padding: 0; }
.icon-btn { background: none; border: none; cursor: pointer; color: var(--muted); padding: 4px; border-radius: 6px; line-height: 0; }
.icon-btn:hover { background: var(--danger-bg); color: var(--danger); }

/* ── FORMS ── */
.field { margin-bottom: 15px; }
.field > .lbl, label > .lbl { display: block; font-size: 12px; font-weight: 600; color: var(--brown); margin-bottom: 6px; letter-spacing: .01em; }
.field .hint { font-size: 11.5px; color: var(--muted); margin-top: 5px; line-height: 1.45; }
input:not([type]), input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=number], input[type=datetime-local], input[type=date], input[type=time], input[type=url], input[type=search], textarea, select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line-strong);
  background: var(--white); border-radius: 8px; transition: border-color .14s, box-shadow .14s;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-light); }
textarea { resize: vertical; min-height: 84px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; }
@media (max-width: 720px){ .grid2, .grid3 { grid-template-columns: 1fr; } }

/* ── ALERTS ── */
.alert { padding: 11px 15px; border-radius: 8px; font-size: 13px; margin-bottom: 16px; border: 1px solid transparent; }
.alert.success { background: var(--success-bg); color: var(--success); border-color: rgba(47,125,50,.25); }
.alert.error   { background: var(--danger-bg);  color: var(--danger);  border-color: rgba(192,57,43,.25); }
.alert.info    { background: var(--info-bg);     color: var(--info);    border-color: rgba(176,125,24,.25); }
/* Something needs doing, but nothing is broken: overdue follow-ups, messages held back. Used as
   both "alert warn" and "note warn" — neither had a style, so both rendered as bare text. */
.alert.warn, .note.warn { background: var(--tint-warn); color: var(--tint-warn-ink); border: 1px solid rgba(217,119,6,.28);
                          border-radius: 10px; padding: 10px 14px; }
.note.warn a, .alert.warn a { color: inherit; font-weight: 600; }

/* ── EMPTY STATE ── */
.empty { text-align: center; padding: 40px 20px; color: var(--muted); }
.empty svg { opacity: .35; margin-bottom: 10px; }

/* ── LOGIN ── */
.login-screen { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #0D1321; }
.login-card { background: var(--panel); width: 100%; max-width: 380px; padding: 34px 32px; border-radius: 16px; border-top: 3px solid transparent; border-image: var(--brand-grad) 1; }
.login-brand { display: flex; justify-content: center; color: var(--ink); margin-bottom: 2px; }
.login-card h1 { text-align: center; font-size: 15px; font-weight: 600; color: var(--muted); margin: 6px 0 22px; letter-spacing: .04em; }
.login-card .btn { width: 100%; margin-top: 6px; }

/* ── PROGRESS BAR ── */
.progress { height: 8px; border-radius: 999px; background: var(--paper); overflow: hidden; display: flex; }
.progress > span { height: 100%; display: block; }
.progress .p-delivered { background: var(--wa); }
.progress .p-sent { background: var(--gold-soft); }
.progress .p-failed { background: var(--danger); }

/* ── MODAL ── */
.modal-back { position: fixed; inset: 0; background: rgba(26,22,18,.55); display: none; align-items: center; justify-content: center; z-index: 500; padding: 20px; }
.modal-back.open { display: flex; }
.modal { background: var(--white); border-radius: 14px; width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; padding: 26px 28px; position: relative; }
.modal h2 { margin-bottom: 18px; padding-inline-end: 28px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.modal-x { position: absolute; top: 12px; inset-inline-end: 14px; width: 30px; height: 30px; border: 0; background: transparent; color: var(--muted, #8a857c); font-size: 24px; line-height: 1; cursor: pointer; border-radius: 8px; display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s; }
.modal-x:hover { background: rgba(0,0,0,.06); color: var(--ink); }

/* ── TOAST ── */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--black); color: var(--on-ink); padding: 12px 20px; border-radius: 8px; font-size: 13px; opacity: 0; pointer-events: none; transition: all .25s; z-index: 999; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err { background: var(--danger); }

/* ── WIZARD STEPS ── */
.steps { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.step { display: flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: var(--white); border: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.step.active { border-color: var(--gold); color: var(--ink); background: var(--gold-light); font-weight: 600; }
.step.done { color: var(--success); border-color: rgba(47,125,50,.3); }
.step .n { width: 20px; height: 20px; border-radius: 50%; background: var(--paper); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.step.active .n { background: var(--brand); color: #fff; }

/* ── TOGGLE SWITCH ── */
.switch { position: relative; display: inline-block; width: 40px; height: 22px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider { position: absolute; cursor: pointer; inset: 0; background: rgba(42,34,26,.22); border-radius: 999px; transition: .18s; }
.switch .slider::before { content: ""; position: absolute; height: 16px; width: 16px; left: 3px; top: 3px; background: var(--surface); border-radius: 50%; transition: .18s; }
.switch input:checked + .slider { background: var(--wa); }
.switch input:checked + .slider::before { transform: translateX(18px); }

/* ── IMPERSONATION BAR ── */
.impersonate-bar {
  background: #0D1321; color: var(--gold-soft);
  border: 1px solid var(--gold); border-radius: 8px;
  padding: 10px 16px; margin-bottom: 18px; font-size: 13px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.impersonate-bar a { color: var(--gold); font-weight: 700; }
.impersonate-bar a:hover { color: #fff; }

/* ── SECTION LABEL (in forms/modals) ── */
.section-label { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--gold); margin: 18px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.section-label:first-of-type { margin-top: 4px; }

/* ── FLOW CANVAS ── */
.canvas-wrap { position: relative; width: 100%; height: 70vh; min-height: 480px; overflow: auto; background: var(--chip); border: 1px solid var(--line-strong); border-radius: 10px; background-image: radial-gradient(rgba(var(--ink-rgb),.13) 1px, transparent 1px); background-size: 22px 22px; overscroll-behavior: contain; }
.canvas-wrap.panning { cursor: grabbing; }
/* The board keeps its own (large) coordinate space; --z scales it so a whole flow fits
   the page width. All screen→canvas math must divide by --z (see toCanvas() in the builder).
   touch-action:none stops the browser panning/zooming the page while dragging a node. */
.canvas { position: relative; width: 2800px; height: 2000px; transform: scale(var(--z, 1)); transform-origin: 0 0; touch-action: none; }
.canvas svg.edges { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.canvas svg.edges path { stroke: var(--brand-2); stroke-width: 2; fill: none; opacity: .55; }
.canvas svg.edges path.temp { stroke: var(--accent); stroke-dasharray: 5 4; }
/* Invisible fat path under each edge so thin curves are easy to right-click. */
.canvas svg.edges path.hit { stroke: transparent; stroke-width: 14; fill: none; opacity: 1; pointer-events: stroke; cursor: context-menu; }
.canvas svg.edges path.edge.hot { stroke: var(--gold); opacity: 1; stroke-width: 3; }

/* Stage wraps the scroller so the zoom control can be pinned over it. */
.canvas-stage { position: relative; }
/* Zoom control, pinned to the right of the canvas (outside the scroller). */
.canvas-zoom { position: absolute; inset-inline-end: 12px; top: 12px; z-index: 5; display: flex; flex-direction: column; gap: 4px; background: var(--white); border: 1px solid var(--line-strong); border-radius: 8px; padding: 5px; box-shadow: 0 2px 8px rgba(26,22,18,.14); }
.canvas-zoom button { width: 30px; height: 28px; border: 0; background: transparent; cursor: pointer; font-size: 15px; line-height: 1; border-radius: 5px; color: var(--ink); }
.canvas-zoom button:hover { background: var(--paper); }
.canvas-zoom .zlevel { font-size: 10.5px; text-align: center; color: var(--muted); user-select: none; }
.canvas-zoom .zfit { font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; }

/* Right-click menu for a connection. */
.edge-menu { position: fixed; z-index: 700; background: var(--white); border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: 0 6px 20px rgba(26,22,18,.2); padding: 4px; min-width: 170px; }
.edge-menu button { display: block; width: 100%; text-align: start; border: 0; background: transparent; padding: 8px 10px; font-size: 12.5px; cursor: pointer; border-radius: 5px; color: var(--ink); }
.edge-menu button:hover { background: var(--paper); }
.edge-menu button.danger { color: #c0392b; }
.node { position: absolute; width: 214px; background: var(--white); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: 0 3px 8px rgba(26,22,18,.12); font-size: 12.5px; z-index: 2; }
.node.sel { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-light), 0 3px 8px rgba(26,22,18,.12); }
.node.start { border-color: var(--brand); }
.node-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 7px 10px; background: var(--ink); color: var(--on-ink); border-radius: 9px 9px 0 0; cursor: move; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; user-select: none; }
.node.start .node-head { background: var(--brand); color: #fff; }
.node-head .del { cursor: pointer; opacity: .65; font-size: 13px; }
.node-head .del:hover { opacity: 1; }
.node-body { padding: 9px 11px; cursor: pointer; color: var(--ink); min-height: 20px; word-break: break-word; }
.node-body .muted { color: var(--muted); }
.node-ports { padding: 2px 11px 9px; }
.prow { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 3px 8px 3px 0; }
.prow .plabel { font-size: 11px; color: var(--slate); }
.port { position: absolute; width: 13px; height: 13px; border-radius: 50%; background: var(--brand); border: 2px solid var(--surface); box-shadow: 0 0 0 1.5px var(--brand); z-index: 3; }
.port:hover { background: var(--brand-soft); transform: scale(1.15); }
.port-in { left: -7px; top: 20px; cursor: crosshair; }
.port-out { right: -7px; top: 50%; transform: translateY(-50%); cursor: crosshair; }
.port-out:hover { transform: translateY(-50%) scale(1.15); }
.cfg-panel { position: fixed; top: 0; inset-inline-end: 0; width: 380px; max-width: 92vw; height: 100vh; background: var(--panel); border-inline-start: 1px solid var(--line-strong); box-shadow: -6px 0 24px rgba(26,22,18,.18); z-index: 600; padding: 20px; overflow-y: auto; transform: translateX(100%); transition: transform .2s; }
.cfg-panel.open { transform: translateX(0); }
.cfg-panel h3 { font-size: 15px; margin-bottom: 14px; display: flex; justify-content: space-between; align-items: center; }
.cfg-panel .close-x { cursor: pointer; color: var(--muted); font-size: 18px; }
.canvas-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.canvas-hint { font-size: 12px; color: var(--muted); }

.text-muted { color: var(--muted); }
.mt10 { margin-top: 10px; } .mt16 { margin-top: 16px; } .mt24 { margin-top: 24px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* ─────────────────────────────────────────────
   MOBILE / PWA
   The layout above is desktop-first (fixed 232px sidebar in a flex shell). Everything
   below adapts it for phones and tablets: the sidebar becomes an off-canvas drawer and
   phones get a bottom tab bar, so the app is usable installed to a home screen.
───────────────────────────────────────────── */

/* Hamburger: hidden on desktop, shown once the sidebar becomes a drawer. */
.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin-inline-end: 2px;
  background: transparent; border: 0; border-radius: 8px;
  color: var(--ink); cursor: pointer;
}
.nav-toggle:hover { background: var(--brand-tint); }
.nav-backdrop { position: fixed; inset: 0; background: rgba(26,22,18,.5); z-index: 250; }
.sb-sep { display: none; height: 1px; background: var(--line); margin: 10px 4px; }
.sb-who { display: none; padding: 0 10px 4px; font-size: 11.5px; color: var(--muted); word-break: break-all; }

/* Bottom tab bar — phones only. */
.tabbar { display: none; }

/* Narrow phones: the top bar was 494px wide in a 390px screen, so every page scrolled sideways.
   Log out is already in the drawer, so the top-bar button is a duplicate here; the credits chip
   stays on one line instead of wrapping into a tall pill. */
@media (max-width: 520px) {
  .topbar-nav .btn-top.gold { display: none; }
  /* The full wordmark alone is 188px — half the screen. It scales, so let it. */
  .brand-mark svg { width: 128px; height: auto; }
  .credits-chip { white-space: nowrap; font-size: 11.5px; padding-inline-start: 8px; padding-inline-end: 8px; }
}

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .topbar { padding: 0 12px; gap: 10px; }
  .topbar-sub { display: none; }
  .brand-mark { font-size: 16px; letter-spacing: .16em; }
  .topbar-email { display: none; }
  .topbar-user-name { display: none; }
  .topbar-user { padding: 3px; }
  .topbar-nav { gap: 8px; }

  /* Sidebar → off-canvas drawer. */
  .shell { display: block; }
  .sidebar {
    position: fixed; top: 0; inset-inline-start: 0; z-index: 300;
    width: 264px; max-width: 84vw; height: 100vh;
    padding-top: 14px; overflow-y: auto;
    border-inline-end: 1px solid var(--line-strong);
    box-shadow: 6px 0 24px rgba(26,22,18,.18);
    transform: translateX(-100%); transition: transform .22s ease;
  }
  .sidebar.open { transform: translateX(0); }
  .sb-sep, .sb-who { display: block; }
  body.nav-open { overflow: hidden; }          /* don't scroll the page behind the drawer */
  .sb-link { padding: 11px 10px; }              /* taller tap targets */

  .content { padding: 16px 14px 30px; max-width: none; }
  h1 { font-size: 19px; }
  h2 { font-size: 16px; }
  .page-head { align-items: flex-start; flex-direction: column; gap: 10px; margin-bottom: 16px; }
  .page-actions { width: 100%; flex-wrap: wrap; }
}

@media (max-width: 720px) {
  /* Bottom tab bar; safe-area padding keeps it clear of the iPhone home indicator. */
  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 260;
    background: var(--panel); border-top: 1px solid var(--line-strong);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .tab {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 8px 2px 7px; font-size: 10.5px; color: var(--muted);
    letter-spacing: .01em; min-height: 52px;
  }
  .tab svg { width: 19px; height: 19px; }
  .tab.active { color: var(--gold); font-weight: 700; }
  /* Reserve room so the tab bar never covers the last row / submit button. */
  .content { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

  .card { padding: 14px; border-radius: 10px; }
  .stats-row { grid-template-columns: 1fr 1fr; }
  .page-actions .btn { flex: 1; justify-content: center; }
  table.data th, table.data td { padding: 9px 10px; }
  .table-wrap { -webkit-overflow-scrolling: touch; }

  /* iOS Safari zooms the page when a focused input is under 16px. */
  input, select, textarea { font-size: 16px; }
}

/* Installed (standalone) — no browser chrome, so the topbar clears the status bar itself. */
@media (display-mode: standalone) {
  .topbar { padding-top: env(safe-area-inset-top, 0); height: calc(var(--topbar-h) + env(safe-area-inset-top, 0px)); }
}

/* iOS "Add to Home Screen" hint + Android install button. */
.install-bar {
  display: none; align-items: center; gap: 10px;
  margin: 0 0 14px; padding: 11px 13px;
  background: var(--info-bg); border: 1px solid var(--gold); border-radius: 10px;
  font-size: 13px; color: var(--ink);
}
.install-bar.show { display: flex; }
.install-bar .grow { flex: 1; }
.install-bar .x { cursor: pointer; color: var(--muted); font-size: 17px; background: 0; border: 0; }

/* ── The ordered outline ──────────────────────────────────────────────────────────
   A flow as a list of steps. Hidden on a desktop until asked for; on a phone it replaces
   the canvas as the place editing happens, because dragging wires with a thumb does not
   work and telling people to go find a computer is not an answer. */
.canvas-outline { display: none; margin-bottom: 12px; }
.outline-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin-bottom: 8px; }
.outline-head strong { font-size: 14px; }
.outline-head span { font-size: 12px; color: var(--muted); }
.outline-list { display: flex; flex-direction: column; gap: 6px; }

.ol-row { display: flex; align-items: stretch; gap: 6px; margin-inline-start: calc(var(--d, 0) * 16px);
          border: 1px solid var(--line-strong); border-radius: 10px; background: var(--panel); }
.ol-row.on { border-color: var(--brand, #3D6BFF); box-shadow: 0 0 0 2px rgba(61,107,255,.14); }
.ol-main { flex: 1; display: flex; gap: 10px; align-items: flex-start; text-align: start;
           background: 0; border: 0; padding: 10px 4px 10px 10px; cursor: pointer; font: inherit; color: inherit; min-width: 0; }
.ol-num { flex: 0 0 22px; height: 22px; border-radius: 999px; background: var(--chip, #EEF0F5);
          color: var(--muted); font-size: 11.5px; font-weight: 600; display: grid; place-items: center; }
.ol-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ol-type { font-size: 12px; font-weight: 600; }
.ol-sum { font-size: 12.5px; color: var(--ink-soft, #5B6478); line-height: 1.45; overflow-wrap: anywhere; }
.ol-sum .muted { color: var(--muted); }
.ol-acts { display: flex; align-items: center; gap: 2px; padding-inline-end: 6px; }
.ol-acts button { width: 30px; height: 30px; border: 0; background: 0; border-radius: 8px;
                  color: var(--muted); font-size: 14px; cursor: pointer; }
.ol-acts button:hover:not(:disabled) { background: var(--chip, #EEF0F5); color: var(--ink); }
.ol-acts button:disabled { opacity: .28; cursor: default; }
.ol-acts .ol-del:hover { background: var(--tint-red); color: var(--tint-red-ink); }

.ol-branch { margin-inline-start: calc(var(--d, 0) * 16px - 16px); font-size: 11.5px; font-weight: 600;
             color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding-top: 4px; }
.ol-loop { margin-inline-start: calc(var(--d, 0) * 16px); font-size: 12px; color: var(--muted); padding: 6px 10px; }
.ol-gap { margin-inline-start: calc(var(--d, 0) * 16px); }
.ol-add { border: 1px dashed var(--line-strong); border-radius: 10px; background: 0; color: var(--muted);
          font: inherit; font-size: 12.5px; padding: 8px 12px; cursor: pointer; width: 100%; text-align: start; }
.ol-add:hover { border-color: var(--brand, #3D6BFF); color: var(--brand, #3D6BFF); }
.ol-head { font-size: 12px; font-weight: 600; color: #B4552E; margin-top: 10px; }

/* Asked for by the List view button. */
body.outline-only .canvas-outline { display: block; }
body.outline-only .canvas-stage,
body.outline-only .canvas-hint-desk,
body.outline-only .canvas-only { display: none; }
/* The step picker sits on its own row once the toolbar wraps; it should not span it. */
.canvas-toolbar #add-type { max-width: 260px; }

@media (max-width: 760px) {
  /* The canvas stays, but only to look at: every edit goes through the list and the
     step drawer, so nothing here depends on dragging. */
  .canvas-outline { display: block; }
  /* The list is already on screen, so the button that asks for it, and the two tools that
     only make sense with a mouse, come off the toolbar. */
  .canvas-hint-desk, .canvas-only, #btn-outline { display: none; }
  /* Squeezed into the row it collapses to an arrow, so it takes a row of its own. */
  .canvas-toolbar #add-type { max-width: none; flex: 1 1 100%; }
  .canvas-wrap { height: 42vh; min-height: 260px; }
  .canvas .node-head { cursor: default; }
  .canvas .port, .canvas .addnext { display: none; }
  .cfg-panel { width: 100%; max-width: none; border-inline-start: 0; border-radius: 0; }
}

/* Uploaded brand artwork: never let an oddly-sized file blow out the chrome. */
.brand-img { display: block; width: auto; max-width: 190px; object-fit: contain; }
.login-brand .brand-img { max-width: 240px; margin: 0 auto; }
@media (max-width: 900px) { .brand-img { max-width: 132px; } }


/* ── Help dock: floating Help + intro video ──
   Sits above the mobile tab bar rather than on top of it, so it never covers navigation. */
.help-dock {
  position: fixed; inset-inline-end: 18px; bottom: 18px; z-index: 300;
  display: flex; flex-direction: column; gap: 10px;
}
.help-fab {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  box-shadow: 0 6px 18px rgba(13,19,33,.14); cursor: pointer;
  transition: transform .12s ease, color .12s ease, border-color .12s ease;
}
.help-fab:hover { color: var(--brand); border-color: var(--brand); transform: translateY(-1px); }
.help-fab.help { background: var(--brand); border-color: var(--brand); color: #fff; }
.help-fab.help:hover { background: var(--brand-soft); color: #fff; }

.video-back {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(13,19,33,.72);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.video-back[hidden] { display: none; }
.video-box { position: relative; width: min(920px, 100%); }
.video-frame { aspect-ratio: 16 / 9; background: #000; border-radius: 12px; overflow: hidden; }
.video-close {
  position: absolute; top: -14px; right: -10px; z-index: 1;
  width: 34px; height: 34px; border-radius: 50%;
  border: 0; background: var(--surface); color: var(--ink);
  font-size: 15px; cursor: pointer; box-shadow: 0 3px 10px rgba(0,0,0,.25);
}

/* ── FAQ ── */
.faq-item { border-bottom: 1px solid var(--line); padding: 12px 0; }
.faq-item:last-child { border-bottom: 0; }
.faq-item summary {
  cursor: pointer; font-weight: 600; font-size: 14px; list-style: none;
  display: flex; align-items: center; gap: 9px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before {
  content: '+'; color: var(--brand); font-weight: 700; font-size: 16px; line-height: 1; width: 13px;
}
.faq-item[open] summary::before { content: '\2212'; }
.faq-answer { padding: 9px 0 2px 22px; font-size: 13.5px; color: var(--muted); line-height: 1.75; }

@media (max-width: 720px) {
  /* Clear of the bottom tab bar. */
  .help-dock { inset-inline-end: 12px; bottom: calc(var(--tabbar-h, 58px) + 12px); }
  .help-fab { width: 40px; height: 40px; }
}

/* ── Flow check & preview ─────────────────────────────────────────────────────── */
.issue-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.issue { border-inline-start: 3px solid var(--line-strong); padding: 7px 10px; border-radius: 0 6px 6px 0; background: var(--surface-2, #F6F7FA); font-size: 13px; }
.issue.error { border-inline-start-color: var(--tint-red-ink); }
.issue.warn  { border-inline-start-color: #E0A100; }

/* A node the check flagged: outlined on the canvas so the list and the picture agree. */
.node.has-issue { box-shadow: 0 0 0 2px #D14343, 0 6px 18px rgba(13,19,33,.14); }

/* Live figures on a node — reached / stalled. Kept small so they never fight the label. */
.node-stats { display: flex; gap: 6px; padding: 4px 10px 8px; font-size: 11px; }
.node-stats span { display: inline-flex; align-items: center; gap: 3px; color: var(--ink-soft, #5B6478); }
.node-stats .drop { color: var(--tint-red-ink); font-weight: 700; }

/* Preview drawer */
/* Above the sticky topbar (200) and the node config panel (600): opening a preview while
   editing a node should cover both, not slide under them. */
.pv-back { position: fixed; inset: 0; background: rgba(13,19,33,.45); display: none; z-index: 620; }
.pv-back.open { display: block; }
.pv-panel { position: absolute; top: 0; inset-inline-end: 0; height: 100%; width: min(420px, 100%); background: var(--surface);
            box-shadow: -8px 0 30px rgba(13,19,33,.18); padding: 16px; display: flex; flex-direction: column; }
.pv-thread { flex: 1; overflow-y: auto; background: var(--chat-bg); border-radius: 10px; padding: 10px;
             display: flex; flex-direction: column; gap: 6px; min-height: 200px; }
.pv-msg { max-width: 82%; padding: 7px 10px; border-radius: 10px; font-size: 13.5px; line-height: 1.45;
          white-space: pre-wrap; word-break: break-word; box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.pv-msg.us   { align-self: flex-start; background: var(--surface); }
.pv-msg.them { align-self: flex-end;   background: #DCF8C6; }
.pv-stop { font-size: 12.5px; color: var(--ink-soft, #5B6478); padding: 8px 2px 0; }
@media (max-width: 720px) { .pv-panel { width: 100%; } }

/* Usage meter — how much of an included allowance has been spent. */
.meter { height: 7px; border-radius: 4px; background: var(--line, #E4E7EE); overflow: hidden; margin-top: 10px; }
.meter > span { display: block; height: 100%; background: var(--brand); border-radius: 4px; transition: width .3s; }
.meter.over > span { background: var(--tint-red-ink); }

/* Ready-made automations a client can install in one click. */
.starter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-top: 14px; }
.starter-grid.hidden { display: none; }
.starter { border: 1px solid var(--line-strong); border-radius: 10px; padding: 14px;
           display: flex; flex-direction: column; gap: 6px; background: var(--white); }
.starter-name { font-weight: 700; font-size: 14px; }
.starter-sum { font-size: 12.5px; color: var(--ink-soft, #5B6478); line-height: 1.5; flex: 1; }
.starter button { align-self: flex-start; margin-top: 4px; }

/* ── Flow editor: full screen, save state, add-next ──────────────────────────────── */

/* Focus mode — the canvas fills the window so a big flow is workable. Everything else on
   the page stays in the DOM (and keeps its state) rather than being torn down. */
body.canvas-focus .sidebar, body.canvas-focus .topbar,
body.canvas-focus .page-head, body.canvas-focus .tabbar,
body.canvas-focus .nav-backdrop, body.canvas-focus .install-bar { display: none !important; }
body.canvas-focus .shell, body.canvas-focus .content { padding: 0 !important; margin: 0 !important; max-width: none !important; }
body.canvas-focus .card:not(.canvas-card) { display: none !important; }
body.canvas-focus .canvas-card { margin: 0; border-radius: 0; height: 100vh; display: flex; flex-direction: column; }
body.canvas-focus .canvas-wrap { flex: 1; height: auto !important; min-height: 0 !important; border-radius: 0; }
body.canvas-focus { overflow: hidden; }

/* Steps gathered with shift-click. Distinct from the one open in the panel (.sel). */
.node.multi { box-shadow: 0 0 0 2px var(--brand, #3D6BFF), 0 6px 18px rgba(26,22,18,.10); }
.sel-count { font-size: 12px; color: var(--brand, #3D6BFF); font-weight: 600; }

/* Whether the flow is saved. Quiet when it is, obvious when it is not. */
.save-state { font-size: 12px; color: var(--muted, #7A8195); padding: 3px 8px; border-radius: 999px; }
.save-state.dirty { color: var(--tint-warn-ink); background: var(--tint-warn); }
.save-state.ok    { color: #2E7D32; }
.save-state.err   { color: var(--tint-red-ink); background: var(--tint-red); font-weight: 600; }

/* The + beside a port: add the next step already connected. */
.addnext { width: 17px; height: 17px; line-height: 14px; padding: 0; margin-inline-end: 4px;
           border: 1px dashed var(--line-strong); background: var(--white); color: var(--muted, #7A8195);
           border-radius: 50%; cursor: pointer; font-size: 13px; opacity: 0; transition: opacity .12s, color .12s; }
.node:hover .addnext, .node.sel .addnext { opacity: 1; }
.addnext:hover { color: var(--brand); border-color: var(--brand); border-style: solid; }

/* A way back from the sign-in screen to the public site. */
.login-back { text-align: center; margin: 16px 0 0; font-size: 13px; }
.login-back a { color: var(--muted); text-decoration: none; }
.login-back a:hover { color: var(--brand); }

/* ── Contact tags and bulk selection ──────────────────────────────────────────────
   Tags are a comma-separated column, written by the automation tag step and by hand from
   Contacts. These render them as chips, and give the table the selection chrome the bulk
   actions need. */
.tag-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; line-height: 1; padding: 4px 9px; border-radius: 999px;
  background: var(--brand-tint); color: var(--brand); border: 1px solid transparent;
  white-space: nowrap; margin: 2px 4px 2px 0; text-decoration: none;
}
.tag-chip.more { background: var(--chip, #EEF0F5); color: var(--muted); cursor: default; }
.tag-chip span { font-size: 10.5px; opacity: .7; font-variant-numeric: tabular-nums; }
/* The filter variant is a control, so it reads as one until it is the chosen one. */
.tag-chip.filt { background: 0; border-color: var(--line-strong); color: var(--text); cursor: pointer; font-size: 12px; padding: 5px 11px; }
.tag-chip.filt:hover { border-color: var(--brand); color: var(--brand); }
.tag-chip.filt.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.tag-chip.filt.on span { opacity: .85; }
.tags-cell { max-width: 240px; }

.c-toolbar { padding: 14px 18px; display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.c-search { display: flex; gap: 8px; max-width: 360px; width: 100%; }
.c-tags { padding: 0 18px 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.c-sep { width: 1px; height: 18px; background: var(--line-strong); margin: 0 8px; }

/* Only ever on screen when something is selected. */
.bulkbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 18px; background: var(--brand-tint); border-block: 1px solid var(--line);
  font-size: 13px;
}
.bulkbar .grow { flex: 1; }
.bulkbar .btn.danger { color: var(--danger); border-color: rgba(185,28,28,.28); }
.bulkbar .btn.danger:hover { background: var(--danger-bg); }
.bulkbar[hidden] { display: none; }

td.ck, th.ck { width: 34px; text-align: center; }
td.ck input, th.ck input { width: auto; margin: 0; cursor: pointer; }

.tag-add { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 12px; }
.tag-optin { display: flex; gap: 8px; align-items: baseline; font-weight: normal; font-size: 13px; flex-wrap: wrap; }
.tag-optin input { width: auto; }
.tag-optin .text-muted { font-size: 12px; }

@media (max-width: 700px) {
  .bulkbar { position: sticky; bottom: 0; z-index: 30; background: var(--surface);
             border-top: 1px solid var(--line-strong); box-shadow: 0 -6px 18px rgba(13,19,33,.08); }
  .bulkbar .btn { flex: 1 0 auto; }
  .tags-cell { max-width: 160px; }
}

/* ── "How to use" ─────────────────────────────────────────────────────────────────
   A <details> so it opens with no JavaScript: it works on the first paint and keeps
   working if a script fails. page_head() puts one on every page. */
.guide { position: relative; }
.guide summary { list-style: none; }
.guide summary::-webkit-details-marker { display: none; }
.guide-btn {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--muted);
  border: 1px solid var(--line-strong); border-radius: 8px; padding: 7px 13px; background: var(--surface);
  white-space: nowrap;
}
.guide-btn:hover { color: var(--brand); border-color: var(--brand); }
.guide[open] .guide-btn { color: var(--brand); border-color: var(--brand); background: var(--brand-tint); }
.guide-btn span {
  width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand); color: #fff; font-size: 11px; font-weight: 700;
}

.guide-panel {
  position: absolute; z-index: 400; top: calc(100% + 8px); inset-inline-end: 0; width: 420px; max-width: 92vw;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px;
  box-shadow: 0 14px 40px rgba(13,19,33,.16); padding: 20px 22px; text-align: start;
  max-height: min(70vh, 620px); overflow-y: auto;
}
.guide-panel h3 { font-size: 15px; margin: 0 0 6px; }
.guide-intro { font-size: 13px; color: var(--muted); margin: 0 0 16px; line-height: 1.6; }

.guide-steps { margin: 0; padding: 0; list-style: none; counter-reset: g; }
.guide-steps li { position: relative; padding: 0 0 15px 30px; }
.guide-steps li::before {
  counter-increment: g; content: counter(g);
  position: absolute; inset-inline-start: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
  background: var(--brand-tint); color: var(--brand);
}
/* The thread down the side, so the steps read as one sequence. */
.guide-steps li::after { content: ""; position: absolute; inset-inline-start: 9.5px; top: 25px; bottom: 4px; width: 1px; background: var(--line); }
.guide-steps li:last-child { padding-bottom: 0; }
.guide-steps li:last-child::after { display: none; }
.guide-steps strong { display: block; font-size: 13.5px; margin-bottom: 3px; }
.guide-steps span { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.6; }

.guide-tips { margin-top: 16px; padding: 12px 14px; border-radius: 9px; background: var(--paper, #F3F4F6); }
.guide-tips p { font-size: 12.5px; color: var(--text); line-height: 1.6; margin: 0 0 8px; }
.guide-tips p:last-child { margin-bottom: 0; }
.guide-tips p::before { content: "→ "; color: var(--brand); font-weight: 700; }
.guide-more { font-size: 12px; color: var(--muted); margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }

/* ── Getting started checklist ───────────────────────────────────────────────── */
.gs-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.gs-count { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.gs-bar { height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; margin: 12px 0 18px; }
.gs-bar span { display: block; height: 100%; background: var(--brand-grad, var(--brand)); transition: width .4s; }
.gs-list { display: flex; flex-direction: column; gap: 2px; }
.gs-item { display: flex; gap: 12px; align-items: flex-start; padding: 11px 12px; border-radius: 9px; }
.gs-item:hover { background: var(--paper, #F3F4F6); }
.gs-item.done { opacity: .55; }
.gs-tick {
  flex: none; width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; border: 1.5px solid var(--line-strong); color: transparent; margin-top: 1px;
}
.gs-item.done .gs-tick { background: var(--success); border-color: var(--success); color: #fff; }
.gs-text { flex: 1; min-width: 0; }
.gs-text b { display: block; font-size: 13.5px; font-weight: 600; }
.gs-item.done .gs-text b { text-decoration: line-through; }
.gs-text span { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.55; }
.gs-item .btn { flex: none; align-self: center; }
.gs-item.done .btn { visibility: hidden; }

@media (max-width: 700px) {
  .guide-panel { position: fixed; inset: auto 10px 10px; width: auto; max-height: 76vh; }
  .gs-item { flex-wrap: wrap; }
  .gs-item .btn { margin-inline-start: 33px; }
}

/* ── the video's language switch (Help) ──
   Same component as the public site; the tokens differ, the behaviour does not. */
.vlang { display: flex; justify-content: center; gap: 6px; margin: 0 auto 12px;
         padding: 4px; border: 1px solid var(--line); border-radius: 999px;
         background: var(--paper); width: max-content; }
.vlang-b { display: block; padding: 6px 16px; border-radius: 999px; font-size: 13px;
           font-weight: 600; color: var(--muted); text-decoration: none; line-height: 1; }
.vlang-b:hover { color: var(--text); }
.vlang-b.on { background: var(--brand); color: #fff; }
.vlang-b:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* The player itself, on the Help page. .demo-frame comes from the public stylesheet, which
   this page does not load, so the frame is defined here too. */
.demo-frame.help-video { max-width: 720px; margin: 0 auto; aspect-ratio: 16/9;
                         background: #000; border-radius: 10px; overflow: hidden; }
.demo-frame.help-video video, .demo-frame.help-video iframe {
    display: block; width: 100%; height: 100%; border: 0; }

/* Admin → Help Content: one bordered block per language, and its preview. */
.vrow { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px 4px;
        margin: 0 0 14px; }
.vrow legend { font-size: 12.5px; font-weight: 600; padding: 0 6px; color: var(--text); }
.vprev { max-width: 380px; aspect-ratio: 16/9; background: #000; border-radius: 8px;
         overflow: hidden; margin: 4px 0 12px; }
.vprev video, .vprev iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ── the ad trigger picker (automation editor) ──
   Rows read as "headline · leads · last click" because a client recognises their own ad copy
   and never their ad id. */
.ad-opt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px;
          border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px;
          font-weight: normal; cursor: pointer; }
.ad-opt input { width: auto; margin-top: 3px; }
.ad-opt:hover { border-color: var(--line-strong); }

#ad-list { padding: 4px 0 0 28px; }
.ad-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px;
          font-weight: normal; cursor: pointer; }
.ad-row:hover { background: var(--paper); }
.ad-row input { width: auto; }
.ad-row .ad-name { flex: 1; font-weight: 600; font-size: 13px; }
.ad-row .ad-meta { font-size: 12px; color: var(--muted); white-space: nowrap; }

.ad-manual { margin-top: 6px; }
.ad-manual summary { font-size: 12.5px; color: var(--muted); cursor: pointer; }
.ad-manual input { max-width: 340px; }

/* ── Module pickers (admin client page, client Team page) ── */
.mod-all { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; font-size: 13px; }
.mod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px 14px; }
.mod-opt { display: flex; gap: 8px; align-items: center; font-size: 13px; padding: 5px 0; }
.mod-opt input, .mod-all input { width: auto; margin: 0; }

/* ── CRM ── */
.crm-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.crm-bar input[type=search] { flex: 1 1 220px; min-width: 0; }
.crm-bar select { width: auto; }
.crm-view { margin-inline-start: auto; display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.crm-view a { padding: 6px 12px; font-size: 12.5px; font-weight: 600; color: var(--muted); text-decoration: none; }
.crm-view a.on { background: var(--brand); color: #fff; }

/* The board scrolls sideways inside itself; the page never does. */
.crm-board { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 10px; align-items: flex-start; }
.crm-col { flex: 0 0 264px; background: rgba(var(--ink-rgb),.035); border-radius: 12px; padding: 10px;
           border-top: 3px solid var(--brand); min-height: 120px; }
.crm-col.crm-won  { border-top-color: var(--success); }
.crm-col.crm-lost { border-top-color: var(--danger); }
.crm-col.over { background: rgba(124,58,237,.08); }
.crm-col header { display: flex; align-items: center; gap: 6px; font-size: 13px; margin-bottom: 8px; }
.crm-n { background: var(--surface); border-radius: 10px; padding: 0 7px; font-size: 11.5px; color: var(--muted); }
.crm-sum { margin-inline-start: auto; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.crm-cards { display: flex; flex-direction: column; gap: 8px; }
.crm-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 11px; cursor: grab; }
.crm-card.dragging { opacity: .45; }
.crm-card-name { font-weight: 600; font-size: 13.5px; color: inherit; text-decoration: none; display: block; }
.crm-card-name:hover { color: var(--brand); }
.crm-card-phone { font-size: 11.5px; color: var(--muted); }
.crm-card-last { font-size: 12px; color: var(--muted); margin-top: 5px; overflow: hidden; text-overflow: ellipsis;
                 white-space: nowrap; }
.crm-card-foot { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 11.5px; }
.crm-val { font-weight: 600; font-variant-numeric: tabular-nums; }
.crm-due { background: rgba(var(--ink-rgb),.06); border-radius: 8px; padding: 1px 7px; }
.crm-due.late, .crm-late { color: var(--danger); font-weight: 600; }
.crm-due.late { background: var(--danger-bg); }
.crm-owner { margin-inline-start: auto; width: 24px; height: 24px; border-radius: 50%; background: var(--brand); color: #fff;
             display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; }
/* Touch screens cannot drag, so the stage picker is the way to move a card there. */
.crm-move { margin-top: 8px; width: 100%; font-size: 12px; padding: 4px 6px; }
@media (hover: hover) and (pointer: fine) { .crm-move { display: none; } }

.crm-bulk { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; padding: 8px 12px;
            background: rgba(124,58,237,.07); border-radius: 10px; font-size: 13px; }
.crm-bulk select { width: auto; }

.st-row { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; padding: 4px; border-radius: 8px; background: var(--surface); }
.st-row.dragging { opacity: .5; }
.st-grip { cursor: grab; color: var(--muted); font-size: 16px; padding: 0 2px; }
.st-name { flex: 1; }
.st-kind { width: auto; }

/* Lead page */
.lead-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .lead-grid { grid-template-columns: minmax(0, 1fr); } }
.lead-feed { display: flex; flex-direction: column; gap: 10px; max-height: 520px; overflow-y: auto; }
.lead-item { font-size: 13px; padding: 8px 10px; border-radius: 9px; background: rgba(var(--ink-rgb),.035); }
.lead-item .when { font-size: 11px; color: var(--muted); display: block; margin-top: 3px; }
.lead-item.note { background: var(--tint-warn); }
.lead-item.event { background: transparent; padding: 2px 10px; color: var(--muted); font-size: 12px; }
.lead-item[hidden] { display: none; }

/* ── The lead page ── */
.lead-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.lead-col > .card { margin-bottom: 0; }
.lead-hero .lead-hero-top { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.lead-contact { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
.lead-phone { font-size: 18px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.lead-meta { display: flex; gap: 6px 18px; flex-wrap: wrap; font-size: 13px; margin-top: 6px; }
.lead-meta .text-muted { font-size: 11.5px; margin-inline-end: 3px; }
.lead-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.lead-stages { display: flex; gap: 4px; margin-top: 14px; overflow-x: auto; padding-bottom: 2px; }
.lead-stage { flex: 1 0 auto; min-width: 84px; border: 0; padding: 8px 12px; font: inherit; font-size: 12.5px; font-weight: 600;
  background: rgba(var(--ink-rgb),.05); color: var(--slate); cursor: pointer; white-space: nowrap; }
.lead-stage:first-child { border-radius: 8px 0 0 8px; } .lead-stage:last-child { border-radius: 0 8px 8px 0; }
.lead-stage:hover:not(:disabled) { background: var(--brand-tint); color: var(--ink); }
.lead-stage.done { background: var(--brand-tint); color: var(--brand); }
.lead-stage.cur { background: var(--brand); color: #fff; }
.lead-stage.cur.won { background: #2a78d6; } .lead-stage.cur.lost { background: #eb6834; }
.lead-stage:disabled { cursor: default; }
.lead-stage:focus-visible, .act-kind input:focus-visible + span, .lead-quick button:focus-visible, .lead-filter button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.lead-next-when { display: flex; align-items: center; gap: 10px; font-size: 16px; font-variant-numeric: tabular-nums; }
.lead-next-note { margin: 6px 0 0; font-size: 13.5px; }
.lead-next.late { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.lead-next.today { box-shadow: inset 0 0 0 1px var(--brand); }
.lead-quick { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.lead-quick button, .lead-filter button { border: 1px solid var(--line); background: var(--panel); color: var(--slate);
  border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 12px; cursor: pointer; }
.lead-quick button:hover, .lead-filter button:hover { border-color: var(--brand); color: var(--ink); }
.lead-quick button.on, .lead-filter button.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.lead-filter { display: flex; gap: 6px; flex-wrap: wrap; }

.act-kinds { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.act-kind input { position: absolute; opacity: 0; pointer-events: none; }
.act-kind span { display: inline-block; padding: 7px 13px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; cursor: pointer; }
.act-kind:hover span { border-color: var(--brand); }
.act-kind input:checked + span { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.act-more { margin-top: 4px; }
.act-more summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--brand); margin-bottom: 8px; }
.lead-item.act { background: var(--panel); border: 1px solid var(--line); }
.lead-item.act.act-note { background: var(--tint-warn); border-color: transparent; }
.act-head { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.act-body { margin-top: 4px; }
.lead-details summary { cursor: pointer; }
#timeline .lead-feed { max-height: 900px; }
.lead-msg { max-width: 85%; }
.lead-msg.out { align-self: flex-end; background: #DCF8C6; }
.lead-msg.in  { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); }
/* Numeric columns line up on the digit, so figures can be compared down a column. */
.data th.num, .data td.num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* A file input's built-in button + filename has a fixed intrinsic width and will not shrink,
   which pushed the profile page (and Settings before it) wider than a phone. */
input[type="file"] { max-width: 100%; min-width: 0; }

/* ── CRM manager pages ── */
.muted-row td { opacity: .6; }
.avail-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.avail-form input[type=number] { padding: 5px 8px; }
.timers .timer-row { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.timers .timer-row:last-of-type { border-bottom: 0; margin-bottom: 10px; }
.timers .timer-row .mod-all { display: inline-flex; gap: 8px; align-items: center; margin: 0 6px 0 0; }
.timers input[type=number] { width: 80px; display: inline-block; padding: 5px 8px; }
.timers select { width: auto; display: inline-block; padding: 5px 8px; }
.timers .text-muted { font-size: 12px; margin: 4px 0 0 24px; }
.setup-lists { align-items: start; }
/* Lead heat: tells hot from cold at a glance; the word is always shown too, never colour alone. */
.heat { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.heat.hot  { background: var(--tint-red); color: var(--tint-red-ink); }
.heat.warm { background: var(--tint-orange); color: var(--tint-orange-ink); }
.heat.cold { background: var(--tint-blue); color: var(--tint-blue-ink); }
.crm-flag { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 8px; background: rgba(var(--ink-rgb),.06); color: var(--slate); }
.crm-flag.late { background: var(--danger-bg); color: var(--danger); }
.sb-sublink { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.sb-count { font-size: 11px; font-weight: 700; min-width: 20px; text-align: center; padding: 1px 6px; border-radius: 999px; background: var(--brand-tint); color: var(--brand); }
.sb-count.late { background: var(--danger-bg); color: var(--danger); }
.lead-heat { position: relative; display: inline-block; }
.lead-heat summary { list-style: none; cursor: pointer; }
.lead-heat summary::-webkit-details-marker { display: none; }
.lead-heat-why { position: absolute; z-index: 20; top: 28px; inset-inline-start: 0; width: 270px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 10px 30px rgba(13,19,33,.12); padding: 10px 12px; font-size: 12.5px; }
.lead-heat-why div { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; border-top: 1px solid var(--line); }
.lead-heat-why strong { display: block; margin-bottom: 4px; }
.lead-lost { margin: 12px 0 0; font-size: 13px; color: #B5461C; }
.dup-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.lost-dlg { border: 0; border-radius: 14px; padding: 22px; width: min(520px, calc(100vw - 32px)); box-shadow: 0 20px 60px rgba(13,19,33,.25); }
.lost-dlg::backdrop { background: rgba(13,19,33,.45); }
.lost-reasons { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.crm-card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }

/* "hidden" always wins over a layout rule — a .grid2 or flex container would otherwise show it. */
[hidden] { display: none !important; }

/* ── The bell's panel: messages and CRM notices ── */
.bell-wrap { position: relative; }
.bell-panel { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); width: 340px; max-width: calc(100vw - 24px); max-height: 70vh; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 40px rgba(13,19,33,.16); z-index: 60; }
.bell-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.bell-head a { font-size: 12px; }
.bell-item { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink); }
.bell-item:hover { background: var(--brand-tint); }
.bell-item.unread { background: rgba(124,58,237,.05); }
.bell-item.unread .bell-text { font-weight: 600; }
.bell-item.unread .bell-text::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); margin-inline-end: 7px; vertical-align: 1px; }
.bell-when { font-size: 11.5px; color: var(--muted); }
.bell-msgs { flex-direction: row; justify-content: space-between; }
.bell-msgs span { color: var(--brand); font-size: 12px; }
.bell-empty { padding: 14px; margin: 0; font-size: 12.5px; color: var(--muted); }
@media (max-width: 520px) { .bell-panel { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; } }

/* ── Automatic messages ── */
.tpl-preview { font-size: 12.5px; margin-top: 6px; white-space: pre-wrap; }
.tpl-vars { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; max-width: 640px; }
.tpl-var { display: grid; grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: center; }
.tpl-var-n { font-size: 12.5px; font-weight: 600; color: var(--slate); font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .tpl-var { grid-template-columns: 70px minmax(0, 1fr); } .tpl-var input { grid-column: 2; } }
.seq-step { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; max-width: 760px; }
.seq-step-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: space-between; margin-bottom: 8px; font-size: 13px; }
.seq-step-head input, .seq-step-head select { width: auto; display: inline-block; padding: 5px 8px; }

/* ── Site visits ── */
.visit-row { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); flex-wrap: wrap; font-size: 13.5px; }
.visit-row:first-of-type { margin-top: 8px; }
.visit-row.cancelled { opacity: .6; }
.visit-acts { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.visit-move summary { list-style: none; cursor: pointer; }
.visit-move summary::-webkit-details-marker { display: none; }
.visit-move-form { display: flex; gap: 6px; margin-top: 6px; }
.visit-move-form input { width: auto; padding: 5px 8px; }
.cal-nav { margin-inline-start: auto; display: flex; gap: 6px; }
.cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
@media (max-width: 1100px) { .cal-week { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .cal-week { grid-template-columns: minmax(0, 1fr); } }
.cal-day { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px; min-height: 120px; display: flex; flex-direction: column; gap: 6px; }
.cal-day.today { box-shadow: inset 0 0 0 2px var(--brand); }
.cal-day header { display: flex; gap: 6px; align-items: baseline; font-size: 13px; }
.cal-dow { font-weight: 700; } .cal-date { color: var(--muted); }
.cal-none { margin: 0; font-size: 12px; color: var(--muted); }
.cal-visit { display: flex; flex-direction: column; gap: 1px; padding: 7px 9px; border-radius: 8px; background: var(--brand-tint); color: var(--ink); font-size: 12.5px; border-inline-start: 3px solid var(--brand); }
.cal-visit:hover { background: rgba(124,58,237,.16); }
.cal-visit.done { background: var(--tint-blue); border-inline-start-color: #2a78d6; }
.cal-visit.no_show { background: var(--tint-peach); border-inline-start-color: #eb6834; }
.cal-visit.focus { outline: 2px solid var(--brand); }
.cal-time { font-weight: 700; font-variant-numeric: tabular-nums; }
.cal-meta { color: var(--slate); font-size: 11.5px; }
.cal-status { font-size: 11px; font-weight: 600; color: var(--slate); }

/* ── Sales dashboard ──
   Chart colours: leads aqua, won blue, lost orange — categorical slots validated together
   (CVD ΔE 9.2 worst pair, normal-vision 27.6). Aqua is under 3:1 on white, so every bar carries
   its number and the page has a table of the same figures. */
.dv { --s-leads: #1baf7a; --s-won: #2a78d6; --s-lost: #eb6834; --dv-track: rgba(var(--ink-rgb),.06); }
.dv-tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.dv-tabs a { padding: 9px 14px; font-size: 13.5px; font-weight: 600; color: var(--slate); border-bottom: 2px solid transparent; white-space: nowrap; }
.dv-tabs a.on { color: var(--brand); border-bottom-color: var(--brand); }
.dv-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-bottom: 16px; }
.dv-kpi { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.dv-kpi-n { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.dv-kpi-l { font-size: 12px; color: var(--muted); }
.dv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.dv-grid > .card { margin: 0; }
@media (max-width: 900px) { .dv-grid { grid-template-columns: minmax(0, 1fr); } }
.dv-bars { display: flex; flex-direction: column; gap: 6px; }
.dv-row { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; align-items: center; font-size: 13px; padding: 3px 0; }
.dv-row:hover { background: rgba(var(--ink-rgb),.03); }
.dv-lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-group { display: flex; flex-direction: column; gap: 2px; }
.dv-line { display: grid; grid-template-columns: minmax(0, 1fr) 76px; gap: 8px; align-items: center; }
.dv-track { display: block; height: 10px; background: var(--dv-track); border-radius: 3px; overflow: hidden; }
.dv-fill { display: block; height: 100%; border-radius: 0 3px 3px 0; }
.dv-num { font-size: 12px; color: var(--slate); font-variant-numeric: tabular-nums; }
.s-leads { background: var(--s-leads); } .s-won { background: var(--s-won); } .s-lost { background: var(--s-lost); }
.dv-cols { display: flex; gap: 10px; align-items: flex-end; height: 190px; padding-top: 18px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.dv-col { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 52px; height: 100%; }
.dv-trio { flex: 1; display: flex; gap: 2px; align-items: flex-end; width: 100%; justify-content: center; }
.dv-bar { width: 12px; border-radius: 3px 3px 0 0; position: relative; display: block; min-height: 0; }
.dv-bar b { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 2px; font-size: 10px; font-weight: 600; color: var(--slate); }
.dv-x { font-size: 11px; color: var(--muted); white-space: nowrap; }
.dv-legend { display: flex; gap: 14px; font-size: 12px; color: var(--slate); margin-top: 10px; }
.dv-key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-inline-end: 5px; vertical-align: -1px; }
.dv-key.s-leads { background: #1baf7a; } .dv-key.s-won { background: #2a78d6; } .dv-key.s-lost { background: #eb6834; }
.viz-tip { position: fixed; pointer-events: none; background: #0d1321; color: #fff; font-size: 12px; line-height: 1.4; padding: 6px 9px; border-radius: 7px; z-index: 50; max-width: 260px; display: none; }
@media (max-width: 560px) { .dv-row { grid-template-columns: 90px minmax(0, 1fr); } .dv-line { grid-template-columns: minmax(0, 1fr) 60px; } }

/* Leaderboard */
.lb-row { display: grid; grid-template-columns: 34px minmax(160px, 1fr) minmax(0, 2fr); gap: 12px; align-items: center; padding: 12px 18px; border-top: 1px solid var(--line); }
.lb-rank { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; background: var(--brand-tint); color: var(--brand); }
.lb-row:first-child .lb-rank { background: var(--brand); color: #fff; }
.lb-who { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.lb-who .text-muted { font-size: 12px; }
.lb-goals { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px 14px; }
.goal { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; gap: 6px; align-items: center; font-size: 12px; }
.goal-lbl { color: var(--slate); }
.goal-track { position: relative; height: 8px; background: rgba(var(--ink-rgb),.07); border-radius: 4px; overflow: visible; }
.goal-fill { display: block; height: 100%; border-radius: 4px; background: var(--brand); }
.goal-fill.met { background: #2a78d6; }
.goal-fill.behind { background: #eb6834; }
.goal-pace { position: absolute; top: -3px; width: 2px; height: 14px; background: var(--ink); opacity: .45; }
.goal-n { font-variant-numeric: tabular-nums; color: var(--slate); }
@media (max-width: 700px) { .lb-row { grid-template-columns: 34px minmax(0, 1fr); } .lb-goals { grid-column: 1 / -1; } }
.targets-table input { max-width: 130px; padding: 6px 8px; }
.capi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px 16px; }
.capi-grid label { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px; align-items: center; font-size: 13px; }
.capi-grid input { padding: 6px 9px; }

/* ── AI summary on the lead ── */
.ai-summary { margin: 8px 0 0; font-size: 13.5px; line-height: 1.6; white-space: normal; }
.ai-facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ai-fact { font-size: 12.5px; background: rgba(var(--ink-rgb),.04); border-radius: 8px; padding: 4px 9px; }
.ai-fact.wide { flex-basis: 100%; }
.ai-fact .text-muted { font-size: 11.5px; margin-inline-end: 3px; }
.ai-when { font-size: 11.5px; margin: 10px 0 0; }
.ai-reading { animation: ai-pulse 1.4s ease-in-out infinite; }
@keyframes ai-pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .ai-reading { animation: none; } }

.settings-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.settings-links a { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); }
.settings-links a:hover { border-color: var(--brand); background: var(--brand-tint); }
.settings-links span { font-size: 12.5px; color: var(--slate); }
.crm-sub { margin: 8px 0 6px 18px; padding: 8px 0 4px 12px; border-inline-start: 2px solid var(--brand-tint); }
.crm-sub .lbl { font-size: 12px; }

/* ── Pictures, voice notes, videos and files in the Inbox ── */
.ib-media { margin-bottom: 4px; }
.ib-media audio { width: 260px; max-width: 100%; height: 40px; display: block; }
.ib-media img { max-width: 260px; max-height: 320px; border-radius: 8px; display: block; }
.ib-media video { max-width: 280px; border-radius: 8px; display: block; }
.ib-media-dl { font-size: 11.5px; display: inline-block; margin-top: 3px; }
.ib-media-gone { display: none; font-size: 12.5px; color: var(--muted); font-style: italic; }
.ib-media.gone audio, .ib-media.gone img, .ib-media.gone video, .ib-media.gone .ib-media-dl { display: none; }
.ib-media.gone .ib-media-gone { display: block; }
.ib-file { display: inline-block; padding: 6px 10px; border-radius: 8px; background: rgba(var(--ink-rgb),.05); font-size: 13px; }
.ib-caption { display: block; }

/* ── Teams (CRM → Team & transfer) ── */
.team-box { border: 1px solid var(--line-strong); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; }
.team-members { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 4px; }
.team-members .mod-all { margin: 0; font-size: 13px; }
.sub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-bottom: 10px; }
.field-row { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.field-row input[name="label"] { max-width: 220px; }
.field-row textarea { flex: 1; min-width: 200px; }
.setup-jump { font-size: 13px; }
/* Lead code and sub-status (lead page) */
.lead-code { font: 600 12.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; background: var(--bg);
  border: 1px solid var(--line-strong); color: var(--text); border-radius: 6px; padding: 5px 8px; cursor: copy; }
.lead-code.copied::after { content: ' ✓'; color: var(--success); }
.lead-subs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; font-size: 12.5px; }
.lead-sub { border: 1px solid var(--line-strong); background: transparent; color: var(--text); border-radius: 999px; padding: 4px 10px; font-size: 12.5px; cursor: pointer; }
.lead-sub:hover { border-color: var(--brand); }
.lead-sub.on { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ── Leads list (CRM table) ── */
.crm-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.crm-tile { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; text-decoration: none; color: inherit; }
.crm-tile:hover { border-color: var(--brand); }
.crm-tile.on { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); background: var(--brand-tint); }
.crm-tile .lbl { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.crm-tile .val { display: block; font-size: 22px; font-weight: 800; color: var(--ink); margin-top: 4px; font-variant-numeric: tabular-nums; }
.crm-tile.warn .val { color: var(--danger); }
@media (max-width: 760px) { .crm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .crm-tile:first-child { grid-column: 1 / -1; } }
#crm-views { max-width: 220px; }
.crm-adv { flex-basis: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.crm-adv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 14px; }
.crm-adv-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--slate); }
.crm-adv-grid select, .crm-adv-grid input { width: 100%; font-weight: 400; }
.crm-adv-foot { display: flex; gap: 8px; margin-top: 12px; }
.crm-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: -4px 0 12px; font-size: 12.5px; }
.crm-chip { background: var(--brand-tint); color: var(--ink); border-radius: 999px; padding: 3px 10px; text-decoration: none; }
.crm-chip:hover { background: var(--brand); color: #fff; }
.crm-chip-clear { font-size: 12.5px; margin: 0 6px; }
.crm-empty-note { font-size: 12px; margin: 0 0 6px; }
.crm-table th { white-space: nowrap; }
.crm-table .crm-cb { width: 30px; }
.crm-sort { color: inherit; text-decoration: none; }
.crm-sort:hover { color: var(--brand); }
.crm-sort.on::after { content: ' ↓'; } .crm-sort.on.asc::after { content: ' ↑'; }
.crm-colfilter th { padding-top: 0; padding-bottom: 8px; font-weight: 400; }
.crm-colfilter select, .crm-colfilter input { width: 100%; min-width: 90px; font-size: 12px; padding: 4px 6px; }
.crm-sub-line { display: block; font-size: 11.5px; color: var(--muted); }
.crm-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; margin-inline-end: 6px; }
.crm-name { color: inherit; text-decoration: none; } .crm-name:hover { color: var(--brand); }
.crm-effort { display: inline-flex; gap: 8px; font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.crm-effort .ok { color: var(--success); } .crm-effort .bad { color: var(--danger); }
.crm-acts { white-space: nowrap; text-align: end; }
.crm-acts .btn { padding: 4px 9px; }
.crm-more-btn { display: none; }
.crm-flag.sub { background: var(--brand-tint); color: var(--brand); }
.crm-bulk { position: sticky; top: calc(var(--topbar-h) + 6px); z-index: 5; flex-wrap: wrap; }
.crm-pager { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0; font-size: 13px; }
.crm-pager-links { display: flex; align-items: center; gap: 8px; }
.crm-pager select { width: auto; }
.crm-pop { position: fixed; inset-inline-end: 16px; top: 120px; z-index: 30; width: min(340px, calc(100vw - 32px)); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: 12px; padding: 14px; box-shadow: 0 12px 32px rgba(13,19,33,.16); }
.crm-cols-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; margin: 10px 0; max-height: 50vh; overflow-y: auto; }
.crm-cols-list .mod-all { margin: 0; padding: 4px 0; }
.tpl-preview { font-size: 12.5px; white-space: pre-wrap; background: var(--bg); border-radius: 8px; padding: 8px 10px; }
.tpl-preview:empty { display: none; }
.sr-only { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.crm-acts-h, .table-wrap { position: relative; }

/* On a phone every row is a card: the first details show, "More" opens the rest. */
@media (max-width: 760px) {
  .crm-table thead { display: none; }
  .crm-table, .crm-table tbody { display: block; }
  .crm-table tr { display: grid; grid-template-columns: 28px minmax(0, 1fr); border-bottom: 1px solid var(--line); padding: 10px 12px; }
  .crm-table td { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; border: 0; grid-column: 2; text-align: end; min-width: 0; }
  .crm-table td::before { content: attr(data-label); color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; text-align: start; flex: none; }
  .crm-table td.crm-cb { grid-column: 1; grid-row: 1 / span 2; padding-top: 2px; }
  .crm-table td.crm-cb::before, .crm-table td.c-lead::before, .crm-table td.crm-acts::before { content: none; }
  .crm-table td.c-lead { display: block; text-align: start; font-size: 14.5px; }
  .crm-table td.num { text-align: end; }
  .crm-table tr:not(.open) td:not(.crm-cb):not(.c-lead):not(.crm-acts):nth-child(n+6) { display: none; }
  .crm-table td.crm-acts { justify-content: flex-end; gap: 6px; padding-top: 8px; }
  .crm-more-btn { display: inline-block; border: 0; background: none; color: var(--brand); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
  .crm-bar #crm-views { max-width: none; flex: 1 1 100%; }
  .crm-table td:not(.c-lead) .crm-sub-line { display: inline; margin-inline-start: 6px; }
  .crm-table td > :first-child:not(:only-child) { margin-inline-start: auto; }
}
.crm-table td { padding-top: 9px; padding-bottom: 9px; vertical-align: middle; }
.crm-table td.c-lead { min-width: 190px; }
.crm-table td.c-lead strong { font-weight: 600; }
.crm-table td.c-project { min-width: 120px; }
@media (min-width: 761px) { .crm-table .crm-acts .btn { font-size: 12px; } }
.imp-mode { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.req-act { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.req-act input { max-width: 200px; }

/* ── Reports library ── */
.rep-lib-top { margin-bottom: 14px; }
.rep-lib-top input { max-width: 460px; }
.rep-group { margin-bottom: 18px; }
.rep-group-h { font-size: 12px; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); border: 0; padding: 0; margin: 0 0 8px; }
.rep-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.rep-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.rep-card:hover { border-color: var(--brand); }
.rep-card-link { display: flex; flex-direction: column; gap: 4px; padding: 13px 40px 13px 14px; color: inherit; text-decoration: none; }
.rep-card-link strong { font-size: 14px; color: var(--ink); }
.rep-card-link span { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.rep-star { border: 0; background: none; cursor: pointer; font-size: 17px; line-height: 1; color: var(--line-strong); padding: 4px; }
.rep-card .rep-star { position: absolute; top: 9px; inset-inline-end: 9px; }
.rep-star.on { color: #d8a200; }
.rep-star:focus-visible { outline: 2px solid var(--brand); border-radius: 4px; }
.rep-sub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: -6px 0 12px; font-size: 13px; }
.rep-period { font-weight: 600; color: var(--ink); margin-inline-start: 6px; }
.rep-filterbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.rep-filterbar select, .rep-filterbar input { width: auto; }
.rep-periods { display: inline-flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: var(--surface); }
.rep-chip { position: relative; padding: 6px 11px; font-size: 12.5px; font-weight: 600; color: var(--slate); cursor: pointer; border-inline-end: 1px solid var(--line); }
.rep-chip:last-of-type { border-inline-end: 0; }
.rep-chip input { position: absolute; opacity: 0; pointer-events: none; }
.rep-chip.on { background: var(--brand); color: #fff; }
.rep-chip:focus-within { outline: 2px solid var(--brand); outline-offset: -2px; }
#rep-dates { display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; font-size: 12px; }
#rep-dates[hidden] { display: none; }
#rep-dates input { padding: 4px 6px; font-size: 12px; }
.rep-tiles { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.rep-note { font-size: 12.5px; margin: -4px 0 10px; }
.rep-chart { padding: 14px 16px; }
.rep-legend { display: flex; gap: 14px; font-size: 12px; color: var(--slate); margin-bottom: 10px; }
.rep-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rep-legend .sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.rep-bar-row { display: grid; grid-template-columns: minmax(90px, 200px) minmax(0, 1fr); gap: 10px; align-items: center; padding: 4px 0; }
.rep-bar-label { font-size: 12.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rep-bar-track { display: flex; flex-direction: column; gap: 2px; }
.rep-bar-line { display: flex; align-items: center; gap: 6px; min-height: 12px; }
.rep-bar-line .rep-bar { display: block; height: 11px; margin: 0; border-radius: 0 4px 4px 0; }
.rep-bar-val { font-size: 11.5px; color: var(--slate); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sw-0, .sw-leads, .sw-n, .sw-reached, .sw-assigned, .sw-came { background: #1baf7a; }
.sw-1, .sw-won, .sw-bought { background: #2a78d6; }
.sw-lost { background: #eb6834; }
.rep-table .rep-total td { font-weight: 700; border-top: 2px solid var(--line-strong); }
.rep-table td.num a { font-weight: 600; }
.rep-foot { font-size: 12px; margin-top: 8px; }
@media (max-width: 760px) { .rep-bar-row { grid-template-columns: 96px minmax(0, 1fr); } .rep-filterbar .rep-periods { max-width: 100%; } }
@media print {
  .sidebar, .topbar, .tabbar, .rep-filterbar, .page-head .btn, .page-head a, .rep-star, .help-fab, #rep-filter, .flash, .bottom-nav { display: none !important; }
  body, .main, .content { background: #fff !important; margin: 0 !important; padding: 0 !important; }
  .card { box-shadow: none !important; break-inside: avoid; }
  .rep-bar-line .rep-bar { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .sw { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.rep-table .rep-group-row td { font-weight: 700; background: var(--bg); }
.rep-daily-set { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 13px; margin-top: 14px; }
.rep-daily-set select { width: auto; display: inline-block; }
.rep-heat td.num { text-align: center; }


/* ── Right to left (Arabic) ──
   Most spacing above uses start/end rather than left/right, so it mirrors by itself. What is left
   here: things that slide in from a side, arrows that point, and the Arabic font. */
[dir="rtl"] body { font-family: "Noto Sans Arabic", "Segoe UI", Tahoma, var(--sans); }
[dir="rtl"] .sb-sub { margin: 3px 26px 6px 0; }
[dir="rtl"] .crm-sub { margin: 8px 18px 6px 0; padding: 8px 12px 4px 0; }
[dir="rtl"] .cfg-panel { transform: translateX(-100%); }
@media (max-width: 900px) {
  [dir="rtl"] .sidebar { transform: translateX(100%); box-shadow: -6px 0 24px rgba(26,22,18,.18); }
  [dir="rtl"] .sidebar.open { transform: translateX(0); }
}
[dir="rtl"] .switch input:checked + .slider::before { transform: translateX(-18px); }
[dir="rtl"] .switch .slider::before { left: auto; right: 3px; }
/* Phone numbers, codes and amounts read left to right inside Arabic text. */
[dir="rtl"] .num, [dir="rtl"] .ltr, [dir="rtl"] input[type="tel"], [dir="rtl"] .lead-code { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .data th.num, [dir="rtl"] .data td.num { text-align: left; }

/* ── Language / appearance buttons in the top bar ── */
.topbar-pref { display: inline-flex; }
.pref-btn { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--slate);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; font-weight: 700; }
.pref-btn:hover { color: var(--ink); border-color: var(--line-strong); }
.pref-btn:focus-visible, .fav-star:focus-visible, .sb-kbd:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ── Sidebar: search, favourites, group labels ── */
.sidebar [hidden] { display: none !important; }
.sb-search { position: relative; margin: 0 0 8px; }
.sb-search input { width: 100%; padding: 7px 64px 7px 10px; padding-inline: 10px 64px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: 13px; }
.sb-search input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.sb-kbd { position: absolute; inset-inline-end: 5px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; cursor: pointer; padding: 0; }
kbd { display: inline-block; font: 600 10.5px/1 var(--sans); padding: 3px 5px; border-radius: 5px; border: 1px solid var(--line-strong); color: var(--muted); background: var(--surface-2); }
.sb-glabel { display: block; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 8px 10px 3px; font-weight: 600; }
[dir="rtl"] .sb-glabel { letter-spacing: 0; text-transform: none; font-size: 11.5px; }
.sb-favs { display: flex; flex-direction: column; gap: 2px; padding-bottom: 8px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.sb-favs .sb-glabel { padding-top: 2px; }
.sb-fav svg { color: #E0A100; opacity: 1; }
.sb-fav.active svg { color: #fff; }
.sb-sub .sb-glabel { padding: 7px 10px 2px; font-size: 10px; }

/* ── The star next to a page's title ── */
.page-head h1 { display: inline-flex; align-items: center; gap: 8px; }
.fav-star { border: 0; background: transparent; color: var(--line-strong); cursor: pointer; padding: 3px; border-radius: 6px; display: inline-flex; }
.fav-star svg path { fill: transparent; }
.fav-star:hover { color: #E0A100; }
.fav-star.on { color: #E0A100; }
.fav-star.on svg path { fill: currentColor; }
@media print { .fav-star { display: none; } }

/* ── Ctrl/⌘+K ── */
.cmdk { border: 0; padding: 0; margin: 12vh auto auto; width: min(560px, calc(100vw - 32px)); border-radius: 14px; background: var(--surface); color: var(--text);
  box-shadow: 0 24px 70px rgba(13,19,33,.35); }
.cmdk::backdrop { background: rgba(13,19,33,.45); }
.cmdk input { width: 100%; border: 0; border-bottom: 1px solid var(--line); padding: 15px 18px; font-size: 16px; background: transparent; }
.cmdk input:focus { outline: none; }
.cmdk ul { list-style: none; max-height: 52vh; overflow-y: auto; padding: 6px; }
.cmdk li { display: flex; align-items: baseline; gap: 10px; padding: 9px 12px; border-radius: 8px; cursor: pointer; }
.cmdk li span { color: var(--muted); font-size: 12.5px; direction: ltr; unicode-bidi: isolate; }
.cmdk li em { margin-inline-start: auto; font-style: normal; font-size: 11.5px; color: var(--slate); background: var(--chip); padding: 1px 8px; border-radius: 8px; }
.cmdk li.on { background: var(--brand-tint); }
.cmdk li.on strong { color: var(--brand); }
.cmdk .cmdk-none { color: var(--muted); cursor: default; }
.cmdk-foot { font-size: 11.5px; color: var(--muted); padding: 8px 14px 11px; border-top: 1px solid var(--line); }
@media (max-width: 720px) { .cmdk-foot { display: none; } .sb-kbd { display: none; } .pref-btn { width: 30px; height: 30px; } }
/* On a phone the two buttons move from the top bar into the menu, where there is room. */
.sb-prefs { display: none; gap: 8px; padding: 4px 10px 8px; }
@media (max-width: 520px) {
  .topbar-nav > .topbar-pref { display: none; }
  .sb-prefs { display: flex; }
}
/* Arabic pages still hold English — names, numbers, dates, words not yet translated. Letting each
   piece of text take its direction from its own first letter keeps "3 h ago" and "+20 100…" in
   the right order instead of scrambled. The layout itself stays right to left. */
:where([dir="rtl"]) :where(body) :where(span, a, strong, b, small, em, label, time, td, th, li, p, option, input, textarea) { unicode-bidi: plaintext; }
/* Where such a piece is a box of its own (a tile's number, a card's line), keep it on the right. */
[dir="rtl"] :is(.crm-tile, .stat-tile, .rep-card-link, .dv-tile, .tile) :is(span, strong, b, small, em, a, p) { text-align: right; }
[dir="rtl"] .data td, [dir="rtl"] .data th { text-align: right; }
[dir="rtl"] .data th.num, [dir="rtl"] .data td.num { text-align: left; }
[dir="rtl"] .brand-mark, [dir="rtl"] .brand-mark * { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] :is(.alert, .note, .text-muted, .hint) { unicode-bidi: plaintext; }
.meet-link { display: block; font-size: 12.5px; color: var(--brand); word-break: break-all; direction: ltr; unicode-bidi: isolate; }
/* Events */
.ev-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ev-add select, .ev-add input { max-width: 200px; }
.ev-add select, .ev-add input[type="text"] { width: auto; }

/* ── Lead page: profile, history and meetings on the left; actions and numbers on the right ── */
.lead-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--slate); margin: 0 0 14px; }
.lead-back:hover { color: var(--brand); }
.lead-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.lead-main, .lead-aside { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.lead-main > .card, .lead-aside > .card { margin-bottom: 0; }
@media (max-width: 1080px) { .lead-layout { grid-template-columns: minmax(0, 1fr); } }

.lead-id { display: flex; gap: 16px; align-items: flex-start; }
.lead-avatar { flex: 0 0 56px; height: 56px; border-radius: 50%; background: var(--brand-grad); color: #fff; font-weight: 800; font-size: 19px;
  display: inline-flex; align-items: center; justify-content: center; letter-spacing: .02em; }
.lead-id-text { min-width: 0; flex: 1; }
.lead-id .page-head { margin: 0 0 4px; }
.lead-id .page-head h1 { font-size: 22px; }
.lead-id-line { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin-top: 6px; font-size: 12.5px; }
.lead-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 7px; background: var(--chip); color: var(--slate); font-weight: 600; font-size: 12px; }
.lead-id .lead-code { font-size: 12px; }

.lead-info { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 28px; margin-top: 20px; }
@media (max-width: 720px) { .lead-info { grid-template-columns: minmax(0, 1fr); } }
.lead-sec { font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: var(--slate); font-weight: 700; margin: 18px 0 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.lead-info .lead-sec { margin-top: 0; }
[dir="rtl"] .lead-sec { letter-spacing: 0; }
.lead-dl, .lead-dl.lead-meta { display: grid; grid-template-columns: minmax(110px, auto) minmax(0, 1fr); gap: 9px 12px; font-size: 13.5px; margin: 0; }
.lead-dl dt { color: var(--slate); }
.lead-dl dd { margin: 0; text-align: end; font-weight: 600; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.lead-dl-inline { grid-template-columns: auto minmax(0, 1fr); }
.lead-dl-inline dd { text-align: start; }
.lead-tag { display: inline-block; font-size: 12px; padding: 2px 9px; border: 1px solid var(--line); border-radius: 7px; font-weight: 600; }
.lead-box { display: inline-block; font-size: 12.5px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; text-align: end; }

.lead-card-h { display: flex; align-items: center; gap: 8px; font-size: 17px; margin: 0; padding: 0; border: 0; }
.lead-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-top: 14px; overflow-x: auto; }
.lead-tabs button { border: 0; background: transparent; padding: 9px 12px; font: inherit; font-size: 13px; color: var(--slate); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.lead-tabs button.on { color: var(--ink); font-weight: 600; border-bottom-color: var(--brand); background: transparent; }
.lead-empty { text-align: center; color: var(--muted); padding: 26px 10px; font-size: 13.5px; margin: 0; }
.lead-empty svg { color: var(--line-strong); margin-bottom: 6px; }
#visits .lead-empty { border: 1px solid var(--line); border-radius: 10px; margin-top: 12px; }

/* Actions: a grid of coloured buttons, each one a thing you do to this lead. */
.lead-actions-card .lead-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 14px; }
.lead-actions-card .lead-actions form { display: contents; }
.la { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 7px 10px; border-radius: 9px;
  border: 1px solid transparent; font: inherit; font-size: 13px; font-weight: 600; color: #fff; cursor: pointer; text-align: center; line-height: 1.2; }
.la:hover { filter: brightness(1.07); }
.la:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.la-orange { background: #F08A24; } .la-cyan { background: #0EA5C6; } .la-purple { background: #A855F7; } .la-teal { background: #0F9F8F; }
.la-green { background: #16A34A; } .la-emerald { background: #059669; } .la-yellow { background: #EAB308; color: #3B2A00; } .la-violet { background: #8B5CF6; }
.la-blue { background: #2563EB; } .la-indigo { background: #4F46E5; }
.la-outline { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.la-plain { background: transparent; color: var(--ink); border-color: var(--line); }
.lead-del { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; }

.lead-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.ls { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; text-align: center; }
.ls span { display: block; font-size: 12px; color: var(--slate); }
.ls b { display: block; font-size: 22px; font-variant-numeric: tabular-nums; color: var(--ink); }
.ls-good { background: var(--success-bg); border-color: transparent; } .ls-good b, .ls-good span { color: var(--success); }
.ls-bad { background: var(--danger-bg); border-color: transparent; } .ls-bad b, .ls-bad span { color: var(--danger); }
.ls-blue { background: var(--info-bg); border-color: transparent; } .ls-blue b, .ls-blue span { color: var(--info); }
.lead-dl-stats { margin-top: 14px; }

.lead-fold > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.lead-fold > summary::-webkit-details-marker { display: none; }
.lead-fold > summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--slate); border-bottom: 2px solid var(--slate); transform: rotate(45deg); transition: transform .15s; }
.lead-fold[open] > summary::after { transform: rotate(-135deg); }
.lead-fold > summary .lead-card-h { font-size: 15.5px; }
.lead-fold[open] > summary { margin-bottom: 10px; }
.fold-row { display: flex; flex-direction: column; gap: 1px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13px; }
.fold-row .text-muted { font-size: 11.5px; }

.lead-dlg { border: 0; border-radius: 14px; padding: 22px; width: min(620px, calc(100vw - 32px)); max-height: 88vh; overflow-y: auto;
  background: var(--surface); color: var(--text); box-shadow: 0 20px 60px rgba(13,19,33,.3); }
.lead-dlg::backdrop { background: rgba(13,19,33,.45); }
.dlg-btns { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) { .lead-fold > summary::after { transition: none; } }
.card h2.lead-card-h { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.lead-tabs.lead-filter button, .lead-tabs.lead-filter button.on { border-radius: 0; border: 0; border-bottom: 2px solid transparent; background: transparent; }
.lead-tabs.lead-filter button.on { border-bottom-color: var(--brand); color: var(--ink); }
/* One column: the actions come right under the lead, before the long history. */
@media (max-width: 1080px) {
  .lead-layout { display: flex; flex-direction: column; }
  .lead-main, .lead-aside { display: contents; }
  .lead-hero { order: 1; } .lead-actions-card { order: 2; } #next { order: 3; } #ai { order: 4; }
  #timeline { order: 5; } #visits { order: 6; } #stats { order: 7; } .lead-fold { order: 8; }
}
.lead-next .lead-card-h { margin-bottom: 10px; }
.lead-dl .lead-phone { font-size: inherit; font-weight: 700; }
.lead-main > *, .lead-aside > * { min-width: 0; max-width: 100%; }
/* Stage editor: each stage's sub-statuses under it */
#st-list .st-row { flex-wrap: wrap; }
.st-subs { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; padding: 2px 0 4px 26px; padding-inline: 26px 0; }
.st-subs-l { font-size: 11.5px; color: var(--muted); margin-inline-end: 4px; }
.st-chips { display: contents; }
.st-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; background: var(--brand-tint); color: var(--brand); border-radius: 7px; padding: 2px 4px 2px 8px; padding-inline: 8px 4px; }
.st-chip button { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 14px; line-height: 1; padding: 0 3px; }
.st-sub-new { width: 170px; font-size: 12.5px; padding: 3px 8px; border: 1px dashed var(--line-strong); border-radius: 7px; background: transparent; }
#m-stages .modal { max-width: 640px; }
/* Bulk transfer */
.tr-dlg { width: min(560px, calc(100vw - 32px)); max-height: 90vh; overflow-y: auto; background: var(--surface); color: var(--text); }
.tr-dlg .lbl-sm, .lbl-sm { font-size: 12.5px; font-weight: 600; color: var(--slate); margin: 12px 0 6px; }
.tr-list { list-style: none; margin: 0; padding: 0; max-height: 170px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; }
.tr-list li { padding: 8px 12px; border-top: 1px solid var(--line); font-size: 13.5px; display: flex; gap: 8px; align-items: baseline; }
.tr-list li:first-child { border-top: 0; }
.tr-list li span { color: var(--muted); font-size: 12px; }
.tr-list:empty { display: none; }
.tr-seg { display: flex; border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden; margin-top: 14px; }
.tr-seg button { flex: 1; border: 0; background: var(--surface); color: var(--slate); padding: 10px; font: inherit; font-weight: 600; cursor: pointer; }
.tr-seg button.on { background: var(--brand); color: #fff; }
.tr-seg button:disabled { opacity: .5; cursor: not-allowed; }
.tr-quota { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12.5px; background: var(--chip); border-radius: 8px; padding: 4px 4px 4px 10px; padding-inline: 10px 4px; }
.tr-row { display: flex; gap: 8px; margin-top: 8px; align-items: center; }
.tr-row .tr-u { flex: 1; }
.tr-row .tr-n { width: 80px; text-align: center; }
.tr-box { display: flex; justify-content: space-between; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 12px 0; cursor: pointer; }
.tr-box > span:first-child { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.tr-box.off { opacity: .55; }
.tr-box small { font-size: 12px; }
.lead-hidden-note { font-size: 12.5px; color: var(--slate); background: var(--chip); border-radius: 8px; padding: 6px 10px; margin: 8px 0 0; }
/* Materials */
.mat-cats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 6px 0 14px; }
@media (max-width: 900px) { .mat-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mat-cat { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 12px; background: var(--surface);
  border: 1px solid var(--line); font-weight: 600; font-size: 13.5px; color: var(--ink); border-top: 3px solid var(--line-strong); }
.mat-cat b { font-size: 18px; font-variant-numeric: tabular-nums; }
.mat-cat.on { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.mat-marketing { --mat: #E8590C; } .mat-sales { --mat: #2A78D6; } .mat-legal { --mat: #7C3AED; } .mat-financial { --mat: #0F9F6E; }
.mat-cat.mat-marketing, .mat-cat.mat-sales, .mat-cat.mat-legal, .mat-cat.mat-financial { border-top-color: var(--mat); }
.mat-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.mat-filter input[type=search] { flex: 1 1 240px; }
.mat-filter select { width: auto; }
.mat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.mat-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.mat-thumb { display: flex; align-items: center; justify-content: center; height: 140px; background: var(--chip); font-size: 44px; border-bottom: 3px solid var(--mat, var(--line)); }
.mat-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mat-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.mat-tag { font-size: 11px; font-weight: 700; color: var(--mat, var(--slate)); text-transform: uppercase; letter-spacing: .06em; }
[dir="rtl"] .mat-tag { letter-spacing: 0; }
.mat-title { font-size: 14.5px; color: var(--ink); overflow-wrap: anywhere; }
.mat-desc { font-size: 12.5px; color: var(--slate); }
.mat-meta { font-size: 11.5px; color: var(--muted); }
.mat-acts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: auto; padding-top: 8px; }
.mat-empty { text-align: center; color: var(--muted); }
/* The reset at the top zeroes every margin, which also stops a <dialog> centring itself. */
dialog { margin: auto; }
#st-list .st-sub-new { width: 190px; flex: 0 0 auto; padding: 4px 9px; font-size: 12.5px; min-height: 0; height: auto; }
/* Integrations */
.int-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; }
.int-tabs a { padding: 6px 12px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--slate); }
.int-tabs a:hover { color: var(--brand); border-color: var(--brand); }
.int-fresh { border: 2px solid var(--brand); }
.int-copy { display: flex; gap: 8px; align-items: center; background: var(--chip); border-radius: 9px; padding: 8px 10px; margin-top: 8px; }
.int-copy code { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 12.5px; direction: ltr; unicode-bidi: isolate; text-align: left; }
.int-item { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; }
.int-item-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.int-url { display: block; font-size: 12.5px; color: var(--slate); overflow-wrap: anywhere; }
.int-acts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.int-more { margin-top: 8px; font-size: 13px; }
.int-more > summary { cursor: pointer; color: var(--brand); font-weight: 600; }
.int-events { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2px 14px; }
.int-events code, .int-fields code { font-size: 11px; color: var(--muted); }
.int-add { margin-top: 10px; } .int-add > summary { list-style: none; display: inline-flex; cursor: pointer; }
.int-add > summary::-webkit-details-marker { display: none; }
.int-map { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px 16px; }
.int-map label { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--slate); }
.int-inline { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.int-inline input, .int-inline select { width: auto; flex: 0 1 220px; }
.int-pre { background: var(--chip); border-radius: 9px; padding: 10px 12px; font-size: 12px; overflow-x: auto; white-space: pre; max-height: 320px; text-align: left; }
.int-revoked td { opacity: .5; }
.int-docs h3 { font-size: 14.5px; margin: 18px 0 6px; }
.int-docs p { font-size: 13.5px; }
.int-endpoints td:first-child { white-space: nowrap; width: 1%; }
.int-fields { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; }
.cm-pct { display: block; font-size: 11px; }
.stat-tile.on { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); } a.stat-tile { color: inherit; text-decoration: none; } a.stat-tile:hover { border-color: var(--brand); } .sep-v { width: 1px; background: var(--line); margin: 0 4px; }

/* ── Admin → SEO: the search result and the shared-link card, as they will look ── */
.seo-serp { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--white); max-width: 620px; font-family: Arial, sans-serif; }
.seo-serp-url { font-size: 12.5px; color: var(--slate); }
.seo-serp-title { font-size: 19px; color: #1A0DAB; margin: 3px 0 4px; line-height: 1.3; }
.seo-serp-desc { font-size: 13.5px; color: var(--slate); line-height: 1.5; }
.seo-share { display: flex; gap: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; max-width: 520px; margin-bottom: 14px; background: var(--white); }
.seo-share img { width: 42%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; display: block; align-self: flex-start; flex-shrink: 0; }
.seo-share > div { padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 13px; }
.seo-share span { color: var(--slate); }
.seo-share small { color: var(--muted); }
:root[data-theme="dark"] .seo-serp-title { color: #8AB4F8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .seo-serp-title { color: #8AB4F8; } }
@media (max-width: 560px) { .seo-share { flex-direction: column; } .seo-share img { width: 100%; } }
.sb-link > .sb-count { margin-inline-start: auto; }
.sb-link.active > .sb-count { background: rgba(255,255,255,.24); color: #fff; }

/* ── Lead Qualifier: why messages failed ── */
.fail-table td { vertical-align: top; }
.fail-table tr.on td { background: var(--brand-tint); }
.fail-bar { display: inline-block; width: 70px; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; vertical-align: middle; margin-inline-end: 8px; }
.fail-bar > span { display: block; height: 100%; background: var(--danger); border-radius: 3px; }

/* ── CRM → Assignment rules: what each WhatsApp alert says ── */
.sw-kind { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.sw-kind summary { cursor: pointer; font-weight: 600; font-size: 13.5px; }
.sw-kind[open] summary { margin-bottom: 10px; }
.sw-kind textarea { width: 100%; }
.sw-fields { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.sw-fields .crm-chip { cursor: pointer; font-size: 11.5px; }
.sw-chips { display: flex; flex-wrap: wrap; gap: 4px 14px; }

/* ── Automations: "Also start when…" ── */
.trig-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 6px; font-size: 13px; }
.trig-row > strong { min-width: 220px; }
.trig-cfg { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; flex: 1; }
.trig-cfg input { min-width: 180px; flex: 1; }
.trig-cfg select { width: auto; max-width: 260px; }

/* Comments feed */
.cm-filters { padding: 12px 18px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cm-filters select, .cm-filters input[type=search] { width: auto; min-width: 150px; }
.cm-show { display: flex; gap: 4px; flex-wrap: wrap; margin-inline-end: auto; }
.cm-show a { padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--slate); border: 1px solid var(--line); }
.cm-show a.on { background: var(--brand-tint); color: var(--brand); border-color: transparent; }
.cm-n { font-size: 11px; opacity: .75; }
.cm-post { padding: 0; overflow: hidden; }
.cm-post-head { display: flex; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: rgba(var(--ink-rgb), .025); }
.cm-post-head img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; flex: none; }
.cm-post-head p { margin: 6px 0 4px; font-size: 13px; }
.cm-post-links { display: flex; gap: 12px; font-size: 12.5px; }
.cm-item { padding: 12px 18px; border-bottom: 1px solid var(--line); }
.cm-item:last-child { border-bottom: 0; }
.cm-item.cm-hidden .cm-body, .cm-item.cm-deleted .cm-body { opacity: .55; }
.cm-item.cm-deleted .cm-body { text-decoration: line-through; }
.cm-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.cm-body { margin: 6px 0; font-size: 14px; white-space: normal; overflow-wrap: anywhere; }
.cm-reply { margin: 4px 0 4px 18px; padding: 6px 10px; border-inline-start: 2px solid var(--line); font-size: 13px; }
[dir=rtl] .cm-reply { margin: 4px 18px 4px 0; }
.cm-reply.cm-ours { border-inline-start-color: var(--brand); }
.cm-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-start; margin-top: 6px; }
.cm-inline { display: contents; }
.cm-reply-box { flex-basis: 100%; order: 9; }
.cm-reply-box[open] summary { display: none; }
.cm-reply-box textarea { margin: 6px 0; }
.cm-reply-box:not([open]) { flex-basis: auto; order: 0; }

/* Messenger / Instagram campaign audience */
.sc-aud { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin: 6px 0 14px; }
.sc-aud legend { padding: 0 6px; }
.sc-opt { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; cursor: pointer; }
.sc-opt input { width: auto; margin-top: 3px; }
.sc-opt small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.sc-count { margin: 10px 0 0; font-size: 13.5px; }

/* ───────── Charts (includes/charts.php, assets/viz.js) ─────────
   Categorical slots validated for CVD and contrast on the card surface, light (#FFFFFF) and dark (#171D29).
   Slots 3 and 4 sit under 3:1 on white, so every chart names its numbers (labels, legend, table). */
:root {
  --viz-1: #2a78d6; --viz-2: #eb6834; --viz-3: #1baf7a; --viz-4: #eda100;
  --viz-5: #e87ba4; --viz-6: #008300; --viz-7: #4a3aa7; --viz-8: #e34948;
  --viz-bad: #d03b3b;
  --viz-grid: rgba(var(--ink-rgb), .07); --viz-track: rgba(var(--ink-rgb), .05);
  --viz-h1: #cde2fb; --viz-h2: #9ec5f4; --viz-h3: #6da7ec; --viz-h4: #3987e5; --viz-h5: #256abf; --viz-h6: #184f95;
  --viz-f0: #184f95; --viz-f1: #256abf; --viz-f2: #2a78d6; --viz-f3: #5598e7; --viz-f4: #86b6ef;
  --viz-tip-bg: #0d1321; --viz-tip-ink: #fff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --viz-1: #3987e5; --viz-2: #d95926; --viz-3: #199e70; --viz-4: #c98500;
    --viz-5: #d55181; --viz-6: #008300; --viz-7: #9085e9; --viz-8: #e66767;
    --viz-h1: #16325a; --viz-h2: #184f95; --viz-h3: #256abf; --viz-h4: #3987e5; --viz-h5: #6da7ec; --viz-h6: #b7d3f6;
    --viz-f0: #86b6ef; --viz-f1: #5598e7; --viz-f2: #3987e5; --viz-f3: #256abf; --viz-f4: #1c5cab;
    --viz-tip-bg: #EEF1F7; --viz-tip-ink: #0E131C;
  }
}
:root[data-theme="dark"] {
  --viz-1: #3987e5; --viz-2: #d95926; --viz-3: #199e70; --viz-4: #c98500;
  --viz-5: #d55181; --viz-6: #008300; --viz-7: #9085e9; --viz-8: #e66767;
  --viz-h1: #16325a; --viz-h2: #184f95; --viz-h3: #256abf; --viz-h4: #3987e5; --viz-h5: #6da7ec; --viz-h6: #b7d3f6;
  --viz-f0: #86b6ef; --viz-f1: #5598e7; --viz-f2: #3987e5; --viz-f3: #256abf; --viz-f4: #1c5cab;
  --viz-tip-bg: #EEF1F7; --viz-tip-ink: #0E131C;
}

/* Period picker */
.viz-periods { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 16px; }
.viz-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: var(--surface); }
.viz-seg a { padding: 6px 12px; font-size: 12.5px; font-weight: 600; color: var(--slate); border-inline-end: 1px solid var(--line); white-space: nowrap; }
.viz-seg a:last-child { border-inline-end: 0; }
.viz-seg a.on { background: var(--brand-tint); color: var(--brand); }
.viz-periods input[type=date] { width: auto; padding: 5px 8px; font-size: 12.5px; }
.viz-period-words { color: var(--muted); font-size: 12.5px; margin: -8px 0 16px; }

/* Headline numbers */
.viz-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.viz-kpi { position: relative; display: flex; flex-direction: column; gap: 3px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 13px 14px 12px; min-height: 104px; color: inherit; text-decoration: none; overflow: hidden; }
a.viz-kpi:hover { border-color: var(--brand); }
.viz-kpi-l { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.viz-kpi-v { font-size: 26px; font-weight: 800; color: var(--ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
.viz-kpi-s { font-size: 11.5px; color: var(--muted); }
.viz-delta { font-size: 11.5px; color: var(--slate); font-variant-numeric: tabular-nums; }
.viz-delta i { font-style: normal; font-size: 9px; }
.viz-delta.good i { color: var(--success); } .viz-delta.bad i { color: var(--danger); } .viz-delta.flat i { color: var(--muted); }
.viz-delta-w { color: var(--muted); }
.viz-kpi-sp { position: relative; display: block; height: 28px; margin-top: auto; padding-top: 6px; }
.viz-spark { display: block; width: 100%; height: 28px; overflow: visible; }
.viz-spark-end { position: absolute; left: var(--x); top: calc(6px + 28px * var(--yf)); width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px var(--surface); }
[dir=rtl] .viz-kpi-sp, [dir=rtl] .viz-chart .viz-frame, [dir=rtl] .viz-chart .viz-x { direction: ltr; }

/* Cards */
.viz-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.viz-grid2 > .card, .viz-grid3 > .card { margin: 0; }
.viz-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.viz-stack > * + * { margin-top: 16px; }
.viz-card { padding: 16px 18px; }
.viz-card-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.viz-card-h h2 { margin: 0; border: 0; padding: 0; font-size: 15px; }
.viz-card-h p { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); }
.viz-empty { padding: 26px 8px; text-align: center; color: var(--muted); font-size: 13px; }
.viz-note { margin: 10px 0 0; font-size: 12.5px; color: var(--slate); }
.viz-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--slate); margin-bottom: 10px; }
.viz-key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--c); margin-inline-end: 6px; vertical-align: -1px; }

/* Trend: line or columns */
.viz-frame { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; height: var(--h); }
.viz-y { position: relative; width: 38px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.viz-y span { position: absolute; right: 0; transform: translateY(50%); white-space: nowrap; }
.viz-plot { position: relative; outline: none; border-bottom: 1px solid var(--line-strong); }
.viz-plot:focus-visible { box-shadow: 0 0 0 2px var(--brand); border-radius: 4px; }
.viz-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.viz-grid i { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--viz-grid); }
.viz-x { position: relative; height: 18px; margin: 6px 0 0 46px; font-size: 11px; color: var(--muted); }
.viz-x span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.viz-x span.first { transform: none; } .viz-x span.last { transform: translateX(-100%); }
.viz-cross { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--line-strong); display: none; pointer-events: none; }
.viz-cross.band { border: 0; background: rgba(var(--ink-rgb), .04); transform: translateX(-50%); }
.viz-dot { position: absolute; width: 9px; height: 9px; margin: 0 0 -4.5px -4.5px; border-radius: 50%; background: var(--c);
  box-shadow: 0 0 0 2px var(--surface); display: none; pointer-events: none; }
.viz-endlbl { position: absolute; left: 100%; transform: translateY(50%); margin-left: 6px; font-size: 11px; font-weight: 700; color: var(--text); white-space: nowrap; }
.viz-endlbl::before { content: ""; display: inline-block; width: 8px; height: 2px; background: var(--c); margin-right: 4px; vertical-align: middle; }
.viz-chart.viz-line .viz-frame { margin-right: 44px; }
.viz-cols { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 2px; }
.viz-col { flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; min-width: 0; }
.viz-col.stack { flex-direction: column; justify-content: flex-end; gap: 2px; }
.viz-colbar { display: block; flex: 1 1 0; max-width: 28px; background: var(--c); border-radius: 4px 4px 0 0; min-width: 2px; }
.viz-col.stack .viz-colbar { flex: none; width: 100%; max-width: 28px; margin: 0 auto; border-radius: 2px; }
.viz-col.stack .viz-colbar:first-child { border-radius: 4px 4px 2px 2px; }
.viz-col.stack .viz-colbar[style*="height:0%"] { display: none; }
.viz-col.on .viz-colbar { filter: brightness(1.08); }

/* Bars */
.viz-bars { display: flex; flex-direction: column; gap: 4px; }
.viz-bar-row { display: grid; grid-template-columns: minmax(90px, 34%) minmax(0, 1fr); gap: 10px; align-items: center; padding: 4px 0; font-size: 13px; }
.viz-bar-row:hover { background: rgba(var(--ink-rgb), .025); }
.viz-bar-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viz-bar-l small { display: block; color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
.viz-bar-g { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.viz-bar-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.viz-bar-track { flex: 1 1 auto; min-width: 0; }
.viz-bar { display: block; height: 11px; background: var(--c); border-radius: 0 4px 4px 0; }
.viz-bar-v { font-size: 12px; color: var(--slate); font-variant-numeric: tabular-nums; white-space: nowrap; flex: none; min-width: 44px; }
[dir=rtl] .viz-bar { border-radius: 4px 0 0 4px; }

/* Funnel */
.viz-funnel { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.viz-funnel li { display: grid; grid-template-columns: minmax(80px, 26%) minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 3px 0; font-size: 13px; position: relative; }
.viz-f-cont { grid-column: 2 / -1; font-size: 11px; color: var(--muted); margin: 0 0 -2px; }
.viz-funnel li:has(.viz-f-cont) .viz-f-l { grid-row: 2; }
.viz-funnel li:has(.viz-f-cont) .viz-f-track { grid-row: 2; grid-column: 2; }
.viz-funnel li:has(.viz-f-cont) .viz-f-v { grid-row: 2; grid-column: 3; }
.viz-f-track { display: block; height: 18px; }
.viz-f-bar { display: block; height: 100%; width: var(--w); border-radius: 0 4px 4px 0; background: var(--viz-f0); }
.viz-funnel li[style*="--step:1"] .viz-f-bar { background: var(--viz-f1); }
.viz-funnel li[style*="--step:2"] .viz-f-bar { background: var(--viz-f2); }
.viz-funnel li[style*="--step:3"] .viz-f-bar { background: var(--viz-f3); }
.viz-funnel li[style*="--step:4"] .viz-f-bar { background: var(--viz-f4); }
.viz-f-v { font-size: 12px; color: var(--slate); white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 86px; text-align: end; }
.viz-f-v b { color: var(--ink); }

/* Share bar */
.viz-share { display: flex; gap: 2px; height: 16px; border-radius: 5px; overflow: hidden; }
.viz-share span { background: var(--c); min-width: 3px; }
.viz-share-l { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 16px; font-size: 12.5px; }
.viz-share-l li { display: flex; align-items: center; gap: 6px; min-width: 0; }
.viz-share-l span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viz-share-l b { font-variant-numeric: tabular-nums; }
.viz-share-l small { color: var(--muted); width: 34px; text-align: end; font-variant-numeric: tabular-nums; }

/* Heat map */
.viz-heat { display: grid; grid-template-columns: 34px repeat(24, minmax(0, 1fr)); gap: 2px; font-size: 10.5px; color: var(--muted); direction: ltr; }
.viz-heat-h { text-align: start; height: 14px; }
.viz-heat-d { display: flex; align-items: center; }
.viz-cell { display: block; aspect-ratio: 1 / 1; min-height: 10px; border-radius: 3px; background: var(--viz-track); }
.viz-cell.l1 { background: var(--viz-h1); } .viz-cell.l2 { background: var(--viz-h2); } .viz-cell.l3 { background: var(--viz-h3); }
.viz-cell.l4 { background: var(--viz-h4); } .viz-cell.l5 { background: var(--viz-h5); } .viz-cell.l6 { background: var(--viz-h6); }
.viz-heat-key { display: flex; align-items: center; gap: 3px; justify-content: flex-end; margin-top: 8px; font-size: 11px; color: var(--muted); }
.viz-heat-key .viz-cell { width: 12px; min-height: 12px; }
.viz-heat-key span { margin: 0 4px; }

/* Table view */
.viz-table { margin-top: 10px; font-size: 12.5px; }
.viz-table summary { cursor: pointer; color: var(--slate); font-weight: 600; font-size: 12px; width: max-content; }
.viz-table .table-wrap { max-height: 320px; overflow: auto; margin-top: 8px; border: 1px solid var(--line); border-radius: 8px; }

.viz-tip { position: fixed; pointer-events: none; background: var(--viz-tip-bg); color: var(--viz-tip-ink); font-size: 12px; line-height: 1.5;
  padding: 7px 10px; border-radius: 8px; z-index: 60; max-width: 280px; display: none; box-shadow: 0 6px 20px rgba(0,0,0,.18); }
.viz-tip strong { display: block; margin-bottom: 2px; }
.viz-tip .viz-key { box-shadow: 0 0 0 1px rgba(255,255,255,.6); }

@media (max-width: 900px) { .viz-grid2, .viz-grid3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .viz-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .viz-kpi { min-height: 96px; padding: 11px 12px; } .viz-kpi-v { font-size: 22px; }
  .viz-delta-w { display: none; }
  .viz-chart.viz-line .viz-frame { margin-right: 36px; }
  .viz-heat { grid-template-columns: 28px repeat(24, minmax(0, 1fr)); gap: 1px; }
  .viz-heat-h { font-size: 9px; }
  .viz-x span.alt { display: none; }
  .viz-y { width: 30px; font-size: 10px; } .viz-x { margin-left: 38px; font-size: 10px; }
  .viz-bar-row { grid-template-columns: minmax(80px, 38%) minmax(0, 1fr); }
  .viz-funnel li { grid-template-columns: 74px minmax(0, 1fr) auto; }
}
@media print { .viz-periods, .viz-table summary { display: none; } .viz-card { break-inside: avoid; } }
.viz-sub { font-size: 13px; margin: 16px 0 8px; color: var(--ink); }

/* SMS */
.sms-gw-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.sms-gw.off { opacity: .7; }
.sms-gw-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.sms-dlr { margin-top: 10px; font-size: 12.5px; overflow-wrap: anywhere; }
.sms-dlr code { font-size: 11.5px; background: var(--chip); padding: 2px 6px; border-radius: 5px; }
.sms-test { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.sms-test input { width: auto; flex: 1 1 160px; }
.sms-prov-fields { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 8px 0 12px; }
.sms-wide { grid-column: 1 / -1; }
.sms-counter { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--slate); margin-top: 4px; font-variant-numeric: tabular-nums; }
.sms-counter b { color: var(--ink); }
.sms-src { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.sms-src label { border: 1px solid var(--line); border-radius: 9px; padding: 7px 12px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--slate); }
.sms-src label { position: relative; }
.sms-src input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }   /* hidden but still reachable by keyboard */
.sms-src label:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.sms-src label:has(input:checked) { background: var(--brand-tint); color: var(--brand); border-color: transparent; }
.sms-pane[hidden] { display: none; }
.sms-code { background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-size: 12px; overflow-x: auto; white-space: pre; }
.sw-sendby { display: flex; flex-direction: column; gap: 4px; }
.sw-kind-row { display: flex; align-items: center; gap: 10px; justify-content: space-between; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding: 3px 0; }
.sw-kind-row select { padding: 4px 8px; font-size: 12.5px; }
/* Lead Qualifier tiles: a brief cue when the live numbers change. */
.tiles-updated .stat-tile .val { transition: color .3s; color: var(--brand); }
@media (prefers-reduced-motion: reduce) { .tiles-updated .stat-tile .val { transition: none; } }

/* ── Facebook & Instagram connect: the strip on Inbox / Comments, and the setup page ── */
.social-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; margin: 0 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-size: 13px; }
.social-banner-act { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fb-connect-btn { display: inline-flex; align-items: center; gap: 7px; }
.sc-steps { list-style: none; display: flex; gap: 8px; padding: 0; margin: 0 0 14px; flex-wrap: wrap; counter-reset: sc; }
.sc-steps li { counter-increment: sc; display: flex; align-items: center; gap: 8px; padding: 7px 12px 7px 8px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 12.5px; }
.sc-steps li::before { content: counter(sc); display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--line); color: var(--ink); font-size: 11px; font-weight: 700; }
.sc-steps li.now { color: var(--ink); border-color: var(--brand); }
.sc-steps li.now::before { background: var(--brand); color: #fff; }
.sc-steps li.done::before { content: "✓"; background: var(--success, #16a34a); color: #fff; }
.sc-hero { display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.sc-need { margin: 10px 0 0; padding-inline-start: 18px; color: var(--muted); font-size: 12.5px; }
.sc-need li { margin: 3px 0; }

/* SMS → Settings: choosing the gateway */
.sms-gw-pick { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.sms-gw-opt { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; background: var(--surface); }
.sms-gw-opt span:first-of-type { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.sms-gw-opt.on { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.sms-gw-opt.off { opacity: .6; cursor: not-allowed; }
.sms-gw-opt:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }

/* SMS gateway form: the provider's setup guide */
.sms-guide { margin: 10px 0 2px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: 13px; }
.sms-guide summary { cursor: pointer; padding: 10px 14px; font-weight: 600; color: var(--brand); }
.sms-guide > :not(summary) { margin-inline: 14px; }
.sms-guide ol, .sms-guide ul { padding-inline-start: 20px; line-height: 1.55; max-width: 72ch; }
.sms-guide li { margin: 4px 0; }
.sms-guide code { font-size: 12px; background: var(--brand-tint, rgba(124,58,237,.08)); padding: 1px 5px; border-radius: 4px; }
.sms-guide-h { font-weight: 600; margin-top: 10px; margin-bottom: 0; }
.sms-guide-link { margin-bottom: 12px; }
/* Client SMS gateway panel (Settings and SMS → Settings) */
.sms-panel-h { font-size: 14px; margin: 18px 0 8px; }
.sms-panel-h:first-child { margin-top: 0; }
.sms-own-gw { margin-bottom: 12px; }
.sms-own-form { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin: 10px 0; }
.sms-own-form h4 { margin: 0 0 10px; font-size: 13.5px; }
/* Facebook & Instagram: permissions, Page chooser, all-Pages list */
.sc-perms { border-color: var(--danger); }
.sc-choose { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sc-choose select { flex: 1 1 320px; max-width: 520px; }
.sc-all summary { cursor: pointer; }
.sc-reconnect { margin: 4px 0 16px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn.sc-broken { color: var(--danger); border-color: var(--danger); }
.sc-sync { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; font-size: 13px; }
.sc-sync-line { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sc-sync-line form { margin-inline-start: auto; }
.sc-live-help { margin-top: 10px; }
.sc-live-help summary { cursor: pointer; color: var(--brand); font-weight: 600; }
.sc-live-help ol { padding-inline-start: 20px; line-height: 1.6; max-width: 80ch; }