/* ─────────────────────────────────────────────────────────────────────────────
   The Forge · v10.1 design system (Figma "Macrocosm SA" › SEO FORGE, 3 Nov 2026)
   Tokens = Figma variables "Forge Colors" + text styles "Forge/*" (verified with
   get_variable_defs on node 1561:597). Loaded AFTER index.html's inline <style>,
   so equal-specificity rules here win.

   Why this file does NOT drop in the handover's design-tokens.css as-is:
   - its .card/.row/.btn/.cols/.pill/.bar/.modal names collide with v10 classes
     that mean other things (v10 .btn = filled primary, .row = divided flex row,
     .cols = the old two-column page grid);
   - its legacy map sets --ink to the TEXT colour, but v10 uses --ink as the input
     and code-box BACKGROUND (20 uses) — inputs would have turned white.
   So new components are prefixed fx-, and the legacy variables are mapped by
   what v10 uses them for.
   ───────────────────────────────────────────────────────────────────────────── */

html[data-theme="dark"], html:not([data-theme]) {
  color-scheme: dark;
  --bg: #0F0D0C; --surface: #181514; --surface-2: #211D1B; --surface-3: #2C2725; --line: #342E2B;
  --overlay: rgba(10, 8, 7, .72);
  --text: #F6F3F0; --muted: #A8A09A; --subtle: #766E68;
  --orange: #FF6A00; --violet: #8B5CF6; --teal: #14B8A6; --pink: #F43F75;
  --yellow: #FBBF24; --green: #22C55E; --red: #F05252; --blue: #3B82F6;
  --hero-a: #FF6A00; --hero-b: #F43F75; --admin-a: #8B5CF6; --admin-b: #3B82F6;
  --shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
/* Light mode: not designed yet (handover Phase 6). A warm counterpart so the
   existing ◐ toggle keeps working; accents darkened for text contrast. */
html[data-theme="light"] {
  color-scheme: light;
  --bg: #F6F3F0; --surface: #FFFFFF; --surface-2: #F3EEEA; --surface-3: #E8E1DC; --line: #E2D9D3;
  --overlay: rgba(28, 22, 18, .45);
  --text: #1B1612; --muted: #5C534D; --subtle: #7A716B;
  --orange: #FF6A00; --violet: #6D28D9; --teal: #0F766E; --pink: #BE185D;
  --yellow: #A16207; --green: #15803D; --red: #C81E1E; --blue: #1D4ED8;
  --hero-a: #FF6A00; --hero-b: #F43F75; --admin-a: #7C3AED; --admin-b: #2563EB;
  --shadow: 0 24px 60px rgba(40, 28, 20, .18);
}
:root {
  /* legacy v10 names → new tokens (by use, see header) */
  --ink: var(--bg); --panel: var(--surface); --panel2: var(--surface-2);
  --txt: var(--text); --dim: var(--muted);
  --good: var(--green); --bad: var(--red); --warn: var(--yellow); --amber: var(--yellow);
  /* --acid is set by applyBrandTheme() (client brand accent; orange by default) */
  --acid: var(--orange); --on-acid: #fff;
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --r-card: 20px; --r-modal: 24px; --r-row: 12px; --r-btn: 10px; --r-pill: 99px;
  --sidebar: 248px; --rail: 372px;
}

/* ── base ──────────────────────────────────────────────────────────────────── */
body { background: var(--bg); color: var(--text); font: 500 14px/20px var(--font); -webkit-font-smoothing: antialiased; }
.mono { font-family: var(--mono); }
.disp { font-family: var(--font); font-weight: 800; letter-spacing: -.02em; }
a { color: var(--acid); }
:focus-visible { outline: 2px solid var(--acid); outline-offset: 2px; }
h2 { font: 800 22px/30px var(--font); letter-spacing: -.02em; }
h3 { font: 700 16px/24px var(--font); letter-spacing: -.01em; }
.t-display { font: 800 30px/38px var(--font); letter-spacing: -.02em; }
.t-stat    { font: 800 32px/38px var(--font); letter-spacing: -.02em; }
.t-heading { font: 700 17px/24px var(--font); letter-spacing: -.01em; }
.t-title   { font: 600 14px/20px var(--font); }
.t-small   { font: 500 12px/16px var(--font); color: var(--muted); }
/* Labels: Figma uses --subtle; measured 3.6:1 on surface, under AA for 10.5px,
   so labels use --muted (7.0:1). Same face, size and tracking. */
.t-label, .label, .fld { font: 700 10.5px/14px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.fld { display: block; margin: 2px 0 6px; }

/* ── legacy v10 classes, restyled ──────────────────────────────────────────── */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 20px; }
.card + .card { margin-top: 20px; }
input, textarea, select { background: var(--surface-2); border: 1px solid var(--line); color: var(--text); border-radius: var(--r-btn);
  padding: 10px 12px; font: 500 13px/18px var(--font); }
input:focus, textarea:focus, select:focus { border-color: var(--acid); }
input::placeholder, textarea::placeholder { color: var(--subtle); }
.btn { background: var(--acid); color: var(--on-acid); border: 1px solid var(--acid); border-radius: var(--r-btn); padding: 10px 16px;
  font: 700 13px/18px var(--font); display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
html[data-theme="light"] .btn { color: var(--on-acid); }
.btn:hover { filter: brightness(1.07); }
.ghost { background: transparent; color: var(--text); border: 1px solid var(--line); border-radius: var(--r-btn); padding: 8px 12px;
  font: 600 12px/16px var(--font); }
.ghost:hover { border-color: var(--acid); color: var(--text); background: color-mix(in srgb, var(--acid) 6%, transparent); }
.ghost:disabled, .btn:disabled { opacity: .45; cursor: not-allowed; }
.themebtn { font-family: var(--font); }
.item { background: var(--surface-2); border: 1px solid transparent; border-radius: var(--r-row); padding: 10px 12px; }
.item:hover { border-color: var(--line); } .item.on { border-color: var(--acid); }
.item small { font-family: var(--font); color: var(--muted); }
.badge, .pcat { font: 700 10px/14px var(--mono); letter-spacing: .06em; border-radius: var(--r-pill); }
.chip { font: 600 11px/16px var(--font); border-radius: var(--r-pill); padding: 2px 9px; background: color-mix(in srgb, var(--blue) 14%, transparent); color: var(--blue); }
.chip.sec { background: var(--surface-3); color: var(--muted); }
.kwsel { font-family: var(--font); border-radius: var(--r-pill); }
.kwsel.on { background: color-mix(in srgb, var(--blue) 14%, transparent); }
.vol, .utility, .note, .detail, .stat, .copybtn, .hist, .backlink, .posthead, .pg, .del { font-family: var(--font); }
.code { background: var(--bg); font-family: var(--mono); border-radius: var(--r-btn); }
.copybox { border-radius: var(--r-row); }
.callout { border-radius: var(--r-row); }
.vrow { background: var(--surface-2); border-radius: 0 var(--r-row) var(--r-row) 0; }
.secHead { font: 700 16px/24px var(--font); letter-spacing: -.01em; text-transform: none; color: var(--text);
  border-bottom: 1px solid var(--line); padding-bottom: 10px; margin: 2px 0 12px; gap: 10px; }
.secScore { font-family: var(--font); }
.score { font-family: var(--font); font-weight: 800; letter-spacing: -.03em; }
.subtabs { border-bottom: 0; gap: 4px; padding: 4px; background: var(--surface-2); border-radius: var(--r-btn); display: inline-flex; }
.subtab { border: 0; border-radius: 8px; color: var(--muted); font: 700 12px/16px var(--font); padding: 7px 12px; }
.subtab.on { background: var(--surface-3); color: var(--text); border: 0; }
.planchip { border-radius: var(--r-pill); font-family: var(--font); }
.spin { border-top-color: var(--acid); }
table { font-family: var(--font); }

/* to-do quick-add row (todoList): compact controls beside the text box, not stacked */
div:has(> input[id$="-new"]) { align-items: center; }
div:has(> input[id$="-new"]) > input, div:has(> input[id$="-new"]) > select { margin: 0; }
div:has(> input[id$="-new"]) > input[type="date"], div:has(> input[id$="-new"]) > select { width: auto; flex: 0 0 auto; padding: 8px 10px; }

/* ── app shell ─────────────────────────────────────────────────────────────── */
.fx-app { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-height: 100vh; }
.fx-side { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--surface); border-right: 1px solid var(--line);
  padding: 20px 14px 16px; display: flex; flex-direction: column; gap: 6px; scrollbar-width: thin; z-index: 40; }
.fx-brand { display: flex; align-items: center; gap: 10px; padding: 2px 6px 14px; cursor: pointer; }
.fx-brand img { width: 34px; height: 34px; border-radius: 9px; object-fit: contain; }
.fx-brand b { display: block; font: 700 15px/18px var(--font); letter-spacing: -.01em; }
.fx-brand .fx-ver { display: block; font: 700 9.5px/13px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--acid); }
.fx-brand .fx-ver span { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.fx-nav { display: flex; flex-direction: column; gap: 2px; }
.fx-nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--r-btn); color: var(--muted);
  font: 600 14px/20px var(--font); cursor: pointer; border: 0; background: none; width: 100%; text-align: left; }
.fx-nav-item:hover { background: var(--surface-2); color: var(--text); }
.fx-nav-item.on { background: color-mix(in srgb, var(--acid) 13%, transparent); color: var(--text); }
.fx-nav-item.on svg { color: var(--acid); }
.fx-adminmode .fx-nav-item.on { background: color-mix(in srgb, var(--violet) 16%, transparent); }
.fx-adminmode .fx-nav-item.on svg { color: var(--violet); }
.fx-count { margin-left: auto; font: 700 11px/16px var(--font); padding: 1px 8px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--text); }
.fx-count.hot { background: var(--orange); color: #fff; }
.fx-count.bad { background: color-mix(in srgb, var(--red) 22%, transparent); color: var(--red); }
.fx-count:empty { display: none; }
.fx-sec { display: flex; align-items: center; justify-content: space-between; padding: 14px 8px 6px; border-top: 1px solid var(--line); margin-top: 8px; }
.fx-sec.first { border-top: 0; margin-top: 0; }
.fx-iconbtn { width: 40px; height: 40px; display: inline-grid; place-items: center; border-radius: 12px; border: 1px solid var(--line);
  background: var(--surface); color: var(--text); cursor: pointer; position: relative; flex: 0 0 auto; padding: 0; }
.fx-iconbtn:hover { border-color: var(--acid); }
.fx-iconbtn.sm { width: 26px; height: 26px; border-radius: 8px; background: transparent; border-color: transparent; color: var(--muted); }
.fx-iconbtn.sm:hover { border-color: var(--line); color: var(--text); }
.fx-dot { position: absolute; top: 9px; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 2px var(--surface); }
.fx-add { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-row); padding: 10px; margin: 0 2px 8px; }
.fx-add input, .fx-add select { margin-bottom: 6px; font-size: 12.5px; padding: 8px 10px; }

#clientList { padding: 0 2px; }
#clientList > input { padding-left: 34px; background: var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A8A09A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat 12px center; font-size: 12.5px; }
.fx-client { display: flex; align-items: center; gap: 10px; padding: 8px 8px; border-radius: var(--r-btn); cursor: pointer; border: 1px solid transparent; position: relative; }
.fx-client:hover { background: var(--surface-2); }
.fx-client.on { background: color-mix(in srgb, var(--acid) 10%, var(--surface-2)); border-color: color-mix(in srgb, var(--acid) 55%, transparent); }
.fx-client.archived { opacity: .55; }
.fx-av { width: 28px; height: 28px; border-radius: 8px; flex: 0 0 auto; display: grid; place-items: center; font: 800 12px var(--font); color: #fff;
  position: relative; overflow: hidden; }
.fx-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; padding: 2px; }
.fx-client .nm { font: 600 13px/17px var(--font); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-client .mt { font: 500 11px/15px var(--font); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-client .del { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); opacity: 0; font-size: 10.5px; padding: 3px 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.fx-client:hover .del, .fx-client .del:focus { opacity: 1; }
.fx-more { font: 600 12px var(--font); color: var(--muted); padding: 6px 8px; cursor: pointer; }
#pageNav .card { background: var(--surface-2); border-radius: var(--r-row); padding: 12px; margin: 10px 2px 0 !important; }
.pnav { border-radius: 8px !important; font-family: var(--font); }
.fx-side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 12px; padding-top: 16px; }
.fx-onb { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer; padding: 12px; border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--orange) 45%, transparent); background: color-mix(in srgb, var(--orange) 12%, var(--surface)); color: var(--text); }
.fx-onb .ic { width: 34px; height: 34px; border-radius: 10px; background: var(--orange); color: #fff; display: grid; place-items: center; flex: 0 0 auto; }
.fx-onb b { display: block; font: 700 13.5px/18px var(--font); } .fx-onb small { display: block; font: 500 11.5px/15px var(--font); color: var(--muted); }
.fx-user { display: flex; align-items: center; gap: 10px; padding: 4px 4px; }
.fx-user .fx-av { width: 34px; height: 34px; border-radius: 50%; background: var(--pink); font-size: 12px; }
.fx-user b { display: block; font: 700 13px/17px var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-user small { display: block; font: 500 11.5px/15px var(--font); color: var(--muted); }
.fx-user > div { flex: 1; min-width: 0; }

.fx-main { min-width: 0; padding: 22px 32px 48px; }
.fx-top { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; flex-wrap: nowrap; }
.fx-top .fx-crumb { font: 500 14px/20px var(--font); color: var(--muted); display: flex; gap: 8px; align-items: center; min-width: 0; flex: 0 1 auto; overflow: hidden; white-space: nowrap; }
.fx-top .fx-crumb > * { flex: 0 0 auto; }
.fx-top .fx-crumb b { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }
.fx-crumb:empty { display: none; }
.fx-top .fx-crumb b { color: var(--text); font-weight: 600; }
.fx-search { position: relative; flex: 1 1 240px; max-width: 460px; min-width: 150px; margin-right: auto; }
.fx-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.fx-search input { margin: 0; height: 42px; padding-left: 42px; background: var(--surface); border-radius: 12px; font-size: 13.5px; }
.fx-search kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font: 700 10px var(--mono); color: var(--muted);
  background: var(--surface-3); border-radius: 6px; padding: 3px 7px; pointer-events: none; }
.fx-results { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); padding: 6px; z-index: 60; max-height: 360px; overflow: auto; }
.fx-results .fx-client { padding: 8px 10px; }
.fx-results .fx-client.kb { background: var(--surface-2); }
.fx-btn { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 12px; font: 700 14px var(--font);
  border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; white-space: nowrap; }
.fx-btn.primary { background: var(--acid); border-color: var(--acid); color: var(--on-acid); }
.fx-btn.primary:hover { filter: brightness(1.07); }
#userBar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fx-seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.fx-seg button { border: 0; background: none; color: var(--muted); font: 700 12.5px var(--font); padding: 8px 14px; border-radius: 9px; cursor: pointer; }
.fx-seg button.on { background: var(--acid); color: var(--on-acid); }
.fx-adminmode .fx-seg button.on { background: var(--violet); color: #fff; }
.fx-menu { display: none; }
.fx-scrim { display: none; }

/* ── components ────────────────────────────────────────────────────────────── */
.fx-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 20px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.fx-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.fx-head h3 { margin: 0; font: 700 17px/24px var(--font); letter-spacing: -.01em; }
.fx-head .sub { font: 500 12px/16px var(--font); color: var(--muted); }
.fx-head > div { min-width: 0; }
.fx-head .act { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fx-chip { --c: var(--orange); width: 36px; height: 36px; border-radius: 10px; flex: 0 0 auto; display: grid; place-items: center;
  background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); }
.fx-pill { --c: var(--muted); display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r-pill);
  font: 700 12px/16px var(--font); background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); white-space: nowrap; }
