/* ===========================================================================
   THE ALOKE TEAM'S PAGES — ONE LOOK (efg.hwe.sa, 2026-10-16).

   Nine pages had grown four shells: the console's rail (super, super-pos,
   super-tax, main-page), the verification centre's (verify, the support desk,
   the CRM, the marketers' rules), and the old A Recomend admin, each with its
   own colours and spacing. This sheet is loaded LAST on all nine and makes
   them one product:

     • the same tokens (ground, ink, purple, status pairs) in light AND dark;
     • the same rail, the same top bar, the same cards, tiles, chips, tables,
       buttons and fields, whichever page drew them;
     • the shared layer's own pieces — «مكاتب الفريق» and «مركز التنبيهات»
       (team-ui.js, `tu-*`).

   EVERYTHING IS SCOPED to `body.team-ui`. console-theme.css and auth.css are
   shared with the owners' pages, which keep their own look; nothing here can
   reach them. And, as in console-theme.css: no behaviour, no class renamed,
   no element moved — only how the existing markup is drawn.
   =========================================================================== */

/* ------------------------------------------------------------- the tokens */
body.team-ui {
  --bg: #F4F2F9;
  --surface: #FFFFFF;
  --surface-2: #F8F6FC;
  --ink: #1A1428;
  --ink-2: #3F3754;
  --muted: #655B79;
  --line: #E6E1EF;
  --line-strong: #D3CBE3;
  --accent: #5B2C91;
  --accent-press: #46216F;
  --accent-hover: #6A36A6;
  --accent-weak: #F1EAFB;
  --accent-weak-2: #E4D7F7;
  --on-accent: #FFFFFF;
  --ok: #1B7A4B;      --ok-weak: #E6F5ED;
  --warn: #8A5A00;    --warn-weak: #FDF2DC;
  --danger: #B4232B;  --danger-weak: #FDECEE;
  --info: #1B5E8A;    --info-weak: #E6F1F9;
  --r-card: 16px;
  --r-btn: 10px;
  --r-chip: 999px;
  --e-card: 0 1px 2px rgba(26, 20, 40, .04), 0 6px 18px rgba(26, 20, 40, .05);
  --e-float: 0 18px 48px rgba(26, 20, 40, .18);
  --card-shadow: var(--e-card);
  --ring: 0 0 0 3px rgba(91, 44, 145, .22);
  /* the rail, one for every shell */
  --tu-rail: linear-gradient(180deg, #33175F 0%, #1F0C3B 100%);
  --tu-rail-ink: rgba(255, 255, 255, .86);
  --tu-rail-dim: rgba(255, 255, 255, .58);
  --tu-rail-line: rgba(255, 255, 255, .10);
  --tu-rail-hover: rgba(255, 255, 255, .07);
  --tu-rail-on: rgba(255, 255, 255, .14);
  --cs-rail: var(--tu-rail);
  --cs-rail-ink: var(--tu-rail-ink);
  --cs-rail-dim: var(--tu-rail-dim);
  --cs-rail-line: var(--tu-rail-line);
  --cs-rail-on: var(--tu-rail-on);
  --cs-top-bg: rgba(255, 255, 255, .86);
  --tu-urgent: #E5484D;
  --tu-waiting: #B07A12;
  --tu-info: #2F7FB8;
  background: var(--bg);
  color: var(--ink);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.team-ui {
    --bg: #100C19;
    --surface: #191425;
    --surface-2: #201A2F;
    --ink: #F3EFFA;
    --ink-2: #D2C9E3;
    --muted: #A69CBC;
    --line: #2A2340;
    --line-strong: #3E3558;
    --accent: #B48CF0;
    --accent-press: #CBAEF5;
    --accent-hover: #C19FF2;
    --accent-weak: #271F3E;
    --accent-weak-2: #352A55;
    --on-accent: #1A1226;
    --ok: #6FD3A0;     --ok-weak: #15301F;
    --warn: #E9B867;   --warn-weak: #33260F;
    --danger: #F19097; --danger-weak: #3A191D;
    --info: #80C3EA;   --info-weak: #13283A;
    --e-card: 0 1px 2px rgba(0, 0, 0, .45), 0 8px 22px rgba(0, 0, 0, .28);
    --e-float: 0 20px 56px rgba(0, 0, 0, .62);
    --ring: 0 0 0 3px rgba(180, 140, 240, .32);
    --tu-rail: linear-gradient(180deg, #24113F 0%, #140829 100%);
    --cs-top-bg: rgba(16, 12, 25, .82);
    --tu-urgent: #FF6B6F;
    --tu-waiting: #E9B867;
    --tu-info: #80C3EA;
  }
}
:root[data-theme="dark"] body.team-ui {
  --bg: #100C19; --surface: #191425; --surface-2: #201A2F; --ink: #F3EFFA; --ink-2: #D2C9E3; --muted: #A69CBC;
  --line: #2A2340; --line-strong: #3E3558; --accent: #B48CF0; --accent-press: #CBAEF5; --accent-hover: #C19FF2;
  --accent-weak: #271F3E; --accent-weak-2: #352A55; --on-accent: #1A1226;
  --ok: #6FD3A0; --ok-weak: #15301F; --warn: #E9B867; --warn-weak: #33260F; --danger: #F19097; --danger-weak: #3A191D;
  --info: #80C3EA; --info-weak: #13283A;
  --e-card: 0 1px 2px rgba(0, 0, 0, .45), 0 8px 22px rgba(0, 0, 0, .28); --e-float: 0 20px 56px rgba(0, 0, 0, .62);
  --ring: 0 0 0 3px rgba(180, 140, 240, .32); --tu-rail: linear-gradient(180deg, #24113F 0%, #140829 100%);
  --cs-top-bg: rgba(16, 12, 25, .82); --tu-urgent: #FF6B6F; --tu-waiting: #E9B867; --tu-info: #80C3EA;
}

body.team-ui {
  font-family: "Readex Pro", "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  background-image: radial-gradient(1200px 420px at 85% -140px, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%);
  background-attachment: fixed;
}
body.team-ui ::selection { background: var(--accent-weak-2); }
body.team-ui :focus-visible { outline: none; box-shadow: var(--ring); }

/* ------------------------------------------------------------- the rails */
body.team-ui .cs-side,
body.team-ui .vf-side {
  background: var(--tu-rail);
  color: var(--tu-rail-ink);
  border-inline-end: 1px solid rgba(255, 255, 255, .06);
}
body.team-ui .cs-brand, body.team-ui .vf-brand { padding-block: 16px 12px; }
body.team-ui .cs-brand h1, body.team-ui .vf-brand strong { letter-spacing: -.01em; }
body.team-ui .cs-tab, body.team-ui .vf-tab {
  border-radius: 10px;
  min-height: 40px;
  transition: background var(--dur-fast, 120ms) ease, color var(--dur-fast, 120ms) ease;
}
body.team-ui .cs-tab:hover, body.team-ui .vf-tab:hover { background: var(--tu-rail-hover); color: #fff; }
/* The console's tabs are also loyalty.css's `.ptab`, whose ink is --muted —
   a grey that reads on a page and fades on the rail in light mode. */
body.team-ui .cs-side .cs-tab, body.team-ui .cs-side .ptab, body.team-ui .vf-side .vf-tab { color: var(--tu-rail-ink); }
body.team-ui .cs-tab.on, body.team-ui .cs-tab[aria-current="page"], body.team-ui .vf-tab.on {
  background: var(--tu-rail-on);
  color: #fff;
  box-shadow: inset 3px 0 0 #C9A6FF;
}
html[dir="rtl"] body.team-ui .cs-tab.on, html[dir="rtl"] body.team-ui .cs-tab[aria-current="page"],
html[dir="rtl"] body.team-ui .vf-tab.on { box-shadow: inset -3px 0 0 #C9A6FF; }
body.team-ui .vf-group, body.team-ui .cs-group-h { color: var(--tu-rail-dim); font-size: 11.5px; letter-spacing: .04em; }
body.team-ui .vf-tab .count, body.team-ui .cs-tab .nav-b, body.team-ui .cs-group-h .nav-b {
  background: rgba(255, 255, 255, .18); color: #fff; font-weight: 700; border-radius: 999px;
}
body.team-ui .vf-tab .count.hot { background: #FF8C92; color: #2A0F16; }
body.team-ui .cs-side-foot, body.team-ui .vf-side-foot { border-top-color: var(--tu-rail-line); }
/* The console's foot used to carry the desk links; «مكاتب الفريق» above is
   the one menu now. The links stay in the markup — super.js still sets their
   address and their visibility — they are just not drawn twice. */
body.team-ui #lnkDesk, body.team-ui #lnkCrm, body.team-ui #lnkMarketers { display: none !important; }

/* ------------------------------------------------- «مكاتب الفريق» (tu-desks) */
.tu-desks { padding: 4px 10px 10px; border-bottom: 1px solid var(--tu-rail-line, rgba(255, 255, 255, .1)); margin-bottom: 4px; }
.tu-desks-h { font-size: 11.5px; letter-spacing: .04em; color: var(--tu-rail-dim, rgba(255, 255, 255, .6)); padding: 6px 8px 6px; }
.tu-desks-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
/* A last tile alone on its row spans it (ten desks since 2026-10-19). */
.tu-desk:last-child:nth-child(3n+1) { grid-column: 1 / -1; flex-direction: row; min-height: 40px; }
.tu-desk {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 58px;
  padding: 8px 4px 7px; border-radius: 12px; text-align: center;
  color: var(--tu-rail-ink, #fff); text-decoration: none; font-size: 11.5px; font-weight: 600; line-height: 1.25;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .07);
  transition: background 120ms ease, border-color 120ms ease;
  position: relative; min-width: 0;
}
.tu-desk .ic { width: 19px; height: 19px; flex: 0 0 auto; opacity: .9; stroke: currentColor; fill: none; stroke-width: 1.75; }
.tu-desk-t { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tu-desk:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .16); color: #fff; }
.tu-desk.on { background: #fff; color: #3A1A66; border-color: #fff; }
.tu-desk.on .ic { opacity: 1; }
.tu-desk-b {
  position: absolute; top: 4px; inset-inline-end: 4px;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; display: inline-flex;
  align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; background: #FF8C92; color: #2A0F16;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.tu-desk-b[hidden] { display: none; }
/* /admin has no rail: its desk menu is a strip above its own tabs. */
.admin-shell > .tu-desks { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--tu-rail); margin: 0; padding: 4px 8px 10px; }
@media (min-width: 901px) {
  body.team-ui .admin-shell { grid-template-rows: min-content 1fr; row-gap: 12px; }
  .admin-shell > .tu-desks { grid-column: 1; grid-row: 1; align-self: start; }
  .admin-shell > .adm-nav { grid-column: 1; grid-row: 2; align-self: start; top: var(--s4); }
  .admin-shell > .adm-content { grid-column: 2; grid-row: 1 / span 2; }
}

/* ------------------------------------------------------------ the top bars */
body.team-ui .cs-top, body.team-ui .vf-top {
  min-height: 64px;
  background: var(--cs-top-bg);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
body.team-ui .cs-title h2, body.team-ui .cs-title h1, body.team-ui .vf-title {
  font-size: 19px; font-weight: 700; letter-spacing: -.01em; color: var(--ink);
}
body.team-ui .topbar { background: var(--surface); border-bottom: 1px solid var(--line); }
/* the bell sits in the same row as the console's search, never above it */
body.team-ui .cs-top-actions { flex-wrap: nowrap; align-items: center; }
body.team-ui .cs-top-actions > .tu-bell { order: 2; }
.tu-bell-slot { display: flex; align-items: center; flex: 0 0 auto; }

/* ------------------------------------------------------------- the bell */
.tu-bell {
  position: relative; width: 42px; height: 42px; min-width: 42px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  transition: border-color 120ms ease, background 120ms ease;
}
.tu-bell .ic { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.75; }
.tu-bell:hover { border-color: var(--accent); background: var(--accent-weak); }
.tu-bell-b {
  position: absolute; top: -6px; inset-inline-end: -6px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--surface);
  font-variant-numeric: tabular-nums;
}
.tu-bell-b[hidden] { display: none; }
.tu-bell.urgent { border-color: var(--tu-urgent); }
.tu-bell.urgent .tu-bell-b { background: var(--tu-urgent); color: #fff; }
.tu-bell.urgent .ic { color: var(--tu-urgent); }
@media (prefers-reduced-motion: no-preference) {
  .tu-bell.urgent .tu-bell-b { animation: tu-pulse 2.4s ease-out infinite; }
  @keyframes tu-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tu-urgent) 55%, transparent); }
                        70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
}

/* ------------------------------------------------------------ the panel */
.tu-scrim { position: fixed; inset: 0; background: rgba(12, 8, 20, .42); z-index: 900; }
.tu-scrim[hidden], .tu-panel[hidden] { display: none; }
.tu-panel {
  position: fixed; top: 0; bottom: 0; inset-inline-end: 0; width: min(440px, 100vw); z-index: 901;
  background: var(--surface); color: var(--ink); box-shadow: var(--e-float); display: flex; flex-direction: column;
  border-inline-start: 1px solid var(--line);
}
@media (prefers-reduced-motion: no-preference) {
  .tu-panel { animation: tu-in 200ms cubic-bezier(.2, 0, 0, 1); }
  @keyframes tu-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
  html[dir="rtl"] .tu-panel { animation-name: tu-in-rtl; }
  @keyframes tu-in-rtl { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
}
.tu-panel-h { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.tu-panel-t { margin: 0; flex: 1; display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 700; }
.tu-panel-t .ic { width: 20px; height: 20px; color: var(--accent); stroke: currentColor; fill: none; stroke-width: 1.75; }
.tu-panel-acts { display: flex; gap: 6px; }
.tu-ic-btn {
  width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2);
  color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.tu-ic-btn .ic { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.75; }
.tu-ic-btn:hover { color: var(--accent); border-color: var(--accent); }
.tu-panel-b { flex: 1; overflow: auto; padding: 8px 16px 24px; }
.tu-sec { padding: 10px 0 6px; }
.tu-sec + .tu-sec { border-top: 1px solid var(--line); margin-top: 8px; }
.tu-sec-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tu-sec-h { margin: 6px 0 10px; font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: .02em; }
.tu-grp { font-size: 12px; font-weight: 600; color: var(--muted); margin: 12px 2px 6px; }
.tu-lines, .tu-events { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tu-line-a {
  display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 12px; text-decoration: none;
  color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); min-height: 44px;
  transition: border-color 120ms ease, background 120ms ease;
}
.tu-line-a:hover { border-color: var(--accent); background: var(--accent-weak); }
.tu-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: var(--tu-info); }
.sev-urgent .tu-dot { background: var(--tu-urgent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tu-urgent) 18%, transparent); }
.sev-waiting .tu-dot { background: var(--tu-waiting); }
.sev-urgent .tu-line-a { border-color: color-mix(in srgb, var(--tu-urgent) 45%, var(--line)); }
.tu-line-t { flex: 1; font-size: 14px; font-weight: 600; line-height: 1.5; min-width: 0; unicode-bidi: plaintext; }
.tu-tag { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--danger-weak); color: var(--danger); }
.tu-go { width: 16px; height: 16px; color: var(--muted); flex: 0 0 auto; stroke: currentColor; fill: none; stroke-width: 1.75; }
html[dir="rtl"] .tu-go { transform: scaleX(-1); }
.tu-calm { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 12px; background: var(--ok-weak); color: var(--ok); font-weight: 600; font-size: 14px; }
.tu-calm .ic { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; }
.tu-ev-a { display: block; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: var(--ink); border: 1px solid transparent; }
.tu-ev-a:hover { background: var(--surface-2); border-color: var(--line); }
.tu-ev.unread .tu-ev-a { background: var(--accent-weak); border-color: var(--accent-weak-2); }
.tu-ev-top { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--muted); }
.tu-ev-kind { font-weight: 700; color: var(--accent); }
.tu-ev-t { font-size: 14px; font-weight: 600; margin-top: 2px; unicode-bidi: plaintext; }
.tu-ev-d { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; unicode-bidi: plaintext; }
.tu-quiet { color: var(--muted); font-size: 13px; margin: 4px 0 10px; line-height: 1.7; }
.tu-err { color: var(--danger); background: var(--danger-weak); padding: 10px 12px; border-radius: 10px; font-size: 13px; }
.tu-link-btn { background: none; border: 0; color: var(--accent); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 6px 2px; }
.tu-link-btn:hover { text-decoration: underline; }
.tu-back { margin: 6px 0 2px; }
.tu-loading { height: 120px; display: grid; place-items: center; }
.tu-loading::after { content: ""; width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--line-strong);
  border-top-color: var(--accent); animation: tu-spin .8s linear infinite; }
@keyframes tu-spin { to { transform: rotate(360deg); } }
.tu-set { display: flex; flex-direction: column; gap: 10px; }
.tu-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.tu-field input, .tu-field select {
  min-height: 42px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  padding: 0 12px; font: inherit; font-weight: 400;
}
.tu-bulk { display: flex; gap: 8px; flex-wrap: wrap; }
.tu-chip-btn { min-height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface-2);
  color: var(--ink-2); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.tu-chip-btn:hover { border-color: var(--accent); color: var(--accent); }
.tu-set-g { border: 1px solid var(--line); border-radius: 12px; padding: 6px 12px 8px; margin: 4px 0 0; }
.tu-set-g legend { font-size: 12.5px; font-weight: 700; color: var(--accent); padding: 0 6px; }
.tu-chk { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.tu-chk:last-child { border-bottom: 0; }
.tu-chk input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--accent); flex: 0 0 auto; }
.tu-chk-t { display: flex; flex-direction: column; gap: 2px; }
.tu-chk-t b { font-size: 13.5px; }
.tu-chk-t small { font-size: 12px; color: var(--muted); line-height: 1.6; }
.tu-btn {
  align-self: flex-start; min-height: 42px; padding: 0 20px; border-radius: 10px; border: 0; cursor: pointer;
  background: var(--accent); color: var(--on-accent); font: inherit; font-weight: 700;
}
.tu-btn:disabled { opacity: .6; cursor: progress; }
.tu-msg { font-size: 13px; margin: 0; }
.tu-msg.ok { color: var(--ok); }
.tu-msg.bad { color: var(--danger); }
body.tu-open { overflow: hidden; }

/* ======================================================= THE PAGES' OWN PARTS
   One drawing for the shapes every page shares. Each rule names the existing
   classes it reaches; none of them adds or hides anything. */

/* cards */
body.team-ui .section,
body.team-ui .vf-card,
body.team-ui .crm-card,
body.team-ui .adm-content .section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--e-card);
}
body.team-ui .section > h2, body.team-ui .vf-card > h2, body.team-ui .vf-card > h3 {
  font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--ink);
}
body.team-ui .section-sub { color: var(--muted); line-height: 1.8; }

