/* Tekzop UI, version 2 (Nov 14, 2026). Yash: "tekzop.com is build in great design principles, can we rebuild our entire
   dialer system and all portals and their design this way? Of course use the same colors but make it aesthetically pleasing
   in how large and small everything should be." Version 1 (Nov 13) was the warm-neutral look with a blue accent.
   tekzop.com's language, carried into the portals: Inter; black, white and seven grays (#1A1A1A #333 #4D4D4D #6E6E6E
   #A3A3A3 #E5E5E5 #F5F5F5) with black as the one action color; black pill buttons and outlined pills; white cards with 16 px
   corners on a #F5F5F5 canvas; hairline dividers instead of boxes and shadows (shadows only for things that float: menus,
   dialogs, drawers); quiet gray labels over confident black values; one clear size scale (below). Green, red and amber stay
   only where they mean something (done, problem, waiting). Dark mode is the same idea inverted.
   Nov 14, 2026, later (Yash: "Keep the blue button and other event colors on calendars to be blue and also messages back and
   forth reply. It does not have to be strict black and white just font and other things"): Tekzop blue is back as the accent
   for buttons, calendar events and today, your side of message threads, selected tabs, unread dots and focus; the rest of
   tekzop.com's look (Inter, grays, pills, cards, sizes) stays.
   One file for ldc, am, mktg, hr, fi, eng and sa, linked right after each page's own <style>; section styles that modules
   inject later are reached with :root in front. Undo: put back tz.v1-37fa8f26.css (or empty this file).
   Sizes: page title 18 / panel title 15 / body 15 / table 14.5 / label 13 / micro 12; big numbers 28-30; controls 36 high
   (small 30, sign-in 46); radii: pills for buttons, chips and switches, 10 for fields, 16 for cards, 20 for dialogs. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ---------- 1. Tokens: light ---------- */
:root {
  --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --black: #000; --g1: #1a1a1a; --g2: #333; --g3: #4d4d4d; --g4: #6e6e6e; --g5: #a3a3a3; --g6: #e5e5e5; --g7: #f5f5f5;

  --bg: #f5f5f5; --panel: #ffffff; --field: #ffffff; --subtle: #fafafa; --hover: #f5f5f5; --gray-bg: #f0f0f0; --avatar: #f0f0f0;
  --ink: #1a1a1a; --ink-2: #333; --muted: #6e6e6e; --faint: #a3a3a3; --head: #000;
  --line: #e5e5e5; --line-strong: #d6d6d6;
  --brand: #2563eb; --brand-solid: #2563eb; --brand-solid-hover: #1d4fd7; --brand-soft: #eef3ff; --brand-ink: #1d4ed8; --on-brand: #fff; --say-bg: #f5f5f5;
  --green: #1d7a4b; --green-bg: #ebf5ef; --red: #c4321f; --red-bg: #fbecea; --amber: #94590a; --amber-bg: #fcf3e3;
  --bubble-seller: #ebebeb; --bubble-staff: #e3ecff; --bubble-riley: #f5f2ea;
  --bar-track: #e5e5e5; --bar-fill: #a3a3a3; --dot-off: #d6d6d6;
  --sidebar: #000;   /* the call box at the top right: a black pill */
  --top: #ffffff;
  --shadow: rgba(0, 0, 0, .10);

  --nav-bg: #ffffff; --nav-line: #e5e5e5; --nav-ink: #000; --nav-ink-2: #4d4d4d; --nav-icon: #6e6e6e; --nav-sub: #6e6e6e;
  --nav-hover: #f5f5f5; --nav-active: #f0f0f0; --nav-active-ring: transparent;
  --seg-bg: #f0f0f0; --seg-on: #ffffff;
  --overlay: rgba(0, 0, 0, .28);
  --scroll-thumb: rgba(0, 0, 0, .16); --scroll-thumb-hover: rgba(0, 0, 0, .30);
  --selection: rgba(37, 99, 235, .14);
  --ring: 0 0 0 3px rgba(37, 99, 235, .16);
  --login-glow: transparent;

  --shadow-xs: none; --shadow-sm: none;
  --shadow-md: 0 10px 28px -10px rgba(0, 0, 0, .16), 0 2px 6px -2px rgba(0, 0, 0, .06);
  --shadow-lg: 0 24px 60px -16px rgba(0, 0, 0, .26), 0 6px 16px -6px rgba(0, 0, 0, .08);
  --r-sm: 8px; --r: 10px; --r-lg: 16px; --r-xl: 20px; --pill: 999px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}