.fx-pill.sm { font-size: 11px; padding: 2px 8px; }
.fx-group { font: 700 10.5px/14px var(--mono); text-transform: uppercase; letter-spacing: .08em; display: flex; align-items: center; gap: 8px; margin: 6px 0 2px; }
.fx-group::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.fx-row { background: var(--surface-2); border-radius: var(--r-row); padding: 11px 14px; display: flex; align-items: center; gap: 12px; min-width: 0; }
.fx-row + .fx-row { margin-top: 8px; }
.fx-row .tt { font: 600 14px/20px var(--font); color: var(--text); overflow-wrap: anywhere; }
.fx-row .mt { font: 500 12px/16px var(--font); color: var(--muted); }
.fx-row .grow { flex: 1; min-width: 0; }
.fx-ring { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--subtle); flex: 0 0 auto; }
.fx-bar { height: 8px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.fx-bar > i { display: block; height: 100%; width: var(--p, 0%); background: var(--c, var(--acid)); border-radius: inherit; }
.fx-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.fx-tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 18px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.fx-tile .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.fx-tile .n { font: 800 32px/38px var(--font); letter-spacing: -.02em; }
.fx-tile .l { font: 600 14px/20px var(--font); color: var(--muted); margin-top: -8px; }
.fx-tile .tag { font: 600 11px/15px var(--font); color: var(--muted); background: var(--surface-3); padding: 2px 8px; border-radius: var(--r-pill); }
.fx-cols { display: grid; grid-template-columns: minmax(0, 1fr) var(--rail); gap: 24px; align-items: start; }
.fx-stack { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.fx-page { display: flex; flex-direction: column; gap: 22px; }

/* hero */
.fx-heroGrid { display: grid; grid-template-columns: minmax(0, 1fr) var(--rail); gap: 24px; }
.fx-hero { position: relative; overflow: hidden; border-radius: 24px; padding: 26px 28px; color: #fff; min-height: 200px;
  background: linear-gradient(120deg, var(--hero-a), var(--hero-b)); display: flex; flex-direction: column; gap: 12px; }
.fx-adminmode .fx-hero, .fx-hero.admin { background: linear-gradient(120deg, var(--admin-a), var(--admin-b)); }
.fx-hero::before, .fx-hero::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .12); pointer-events: none; }
.fx-hero::before { width: 300px; height: 300px; right: -60px; top: -120px; }
.fx-hero::after { width: 70px; height: 70px; right: 140px; bottom: 26px; }
.fx-hero > * { position: relative; }
.fx-hero h2 { margin: 0; font: 800 30px/38px var(--font); letter-spacing: -.02em; color: #fff; }
.fx-hero p { margin: 0; font: 500 14.5px/22px var(--font); max-width: 560px; color: rgba(255, 255, 255, .92); }
.fx-eyebrow { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .18); font: 700 10.5px/14px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.fx-hero .fx-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.fx-hbtn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 12px; border: 0; cursor: pointer;
  font: 700 13.5px var(--font); background: #fff; color: #1B1612; text-decoration: none; }
.fx-hbtn.glass { background: rgba(255, 255, 255, .2); color: #fff; }
.fx-hbtn:hover { filter: brightness(.96); }
/* the season control and trim live inside the hero now */
.fx-hero .sfLvl { position: absolute; top: 18px; right: 18px; margin: 0; background: rgba(0, 0, 0, .22); border-color: rgba(255, 255, 255, .25); z-index: 2; }
.fx-hero .sfLvl b, .fx-hero .sfLvl button { color: rgba(255, 255, 255, .85); }
.fx-hero .sfLvl button.on { color: #fff; border-color: rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .16); }
.fx-hero .sfChip { margin-left: 0; color: #fff; border-color: rgba(255, 255, 255, .5); }
.fx-hero .sfChip i { background: #fff; }
.fx-hero .sfGarland { bottom: 4px; }

/* donut legend */
.fx-legend { display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 150px; }
.fx-legend div { display: flex; align-items: center; gap: 10px; font: 600 14px var(--font); }
.fx-legend i { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.fx-legend .p { margin-left: auto; font: 500 12px var(--font); color: var(--muted); }
.fx-legend b { width: 30px; text-align: right; font-weight: 800; }

/* campaign cards (dashboard keeps gradient fills — the outline style is ⚑ for the team to confirm here) */
.fx-camps { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.fx-camp { border-radius: 18px; padding: 18px; color: #fff; cursor: pointer; display: flex; flex-direction: column; gap: 12px; min-width: 0;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .22); transition: transform .12s; }
.fx-camp:hover { transform: translateY(-2px); }
.fx-camp .k { display: flex; justify-content: space-between; align-items: center; gap: 8px; font: 700 10px/14px var(--mono); letter-spacing: .08em; text-transform: uppercase; opacity: .92; }
.fx-camp .k b { font: 800 22px/26px var(--font); letter-spacing: -.02em; }
.fx-camp .nm { font: 800 18px/24px var(--font); letter-spacing: -.01em; }
.fx-camp .fx-bar { background: rgba(255, 255, 255, .28); height: 7px; }
.fx-camp .fx-bar > i { background: #fff; }
.fx-camp .ft { display: flex; justify-content: space-between; gap: 8px; font: 600 12px/16px var(--font); }

/* for-you / notification rows */
.fx-note { display: flex; gap: 12px; padding: 12px 4px; border-top: 1px solid var(--line); align-items: flex-start; }
.fx-note:first-child { border-top: 0; }
.fx-note .fx-av { width: 32px; height: 32px; border-radius: 50%; font-size: 11px; }
.fx-note .tx { flex: 1; min-width: 0; font: 600 13.5px/19px var(--font); }
.fx-note .mt { font: 500 12px/16px var(--font); color: var(--muted); margin-top: 2px; }
.fx-note .unread { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); margin-top: 7px; flex: 0 0 auto; }
.fx-note a { color: var(--acid); text-decoration: none; font-weight: 700; }

/* watch rows */
.fx-rank { font: 700 11px/16px var(--mono); padding: 3px 9px; border-radius: 8px; background: var(--surface-3); color: var(--muted); white-space: nowrap; }
.fx-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.fx-chipbtn { border: 0; cursor: pointer; font: 700 12px var(--font); padding: 6px 12px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--muted); }
.fx-chipbtn.on { background: color-mix(in srgb, var(--red) 18%, transparent); color: var(--red); }
.fx-notice { display: inline-flex; align-items: center; gap: 8px; font: 600 12px/16px var(--font); padding: 6px 12px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--yellow) 14%, transparent); color: var(--yellow); }

/* small action buttons used in rows */
.fx-sbtn { border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 9px; padding: 6px 12px;
  font: 700 12px/16px var(--font); cursor: pointer; white-space: nowrap; }
.fx-sbtn:hover { border-color: var(--acid); }
.fx-sbtn.go { background: var(--acid); border-color: var(--acid); color: var(--on-acid); }
.fx-sbtn.warn { background: color-mix(in srgb, var(--orange) 16%, transparent); border-color: transparent; color: var(--orange); }

/* empty / error states: icon chip + title + reason + fix (handover §6) */
.fx-empty { display: flex; gap: 12px; align-items: flex-start; padding: 6px 2px; }
.fx-empty b { display: block; font: 700 14px/20px var(--font); }
.fx-empty span { display: block; font: 500 12.5px/18px var(--font); color: var(--muted); }

/* ── client workspace header + tabs ────────────────────────────────────────── */
.fx-client-shell { padding: 0 !important; overflow: hidden; border-radius: 24px !important; }
.fx-chead { position: relative; padding: 24px 24px 18px; display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap;
  background: linear-gradient(120deg, color-mix(in srgb, var(--acid) 16%, var(--surface)) 0%, var(--surface) 70%); }
.fx-chead .fx-av { width: 64px; height: 64px; border-radius: 16px; font-size: 26px; }
.fx-chead h2 { margin: 0 0 8px; font: 800 30px/36px var(--font); letter-spacing: -.02em; overflow-wrap: anywhere; }
.fx-chead .meta { display: flex; gap: 8px; flex-wrap: wrap; }
.fx-meta { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--text) 8%, transparent);
  font: 600 12px/16px var(--font); color: var(--muted); text-decoration: none; white-space: nowrap; }
.fx-meta svg { width: 14px; height: 14px; }
.fx-meta.hot { background: color-mix(in srgb, var(--orange) 16%, transparent); color: var(--orange); }
.fx-chead .act { margin-left: auto; display: flex; gap: 8px; align-items: center; }
#onbPill:not(:empty) { padding: 10px 24px !important; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--orange) 5%, var(--surface)); }
.fx-client-shell .tabs { display: flex; gap: 26px; padding: 0 24px; background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none; align-items: center; }
.fx-client-shell .tab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 15px 2px 13px; font: 600 14px/20px var(--font); letter-spacing: 0;
  color: var(--muted); background: none; border: 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.fx-client-shell .tab:hover { color: var(--text); }
.fx-client-shell .tab.on { color: var(--text); border-bottom-color: var(--acid); background: none; }
.fx-client-shell .tab.on svg { color: var(--acid); }
.fx-client-shell .tab.fx-mtg { margin-left: auto; border: 1px solid var(--line); border-radius: 10px; padding: 7px 12px; font-size: 12.5px; color: var(--text); }
.fx-client-shell .tab.fx-mtg:hover { border-color: var(--acid); }
#tabBody { padding: 0 !important; margin-top: 20px; } /* v10.12.0: outside the header card */

/* ── admin / org snapshot ──────────────────────────────────────────────────── */
.fx-adminmode #main > .card:first-child { border-top: 3px solid var(--violet); }

/* ── responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .fx-seg button { padding: 8px 10px; }
  .fx-crumb > b ~ span { display: none; }
  .fx-cols, .fx-heroGrid { grid-template-columns: minmax(0, 1fr) 320px; }
  .fx-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1060px) {
  .fx-cols, .fx-heroGrid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .fx-app { grid-template-columns: minmax(0, 1fr); }
  .fx-side { position: fixed; left: 0; top: 0; bottom: 0; width: 280px; transform: translateX(-102%); transition: transform .2s ease; box-shadow: var(--shadow); }
  .fx-app.nav-open .fx-side { transform: none; }
  .fx-app.nav-open .fx-scrim { display: block; position: fixed; inset: 0; background: var(--overlay); z-index: 35; }
  .fx-menu { display: inline-grid; }
  .fx-main { padding: 14px 14px 40px; }
  .fx-top { flex-wrap: wrap; }
  .fx-search { order: 9; flex: 1 1 100%; max-width: none; }
  .fx-crumb { order: 8; flex: 1 1 100%; }
  .fx-btn.primary span { display: none; }
  .fx-btn.primary { padding: 0 12px; }
  .fx-hero h2 { font-size: 24px; line-height: 30px; }
  .fx-chead h2 { font-size: 24px; line-height: 30px; }
  .fx-chead .act { margin-left: 0; }
}
@media (max-width: 560px) {
  .fx-tiles { grid-template-columns: minmax(0, 1fr); }
  #userBar { display: none; } /* Org dashboard is in the nav drawer on phones */
  .fx-hero { padding: 20px; }
  .fx-hero .sfLvl { position: static; align-self: flex-end; order: -1; }
}
@media (prefers-reduced-motion: reduce) { .fx-camp, .fx-side { transition: none; } }

/* ── v10.2.0 · Phase 2 pages (Figma 11–16) ─────────────────────────────────── */
.fx-phead { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.fx-phead h1 { margin: 0; font: 800 30px/38px var(--font); letter-spacing: -.02em; }
.fx-phead .sub { font: 500 14px/20px var(--font); color: var(--muted); margin-top: 2px; }
.fx-phead .act { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fx-select, .fx-inline { width: auto; margin: 0; padding: 8px 12px; font-size: 12.5px; border-radius: 10px; background: var(--surface); }
.fx-inline { flex: 1 1 220px; max-width: 360px; }
.fx-sech { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.fx-sech h3 { margin: 0; }
.fx-chipbtn .dot, .fx-nav-item .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; flex: 0 0 auto; }
.fx-chipbtn.n.on { background: var(--text); color: var(--bg); }
/* my work */
.fx-mstats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.fx-mstat { --c: var(--orange); display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; cursor: default; text-align: left;
  border: 1px solid color-mix(in srgb, var(--c) 35%, var(--line)); background: color-mix(in srgb, var(--c) 8%, var(--surface)); color: var(--text); font: 600 13px var(--font); }
.fx-mstat b { font: 800 22px var(--font); color: var(--c); }
.fx-board { display: grid; grid-template-columns: repeat(5, minmax(210px, 1fr)); gap: 14px; overflow-x: auto; padding-bottom: 6px; align-items: start; }
.fx-col { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 12px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fx-colh { display: flex; align-items: center; gap: 8px; font: 700 13.5px var(--font); padding: 2px 4px; }
.fx-colh i { width: 9px; height: 9px; border-radius: 50%; }
.fx-colempty { font: 500 12px var(--font); color: var(--subtle); text-align: center; padding: 14px 0; border: 1px dashed var(--line); border-radius: 12px; }
.fx-kcard { background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; }
.fx-kcard:hover { border-color: var(--acid); }
.fx-kcard.od { border-color: color-mix(in srgb, var(--red) 45%, var(--line)); }
.fx-kcard .cl { display: flex; align-items: center; gap: 6px; font: 600 11.5px var(--font); color: var(--muted); }
.fx-kcard .cl i { width: 7px; height: 7px; border-radius: 50%; }
.fx-kcard .tt { font: 700 14px/19px var(--font); }
.fx-kcard .ft { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.fx-kcard .mt { font: 500 11px var(--font); color: var(--muted); }
/* inbox */
.fx-inbox { display: grid; grid-template-columns: 230px minmax(0, 1fr) 380px; gap: 18px; align-items: start; }
.fx-ibf { padding: 10px; gap: 2px; }
.fx-ibf .fx-nav-item { font-size: 13.5px; padding: 8px 10px; }
.fx-iblist { gap: 0; padding: 14px; }
.fx-ibrow { cursor: pointer; border-radius: 12px; padding: 11px 10px; border-top: 0; }
.fx-ibrow:hover { background: var(--surface-2); }
.fx-ibrow.sel { background: color-mix(in srgb, var(--orange) 10%, var(--surface-2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--orange) 45%, transparent); }
.fx-ibprev { position: sticky; top: 16px; }
/* clients */
.fx-cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.fx-ccard { position: relative; background: var(--surface); border-radius: var(--r-card); padding: 18px; display: flex; flex-direction: column; gap: 12px; cursor: pointer; min-width: 0; }
.fx-ccard::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(135deg, var(--c1), var(--c2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.fx-ccard:hover { background: var(--surface-2); }
.fx-ccard .k { display: flex; justify-content: space-between; gap: 8px; font: 700 10px/14px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.fx-ccard .pct { font: 800 20px/24px var(--font); letter-spacing: -.02em; color: var(--c1); }
.fx-ccard .nm { font: 800 18px/24px var(--font); letter-spacing: -.01em; color: var(--text); }
.fx-ccard .ft { display: flex; justify-content: space-between; gap: 8px; font: 600 12px/16px var(--font); color: var(--muted); }
.fx-ccard .ft span { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fx-ccard .ft b { color: var(--text); white-space: nowrap; }
/* reports */
.fx-tablewrap { overflow-x: auto; }
.fx-table { width: 100%; border-collapse: separate; border-spacing: 0 6px; font: 500 13px var(--font); }
.fx-table th { text-align: left; font: 700 10.5px/14px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 0 12px; }
.fx-table td { background: var(--surface-2); padding: 10px 12px; white-space: nowrap; }
.fx-table td:first-child { border-radius: 12px 0 0 12px; } .fx-table td:last-child { border-radius: 0 12px 12px 0; }
.fx-table .fx-av { width: 26px; height: 26px; border-radius: 7px; font-size: 11px; }
.fx-steps { margin: 0; padding: 0; list-style: none; counter-reset: s; display: flex; flex-direction: column; gap: 12px; }
.fx-steps li { counter-increment: s; display: grid; grid-template-columns: 26px 1fr; gap: 2px 10px; }
.fx-steps li::before { content: counter(s); grid-row: span 2; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); font: 800 12px var(--font); }
.fx-steps b { font: 700 13.5px var(--font); } .fx-steps span { font: 500 12px var(--font); color: var(--muted); }
@media (max-width: 1280px) { .fx-inbox { grid-template-columns: 210px minmax(0, 1fr); } .fx-ibprev { grid-column: 2; position: static; } .fx-mstats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .fx-inbox { grid-template-columns: minmax(0, 1fr); } .fx-ibprev { grid-column: auto; } .fx-mstats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fx-phead h1 { font-size: 24px; line-height: 30px; } .fx-phead .act { margin-left: 0; } }

/* ── v10.2.1 · My work List/Calendar, Inbox email setting, Rank watch nights + budget, Team board posts ── */
.fx-selwrap { display: inline-flex; align-items: center; gap: 6px; font: 600 12.5px var(--font); color: var(--muted); border: 1px solid var(--line); border-radius: 10px; padding: 0 0 0 10px; background: var(--surface); }
.fx-selwrap .fx-select { border: 0; background: transparent; }
.fx-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.fx-calh { font: 700 10.5px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 0 6px; }
.fx-calc { min-height: 96px; background: var(--surface-2); border-radius: 12px; padding: 6px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fx-calc.blank { background: transparent; }
.fx-calc.past { opacity: .72; }
.fx-calc.today { box-shadow: inset 0 0 0 1.5px var(--acid); }
.fx-calc .dn { font: 700 12px var(--font); color: var(--muted); }
.fx-calc.today .dn { color: var(--acid); }
.fx-calt { font: 600 11px/14px var(--font); padding: 3px 6px; border-radius: 6px; background: color-mix(in srgb, var(--c) 16%, transparent); border-left: 3px solid var(--c);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.fx-calt.od { background: color-mix(in srgb, var(--red) 18%, transparent); border-left-color: var(--red); }
.fx-nights { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 10px; align-items: end; }
.fx-night { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; min-width: 0; }
.fx-night b { font: 800 16px var(--font); }
.fx-night .col { height: 120px; width: 100%; display: flex; align-items: flex-end; }
.fx-night .col i { display: block; width: 100%; border-radius: 10px 10px 4px 4px; background: color-mix(in srgb, var(--red) 75%, transparent); }
.fx-night .col i.zero { background: var(--green); }
.fx-night .col i.none { background: transparent; border: 1.5px dashed color-mix(in srgb, var(--yellow) 60%, transparent); }
.fx-night span { font: 600 11.5px var(--font); } .fx-night small { font: 500 10.5px var(--font); color: var(--muted); }
.fx-tagblock { border-left: 3px solid var(--c); background: color-mix(in srgb, var(--c) 7%, var(--surface-2)); border-radius: 0 12px 12px 0; padding: 10px 14px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.fx-tagblock a { font: 700 12px var(--font); color: var(--acid); text-decoration: none; }
.fx-postbar { display: flex; gap: 4px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 10px; }
.fx-postbar button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--muted); font: 700 12px var(--font); padding: 6px 10px; border-radius: 8px; cursor: pointer; }
.fx-postbar button:hover { background: var(--surface-2); color: var(--text); }
.fx-postbar button.on { color: var(--orange); background: color-mix(in srgb, var(--orange) 12%, transparent); }
.fx-postbar button.bad { margin-left: auto; color: var(--red); }
.fx-replies { display: flex; flex-direction: column; gap: 10px; background: var(--surface-2); border-radius: 12px; padding: 12px; }
.fx-reply { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; }
.fx-reply .fx-av { width: 26px; height: 26px; border-radius: 50%; font-size: 10px; }
@media (max-width: 900px) { .fx-cal { grid-template-columns: repeat(7, minmax(36px, 1fr)); overflow-x: auto; } .fx-calc { min-height: 64px; } .fx-calt { font-size: 0; padding: 0; height: 6px; } }

/* ── v10.3.0 · Start my day + Your week ── */
.fx-ovl { position: fixed; inset: 0; background: var(--overlay); z-index: 9500; display: grid; place-items: center; padding: 20px; overflow-y: auto; }
.fx-smd { width: min(1050px, 100%); max-height: calc(100vh - 40px); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-modal); box-shadow: var(--shadow); overflow: hidden; }
.fx-smd > header { display: flex; align-items: center; gap: 16px; padding: 18px 24px; border-bottom: 1px solid var(--line); background: linear-gradient(120deg, color-mix(in srgb, var(--orange) 16%, var(--surface)), var(--surface) 70%); }
.fx-smd > header > div:first-child { flex: 1; min-width: 0; }
.fx-smd > header h2 { margin: 2px 0 0; font: 800 20px/28px var(--font); }
.fx-smd .prog { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; font: 600 12px var(--font); color: var(--muted); }
.fx-eyebrow2 { font: 700 10.5px/14px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--orange); }
.fx-smd .body { display: grid; grid-template-columns: 230px minmax(0, 1fr) 270px; min-height: 0; flex: 1; overflow: auto; }
.fx-smd .plate { padding: 18px 12px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.fx-smd .plate .fx-nav-item { font-size: 13.5px; padding: 8px; }
.fx-smd main { padding: 20px 24px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fx-smd .focus { padding: 18px 16px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.fx-smd > footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 24px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.fx-smdcard { border: 1px solid color-mix(in srgb, var(--c) 55%, var(--line)); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 10px; background: var(--surface); }
.fx-smdcard h3 { margin: 0; font: 700 18px/24px var(--font); }
.fx-smdcard .mt { display: flex; align-items: center; gap: 6px; font: 500 12.5px var(--font); color: var(--muted); flex-wrap: wrap; }
.fx-smdcard .mt i { width: 8px; height: 8px; border-radius: 50%; }
.fx-smdcard p { margin: 0; font: 500 14px/21px var(--font); }
.fx-smdcard .acts { display: flex; gap: 8px; flex-wrap: wrap; }
.fx-rollbox { display: flex; flex-direction: column; gap: 8px; background: var(--surface-2); border-radius: 12px; padding: 12px; }
.fx-err { color: var(--red); font: 600 12.5px var(--font); }
.fx-err:empty { display: none; }
.fx-slot { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--violet) 14%, var(--surface-2)); }
.fx-slot b { display: block; font: 700 13px/17px var(--font); } .fx-slot small { display: block; font: 500 11.5px var(--font); color: var(--muted); }
.fx-slot.done b { text-decoration: line-through; opacity: .7; }
.fx-slot.empty { background: none; border: 1.5px dashed var(--line); color: var(--muted); font: 500 12.5px var(--font); justify-content: center; padding: 14px; }
.fx-tally { display: grid; grid-template-columns: 1fr auto; gap: 8px; font: 500 13px var(--font); }
.fx-wbars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; align-items: end; }
.fx-wbars > div { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.fx-wbars b { font: 800 14px var(--font); }
.fx-wbars .col { height: var(--h); width: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; }
.fx-wbars .col i { display: block; width: 100%; }
.fx-wbars .col i.task { background: var(--yellow); border-radius: 0 0 6px 6px; }
.fx-wbars .col i.todo { background: color-mix(in srgb, var(--yellow) 50%, var(--surface-3)); border-radius: 6px 6px 0 0; }
.fx-wbars .col i.task:first-child { border-radius: 6px; }
.fx-wbars .col i.none { height: 5px; background: var(--surface-3); border-radius: 99px; }
.fx-wbars span { font: 600 12px var(--font); color: var(--muted); }
.fx-wbars .today span { color: var(--text); font-weight: 800; }
.fx-weekpop { width: min(480px, 100%); }
.fx-wstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fx-wstats > div { background: var(--surface-2); border-radius: 12px; padding: 10px 12px; }
.fx-wstats b { display: block; font: 800 18px var(--font); } .fx-wstats span { font: 500 12px var(--font); color: var(--muted); }
.fx-legend2 { display: flex; gap: 16px; font: 500 12.5px var(--font); color: var(--muted); }
.fx-legend2 i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.fx-w4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.fx-w4 i { display: block; height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--yellow) 50%, var(--surface-3)); margin-bottom: 6px; }
.fx-w4 span { font: 500 12px var(--font); color: var(--muted); }
.fx-howbox { background: var(--surface-2); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; font: 500 12.5px/18px var(--font); color: var(--muted); }
@media (max-width: 1000px) { .fx-smd .body { grid-template-columns: minmax(0, 1fr); } .fx-smd .plate, .fx-smd .focus { border: 0; border-top: 1px solid var(--line); } .fx-smd .plate { order: 2; } .fx-smd .focus { order: 3; } }

/* ── v10.4.0 · auth screens (29–31), meeting Sent (27), AI visibility empty state (28) ── */
.fx-auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; }
.fx-authbrand { background: linear-gradient(150deg, #FF6A00 0%, #F43F75 45%, #8B5CF6 100%); color: #fff; padding: 32px 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.fx-authbrand .fx-brand b { color: #fff; }
.fx-authcopy { display: flex; flex-direction: column; gap: 16px; max-width: 560px; }
.fx-authcopy h1 { margin: 0; font: 800 38px/46px var(--font); letter-spacing: -.02em; color: #fff; }
.fx-authcopy p { margin: 0; font: 500 15px/23px var(--font); color: rgba(255, 255, 255, .9); }
.fx-authstats { display: flex; gap: 12px; flex-wrap: wrap; }
.fx-authstats div { background: rgba(255, 255, 255, .16); border-radius: 14px; padding: 12px 16px; min-width: 110px; }
.fx-authstats b { display: block; font: 800 26px var(--font); } .fx-authstats span { font: 600 12px var(--font); opacity: .9; }
.fx-authfoot { font: 700 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.fx-authcard { background: var(--bg); display: grid; place-items: center; padding: 32px; }
.fx-authcard > div { width: min(400px, 100%); display: flex; flex-direction: column; gap: 6px; }
.fx-authcard h2 { margin: 6px 0 0; font: 800 28px/36px var(--font); letter-spacing: -.02em; }
.fx-authcard .fld { margin-top: 10px; }
.fx-authbtn { width: 100%; margin-top: 14px; padding: 12px 16px; font-size: 14px; }
.fx-pw { position: relative; } .fx-pw input { padding-right: 64px; }
.fx-pw button { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--muted); font: 700 12px var(--font); cursor: pointer; }
.fx-autherr { margin-top: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--red) 55%, transparent); background: color-mix(in srgb, var(--red) 10%, transparent); color: var(--red); font: 600 13px/19px var(--font); }
.fx-rules { display: flex; gap: 16px; margin-top: 8px; font: 600 12px var(--font); color: var(--muted); }
.fx-rules span::before { content: "○ "; } .fx-rules span.ok { color: var(--green); } .fx-rules span.ok::before { content: "✓ "; }
.fx-sent { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 6px 4px; }
.fx-sentok { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); }
.fx-sent h2 { margin: 0; font: 800 26px/34px var(--font); }
.fx-sent > p { margin: 0; max-width: 520px; }
.fx-sumcard { align-self: stretch; background: var(--surface-2); border-radius: 16px; padding: 6px 14px; text-align: left; }
.fx-sumrow { display: grid; grid-template-columns: 30px 90px 1fr; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); }
.fx-sumrow:first-child { border-top: 0; } .fx-sumrow b { font: 600 13.5px/19px var(--font); }
.fx-sent .fx-howbox { align-self: stretch; text-align: left; border: 1px solid color-mix(in srgb, var(--violet) 40%, var(--line)); }
.fx-sentfoot { align-self: stretch; display: flex; justify-content: space-between; align-items: center; gap: 10px; border-top: 1px solid var(--line); padding-top: 12px; flex-wrap: wrap; }
.fx-aihero { position: relative; overflow: hidden; border-radius: 22px; padding: 26px 28px; display: flex; gap: 20px; align-items: center;
  background: radial-gradient(500px 260px at 85% 50%, color-mix(in srgb, var(--violet) 32%, transparent), transparent 70%), color-mix(in srgb, var(--violet) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--violet) 40%, var(--line)); }
.fx-aihero > div:first-child { flex: 1; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.fx-aihero h2 { margin: 0; font: 800 28px/36px var(--font); letter-spacing: -.02em; } .fx-aihero p { margin: 0; max-width: 680px; color: var(--muted); font: 500 14.5px/22px var(--font); }
.fx-aistar { width: 140px; height: 140px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: radial-gradient(circle, color-mix(in srgb, var(--violet) 70%, transparent), transparent 70%); flex: 0 0 auto; }
.fx-step { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); font: 800 12.5px var(--font); flex: 0 0 auto; }
@media (max-width: 900px) { .fx-auth { grid-template-columns: minmax(0, 1fr); } .fx-authbrand { padding: 24px; } .fx-authcopy h1 { font-size: 26px; line-height: 32px; } .fx-aistar { display: none; } }
/* v10.4.0 · My work List / Calendar (39 / 40) */
.fx-mwl td { background: transparent; border-top: 1px solid var(--line); border-radius: 0 !important; }
.fx-mwl { border-spacing: 0; } .fx-mwl th { padding: 12px; }
.fx-mwl .fx-av { width: 22px; height: 22px; border-radius: 50%; font-size: 9px; }
.fx-calc.out { opacity: .45; } .fx-calc.drop { box-shadow: inset 0 0 0 2px var(--acid); }
.fx-cal.week .fx-calc { min-height: 260px; }
.fx-todaydot { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--orange); color: #fff; }
.fx-calc.today { background: color-mix(in srgb, var(--orange) 8%, var(--surface-2)); }
.fx-tray { border: 1.5px dashed var(--line); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.fx-kcard .fx-av { width: 22px; height: 22px; border-radius: 50%; font-size: 9px; }

/* ── v10.5.0 · modal pattern (P01–P10) ── */
.fx-ovl { z-index: 9800; }
.fx-modal { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-modal); box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
  display: flex; flex-direction: column; max-height: calc(100vh - 40px); overflow: hidden; padding: 0 !important; margin: 0 !important; }
.fx-mhead { display: flex; align-items: flex-start; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.fx-mhead h3 { margin: 0; font: 700 17px/24px var(--font); letter-spacing: -.01em; }
.fx-mhead .sub { font: 500 12px/16px var(--font); color: var(--muted); margin-top: 2px; }
.fx-mbody { padding: 20px 24px; display: flex; flex-direction: column; gap: 12px; overflow: auto; flex: 1; min-height: 0; }
.fx-mbody.row { flex-direction: row; padding: 0; gap: 0; } .fx-mbody.row > div { min-height: 0; }
.fx-mbody > * { margin-top: 0 !important; }
.fx-mbody .card { background: var(--surface-2); border-radius: var(--r-row); }
.fx-mfoot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 22px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.fx-mfoot .hint { font: 500 12px/16px var(--font); color: var(--muted); flex: 1; min-width: 160px; }
.fx-mfoot .acts > * { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; margin: 0 !important; padding: 0 !important; border: 0 !important; }
.fx-modal .onb-ctl { border: 0; padding: 0; margin: 0; }

/* ── v10.6.0 · client tabs: Overview, Keywords & rankings, Setup, Manage, page-audit drawer ── */
.fx-moved { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); font: 500 12.5px/18px var(--font); color: var(--muted); }
.fx-moved a { color: var(--acid); font-weight: 700; }
.fx-idx { display: flex; flex-wrap: wrap; gap: 4px; } .fx-idx i { width: 22px; height: 8px; border-radius: 99px; } .fx-idx i.ok { background: var(--green); } .fx-idx i.no { background: var(--red); }
.fx-toggle { display: flex; align-items: center; gap: 10px; font: 600 13px var(--font); color: var(--text); padding: 6px 0; cursor: pointer; flex-wrap: wrap; }
.fx-toggle input { width: 16px !important; height: 16px; accent-color: var(--violet); }
.fx-setupblock > .fx-head { margin-bottom: 4px; }
.fx-setupblock .card { background: var(--surface-2); }
.fx-drawer-ov { position: fixed; inset: 0; background: rgba(10, 8, 7, .6); z-index: 9600; display: flex; justify-content: flex-end; }
.fx-drawer { width: min(640px, 100%); height: 100%; background: var(--surface); border-left: 1px solid var(--line); box-shadow: -30px 0 80px rgba(0, 0, 0, .5); display: flex; flex-direction: column; animation: fxIn .18s ease-out; }
.fx-drawer-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--line); }
#auditDrawerBody { padding: 18px 20px; overflow: auto; flex: 1; }
@keyframes fxIn { from { transform: translateX(24px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .fx-drawer { animation: none; } }
@media (max-width: 1060px) { .fx-cols[style*="minmax(0,1fr) minmax(0,1fr)"] { grid-template-columns: minmax(0, 1fr) !important; } }
.fx-seg button { white-space: nowrap; }
.fx-client-shell .tabs { gap: 18px; padding: 0 18px; }
.fx-client-shell .tab { font-size: 13.5px; }
@media (max-width: 1360px) { .fx-client-shell .tab svg { display: none; } }
.fx-tiles5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } @media (max-width: 1280px) { .fx-tiles5 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } @media (max-width: 700px) { .fx-tiles5 { grid-template-columns: minmax(0, 1fr) !important; } }
/* v10.7.0 · Setup to frame 38 */
.fx-setupcols { grid-template-columns: minmax(0, 1fr) 380px; }
.fx-setupcard .fld { margin-top: 6px; }
.fx-setupcard .grid3 { grid-template-columns: minmax(0, 1fr); }
.fx-setupcard .kwbar { flex-direction: column; align-items: stretch; }
.fx-setupcard textarea#s_kw { min-height: 110px; }
.fx-wstats4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fx-btnrow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 !important; }
@media (max-width: 1060px) { .fx-setupcols { grid-template-columns: minmax(0, 1fr); } .fx-wstats4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── v10.7.0 · onboarding stepper + Live mode to Figma 34 / 35 (restyles ONB_CSS, which loads later: hence "html ." specificity) ── */
html body>#onbOv.onb-ov, html .onb-ov { background: rgba(10, 8, 7, .78); }
html .onb { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); font-family: var(--font); }
html .onb:not(.mtg) { width: min(1180px, calc(100vw - 32px)); height: min(860px, calc(100vh - 32px)); }
html .onb-head { padding: 18px 24px; border-bottom: 1px solid var(--line); gap: 14px; background: var(--surface); }
html .onb-head h2 { font: 700 17px/24px var(--font); letter-spacing: -.01em; }
html .onb-prog { font: 700 10.5px/14px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
html .onb-track { gap: 4px; } html .onb-track i { height: 5px; border-radius: 99px; background: var(--surface-3); }
html .onb-rail { width: 290px; flex: 0 0 290px; background: var(--surface); border-right: 1px solid var(--line); padding: 18px 14px; }
html .onb-ph { border-left: 3px solid var(--c, var(--muted)); padding: 4px 0 4px 12px; margin: 0 0 14px; border-radius: 0; }
html .onb-ph[data-ph="before"] { --c: var(--blue); } html .onb-ph[data-ph="oncall"] { --c: var(--orange); } html .onb-ph[data-ph="after"] { --c: var(--green); }
html .onb-ph>div { font: 700 13px var(--font); color: var(--text); }
html .onb-ph>div i { background: var(--c) !important; }
html .onb-ph>div small { font: 500 11.5px var(--font); color: var(--muted); }
html .onb-steps li { border-radius: 10px; padding: 7px 8px; font: 600 13px/18px var(--font); color: var(--muted); }
html .onb-steps li:hover { background: var(--surface-2); color: var(--text); }
html .onb-steps li.cur { background: var(--surface-3); color: var(--text); }
html .onb-steps li .n { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--subtle); background: transparent; color: var(--muted); font: 700 11px var(--font); }
html .onb-steps li.cur .n { border-color: var(--c, var(--blue)); color: var(--text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, var(--blue)) 22%, transparent); }
html .onb-ph[data-ph] .onb-steps li.done .n { background: var(--c); border-color: var(--c); color: #fff; }
html .onb-steps li.skip .n { border: 1.5px dashed var(--yellow); color: var(--yellow); background: transparent; }
html .onb-steps li .fl { font: 700 10px var(--mono); letter-spacing: .06em; text-transform: lowercase; color: var(--violet); background: none; }
html .onb-steps li .fl.gate { color: var(--yellow); }
html .onb-pane { padding: 26px 30px; }
html .onb-title h3 { font: 800 30px/38px var(--font); letter-spacing: -.02em; }
html .onb-who { font: 700 10.5px/14px var(--mono); letter-spacing: .08em; text-transform: uppercase; border-radius: 99px; padding: 4px 10px; background: color-mix(in srgb, var(--orange) 14%, transparent); color: var(--orange); border: 0; }
html .onb-lede { font: 500 14.5px/22px var(--font); color: var(--muted); }
html .onb fieldset { background: transparent; border: 0; padding: 0; margin: 14px 0; }
html .onb legend { font: 700 10.5px/14px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 0 0 8px; }
html .onb-gate { border-radius: 14px; border: 1px solid color-mix(in srgb, var(--yellow) 45%, var(--line)); background: color-mix(in srgb, var(--yellow) 8%, var(--surface)); }
html .onb-ready li { background: var(--surface-2); border-radius: 12px; border: 0; margin-bottom: 6px; padding: 10px 14px; }
html .onb-st { border-radius: 12px; }
html .onb-st[data-s="ok"] { border-color: color-mix(in srgb, var(--green) 50%, var(--line)); background: color-mix(in srgb, var(--green) 8%, var(--surface)); }
html .onb-tbl td { border-color: var(--line); } html .onb-tbl td.pos { font-weight: 800; }
html .onb-card, html .onb-svc-card, html .onb-way { background: var(--surface-2); border: 1px solid var(--line); border-radius: 16px; }
html .onb-way.on { border-color: var(--acid); }
html .onb-chip { border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line); font-family: var(--font); }
html .onb-chip.on { background: color-mix(in srgb, var(--acid) 14%, transparent); border-color: var(--acid); color: var(--acid); }
html .onb-foot { padding: 14px 24px; border-top: 1px solid var(--line); background: var(--surface); }
html .onb-foot .sv { font: 500 12px var(--font); color: var(--muted); }
/* Live mode (35): full screen, big type, LIVE badge, only on-call steps as pills */
html .onb-ov.live { background: var(--bg); }
html .onb-ov.live .onb { width: 100vw; height: 100vh; border-radius: 0; border: 0; box-shadow: none; background: var(--bg); }
html .onb-ov.live .onb-head { background: var(--bg); border-bottom: 0; padding: 18px 32px; }
html .onb-ov.live .onb-rail { background: transparent; }
html .onb-ov.live .onb-steps li { border-radius: 99px; border: 1px solid var(--line); background: var(--surface); padding: 6px 14px; }
html .onb-ov.live .onb-steps li.cur { border-color: var(--orange); background: color-mix(in srgb, var(--orange) 14%, transparent); color: var(--orange); }
html .onb-ov.live .onb-pane { padding: 16px 32px 28px; }
html .onb-ov.live .onb-title h3 { font: 800 48px/56px var(--font); letter-spacing: -.02em; }
html .onb-ov.live .onb-lede { font: 500 18px/27px var(--font); }
html .onb-ov.live .onb-svc-card, html .onb-ov.live .onb-card { background: var(--surface); border-radius: 20px; }
html .onb-ov.live .onb-foot { background: var(--surface); border-top: 1px solid var(--line); margin: 0 24px 18px; border-radius: 16px; }
html .onb-live-badge { background: color-mix(in srgb, var(--red) 18%, transparent); color: var(--red); border-radius: 99px; font: 700 10.5px/14px var(--mono); letter-spacing: .08em; }
html .onb-live-badge i { background: var(--red); }
html .onb-staff { background: color-mix(in srgb, var(--violet) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--violet) 40%, var(--line)); border-radius: 12px; }