/* figure tiles */
body.team-ui .ov-tile,
body.team-ui .vf-kpi,
body.team-ui .onb-kpi,
body.team-ui .stat {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: none;
  transition: border-color 120ms ease, transform 200ms cubic-bezier(.2, 0, 0, 1);
}
body.team-ui .ov-tile::before, body.team-ui .vf-kpi::before, body.team-ui .onb-kpi::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 35%, transparent));
  opacity: .55;
}
body.team-ui .ov-tile:hover, body.team-ui .vf-kpi:hover { border-color: var(--line-strong); }
body.team-ui .ov-num, body.team-ui .vf-kpi strong, body.team-ui .onb-kpi .n, body.team-ui .stat .num {
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}

/* the console's «بانتظارك» cards */
body.team-ui .ov-chip { border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
body.team-ui .ov-chip.urgent { border-color: color-mix(in srgb, var(--tu-urgent) 55%, var(--line));
  background: color-mix(in srgb, var(--tu-urgent) 7%, var(--surface)); }

/* chips */
body.team-ui .chip, body.team-ui .vf-chip { border-radius: 999px; font-weight: 600; }

/* buttons */
body.team-ui .primary, body.team-ui .vf-btn.primary {
  background: var(--accent); color: var(--on-accent); border-radius: var(--r-btn);
}
body.team-ui .primary:hover:not(:disabled), body.team-ui .vf-btn.primary:hover:not(:disabled) { background: var(--accent-hover); }
body.team-ui .ghost, body.team-ui .vf-btn:not(.primary):not(.danger):not(.ok) {
  border-radius: var(--r-btn);
}

/* fields */
body.team-ui input[type="text"], body.team-ui input[type="search"], body.team-ui input[type="email"],
body.team-ui input[type="tel"], body.team-ui input[type="number"], body.team-ui input[type="date"],
body.team-ui select, body.team-ui textarea, body.team-ui .vf-input, body.team-ui .vf-select, body.team-ui .vf-textarea {
  border-radius: var(--r-btn);
  border-color: var(--line-strong);
  background-color: var(--surface);
  color: var(--ink);
}
body.team-ui input:focus, body.team-ui select:focus, body.team-ui textarea:focus { border-color: var(--accent); box-shadow: var(--ring); outline: none; }

/* tables */
body.team-ui table.data thead th, body.team-ui .vf-table thead th, body.team-ui .b2-t thead th {
  background: var(--surface-2); color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .02em;
  border-bottom: 1px solid var(--line);
}
body.team-ui table.data tbody tr:hover, body.team-ui .vf-table tbody tr:hover { background: var(--accent-weak); }
body.team-ui .vf-table-wrap { border-radius: 14px; border: 1px solid var(--line); background: var(--surface); }

/* scrollbars */
body.team-ui ::-webkit-scrollbar { width: 10px; height: 10px; }
body.team-ui ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted) 35%, transparent); border-radius: 10px;
  border: 2px solid transparent; background-clip: padding-box; }