/* ---------- 2. Tokens: dark (the portals set data-theme; Super Admin follows the computer) ---------- */
:root[data-theme="dark"] {
  --bg: #0d0d0d; --panel: #171717; --field: #1c1c1c; --subtle: #141414; --hover: #222; --gray-bg: #262626; --avatar: #262626;
  --ink: #f5f5f5; --ink-2: #e0e0e0; --muted: #a3a3a3; --faint: #6e6e6e; --head: #fff;
  --line: #2a2a2a; --line-strong: #3a3a3a;
  --brand: #86a6ff; --brand-solid: #3a6af2; --brand-solid-hover: #2f5ddf; --brand-soft: #1b2440; --brand-ink: #a9c0ff; --on-brand: #fff; --say-bg: #1f1f1f;
  --green: #5cc98f; --green-bg: #14261c; --red: #ff8a7e; --red-bg: #3a1d1a; --amber: #f0b45e; --amber-bg: #33260f;
  --bubble-seller: #222; --bubble-staff: #1b2440; --bubble-riley: #29261d;
  --bar-track: #2a2a2a; --bar-fill: #6e6e6e; --dot-off: #4a4a4a;
  --sidebar: #fff; --top: #111;
  --shadow: rgba(0, 0, 0, .5);
  --nav-bg: #111; --nav-line: #262626; --nav-ink: #fff; --nav-ink-2: #c7c7c7; --nav-icon: #8a8a8a; --nav-sub: #8a8a8a;
  --nav-hover: #1c1c1c; --nav-active: #262626; --nav-active-ring: transparent;
  --seg-bg: #222; --seg-on: #3a3a3a;
  --overlay: rgba(0, 0, 0, .6);
  --scroll-thumb: rgba(255, 255, 255, .16); --scroll-thumb-hover: rgba(255, 255, 255, .3);
  --selection: rgba(134, 166, 255, .26);
  --ring: 0 0 0 3px rgba(134, 166, 255, .24);
  --shadow-md: 0 10px 28px -10px rgba(0, 0, 0, .7), 0 2px 6px -2px rgba(0, 0, 0, .4);
  --shadow-lg: 0 24px 60px -16px rgba(0, 0, 0, .85), 0 6px 16px -6px rgba(0, 0, 0, .5);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #0d0d0d; --panel: #171717; --field: #1c1c1c; --subtle: #141414; --hover: #222; --gray-bg: #262626;
    --ink: #f5f5f5; --ink-2: #e0e0e0; --muted: #a3a3a3; --faint: #6e6e6e; --head: #fff;
    --line: #2a2a2a; --line-strong: #3a3a3a;
    --brand: #86a6ff; --brand-solid: #3a6af2; --brand-solid-hover: #2f5ddf; --brand-soft: #1b2440; --brand-ink: #a9c0ff; --on-brand: #fff;
    --green: #5cc98f; --green-bg: #14261c; --red: #ff8a7e; --red-bg: #3a1d1a; --amber: #f0b45e; --amber-bg: #33260f;
    --top: #111; --shadow: rgba(0, 0, 0, .5);
    --seg-bg: #222; --seg-on: #3a3a3a;
    --overlay: rgba(0, 0, 0, .6);
    --scroll-thumb: rgba(255, 255, 255, .16); --scroll-thumb-hover: rgba(255, 255, 255, .3);
    --selection: rgba(134, 166, 255, .26); --ring: 0 0 0 3px rgba(134, 166, 255, .24);
    --shadow-md: 0 10px 28px -10px rgba(0, 0, 0, .7), 0 2px 6px -2px rgba(0, 0, 0, .4);
    --shadow-lg: 0 24px 60px -16px rgba(0, 0, 0, .85), 0 6px 16px -6px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}