/* ── v10.8.0 · open task (Figma 04 / 33) ── */
.ot-flow { display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; }
.ot-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.ot-step { display: flex; gap: 8px; align-items: flex-start; padding: 10px; border-radius: 12px; background: var(--surface-2); border: 1px solid transparent; min-width: 0; }
.ot-step b { display: block; font: 700 13px/17px var(--font); } .ot-step small { display: block; font: 500 11.5px/15px var(--font); color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.ot-dot { width: 24px; height: 24px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; font: 800 11px var(--font); border: 1.5px solid var(--subtle); color: var(--muted); }
.ot-step.done .ot-dot { background: var(--green); border-color: var(--green); color: #fff; }
.ot-step.now { border-color: color-mix(in srgb, var(--orange) 55%, transparent); background: color-mix(in srgb, var(--orange) 9%, var(--surface-2)); }
.ot-step.now .ot-dot { border-color: var(--orange); color: var(--orange); }
.ot-step.changes { border-color: color-mix(in srgb, var(--pink) 55%, transparent); } .ot-step.changes .ot-dot { border-color: var(--pink); color: var(--pink); }
.ot-banner { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--violet) 45%, var(--line)); background: color-mix(in srgb, var(--violet) 9%, var(--surface)); }
.ot-banner b { display: block; } .ot-banner small { color: var(--muted); }
.ot-ed { display: flex; flex-direction: column; gap: 10px; }
.ot-tabs { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.ot-tabs > button { border: 0; background: none; color: var(--muted); font: 700 13px var(--font); padding: 6px 10px; border-radius: 8px; cursor: pointer; }
.ot-tabs > button.on { background: var(--surface-3); color: var(--text); }
.ot-ver { margin-left: auto; } .ot-ver select { width: auto; margin: 0; padding: 6px 10px; font-size: 12px; }
.ot-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.ot-tools { display: flex; gap: 4px; } .ot-tools button { border: 1px solid var(--line); background: var(--surface-2); color: var(--text); border-radius: 8px; padding: 4px 9px; cursor: pointer; font: 700 12px var(--font); }
.ot-text { min-height: 320px; font: 500 14.5px/23px var(--font); resize: vertical; margin: 0; }
.ot-diff { background: var(--surface-2); border-radius: 12px; padding: 14px 16px; font: 500 14.5px/23px var(--font); max-height: 520px; overflow: auto; }
.ot-diff p { margin: 0 0 12px; }
.ot-diff ins, .ot-sug ins { background: color-mix(in srgb, var(--green) 20%, transparent); color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.ot-diff del, .ot-sug del { background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--red); }
.ot-sugs { display: flex; flex-direction: column; gap: 6px; }
.ot-sug { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; padding: 10px 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--violet) 40%, var(--line)); background: color-mix(in srgb, var(--violet) 7%, var(--surface-2)); }
.ot-sug small { display: block; color: var(--muted); margin-top: 2px; } .ot-sug > span { display: flex; gap: 6px; flex: 0 0 auto; }
.ot-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 10px; }
.ot-acts { display: flex; gap: 8px; flex-wrap: wrap; } .ot-acts a { text-decoration: none; }
.ot-old { background: var(--surface-2); border-radius: 12px; padding: 12px; } .ot-old pre { white-space: pre-wrap; font: 500 13px/20px var(--font); max-height: 260px; overflow: auto; }
.ot-handoff { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 14px; border: 1px dashed color-mix(in srgb, var(--orange) 55%, var(--line)); }
.ot-decide { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.ot-dbtns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ot-checks .ot-chk { display: grid; grid-template-columns: 18px 1fr auto; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); font: 500 13px var(--font); }
@media (max-width: 900px) { .ot-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* v10.9.0 · open-task extras */
.ot-tools { flex-wrap: wrap; align-items: center; }
.ot-ai { position: relative; }
.ot-aibtn { background: color-mix(in srgb, var(--violet) 16%, transparent) !important; color: var(--violet) !important; border-color: color-mix(in srgb, var(--violet) 45%, transparent) !important; }
.ot-aipop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 280px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 6px; display: flex; flex-direction: column; }
.ot-aipop button { text-align: left; border: 0; background: none; color: var(--text); font: 600 13px var(--font); padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.ot-aipop button:hover { background: var(--surface-2); } .ot-aipop small { color: var(--muted); padding: 6px 10px; font: 500 11.5px/16px var(--font); }
.ot-aiout { border: 1px solid color-mix(in srgb, var(--violet) 45%, var(--line)); }
.ot-notes { margin: 4px 0 6px; padding-left: 18px; font: 500 12.5px/18px var(--font); color: var(--muted); }
.pk-boost { border: 0; background: none; color: var(--muted); font: 700 11.5px var(--font); cursor: pointer; padding: 2px 0; margin-top: 2px; }
.pk-boost.on { color: var(--orange); }
.ot-timebtns { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
#otTime { display: flex; flex-direction: column; gap: 8px; }
/* v10.10.0 · admin pages */
.fx-attgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.fx-att { --c: var(--orange); display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--c) 40%, var(--line)); background: color-mix(in srgb, var(--c) 7%, var(--surface)); }
.fx-att b { font: 700 15px/20px var(--font); } .fx-att span { font: 500 12.5px/18px var(--font); color: var(--muted); }
.fx-att a { margin-top: auto; color: var(--c); font: 700 13px var(--font); text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.fx-brandeds .card { margin-top: 14px; }
.fx-adminmode .fx-phead h1 .fx-pill { vertical-align: middle; }
/* v10.11.0 · pop-up forms (P01 …) */
.fx-form { display: flex; flex-direction: column; gap: 6px; }
.fx-form .fld { margin: 8px 0 2px; }
.fx-form input, .fx-form select, .fx-form textarea { margin: 0; }
.fx-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .fx-3col { display: grid; grid-template-columns: auto 1fr 1fr; gap: 12px; align-items: end; }
.fx-chipbtn.o { background: color-mix(in srgb, var(--orange) 16%, transparent); color: var(--orange); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--orange) 55%, transparent); }
.fx-plannote { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 13px; }
.fx-plannote .fx-ring { width: 16px; height: 16px; border-radius: 5px; }
@media (max-width: 700px) { .fx-2col, .fx-3col { grid-template-columns: 1fr; } }
/* v10.11.0 · Home My work (Figma 01) + to-do rows */
.fx-mwtabs { align-self: flex-start; flex-wrap: wrap; }
.fx-mwtabs button.on { background: var(--text); color: var(--bg); }
.fx-addrow { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); flex-wrap: wrap; }
.fx-addrow > svg { color: var(--muted); }
.fx-addrow > input { flex: 1 1 220px; border: 0; background: transparent; margin: 0; padding: 8px 4px; }
.fx-addopt { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 10px; padding: 0 8px; background: var(--surface); color: var(--muted); font: 600 12px var(--font); }
.fx-addopt input, .fx-addopt select { border: 0; background: transparent; margin: 0; padding: 8px 2px; width: auto; font-size: 12px; }
.fx-addrow .btn { padding: 8px 18px; }
.fx-todos { display: flex; flex-direction: column; gap: 8px; }
.fx-todo .fx-tick { width: 20px !important; height: 20px; border-radius: 50%; accent-color: var(--green); flex: 0 0 auto; }
.fx-todo.done .tt { text-decoration: line-through; opacity: .6; }
.fx-cdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.fx-iconbtn.sm.on { color: var(--violet); }
.fx-donewk summary { cursor: pointer; font: 600 12.5px var(--font); color: var(--muted); padding: 6px 0; }
.fx-more2 { color: var(--muted); text-decoration: none; display: inline-block; margin-top: 6px; }