/* ------------------------------------- tick boxes and choices as buttons
   The founder, 2026-10-16: «the checkbox and the radio buttons — style them
   like stylish buttons». Every choice a label wraps becomes a pill that says
   its state by its whole shape (a filled purple ground and a mark, never the
   tiny native box alone); a bare box keeps its place and gets the same mark.
   The input itself stays in the label — focusable, clickable, read by a
   screen reader and by every listener the page wired — only its drawing
   changes. Rows that carry a paragraph (a permission with its description,
   an alert with its sentence) keep their row shape and get the mark only. */
body.team-ui input[type="checkbox"], body.team-ui input[type="radio"] {
  -webkit-appearance: none; appearance: none; margin: 0; flex: 0 0 auto;
  width: 18px; height: 18px; border: 1.5px solid var(--line-strong); background: var(--surface);
  border-radius: 6px; display: inline-grid; place-content: center; cursor: pointer; vertical-align: middle;
  transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
body.team-ui input[type="radio"] { border-radius: 50%; }
body.team-ui input[type="checkbox"]::before {
  content: ""; width: 5px; height: 9px; margin-top: -2px; border: solid var(--on-accent); border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0); transition: transform 120ms cubic-bezier(.2, 0, 0, 1);
}
body.team-ui input[type="radio"]::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--on-accent);
  transform: scale(0); transition: transform 120ms cubic-bezier(.2, 0, 0, 1);
}
body.team-ui input[type="checkbox"]:checked, body.team-ui input[type="radio"]:checked { background: var(--accent); border-color: var(--accent); }
body.team-ui input[type="checkbox"]:checked::before { transform: rotate(45deg) scale(1); }
body.team-ui input[type="radio"]:checked::before { transform: scale(1); }
body.team-ui input[type="checkbox"]:hover:not(:disabled), body.team-ui input[type="radio"]:hover:not(:disabled) { border-color: var(--accent); }
body.team-ui input[type="checkbox"]:focus-visible, body.team-ui input[type="radio"]:focus-visible { box-shadow: var(--ring); outline: none; }
body.team-ui input[type="checkbox"]:disabled, body.team-ui input[type="radio"]:disabled { cursor: not-allowed; opacity: .55; }
/* the rail's own boxes stay legible on purple */
body.team-ui .cs-side input[type="checkbox"], body.team-ui .vf-side input[type="checkbox"] { border-color: rgba(255, 255, 255, .5); background: transparent; }