/* ---------- 3. Base ---------- */
body { font-family: var(--font); font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
h1, h2, h3, h4 { letter-spacing: -0.02em; }
::selection { background: var(--selection); }
* { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background-color: var(--scroll-thumb); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--scroll-thumb-hover); }
:where(a, button, summary, [role="button"], [role="tab"], [tabindex]):focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
code, kbd, pre { font-family: var(--mono); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
@keyframes tz-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tz-pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes tz-rise { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes tz-slide { from { opacity: .6; transform: translateX(24px); } to { opacity: 1; transform: none; } }

/* ---------- 4. Sign-in: like tekzop.com's seller brief card ---------- */
#login { background: var(--panel); }
.login-box { border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: none; padding: 36px 36px 32px; }
#login .login-box::before { content: ""; display: block; width: 34px; height: 29px; margin: 0 0 24px; background: url(tz-mark.png) left center / contain no-repeat; }
.login-box h1 { font-size: 28px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; color: var(--head); }
.login-box p { font-size: 15px; line-height: 1.5; color: var(--muted); }
#login input:where(:not([type="checkbox"]):not([type="radio"])) { height: 46px; font-size: 16px; }
#login .btn.wide, .login-box .btn.wide { height: 48px; font-size: 16px; }
label { font-weight: 500; }
.err { font-size: 13.5px; }

/* ---------- 5. Shell: sidebar (white, like tekzop.com's header) ---------- */
.sidebar { background: var(--nav-bg); color: var(--nav-ink-2); border-right: 1px solid var(--nav-line); padding: 18px 12px; }
.sidebar .brand { padding: 2px 8px 26px; }
.sidebar .brand img { width: 118px; }
:root:not([data-theme="dark"]) .sidebar .brand img { content: url(tekzop-wordmark-ink.png); }
@supports (-moz-appearance: none) { :root:not([data-theme="dark"]) .sidebar .brand img { content: normal; filter: brightness(0) opacity(.9); } }
.sidebar .brand-sub { color: var(--nav-sub); font-size: 13px; font-weight: 500; letter-spacing: 0; margin: 8px 0 0 8px; white-space: normal; line-height: 1.35; }
.sidebar nav { gap: 2px; }
.sidebar nav a { padding: 8px 12px; border-radius: var(--pill); color: var(--nav-ink-2); font-size: 14.5px; font-weight: 500; line-height: 20px;
                 transition: background-color .15s, color .15s; }
.sidebar nav a svg { color: var(--nav-icon); stroke-width: 1.7; transition: color .15s; }
.sidebar nav a:hover { background: var(--nav-hover); color: var(--nav-ink); }
.sidebar nav a:hover svg { color: var(--nav-ink); }
.sidebar nav a.active { background: var(--nav-active); color: var(--nav-ink); font-weight: 600; box-shadow: none; }
.sidebar nav a.active svg { color: var(--nav-ink); }
/* one badge in every portal: Tekzop blue */
:root .nav-badge { background: var(--brand-solid); color: var(--on-brand); font-weight: 600; }
#app.focus-dialer.show-side .sidebar { box-shadow: var(--shadow-lg); }

/* ---------- 6. Shell: header, profile ---------- */
.app-main > header { min-height: 64px; padding: 10px 24px; gap: 14px; background: var(--panel); border-bottom: 1px solid var(--line); }
.app-main > header .title { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; color: var(--head); }
.side-btn { border-color: var(--line); border-radius: var(--pill); box-shadow: none; width: 36px; height: 36px; }
.side-btn:hover { background: var(--hover); }
.conn { font-size: 13px; }
.dot.on { background: #1f9d55; box-shadow: 0 0 0 3px rgba(31, 157, 85, .14); }
.pres-pill { font-size: 13px; font-weight: 500; padding: 4px 12px; border-radius: var(--pill); }
.viewas { font-size: 13.5px; }
.viewas select { padding: 6px 10px; font-size: 13.5px; border-radius: var(--pill); }
.ribbon { border-radius: var(--pill); }
.ribbon:hover { background: var(--hover); }
.avatar { width: 36px; height: 36px; border: 0; background: var(--avatar); color: var(--head); font-size: 13px; font-weight: 600;
          box-shadow: none; transition: box-shadow .15s, background-color .15s; }
.avatar:hover, .avatar[aria-expanded="true"] { border: 0; color: var(--head); background: var(--g6); box-shadow: none; }
:root[data-theme="dark"] .avatar:hover, :root[data-theme="dark"] .avatar[aria-expanded="true"] { background: #333; }
.profile-menu { border-radius: var(--r-lg); border-color: var(--line); box-shadow: var(--shadow-lg); padding: 8px; min-width: 248px;
                transform-origin: top right; animation: tz-pop .14s var(--ease); }
.pm-who { padding: 10px 12px 12px; border-bottom-color: var(--line); }
.pm-who strong { font-size: 15px; font-weight: 600; color: var(--head); }
.pm-who span { font-size: 13px; }
.pm-item { border-radius: var(--r); padding: 9px 12px; font-size: 14.5px; transition: background-color .12s; }
.pm-item:hover:not(:disabled) { background: var(--hover); }
.viewer-note, .update-note, .pres-note { font-size: 13.5px; font-weight: 500; padding: 9px 24px; border-bottom-color: var(--line); }
.viewer-note { background: var(--g7); color: var(--ink); }
:root[data-theme="dark"] .viewer-note { background: #1c1c1c; }
header .btn.ghost { padding: 0 14px; font-size: 13.5px; }

/* ---------- 7. Controls: black pills (one primary per screen), outlined pills ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; font-size: 14px; font-weight: 500; line-height: 20px;
       padding: 0 18px; border-radius: var(--pill); border: 1px solid var(--brand-solid); background: var(--brand-solid); color: var(--on-brand); box-shadow: none;
       white-space: nowrap; transition: background-color .15s, border-color .15s, color .15s, transform .06s; }
.btn:hover:not(:disabled) { background: var(--brand-solid-hover); border-color: var(--brand-solid-hover); }
.btn:active:not(:disabled) { transform: translateY(.5px); }
.btn:disabled { opacity: .4; cursor: default; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); box-shadow: none; }
.btn.ghost:hover:not(:disabled) { background: var(--hover); border-color: var(--g5); }
.btn.danger { background: var(--red); border-color: var(--red); color: #fff; }
.btn.danger:hover:not(:disabled) { background: var(--red); border-color: var(--red); filter: brightness(.94); }
.btn.small { min-height: 30px; padding: 0 12px; font-size: 13px; }
.btn.wide { min-height: 44px; font-size: 15px; }
:root[data-theme="dark"] .btn:not(.ghost):not(.danger) { color: var(--on-brand); }
:root[data-theme="dark"] .btn.danger { color: #1a0c0a; }
:root:not([data-theme]) .btn:not(.ghost):not(.danger) { color: var(--on-brand); }
.linkbtn, .linklike, .tx-toggle { color: var(--ink); text-decoration: underline; text-decoration-color: var(--g5); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.linkbtn:hover, .linklike:hover, .tx-toggle:hover { text-decoration-color: currentColor; }

input:where(:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"])), select, textarea {
  border-color: var(--line-strong); border-radius: var(--r); background-color: var(--field); color: var(--ink);
  transition: border-color .15s, box-shadow .15s; }
input:where(:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"])):hover, select:hover, textarea:hover { border-color: var(--g5); }
input:where(:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"])):focus, select:focus, textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: var(--ring); }
input[type="search"] { border-radius: var(--pill); padding-left: 14px; }
input::placeholder, textarea::placeholder { color: var(--faint); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand-solid); }

/* segmented controls: a gray pill track with a white "on" pill */
.seg, .mode-sw { gap: 2px; padding: 3px; border: 0; border-radius: var(--pill); background: var(--seg-bg); overflow: visible; }
.seg button, .mode-sw button { border: 0; border-radius: var(--pill); background: transparent; color: var(--muted); font-weight: 500; transition: background-color .15s, color .15s, box-shadow .15s; }
.seg button { padding: 5px 12px; font-size: 13px; }
.mode-sw button { padding: 3px 11px; }
.seg button + button, .mode-sw button + button { border-left: 0; }
.seg button:hover:not(.on), .mode-sw button:hover:not(.on) { color: var(--ink); }
.seg button.on, .mode-sw button.on { background: var(--seg-on); color: var(--head); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 0 0 .5px rgba(0, 0, 0, .06); }
:root[data-theme="dark"] .seg button.on, :root[data-theme="dark"] .mode-sw button.on { color: var(--head); }

/* ---------- 8. Surfaces: white cards, 16 px corners, hairlines, no shadows ---------- */
.panel { border-color: var(--line); border-radius: var(--r-lg); box-shadow: none; }
.panel-head { padding: 14px 20px; border-bottom-color: var(--line); }
.panel-head h2 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; text-transform: none; color: var(--head); }
.panel-body { padding: 20px; }
.upnext { box-shadow: none; }
.tile, .earn-tile { border-color: var(--line); border-radius: var(--r-lg); box-shadow: none; padding: 18px 20px; }
.tile .tv, .earn-tile .et-big { font-size: 28px; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--head); }
.tile .tk { font-size: 14px; font-weight: 600; margin-top: 4px; }
.tile .td, .earn-tile .et-sub { font-size: 13px; }
.earn-tile.main { border-color: var(--head); }
.earn-tile .et-bar > span { background: var(--head); }
.earn-tile .et-lbl, .review-box .lbl, .section-label { font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
.ccard { border-color: var(--line); border-radius: var(--r-lg); padding: 18px 20px; }
.rtable { font-size: 14.5px; }
.rtable th { font-size: 13px; font-weight: 500; color: var(--muted); padding: 10px 12px; background: var(--panel); border-bottom-color: var(--line); }
.rtable td { padding: 12px; border-bottom-color: var(--line); }
.rtable tr.row:hover td { background: var(--subtle); }
.tag, .chip, .status, .pres-pill { font-weight: 500; border-radius: var(--pill); }
.tag { font-size: 12.5px; padding: 2px 10px; }
.chip { font-size: 13px; padding: 3px 11px; background: transparent; color: var(--g3); box-shadow: inset 0 0 0 1px var(--line); }
:root[data-theme="dark"] .chip { color: var(--muted); }
.status { font-size: 12.5px; padding: 4px 11px; }
.soon strong, .waiting strong { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; color: var(--head); }
.soon, .waiting { font-size: 14.5px; }
.rep-bar { padding: 14px 24px; background: var(--panel); }
.tiles { gap: 14px; padding: 20px 24px 0; }
.rep-list { margin: 20px 24px 24px; }
.earn-body { padding: 20px 24px; gap: 18px; }

/* the Dialer's call screen: big name, quiet labels, the line to say like tekzop.com's quotes */
.view > main { gap: 18px; padding: 18px 20px; }
.seller-name { font-size: 28px; font-weight: 600; letter-spacing: -0.03em; color: var(--head); }
.seller-sub { font-size: 14.5px; }
.seller-sub a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--g5); text-underline-offset: 4px; }
.facts .k { font-size: 13.5px; }
.facts div { padding: 10px 0; }
.say { background: var(--say-bg); border: 0; border-radius: var(--r-lg); box-shadow: none; padding: 16px 20px 18px; }
.say .lbl { font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
.say .txt { font-size: 21px; font-weight: 500; line-height: 1.35; letter-spacing: -0.015em; color: var(--head); margin-top: 6px; }
.say .cues { font-size: 17px; font-weight: 500; }
.check { background: transparent; border-radius: 0; border-bottom: 1px solid var(--line); padding: 10px 2px; }
.check.yes, .check.no { background: transparent; }
.check .ic { color: var(--faint); }
.check.yes .ic { color: var(--green); }
.check.no .ic { color: var(--red); }
.check .nm { font-size: 14.5px; font-weight: 500; color: var(--head); }
.check .nt { font-size: 13.5px; }
.warn { border-radius: var(--r); font-weight: 500; }
.bench div { border-radius: var(--r); }
.line { border-radius: 14px; padding: 8px 12px; }
.line .sp { font-size: 11.5px; font-weight: 500; letter-spacing: .02em; text-transform: none; }
.pick-row, .up-item { border-radius: 14px; transition: border-color .15s, background-color .15s; }
.pick-row:hover, .up-item.pickable:hover { border-color: var(--g5); box-shadow: none; }
.up-item .up-time { font-weight: 600; color: var(--head); }
.up-item .up-stage, .pick-row .up-stage { border-radius: var(--pill); padding: 1px 8px; }
.up-item .up-stage.connect, .up-item .up-stage.transfer, .pick-row .up-stage.transfer { background: var(--brand-soft); color: var(--brand-ink); }
.pick-chip { border-radius: var(--pill); }
.pick-chip.on { border-color: var(--brand); color: var(--brand-ink); box-shadow: inset 0 0 0 1px var(--brand); }
.callbox { border-radius: var(--pill); box-shadow: none; padding: 5px 6px 5px 14px; }
.cb-btn { border-radius: var(--pill); padding: 7px 13px; }
:root[data-theme="dark"] .callbox { color: #000; }
:root[data-theme="dark"] .callbox .cb-main span { color: #555; }
:root[data-theme="dark"] .cb-btn:not(.answer):not(.end):not(.on) { background: rgba(0, 0, 0, .08); color: #000; }
.cb-btn.transfer { background: #2563eb; }
#presBtn { border-radius: var(--pill); }

/* ---------- 9. Overlays: the only things with shadows ---------- */
.modal { background: var(--overlay); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: tz-fade .16s ease-out; }
.modal > .login-box, .modal > div, .modal > form { border-radius: var(--r-xl); box-shadow: var(--shadow-lg); animation: tz-rise .22s var(--ease); }

/* ---------- 10. Super Admin's top bar (light or dark with the computer) ---------- */
.top { background: var(--top); color: var(--muted); border-bottom: 1px solid var(--line); height: 56px; padding: 0 16px 0 20px; }
:root:not([data-theme="dark"]) .top .brand img { content: url(tekzop-wordmark-ink.png); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .top .brand img { content: normal; } }
.top .brand img { width: 94px; }
.top .brand span { color: var(--muted); border-left-color: var(--line-strong); font-weight: 600; }
.depts { background: var(--seg-bg); border-radius: var(--pill); padding: 3px; gap: 2px; }
.depts a { color: var(--muted); border-radius: var(--pill); padding: 6px 14px; font-size: 13.5px; font-weight: 500; transition: background-color .15s, color .15s; }
.depts a:hover { color: var(--ink); }
.depts a.active { background: var(--seg-on); color: var(--head); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 0 0 .5px rgba(0, 0, 0, .06); }
.me button { color: var(--muted); border-radius: var(--pill); padding: 6px 12px; font-size: 13.5px; }
.me button:hover { background: var(--hover); color: var(--ink); }

/* ---------- 11. Sections (module styles are injected after this file, so these rules carry :root to win) ---------- */
/* one switch look everywhere: Lead Pool's Active/Sold, Tasks' List/Board/Calendar, the Calendar */
:root .lp-mode, :root .tk-seg, :root .cal-seg { gap: 2px; padding: 3px; border: 0; border-radius: var(--pill); background: var(--seg-bg); overflow: visible; }
:root .lp-mode button, :root .tk-seg button, :root .cal-seg button { border: 0; border-radius: var(--pill); background: transparent; color: var(--muted); font-weight: 500;
  transition: background-color .15s, color .15s, box-shadow .15s; }
:root .lp-mode button + button, :root .tk-seg button + button, :root .cal-seg button + button { border-left: 0; }
:root .lp-mode button:not(.on):hover, :root .tk-seg button:not(.on):hover, :root .cal-seg button:not(.on):hover { background: transparent; color: var(--ink); }
:root .lp-mode button.on, :root .tk-seg button.on, :root .cal-seg button.on { background: var(--seg-on); color: var(--head); font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 0 0 .5px rgba(0, 0, 0, .06); }
:root .lp-mode button.on b { color: var(--head); }
:root .lp-mode button { padding: 6px 16px; }
/* tabs and pills that mark the current choice: a soft blue pill */
:root .tk-tab, :root .ph-tab, :root .cv-filters button, :root .wh-pill, :root .dc-item { transition: background-color .15s, color .15s; }
:root .tk-tab, :root .ph-tab { border-radius: var(--pill); }
:root .tk-tab.on, :root .ph-tab.on, :root .cv-filters button.on, :root .dc-item.on { background: var(--brand-soft); color: var(--brand-ink); border-color: transparent; }
:root .cv-filters button { border-radius: var(--pill); }
/* solid fills: Tekzop blue with white text (calendar events and today, sent messages, buttons, new-text chips) */
:root .lv-btn, :root .wh-btn, :root .ph-send, :root .lv-chip.sel, :root .pp-chip.sp-high, :root .cal-ev, :root .ph-bub.out,
:root .lv-day.today .n, :root .cw-head div.today b, :root .cm-cell.today .cm-num, :root .tr-mod.current .tr-num,
:root .lv-toggle.on .sw, :root .tk-add, :root .tk-cal .day.today .d, :root .lp-new, :root .cv-row.unread .cv-dot {
  background-color: var(--brand-solid); color: var(--on-brand); }
:root .cal-ev.past { background-color: #dcdcdc; color: #333; }
:root[data-theme="dark"] .cal-ev.past { background-color: #333; color: #d6d6d6; }
.bar > span { background: var(--head); }
:root .lv-btn, :root .wh-btn, :root .ph-send, :root .tk-add { border-radius: var(--pill); box-shadow: none; transition: background-color .15s; }
:root .lv-btn:hover:not(:disabled), :root .wh-btn:hover:not(:disabled), :root .ph-send:hover:not(:disabled), :root .tk-add:hover:not(:disabled) { background-color: var(--brand-solid-hover); }
:root .pp-toast { color: var(--panel); box-shadow: var(--shadow-lg); border-radius: var(--pill); }
/* cards and boxes */
:root .lp-box, :root .lp-panel, :root .lv-card, :root .wh-card, :root .tk-col, :root .tk-cal { border-color: var(--line); border-radius: var(--r-lg); }
:root .lp-box, :root .lp-panel, :root .lv-card, :root .wh-card { box-shadow: none; }
:root .lp-box { padding: 16px 18px; }
:root .lp-box h4, :root .lp-panel h3 { font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
:root .tk-card, :root .pp-card { border-color: var(--line); border-radius: 14px; box-shadow: none; transition: border-color .15s, transform .15s; }
:root .tk-card:hover, :root .pp-card:hover { box-shadow: none; border-color: var(--g5); }
:root .tk-col { background: var(--subtle); }
:root .lp-stage { border-radius: var(--r-lg); padding: 12px 18px; box-shadow: none; transition: border-color .15s; }
:root .lp-stage b { font-size: 24px; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--head); }
:root .lp-stage span { font-size: 13px; }
:root .lp-stage:hover { border-color: var(--g5); box-shadow: none; }
:root .lp-stage.on { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
:root .lp-stage.on span { color: var(--brand-ink); }
:root .lp-name { color: var(--head); }
:root .lp-table .c-seller .lp-sub { white-space: nowrap; }
:root .lp-table tr.row:hover .lp-name { text-decoration-color: var(--g5); text-underline-offset: 4px; }
:root .lp-table tr.row:hover td { background: var(--subtle); }
:root .lp-table tr.row:hover td:first-child { box-shadow: inset 2px 0 0 var(--head); }
:root .lp-table th { font-size: 13px; font-weight: 500; background: var(--panel); }
:root .lp-st { border-radius: var(--pill); font-weight: 500; }
:root .lp-st.discovery, :root .lp-st.reassurance, :root .lp-st.awaiting_realtor, :root .lp-st.consultation, :root .lp-st.transferred {
  background: transparent; color: var(--g3); box-shadow: inset 0 0 0 1px var(--line); }
:root[data-theme="dark"] .lp-st.discovery, :root[data-theme="dark"] .lp-st.reassurance, :root[data-theme="dark"] .lp-st.awaiting_realtor,
:root[data-theme="dark"] .lp-st.consultation, :root[data-theme="dark"] .lp-st.transferred { color: var(--muted); }
:root .lp-st.pending_transfer { background: var(--brand-solid); color: var(--on-brand); }
:root .lp-go { border-radius: var(--pill); }
:root .lp-table tr.row:hover .lp-go, :root .lp-go:focus-visible { color: var(--head); background: var(--g7); }
:root[data-theme="dark"] .lp-table tr.row:hover .lp-go { background: #262626; }
:root .tk-btn { border-color: var(--line-strong); border-radius: var(--pill); transition: background-color .15s, border-color .15s; }
/* drawers slide in from the right; dimmed page behind */
:root .lp-shade { background: var(--overlay); animation: tz-fade .16s ease-out; }
:root .lp-card, :root .tk-pane { box-shadow: var(--shadow-lg); border-left-color: var(--line); animation: tz-slide .24s var(--ease); }
:root .lp-card-head, :root .tk-pane-h { border-bottom-color: var(--line); }
:root .lp-card-head h2 { font-size: 24px; font-weight: 600; letter-spacing: -0.03em; color: var(--head); }
:root .tk-shade { background: rgba(0, 0, 0, .06); }
/* dialogs inside sections */
:root .ch-modal { background: var(--overlay); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: tz-fade .16s ease-out; }
:root .ch-modal > * { border-radius: var(--r-xl); box-shadow: var(--shadow-lg); animation: tz-rise .22s var(--ease); }
/* section side lists (Documents, Conversations, Chat) */
:root .dc-side, :root .ch-side { background: var(--panel); border-right-color: var(--line); }
:root .dc-item { border-radius: var(--r-sm); }
:root .dc-main { background: var(--panel); }   /* Documents: write on a white page */
/* the notification bell: blue count, like the badges */
:root .nt-badge { background: var(--brand-solid); color: var(--on-brand); }
:root .nt-dot { background: var(--brand); }
:root .nt-link { color: var(--brand-ink); }
:root .nt-link:hover:not(:disabled) { background: var(--brand-soft); }
:root .nt-panel { border-radius: var(--r-lg); }
:root .nt-tabs { border-radius: var(--pill); }
:root .nt-tabs button { border-radius: var(--pill); }
/* the Lead Pool table on a laptop screen (1440 px wide or less): slightly tighter cells so all columns fit */
@media (max-width: 1500px) {
  :root .lp-table td, :root .lp-table th { padding-left: 5px; padding-right: 5px; }
  :root .lp-table .c-why { min-width: 150px; } :root .lp-table .c-seller { min-width: 104px; } :root .lp-table .c-address { min-width: 96px; }
  :root .lp-table .lp-st { font-size: 11.5px; padding: 2px 8px; }
}
:root[data-theme="dark"] body .ph-bub.out { color: #fff; }   /* the phone module darkens this text for its old light-blue fill */