/* ── v10.11.0 · Tasks tab + package + open task to Figma 03 / 04 (restyles TK_CSS, injected later → "html ." specificity) ── */
html .fx-tkcols { grid-template-columns: minmax(0, 1fr) 340px; }
html .tk2 { background: transparent; border: 0; }
html .tk-head { padding: 0 0 10px; border: 0; background: none; }
html .tk-head h3 { font: 800 22px/28px var(--font); letter-spacing: -.02em; } html .tk-head h3 i { color: var(--acid); font-style: normal; }
html .tk-month { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 18px 20px; gap: 14px 18px; margin: 0 0 14px; }
html .tk-month .lbl { font: 700 10.5px/14px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
html .tk-meter { font: 600 13px var(--font); color: var(--text); gap: 10px; }
html .tk-meter b { font: 800 18px var(--font); }
html .tk-meter .bar { height: 8px; border-radius: 99px; background: var(--surface-3); min-width: 220px; }
html .tk-meter .bar i { border-radius: 99px; background: var(--orange); }
html .tk-meter[data-s=over] .bar i { background: var(--red); } html .tk-meter[data-s=near] .bar i { background: var(--yellow); }
html .tk-bar { background: none; border: 0; padding: 0 0 12px; gap: 10px; }
html .tk-bar input[type=search] { background: var(--surface); border-radius: 12px; padding: 10px 14px; }
html .wk-mode { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
html .wk-mode button { border: 0; border-radius: 9px; padding: 7px 14px; font: 700 12.5px var(--font); color: var(--muted); background: none; }
html .wk-mode button.on { background: var(--text); color: var(--bg); }
html .pk { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 20px; }
html .pk-head h2, html .pk-task h2 { font: 800 20px/26px var(--font); letter-spacing: -.01em; }
html .pk-tag { border-radius: 8px; font: 700 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; background: color-mix(in srgb, var(--orange) 16%, transparent); color: var(--orange); border: 0; padding: 3px 8px; }
html .pk-facts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
html .pk-facts > div { background: var(--surface-2); border-radius: 12px; padding: 10px 12px; min-width: 0; }
html .pk-facts .lab, html .pk-lab { font: 700 10.5px/14px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
html .pk-segs i { height: 6px; border-radius: 99px; }
html .pk-views { display: inline-flex; gap: 4px; padding: 4px; border-radius: 10px; background: var(--surface-2); }
html .pk-views button { border: 0; border-radius: 8px; font: 700 12px var(--font); padding: 6px 12px; }
html .pk-views button.on { background: var(--surface-3); color: var(--text); }
html .pk-grp { font: 700 10.5px/14px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--orange); margin: 14px 0 8px; }
html .pk-row { background: var(--surface-2); border: 0; border-radius: 12px; padding: 10px 14px; margin-bottom: 8px; }
html .pk-row .t b { font: 600 14px/20px var(--font); } html .pk-row .t small { font: 500 12px var(--font); color: var(--muted); }
html .pk-row .st { font: 700 11.5px var(--font); border-radius: 99px; padding: 3px 10px; background: color-mix(in srgb, var(--violet) 14%, transparent); color: var(--violet); }
html .pk-row.done .st { background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); }
html .pk-open { border-radius: 9px; font: 700 12px var(--font); }
html .pk-all { border-radius: 12px; background: color-mix(in srgb, var(--green) 8%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--green) 35%, var(--line)); }
html .pk-back { font: 600 13px var(--font); color: var(--muted); }
html .pk-bar { height: 6px; border-radius: 99px; background: var(--surface-3); } html .pk-bar i { border-radius: 99px; background: var(--orange); }
html .pk-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; }
html .pk-cols2 { gap: 20px; } html .pk-side { gap: 14px; }
html .pk-note { border-radius: 12px; } html .pk-note.ev { opacity: .8; }
html .pk-appr button { border-radius: 10px; }
/* rail cards */
.fx-rk3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fx-rk3 > div { border-radius: 12px; padding: 10px; background: color-mix(in srgb, var(--c) 10%, var(--surface-2)); }
.fx-rk3 b { display: block; font: 800 22px var(--font); color: var(--c); } .fx-rk3 span { font: 600 12px var(--font); color: var(--muted); }
.fx-railink { font: 600 12.5px var(--font); color: var(--muted); text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.fx-qgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fx-qa { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px; border-radius: 12px; border: 0; background: var(--surface-2); color: var(--c); cursor: pointer; text-align: left; }
.fx-qa b { color: var(--text); font: 700 13px var(--font); } .fx-qa span { color: var(--muted); font: 500 11.5px var(--font); }
@media (max-width: 1200px) { html .fx-tkcols { grid-template-columns: minmax(0, 1fr); } html .pk-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ════════════════════════════════════════════════════════════════════════════
   v10.12.0 · design fidelity, round 2 (Joe, 5 Nov: "not all these designs have
   pulled through … go through the forge and make the necessary adjustments")
   ════════════════════════════════════════════════════════════════════════════ */
/* Overview: the header's onboarding strip already says "step x of 12 · Continue"; don't repeat it under the content */
.fx-client-shell:has(#onbPill:not(:empty)) ~ #tabBody #onbResume { display: none; }
#clientDash[data-mode="ov"] { display: flex; flex-direction: column; gap: 24px; }
#clientDash[data-mode="ov"]:empty, #onboardCard:empty { display: none; }

/* ── Tasks tab · package list to Figma 03 (Item Row) ─────────────────────── */
html .pk-cols { display: none !important; } /* the frame has no column header; time/due fold into the sub line */
html .pk-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto auto; gap: 12px; align-items: center;
  background: var(--surface-2); border: 0; border-radius: 12px; padding: 11px 14px; margin: 0 0 8px; }
html .pk-row .n { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--surface-3); display: grid; place-items: center; font-size: 0; color: #fff; }
html .pk-row.done .n { background: var(--green); border-color: var(--green); }
html .pk-row .n svg { width: 13px; height: 13px; stroke-width: 3; }
html .pk-row .t { min-width: 0; }
html .pk-row .t b { display: block; font: 600 14px/20px var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html .pk-row .t small { display: block; font: 500 12px/16px var(--font); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html .pk-row .t .pk-short { white-space: normal; }
html .pk-row.done .t b { text-decoration: none; color: var(--text); }
html .pk-row .who { gap: 0; } html .pk-row .who > span:not(.pk-av) { display: none; }
html .pk-row .tm { display: none; }
html .pk-row .st { --c: var(--muted); font: 700 11.5px/16px var(--font); border-radius: 99px; padding: 3px 10px; white-space: nowrap;
  background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c) !important; }
html .pk-row.done .st { --c: var(--green); }
html .pk-row .ac { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
html .pk-row .ac select { width: 104px; padding: 6px 8px; font-size: 12px; border-radius: 9px; background: var(--surface); }
html .pk-row .ac .pk-open { padding: 6px 14px; border-radius: 9px; background: var(--surface); border: 1px solid var(--line); color: var(--text); }
html .pk-row:not(.done) .ac .pk-open { background: var(--orange); border-color: var(--orange); color: #fff; }
html .pk-sgrp { font: 700 10.5px/14px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--orange); margin: 16px 0 8px; display: flex; align-items: center; gap: 8px; }
html .pk-sgrp::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
html .pk-sgrp.done { color: var(--green); }
html .pk-lhead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 16px 0 4px; }
html .pk-lhead > b { display: none; }
html .pk-lact { margin-left: auto; display: flex; gap: 8px; align-items: center; }
html .pk-allwrap { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 10px; padding: 0 4px 0 10px; color: var(--muted); background: var(--surface); }
html .pk-allwrap select.pk-all { border: 0; background: transparent; padding: 7px 4px; font: 600 12.5px var(--font); color: var(--text); width: auto; }
html .pk-acts { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding: 12px 14px; border-radius: 12px;
  background: color-mix(in srgb, var(--green) 8%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--green) 30%, var(--line)); }
html .pk-acts > div { display: flex; align-items: center; gap: 10px; }
html .pk-acts small { font: 500 12.5px var(--font); color: var(--muted); }
html .pk-actic { color: var(--green); display: inline-flex; }
html .pk-acts .btn { background: var(--green); border-color: var(--green); color: #fff; }
html .pk-facts { grid-template-columns: 1.3fr 1fr .8fr .9fr 1.1fr; }
html .pk-facts > div { min-height: 70px; }
html .pk-facts small select { max-width: 100%; }
/* the Tasks rail's to-do composer: text on its own line, options in one row (rail is 372 wide) */
#fxTkRail .fx-addrow > input { flex-basis: 100%; }
#fxTkRail .fx-addopt { flex: 1 1 0; min-width: 0; }
#fxTkRail .fx-addopt select, #fxTkRail .fx-addopt input { min-width: 0; width: 100%; }
#fxTkRail .fx-addrow .btn { flex: 0 0 auto; }
/* Tasks month strip (Figma 03 month card): eyebrow, big hours, bar, free pill, suggestions callout */
html .tk-month { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; padding: 18px 20px; }
html .tk-month .lbl { flex: 0 0 100%; }
html .tk-meter { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; font: 600 13px var(--font); color: var(--muted); }
html .tk-meter > b:first-of-type { font: 800 30px/36px var(--font); letter-spacing: -.02em; color: var(--text); }
html .tk-meter .bar { flex: 1 1 260px; min-width: 200px; }
html .tk-meter .muted { font: 700 11.5px var(--font); color: var(--orange); background: color-mix(in srgb, var(--orange) 14%, transparent); padding: 3px 10px; border-radius: 99px; }
html .tk-meter[data-s=over] > b:last-child { font: 700 11.5px var(--font); color: var(--red); background: color-mix(in srgb, var(--red) 14%, transparent); padding: 3px 10px; border-radius: 99px; }
html .tk-mnote { display: inline-flex; align-items: center; gap: 12px; margin-left: auto; }
.tk-sugg { display: inline-flex; align-items: center; gap: 10px; text-align: left; cursor: pointer; padding: 8px 14px; border-radius: 12px; color: var(--text);
  background: color-mix(in srgb, var(--violet) 12%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--violet) 45%, transparent); }
.tk-sugg > span:first-child { color: var(--violet); display: inline-flex; }
.tk-sugg b { display: block; font: 700 13px/17px var(--font); } .tk-sugg small { display: block; font: 500 11px/14px var(--font); color: var(--muted); }
html .pk-row:not(.done) .ac .pk-open { color: #fff !important; }
/* v10.12.0: the rail scrolls; "Onboard a client" + the user card stay pinned at the bottom (Figma 01) */
.fx-side-foot { position: sticky; bottom: -16px; margin-bottom: -16px; padding-bottom: 16px; background: var(--surface); z-index: 2; box-shadow: 0 -14px 18px -6px var(--surface); }

/* ── Reports tab (Figma 07) ──────────────────────────────────────────────── */
.fx-page { display: flex; flex-direction: column; gap: 24px; }
.fx-chip.big { width: 52px; height: 52px; border-radius: 14px; }
.fx-closehero { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; padding: 24px 26px; border-radius: 24px;
  background: linear-gradient(110deg, color-mix(in srgb, var(--yellow) 22%, var(--surface)) 0%, var(--surface) 75%);
  border: 1px solid color-mix(in srgb, var(--yellow) 35%, var(--line)); }
.fx-closehero .grow { flex: 1; min-width: 280px; display: flex; flex-direction: column; gap: 6px; }
.fx-closehero h2 { margin: 0; font: 800 28px/36px var(--font); letter-spacing: -.02em; }
.fx-closehero p { margin: 0; font: 500 14px/20px var(--font); color: var(--muted); max-width: 620px; }
.fx-rsteps { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.fx-rstep { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 99px; font: 700 12px var(--font); color: var(--muted); border: 1px solid var(--line); background: var(--surface-2); }
.fx-rstep i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--subtle); }
.fx-rstep.on { color: var(--green); border-color: color-mix(in srgb, var(--green) 45%, transparent); background: color-mix(in srgb, var(--green) 12%, transparent); }
.fx-closeact { display: flex; flex-direction: column; gap: 8px; align-items: stretch; min-width: 250px; }
.fx-closeact .fx-sbtn { justify-content: center; display: inline-flex; align-items: center; gap: 6px; }
.fx-rep { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; background: var(--surface-2); border-radius: 14px; padding: 12px 14px; }
.fx-rep .grow { flex: 1; min-width: 200px; }
.fx-rep .tt { font: 700 14px/20px var(--font); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fx-rep .mt { font: 500 12px/16px var(--font); color: var(--muted); overflow-wrap: anywhere; }
.fx-repact { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.fx-repact .fx-sbtn { display: inline-flex; align-items: center; gap: 5px; }
.fx-pdf { width: 40px; height: 40px; border-radius: 10px; flex: 0 0 auto; display: grid; place-items: center; font: 800 10px var(--font); letter-spacing: .04em;
  color: var(--red); background: color-mix(in srgb, var(--red) 14%, transparent); }
.fx-pdf.doc { color: var(--blue); background: color-mix(in srgb, var(--blue) 14%, transparent); }
.fx-linkrow { text-decoration: none; color: inherit; cursor: pointer; }
.fx-linkrow:hover { box-shadow: inset 0 0 0 1px var(--line); }
.fx-linkrow > svg { color: var(--muted); }
.fx-score { --c: var(--green); --p: 75%; width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center;
  background: radial-gradient(closest-side, var(--surface-2) 78%, transparent 80% 100%), conic-gradient(var(--c) var(--p), var(--surface-3) 0); }
.fx-score b { font: 800 12px var(--font); color: var(--text); }
.fx-rk { --c: var(--green); font: 700 11.5px var(--font); padding: 2px 8px; border-radius: 99px; background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); }
.fx-note2 { display: flex; gap: 8px; align-items: center; font: 500 12px/16px var(--font); color: var(--muted); background: var(--surface-2); border-radius: 12px; padding: 9px 12px; }
.fx-hrs { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; }
.fx-tint { --c: var(--orange); background: color-mix(in srgb, var(--c) 8%, var(--surface)); border-color: color-mix(in srgb, var(--c) 40%, var(--line)); }

/* ── Keywords & rankings (Figma 05) ───────────────────────────────────────── */
.fx-kwban { flex-direction: row !important; align-items: center; flex-wrap: wrap; }
.fx-kwban .grow { flex: 1; min-width: 240px; }
.fx-kwban h3 { margin: 0; font: 700 17px/24px var(--font); }
.fx-kwban .sub { font: 500 12px/16px var(--font); color: var(--muted); }
.fx-kwstats { display: flex; gap: 8px; }
.fx-kwstats > div { --c: var(--green); min-width: 74px; padding: 8px 12px; border-radius: 12px; text-align: center; background: color-mix(in srgb, var(--c) 12%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); }
.fx-kwstats b { display: block; font: 800 20px/24px var(--font); color: var(--c); } .fx-kwstats span { font: 600 11px var(--font); color: var(--muted); }
.fx-kwhead, .fx-kwrow { display: grid !important; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 70px 80px 70px 28px; gap: 10px; align-items: center; }
.fx-kwhead { font: 700 10.5px/14px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 0 12px; }
.fx-kwrow { background: var(--surface-2); border: 0 !important; border-radius: 12px; padding: 8px 12px !important; margin-bottom: 6px; }
.fx-kwrow label { display: flex; align-items: center; gap: 10px; min-width: 0; cursor: pointer; }
.fx-kwrow label input { width: 15px; height: 15px; margin: 0; accent-color: var(--orange); flex: 0 0 auto; }
.fx-kwrow .kw { font: 600 13.5px/18px var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-kwrow .pg { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 500 12px var(--font); }
.fx-kwrow .pg a { color: var(--muted); text-decoration: none; } .fx-kwrow .pg a:hover { color: var(--text); }
.fx-kwrow .dt { font: 500 11.5px var(--font); color: var(--muted); white-space: nowrap; }
.fx-rk { --c: var(--green); display: inline-block; min-width: 28px; text-align: center; font: 700 11.5px/16px var(--font); padding: 2px 8px; border-radius: 99px; background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); white-space: nowrap; }
.fx-rk.none { --c: var(--subtle); background: transparent; }
.fx-delta { font: 700 11.5px var(--font); white-space: nowrap; } .fx-delta.up { color: var(--green); } .fx-delta.down { color: var(--red); }
.fx-rklegend { display: flex; gap: 14px; flex-wrap: wrap; font: 500 11.5px var(--font); color: var(--muted); }
.fx-rklegend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }
.fx-kv { display: flex; justify-content: space-between; gap: 12px; background: var(--surface-2); border-radius: 12px; padding: 10px 12px; font: 500 12.5px var(--font); color: var(--muted); }
.fx-kv b { color: var(--text); font-weight: 600; text-align: right; }
.fx-kwchips { display: flex; gap: 6px; flex-wrap: wrap; }
.fx-kwchip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line); font: 600 12px var(--font); color: var(--muted); }
.fx-kwchip a { color: var(--orange); text-decoration: none; font-weight: 800; }
.fx-vol { display: inline-flex; align-items: center; gap: 8px; } .fx-vol i { height: 6px; border-radius: 99px; background: var(--orange); display: inline-block; }
.fx-opp td { white-space: normal; vertical-align: middle; }
#clientDash[data-mode="kw"] { display: flex; flex-direction: column; gap: 24px; }
/* official grid as a design card */
#clientDash[data-mode="kw"] #offGrid { border-radius: 20px; padding: 20px; overflow-x: auto; }
#clientDash[data-mode="kw"] #offGrid .og { border-collapse: separate; border-spacing: 0 4px; font: 500 12.5px var(--font); }
#clientDash[data-mode="kw"] #offGrid .og th { font: 700 10.5px/14px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border: 0; }
#clientDash[data-mode="kw"] #offGrid .og td { border: 0; background: var(--surface-2); }
#clientDash[data-mode="kw"] #offGrid .og td:first-child { border-radius: 10px 0 0 10px; padding-left: 12px; }
#clientDash[data-mode="kw"] #offGrid .og td:last-child { border-radius: 0 10px 10px 0; }
#clientDash[data-mode="kw"] #offGrid .og .og-k { background: var(--surface-2); font-weight: 600; }
@media (max-width: 1100px) { .fx-kwhead { display: none !important; } .fx-kwrow { grid-template-columns: minmax(0, 1fr) auto auto 28px; } .fx-kwrow .pg, .fx-kwrow .dt { display: none; } }
.fx-clip8 tbody tr:nth-child(n+9) { display: none; }
.fx-opp td:nth-child(3) .t-small { white-space: nowrap; }

/* ── Pages tab (Figma 06) ─────────────────────────────────────────────────── */
.fx-ptile .t-label { display: flex; align-items: center; gap: 6px; } .fx-ptile .t-label i { width: 7px; height: 7px; border-radius: 50%; }
.fx-pbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fx-wmonth { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font: 600 12px var(--font); color: var(--muted); }
.fx-wmonth input { padding: 6px 10px; font-size: 12px; width: auto; margin: 0; }
.fx-phead2, .fx-prow { display: grid; grid-template-columns: 22px minmax(0, 1.25fr) minmax(0, 1fr) 128px 46px auto; gap: 12px; align-items: center; }
.fx-phead2 { font: 700 10.5px/14px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 0 14px; }
.fx-prow { background: var(--surface-2); border-radius: 12px; padding: 9px 14px; }
.fx-prow + .fx-prow { margin-top: 6px; }
.fx-prow .ck input { width: 16px; height: 16px; margin: 0; accent-color: var(--orange); }
.fx-prow .pth { min-width: 0; display: flex; align-items: center; gap: 6px; }
.fx-prow .pth b { font: 600 13.5px/18px var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-prow .kws { display: flex; gap: 4px; flex-wrap: wrap; min-width: 0; }
.fx-prow .ac { display: flex; gap: 4px; align-items: center; justify-content: flex-end; }
.fx-prow .more { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 10px; margin-top: 2px; }
.fx-prow.open { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--orange) 45%, transparent); }
.fx-pkw { display: inline-flex; align-items: center; gap: 4px; font: 600 11.5px/16px var(--font); padding: 2px 9px; border-radius: 99px; background: color-mix(in srgb, var(--orange) 14%, transparent); color: var(--orange); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-pkw small { color: var(--muted); font-weight: 500; } .fx-pkw.none { background: var(--surface-3); color: var(--muted); }
.fx-idxs { display: inline-flex; align-items: center; gap: 6px; font: 600 12px var(--font); white-space: nowrap; }
.fx-idxs i { width: 7px; height: 7px; border-radius: 50%; } .fx-idxs.ok { color: var(--muted); } .fx-idxs.ok i { background: var(--green); }
.fx-idxs.no { color: var(--red); } .fx-idxs.no i { background: var(--red); }
.fx-unm { display: flex; gap: 8px; flex-wrap: wrap; }
.fx-unmk { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); font: 600 12.5px var(--font); cursor: pointer; }
.fx-unmk input { margin: 0; accent-color: var(--orange); }
.fx-unmk.on { border-color: color-mix(in srgb, var(--orange) 60%, transparent); background: color-mix(in srgb, var(--orange) 10%, var(--surface-2)); }
#targetPanel .card, #addPagesBox .card { margin: 0; background: var(--surface-2); }
@media (max-width: 1100px) { .fx-phead2 { display: none; } .fx-prow { grid-template-columns: 22px minmax(0, 1fr) auto; } .fx-prow .kws, .fx-prow .ix, .fx-prow .sc { grid-column: 2 / -1; } }
/* the sidebar page navigator is replaced by the Pages tab (index status, Check indexing, "This page's tasks") */
#pageNav { display: none; }
.fx-prow .note:empty { display: none; }

/* ── AI visibility, with a sweep (Figma 1616:5214) ───────────────────────── */
.fx-aihero { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; padding: 24px 26px; border-radius: 24px; color: #fff;
  background: linear-gradient(110deg, #3B2A6B 0%, #2A2140 45%, #13403C 100%); border: 1px solid color-mix(in srgb, var(--violet) 40%, transparent); }
.fx-aihero .grow { flex: 1; min-width: 300px; display: flex; flex-direction: column; gap: 8px; }
.fx-aihero h2 { margin: 0; font: 800 28px/36px var(--font); letter-spacing: -.02em; color: #fff; }
.fx-aihero p { margin: 0; font: 500 13.5px/20px var(--font); color: rgba(255, 255, 255, .82); max-width: 640px; }
.fx-aimeta { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; font: 500 12px var(--font); color: rgba(255, 255, 255, .75); margin-left: auto; }
.fx-ai3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.fx-ai3:empty { display: none; }
.fx-ains { --c: var(--violet); border-radius: 20px; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; min-width: 0;
  background: color-mix(in srgb, var(--c) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--c) 40%, var(--line)); }
.fx-ains .t-label { display: flex; align-items: center; gap: 6px; color: var(--c); } .fx-ains b { font: 700 17px/24px var(--font); }
.fx-ains span { font: 500 12px/16px var(--font); color: var(--muted); overflow-wrap: anywhere; }
.fx-aitable .hd, .fx-aitable .rw { display: grid; grid-template-columns: minmax(0, 2.2fr) repeat(4, minmax(0, 1fr)) minmax(0, 1fr) 64px; gap: 10px; align-items: center; }
.fx-aitable .hd { font: 700 10.5px/14px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 0 14px 6px; }
.fx-aitable .rw { background: var(--surface-2); border-radius: 14px; padding: 12px 14px; margin-bottom: 8px; border: 1px solid transparent; }
.fx-aitable .rw.lead { border-color: color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 8%, var(--surface-2)); }
.fx-aitable .en { display: flex; gap: 10px; align-items: center; min-width: 0; } .fx-aitable .en .fx-av { width: 32px; height: 32px; border-radius: 9px; }
.fx-aitable .en b { display: block; font: 700 13.5px/18px var(--font); } .fx-aitable .en small { display: block; font: 500 11px/14px var(--font); color: var(--muted); }
.fx-aicell { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .fx-aicell b { font: 700 14px/18px var(--font); }
.fx-aicell small { font: 500 11px/14px var(--font); color: var(--muted); } .fx-aicell.r { text-align: right; align-items: flex-end; }
.fx-aicell i { display: block; height: 5px; border-radius: 99px; background: linear-gradient(90deg, var(--c) var(--p), var(--surface-3) var(--p)); }
.fx-intent { display: inline-block; font: 700 9.5px/14px var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 1px 7px; border-radius: 6px; color: var(--muted); background: var(--surface-3); flex: 0 0 auto; }
.fx-intent.i-discovery { color: var(--teal); background: color-mix(in srgb, var(--teal) 14%, transparent); }
.fx-intent.i-comparison { color: var(--orange); background: color-mix(in srgb, var(--orange) 14%, transparent); }
.fx-intent.i-validation { color: var(--pink); background: color-mix(in srgb, var(--pink) 14%, transparent); }
.fx-aiprompt { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; background: var(--surface-2); border-radius: 12px; padding: 10px 14px; border: 1px solid transparent; }
.fx-aiprompt + .fx-aiprompt { margin-top: 6px; }
.fx-aiprompt.hit { border-color: color-mix(in srgb, var(--green) 50%, transparent); background: color-mix(in srgb, var(--green) 6%, var(--surface-2)); }
.fx-aiprompt .grow { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.fx-aiprompt .tt { font: 600 13px/18px var(--font); }
.fx-aiprompt .m { width: 110px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; } .fx-aiprompt .m small, .fx-aiprompt .r small { font: 500 11px var(--font); color: var(--muted); }
.fx-aiprompt .m i { flex: 0 0 100%; height: 4px; border-radius: 99px; background: linear-gradient(90deg, var(--green) var(--p), var(--surface-3) var(--p)); }
.fx-aiprompt .r { width: 80px; text-align: right; display: flex; flex-direction: column; }
.fx-defn { display: flex; gap: 10px; align-items: flex-start; } .fx-defn > svg { color: var(--green); margin-top: 2px; }
.fx-defn b { display: block; font: 700 13px/18px var(--font); } .fx-defn span { display: block; font: 500 12px/16px var(--font); color: var(--muted); }
@media (max-width: 1100px) { .fx-ai3 { grid-template-columns: minmax(0, 1fr); } .fx-aitable .hd { display: none; } .fx-aitable .rw { grid-template-columns: 1fr 1fr; } .fx-aitable .en { grid-column: 1 / -1; } }

/* ── Setup (Figma 10): section nav + one column of section cards + unsaved-changes bar ── */
.fx-setupwrap { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 24px; align-items: start; }
.fx-setupnav { position: sticky; top: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.fx-setupnav button { display: flex; align-items: center; gap: 10px; border: 0; background: none; color: var(--muted); font: 600 13px/18px var(--font); padding: 8px 10px; border-radius: 10px; cursor: pointer; text-align: left; }
.fx-setupnav button:hover { color: var(--text); background: var(--surface-2); }
.fx-setupnav button.on { color: var(--text); background: color-mix(in srgb, var(--orange) 13%, transparent); } .fx-setupnav button.on svg { color: var(--orange); }
.fx-setupnote { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; padding: 10px; border-top: 1px solid var(--line); font: 500 11.5px/16px var(--font); color: var(--muted); }
.fx-setupnote svg { flex: 0 0 auto; margin-top: 1px; }
#fxSetupL > section { scroll-margin-top: 16px; }
.fx-setupblock > label.fld { margin-top: 4px; }
.fx-setupblock input:not([type=checkbox]):not([type=radio]):not([type=file]), .fx-setupblock textarea, .fx-setupblock select { width: 100%; }
.fx-savebar { position: sticky; bottom: 16px; z-index: 30; margin-top: 20px; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px;
  background: color-mix(in srgb, var(--orange) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--orange) 50%, var(--line)); box-shadow: var(--shadow); }
.fx-savebar[hidden] { display: none; }
.fx-savebar i { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); flex: 0 0 auto; }
.fx-savebar span { flex: 1; font: 600 13px var(--font); }
@media (max-width: 1100px) { .fx-setupwrap { grid-template-columns: minmax(0, 1fr); } .fx-setupnav { position: static; flex-direction: row; flex-wrap: wrap; } .fx-setupnote { display: none; } }
.fx-setupwrap .fx-setupcard .grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fx-setupwrap .fx-setupcard .kwbar { flex-direction: row; flex-wrap: wrap; align-items: center; }
@media (max-width: 900px) { .fx-setupwrap .fx-setupcard .grid3 { grid-template-columns: minmax(0, 1fr); } }
.fx-setupwrap { grid-template-columns: 210px minmax(0, 1fr); }

/* ── the open task (Figma 04): a page of its own — no client header, month strip or Tasks rail while a task is open ── */
#main:has(.pk-task) .fx-client-shell { display: none; }
#main:has(.pk-task) #tabBody { margin-top: 0; }
#tabBody:has(.pk-task) .tk-head, #tabBody:has(.pk-task) #tkMonth, #tabBody:has(.pk-task) .tk-bar, #tabBody:has(.pk-task) #fxTkRail { display: none !important; }
#tabBody:has(.pk-task) .fx-tkcols { grid-template-columns: minmax(0, 1fr) !important; }
html .pk-task { display: flex; flex-direction: column; gap: 20px; }
.ot-head { gap: 12px !important; }
.ot-hrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ot-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ot-hrow .pk-follow { margin-left: auto; }
html .pk-task .ot-head h2 { font: 800 30px/38px var(--font); letter-spacing: -.02em; margin: 0; }
html .pk-task .pk-brief { border-radius: 14px; padding: 12px 16px; background: color-mix(in srgb, var(--orange) 8%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--orange) 40%, transparent); }
html .pk-task .pk-brief > span { font: 700 10.5px/14px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--orange); }
html .pk-task .pk-brief p { margin: 4px 0 0; font: 500 13.5px/20px var(--font); color: var(--text); }
.pk-task:has(#otHeadSteps .ot-steps) .pk-stages { display: none; }
#otHeadSteps .ot-steps { margin: 0; }
html .pk-task .pk-cols2 { display: grid; grid-template-columns: minmax(0, 1fr) var(--rail); gap: 24px; align-items: start; }
html .pk-task .pk-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
html .pk-task .pk-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; flex: none; }
html .pk-task .pk-card { border-radius: 20px; padding: 18px 20px; }
.ot-stagehd { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
html .pk-task .pk-stat { --c: var(--muted); font: 700 11.5px/16px var(--font); padding: 3px 10px; border-radius: 99px; background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c) !important; }
html .pk-task .pk-kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; font: 500 12.5px var(--font); background: none; border: 0; padding: 0; }
html .pk-task .pk-kv span { color: var(--muted); } html .pk-task .pk-kv b { text-align: right; font-weight: 600; }
#otTime:not(:empty) { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
#otChecksHost:empty { display: none; }
#otChecksHost .ot-checks { margin: 0; }
html .pk-task .pk-markdone { width: 100%; justify-content: center; }
@media (max-width: 1100px) { html .pk-task .pk-cols2 { grid-template-columns: minmax(0, 1fr); } }
html .pk.pk-task { background: none; border: 0; padding: 0; max-width: none; }
/* the Tasks tab's old outer frame: the frame (03/04) has separate cards, no box around them */
html .tk { border: 0; background: none; border-radius: 0; min-height: 0; overflow: visible; margin-top: 0; }
html .tk-month .tk-meter { flex: 1 1 440px; flex-wrap: nowrap; }
html .tk-month .tk-meter .bar { flex: 1 1 auto; min-width: 120px; }
html .tk-month .tk-mnote { margin-left: auto; flex: 0 0 auto; }
html .pk-allwrap { flex: 0 0 auto; } html .pk-allwrap select.pk-all { width: 130px !important; flex: none; }
html .pk-lhead .pk-views { flex: 0 0 auto; }