/* THE PILL: a label holding its box directly */
body.team-ui label:has(> input[type="checkbox"]):not(.tm-perm):not(.tu-chk):not(.st-card):not(.vf-flag),
body.team-ui label:has(> input[type="radio"]):not(.tm-perm):not(.tu-chk):not(.st-card):not(.vf-flag) {
  display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 6px 14px 6px 12px;
  margin: 3px 0; margin-inline-end: 6px; border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--surface-2); color: var(--ink-2); font-size: 13.5px; font-weight: 500; line-height: 1.35;
  cursor: pointer; user-select: none; -webkit-user-select: none; vertical-align: middle; max-width: 100%;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease;
}
body.team-ui label:has(> input[type="checkbox"]):not(.tm-perm):not(.tu-chk):not(.st-card):not(.vf-flag):hover,
body.team-ui label:has(> input[type="radio"]):not(.tm-perm):not(.tu-chk):not(.st-card):not(.vf-flag):hover {
  border-color: var(--accent); color: var(--ink);
}
body.team-ui label:has(> input[type="checkbox"]:checked):not(.tm-perm):not(.tu-chk):not(.st-card):not(.vf-flag),
body.team-ui label:has(> input[type="radio"]:checked):not(.tm-perm):not(.tu-chk):not(.st-card):not(.vf-flag) {
  background: var(--accent-weak); border-color: var(--accent); color: var(--accent-press); font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--accent);
}
body.team-ui label:has(> input:focus-visible) { box-shadow: var(--ring); }
body.team-ui label:has(> input[type="checkbox"]):active:not(:has(> input:disabled)),
body.team-ui label:has(> input[type="radio"]):active:not(:has(> input:disabled)) { transform: scale(.97); }
body.team-ui label:has(> input[type="checkbox"]:disabled):not(.tm-perm):not(.tu-chk),
body.team-ui label:has(> input[type="radio"]:disabled):not(.tm-perm):not(.tu-chk) { cursor: not-allowed; opacity: .72; }
/* a group of them reads as one row of buttons */
body.team-ui .b2-checks, body.team-ui .pr-checks, body.team-ui .crm-consent, body.team-ui #invProducts,
body.team-ui #cpProducts, body.team-ui #invBranchList {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
body.team-ui .b2-checks > label, body.team-ui .pr-checks > label, body.team-ui .crm-consent > label,
body.team-ui #invProducts > label, body.team-ui #cpProducts > label, body.team-ui #invBranchList > label { margin: 0; }
/* the rows that carry a paragraph keep their shape — their state shows on the row */
body.team-ui label.tm-perm:has(> input:checked) { background: var(--accent-weak); border-radius: 10px; }
body.team-ui label.tu-chk:has(> input:checked) b { color: var(--accent); }