/* ── v10.13.0 · Setup › Contract & services (Figma 10) ───────────────────── */
.fx-ctiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.fx-ctile { background: var(--surface-2); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fx-ctile .t-label { display: flex; align-items: center; gap: 6px; }
.fx-ctile input { background: transparent !important; border: 0 !important; padding: 0 !important; font: 800 20px/26px var(--font) !important; letter-spacing: -.01em; color: var(--text); width: 100%; }
.fx-ctile input:focus { outline: none; box-shadow: 0 1px 0 var(--orange); }
.fx-cbig { font: 800 20px/26px var(--font); }
.fx-svcs { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.fx-svc { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid transparent; cursor: pointer; }
.fx-svc.on { border-color: color-mix(in srgb, var(--orange) 50%, transparent); background: color-mix(in srgb, var(--orange) 7%, var(--surface-2)); }
.fx-svc .fx-svcck { width: 17px; height: 17px; margin: 0; accent-color: var(--orange); flex: 0 0 auto; }
.fx-svc .nm { flex: 1; display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.fx-svc .nm b { font: 700 13.5px var(--font); } .fx-svc .nm small { font: 500 11.5px var(--font); color: var(--muted); }
.fx-svc .nm small.no { display: none; } .fx-svc:not(.on) .nm small.no { display: inline; } .fx-svc:not(.on) .nm b { color: var(--muted); }
.fx-svc .hv input { width: 70px !important; text-align: right; padding: 6px 8px; margin: 0; font-weight: 700; }
.fx-svc .hv + .t-small { margin: 0; }
#ctDocs { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.fx-cdochd { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.fx-cdrops { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fx-cdrop { --c: var(--orange); display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 20px 16px; border-radius: 14px; cursor: pointer;
  border: 1.5px dashed color-mix(in srgb, var(--c) 55%, var(--line)); background: color-mix(in srgb, var(--c) 6%, var(--surface-2)); }
.fx-cdrop b { font: 700 13.5px var(--font); } .fx-cdrop.drag { border-style: solid; background: color-mix(in srgb, var(--c) 14%, var(--surface-2)); }
.fx-cdoc { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; background: var(--surface-2); border-radius: 14px; padding: 12px 14px; }
.fx-cdoc .grow { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 4px; }
.fx-cdoc .tt { font: 700 13.5px var(--font); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .fx-cdoc .mt { font: 500 12px var(--font); color: var(--muted); }
.fx-cchk { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font: 500 12px/16px var(--font); padding: 8px 10px; border-radius: 10px; margin-top: 4px; }
.fx-cchk span { flex: 0 0 100%; color: var(--muted); } .fx-cchk small { color: var(--subtle); }
.fx-cchk.ok { color: var(--green); background: color-mix(in srgb, var(--green) 10%, transparent); }
.fx-cchk.bad { color: var(--yellow); background: color-mix(in srgb, var(--yellow) 10%, transparent); }
.fx-overrun { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; margin-top: 6px; background: color-mix(in srgb, var(--red) 9%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--red) 45%, transparent); }
.fx-overrun .grow { flex: 1; min-width: 0; } .fx-overrun b { display: block; font: 700 13.5px/18px var(--font); color: var(--text); } .fx-overrun span { display: block; font: 500 12px/16px var(--font); color: var(--muted); }
#ctOver:empty { display: none; }
@media (max-width: 800px) { .fx-ctiles, .fx-cdrops { grid-template-columns: minmax(0, 1fr); } }

/* ── v10.13.0 · admin shell sidebar (Figma 20–25): studio nav, ADMIN group, My workspace card; no client list ── */
.fx-ver .fx-vadm { display: none; }
.fx-adminmode .fx-ver .fx-vadm { display: inline; } .fx-adminmode .fx-ver #appVer { display: none; }
.fx-adminmode #fxSide > .fx-sec, .fx-adminmode #fxAddClient, .fx-adminmode #clientList, .fx-adminmode #pageNav, .fx-adminmode .fx-onb { display: none !important; }
.fx-adminmode .fx-nav .fx-admsec { display: flex; border-top: 0; padding: 16px 8px 6px; margin-top: 6px; }
.fx-wscard { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer; padding: 12px; border-radius: 14px; color: var(--text);
  border: 1px solid color-mix(in srgb, var(--orange) 45%, transparent); background: color-mix(in srgb, var(--orange) 12%, var(--surface)); }
.fx-wscard[hidden] { display: none; }
.fx-wscard .ic { width: 34px; height: 34px; border-radius: 10px; background: var(--orange); color: #fff; display: grid; place-items: center; flex: 0 0 auto; }
.fx-wscard b { display: block; font: 700 13.5px/18px var(--font); } .fx-wscard small { display: block; font: 500 11.5px/15px var(--font); color: var(--muted); }
.fx-wscard > span:nth-child(2) { flex: 1; } .fx-wscard .ar { color: var(--muted); display: inline-flex; }
.fx-teamrow { display: grid; grid-template-columns: 34px minmax(0, 1.3fr) minmax(0, 1fr) 70px auto; gap: 12px; align-items: center; background: var(--surface-2); border-radius: 12px; padding: 10px 14px; cursor: pointer; }
.fx-teamrow + .fx-teamrow, .fx-teamitems + .fx-teamrow { margin-top: 8px; }
.fx-teamrow .fx-av { width: 34px; height: 34px; border-radius: 50%; }
.fx-teamrow .who { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; } .fx-teamrow .who b { font: 700 13.5px var(--font); }
.fx-teamrow .who small { flex: 0 0 100%; font: 500 11.5px var(--font); color: var(--muted); } .fx-teamrow .n { font: 700 12.5px var(--font); text-align: right; }
.fx-teamrow.open { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--violet) 55%, transparent); }
.fx-teamitems { padding: 8px 0 4px 46px; display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 900px) { .fx-teamrow { grid-template-columns: 34px minmax(0, 1fr) auto; } .fx-teamrow .bar, .fx-teamrow .n { display: none; } }
.fx-brand .fx-ver .fx-vadm { text-decoration: none; cursor: inherit; }

/* ── v10.14.0 · Setup to Figma 10 (1587:3609), control by control ───────── */
.fx-setupblock { gap: 12px !important; }
.fx-setupblock .fx-fl { margin: 6px 0 -4px; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.fx-setupblock .fx-fl span { font: 500 11.5px var(--font); text-transform: none; letter-spacing: 0; color: var(--subtle); }
.fx-setupblock input:not([type=checkbox]):not([type=radio]):not([type=file]), .fx-setupblock textarea, .fx-setupblock select { margin: 0; border-radius: 12px; padding: 11px 14px; font-size: 13.5px; }
.fx-setupblock textarea { min-height: 70px; }
.fx-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.fx-2col > div { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.fx-inico { position: relative; } .fx-inico > svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.fx-setupblock .fx-inico input { padding-left: 40px !important; }
.fx-inbtn { display: flex; gap: 8px; align-items: center; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 4px 4px 4px 0; }
.fx-inbtn input { flex: 1; border: 0 !important; background: transparent !important; }
.fx-inbtn .fx-sbtn, .fx-inbtn button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; }
.fx-sbtn.danger { color: var(--red); } .fx-sbtn.fx-violet { color: var(--violet); border-color: color-mix(in srgb, var(--violet) 45%, var(--line)); }
.fx-sbtn.fx-up, label.fx-sbtn { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.fx-setupblock .fx-btnrow .fx-sbtn, .fx-scanrow .btn { display: inline-flex; align-items: center; gap: 6px; }
/* client details */
.fx-logo { display: flex; gap: 16px; align-items: center; }
.fx-logobox { width: 72px; height: 72px; border-radius: 18px; flex: 0 0 auto; position: relative; overflow: hidden; display: grid; place-items: center; background: var(--violet); color: #fff; font: 800 30px var(--font); }
.fx-logobox img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; padding: 6px; }
.fx-logotx { display: flex; flex-direction: column; gap: 6px; } .fx-logotx .fx-fl { margin: 0; }
.fx-branchseg { align-self: flex-start; } .fx-branchseg button.on { background: var(--text); color: var(--bg); }
.fx-brandcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.fx-brandcard { display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); cursor: pointer; }
.fx-brandcard .fx-av { width: 32px; height: 32px; border-radius: 9px; } .fx-brandcard .tx { flex: 1; min-width: 0; }
.fx-brandcard b { display: block; font: 700 13px/17px var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fx-brandcard small { display: block; font: 500 11.5px var(--font); color: var(--muted); } .fx-brandcard small.bad { color: var(--pink); }
.fx-brandcard .dot { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--subtle); flex: 0 0 auto; }
.fx-brandcard.on { border-color: var(--orange); background: color-mix(in srgb, var(--orange) 10%, var(--surface-2)); } .fx-brandcard.on .dot { border-color: var(--orange); background: radial-gradient(circle, var(--orange) 45%, transparent 50%); }
/* website & scan */
.fx-scanrow { align-items: center; } .fx-scancount { margin-left: auto; }
/* target keywords */
.fx-kwbar { display: flex; flex-direction: column; gap: 10px; } .fx-kwbar > div { display: flex; gap: 8px; flex-wrap: wrap; }
.fx-kwbar label { font: 600 12.5px var(--font); }
/* location */
.fx-geo { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: end; }
.fx-geo > div { display: flex; flex-direction: column; gap: 10px; } .fx-geo .ck { padding-bottom: 13px; } .fx-geo .ck input { width: 17px; height: 17px; accent-color: var(--teal); margin: 0; }
/* brief: expectations as check pills */
.fx-exp { display: flex; flex-wrap: wrap; gap: 8px; }
.fx-exp label { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; font: 600 12.5px var(--font); cursor: pointer; border: 1px solid var(--line); background: var(--surface-2); color: var(--muted); }
.fx-exp label input { width: 14px; height: 14px; margin: 0; accent-color: var(--violet); }
.fx-exp label.on { color: var(--text); border-color: color-mix(in srgb, var(--violet) 55%, transparent); background: color-mix(in srgb, var(--violet) 14%, transparent); }
/* questionnaire */
.fx-qban { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; font: 600 13px var(--font); background: var(--surface-2); border: 1px solid var(--line); }
.fx-qban i { width: 8px; height: 8px; border-radius: 50%; background: var(--subtle); flex: 0 0 auto; } .fx-qban span { flex: 1; }
.fx-qban.wait { background: color-mix(in srgb, var(--yellow) 9%, var(--surface-2)); border-color: color-mix(in srgb, var(--yellow) 45%, transparent); } .fx-qban.wait i { background: var(--yellow); }
.fx-qban.ok { background: color-mix(in srgb, var(--green) 9%, var(--surface-2)); border-color: color-mix(in srgb, var(--green) 45%, transparent); } .fx-qban.ok i { background: var(--green); }
.fx-linkbtn { border: 0; background: none; color: var(--yellow); font: 700 12.5px var(--font); cursor: pointer; padding: 0; }
.fx-flags { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; }
.fx-flag { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 12px; background: var(--surface-2); font: 600 13px var(--font); }
.fx-yn { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; background: var(--surface); }
.fx-yn button { border: 0; background: none; color: var(--subtle); font: 600 12px var(--font); padding: 4px 10px; border-radius: 7px; cursor: pointer; min-width: 34px; }
.fx-yn button.on { background: var(--surface-3); color: var(--text); } .fx-yn button.y.on { background: var(--green); color: #fff; } .fx-yn button.n.on { background: var(--red); color: #fff; }
.fx-quote { border-left: 3px solid var(--yellow); background: var(--surface-2); border-radius: 0 12px 12px 0; padding: 10px 14px; display: flex; flex-direction: column; gap: 4px; font: 500 13.5px/20px var(--font); }
.fx-qtools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .fx-qtools input { flex: 1 1 260px; }
.fx-qtools .fx-sbtn { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; cursor: pointer; }
/* approvals */
.fx-toggle-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); }
.fx-toggle-row > div { flex: 1; min-width: 0; } .fx-toggle-row b { display: block; font: 600 14px/20px var(--font); } .fx-toggle-row small { display: block; font: 500 12px/16px var(--font); color: var(--muted); }
.fx-switch { position: relative; width: 38px; height: 22px; flex: 0 0 auto; cursor: pointer; }
.fx-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; width: 100%; height: 100%; }
.fx-switch::before { content: ""; position: absolute; inset: 0; border-radius: 99px; background: var(--surface-3); transition: background .15s; }
.fx-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.fx-switch:has(input:checked)::before { background: var(--green); } .fx-switch:has(input:checked)::after { transform: translateX(16px); }
.fx-switch:has(input:focus-visible) { outline: 2px solid var(--acid); outline-offset: 2px; border-radius: 99px; }
#fxS_contacts #contactRows > div { background: var(--surface-2); border-radius: 14px; padding: 8px 10px; margin: 0 0 8px !important; }
#fxS_contacts #contactRows input { background: var(--surface) !important; padding: 8px 10px !important; font-size: 13px !important; }
/* vault */
.fx-cred { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); }
.fx-cred + .fx-cred { margin-top: 8px; } .fx-cred .grow { flex: 1; min-width: 0; }
.fx-cred b { display: block; font: 600 14px/20px var(--font); } .fx-cred small { display: block; font: 500 12px var(--font); color: var(--muted); } .fx-cred small a { color: var(--muted); }
.fx-pw { font: 700 12px var(--mono); letter-spacing: .1em; padding: 4px 10px; border-radius: 8px; background: var(--surface-3); color: var(--muted); }
.fx-portal { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px; border: 1px dashed var(--line); }
.fx-portal #portalLinkInfo { flex: 0 0 100%; }
/* assets */
.fx-asset { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); }
.fx-asset + .fx-asset { margin-top: 8px; } .fx-asset .grow { flex: 1; min-width: 0; }
.fx-asset b { display: block; font: 600 13.5px/18px var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fx-asset small { display: block; font: 500 12px var(--font); color: var(--muted); }
.fx-asset .fx-pdf { font-size: 9.5px; }
.fx-adrop { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; padding: 14px; border-radius: 14px; border: 1.5px dashed var(--line); color: var(--muted); font: 500 12.5px var(--font); cursor: pointer; }
.fx-adrop b { color: var(--orange); } .fx-adrop select { width: auto !important; padding: 4px 8px !important; font-size: 12px !important; }
.fx-adrop.drag { border-color: var(--orange); background: color-mix(in srgb, var(--orange) 8%, transparent); }
/* contract footer */
.fx-cstatus { padding-top: 4px; } .fx-cstatus .planchip { margin: 0 !important; }
@media (max-width: 900px) { .fx-2col, .fx-flags { grid-template-columns: minmax(0, 1fr); } }
.fx-svc[data-for="s_hads"].on { border-color: color-mix(in srgb, var(--blue) 50%, transparent); background: color-mix(in srgb, var(--blue) 8%, var(--surface-2)); }
.fx-svc[data-for="s_hads"] .fx-svcck { accent-color: var(--blue); }
.fx-cdrop.contract .fx-sbtn.warn { background: var(--yellow); color: #1B1612; border-color: var(--yellow); }

/* ── v10.14.1 · Tasks tab to Figma 03 (Joe, 5 Nov screenshot: "throwing off the width … and the look") ── */
/* the package card is the column's width, not a centred 1060px box (wide screens showed it indented) */
html .pk { max-width: none !important; margin: 0 !important; padding: 20px !important; gap: 14px !important; }
/* month card: the "Tasks · month" head and the hours strip read as one card */
html .tk-head { background: var(--surface); border: 1px solid var(--line); border-bottom: 0; border-radius: 20px 20px 0 0; padding: 16px 20px 6px; margin: 0; gap: 12px; }
html .tk-head h3 { font: 700 17px/24px var(--font); letter-spacing: -.01em; } html .tk-head h3 i { color: var(--muted); font-weight: 600; }
html .tk-head .tk-acts { margin-left: auto; display: flex; align-items: center; gap: 10px; }
html .tk-head + .tk-month { border-top: 0; border-radius: 0 0 20px 20px; margin-top: 0; padding-top: 8px; }
html .tk-bar { margin-top: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
html .tk-bar input[type=search] { flex: 1 1 220px; margin: 0; }
html .tk-bar #tkCount { margin-left: 0; }
/* package header: title, a quiet client line, month arrows */
html .pk-head { gap: 10px; } html .pk-head h2 { font: 800 20px/26px var(--font); letter-spacing: -.01em; }
html .pk-meta { font: 500 12px var(--font) !important; color: var(--muted); }
/* facts: five equal tiles, the lead's "change" a small inline control */
html .pk-facts { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
html .pk-facts > div { min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; }
html .pk-facts .lab { margin: 0; }
html .pk-facts small { font: 500 11.5px/15px var(--font); color: var(--muted); margin: 0; }
html .pk-facts small select { display: block; margin-top: 4px; width: auto; max-width: 100%; padding: 3px 6px; font-size: 11px; border-radius: 7px; background: var(--surface); }
/* views left, Reassign task + Add item right (was centred by an auto margin) */
html .pk-lhead { margin: 6px 0 0 !important; justify-content: flex-start; }
html .pk-lhead .pk-views { margin-left: 0 !important; }
html .pk-lhead .pk-lact { margin-left: auto; }
html .pk-allwrap { padding: 0 6px 0 10px; } html .pk-allwrap select.pk-all { width: 120px !important; }
html .pk-lact .ghost { display: inline-flex; align-items: center; gap: 4px; }
html .pk-sgrp { margin: 8px 0 2px; }
html .pk-row { margin: 0 !important; } html .pk-row + .pk-row { margin-top: 8px !important; }
/* per-row Reassign appears on hover / keyboard focus (the frame shows avatar · status · Open) */
html .pk-row .ac select { opacity: 0; width: 0 !important; padding: 0 !important; border: 0; transition: opacity .12s; }
html .pk-row:hover .ac select, html .pk-row:focus-within .ac select { opacity: 1; width: 104px !important; padding: 6px 8px !important; border: 1px solid var(--line); }
html .pk-row.done .ac .pk-open { background: var(--surface); }
html .pk-acts { margin-top: 6px; }
html .pk-allwrap select.pk-all { min-width: 0 !important; margin: 0 !important; }
html .pk-facts { align-items: stretch !important; }
html .tk-month .tk-meter { flex: 1 1 280px; }
html .pk-facts > div:first-child small { font-size: 0; line-height: 0; } /* the lead tile shows the person (Figma 03); the change control stays */
html .pk-facts > div:first-child small select { font-size: 11px; line-height: normal; margin-top: 2px; }
html .pk-lead { flex-wrap: nowrap; min-width: 0; } html .pk-lead b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* ── v10.16.0 · Article sets (Figma 1688:8147 set page · 1689:8246 article page) ── */
.as .ot-hrow { row-gap: 8px; }
.as-nav { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font: 500 12.5px var(--font); color: var(--muted); }
.as-nav .fx-iconbtn { width: 30px; height: 30px; font-size: 16px; } .as-nav + .pk-follow { margin-left: 0; }
.as-meta { font: 500 13px/19px var(--font); color: var(--muted); margin-top: -4px; } .as-meta .as-late { color: var(--red); font-weight: 700; }
.as-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.as-tile { background: var(--surface-2); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.as-tl { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.as-tl span { font: 700 10.5px/14px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-tl b { font: 700 13px var(--mono); color: var(--c); white-space: nowrap; }
.as-bar { height: 4px; border-radius: 4px; background: var(--surface-3); overflow: hidden; } .as-bar i { display: block; height: 100%; background: var(--c); border-radius: 4px; }
.as-codes { display: flex; gap: 4px; } .as-codes span { font: 700 10px/16px var(--mono); padding: 0 4px; border-radius: 4px; color: var(--subtle); background: var(--surface-3); }
.as-codes span.on { color: var(--c); background: color-mix(in srgb, var(--c) 22%, transparent); }
.as-alert, .as-warnbox { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--red) 45%, var(--line)); background: color-mix(in srgb, var(--red) 9%, var(--surface)); }
.as-alert > svg { color: var(--red); } .as-alert b { display: block; font: 700 13px/18px var(--font); } .as-alert span { display: block; font: 500 12.5px/18px var(--font); color: var(--muted); } .as-alert > div { flex: 1; min-width: 0; }
.as-warnbox { display: block; border-color: color-mix(in srgb, var(--yellow) 45%, transparent); background: color-mix(in srgb, var(--yellow) 10%, var(--surface-2)); color: var(--yellow); font: 600 12.5px/17px var(--font); padding: 10px 12px; border-radius: 10px; margin: 10px 0 0; }
.as-card { display: flex; flex-direction: column; gap: 12px; }
.as-ch { display: flex; align-items: flex-start; gap: 12px; } .as-ch > div { flex: 1; min-width: 0; }
.as-ch h3 { font: 700 17px/22px var(--font); margin: 0; } .as-ch small { display: block; font: 500 12.5px/17px var(--font); color: var(--muted); margin-top: 2px; }
.as-ic { width: 36px; height: 36px; border-radius: 10px; flex: 0 0 auto; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); }
.as-chact { margin-left: auto; display: inline-flex; gap: 8px; align-items: center; flex: 0 0 auto; }
.as-attach select { width: auto; margin: 0; padding: 6px 8px; font-size: 12px; }
.as-plan { display: flex; flex-direction: column; gap: 10px; }
.as-prow { display: flex; gap: 12px; padding: 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid transparent; }
.as-prow.has { border-color: color-mix(in srgb, var(--violet) 50%, transparent); background: color-mix(in srgb, var(--violet) 5%, var(--surface-2)); }
.as-code { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; font: 700 12.5px var(--font); color: var(--muted); background: var(--surface-3); }
.as-prow.has .as-code { color: var(--violet); background: color-mix(in srgb, var(--violet) 20%, transparent); }
.as-pmain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.as-ptop { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.as-kw { display: inline-flex; gap: 6px; align-items: center; min-width: 0; } .as-kw svg { color: var(--teal); } .as-kw b { font: 700 15px/20px var(--font); }
.as-pact { display: inline-flex; gap: 8px; align-items: center; } .as-pact .fx-av { width: 24px; height: 24px; border-radius: 50%; font-size: 10.5px; }
.as-head { font: 500 13px/18px var(--font); color: var(--muted); margin-top: -2px; }
.as-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.as-chip { font: 500 12.5px/18px var(--font); padding: 3px 9px; border-radius: 7px; background: var(--surface-3); color: var(--text); }
.as-chip.dash { background: none; border: 1px dashed color-mix(in srgb, var(--red) 70%, transparent); color: var(--red); }
.as-chip.amber { background: color-mix(in srgb, var(--yellow) 14%, transparent); color: var(--yellow); }
.as-chip.red { background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--red); font-weight: 700; }
.as-chip.ok { background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); }
.as-pill { font: 700 12px/18px var(--font); padding: 3px 10px; border-radius: 999px; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); white-space: nowrap; }
.as-ai { border: 0; border-radius: 10px; padding: 8px 14px; font: 700 13px var(--font); color: #fff; background: var(--violet); cursor: pointer; }
.as-ai:disabled { opacity: .6; cursor: wait; }
.as-from { font: 500 12.5px/18px var(--font); color: var(--teal); padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--teal) 9%, var(--surface-2)); }
.as-pedit { display: flex; gap: 12px; padding: 14px; border-radius: 14px; background: var(--surface-2); }
.as-pegrid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; } .as-pegrid .w2 { grid-column: span 2; }
.as-pegrid label { display: flex; flex-direction: column; gap: 4px; font: 600 12px var(--font); color: var(--muted); } .as-pegrid input, .as-pegrid select, .as-pegrid textarea { margin: 0; }
.as-fgrp { display: flex; flex-direction: column; gap: 6px; }
.as-fhd { display: flex; justify-content: space-between; align-items: baseline; margin-top: 4px; }
.as-fhd span { font: 700 11px/14px var(--mono); letter-spacing: .08em; color: var(--violet); } .as-fhd.sh span { color: var(--blue); } .as-fhd small { font: 500 12px var(--font); color: var(--muted); }
.as-file { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; background: var(--surface-2); }
.as-file a { flex: 1; min-width: 0; font: 600 13px var(--font); color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .as-file a:hover { color: var(--blue); }
.as-ext { font: 700 10px/18px var(--mono); padding: 0 6px; border-radius: 5px; color: var(--blue); background: color-mix(in srgb, var(--blue) 16%, transparent); flex: 0 0 auto; }
.as-ext.pdf { color: var(--red); background: color-mix(in srgb, var(--red) 16%, transparent); } .as-ext.img { color: var(--teal); background: color-mix(in srgb, var(--teal) 16%, transparent); }
.as-fm { font: 500 12px var(--font); color: var(--muted); white-space: nowrap; }
.as-move { width: auto !important; margin: 0 !important; padding: 3px 6px !important; font-size: 11.5px !important; opacity: .55; } .as-file:hover .as-move, .as-move:focus { opacity: 1; }
.as-more { align-self: flex-start; border: 0; background: none; color: var(--muted); font: 600 12.5px var(--font); cursor: pointer; padding: 2px 0; }
.as-drop { border: 1px dashed var(--line); border-radius: 10px; padding: 12px; text-align: center; font: 500 12.5px var(--font); color: var(--muted); cursor: pointer; }
.as-drop:hover, .as-drop.over, .as-drop:focus { border-color: var(--violet); color: var(--text); background: color-mix(in srgb, var(--violet) 6%, transparent); outline: none; }
.as-planned { display: inline-block; margin-top: 4px; font: 600 12px var(--font); color: var(--teal); background: color-mix(in srgb, var(--teal) 12%, transparent); padding: 2px 9px; border-radius: 7px; }
.as-sh { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.as-lines { display: flex; flex-direction: column; gap: 7px; } .as-lines > div { display: flex; gap: 8px; align-items: center; font: 500 13px var(--font); color: var(--muted); } .as-lines b { color: var(--text); font-weight: 700; min-width: 22px; }
.as-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: var(--c); } .as-dot[data-on="0"] { background: none; border: 1.5px solid var(--subtle); }
.as-proofrow select { margin: 0; }
.as-wide { width: 100%; border: 0; border-radius: 10px; padding: 11px; font: 700 13px var(--font); cursor: pointer; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); display: inline-flex; justify-content: center; gap: 8px; align-items: center; }
.as-wide.violet { background: var(--violet); border-color: var(--violet); color: #fff; } .as-wide:disabled { opacity: .45; cursor: not-allowed; }
.as-seg { width: 100%; } .as-seg button { flex: 1; } .as-seg button.on { background: var(--surface-3); color: var(--text); }
.as-link { border: 0; background: none; color: var(--muted); font: 600 12px var(--font); text-decoration: underline; cursor: pointer; padding: 0; align-self: flex-start; }
.as-live { display: flex; flex-direction: column; gap: 8px; } .as-live label { display: grid; grid-template-columns: 26px 1fr; align-items: center; gap: 4px 8px; font: 700 12.5px var(--font); } .as-live input { margin: 0; } .as-live small { grid-column: 2; font-size: 11.5px; }
.as-next { font: 500 12.5px/18px var(--font); color: var(--text); padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--teal) 10%, var(--surface-2)); }
/* article page */
.as-tabs { margin-left: auto; display: inline-flex; gap: 8px; flex-wrap: wrap; }
.as-tab { display: inline-flex; gap: 8px; align-items: center; border: 1px solid var(--line); background: var(--surface-2); color: var(--muted); border-radius: 10px; padding: 7px 12px; cursor: pointer; font: 500 12.5px var(--font); max-width: 220px; }
.as-tab b { color: var(--text); } .as-tab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .as-tab i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: 0 0 auto; }
.as-tab.on { border-color: var(--violet); color: var(--text); background: color-mix(in srgb, var(--violet) 12%, var(--surface-2)); } .as-tab.on b { color: var(--violet); }
.as-arow { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; } .as-arow h2 { margin: 0 0 6px !important; }
.as-status { font: 700 11px/16px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); padding: 4px 10px; border-radius: 999px; }
.as-ed { padding: 0 !important; overflow: hidden; display: flex; flex-direction: column; }
.as-edbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.as-vseg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--surface-2); }
.as-vseg button { border: 0; background: none; color: var(--muted); font: 600 12.5px var(--font); padding: 6px 12px; border-radius: 8px; cursor: pointer; } .as-vseg button.on { background: var(--orange); color: #fff; } .as-vseg button:disabled { opacity: .4; }
.as-edbody { padding: 18px 32px; } .as-text { min-height: 420px; }
.as-doc { font: 500 15px/24px var(--font); max-height: 640px; overflow: auto; }
.as-doc h1 { font: 800 30px/37px var(--font); letter-spacing: -.02em; margin: 6px 0 10px; } .as-doc h2 { font: 700 18px/24px var(--font); margin: 18px 0 8px; } .as-doc h3 { font: 700 16px/22px var(--font); margin: 14px 0 6px; } .as-doc p { margin: 0 0 12px; }
.as-kwm { background: none; color: var(--yellow); text-decoration: underline; text-underline-offset: 3px; }
.as-off { color: var(--red); text-decoration: line-through; }
.as-flag { font: 600 12.5px/17px var(--font); padding: 7px 10px; border-radius: 8px; margin: 0 0 12px; }
.as-flag.bad { color: var(--red); background: color-mix(in srgb, var(--red) 12%, transparent); } .as-flag.warn { color: var(--yellow); background: color-mix(in srgb, var(--yellow) 12%, transparent); }
.as-edfoot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--line); }
.as-stats { font: 500 13px var(--font); color: var(--muted); } .as-stats b { color: var(--text); }
.as-edbody + .ot-sugs { padding: 0 16px 12px; }
.as-proofcard { border-color: color-mix(in srgb, var(--violet) 50%, var(--line)) !important; }
.as-proofcard .pk-av { border-radius: 50%; }
.as-pbtns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .as-pbtns select { width: auto; margin: 0; }
.as-approve { border: 0; border-radius: 10px; padding: 9px 14px; font: 700 13px var(--font); color: #fff; background: var(--green); cursor: pointer; } .as-approve:disabled { opacity: .45; cursor: not-allowed; }
.as-chg { display: inline-flex; gap: 6px; align-items: center; border: 1px solid color-mix(in srgb, var(--pink) 60%, transparent); background: color-mix(in srgb, var(--pink) 10%, transparent); color: var(--pink); border-radius: 10px; padding: 8px 14px; font: 700 13px var(--font); cursor: pointer; }
.as-redn { margin-left: auto; color: var(--red); font: 700 13px var(--font); } .as-okn { margin-left: auto; color: var(--green); font: 700 13px var(--font); }
#asOverride, #asChg { display: flex; flex-direction: column; gap: 8px; } #asOverride[hidden], #asChg[hidden] { display: none; } #asOverride textarea, #asChg textarea { margin: 0; } #asOverride .btn, #asChg .btn { align-self: flex-start; }
.as-dl { display: grid; gap: 2px; margin: 0; } .as-dl dt { font: 700 10.5px/14px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 8px; } .as-dl dt:first-child { margin-top: 0; } .as-dl dd { margin: 0; font: 500 13px/18px var(--font); }
.as-angle { padding: 12px; border-radius: 12px; background: color-mix(in srgb, var(--yellow) 10%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--yellow) 35%, transparent); }
.as-angle .t-label { color: var(--yellow); } .as-angle p { margin: 6px 0 0; font: 500 13px/18px var(--font); } .as-angle.ok { background: color-mix(in srgb, var(--green) 8%, var(--surface-2)); border-color: color-mix(in srgb, var(--green) 30%, transparent); } .as-angle.ok .t-label { color: var(--green); }
.as-ask { display: inline-flex; margin-top: 10px; text-decoration: none; }
.as-cks { display: flex; flex-direction: column; gap: 6px; }
.as-ckrow { display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; border-radius: 10px; background: var(--surface-2); } .as-ckrow[role="button"] { cursor: pointer; }
.as-ckrow b { display: block; font: 700 13px/17px var(--font); } .as-ckrow small { display: block; font: 500 12px/16px var(--font); color: var(--muted); }
.as-ck { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; font: 800 10.5px var(--font); }
.as-ck.ok { color: var(--green); background: color-mix(in srgb, var(--green) 18%, transparent); } .as-ck.bad { color: var(--red); background: color-mix(in srgb, var(--red) 18%, transparent); }
.as-ck.warn { color: var(--yellow); background: color-mix(in srgb, var(--yellow) 18%, transparent); } .as-ck.todo { color: var(--muted); background: var(--surface-3); }
.as-p { margin: 0; font: 500 13px/19px var(--font); }
.as-stages { display: flex; flex-direction: column; gap: 8px; } .as-stages > div { display: flex; gap: 8px; align-items: center; } .as-stages b { font: 700 13px var(--font); } .as-stages small { margin-left: auto; font: 500 12.5px var(--font); color: var(--muted); text-align: right; }
@media (max-width: 1100px) { .as-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .as-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .as-pegrid { grid-template-columns: 1fr; } .as-pegrid .w2 { grid-column: auto; } .as-edbody { padding: 14px; } .as-tabs { margin-left: 0; } }