/* «ضمن ألوكي ون» — a system the ticked bundle already includes (bundleGuard) */
body.team-ui label.tu-in-bundle {
  border-style: dashed !important; background: var(--surface) !important; color: var(--muted) !important; opacity: 1 !important;
}
body.team-ui label.tu-in-bundle::after {
  content: attr(data-within); font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px;
  background: var(--accent-weak-2); color: var(--accent-press); margin-inline-start: 2px;
}
body.team-ui .tu-bundle-note {
  margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; font-size: 13px; line-height: 1.7;
  background: var(--ok-weak); color: var(--ok); font-weight: 600;
}
body.team-ui .tu-bundle-note[hidden] { display: none; }

/* ----------------------------------------------- the old A Recomend admin */
body.team-ui .adm-nav-item.active { background: var(--accent-weak); color: var(--accent-press); }
body.team-ui .tu-elsewhere {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; padding: 10px 14px; border-radius: 12px;
  background: var(--accent-weak); color: var(--accent-press); font-size: 13px; line-height: 1.7;
}
body.team-ui .tu-elsewhere a { color: inherit; font-weight: 700; }

/* ===========================================================================
   THE ENTERPRISE PASS (2026-10-16, second round).

   The founder: «enterprise level … fix all the style issues … test it
   visually». An audit of all 80 screens in both themes and at phone width
   (contrast measured on every line of text, every field checked for a name)
   found the same handful of faults on many pages; each is answered here
   once, by the shape it has, never by moving or hiding anything:

     • a <button> or <a> whose page never gave it a colour fell back to the
       browser's black or blue — unreadable on the dark ground (the
       verification centre's filters, the place list's names, the public
       pages' hosts, links inside explanations);
     • controls of one kind came in four heights and three shapes;
     • a bare `.btn` was the browser's grey button;
     • long explanations ran the full width of a 1400px card;
     • rails were centred on some pages and started at the edge on others.
   =========================================================================== */
body.team-ui {
  --ok-on: #FFFFFF;
  --danger-on: #FFFFFF;
  --badge-urgent: #C8232C;
  --h-ctl: 38px;
  --h-ctl-sm: 32px;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --read: 92ch;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.team-ui { --ok-on: #0B2416; --danger-on: #2A0F12; }
}
:root[data-theme="dark"] body.team-ui { --ok-on: #0B2416; --danger-on: #2A0F12; }

/* ------------------------------------------- what the browser would draw
   Zero specificity (`:where`), so every page rule that names a colour still
   wins; only the controls nobody coloured stop being black or link-blue. */
:where(body.team-ui) :where(button) { color: inherit; font-family: inherit; }
:where(body.team-ui) :where(a) { color: var(--accent); text-underline-offset: 3px; }
:where(body.team-ui) :where(a:hover) { color: var(--accent-hover); }
body.team-ui .cs-side :focus-visible, body.team-ui .vf-side :focus-visible { box-shadow: 0 0 0 2px #fff; }

/* ------------------------------------------------------------- buttons
   One family: primary (filled), secondary (outlined), danger, approve.
   38px on a desk, 44px under a finger; a press answers in 140ms. */
body.team-ui .btn:not(.primary):not(.ghost):not(.btn-danger):not(.btn-approve):not(.btn-line) {
  min-height: var(--h-ctl); padding: 0 16px; border-radius: var(--r-btn);
  border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--ink); font-size: 14px; font-weight: 600;
}
body.team-ui .btn:not(.primary):not(.ghost):not(.btn-danger):not(.btn-approve):not(.btn-line):hover:not(:disabled) {
  border-color: var(--accent); background: var(--accent-weak); color: var(--accent-press);
}
body.team-ui :is(.primary, .ghost, .btn-line, .btn-danger, .btn-approve) { min-height: var(--h-ctl); }
body.team-ui :is(.primary, .ghost, .btn-line, .btn-danger, .btn-approve):not(.btn-sm) { padding-block: 0; }
body.team-ui .primary { border-radius: var(--r-btn); box-shadow: 0 1px 0 rgba(0, 0, 0, .06); font-size: 14px; }
body.team-ui .ghost, body.team-ui .btn-line {
  border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--ink);
}
body.team-ui .ghost:hover:not(:disabled), body.team-ui .btn-line:hover:not(:disabled) {
  border-color: var(--accent); background: var(--accent-weak); color: var(--accent-press);
}
/* the rail's own ghost (خروج) keeps its glass look */
body.team-ui :is(.cs-side, .vf-side) .ghost { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .22); color: #fff; }
body.team-ui :is(.cs-side, .vf-side) .ghost:hover:not(:disabled) { background: rgba(255, 255, 255, .12); color: #fff; }
body.team-ui .btn-danger { background: var(--surface-2); border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--line-strong)); color: var(--danger); }
body.team-ui .btn-danger:hover:not(:disabled) { background: var(--danger-weak); border-color: var(--danger); }
body.team-ui .btn-approve { background: var(--ok); border: 1px solid var(--ok); color: var(--ok-on); }
body.team-ui .btn-sm { min-height: var(--h-ctl-sm); padding: 0 12px; font-size: 13px; }
body.team-ui .vf-btn { min-height: var(--h-ctl); padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
body.team-ui .vf-btn.small { min-height: var(--h-ctl-sm); padding: 0 10px; font-size: 12.5px; font-weight: 600; }
body.team-ui .vf-btn:not(.primary):not(.ok):not(.danger) { background: var(--surface-2); }
body.team-ui .vf-btn.ok { color: var(--ok-on); }
body.team-ui .vf-btn.danger { background: var(--surface-2); }
body.team-ui .vf-btn.danger:hover:not(:disabled) { background: var(--danger-weak); border-color: var(--danger); color: var(--danger); }
body.team-ui .vf-btn .ic, body.team-ui .ghost .ic, body.team-ui .primary .ic { width: 16px; height: 16px; flex: 0 0 auto; }
body.team-ui :is(button, .btn, .vf-btn):disabled { cursor: not-allowed; }
@media (prefers-reduced-motion: no-preference) {
  body.team-ui :is(.primary, .ghost, .btn, .btn-line, .btn-danger, .btn-approve, .vf-btn, .ls-pill, .vf-bucket, .tu-desk, .tu-chip-btn) {
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms var(--ease-out);
  }
  body.team-ui :is(.primary, .ghost, .btn, .btn-line, .btn-danger, .btn-approve, .vf-btn, .ls-pill, .vf-bucket, .tu-desk, .tu-chip-btn):active:not(:disabled) {
    transform: scale(.97);
  }
}
@media (pointer: coarse) {
  body.team-ui { --h-ctl: 44px; --h-ctl-sm: 40px; }
}

/* ------------------------------------------------------- filters and pills
   The verification centre's queue filters: a row of segments that says which
   one is on by its fill AND its weight, and reads on both grounds. */
body.team-ui .vf-buckets { gap: 6px; }
body.team-ui .vf-bucket {
  min-height: 34px; padding: 0 14px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2);
  font-weight: 600; font-size: 13px;
}
body.team-ui .vf-bucket:hover:not(.on) { border-color: var(--accent); color: var(--ink); }
body.team-ui .vf-bucket b { min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--surface-2); color: var(--ink); font-size: 12px; line-height: 20px; text-align: center; }
body.team-ui .vf-bucket.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; }
body.team-ui .vf-bucket.on b { background: color-mix(in srgb, var(--on-accent) 18%, transparent); color: inherit; }
body.team-ui .ls-pill { min-height: 34px; }