/* ── v10.17.0 · round 3 (Joe, 5 Nov screenshots 1–7) ── */
/* sidebar: six clients, then View all */
.fx-viewall { display: inline-flex; align-items: center; gap: 6px; margin: 10px 8px 4px; font: 600 12.5px var(--font); color: var(--muted); text-decoration: none; }
.fx-viewall:hover { color: var(--text); }
/* client header: Meeting request beside Share; onboarding strip's Continue link */
.fx-chead .act { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fx-hbtn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; font: 600 13px var(--font); white-space: nowrap; }
.fx-contlink { border: 0; background: none; color: var(--orange); font: 700 13px var(--font); display: inline-flex; gap: 6px; align-items: center; cursor: pointer; padding: 4px 2px; }
.fx-contlink:hover { text-decoration: underline; }
/* Tasks toolbar (Figma 03) */
html .tk-bar .wk-mode { display: inline-flex; gap: 2px; padding: 4px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
html .tk-bar .wk-mode .subtab { border: 0; border-radius: 10px; padding: 8px 14px; font: 600 13px var(--font); color: var(--muted); background: none; }
html .tk-bar .wk-mode .subtab.on { background: var(--text); color: var(--bg); }
.tk-search { flex: 1 1 260px; display: flex; align-items: center; gap: 8px; padding: 0 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--muted); min-width: 0; }
html .tk-bar .tk-search input[type=search] { flex: 1; border: 0; background: transparent; padding: 11px 0; margin: 0; min-width: 0; }
.tk-filtbtn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px !important; border-radius: 14px !important; font: 600 13px var(--font) !important; }
/* Home · My work (Figma 01): tabs as separate pills, one compact add row */
.fx-mwtabs { display: flex; gap: 8px; flex-wrap: wrap; align-self: flex-start; background: none; border: 0; padding: 0; }
.fx-mwtabs button { border: 1px solid var(--line); background: var(--surface-2); color: var(--muted); border-radius: 999px; padding: 7px 14px; font: 600 12.5px var(--font); cursor: pointer; }
.fx-mwtabs button.on { background: var(--text); color: var(--bg); border-color: var(--text); }
#fxMyWork .fx-addrow { flex-wrap: wrap; row-gap: 6px; }
#fxMyWork .fx-addrow > input { flex: 1 1 200px; min-width: 160px; }
#fxMyWork .fx-addopt select { field-sizing: content; min-width: 0; }
#fxMyWork .fx-addopt { flex: 0 0 auto; height: 38px; padding: 0 10px; color: var(--text); }
#fxMyWork .fx-addopt svg { color: var(--muted); }
#fxMyWork .fx-addopt select { max-width: 150px; color: var(--text); font: 600 12.5px var(--font); cursor: pointer; appearance: none; -webkit-appearance: none; padding-right: 2px; }
.fx-due { position: relative; cursor: pointer; } .fx-due span { font: 600 12.5px var(--font); color: var(--text); }
.fx-due input[type=date] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100% !important; }
.fx-due.set { border-color: color-mix(in srgb, var(--orange) 55%, var(--line)); }
@media (max-width: 1100px) { #fxMyWork .fx-addrow { flex-wrap: wrap; } #fxMyWork .fx-addrow > input { flex-basis: 100%; } }
/* Overnight rank watch: last night's readings */
.fx-wnight { display: flex; flex-direction: column; gap: 6px; }
.fx-wnight > .fx-railink { border: 0; background: none; padding: 0; cursor: pointer; align-self: flex-start; }
.fx-wrows { display: flex; flex-direction: column; gap: 4px; max-height: 360px; overflow: auto; }
.fx-wrow { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: var(--surface-2); }
.fx-wrow b { display: block; font: 600 13px var(--font); } .fx-wrow small { color: var(--muted); font: 500 11.5px var(--font); }
/* Keywords & rankings (Figma 05 + 1659:7207) */
.kw-acts { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.kw-seg button { padding: 6px 12px; font-size: 12.5px; } .kw-seg button.on { background: var(--surface-3); color: var(--text); }
.kw-scroll { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
.kw-grid { display: flex; flex-direction: column; gap: 6px; min-width: calc(700px + var(--m) * 64px); }
.kw-row { display: grid; grid-template-columns: 28px minmax(180px, 2.2fr) 84px 76px minmax(110px, 1.3fr) repeat(var(--m), 64px) 64px 82px 34px; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 12px; background: var(--surface-2); }
.kw-row.off { opacity: .5; }
.kw-hd { background: none; padding: 0 12px; font: 700 10.5px/14px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--subtle); }
.kw-hd .today { color: var(--orange); }
.kw-row .m { text-align: center; }
.kw-k { font: 600 14px/19px var(--font); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kw-dg { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 2px; display: grid; place-items: center; } .kw-dg:hover { color: var(--teal); }
.kw-lv { font: 700 9.5px/16px var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 1px 7px; border-radius: 6px; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.kw-vol { font: 600 13px var(--font); text-align: right; padding-right: 8px; }
.kw-pg { font: 500 12.5px var(--font); color: var(--muted); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kw-rk { display: inline-block; min-width: 30px; font: 700 11px/20px var(--mono); padding: 0 6px; border-radius: 7px; color: var(--c); background: color-mix(in srgb, var(--c) 18%, transparent); text-align: center; }
.kw-rk.empty { color: var(--subtle); background: none; }
.kw-rk.big { min-width: 44px; font-size: 12.5px; line-height: 26px; } .kw-rk i { font-style: normal; font-size: 10px; margin-right: 2px; }
.kw-dl { text-align: right; font: 600 12.5px var(--font); } .kw-dl .fx-delta.down { color: var(--red); }
.kw-menu { position: relative; text-align: right; }
.kw-pop { right: 0; left: auto; top: calc(100% + 4px); } .kw-pop a { display: block; text-align: left; color: var(--text); font: 600 13px var(--font); padding: 8px 10px; border-radius: 8px; text-decoration: none; } .kw-pop a:hover { background: var(--surface-2); }
.kw-vars { display: flex; gap: 6px; flex-wrap: wrap; } .kw-var { font: 600 12px var(--font); padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.kw-var.on { color: var(--orange); border-color: color-mix(in srgb, var(--orange) 50%, transparent); background: color-mix(in srgb, var(--orange) 10%, transparent); }
.kw-unm { display: flex; flex-direction: column; gap: 6px; }
.kw-unmk { display: flex; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 10px; background: var(--surface-2); font: 600 13px var(--font); cursor: pointer; }
.kw-unmk input { margin: 0; width: 18px; height: 18px; accent-color: var(--orange); }
.kw-ogbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .kw-ogact { margin-left: auto; display: inline-flex; gap: 8px; }
.kw-violet { background: var(--violet) !important; border-color: var(--violet) !important; color: #fff !important; }
.kw-ogwrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
.kw-og, .kw-cmp { width: 100%; border-collapse: collapse; font: 500 13px var(--font); }
.kw-og th, .kw-cmp th { font: 700 10.5px/14px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--subtle); text-align: center; padding: 12px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.kw-og th:first-child, .kw-cmp th:first-child { text-align: left; }
.kw-og td, .kw-cmp td { padding: 9px 14px; border-bottom: 1px solid var(--line); text-align: center; } .kw-og tr:last-child td, .kw-cmp tr:last-child td { border-bottom: 0; }
.kw-og td.k { text-align: left; white-space: nowrap; } .kw-og td.k .kw-dg { display: inline-grid; vertical-align: middle; margin-right: 6px; }
.kw-card .fx-head { flex-wrap: wrap; row-gap: 10px; } .kw-card .fx-head > div { min-width: 260px; } .kw-cmp td:first-child { text-align: left; }
.kw-og sup { color: var(--subtle); }
.kw-imp { display: grid; grid-template-columns: minmax(240px, 1fr) 1.6fr; gap: 16px; }
.kw-drop { border: 1.5px dashed color-mix(in srgb, var(--violet) 60%, var(--line)); border-radius: 14px; padding: 26px 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; cursor: pointer; color: var(--violet); background: color-mix(in srgb, var(--violet) 5%, transparent); }
.kw-drop b { color: var(--text); font: 600 14px var(--font); } .kw-drop span { color: var(--muted); font: 500 12px var(--font); } .kw-drop.over { background: color-mix(in srgb, var(--violet) 12%, transparent); }
.kw-improw { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); margin-top: 6px; font: 500 13px var(--font); } .kw-improw b { min-width: 70px; } .kw-improw .fx-pill { margin-left: auto; }
.kw-impfoot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.kw-comps, .kw-pchips { display: flex; gap: 8px; flex-wrap: wrap; }
.kw-cchip { font: 600 13px var(--font); padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); }
.kw-cchip.add { border-style: dashed; color: var(--muted); background: none; cursor: pointer; }
.kw-pchip { font: 600 12.5px var(--font); padding: 7px 12px; border-radius: 10px; border: 1px solid var(--line); background: none; color: var(--muted); cursor: pointer; }
.kw-pchip.on { color: var(--text); border-color: color-mix(in srgb, var(--pink) 55%, transparent); background: color-mix(in srgb, var(--pink) 12%, transparent); }
.kw-gap { display: flex; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 12px; background: var(--surface-2); }
.kw-gap b { display: block; font: 700 13px var(--font); } .kw-gap small { color: var(--muted); font: 500 12px var(--font); }
@media (max-width: 900px) { .kw-imp { grid-template-columns: 1fr; } }
/* AI visibility · Prompt set (Figma 1616:5214) */
.ai-pnote { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--yellow) 40%, transparent); background: color-mix(in srgb, var(--yellow) 8%, var(--surface-2)); color: var(--muted); font: 500 12.5px/17px var(--font); }
.ai-pnote svg { color: var(--yellow); flex: 0 0 auto; }
.ai-pgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ai-ptile { padding: 10px 12px 12px; border-radius: 12px; background: var(--surface-2); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ai-ptile p { margin: 0; font: 500 13px/18px var(--font); color: var(--text); }
.ai-ptop { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ai-px { border: 0; background: none; color: var(--subtle); cursor: pointer; font-size: 12px; padding: 2px 4px; border-radius: 6px; } .ai-px:hover { color: var(--red); background: color-mix(in srgb, var(--red) 12%, transparent); }
@media (max-width: 700px) { .ai-pgrid { grid-template-columns: 1fr; } }

/* ── v10.18.0 · Joe, 5 Nov (4 points) ── */
/* 1 · dropdown lists: a transparent select made the browser draw a white list with light text */
select option, select optgroup { background-color: var(--surface); color: var(--text); }
html[data-theme="light"] select option { background-color: #fff; color: #1c1917; }
/* 2 · icon chips in empty states: ".fx-empty span" turned the chip into a block, so the tick sat top-left */
.fx-empty > .fx-chip { display: grid; place-items: center; font: inherit; color: var(--c); }
.fx-empty > .fx-chip svg { display: block; }
/* 3 · My work (Figma 11 board, 1662:7941 list) */
.fx-segw button.on { background: var(--text) !important; color: var(--bg) !important; }
.fx-col { border-top: 0; position: relative; }
.fx-colh { padding: 2px 4px 10px; border-bottom: 3px solid var(--c, var(--line)); margin-bottom: 2px; }
.fx-colh .fx-count { margin-left: auto; font: 700 11px var(--mono); padding: 1px 8px; border-radius: 99px; background: var(--surface-3); color: var(--muted); }
.fx-coladd { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 2px; display: grid; place-items: center; border-radius: 6px; } .fx-coladd:hover { color: var(--text); background: var(--surface-2); }
.fx-kcard { gap: 7px; }
.fx-kcard.mine { border-color: color-mix(in srgb, var(--orange) 55%, var(--line)); }
.fx-kcard.od { border-color: color-mix(in srgb, var(--red) 45%, var(--line)); }
.fx-kcard.mine.od { border-color: color-mix(in srgb, var(--orange) 55%, var(--line)); }
.fx-kcard > .fx-pill { align-self: flex-start; }
.fx-kcard .ft { margin-top: 2px; } .fx-kcard .ft .mt { font: 500 12px var(--font); }
.fx-kcard .ft .mo { margin-left: auto; font: 700 10.5px var(--mono); color: var(--subtle); }
.fx-coladdrow, .fx-colmore { border: 1px dashed var(--line); background: none; color: var(--muted); border-radius: 12px; padding: 9px; font: 600 12.5px var(--font); cursor: pointer; display: inline-flex; justify-content: center; align-items: center; gap: 6px; }
.fx-colmore { border-style: solid; } .fx-coladdrow:hover, .fx-colmore:hover { color: var(--text); border-color: var(--muted); }
.fx-mwlegend { display: flex; gap: 18px; flex-wrap: wrap; font: 500 12.5px var(--font); color: var(--muted); }
.fx-mwlegend i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--orange); vertical-align: -2px; margin-right: 6px; }
.fx-todoempty { border: 1px dashed var(--line); border-radius: 12px; padding: 16px; text-align: center; display: flex; flex-direction: column; gap: 4px; }
.fx-todoempty b { font: 700 13px var(--font); } .fx-todoempty span { font: 500 12px var(--font); color: var(--muted); }
.fx-eodbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fx-eodbtns > * { display: inline-flex; justify-content: center; align-items: center; gap: 8px; padding: 10px 14px !important; text-decoration: none; }
/* the compact add row everywhere (Home, My work, client to-dos), not only on Home */
.fx-addrow { flex-wrap: wrap; row-gap: 6px; }
.fx-addrow > input { flex: 1 1 200px; min-width: 160px; }
.fx-addopt { flex: 0 0 auto; height: 38px; padding: 0 10px; color: var(--text); }
.fx-addopt svg { color: var(--muted); }
.fx-addopt select { field-sizing: content; min-width: 0; max-width: 170px; color: var(--text); font: 600 12.5px var(--font); cursor: pointer; appearance: none; -webkit-appearance: none; padding-right: 2px; }
#fxTkRail .fx-addopt select { max-width: none; }
/* 4 · Setup (Figma 10) */
.fx-ctval { position: relative; } .fx-ctval .fx-cbig { display: block; pointer-events: none; }
.fx-ctval input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100% !important; }
.fx-ctval input:focus { position: static; opacity: 1; } .fx-ctval:focus-within .fx-cbig { display: none; }
.fx-svc .hv { display: inline-flex; align-items: baseline; gap: 4px; padding: 4px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); }
.fx-svc .hv input { width: 44px !important; border: 0 !important; background: transparent !important; padding: 2px 0 !important; text-align: right; font: 700 14px var(--font) !important; }
.fx-svc .hv small { font: 500 11px var(--font); color: var(--muted); white-space: nowrap; }
.fx-setupcard input[type="checkbox"]:not(.fx-switch input):not(.fx-svcck) { appearance: none; -webkit-appearance: none; width: 18px !important; height: 18px !important; padding: 0 !important; margin: 0; border-radius: 5px; border: 1.5px solid var(--subtle); background: var(--surface); display: inline-grid; place-items: center; cursor: pointer; flex: 0 0 auto; }
.fx-setupcard input[type="checkbox"]:not(.fx-switch input):checked { background: var(--orange); border-color: var(--orange); }
.fx-setupcard input[type="checkbox"]:not(.fx-switch input):checked::after { content: ""; width: 9px; height: 5px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
.fx-svc .fx-svcck { appearance: none; -webkit-appearance: none; width: 18px !important; height: 18px !important; padding: 0 !important; border-radius: 5px; border: 1.5px solid var(--subtle); background: var(--surface); display: inline-grid; place-items: center; }
.fx-svc .fx-svcck:checked { background: var(--orange); border-color: var(--orange); } .fx-svc[data-for="s_hads"] .fx-svcck:checked { background: var(--blue); border-color: var(--blue); }
.fx-svc .fx-svcck:checked::after { content: ""; width: 9px; height: 5px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
.fx-geo .ck input:checked { background: var(--teal) !important; border-color: var(--teal) !important; }
.fx-exp label input { position: absolute; opacity: 0; pointer-events: none; }
.fx-exp label { position: relative; }
.fx-exp label.on::before { content: "✓"; font-weight: 800; color: var(--violet); }
.fx-contact { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); flex-wrap: wrap; }
.fx-contact > .fx-av { width: 32px; height: 32px; border-radius: 50%; font-size: 11px; }
.fx-contact .grow { min-width: 160px; } .fx-contact b { display: block; font: 700 13.5px var(--font); } .fx-contact small { color: var(--muted); font: 500 12px var(--font); }
.fx-cfields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; } .fx-cfields input { margin: 0; }
.fx-portal { border: 0; cursor: pointer; }
.fx-linkbtn { border: 0; background: none; font: 600 12.5px var(--font); color: var(--muted); cursor: pointer; padding: 4px; } .fx-linkbtn:hover { color: var(--text); }
@media (max-width: 700px) { .fx-cfields { grid-template-columns: 1fr; } }
#fxS_review > .btn { align-self: flex-start; }
.fx-colh { white-space: nowrap; }

/* ── v10.20.0 · Meeting request modal (Figma 1615:4976): form left, what the client sees right ── */
.fx-chip.solid { background: var(--c); color: #fff; width: 42px; height: 42px; border-radius: 12px; }
.fx-mtg { width: min(1080px, 100%); height: min(970px, calc(100vh - 40px)); }
.fx-mtg .fx-mfoot .acts { display: flex; gap: 10px; align-items: center; }
.fx-mtg .fx-mfoot .hint { display: inline-flex; gap: 8px; align-items: center; } .fx-mtg .fx-mfoot .hint svg { color: var(--green); }
.fx-mbody.fx-mtgcols { display: grid; grid-template-columns: minmax(0, 1fr) 380px; padding: 0; gap: 0; overflow: hidden; }
.fx-mtgform { padding: 20px 24px 24px; overflow: auto; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.fx-mtgform .t-label { margin-top: 8px; } .fx-mtgform .t-label:first-child { margin-top: 0; }
.fx-mtgform .t-label small { font: 500 12px var(--font); text-transform: none; letter-spacing: 0; margin-left: 6px; color: var(--muted); }
.fx-mtgsee { border-left: 1px solid var(--line); background: var(--surface-2); padding: 20px 22px; overflow: auto; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.fx-mchips { display: flex; flex-wrap: wrap; gap: 8px; }
.fx-mchip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; min-height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2);
  font: 600 13px var(--font); color: var(--text); cursor: pointer; white-space: nowrap; transition: border-color .15s, background .15s; }
.fx-mchip svg { color: var(--muted); } .fx-mchip:hover { border-color: var(--subtle); }
.fx-mchip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.fx-mchip.on { border-color: var(--orange); background: color-mix(in srgb, var(--orange) 12%, var(--surface-2)); } .fx-mchip.on svg { color: var(--orange); }
.fx-mchips[data-k=fmt] .fx-mchip.on { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 14%, var(--surface-2)); } .fx-mchips[data-k=fmt] .fx-mchip.on svg { color: var(--blue); }
#mt_quick .fx-mchip { border-radius: 999px; padding: 6px 14px; min-height: 34px; } #mt_quick .fx-mchip.on { background: var(--orange); color: #fff; border-color: var(--orange); } #mt_quick .fx-mchip.on svg { color: #fff; }
.fx-minput { display: flex; align-items: center; gap: 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 0 14px; min-height: 46px; color: var(--muted); }
.fx-minput:focus-within { border-color: var(--orange); }
.fx-minput input { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 12px 0 !important; margin: 0 !important; font: 500 15px var(--font); color: var(--text); outline: none; }
.fx-minput .sfx { font: 500 13px var(--font); color: var(--subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.fx-mwhen { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: 10px; }
.fx-mdur { display: flex; gap: 2px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 4px; align-items: stretch; }
.fx-mdur button { border: 0; background: none; color: var(--muted); font: 600 13px var(--font); padding: 0 12px; border-radius: 7px; cursor: pointer; min-width: 40px; }
.fx-mdur button.on { background: var(--text); color: var(--bg); }
.fx-mcontacts { display: flex; flex-direction: column; gap: 8px; }
.fx-mcontact { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); cursor: pointer; }
.fx-mcontact:has(input:checked) { border-color: var(--orange); background: color-mix(in srgb, var(--orange) 9%, var(--surface-2)); }
.fx-mcontact input { width: 20px !important; height: 20px !important; accent-color: var(--orange); margin: 0 !important; flex: 0 0 auto; }
.fx-mcontact .fx-av { width: 34px; height: 34px; border-radius: 50%; }
.fx-mcontact b { display: block; font: 600 14px var(--font); } .fx-mcontact small { display: block; font: 500 12.5px var(--font); color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.fx-mcontact .grow { flex: 1; min-width: 0; }
.fx-mcc { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .fx-mcc a { color: var(--orange); font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 3px; }
.fx-mpoint { display: flex; align-items: center; gap: 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 4px 8px 4px 12px; margin-bottom: 8px; }
.fx-mpoint:focus-within { border-color: var(--orange); }
.fx-mpoint .n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; font: 700 12px var(--font); color: var(--orange); background: color-mix(in srgb, var(--orange) 15%, transparent); }
.fx-mpoint input { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; margin: 0 !important; padding: 10px 0 !important; font: 500 15px var(--font); color: var(--text); outline: none; }
.fx-mpoint .x { border: 0; background: none; color: var(--subtle); cursor: pointer; padding: 6px; border-radius: 6px; display: grid; place-items: center; } .fx-mpoint .x:hover { color: var(--red); }
.fx-maddpt { align-self: flex-start; border: 0; background: none; color: var(--muted); font: 600 13px var(--font); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 2px 0; } .fx-maddpt:hover { color: var(--text); }
.fx-mseehd { display: flex; justify-content: space-between; align-items: center; } .fx-mseehd .live { font: 600 12px var(--font); color: var(--green); }
.fx-mmeta { font: 500 12.5px/1.6 var(--font); color: var(--text); } .fx-mmeta span { color: var(--muted); margin-right: 4px; }
.fx-mmail { --b: #FF6A00; border-radius: 14px; overflow: hidden; background: #fff; color: #1B1612; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
.fx-mmail .top { background: #17130E; color: #fff; display: flex; align-items: center; gap: 10px; padding: 12px 16px; font: 700 13px var(--font); }
.fx-mmail .lg { width: 24px; height: 24px; border-radius: 6px; background: var(--b); color: #fff; display: grid; place-items: center; font: 800 13px var(--font); }
.fx-mmail .bd { padding: 16px; display: flex; flex-direction: column; gap: 10px; font: 500 12.5px/1.45 var(--font); }
.fx-mmail .hi { font: 600 14px var(--font); } .fx-mmail p { margin: 0; color: #3B342E; }
.fx-mmail .when { border-left: 3px solid var(--b); background: color-mix(in srgb, var(--b) 8%, #fff); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.fx-mmail .when div { display: flex; gap: 8px; align-items: center; } .fx-mmail .when svg { color: var(--b); } .fx-mmail .when b { font-weight: 600; }
.fx-mmail .cov { font: 700 12.5px var(--font); } .fx-mmail ol { margin: 0; padding-left: 18px; color: #3B342E; display: flex; flex-direction: column; gap: 4px; }
.fx-mmail .btns { display: flex; gap: 8px; flex-wrap: wrap; } .fx-mmail .btns span { padding: 7px 12px; border-radius: 7px; font: 600 12px var(--font); }
.fx-mmail .acc { background: var(--b); color: #fff; } .fx-mmail .alt { border: 1px solid #D8D0C8; color: #1B1612; }
.fx-mmail .sig { color: #8A8178; font-size: 12px; }
.fx-mnone { display: flex; align-items: center; gap: 8px; border: 1px dashed var(--line); border-radius: 10px; padding: 12px 14px; font: 500 12.5px var(--font); color: var(--muted); }
.fx-mpast { display: grid; grid-template-columns: 10px 1fr; column-gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--surface); font: 500 12px/1.4 var(--font); }
.fx-mpast i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); margin-top: 4px; grid-row: span 2; } .fx-mpast b { font-weight: 600; } .fx-mpast span { color: var(--muted); }
.fx-mframe { width: 100%; flex: 1; min-height: 480px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.fx-msend { background: var(--orange) !important; border-color: var(--orange) !important; color: #fff !important; display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; font-size: 14.5px; }
.fx-mprev { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; }
.fx-mcancel { border: 0 !important; background: none !important; }
@media (max-width: 900px) { .fx-mbody.fx-mtgcols { grid-template-columns: 1fr; overflow: auto; } .fx-mtgform, .fx-mtgsee { overflow: visible; } .fx-mtgsee { border-left: 0; border-top: 1px solid var(--line); } .fx-mwhen { grid-template-columns: 1fr 1fr; } .fx-mdur { grid-column: span 2; } .fx-mtg { height: calc(100vh - 40px); } }
.fx-mtg .fx-mfoot .acts > .fx-mprev { padding: 10px 16px !important; border: 1px solid var(--line) !important; border-radius: 10px; }
.fx-mtg .fx-mfoot .acts > .fx-msend { padding: 12px 20px !important; border-radius: 10px; }
.fx-mtg .fx-mfoot .acts > .fx-mcancel { padding: 10px 12px !important; }
.fx-mmail .top { justify-content: flex-start; text-align: left; }

/* ── v10.20.0 · admin pages to Figma 20–25 (page head, Users & access) ── */
.fx-admhead { align-items: flex-end; } .fx-admhead h1 { font-size: 32px; line-height: 40px; margin-top: 6px; }
.fx-admcrumb { display: flex; align-items: center; gap: 10px; font: 500 12.5px var(--font); color: var(--muted); } .fx-admcrumb .fx-pill { font-weight: 700; letter-spacing: .02em; }
.fx-admhead .sub { max-width: 780px; }
.fx-hbtnline { background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--line) !important; text-decoration: none; }
.fx-av.round { border-radius: 50%; width: 36px; height: 36px; font-size: 12px; }
.fx-ucols { grid-template-columns: minmax(0, 1fr) 336px; }
.fx-urow { display: grid; grid-template-columns: 36px minmax(0, 1fr) 132px 40px 196px; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.fx-urow.hd { background: none; padding-top: 0; padding-bottom: 0; } .fx-urow.hd .t-label { font-size: 10px; } .fx-urow.hd .acc { justify-content: flex-end; }
.fx-urow .who { min-width: 0; } .fx-urow .who b { display: flex; align-items: center; gap: 8px; font: 600 14px var(--font); }
.fx-urow .who small { display: block; font: 500 12.5px var(--font); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-urow .open { font: 700 14px var(--font); text-align: left; } .fx-urow .acc { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.fx-urow.inv { background: color-mix(in srgb, var(--yellow) 7%, var(--surface-2)); border: 1px dashed color-mix(in srgb, var(--yellow) 60%, transparent); }
.fx-urow.off { opacity: .55; }
.fx-rolesel { --c: var(--teal); position: relative; display: inline-flex; align-items: center; border: 1px solid color-mix(in srgb, var(--c) 50%, transparent); background: color-mix(in srgb, var(--c) 12%, transparent); border-radius: 8px; color: var(--c); font: 600 12.5px var(--font); }
.fx-rolesel select { appearance: none; -webkit-appearance: none; border: 0 !important; background: transparent !important; color: var(--c) !important; font: 600 12.5px var(--font); padding: 6px 26px 6px 10px !important; margin: 0 !important; width: 116px !important; cursor: pointer; box-shadow: none !important; }
.fx-rolesel::after { content: "▾"; position: absolute; right: 9px; font-size: 10px; pointer-events: none; }
.fx-rolesel.ro { padding: 6px 10px; } .fx-rolesel.ro::after { content: none; }
.fx-invd { font: 700 12.5px var(--font); color: var(--yellow); margin-right: 2px; }
.fx-relink { color: var(--yellow) !important; border-color: color-mix(in srgb, var(--yellow) 45%, transparent) !important; background: color-mix(in srgb, var(--yellow) 12%, transparent) !important; display: inline-flex; gap: 4px; align-items: center; }
.fx-umore { position: relative; width: 28px; flex: 0 0 auto; } .fx-umore summary { list-style: none; cursor: pointer; color: var(--muted); display: grid; place-items: center; height: 28px; border-radius: 7px; } .fx-umore summary::-webkit-details-marker { display: none; }
.fx-umore summary:hover { color: var(--text); background: var(--surface-3); }
.fx-umore > div { position: absolute; right: 0; top: 32px; z-index: 30; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 4px; box-shadow: 0 12px 30px rgba(0, 0, 0, .35); min-width: 140px; }
.fx-umore > div button { display: block; width: 100%; text-align: left; border: 0; background: none; color: var(--red); font: 600 13px var(--font); padding: 8px 10px; border-radius: 7px; cursor: pointer; } .fx-umore > div button:hover { background: var(--surface-2); }
.fx-udup { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--yellow) 8%, var(--surface-2)); font: 500 13px/1.45 var(--font); } .fx-udup > svg { color: var(--yellow); flex: 0 0 auto; } .fx-udup .grow { flex: 1; }
.fx-seg.sm { padding: 3px; } .fx-seg.sm button { padding: 6px 12px; font-size: 12px; } .fx-seg.sm button.on { background: var(--surface-3); color: var(--text); }
.fx-roleseg { display: flex; width: 100%; } .fx-roleseg button { flex: 1; padding: 9px 6px; } .fx-roleseg button.on { background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--c); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent); }
.fx-roleseg button:disabled { opacity: .4; cursor: not-allowed; }
.fx-btnfull { width: 100%; justify-content: center; display: inline-flex; align-items: center; gap: 8px; }
.fx-rmx { display: grid; grid-template-columns: minmax(0, 1fr) 44px 44px 52px; align-items: center; gap: 4px; font: 700 10.5px var(--mono); letter-spacing: .06em; text-align: center; }
.fx-rmx.row { background: var(--surface-2); border-radius: 10px; padding: 10px 10px; font: 500 13px/1.35 var(--font); letter-spacing: 0; } .fx-rmx.row > span:first-child { text-align: left; }
.fx-rdot { --c: var(--teal); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto; color: var(--c); background: color-mix(in srgb, var(--c) 20%, transparent); }
.fx-rdash { color: var(--subtle); }
.fx-envbox { background: var(--surface-2); border-radius: 10px; padding: 10px 12px; line-height: 1.6; word-break: break-word; }
.fx-invcard { border-color: color-mix(in srgb, var(--green) 55%, var(--line)); background: color-mix(in srgb, var(--green) 5%, var(--surface)); }
.fx-invlink { display: flex; align-items: center; gap: 8px; background: var(--surface-2); border-radius: 10px; padding: 6px 6px 6px 12px; }
.fx-invlink input { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; margin: 0 !important; padding: 6px 0 !important; font: 500 12.5px var(--font); color: var(--muted); }
.fx-invlink .fx-sbtn { color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent); border-color: transparent; }
@media (max-width: 1180px) { .fx-ucols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .fx-urow { grid-template-columns: 36px minmax(0, 1fr) auto; } .fx-urow .open, .fx-urow.hd { display: none; } .fx-urow .acc { grid-column: 1 / -1; justify-content: flex-start; } }

/* ── v10.20.0 · Brands & CI (Figma 1623:5638) ── */
.fx-btabs { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fx-btabs button { border: 1px solid var(--line); background: var(--surface); color: var(--text); font: 600 13px var(--font); padding: 8px 14px; border-radius: 999px; cursor: pointer; }
.fx-btabs button.on { border-color: var(--violet); background: color-mix(in srgb, var(--violet) 16%, var(--surface)); }
.fx-btabs .t-small { margin-left: 10px; }
.fx-bcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.fx-bcard { text-align: left; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 18px 20px; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; row-gap: 12px; cursor: pointer; transition: border-color .15s; }
.fx-bcard:hover { border-color: var(--subtle); } .fx-bcard.on { border: 2px solid var(--violet); padding: 17px 19px; }
.fx-bcard .nm b { display: block; font: 600 15px var(--font); } .fx-bcard .nm small { font: 500 12.5px var(--font); color: var(--muted); }
.fx-bcard .sw, .fx-bcard .fx-bar, .fx-bcard .ft { grid-column: 1 / -1; }
.fx-bcard .sw { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .fx-bcard .sw i { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .15); }
.fx-bcard .sw code { font: 600 11px var(--mono); color: var(--muted); margin-right: 6px; } .fx-bcard .sw b { font: 600 13px var(--font); }
.fx-bcard .ft { display: flex; justify-content: space-between; align-items: center; font: 500 12.5px var(--font); color: var(--muted); }
.fx-blogo { --b: #FF6A00; width: 36px; height: 36px; border-radius: 10px; background: var(--b); color: #fff; display: grid; place-items: center; font: 800 16px var(--font); flex: 0 0 auto; }
.fx-bcols { grid-template-columns: minmax(0, 1fr) 372px; }
.fx-bed { gap: 12px; }
.fx-bsec { font: 700 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.fx-bsec::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.fx-bgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 12px; } .fx-bgrid.one { grid-template-columns: 1fr; } .fx-bgrid.three { grid-template-columns: 70px 1fr 1fr; gap: 8px; }
.fx-bf { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .fx-bf input { margin: 0 !important; width: 100%; }
.fx-bf.bad label { color: var(--red); } .fx-bf.bad input { border-color: color-mix(in srgb, var(--red) 70%, transparent) !important; }
.fx-bsw { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding-left: 12px; background: var(--surface-2); }
.fx-bsw i { width: 20px; height: 20px; border-radius: 5px; flex: 0 0 auto; border: 1px solid rgba(255, 255, 255, .15); } .fx-bsw input { border: 0 !important; background: transparent !important; }
.fx-bimg { display: flex; align-items: center; gap: 12px; border: 1px dashed var(--line); border-radius: 12px; padding: 10px 12px; }
.fx-bimg img, .fx-bimg .ph { width: 40px; height: 40px; border-radius: 8px; object-fit: contain; background: #0b0b1a; flex: 0 0 auto; display: grid; place-items: center; color: #fff; font: 800 14px var(--font); }
.fx-bimg .grow { flex: 1; min-width: 0; } .fx-bimg b { display: block; font: 600 13px var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-bimg input { border: 0 !important; background: transparent !important; padding: 2px 0 !important; font-size: 12px !important; color: var(--muted) !important; height: auto !important; min-height: 0 !important; }
.fx-bmodes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; background: var(--surface-2); border-radius: 12px; padding: 4px; }
.fx-bmodes button { text-align: left; border: 1px solid transparent; background: none; color: var(--text); border-radius: 9px; padding: 10px 12px; cursor: pointer; font: inherit; }
.fx-bmodes button b { display: flex; align-items: center; gap: 6px; font: 600 13px var(--font); } .fx-bmodes button b i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--muted); }
.fx-bmodes button span { display: block; font: 500 12px var(--font); color: var(--muted); margin-top: 2px; }
.fx-bmodes button.on { border-color: var(--violet); background: color-mix(in srgb, var(--violet) 14%, transparent); } .fx-bmodes button.on b i { background: var(--text); border-color: var(--text); }
.fx-bsmtp.dim { opacity: .45; }
.fx-bfoot { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--line); padding-top: 14px; flex-wrap: wrap; } .fx-bfoot > span { flex: 1; font: 500 12.5px var(--font); min-width: 200px; }
.fx-bmail { --b: #FF6A00; --b2: #17130E; border-radius: 14px; overflow: hidden; background: #fff; color: #1B1612; }
.fx-bmail .top { background: var(--b2); color: #fff; display: flex; align-items: center; gap: 10px; padding: 12px 16px; font: 700 13px var(--font); } .fx-bmail .bar { height: 3px; background: var(--b); }
.fx-bmail .bd { padding: 16px; display: flex; flex-direction: column; gap: 10px; font: 500 13px/1.45 var(--font); } .fx-bmail .bd p { margin: 0; color: #3B342E; }
.fx-bmail .cta { align-self: flex-start; background: var(--b); color: #fff; font: 700 12.5px var(--font); padding: 8px 14px; border-radius: 7px; }
.fx-bmail .ft { background: #F3EFEB; padding: 12px 16px; font: 500 12px var(--font); color: #6E675D; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.fx-bmail .miss { color: #DC2626; background: #FDECEC; padding: 2px 8px; border-radius: 5px; font-weight: 600; }
.fx-bportal { display: flex; align-items: center; gap: 12px; background: var(--b2); border-radius: 12px; padding: 12px 14px; color: #fff; } .fx-bportal b { display: block; font: 700 13.5px var(--font); } .fx-bportal small { font: 500 12px var(--font); opacity: .8; }
.fx-switchrow { display: flex; align-items: center; gap: 10px; font: 600 13px var(--font); cursor: pointer; }
@media (max-width: 1180px) { .fx-bcols { grid-template-columns: minmax(0, 1fr); } .fx-bcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .fx-bcards, .fx-bgrid, .fx-bmodes { grid-template-columns: 1fr; } }

/* ── v10.20.0 · Integrations (Figma 1635:5867) ── */
.fx-itile { border-color: color-mix(in srgb, var(--c) 45%, var(--line)); } .fx-itile .n { color: var(--c); } .fx-itile .l { margin-top: -6px; }
.fx-igrid { display: grid; gap: 16px; } .fx-igrid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .fx-igrid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fx-igrid .fx-card { gap: 10px; }
.fx-ihead { display: flex; gap: 12px; align-items: flex-start; } .fx-ihead .grow { flex: 1; min-width: 0; } .fx-ihead b { display: block; font: 600 15px var(--font); } .fx-ihead small { display: block; font: 500 12.5px/1.35 var(--font); color: var(--muted); }
.fx-ikv { display: flex; justify-content: space-between; gap: 12px; font: 500 13px var(--font); } .fx-ikv span { color: var(--muted); } .fx-ikv b { font-weight: 600; text-align: right; }
.fx-ibox { background: color-mix(in srgb, var(--yellow) 6%, var(--surface-2)); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.fx-imap { display: grid; grid-template-columns: 90px 1fr 54px; align-items: center; gap: 10px; font: 500 12.5px var(--font); } .fx-imap b { color: var(--yellow); text-align: right; }
.fx-ibtns { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; margin-top: auto; } .fx-ibtns > * { justify-content: center; text-align: center; }
@media (max-width: 1180px) { .fx-igrid.three, .fx-igrid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .fx-igrid.three, .fx-igrid.four { grid-template-columns: 1fr; } }

/* ── v10.20.0 · Org overview to Figma 1570:1028 (client rows, team workload, health / users / brands rail) ── */
.fx-orgtbl td { vertical-align: middle; }
.fx-orgcl { display: flex; align-items: center; gap: 12px; } .fx-orgcl .fx-av { width: 30px; height: 30px; border-radius: 8px; } .fx-orgcl b { display: block; font: 600 13.5px var(--font); } .fx-orgcl .t-small { display: block; }
.fx-orgbar { display: flex; align-items: center; gap: 12px; } .fx-orgbar .fx-bar { flex: 1; min-width: 80px; } .fx-orgbar .t-small { white-space: nowrap; min-width: 72px; text-align: right; }
.fx-orgtime { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border: 1px solid var(--line); border-radius: 999px; font: 600 12px var(--font); color: var(--muted); white-space: nowrap; }
.fx-orgmore { align-self: flex-start; font: 600 13px var(--font); color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } .fx-orgmore:hover { color: var(--text); }
.fx-orgcols { grid-template-columns: minmax(0, 1fr) 372px; }
.fx-wlrow { display: grid; grid-template-columns: 36px minmax(0, 1fr) minmax(80px, 180px) 64px 92px; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.fx-wlrow .who { min-width: 0; } .fx-wlrow .who b { display: block; font: 600 14px var(--font); } .fx-wlrow .who small { display: flex; align-items: center; gap: 8px; font: 500 12px var(--font); color: var(--muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fx-wlrow .n { font: 600 13px var(--font); white-space: nowrap; } .fx-wlrow .ov { text-align: right; }
.fx-rtag { --c: var(--teal); font: 700 9.5px var(--mono); letter-spacing: .06em; padding: 1px 6px; border-radius: 4px; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); flex: 0 0 auto; }
.fx-hrow { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); text-decoration: none; color: var(--text); }
.fx-hrow:hover { background: var(--surface-3); } .fx-hrow > i { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.fx-hrow .grow { flex: 1; min-width: 0; } .fx-hrow b { display: block; font: 600 13.5px var(--font); } .fx-hrow small { display: block; font: 500 12px var(--font); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-hrow .k { font: 700 10.5px var(--mono); letter-spacing: .06em; }
.fx-urole3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .fx-urole3 > div { border-radius: 10px; padding: 10px 12px; background: color-mix(in srgb, var(--c) 12%, var(--surface-2)); }
.fx-urole3 b { display: block; font: 800 20px var(--font); color: var(--c); } .fx-urole3 span { font: 500 12px var(--font); color: var(--muted); }
.fx-uinv { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--yellow) 55%, transparent); background: color-mix(in srgb, var(--yellow) 8%, var(--surface-2)); }
.fx-uinv > svg { color: var(--yellow); } .fx-uinv .grow { flex: 1; min-width: 0; } .fx-uinv b { display: block; font: 600 13px var(--font); } .fx-uinv small { font: 500 12px var(--font); color: var(--muted); }
.fx-uinv .fx-sbtn { color: var(--yellow); }
.fx-brow { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); text-decoration: none; color: var(--text); } .fx-brow:hover { background: var(--surface-3); }
.fx-brow .grow { flex: 1; min-width: 0; } .fx-brow b { display: block; font: 600 13.5px var(--font); } .fx-brow small { font: 500 12px var(--font); color: var(--muted); }
@media (max-width: 1180px) { .fx-orgcols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .fx-wlrow { grid-template-columns: 36px minmax(0, 1fr) auto; } .fx-wlrow .fx-bar { grid-column: 1 / -1; } }
#maintOut:empty, #aiOut:empty { display: none; }

/* ── v10.20.0 · client Manage tab (Figma 1623:6470) ── */
.fx-mngcols { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.fx-mtiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .fx-mtiles > div { background: var(--surface-2); border-radius: 12px; padding: 12px 14px; }
.fx-mtiles b { display: block; font: 700 18px/24px var(--font); } .fx-mtiles span { font: 500 12px var(--font); color: var(--muted); }
.fx-mreopen { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--yellow) 55%, var(--line)); background: color-mix(in srgb, var(--yellow) 5%, var(--surface-2)); }
.fx-mreopen .grow { flex: 1; } .fx-mreopen b { display: block; font: 600 13.5px var(--font); } .fx-mreopen span { font: 500 12px/1.4 var(--font); color: var(--muted); }
.fx-mclose { display: flex; align-items: center; gap: 12px; justify-content: space-between; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 12px; }
.fx-mprompt { display: flex; align-items: center; gap: 12px; background: var(--surface-2); border-radius: 12px; padding: 12px 14px; } .fx-mprompt .grow { flex: 1; min-width: 0; }
.fx-mprompt b { display: block; font: 600 13.5px var(--font); } .fx-mprompt span { font: 500 12px var(--font); color: var(--muted); } .fx-mprompt a { color: var(--violet); font: 600 13px var(--font); text-decoration: none; }
.fx-meng { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.fx-meng > div { --c: var(--orange); position: relative; border: 1px solid color-mix(in srgb, var(--c) 55%, var(--line)); background: color-mix(in srgb, var(--c) 8%, var(--surface-2)); border-radius: 12px; padding: 12px; }
.fx-meng b { display: block; font: 600 13px var(--font); padding-right: 24px; } .fx-meng span { font: 500 12px var(--font); color: var(--muted); }
.fx-meng i { position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; border-radius: 5px; background: var(--c); color: #fff; display: grid; place-items: center; }
.fx-mstat3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; background: var(--surface-2); border-radius: 12px; padding: 12px 14px; }
.fx-mstat3 b { display: block; font: 700 17px var(--font); } .fx-mstat3 span { font: 500 12px var(--font); color: var(--muted); }
.fx-violet { background: var(--violet) !important; color: #fff !important; border-color: var(--violet) !important; display: inline-flex; gap: 6px; align-items: center; }
.fx-mselect { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); background: var(--surface-2); border-radius: 10px; padding-left: 12px; } .fx-mselect > i { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; }
.fx-mselect select { flex: 1; border: 0 !important; background-color: transparent !important; margin: 0 !important; box-shadow: none !important; }
.fx-mteam { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fx-mtchip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 3px 3px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font: 600 12.5px var(--font); }
.fx-mtchip .fx-av { width: 22px; height: 22px; font-size: 10px; } .fx-mtchip button { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 2px; display: grid; place-items: center; } .fx-mtchip button:hover { color: var(--red); }
.fx-mtadd { position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 999px; border: 1px dashed var(--line); font: 600 12.5px var(--font); color: var(--muted); cursor: pointer; }
.fx-mtadd select { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100% !important; margin: 0 !important; }
.fx-mdashed { border: 1px dashed var(--line); background: none; color: var(--muted); font: 600 13px var(--font); border-radius: 10px; padding: 10px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .fx-mdashed:hover { color: var(--text); border-color: var(--subtle); }
.fx-mng .fx-cred .fx-sbtn:not(.fx-iconbtn) { color: var(--yellow); border-color: color-mix(in srgb, var(--yellow) 45%, transparent); background: color-mix(in srgb, var(--yellow) 10%, transparent); }
.fx-mdanger { border-color: color-mix(in srgb, var(--red) 45%, var(--line)); } .fx-mdanger h3 { margin: 0; font: 700 15px var(--font); color: var(--red); display: flex; gap: 8px; align-items: center; }
@media (max-width: 1180px) { .fx-mngcols { grid-template-columns: minmax(0, 1fr); } .fx-meng { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .fx-mtiles, .fx-mstat3 { grid-template-columns: 1fr; } }
.fx-violet:disabled { opacity: .5; cursor: not-allowed; } .fx-mng .fx-pw { display: none; }

/* ── v10.21.0 · delete uploaded files (Teneal, 6 Nov) ── */
.as-attach { display: flex; gap: 8px; align-items: center; }
.as-bintog { display: inline-flex; align-items: center; gap: 6px; color: var(--red) !important; border-color: color-mix(in srgb, var(--red) 40%, var(--line)) !important; }
.as-bintog.on { background: var(--red) !important; color: #fff !important; border-color: var(--red) !important; }
.as-delnote { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; font: 500 12.5px/1.45 var(--font); color: var(--text); background: color-mix(in srgb, var(--red) 9%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--red) 35%, transparent); }
.as-delnote > svg { color: var(--red); flex: 0 0 auto; }
.as-binbtn { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--red) 45%, transparent); background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); cursor: pointer; }
.as-binbtn:hover { background: var(--red); color: #fff; } .as-binbtn:disabled { opacity: .5; cursor: wait; }

/* ── v10.22.0 · Tasks › All tasks to the Figma task rows (1572:1600): each section a card, page groups as tinted headers, rows with a
   status circle, one meta line, owner, status pill and Open. Scoped to #taskRail so it outranks the injected tk styles. ── */
#taskRail .tk-ph { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 16px 18px 14px; margin: 0 0 16px; }
#taskRail .tk-ph > .tk-phh { font: 700 11px/16px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--phc); padding: 0 0 10px; gap: 10px; }
#taskRail .tk-ph > .tk-phh small { margin-left: 2px; font: 600 11px var(--mono); color: var(--muted); letter-spacing: .04em; }
#taskRail .tk-ph > .tk-phh small::before { content: "· "; }
#taskRail .tk-ph > .tk-phh i { width: 8px; height: 8px; }
#taskRail .tk-ph > .hint { margin: 0 !important; padding: 14px 16px; border: 1px dashed var(--line); border-radius: 12px; font: 500 13px var(--font); color: var(--muted); }
#taskRail .tk-pg { margin: 0 0 10px; border-left: 0; padding: 0; }
#taskRail .tk-pg:last-child { margin-bottom: 0; }
#taskRail .tk-pg .pgh { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin: 0 0 6px; border-radius: 10px; background: color-mix(in srgb, var(--phc) 7%, var(--surface-2)); border-left: 3px solid var(--phc); font: 600 12.5px var(--mono); color: var(--text); }
#taskRail .tk-pg .pgh b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
#taskRail .tk-pg .pgh small { font: 500 11.5px var(--font); color: var(--muted); }
#taskRail .tk-pg .pgh::after { content: "›"; font: 600 16px var(--font); color: var(--muted); }
#taskRail .tk-pg .pgh:hover, #taskRail .tk-pg .pgh.cur { background: color-mix(in srgb, var(--phc) 13%, var(--surface-2)); }
#taskRail .tk-items { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; }
#taskRail .tk-items li { display: grid; grid-template-columns: 16px 26px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; margin: 0; border: 1px solid transparent; border-left: 1px solid transparent;
  border-radius: 12px; background: var(--surface-2); color: var(--text); font-size: 14px; }
#taskRail .tk-items li:hover { border-color: var(--line); background: color-mix(in srgb, var(--surface-3) 50%, var(--surface-2)); }
#taskRail .tk-items li.cur { border-color: color-mix(in srgb, var(--orange) 55%, var(--line)); background: var(--surface-2); font-weight: 400; }
#taskRail .tk-items li input.tasksel { width: 16px !important; height: 16px !important; accent-color: var(--orange); }
#taskRail .tk-items li .n { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--subtle); background: transparent; font: 700 12px var(--font); color: var(--muted); }
#taskRail .tk-items li[data-s=done] .n { background: var(--green); border-color: var(--green); color: #fff; }
#taskRail .tk-items li[data-s=run] .n { border-color: var(--orange); color: var(--orange); } #taskRail .tk-items li[data-s=wait] .n { border-color: var(--yellow); color: var(--yellow); } #taskRail .tk-items li[data-s=roll] .n { border-color: var(--violet); color: var(--violet); }
#taskRail .tk-items li .t span { font: 600 14.5px/20px var(--font); color: var(--text); }
#taskRail .tk-items li[data-sel="0"]:not([data-s=done]) .t span { color: var(--muted); font-weight: 500; }
#taskRail .tk-items li .t small { font: 500 12.5px/18px var(--font); color: var(--muted); margin-top: 2px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block; }
#taskRail .tk-items li .t small .tk-pri { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
#taskRail .tk-items li .r { display: flex; flex-direction: row; align-items: center; gap: 10px; }
#taskRail .tk-av { width: 24px; height: 24px; border-radius: 50%; font: 700 10px var(--font); color: #fff; } #taskRail .tk-av.none { background: var(--surface-3); color: var(--muted); }
#taskRail .tk-stp { --c: var(--muted); font: 600 12px var(--font); padding: 3px 10px; border-radius: 999px; color: var(--c); background: color-mix(in srgb, var(--c) 15%, transparent); white-space: nowrap; }
#taskRail .tk-due { font: 600 12px var(--font); white-space: nowrap; }
#taskRail .tk-open { border: 1px solid var(--line); background: var(--surface); color: var(--text); font: 600 13px var(--font); padding: 6px 14px; border-radius: 9px; cursor: pointer; }
#taskRail .tk-open:hover { border-color: var(--subtle); }
#taskRail .tk-items li[data-s=done] .tk-open { background: transparent; }
@media (max-width: 820px) { #taskRail .tk-items li { grid-template-columns: 16px 26px minmax(0, 1fr); } #taskRail .tk-items li .r { grid-column: 3; flex-wrap: wrap; } }
#taskRail .tk-ph[data-ph=arch] > .tk-phh { color: var(--muted); }
#taskRail .tk-archtog { margin-left: auto; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font: 600 12px var(--font); letter-spacing: 0; text-transform: none; padding: 5px 12px; border-radius: 8px; cursor: pointer; }
#taskRail .tk-ph[data-ph=arch] > .hint { border: 0; padding: 0; }
#taskRail .tk-pg[hidden] { display: none; }