/* ------------------------------------------------------------------ fields */
body.team-ui :is(input[type="text"], input[type="search"], input[type="email"], input[type="tel"], input[type="number"],
  input[type="date"], input[type="time"], input[type="datetime-local"], input[type="url"], input[type="password"], input:not([type]), select,
  .vf-input, .vf-select) {
  min-height: var(--h-ctl);
}
body.team-ui :is(textarea, .vf-textarea) { min-height: 88px; line-height: 1.65; }
body.team-ui :is(input, textarea)::placeholder { color: var(--muted); opacity: .85; }
body.team-ui :is(input, select, textarea):disabled { background: var(--surface-2); color: var(--muted); cursor: not-allowed; }
body.team-ui :is(input, select, textarea):hover:not(:disabled):not(:focus):not([type="checkbox"]):not([type="radio"]) { border-color: color-mix(in srgb, var(--accent) 45%, var(--line-strong)); }
body.team-ui :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--danger); }
body.team-ui .vf-field > span, body.team-ui .field > label, body.team-ui .field > span:first-child {
  font-size: 12.5px; font-weight: 600; color: var(--ink-2);
}
/* the desk's working hours: a time box wide enough for «05:00 م» */
body.team-ui .dk-span input { min-width: 118px; }

/* -------------------------------------------- a setting that is on or off
   (verify's «الإعدادات», a product's flags, a discount's limits): a row
   with its sentence and a switch, not a pill stretched across a column. */
body.team-ui label.vf-flag {
  display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; margin: 0 0 6px;
  padding: 9px 12px; min-height: 44px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); font-size: 13.5px; font-weight: 500; cursor: pointer;
}
body.team-ui label.vf-flag:hover { border-color: var(--line-strong); }
body.team-ui label.vf-flag > input[type="checkbox"] {
  order: 2; margin-inline-start: auto; width: 38px; height: 22px; border-radius: 999px; border: 0;
  background: var(--line-strong); place-content: center start; padding: 0 3px;
}
body.team-ui label.vf-flag > input[type="checkbox"]::before {
  width: 16px; height: 16px; margin: 0; border: 0; border-radius: 50%; background: #fff; transform: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform 160ms var(--ease-out);
}
body.team-ui label.vf-flag > input[type="checkbox"]:checked { background: var(--accent); }
body.team-ui label.vf-flag > input[type="checkbox"]:checked::before { transform: translateX(16px); }
html[dir="rtl"] body.team-ui label.vf-flag > input[type="checkbox"]:checked::before { transform: translateX(-16px); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.team-ui label.vf-flag > input[type="checkbox"]:checked::before { background: var(--on-accent); }
}
:root[data-theme="dark"] body.team-ui label.vf-flag > input[type="checkbox"]:checked::before { background: var(--on-accent); }

/* ------------------------------------------------------------------ cards */
body.team-ui :is(.section-sub, .b2-hint, .vf-lead, .crm-lead, .bill-hint, .tm-intro, p.hint) { max-width: var(--read); }
body.team-ui .section-sub { font-size: 13.5px; }
body.team-ui .vf-card { padding: 16px 18px; }
body.team-ui .vf-card h3 { font-size: 16px; font-weight: 700; letter-spacing: -.005em; }
body.team-ui .vf-view { max-width: 1360px; }

/* ----------------------------------------------------------------- tables */
body.team-ui :is(table.data, .vf-table, .b2-t, .wid-table) td { font-variant-numeric: tabular-nums; }
body.team-ui .vf-table th { font-size: 12px; letter-spacing: .02em; }
body.team-ui .vf-table tbody tr:last-child td { border-bottom: 0; }
body.team-ui .vf-table td[colspan].vf-muted, body.team-ui .vf-table td[colspan] > .vf-muted {
  text-align: center; padding: 28px 12px; color: var(--muted);
}
body.team-ui :is(.vf-table-wrap, .b2-scroll, .table-wrap) { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ----------------------------------------------------- chips that say state */
body.team-ui :is(.chip, .vf-chip) { line-height: 1.5; padding: 2px 10px; font-size: 12px; font-weight: 600; white-space: nowrap; }
body.team-ui .chip.ok { background: var(--ok-weak); color: var(--ok); }
body.team-ui .chip.warn { background: var(--warn-weak); color: var(--warn); }
body.team-ui :is(.chip.bad, .chip.danger) { background: var(--danger-weak); color: var(--danger); }
body.team-ui .chip.muted { background: var(--surface-2); color: var(--muted); }
body.team-ui .chip.info { background: var(--info-weak); color: var(--info); }

/* ----------------------------------------------------------- empty states */
body.team-ui :is(.empty, .dk-empty, .wk-empty) {
  color: var(--muted); text-align: center; border: 1px dashed var(--line-strong); border-radius: 12px;
  background: color-mix(in srgb, var(--surface-2) 60%, transparent); padding: 22px 16px; font-size: 13.5px;
}

/* --------------------------------------- chips that are filters (buttons) */
body.team-ui button.vf-chip { min-height: 30px; padding: 0 12px; font-size: 12.5px; border: 1px solid transparent; cursor: pointer; }
body.team-ui button.vf-chip.muted { background: var(--surface); border-color: var(--line-strong); color: var(--ink-2); }
body.team-ui button.vf-chip.muted:hover { border-color: var(--accent); color: var(--ink); }
body.team-ui button.vf-chip:not(.muted) { background: var(--accent); color: var(--on-accent); }
/* small square controls: remove a span, move a line */
body.team-ui .dk-span .vf-ghost {
  width: 32px; height: 32px; padding: 0; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--surface-2);
  display: inline-flex; align-items: center; justify-content: center; color: var(--muted);
}
body.team-ui .dk-span .vf-ghost:hover { color: var(--danger); border-color: var(--danger); background: var(--danger-weak); }
body.team-ui .dk-span .vf-ghost .ic { width: 14px; height: 14px; }

/* ------------------------------------------------------------ the rails */
body.team-ui .vf-side .vf-tab { justify-content: flex-start; text-align: start; }
body.team-ui .vf-side .vf-tab .ic { width: 18px; height: 18px; flex: 0 0 auto; opacity: .85; stroke: currentColor; fill: none; stroke-width: 1.75; }
body.team-ui .vf-side .vf-tab.on .ic { opacity: 1; }
body.team-ui .vf-side .vf-tab .count { margin-inline-start: auto; }
body.team-ui .vf-group { padding-inline: 10px; margin-top: 10px; }

/* where you are, on the pages whose top bar only had the title
   (team-ui.js fills `data-crumb` from the rail's group) */
body.team-ui .vf-title[data-crumb]::before {
  content: attr(data-crumb); display: block; font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: 0; margin-bottom: 1px;
}

/* --------------------------------------------- the faults the audit named */
body.team-ui .tu-bell.urgent .tu-bell-b { background: var(--badge-urgent); color: #fff; }
body.team-ui .bk-bad { border-color: var(--danger); background: var(--danger-weak); }
body.team-ui .bk-bad h3 { color: var(--danger); }
body.team-ui .billq-clear { opacity: 1; border-style: dashed; }
body.team-ui .billq-clear .billq-head { color: var(--muted); }
body.team-ui .mp-page { color: var(--ink); }
body.team-ui .mp-page .host { color: var(--ink); }
/* the loading line's caption is an inverted pill: it flips with the theme */
body.team-ui .pg-say { background: var(--ink); color: var(--bg); }
/* a stopped owner notice says so by its dashed edge and its words, not by fading its words */
body.team-ui .nt-off { opacity: 1; border-style: dashed; background: transparent; }

/* ------------------------------------------------------------- phones */
@media (max-width: 560px) {
  /* a phone's top bar keeps the title whole: the crumb steps aside, the actions wrap */
  body.team-ui .vf-title[data-crumb]::before { display: none; }
  body.team-ui .vf-top { flex-wrap: wrap; row-gap: 8px; }
  body.team-ui .vf-title { min-width: 0; font-size: 18px; }
  .tu-panel { width: 100vw; }
  .tu-bell { width: 40px; height: 40px; min-width: 40px; }
}