/* GrowFleet instance UI - navy command sidebar over a warm light deck.
   Token-matched to growfleet.ai (light theme values + brand navy/amber/mint). */

/* The `hidden` attribute must ALWAYS hide, even when the element also carries a
   class that sets `display` (e.g. .bulkbar{display:flex}). Without this, a class
   selector out-specifies the UA [hidden] rule and the element leaks into view -
   which is exactly why the bulk-rename bar showed before it was clicked. One
   global guard beats patching every class by hand. */
[hidden] { display: none !important; }

:root {
  --navy: #070b14; --navy2: #0c1220; --navy-line: #1d2739; --navy-line2: #2a3852;
  --navy-text: #e9eef8; --navy-muted: #93a1b8; --navy-dim: #5b6880;
  --bg: #f7f5f0; --card: #ffffff; --card2: #faf8f4;
  --line: #e4dfd4; --line2: #d2ccbe;
  /* --dim was #8b93a6 = only ~2.9:1 on white (well below WCAG AA 4.5) - it drives
     every small label/hint/panel-header, so they were all under-contrast. Darkened
     to clear 4.5:1 on white while staying lighter (dimmer) than --muted. */
  --text: #131a2a; --muted: #56617a; --dim: #636e80;
  /* --amber-bright (#ffad33) is THE brand amber - kept for buttons/logo/large.
     --amber and --amber-deep are the small-TEXT accents (links, chip text, labels)
     and were 2.7-3.5:1 on white; darkened just enough to clear WCAG AA 4.5:1 while
     staying clearly amber. (dark theme overrides these separately.) */
  --amber: #e08900; --amber-bright: #ffad33; --amber-deep: #995800;
  --amber-soft: rgba(224, 137, 0, 0.10);
  --green: #0e7857; --green-soft: rgba(20, 151, 107, 0.10);  /* darkened from #14976b to clear AA as small text on white */
  --red: #d64545; --red-soft: rgba(214, 69, 69, 0.08);
  --scan: #3a63a8; --scan-soft: rgba(58, 99, 168, 0.12);  /* "from a scan" provenance - cool, distinct from amber */
  --font-display: "Bricolage Grotesque", sans-serif;
  --font-body: "Instrument Sans", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;
  --shadow: 0 4px 18px rgba(19, 26, 42, 0.07);
  --shadow-lg: 0 18px 44px rgba(19, 26, 42, 0.12);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font-family: var(--font-body); background: var(--bg); color: var(--text);
  line-height: 1.55; -webkit-font-smoothing: antialiased; }
h1 { font-family: var(--font-display); font-weight: 700; font-size: 1.55rem; }
.mono { font-family: var(--font-mono); letter-spacing: .1em; }
a { color: var(--amber-deep); text-decoration: none; }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 4px; }

/* ---------- login (navy backdrop, white card - matches the app shell) ---------- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: var(--navy); }
.login-wrap::before { content: ""; position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(800px 480px at 12% -5%, rgba(255,173,51,.14), transparent 60%),
              radial-gradient(700px 500px at 95% 12%, rgba(62,207,142,.09), transparent 65%); }
.login-card { position: relative; width: 100%; max-width: 400px; background: var(--card);
  border: 1px solid var(--line); border-radius: 20px; padding: 40px 36px; box-shadow: var(--shadow-lg); }
.login-card .lmark { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.login-card .lmark svg { width: 42px; height: 42px; border-radius: 10px; }
.login-card .lmark .wm { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--text); }
.login-card .wm b { color: var(--amber-deep); }
.login-sub { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .16em;
  color: var(--dim); margin-bottom: 26px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-family: var(--font-mono); font-size: .62rem;
  letter-spacing: .14em; color: var(--muted); margin-bottom: 6px; }
.field .pwrap { position: relative; }
.field input { width: 100%; padding: 13px 15px; border-radius: 12px; background: var(--card2);
  border: 1px solid var(--line2); color: var(--text); font-size: 1rem; font-family: var(--font-body); }
.field input:focus { outline: none; border-color: var(--amber); background: var(--card); }
.pwshow { position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--dim); font-family: var(--font-mono);
  font-size: .6rem; letter-spacing: .1em; cursor: pointer; padding: 6px; }
.pwshow:hover { color: var(--text); }
.remember { display: flex; align-items: center; gap: 9px; margin: 4px 0 18px;
  color: var(--muted); font-size: .9rem; }
.remember input { accent-color: var(--amber); width: 16px; height: 16px; }
.login-err { display: flex; gap: 8px; align-items: center; background: var(--red-soft);
  border: 1px solid rgba(214,69,69,.3); color: var(--red); border-radius: 10px;
  padding: 10px 14px; font-size: .88rem; margin-bottom: 16px; }
.login-note { margin-top: 20px; font-family: var(--font-mono); font-size: .6rem;
  letter-spacing: .12em; color: var(--dim); text-align: center; }

/* ---------- buttons ---------- */
.btn { display: inline-block; padding: 11px 20px; border-radius: 11px; font-weight: 600;
  font-size: .93rem; border: 1px solid var(--line2); background: var(--card);
  color: var(--text); cursor: pointer; transition: all .18s ease; white-space: nowrap; }
.btn:hover { border-color: var(--amber); transform: translateY(-1px); box-shadow: var(--shadow); }
.btn.amber { background: linear-gradient(180deg, var(--amber-bright), #f29718);
  color: #1a1206; border-color: transparent; box-shadow: 0 4px 14px rgba(242,151,24,.3); }
.btn.amber:hover { box-shadow: 0 8px 20px rgba(242,151,24,.38); }
/* Icons on amber-FILLED buttons: the house glyphs carry an amber (#f29718) accent
   stroke that all but vanishes on an amber background (fails WCAG 1.4.11's 3:1 for
   non-text). Force every stroke to the button's dark text colour so the WHOLE glyph
   reads clearly - fixes the copy, check ("I've posted this") and sparkle glyphs. */
.btn.amber .bic svg [stroke] { stroke: #1a1206; }
.btn.wide { width: 100%; text-align: center; padding: 14px; }
.btn.danger { background: #cc3c3c; border-color: transparent; color: #fff; } /* darker red so white text clears AA 4.5:1 */
.btn.danger:hover { box-shadow: 0 6px 16px rgba(214,69,69,.3); }
/* House glyphs carry an amber accent stroke that all but vanishes on the red
   danger fill (same WCAG 1.4.11 issue the amber button fixes). Force the whole
   glyph to the button's white text colour so e.g. the trash icon reads clearly. */
.btn.danger .bic svg [stroke] { stroke: #fff; }
.btn[disabled] { opacity: .6; cursor: default; transform: none; }

/* ---------- shell ---------- */
.shell { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.side { background: var(--navy); color: var(--navy-text); padding: 22px 18px 18px;
  display: flex; flex-direction: column; gap: 12px; position: sticky; top: 0; height: 100vh;
  overflow: hidden; }
.brandmark { display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: #fff; }
.brandmark svg { width: 34px; height: 34px; border-radius: 8px; flex: none; }
/* Brand mark artwork (PNG): same 34px rounded badge as the old inline SVG, on the
   --navy2 tile so the transparent icon reads as a framed mark on the dark sidebar. */
.brandmark img { width: 34px; height: 34px; border-radius: 8px; flex: none;
  background: var(--navy2); object-fit: contain; }
.brandmark b { color: var(--amber-bright); }
.tagline { font-family: var(--font-mono); font-size: .56rem; letter-spacing: .22em;
  color: var(--navy-dim); margin: -8px 0 6px 44px; }
.planchip { font-size: .56rem; color: var(--amber-bright); background: rgba(255,173,51,.12);
  border-radius: 999px; padding: 5px 10px; width: fit-content; }
.slabel { font-size: .58rem; color: var(--navy-dim); margin-bottom: -8px; }
.side select { background: var(--navy2); color: var(--navy-text); border: 1px solid var(--navy-line2);
  border-radius: 10px; padding: 9px 10px; font-family: var(--font-body); font-size: .92rem; }
#nav { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; flex: 1;
  min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--navy-line2) transparent; }
#nav::-webkit-scrollbar { width: 6px; }
#nav::-webkit-scrollbar-thumb { background: var(--navy-line2); border-radius: 999px; }
#nav button { text-align: left; background: none; border: none; color: var(--navy-muted);
  padding: 9px 14px; border-radius: 10px; font-size: .93rem; cursor: pointer; flex: none;
  font-family: var(--font-body); transition: all .15s; }
#nav button:hover { color: #fff; background: rgba(255,255,255,.05); }
#nav button.on { color: #fff; background: var(--navy-line); font-weight: 600;
  box-shadow: inset 2px 0 0 var(--amber-bright); }
#nav button[draggable="true"] { cursor: grab; }
#nav button.dragging { opacity: .5; cursor: grabbing; background: rgba(255,255,255,.06);
  outline: 1px dashed var(--navy-line2); }
.navreset { display: block; margin: 6px 6px 2px; padding: 6px 10px; font-size: .74rem;
  color: var(--navy-dim); font-family: var(--font-mono, monospace); letter-spacing: .02em;
  text-decoration: none; border-radius: 8px; cursor: pointer; opacity: .8; }
.navreset:hover { color: #fff; background: rgba(255,255,255,.05); opacity: 1; }
.logout { font-family: var(--font-body); font-size: .92rem; color: var(--navy-muted); padding: 8px 14px; }
.logout:hover { color: #fff; }

/* ---------- main + topbar ---------- */
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; flex-wrap: nowrap; align-items: center; gap: 16px; padding: 18px 38px;
  background: var(--card); border-bottom: 1px solid var(--line); }
/* the title block is the ONLY flex-growing element + min-width:0 so its subtitle
   ellipsis-truncates instead of collapsing the box into a tall word-wide column */
.topbar > .tbtitle { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.topbar h1 { font-size: 1.45rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .spacer { flex: 1; }
/* right cluster: one non-shrinking, right-pinned, single-baseline unit */
.tbright { display: flex; align-items: center; gap: 10px; flex: none; }
.tbright > * { flex: none; }
.tbright .topnav { margin-right: 0; }
.topsupport { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px;
  border-radius: 999px; border: 1px solid var(--line2); background: var(--card);
  color: var(--text); font-family: var(--font-body); font-size: .9rem; font-weight: 600;
  cursor: pointer; transition: border-color .18s, box-shadow .18s, transform .18s; }
.topsupport svg { width: 19px; height: 19px; color: #1c2740; }
.topsupport:hover { border-color: var(--amber); box-shadow: var(--shadow); transform: translateY(-1px); }
.conndot { position: absolute; top: 6px; right: 8px; width: 8px; height: 8px; border-radius: 999px;
  background: var(--green); box-shadow: 0 0 0 2px var(--card); }
.conndot.warn { background: var(--amber); }
.conndot[hidden] { display: none; }
@media (max-width: 640px) { .topsupport span:not(.conndot) { display: none; } .topsupport { padding: 9px 11px; } .tbright { gap: 6px; } }
.whoami { flex: none; white-space: nowrap; text-align: right; line-height: 1.3; }
.whoami b { display: block; font-size: .95rem; }
.whoami span { font-size: .8rem; color: var(--muted); }
@media (max-width: 900px) { .whoami { display: none; } }
/* header storage meter: compact chip in the top bar, shown only on the Media tab
   (JS toggles [hidden]). Taps through to the plan tab to add storage. */
.headstore { display: inline-flex; align-items: center; gap: 9px; flex: none;
  padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--card2); color: var(--text); cursor: pointer; font-family: inherit; line-height: 1; }
.headstore[hidden] { display: none; }
.headstore:hover { border-color: var(--amber); background: rgba(255, 173, 51, .07); }
.headstore:focus-visible { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(255, 173, 51, .25); }
.headstore .hs-lab { font-size: .56rem; letter-spacing: .13em; color: var(--muted); }
.headstore .hs-bar { width: 90px; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.headstore .hs-bar > i { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--green), #3ecf8e); transition: width .4s; }
.headstore.warn .hs-bar > i { background: linear-gradient(90deg, var(--amber-bright), #f29718); }
.headstore.full .hs-bar > i { background: linear-gradient(90deg, #f07b7b, var(--red)); }
.headstore .hs-val { font-size: .72rem; font-weight: 600; white-space: nowrap; }
.headstore.warn .hs-val { color: var(--amber-deep); }
.headstore.full .hs-val { color: var(--red); }
:root[data-theme="dark"] .headstore .hs-bar { background: rgba(255, 255, 255, .10); }
/* phone: the top bar sheds its right cluster, so the meter wraps to its own slim
   full-width row under the title (no pill), never forcing sideways scroll. */
@media (max-width: 760px) {
  .topbar { flex-wrap: wrap; }
  .headstore { order: 2; flex: 1 1 100%; justify-content: flex-start;
    border: 0; background: transparent; padding: 4px 0 0; }
  .headstore:hover { background: transparent; }
  .headstore .hs-bar { flex: 1 1 auto; width: auto; max-width: 260px; }
}
/* desktop: the storage meter sits on the YOUR LIBRARY asset-count row (a compact
   chip, right-aligned next to the count) instead of the top bar; mobile keeps the
   top-bar chip. .libstore mirrors .headstore's look. */
.libstatrow { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.libstatrow #mediaCount { color: var(--muted); }
.libstore { display: inline-flex; align-items: center; gap: 9px; flex: none;
  padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--card2); color: var(--text); cursor: pointer; font-family: inherit; line-height: 1; }
.libstore[hidden] { display: none; }
.libstore:hover { border-color: var(--amber); background: rgba(255, 173, 51, .07); }
.libstore:focus-visible { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(255, 173, 51, .25); }
.libstore .hs-lab { font-size: .56rem; letter-spacing: .13em; color: var(--muted); }
.libstore .hs-bar { width: 90px; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.libstore .hs-bar > i { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--green), #3ecf8e); transition: width .4s; }
.libstore.warn .hs-bar > i { background: linear-gradient(90deg, var(--amber-bright), #f29718); }
.libstore.full .hs-bar > i { background: linear-gradient(90deg, #f07b7b, var(--red)); }
.libstore .hs-val { font-size: .72rem; font-weight: 600; white-space: nowrap; }
.libstore.warn .hs-val { color: var(--amber-deep); }
.libstore.full .hs-val { color: var(--red); }
:root[data-theme="dark"] .libstore .hs-bar { background: rgba(255, 255, 255, .10); }
/* pick ONE per width: desktop = in-panel chip, mobile = top-bar chip (unchanged) */
@media (min-width: 761px) { .headstore { display: none; } }
@media (max-width: 760px) { .libstore { display: none; } .libstatrow { margin-bottom: 10px; } }
.content { --content-inset-top: 30px; padding: 30px 38px 48px; max-width: 1200px; width: 100%; }
.tab { display: none; }
.tab.on { display: block; }
.tab > h1 { display: none; } /* page title lives in the topbar */

/* ---------- panels + cards ---------- */
.panel { background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  overflow: hidden; margin-bottom: 20px; box-shadow: var(--shadow); }
.phead { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em; color: var(--dim);
  padding: 14px 20px; border-bottom: 1px solid var(--line); background: var(--card2); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
  gap: 16px; margin-bottom: 22px; }
.kcard { background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 18px 20px; box-shadow: var(--shadow); }
.kcard b { display: block; font-family: var(--font-display); font-size: 1.65rem; }
.kcard span { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .12em; color: var(--dim); }
.kcard .up { color: var(--green); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0; }
/* Post-editor action bar (SPEC_POST_FROM_PHONE feedback). Research-backed hierarchy:
   the amber primary leads; the destructive Remove stays danger-coded but is OUTLINED,
   not a filled block that competes with the primary. */
.detail .actions .btn.danger { background: transparent; color: var(--red);
  border-color: rgba(214, 69, 69, .3); box-shadow: none; }
.detail .actions .btn.danger:hover { background: var(--red-soft); border-color: var(--red);
  transform: translateY(-1px); }
/* On a phone the buttons form a clean 2-col grid instead of a ragged flex-wrap: the
   amber primary + the long publish actions each take a full row; Save + Remove share
   the last row. Every button is full-bleed within its cell, so nothing wraps ragged. */
@media (max-width: 760px) {
  .detail .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 0; }
  .detail .actions .btn { width: 100%; margin: 0; }
  .detail .actions .btn.amber,
  .detail .actions #dPostNow,
  .detail .actions #dPhonePost,
  .detail .actions #dRecall,
  .detail .actions .btn[disabled] { grid-column: 1 / -1; }
  /* Campaign card actions: the same clean grid, buttons a touch smaller so the longer
     labels pair 2-across - Approve full-width, then Show-in-calendar | Open-in-Posts and
     Details | Delete in two tidy rows (3 rows total, not a ragged 4-5). */
  .crplan[data-planid] .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .crplan[data-planid] .actions .btn { width: 100%; margin: 0; padding: 10px 10px; font-size: .84rem; }
  .crplan[data-planid] .actions .btn .bic { width: 14px; height: 14px; margin-right: 5px; }
  .crplan[data-planid] .actions .btn.amber { grid-column: 1 / -1; }
}
.hint { color: var(--dim); font-size: .85rem; margin-top: 10px; }
.empty { color: var(--dim); font-size: .66rem; padding: 34px; text-align: center; }
.statusbars { padding: 18px 20px; display: grid; gap: 11px; }
.sbar { display: grid; grid-template-columns: 110px 1fr 40px; gap: 12px; align-items: center;
  font-family: var(--font-mono); font-size: .64rem; color: var(--muted); }
.sbar .track { height: 10px; border-radius: 6px; background: var(--bg); overflow: hidden; }
.sbar .fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--amber-bright), var(--amber)); }
.sbar.g .fill { background: linear-gradient(90deg, #2fbf87, var(--green)); }

/* ---------- queue ---------- */
.filters { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.filters button { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .1em;
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line2);
  background: var(--card); color: var(--muted); cursor: pointer; }
.filters button.on { color: var(--amber-deep); background: var(--amber-soft); border-color: transparent; font-weight: 700; }
/* minmax(0,1fr) not 1fr: plain 1fr tracks default to min-width:auto, so a wide
   child (e.g. the ticket form) blows out its track and crushes the other to a
   sliver - that made the support thread render 2px wide ("nothing happens"). */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px; align-items: start; }
.listpane { max-height: 62vh; overflow-y: auto; }
.qrow { display: flex; gap: 12px; align-items: center; padding: 15px 18px;
  border-bottom: 1px solid var(--line); cursor: pointer; transition: background .12s; }
.qrow:last-child { border-bottom: 0; }
/* "showing one campaign" banner atop the list */
.qplanbar { display: flex; align-items: center; gap: 9px; margin: 12px 14px; padding: 10px 14px;
  background: var(--amber-soft); border: 1px solid var(--amber); border-radius: 12px; }
.qplanbar .bic { color: var(--amber-deep); }
.qplanbar-k { font-size: .56rem; letter-spacing: .1em; color: var(--amber-deep); }
.qplanbar-t { font-size: .92rem; color: var(--text); }
.qplanbar-n { font-size: .68rem; color: var(--muted); }
.qrow:hover { background: var(--card2); }
.qrow.sel { background: var(--amber-soft); box-shadow: inset 3px 0 0 var(--amber); }
/* a post that just landed here (Post now / campaign build): a brief amber pulse
   so it is unmissable at the top of the list, then it settles to normal */
.qrow.qrow-new { animation: qNewPulse 2.6s ease both; }
@keyframes qNewPulse {
  0%, 62% { background: var(--amber-soft); box-shadow: inset 4px 0 0 var(--amber), 0 0 0 1px var(--amber-soft); }
  100% { background: none; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .qrow.qrow-new { animation: none; background: var(--amber-soft); box-shadow: inset 4px 0 0 var(--amber); } }
.qrow .t { flex: 1; min-width: 0; }
.qrow .t b { display: block; font-size: .93rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qrow .t span { font-family: var(--font-mono); font-size: .6rem; color: var(--dim); letter-spacing: .08em; }
.pill { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .08em;
  padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line2);
  color: var(--muted); white-space: nowrap; background: var(--card); }
.pill.idea { color: var(--amber-deep); background: var(--amber-soft); border-color: transparent; font-weight: 700; }
.pill.approved, .pill.scheduled { color: var(--green); background: var(--green-soft); border-color: transparent; }
.pill.published { color: var(--green); border-color: transparent; background: var(--card); }

/* ---------- bulk select + delete on the queue ---------- */
/* The contextual toolbar reuses .bulkbar (amber band); it swaps into the actions
   row's spot, so it sits at the bottom with the same margin as .actions. */
.qbulkbar { margin: 18px 0; animation: qbulkIn .18s ease both; }
@keyframes qbulkIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .qbulkbar { animation: none; } }
.qbulkbar #qBulkCount { color: var(--amber-deep); }
/* row tick-box: 22px rounded square on the left, house look. The hit area is the
   whole row (in selmode), but the box itself clears the 24px min target with padding. */
.qcheck { flex: none; width: 22px; height: 22px; margin-right: 2px; border-radius: 7px;
  border: 2px solid var(--line2); background: var(--card); display: inline-flex;
  align-items: center; justify-content: center; color: #fff; transition: all .14s ease; }
.qcheck .qcheck-tick { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.6); transition: all .14s ease; }
.qrow.qselable { cursor: pointer; }
.qrow.qselable:hover { background: var(--card2); }
.qrow.qselable:hover .qcheck { border-color: var(--amber); }
.qrow.qsel { background: var(--amber-soft); box-shadow: inset 3px 0 0 var(--amber); }
.qrow.qsel .qcheck { background: var(--amber); border-color: var(--amber); }
.qrow.qsel .qcheck .qcheck-tick { opacity: 1; transform: none; }
/* ineligible rows (scheduled/published/recalled): visible but plainly not-selectable,
   with a small lock instead of a tick, so Select-all + the count stay honest (NN/g). */
.qrow.qsel-off { cursor: default; opacity: .62; }
.qrow.qsel-off .qcheck { border-style: dashed; border-color: var(--line2); background: var(--card2);
  color: var(--dim); cursor: help; }
.qrow.qsel-off .qcheck .bic { width: 13px; height: 13px; margin: 0; color: var(--dim); }
/* while selecting, the per-row approve toggle + network icons are muted and inert -
   the row is about selection now, so those controls don't compete or misfire. */
#qList.selmode .qapp, #qList.selmode .qnets { pointer-events: none; opacity: .3; }
.qcheck:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.detail { padding: 18px 20px; }
.detail label { display: block; font-family: var(--font-mono); font-size: .6rem;
  letter-spacing: .12em; color: var(--dim); margin: 11px 0 4px; }
/* compact editor: the first comment is a one-liner most of the time */
.detail textarea.dfc { min-height: 58px; }
.detail input[type=text], .detail input[type=email], .detail input[type=url],
.detail input[type=number], .detail input[type=password], .detail input[type=datetime-local],
.detail textarea, .detail select {
  width: 100%; background: var(--card2); border: 1px solid var(--line2); color: var(--text);
  border-radius: 10px; padding: 10px 12px; font-family: var(--font-body); font-size: .92rem; }
.detail input:focus, .detail textarea:focus { outline: none; border-color: var(--amber); background: var(--card); }
.detail textarea { min-height: 110px; resize: vertical; }
.netchips { display: flex; flex-wrap: wrap; gap: 6px; }
.netchip { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .06em;
  padding: 6px 11px; border-radius: 8px; border: 1px solid var(--line2);
  color: var(--dim); cursor: pointer; user-select: none; background: var(--card); }
.netchip.sel { color: var(--green); background: var(--green-soft); border-color: transparent; font-weight: 700; }
.netchip.on { color: var(--amber-deep); background: var(--amber-soft); border-color: var(--amber); font-weight: 700; }
/* campaign-type pills (Create hub "make a campaign") - bigger + clearer */
#crRecipes { display: flex; gap: 10px; flex-wrap: wrap; }
#crRecipes .netchip { font-size: .8rem; letter-spacing: .04em; padding: 11px 16px;
  border-radius: 11px; display: inline-flex; align-items: center; gap: 8px; }
#crRecipes .netchip svg { width: 18px; height: 18px; }
/* Choose-step outcome tiles ("What do you want to post?") - big, icon-led, one per card */
.cropts { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 12px; margin-top: 4px; }
.cropt { display: flex; align-items: center; gap: 13px; text-align: left; padding: 15px 16px;
  border: 1.5px solid var(--line2); border-radius: 14px; background: var(--card); cursor: pointer;
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease; }
.cropt:hover { border-color: var(--amber); box-shadow: var(--shadow); transform: translateY(-2px); }
.cropt:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.cropt.on { border-color: var(--amber); background: var(--amber-soft); }
.cropt .croptic { flex: none; width: 46px; height: 46px; border-radius: 12px; background: var(--amber-soft);
  display: flex; align-items: center; justify-content: center; color: var(--text); }
.cropt .croptic svg { width: 25px; height: 25px; }
.cropt .croptx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cropt .croptx b { font-size: .98rem; font-weight: 700; color: var(--text); line-height: 1.15; }
.cropt .croptx small { font-size: .77rem; color: var(--muted); line-height: 1.25; }
@media (max-width: 560px) { .cropts { grid-template-columns: 1fr; } }
/* trade chips carry a house glyph */
#crPacks .netchip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; font-size: .72rem; }
#crPacks .netchip .bic, #crPacks .netchip svg { width: 16px; height: 16px; margin: 0; }
/* the create-flow ribbon: the whole journey, ending at the calendar */
.crflow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px;
  padding: 12px 14px; background: var(--card2); border: 1px dashed var(--line2); border-radius: 12px;
  font-size: .86rem; color: var(--muted); }
.crflow-s { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--text); }
.crflow-s i { width: 8px; height: 8px; border-radius: 999px; background: var(--amber); }
.crflow-x { color: var(--line2); font-weight: 700; }
.crflow-land { color: var(--amber-deep); font-weight: 700; }
/* inline "scan first" prompt shown inside Make a campaign before items exist */
.crscanfirst { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 15px 17px; border: 1.5px dashed var(--amber); border-radius: 14px; background: var(--amber-soft); }
.crscanfirst .crsfico { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--card);
  display: flex; align-items: center; justify-content: center; }
.crscanfirst .crsfico .bic, .crscanfirst .crsfico svg { width: 24px; height: 24px; margin: 0; }
.crscanfirst .crsftx { flex: 1 1 220px; min-width: 0; }
.crscanfirst .crsftx b { font-size: 1rem; }
.crscanfirst [data-cr-goscan] { flex: none; }
/* E1 - the campaign calendar (every campaign's posts, in its colour) */
.crcalbar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.crcalmonth { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; min-width: 150px; }
.crcalnav { padding: 6px 12px; font-size: 1rem; line-height: 1; }
.crcalfilter { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.crcalfpill { display: inline-flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: 600;
  background: var(--amber-soft); border: 1px solid var(--amber); border-radius: 999px; padding: 4px 5px 4px 10px; }
.crcalfpill .crcalfsw { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.crcalfpill button { border: none; background: var(--card); width: 18px; height: 18px; border-radius: 999px;
  cursor: pointer; color: var(--dim); line-height: 1; font-size: .78rem; }
.crcalfclear { border: none; background: none; color: var(--amber-deep); font: inherit; font-weight: 600;
  font-size: .78rem; text-decoration: underline; cursor: pointer; }
#crPlans [data-cr-showcal].incal { background: var(--amber-soft); border-color: var(--amber); color: var(--amber-deep); font-weight: 700; }
.crcalnote { margin-bottom: 10px; padding: 9px 13px; background: var(--amber-soft); border: 1px solid var(--amber);
  border-radius: 10px; font-size: .82rem; color: var(--amber-deep); font-weight: 600; }
.crcalscroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.crcaldow, .crcalgrid { display: grid; grid-template-columns: repeat(7, 1fr); min-width: 640px; }
.crcaldow { background: var(--card2); border-bottom: 1px solid var(--line); }
.crcaldow span { padding: 7px 9px; font-family: var(--font-mono); font-size: .58rem; letter-spacing: .08em; color: var(--dim); }
.crcalcell { min-height: 96px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 5px 5px 7px; overflow: hidden; }
.crcalcell:nth-child(7n) { border-right: none; }
.crcalcell.out { background: var(--card2); }
.crcaldn { font-family: var(--font-mono); font-size: .68rem; color: var(--dim); display: block; margin-bottom: 4px; }
.crcalcell.today .crcaldn { background: var(--amber-bright); color: #231603; font-weight: 700; border-radius: 6px; padding: 1px 6px; display: inline-block; }
.crcalchip { display: flex; align-items: center; gap: 5px; padding: 3px 6px; border-radius: 6px; background: var(--card);
  border: 1px solid var(--line); margin-bottom: 4px; font-size: .68rem; cursor: pointer;
  transition: opacity .18s, border-color .12s, box-shadow .12s; }
.crcalchip:hover { border-color: var(--amber); box-shadow: 0 2px 8px rgba(19,26,42,.10); }
.crcalchip:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.crcalchip .crcaldot { width: 6px; height: 6px; border-radius: 999px; flex: none; }
.crcalchip .crcaltm { font-family: var(--font-mono); font-size: .58rem; color: var(--dim); flex: none; }
.crcalchip .crcalct { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.crcalgrid.filtered .crcalchip.dimd { opacity: .16; }
.crcallegend { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.crleg-row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.crleg-c { display: inline-flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: 600; color: var(--text);
  background: none; border: 1px solid transparent; border-radius: 999px; padding: 3px 10px 3px 8px; cursor: pointer; font-family: inherit; }
.crleg-c:hover { border-color: var(--line2); }
.crleg-c.on { border-color: var(--amber); background: var(--amber-soft); }
.crleg-c .crleg-sw { width: 12px; height: 12px; border-radius: 4px; flex: none; }
.crleg-st { font-size: .76rem; color: var(--muted); }
.crleg-s { display: inline-flex; align-items: center; gap: 6px; }
.crleg-s i { width: 8px; height: 8px; border-radius: 999px; }
.mediarow { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.mth { width: 74px; height: 74px; border-radius: 10px; border: 1px solid var(--line2);
  background: var(--card2) center/cover; position: relative; cursor: pointer; }
.mth.vid::after { content: "▶"; position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.mth.sel { outline: 2px solid var(--amber); }
.mednorm { flex-basis: 100%; margin-top: 8px; padding: 9px 12px; border-radius: 9px; font-size: 12.5px; line-height: 1.4;
  background: var(--amber-soft); color: var(--amber-deep); }
.mednorm.err { background: rgba(190, 40, 40, .1); color: #a33; }
.mth .mthx { position: absolute; top: -7px; right: -7px; width: 20px; height: 20px;
  border-radius: 50%; border: none; cursor: pointer; font-size: 12px; line-height: 1;
  background: rgba(7, 11, 20, .72); color: #fff; padding: 0; opacity: 0;
  transition: opacity .12s; }
.mth:hover .mthx, .mth .mthx:focus-visible { opacity: 1; }
@media (hover: none) { .mth .mthx { opacity: 1; } }
.mth .mthx:hover { background: rgba(200, 40, 40, .92); }
.mpkwrap .mpk { position: relative; max-width: min(880px, 92vw); max-height: 88vh;
  display: flex; flex-direction: column; gap: 10px; align-items: center; }
.mpk img, .mpk video { max-width: 100%; max-height: 80vh; border-radius: 14px;
  box-shadow: var(--shadow-lg); background: #000; }
.mpkname { color: #fff; font-size: .68rem; letter-spacing: .1em;
  text-shadow: 0 1px 4px rgba(0,0,0,.7); }
.mpk .mlbclose { position: absolute; top: -14px; right: -14px; }
.mth .ord { position: absolute; top: 3px; left: 5px; font-family: var(--font-mono);
  font-size: .6rem; color: #fff; background: var(--amber); border-radius: 5px; padding: 1px 5px; }

/* ---------- media grid ---------- */
.uprow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 20px;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 16px 20px; box-shadow: var(--shadow); }
.uprow input[type=file] { color: var(--muted); font-size: .85rem; }
.uprow input[type=email], .uprow input[type=password], .uprow select {
  background: var(--card2); border: 1px solid var(--line2); color: var(--text);
  border-radius: 10px; padding: 10px 12px; font-family: var(--font-body); }
.mediagrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 14px; }
.masset { border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  background: var(--card); box-shadow: var(--shadow); }
.masset .img { height: 112px; background: var(--card2); position: relative; overflow: hidden; }
/* slick load: a shimmer holds the tile until the real image decodes, then it
   fades + gently settles in (scale 1.03 -> 1). Overlays stay above via z-index. */
.masset .img::before { content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(100deg, var(--card2) 30%, var(--line2) 50%, var(--card2) 70%);
  background-size: 200% 100%; animation: shimmer 1.15s linear infinite; }
.masset .img.loaded::before { display: none; }
.masset .mimg, .masset .img video { position: absolute; inset: 0; z-index: 1; width: 100%;
  height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s ease; }
.masset .mimg { transition: opacity .4s ease, transform .55s ease; transform: scale(1.03); }
.masset .img.loaded .mimg, .masset .img.loaded video { opacity: 1; }
.masset .img.loaded .mimg { transform: none; }
.masset .img .aibadge, .masset .img .mact, .masset .img.vid::after { z-index: 4; }
/* non-image library tiles: a PDF (print output, thumbnailed) + an audio track */
.masset .mkbadge { position: absolute; left: 6px; bottom: 6px; z-index: 4; background: rgba(11,18,32,.82); color: #fff; padding: 2px 7px; border-radius: 6px; font-size: .55rem; letter-spacing: .05em; }
.masset .maudio { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; gap: 5px; align-items: center; justify-content: center; color: var(--amber-deep); }
.masset .maudio svg { width: 34px; height: 34px; }
.masset .maudio .mono { font-size: .55rem; color: var(--muted); letter-spacing: .07em; }
@media (prefers-reduced-motion: reduce) {
  .masset .img::before { animation: none; }
  .masset .mimg { transition: none; transform: none; } }
.masset .img.vid::after { content: "▶"; position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center; color: #fff; font-size: 1.2rem;
  text-shadow: 0 1px 6px rgba(0,0,0,.6); }
/* library load-in skeleton: shimmering .img tiles + placeholder meta bars */
.masset.mskel { pointer-events: none; }
.mskb { display: inline-block; height: 8px; width: 58%; border-radius: 4px;
  background: linear-gradient(100deg, var(--card2) 30%, var(--line2) 50%, var(--card2) 70%);
  background-size: 200% 100%; animation: shimmer 1.15s linear infinite; }
.mskb.sm { width: 26%; }
@media (prefers-reduced-motion: reduce) { .mskb { animation: none; } }
.masset .meta { padding: 9px 12px; font-family: var(--font-mono); font-size: .56rem;
  color: var(--dim); letter-spacing: .06em; display: flex; justify-content: space-between; }

/* Growth Tools: Post Agent - full-width brief + the what-happens flow line */
.agflow { font-size: .56rem; letter-spacing: .1em; color: var(--amber-deep);
  margin-bottom: 10px; }
#agentBox .agbrief, #agentBox #agBody { width: 100%; max-width: 760px; }
#agentBox .actions { align-items: center; flex-wrap: wrap; }
#agentBox .actions .hint { flex: 1 1 320px; }

/* Posts: the how-it-flows strip - bank -> posts -> media -> published */
.qflow { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap;
  margin-top: 14px; padding: 14px 16px; border: 1px solid var(--line2);
  border-radius: 14px; background: var(--card2); }
.qflow-node { display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  flex: 1 1 150px; min-width: 140px; padding: 10px 14px; border-radius: 11px;
  border: 1px solid var(--line2); background: var(--card); text-align: left;
  font-family: var(--font-body); color: var(--text); transition: all .18s ease; }
button.qflow-node, .qflow-node[role="button"] { cursor: pointer; }
button.qflow-node:hover, .qflow-node[role="button"]:hover {
  border-color: var(--amber); transform: translateY(-1px); box-shadow: var(--shadow); }
.qflow-node.here { border-color: var(--amber); background: var(--amber-soft); }
.qflow-node b { font-size: .9rem; }
.qflow-node em { font-style: normal; font-size: .7rem; color: var(--dim); line-height: 1.35; }
/* the active ("here") node sits on amber-soft, where --dim drops below AA; its
   caption should be more prominent anyway - lift it to --muted. */
.qflow-node.here em { color: var(--muted); }
.qflow-node .qfico { font-size: 1.05rem; display: inline-flex; }
.qflow-node .qfico svg { width: 21px; height: 21px; }
.qflow-node .qfn { font-size: .58rem; letter-spacing: .08em; color: var(--amber-deep); }
/* stage illustration - grows to fill the tall Posts / Published cards and
   centres itself in the space below the label (house line-art language) */
.qflow-node .qfart { flex: 1 1 auto; align-self: stretch; display: flex;
  align-items: center; justify-content: center; min-height: 96px; padding: 14px 6px 4px; }
.qflow-node .qfart svg { width: 100%; max-width: 172px; height: auto; opacity: .8; }
@media (max-width: 900px) { .qflow-node .qfart { min-height: 78px; } }
.qflow-arrow { align-self: center; color: var(--dim); font-size: 1.1rem; flex: none; }
.qflow-srcs { display: flex; flex-direction: column; gap: 2px; flex: 1 1 170px;
  min-width: 150px; align-items: stretch; }
.qflow-srcs .qflow-node { flex: 1; min-width: 0; }
.qflow-bidi { align-self: center; color: var(--amber-deep); font-size: .95rem;
  line-height: 1; padding: 1px 6px; cursor: help; }
.qcarwrap { display: inline-flex; align-items: center; gap: 8px; font-size: .6rem;
  letter-spacing: .1em; color: var(--dim); }
@media (max-width: 900px) { .qflow-arrow { display: none; } }

/* bank: the ideas card grid - three columns of clean, scannable cards */
.bkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px; padding: 4px 2px 12px; }
.bkcard { display: flex; flex-direction: column; gap: 7px; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 13px; background: var(--card);
  box-shadow: var(--shadow); cursor: pointer; transition: border-color .18s ease; }
.bkcard:hover { border-color: var(--amber); }
.bkcard b { font-size: .92rem; line-height: 1.35; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bkcard p { font-size: .8rem; color: var(--muted); line-height: 1.5; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; flex: 1; }
.bkc-top { display: flex; align-items: center; gap: 8px; }
.bkc-cat { font-size: .52rem; letter-spacing: .1em; color: var(--amber-deep);
  background: var(--amber-soft); border-radius: 999px; padding: 3px 9px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; }
.bkc-st { font-size: .52rem; letter-spacing: .1em; padding: 3px 9px; border-radius: 999px; }
.bkc-st.ready { color: var(--green); background: var(--green-soft); }
.bkc-st.queued { color: var(--amber-deep); background: var(--amber-soft); }
.bkc-st.retired { color: var(--dim); background: var(--card2); }
.bkc-pin { display: flex; align-items: center; gap: 9px; }
.bkc-pin img { width: 52px; height: 52px; object-fit: cover; border-radius: 9px;
  border: 2px solid var(--amber); background: var(--card2); flex: none; }
.bkc-pin span { font-size: .5rem; letter-spacing: .09em; color: var(--amber-deep); }
.bkc-foot { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.bkc-foot .bkc-plat { font-size: .52rem; letter-spacing: .1em; color: var(--dim); }
.bkc-foot .btn { padding: 4px 10px; font-size: .7rem; }
.bkc-foot .hlink { font-size: .62rem; letter-spacing: .06em; }

/* Overview: YOUR CREATIONS strip */
.crncard { display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  border: 1px solid var(--line2); border-radius: 12px; margin-bottom: 10px;
  background: var(--card2); flex-wrap: wrap; }
.crncard.need { border-left: 3px solid var(--amber); }
.crnico { flex: none; display: inline-flex; }
.crnico .bic { width: 22px; height: 22px; margin-right: 0; }
.crnbody { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.crnbody b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crnmeta { font-size: .56rem; letter-spacing: .08em; color: var(--dim); }
.crnvisuals { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px; margin: 4px 0 10px; }
.crnvis { position: relative; border: 1px solid var(--line2); border-radius: 12px;
  overflow: hidden; background: var(--card); display: flex; flex-direction: column; }
.crnvis.on { border-color: var(--amber); box-shadow: 0 0 0 2px var(--amber-soft); }
.crnvis img, .crnvis video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  position: relative; z-index: 1; opacity: 0; transition: opacity .4s ease; }
.crnvis.loaded img, .crnvis.loaded video { opacity: 1; }
/* shimmer covers only the image box (the 4/3 top) until the thumb decodes */
.crnvis::before { content: ""; position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 4 / 3;
  z-index: 0; background: linear-gradient(100deg, #1c2740 30%, #2b3a58 50%, #1c2740 70%);
  background-size: 200% 100%; animation: shimmer 1.15s linear infinite; }
.crnvis.loaded::before { display: none; }
.crnvis .crnord, .crnvis .crnsrc { z-index: 2; }
@media (prefers-reduced-motion: reduce) {
  .crnvis::before { animation: none; } .crnvis img, .crnvis video { transition: none; } }
.crnord { position: absolute; top: 6px; left: 6px; background: var(--amber); color: #1a1206;
  width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: .7rem; font-weight: 700;
  box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.crnsrc { position: absolute; top: 6px; right: 6px; font-size: .46rem; letter-spacing: .08em;
  background: rgba(7,11,20,.66); color: #fff; border-radius: 999px; padding: 2px 7px; }
.crnname { font-size: .72rem; color: var(--muted); padding: 6px 8px 2px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.crnacts { display: flex; gap: 6px; padding: 4px 8px 8px; }
.crnbtn { font-size: .66rem; padding: 4px 8px; flex: 1; }
.crntpl { font-size: .58rem; letter-spacing: .1em; color: var(--dim); margin: 2px 0 6px; }
/* section dividers inside YOUR CREATIONS - give the panel clear rhythm so each
   group (campaigns / run-another) reads as its own labelled band */
.crnsec { font-size: .58rem; letter-spacing: .13em; color: var(--dim);
  text-transform: uppercase; font-weight: 700; margin: 16px 0 8px;
  padding-top: 12px; border-top: 1px solid var(--line2); }
.crnsec:first-child { margin-top: 2px; padding-top: 0; border-top: 0; }
/* the "this is a campaign" tag that sits above each campaign name */
.crpkind { font-size: .52rem; letter-spacing: .12em; font-weight: 700;
  text-transform: uppercase; color: var(--amber-deep, #b9740a); line-height: 1; }
/* RUN ANOTHER: larger, tappable replay cards (Peter: make them bigger) */
.crnruns { display: flex; gap: 10px; flex-wrap: wrap; }
.crnrun { display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 11px 16px; font: inherit; font-size: .84rem; font-weight: 600;
  color: var(--ink, inherit); background: var(--card); border: 1px solid var(--line2);
  border-radius: 12px; transition: border-color .12s, background .12s, transform .06s; }
.crnrun .cic { width: 20px; height: 20px; margin: 0; flex: none; }
.crnrun:hover { border-color: var(--amber); background: var(--amber-soft);
  transform: translateY(-1px); }
.crnrun:active { transform: translateY(0); }
.crnrunlbl { white-space: nowrap; }

/* bulk AI rename: selection mode states + bar + why-names-matter explainer */
.masset.mselable { cursor: pointer; }
.masset.mselable:hover { border-color: var(--amber); }
.masset.msel { outline: 2px solid var(--amber); outline-offset: 1px;
  border-color: var(--amber); }
.masset.mdim { opacity: .38; pointer-events: auto; }
.masset .mtick { position: absolute; top: 6px; right: 6px; z-index: 5; width: 24px;
  height: 24px; border-radius: 50%; border: 2px solid #fff; display: flex;
  align-items: center; justify-content: center; font-size: .72rem;
  background: rgba(7,11,20,.45); color: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.masset.msel .mtick { background: var(--amber); }
.masset .needname { position: absolute; bottom: 5px; left: 5px; z-index: 3;
  font-size: .5rem; letter-spacing: .1em; padding: 3px 8px; border-radius: 999px;
  background: var(--amber); color: #1a1206; font-weight: 700; }
/* content-flow flags: queued as post-next (★) / pinned to a bank idea (📌).
   bottom-right so they never collide with the aibadge (top-left), the action
   buttons (top-right) or NAME ME (bottom-left) */
.masset .mflag { position: absolute; bottom: 5px; right: 5px; z-index: 3;
  font-size: .5rem; letter-spacing: .08em; padding: 3px 7px; border-radius: 999px;
  background: rgba(7, 11, 20, .78); color: #ffd28a; font-weight: 700; }
.masset .mflag.pin { bottom: 26px; color: #9ad1ff; }
.bulkbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  border: 1px solid var(--amber); background: var(--amber-soft);
  border-radius: 12px; padding: 8px 12px; margin: 0 0 12px; }
.bulkbar .spacer { flex: 1; }
.bulkbar #bulkCount { font-size: .88rem; }
/* Media folder bar: flat folders (chips) + breadcrumb when inside one */
/* nested folder bar: a breadcrumb row, the current folder's subfolders as chips,
   then the manage-actions for the folder you're inside */
.mfolders { display: flex; flex-direction: column; align-items: stretch; gap: 9px; margin: 0 0 14px; }
.mfolders:empty { display: none; }
.mflabel { font-size: .56rem; letter-spacing: .12em; color: var(--dim); margin-right: 2px; }
.mfcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; font-size: .82rem; }
.mfcrumb-b { border: 0; background: none; color: var(--muted); cursor: pointer; font: inherit;
  padding: 3px 8px; border-radius: 7px; }
.mfcrumb-b:hover { background: var(--amber-soft); color: var(--amber-deep); }
.mfcrumb-b.on { color: var(--text); font-weight: 650; }
.mfsep { color: var(--dim); }
.mfchips { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.mfchip { border: 1px solid var(--line); background: var(--card); border-radius: 999px;
  padding: 6px 13px; font-size: .82rem; cursor: pointer; display: inline-flex; align-items: center;
  gap: 6px; color: var(--text); }
.mfchip:hover { border-color: var(--amber); }
.mfchip.on { background: var(--amber-soft); border-color: var(--amber); color: var(--amber-deep); font-weight: 600; }
.mfchip.mfnew { border-style: dashed; color: var(--muted); }
/* drag a media tile onto a folder chip OR a breadcrumb step to file it */
.mfchip.mfdrop, .mfcrumb-b.mfdrop { outline: 2px solid var(--amber); outline-offset: 1px;
  background: var(--amber-soft); color: var(--amber-deep); }
.masset.mdragging { opacity: .5; }
.mfn { font-size: .62rem; color: var(--muted); background: var(--card2); border-radius: 999px;
  padding: 0 7px; min-width: 18px; text-align: center; }
.mfchip.on .mfn { background: var(--card); color: var(--amber-deep); }
.mfsub { font-size: .58rem; color: var(--amber-deep); margin-left: 1px; }   /* "N subfolders" cue */
.mfacts { display: flex; align-items: center; gap: 7px; }
.mfempty { font-size: .68rem; color: var(--dim); align-self: center; padding: 4px 0; }
.movemenu-empty { font-size: .78rem; color: var(--dim); padding: 8px 10px; }
/* Move-to popover menu */
.movemenu { position: fixed; z-index: 1300; width: 216px; background: var(--card);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 40px rgba(19, 26, 42, .28);
  padding: 6px; max-height: 60vh; overflow-y: auto; }
.movemenu-h { font-size: .54rem; letter-spacing: .1em; color: var(--dim); padding: 6px 10px 4px; }
.movemenu-i { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 0;
  background: none; border-radius: 8px; padding: 9px 10px; font-size: .86rem; cursor: pointer; color: var(--text); }
.movemenu-i:hover { background: var(--amber-soft); color: var(--amber-deep); }
.movemenu-i .mfn { margin-left: auto; }
.movemenu-i.mvnew { border-top: 1px solid var(--line); margin-top: 4px; color: var(--muted); }
/* logo position picker dimmed when the logo is toggled off (Titled Photo) */
.poswrap.mutedctl { opacity: .4; pointer-events: none; }
.namesnote { border: 1px solid var(--line2); border-left: 3px solid var(--amber);
  background: var(--card2); border-radius: 10px; margin: 0 0 12px;
  font-size: .84rem; color: var(--muted); line-height: 1.55; }
.namesnote b { color: var(--text); }
/* collapsed by default: just a one-line header the customer can expand */
.namesnote-head { display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: 0; cursor: pointer; text-align: left; font: inherit;
  padding: 11px 15px; color: var(--text); }
.namesnote-head .spacer { flex: 1; }
.namesnote-ic { width: 17px; height: 17px; color: var(--amber-deep); flex: none; }
.namesnote-hint { font-size: .58rem; letter-spacing: .08em; color: var(--dim);
  text-transform: uppercase; }
.namesnote-chev { width: 16px; height: 16px; color: var(--muted); flex: none;
  transition: transform .18s ease; }
.namesnote.open .namesnote-chev { transform: rotate(180deg); }
.namesnote-head:hover .namesnote-hint,
.namesnote-head:hover .namesnote-chev { color: var(--amber-deep); }
.namesnote-body { padding: 2px 16px 13px 42px; }
.namesnote-body .namesflow { display: block; font-size: .6rem; letter-spacing: .1em;
  color: var(--amber-deep); margin: 2px 0 8px; }
.namesnote-tip { margin: 12px 0 0; color: var(--dim); }
@media (max-width: 640px) {
  .namesnote-hint { display: none; }
  .namesnote-body { padding-left: 16px; }
}
.bulkres { display: flex; flex-direction: column; gap: 6px; max-height: 46vh;
  overflow-y: auto; }
.bulkrow { display: flex; align-items: baseline; gap: 8px; padding: 7px 10px;
  border: 1px solid var(--line2); border-radius: 9px; font-size: .82rem; }
.bulkrow.bad { border-color: var(--red, #c0392b); }
.bulkrow .bulkold { color: var(--dim); text-decoration: line-through;
  flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.bulkrow .bulkarr { color: var(--amber-deep); flex: none; }
.bulkrow .bulknew { color: var(--text); font-weight: 600; flex: 1; }
.bulkrow.bad .bulknew { color: var(--red, #c0392b); font-weight: 400; }

/* ---------- outreach ---------- */
.oritem { border: 1px solid var(--line); border-radius: 16px; background: var(--card);
  padding: 16px 20px; margin-bottom: 14px; box-shadow: var(--shadow); }
.oritem .top { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.oritem .top b { flex: 1; font-size: .93rem; }
.ordraft { border: 1px dashed var(--line2); background: var(--card2); border-radius: 10px;
  padding: 11px 13px; color: var(--muted); font-size: .87rem; margin: 8px 0; }
.oritem .actions { margin: 8px 0 0; }
.orbar { display: flex; gap: 10px; align-items: center; margin: 14px 0 18px; flex-wrap: wrap; }
.orbar input { flex: 1 1 260px; min-width: 0; padding: 11px 14px; font-size: 16px; color: inherit;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.orbar input:focus { outline: none; border-color: var(--amber); }
.orbar .btn { flex: 0 0 auto; }
.ornets { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
  margin: -6px 0 18px; font-size: .85rem; color: var(--muted); }
.ornets-lbl { font-weight: 600; }
.ornets label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.ornets input { accent-color: var(--amber); }

/* Flo intro band + suggested-topic chips */
.floband { display: flex; gap: 12px; align-items: flex-start;
  background: linear-gradient(180deg, var(--amber-soft), transparent);
  border: 1px solid var(--line); border-left: 3px solid var(--amber);
  border-radius: 14px; padding: 14px 16px; margin: 4px 0 16px; }
.floband-body { flex: 1; min-width: 0; }
.floband-say { margin: 3px 0 0; font-size: .95rem; line-height: 1.5; color: var(--text); }
.floband-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.orchip { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font: inherit;
  font-size: .82rem; font-weight: 600; color: var(--amber-deep); background: var(--card);
  border: 1px solid var(--amber); border-radius: 999px; padding: 6px 13px;
  transition: background .15s, transform .1s; }
.orchip:hover { background: var(--amber-soft); }
.orchip:active { transform: scale(.97); }
.orchip svg { width: 15px; height: 15px; }

/* Outreach thread cards */
.orcard { border: 1px solid var(--line); border-radius: 16px; background: var(--card);
  padding: 16px 18px; margin-bottom: 14px; box-shadow: var(--shadow);
  transition: border-color .15s, box-shadow .15s; }
.orcard:hover { border-color: var(--amber); }
.orcard-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ornet { display: inline-flex; align-items: center; gap: 6px; font-size: .62rem; font-weight: 700;
  letter-spacing: .1em; color: var(--amber-deep); background: var(--amber-soft);
  border-radius: 999px; padding: 4px 10px; }
.ornet svg { width: 15px; height: 15px; }
.ormatch { margin-left: auto; font-size: .72rem; font-weight: 600; color: var(--muted); }
.orthread { display: flex; align-items: flex-start; gap: 10px; text-decoration: none;
  color: var(--text); border-radius: 10px; padding: 2px; margin-bottom: 12px; }
.orthread:hover .orquote { color: var(--amber-deep); }
.orthread:hover .ororb { background: var(--amber-soft); color: var(--amber-deep); border-color: var(--amber); }
.orquote { flex: 1; font-size: .95rem; line-height: 1.45; font-weight: 600; display: -webkit-box;
  -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ororb { flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: .74rem;
  font-weight: 600; color: var(--muted); border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 10px; white-space: nowrap; transition: background .15s, color .15s, border-color .15s; }
.ororb svg { width: 14px; height: 14px; }
.orreply { border: 1px dashed var(--line2); background: var(--card2); border-radius: 12px; padding: 11px 13px; }
.orreply-lbl { display: inline-flex; align-items: center; gap: 6px; font-size: .6rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--amber-deep); margin-bottom: 5px; }
.orreply-lbl svg { width: 15px; height: 15px; }
.orreply-text { font-size: .88rem; line-height: 1.5; color: var(--text); white-space: pre-wrap; }
.ordim { color: var(--dim); font-style: italic; }
.orcard-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.orcard-actions .btn { display: inline-flex; align-items: center; gap: 6px; }
.orcard-actions .btn svg { width: 16px; height: 16px; }
.orcard-actions .btn.ghost { background: transparent; color: var(--muted); border: 1px solid var(--line); }
.orcard-actions .btn.ghost:hover { border-color: var(--amber); color: var(--amber-deep); background: var(--amber-soft); }
.orcard-actions .orskip { margin-left: auto; }
.orcard-actions .btn.copied { background: var(--amber-soft) !important; color: var(--amber-deep) !important;
  border-color: var(--amber) !important; transition: none; }
.orcard-actions .btn.sm { padding: 6px 11px; font-size: .78rem; }
/* #8 account-safety nudge under a drafted reply */
.orsafe { margin-top: 8px; font-size: .74rem; line-height: 1.4; color: var(--muted);
  border-left: 2px solid var(--amber); padding: 4px 0 4px 9px; }
/* #9 per-lead outcome capture (shown on Done leads) */
.oroutcome { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 11px;
  padding-top: 11px; border-top: 1px dashed var(--line2); }
.oroc-lbl { font-size: .72rem; font-weight: 700; color: var(--muted); text-transform: uppercase;
  letter-spacing: .04em; }
.orcard .oroc.oroc-on { background: var(--amber-soft); color: var(--amber-deep); border-color: var(--amber); }
/* #9 outcome funnel banner on the Done tab */
.orfunnel { display: flex; flex-wrap: wrap; gap: 10px; margin: 2px 0 14px; padding: 12px 15px;
  background: var(--card2); border: 1px solid var(--line); border-radius: 13px; }
.orfun-c { display: inline-flex; align-items: baseline; gap: 6px; font-size: .8rem; color: var(--muted); }
.orfun-c b { font-size: 1.15rem; color: var(--text); font-weight: 700; }

/* Outreach toolbar: status tabs + sort/filter/brand-link */
.ortoolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  justify-content: space-between; margin: 4px 0 14px; }
.ortabs { display: inline-flex; gap: 4px; background: var(--card2); border: 1px solid var(--line);
  border-radius: 12px; padding: 4px; }
.ortab { font: inherit; font-size: .85rem; font-weight: 600; color: var(--muted); background: transparent;
  border: 0; border-radius: 9px; padding: 7px 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.ortab.on { background: var(--card); color: var(--text); box-shadow: var(--shadow); }
.orcount { font-size: .7rem; font-weight: 700; color: var(--amber-deep); background: var(--amber-soft);
  border-radius: 999px; padding: 1px 7px; }
.orctrls { display: inline-flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.orbl { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--muted); cursor: pointer; }
.orbl input { accent-color: var(--amber); }
.orbl input:disabled { opacity: .4; cursor: not-allowed; }
.orctrls select { font: inherit; font-size: .82rem; color: inherit; background: var(--card);
  border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px; cursor: pointer; }
.orctrls select:focus { outline: none; border-color: var(--amber); }
/* card meta row + status badges + notes */
.ormeta { display: inline-flex; align-items: center; gap: 7px; font-size: .72rem; color: var(--muted); }
.ormeta-i { display: inline-flex; align-items: center; gap: 4px; }
.ormeta-i svg { width: 13px; height: 13px; }
.ordot { opacity: .45; }
.orstat { font-size: .56rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  border-radius: 999px; padding: 3px 9px; }
.orstat-actioned { color: var(--green); background: var(--green-soft); }
.orstat-dismissed { color: var(--muted); background: var(--card2); }
.orstat-new, .orstat-drafted { color: var(--amber-deep); background: var(--amber-soft); }
.ornotes { display: block; width: 100%; margin-top: 11px; font: inherit; font-size: .84rem; color: var(--text);
  background: var(--card2); border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px;
  resize: none; overflow: hidden; line-height: 1.45; }
.ornotes::placeholder { color: var(--dim); }
.ornotes:focus { outline: none; border-color: var(--amber); background: var(--card); }

/* ---------- forms ---------- */
.kvform { padding: 16px 20px; display: grid; gap: 11px; }
.kvform .kv { display: grid; grid-template-columns: 220px 1fr; gap: 12px; align-items: center; }
.kvform .kv > div { min-width: 0; width: 100%; }
.kvform .kv label { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .1em;
  color: var(--muted); overflow-wrap: anywhere; }
/* one look for every control: full width, same skin (color/checkbox excepted) */
.kvform .kv input:not([type="color"]):not([type="checkbox"]),
.kvform .kv textarea,
.kvform .kv select {
  width: 100%; background: var(--card2); border: 1px solid var(--line2); color: var(--text);
  border-radius: 11px; padding: 11px 14px; font-size: .92rem; font-family: var(--font-body);
  min-width: 0; }
.kvform .kv textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.kvform .kv input:focus, .kvform .kv textarea:focus, .kvform .kv select:focus {
  outline: none; border-color: var(--amber); background: var(--card); }
@media (max-width: 760px) { .kvform .kv { grid-template-columns: 1fr; gap: 5px; } }
.kvform .kv .cfgd { font-family: var(--font-mono); font-size: .54rem; color: var(--green); }
.urow { display: flex; gap: 10px; padding: 12px 20px; border-bottom: 1px solid var(--line);
  font-size: .9rem; align-items: center; }
.urow:last-child { border-bottom: 0; }
.urow span { color: var(--dim); font-family: var(--font-mono); font-size: .6rem; }

/* ---------- skeleton loading ---------- */
.skel { height: 15px; border-radius: 6px; margin: 13px 18px;
  background: linear-gradient(90deg, var(--bg) 25%, #efe9dd 50%, var(--bg) 75%);
  background-size: 200% 100%; animation: shimmer 1.2s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
/* queue cold-load skeleton: rows shaped like a real .qrow (reuses .qrow/.qthumb/
   .t/.pill) so the list reserves its TRUE height and posts swap in with no layout
   shift - the fix for the pop-in "messy load". Opacity pulse is theme-independent
   (works light+dark) and disables under reduced-motion (web.dev CLS, NN/g). */
.qskel { pointer-events: none; }
.qskel .sk { color: transparent; border-color: transparent; border-radius: 6px;
  background: var(--line); animation: qskelpulse 1.3s ease-in-out infinite; }
/* heights sum to a real row (.t ~=50 + pill line matches the loaded 108px mobile
   row) so the skeleton->posts swap does not nudge the rows above the fold. */
.qskel .t b.sk-l1 { height: 14px; width: 58%; }
.qskel .t span.sk-l2 { display: block; height: 10px; width: 90%; margin-top: 10px; }
.qskel .t span.sk-l3 { display: block; height: 10px; width: 66%; margin-top: 6px; }
.qskel .pill.sk { width: 76px; height: 26px; padding: 0; }
@keyframes qskelpulse { 0%, 100% { opacity: .5; } 50% { opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .qskel .sk { animation: none; opacity: .7; } }
.qsearch { margin-left: auto; background: var(--card); border: 1px solid var(--line2);
  border-radius: 999px; padding: 8px 16px; font-family: var(--font-body); font-size: .85rem;
  color: var(--text); min-width: 180px; }
.qsearch:focus { outline: none; border-color: var(--amber); }
.qsort { background: var(--card); border: 1px solid var(--line2); border-radius: 999px;
  padding: 8px 14px; font-family: var(--font-body); font-size: .82rem; color: var(--text); cursor: pointer; }
.qsort:focus { outline: none; border-color: var(--amber); }
.empty .btn { margin-top: 14px; }

/* ---------- typed form controls ---------- */
.rowlink { cursor: pointer; }
.klink { cursor: pointer; transition: transform .15s, box-shadow .15s; display: block; color: inherit; }
.klink:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.colorrow { display: flex; gap: 14px; flex-wrap: wrap; }
.cpick { display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-family: var(--font-mono); font-size: .54rem; letter-spacing: .08em; color: var(--dim); cursor: pointer; }
.cpick input[type=color] { width: 46px; height: 34px; border: 1px solid var(--line2);
  border-radius: 8px; padding: 2px; background: var(--card); cursor: pointer; }
label.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  position: relative; margin: 0; font-family: var(--font-body); }
.switch input { position: absolute; opacity: 0; }
.switch em { font-family: var(--font-body); }
.switch span { width: 44px; height: 25px; border-radius: 999px; background: #cfc8ba;
  border: 1px solid var(--line2); box-sizing: border-box;
  position: relative; transition: background .2s; flex: none; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: #f5f7fb; transition: left .2s; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.switch input:checked + span { background: var(--green); }
.switch input:checked + span::after { left: 21px; }
.switch em { font-style: normal; font-size: .78rem; color: var(--dim); }

/* ---------- tooltips (every input explains itself) ---------- */
.tipdot { display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; margin-left: 6px; border-radius: 50%;
  border: 1px solid var(--line2); background: var(--card); color: var(--dim);
  font-size: .6rem; font-weight: 700; cursor: help; position: relative;
  vertical-align: middle; padding: 0; font-family: var(--font-body); }
.tipdot:hover, .tipdot:focus { color: #1a1206; background: var(--amber-bright); border-color: transparent; }
/* the bubble itself is a single body-level fixed element (#gfTip, ui.js) so
   NO panel, modal or scroll container can ever clip it - do not reintroduce
   ::after bubbles here, they break inside anything with overflow */
#gfTip { position: fixed; z-index: 1000; max-width: 300px; background: var(--navy);
  /* soft top-light so the bubble reads as a raised surface, not a flat black box */
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 60%);
  color: var(--navy-text); font-size: .74rem; font-weight: 400; line-height: 1.5;
  text-align: left; padding: 10px 13px; border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, .11);          /* hairline edge - defines it on any backdrop */
  box-shadow: 0 12px 30px rgba(10, 14, 27, .34), 0 3px 8px rgba(10, 14, 27, .24);
  pointer-events: none; text-transform: none; letter-spacing: .01em;
  font-family: var(--font-body); opacity: 0;
  transform: translateY(5px) scale(.98); transform-origin: top center;
  transition: opacity .14s ease, transform .14s cubic-bezier(.2, .8, .3, 1); }
#gfTip.on { opacity: 1; transform: translateY(0) scale(1); }
/* a keyword/inline-code accent inside tips reads as a chip, not raw text */
#gfTip b, #gfTip strong { color: var(--amber-bright); font-weight: 600; }
.kvform .fieldrow label { display: flex; align-items: center; flex-wrap: wrap; row-gap: 3px; }
.formsec { grid-column: 1 / -1; font-size: .58rem; letter-spacing: .16em; color: var(--amber-deep);
  border-bottom: 2px solid var(--amber-soft); padding: 14px 0 5px; margin-top: 6px; }
.formsec:first-child { padding-top: 0; margin-top: 0; }
/* brand-profile accordion: each section folds so the long form is easy to scan */
.fgmaster { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px;
  justify-content: flex-end; margin: 0 0 2px; }
.fgmaster .hlink { font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  font-family: var(--font-mono); }
.fgm-sep { color: var(--dim); }
.formgroup { grid-column: 1 / -1; }
.fghead { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: 0;
  cursor: pointer; text-align: left; font-family: var(--font-mono); font-size: .78rem;
  font-weight: 600; letter-spacing: .1em; color: var(--amber-deep);
  border-bottom: 2px solid var(--amber-soft); padding: 16px 0 9px; margin-top: 8px; }
.formgroup:first-child .fghead { padding-top: 2px; margin-top: 0; }
.fghead span { flex: 1; }
.fghead:hover { color: var(--amber-deep); }
.fgchev { width: 18px; height: 18px; color: var(--muted); flex: none; transition: transform .18s ease; }
.fghead:hover .fgchev { color: var(--amber-deep); }
.formgroup.gcol .fghead { border-bottom-color: var(--line2); color: var(--muted); }
.formgroup.gcol .fgchev { transform: rotate(-90deg); }
.fgbody { display: grid; gap: 11px; padding-top: 11px; }
.formgroup.gcol .fgbody { display: none; }
@media (prefers-reduced-motion: reduce) { .fgchev { transition: none; } }
.opchip { font-size: .5rem; letter-spacing: .1em; color: var(--dim); background: var(--bg);
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 7px; margin-left: 6px;
  white-space: nowrap; flex: 0 0 auto; }
/* "Use my own track" reveal: a grouped sub-card under the Music menu (progressive
   disclosure) so it reads as a child of that choice, not a separate setting */
.musicownpanel { grid-column: 1 / -1; margin: 2px 0; padding: 12px 14px; border-radius: 12px;
  background: var(--card2); border: 1px solid var(--line2); }
.musicownpanel > label { display: block; font-family: var(--font-mono); font-size: .54rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.musicownpanel .musictrackhint { margin-top: 8px; }
.pagesub { display: block; font-size: .8rem; color: var(--dim); margin-top: 1px;
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upmodal.wide { max-width: 560px; max-height: 86vh; overflow-y: auto; }
.stagefields { padding: 6px 0 0; }
.stagefields .kv { grid-template-columns: 200px 1fr; }
.cfgd { font-family: var(--font-mono); font-size: .54rem; color: var(--green); }

/* ---------- growth-engine pipeline diagram ---------- */
.pipeline { padding: 20px; display: grid; gap: 14px; }
.prow { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; }
.pnode { flex: 1 1 150px; min-width: 148px; background: var(--card2); border: 1px solid var(--line);
  border-radius: 14px; padding: 13px 14px; cursor: pointer; position: relative;
  transition: transform .15s, box-shadow .15s, border-color .15s; }
.pnode:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--amber); }
.picon { width: 42px; height: 42px; border-radius: 13px; display: flex; align-items: center;
  justify-content: center; color: #1c2740; margin-bottom: 9px; flex: none;
  background: linear-gradient(150deg, var(--amber-soft), var(--card2) 80%);
  border: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }
.picon svg { width: 24px; height: 24px; display: block; }
.pnode:hover .picon { border-color: var(--amber); }
.uplab-row { display: flex; align-items: center; gap: 11px; margin-bottom: 8px; }
.uplab-row .picon { margin-bottom: 0; width: 40px; height: 40px; }
.pnode b { display: block; font-size: .9rem; }
.pnode > span:not(.picon):not(.plock) { font-size: .74rem; color: var(--dim); display: block; }
.pnode.locked { opacity: .95; background: repeating-linear-gradient(45deg, var(--card2), var(--card2) 8px, #f1ede4 8px, #f1ede4 16px);
  border-style: dashed; }
.pnode.locked .picon, .pnode.locked b, .pnode.locked > span { filter: grayscale(1); opacity: .55; }
.pnode.locked:hover { border-color: var(--amber); }
.plock { display: inline-block; margin-top: 7px; font-size: .54rem; letter-spacing: .1em;
  color: var(--amber-deep); background: var(--amber-soft); border-radius: 999px; padding: 3px 9px; }
.parrow { align-self: center; color: var(--line2); font-size: 1.5rem; font-weight: 700; flex: none; }
#nav button.navlocked { color: var(--navy-dim); }
#nav button.navlocked::after { content: " 🔒"; font-size: .7rem; }

/* ---------- slide-out panels (stage settings + upgrade prompts) ---------- */
.upmodal-overlay { position: fixed; inset: 0; z-index: 70; display: none;
  justify-content: flex-end; background: rgba(7,11,20,.5); backdrop-filter: blur(3px); }
.upmodal-overlay.show { display: flex; }
.upmodal { position: relative; height: 100%; width: min(600px, 96vw); background: var(--card);
  border-left: 1px solid var(--line); border-radius: 0; padding: 34px 36px 44px;
  box-shadow: var(--shadow-lg); overflow-y: auto; animation: panelIn .24s ease; }
@keyframes panelIn { from { transform: translateX(36px); opacity: 0; } to { transform: none; opacity: 1; } }
.upmodal.wide { width: min(680px, 97vw); max-width: none; max-height: none; }
.upmodal h2 { font-family: var(--font-display); margin: 4px 0 8px; }
.upmodal p { color: var(--muted); font-size: .95rem; margin-bottom: 10px; }
.uplab { font-size: .6rem; letter-spacing: .14em; color: var(--amber-deep); }
.paneltop { position: sticky; top: -34px; z-index: 5; display: flex; align-items: center;
  gap: 12px; background: var(--card); margin: -34px -36px 16px; padding: 18px 24px;
  border-bottom: 1px solid var(--line); box-shadow: 0 4px 10px rgba(19,26,42,.04); }
.paneltop .spacer { flex: 1; }
.paneltop .uplab { font-size: .68rem; }
.upclose { background: var(--card); border: 1px solid var(--line2); border-radius: 9px;
  color: var(--dim); font-size: .9rem; cursor: pointer; padding: 6px 11px; flex: none; }
.upclose:hover { color: var(--text); border-color: var(--amber); }

/* drag + drop */
.dropcard { display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 44px 24px; margin-bottom: 22px; text-align: center; cursor: pointer;
  background: var(--card); border: 2px dashed var(--line2); border-radius: 18px;
  transition: border-color .18s, background .18s, transform .18s; }
.dropcard svg { width: 44px; height: 44px; color: #1c2740; margin-bottom: 6px; }
.dropcard b { font-family: var(--font-display); font-size: 1.12rem; }
.dropcard > span { color: var(--muted); font-size: .92rem; }
.dropcard .droplimits { font-size: .6rem; letter-spacing: .12em; color: var(--dim); margin-top: 10px; }
.dropcard:hover, #tab-media.dropping .dropcard {
  border-color: var(--amber); background: var(--amber-soft); transform: translateY(-2px); }
#tab-media.dropping .mediagrid {
  outline: 2px dashed var(--amber); outline-offset: 4px; border-radius: 16px; }
.mth.dragging { opacity: .45; }
.mth.dragover { outline: 3px solid var(--amber); outline-offset: 1px; }
.mth[draggable="true"] { cursor: grab; }

/* stage-panel fields: stacked labels, generous inputs for real typing */
.stagefields { padding: 10px 0 0; }
.stagefields .kv, .upmodal .fieldrow { grid-template-columns: 1fr; gap: 6px; align-items: start; }
.upmodal .fieldrow { display: grid; padding: 10px 0; border-bottom: 1px solid var(--line); }
.upmodal .fieldrow:last-of-type { border-bottom: 0; }
.upmodal .fieldrow input:not([type=color]):not([type=checkbox]),
.upmodal .fieldrow textarea, .upmodal .fieldrow select {
  width: 100%; padding: 14px 16px; font-size: 1.02rem; border-radius: 12px; }
.upmodal .fieldrow textarea { min-height: 140px; }
.upmodal .actions { position: sticky; bottom: -44px; background: var(--card);
  padding: 14px 0 10px; margin: 14px 0 0; border-top: 1px solid var(--line); }
/* (tooltip bubbles are body-level - see #gfTip above - so panels and
   slide-outs need no special-casing and can never clip them) */

/* ---------- plan tab ---------- */
.planhero { display: flex; align-items: center; gap: 20px; justify-content: space-between;
  background: var(--navy); color: var(--navy-text); border-radius: 18px; padding: 26px 30px;
  margin-bottom: 22px; flex-wrap: wrap; box-shadow: var(--shadow); }
.planhero h2 { font-family: var(--font-display); color: #fff; font-size: 1.7rem; margin: 2px 0; }
.planhero p { color: var(--navy-muted); font-size: .9rem; }
.planhero .uplab { color: var(--amber-bright); }
.planbig { font-family: var(--font-display); font-size: 2.2rem; color: var(--amber-bright); }
.planbig span { font-size: .8rem; color: var(--navy-muted); }
.planhero .planrenew { margin: 9px 0 0; font-size: .66rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--navy-muted); }
.planhero .planrenew.is-ending { color: #ff9a9a; }
.planhero .planrenew[hidden] { display: none; }
.tiercards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 22px; }
.tiercard { background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 24px 22px; display: flex; flex-direction: column; position: relative; box-shadow: var(--shadow); }
.tiercard.current { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber), var(--shadow-lg); }
.curtag { position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(180deg, var(--amber-bright), #f29718); color: #1a1206;
  font-size: .56rem; letter-spacing: .12em; font-weight: 700; padding: 4px 12px; border-radius: 999px; }
.tiercard h3 { font-family: var(--font-display); font-size: 1.15rem; }
.tierprice { font-family: var(--font-display); font-size: 1.9rem; margin: 4px 0 12px; }
.tierprice small { font-size: .85rem; color: var(--muted); font-weight: 500; }
.tiercard ul { list-style: none; margin: 0 0 18px; flex: 1; display: grid; gap: 6px; }
.tiercard li { padding-left: 22px; position: relative; color: var(--muted); font-size: .86rem;
  text-transform: capitalize; }
.tiercard li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 700; }
.tiercard li.no { color: var(--dim); opacity: .55; }
.tiercard li.no::before { content: "🔒"; font-size: .7rem; }
/* plan-card metrics block (SPEC_PLANS_STORAGE.md) */
.tiertag { color: var(--muted); font-size: .82rem; margin: 2px 0; min-height: 2.2em; line-height: 1.35; }
.tmetrics { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 12px 0; margin: 2px 0 14px; display: grid; gap: 9px; }
.tm-row .tm-main { font-size: .9rem; }
.tm-row .tm-main b { font-weight: 700; }
.tm-row .tm-main span { color: var(--muted); }
.tm-row em { display: block; font-style: normal; font-size: .72rem; color: var(--dim); margin-top: 1px; }
.tincluded { font-size: .56rem; letter-spacing: .12em; color: var(--muted); margin: 2px 0 6px; }
.tbase { font-size: .8rem; color: var(--muted); margin-bottom: 14px; line-height: 1.5; }
@media (max-width: 900px) { .tiercards { grid-template-columns: 1fr; } .parrow { display: none; } }

/* ---------- support tickets ---------- */
.tkmsg { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
  margin-bottom: 10px; font-size: .9rem; background: var(--card2); }
.tkmsg.operator { background: var(--amber-soft); border-color: transparent; }
.tkmsg b { display: block; font-family: var(--font-mono); font-size: .56rem;
  letter-spacing: .1em; color: var(--dim); margin-bottom: 5px; }
.tkmsg.operator b { color: var(--amber-deep); }

/* ---------- toast ---------- */
.toast { position: fixed; top: 18px; right: 18px; z-index: 50; background: var(--navy);
  border: 1px solid var(--green); color: #7fe0b8; font-size: .64rem; border-radius: 10px;
  padding: 12px 16px; display: none; box-shadow: var(--shadow-lg); max-width: 340px; }
.toast.err { border-color: var(--red); color: #ffb3b3; }
.toast.show { display: block; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .tagline { display: none; }
  #nav { flex-direction: row; flex-wrap: wrap; flex-basis: 100%; }
  .topbar { padding: 16px 18px; }
  .content { --content-inset-top: 20px; padding: 20px 16px 40px; }
  .split, .row2 { grid-template-columns: 1fr; }
}

/* ---------- onboarding checklist ---------- */
.pheadflex { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; white-space: nowrap; }
.pheadflex .spacer { flex: 1; }
/* the header title is a bare text node: nowrap on the row keeps it on one line
   (it can't be targeted directly); re-enable wrapping only inside the chip/status
   areas so long status chips still break instead of overflowing */
.pheadflex #pipeSched, .pheadflex .chips { white-space: normal; }

/* clickable numbers: a figure with data-go links back to its source (delegated
   handler in ui.js). Gives the pointer + a light hover so it reads as clickable. */
[data-go] { cursor: pointer; }
.perftile[data-go] { transition: background .12s, border-color .12s; }
.perftile[data-go]:hover { background: var(--amber-soft); border-color: var(--amber); }

/* Overview CONNECTIONS panel: social accounts only + total-posts + Connect */
.ovconn-total { display: flex; align-items: center; justify-content: space-between;
  padding: 6px 2px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line);
  color: var(--muted); font-size: .88rem; }
.ovconn-total b { font-family: var(--font-display); font-size: 1.2rem; color: var(--text); }
.ovconn-total b.hlink { color: var(--amber-deep); }
.ovhandle, .ovcount { margin-right: 10px; }
.ovcount { color: var(--dim); }
.ovconnect { padding: 6px 14px; border-radius: 9px; border: 1px solid var(--amber);
  background: var(--amber-soft); color: var(--amber-deep); font-weight: 600; font-size: .8rem;
  cursor: pointer; font-family: var(--font-body); white-space: nowrap; transition: all .15s; }
.ovconnect:hover { background: var(--amber-bright); color: #1a1206; border-color: transparent; }
.obpanel { border-color: var(--amber); }
.obbar { width: 120px; height: 8px; border-radius: 6px; background: var(--bg); overflow: hidden; display: inline-block; }
.obbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--amber-bright), var(--amber)); }
.obsteps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 16px 20px; }
.obsteps > * { min-width: 0; }
@media (max-width: 1100px) { .obsteps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .obsteps { grid-template-columns: 1fr; } }
.obstep { display: flex; align-items: center; gap: 10px; text-align: left; background: var(--card2);
  border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; font-size: .88rem;
  color: var(--text); cursor: pointer; font-family: var(--font-body); transition: border-color .15s, transform .15s; }
.obstep:hover { border-color: var(--amber); transform: translateY(-1px); }
.obstep { align-items: flex-start; }
.obtxt { display: block; min-width: 0; }
.obtxt b { display: block; font-size: .9rem; }
.obtxt small { display: block; color: var(--dim); font-size: .76rem; line-height: 1.4; margin-top: 2px; }
.obstep.done { opacity: .75; }
.obstep.done .obtxt b { text-decoration: line-through; color: var(--muted); }
.obstep.done .obgo { color: var(--green); }
.obtick { width: 22px; height: 22px; border-radius: 50%; flex: none; display: flex; align-items: center;
  justify-content: center; font-family: var(--font-mono); font-size: .66rem; font-weight: 700;
  background: var(--bg); border: 1px solid var(--line2); color: var(--dim); }
.obstep.done .obtick { background: var(--green); border-color: transparent; color: #fff; }
.obgo { font-size: .58rem; letter-spacing: .1em; color: var(--amber-deep); margin-left: auto; }

/* ---------- media-required warning ---------- */
.medwarn { margin-top: 8px; padding: 10px 13px; border-radius: 10px; font-size: .84rem;
  background: var(--amber-soft); border: 1px solid rgba(224,137,0,.35); color: var(--amber-deep); }

/* ---------- motion + accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  .upmodal, .skel, .klink, .pnode, .obstep, .btn { animation: none !important; transition: none !important; }
}

/* ---------- designed empty states + panel padding ---------- */
.emptybox { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 44px 24px; }
.emptybox .picon { width: 52px; height: 52px; margin-bottom: 12px; }
.emptybox .picon svg { width: 30px; height: 30px; }
.emptybox b { font-family: var(--font-display); font-size: 1.15rem; }
.emptybox > span { color: var(--muted); font-size: .92rem; max-width: 420px; margin-top: 4px; }
.panelpad { padding: 20px; }
.phead .sm-act { padding: 7px 14px; font-size: .8rem; border-radius: 9px; letter-spacing: 0; }

/* unread support reply badge */
.hasreply { position: relative; }
.hasreply::after { content: ""; position: absolute; top: 6px; right: 8px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--amber-bright); box-shadow: 0 0 0 2px #fff; }
#nav button.hasreply::after { top: 12px; right: 12px; box-shadow: 0 0 0 2px var(--navy); }

/* media source chips on the dropzone */
.medmix { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; justify-content: center; }
.medmix em { font-style: normal; font-family: var(--font-mono); font-size: .6rem;
  letter-spacing: .1em; color: var(--amber-deep); background: var(--amber-soft);
  border-radius: 999px; padding: 5px 12px; }
.dropcard b .tipdot { vertical-align: 2px; }

/* ---------- help docs ---------- */
.helpdoc h3 { font-family: var(--font-display); font-size: 1.02rem; margin: 22px 0 6px; }
.helpdoc h3:first-child { margin-top: 0; }
.helpdoc p { color: var(--muted); font-size: .92rem; max-width: 76ch; }
.hlink { background: none; border: none; color: var(--amber-deep); font-weight: 600;
  font-size: inherit; font-family: inherit; cursor: pointer; padding: 0; }
.hlink:hover { text-decoration: underline; }
/* the inline "Connections" link sits inside a running warning sentence, so it
   is always underlined - a mid-sentence link needs the affordance at rest */
.gf-connlink { text-decoration: underline; text-underline-offset: 2px; }
.gf-connlink:hover { color: var(--amber); }

/* ---------- Ask Flo + knowledge base (Help) ----------
   The Help page is data-driven from /api/help/kb and searched locally. This
   styles the "Ask Flo" hero, the answer card and the browseable one-pager. */
.askflo { display: flex; align-items: flex-start; gap: 14px;
  background: linear-gradient(180deg, var(--amber-soft), transparent);
  border: 1px solid var(--line); border-left: 3px solid var(--amber);
  border-radius: 16px; padding: 18px 20px; box-shadow: var(--shadow); margin-bottom: 16px; }
.askflo .flomark.lg { flex: none; margin-top: 2px; }
.askflo-field { flex: 1; min-width: 0; }
.askflo-lab { display: block; font-size: 10px; line-height: 1.2; letter-spacing: .12em;
  text-transform: uppercase; color: var(--amber-deep); margin-bottom: 8px; }
.askflo-inputwrap { position: relative; display: flex; align-items: center; }
.askflo-mag { position: absolute; left: 14px; width: 18px; height: 18px; color: var(--dim); pointer-events: none; }
#kbAsk { width: 100%; min-width: 0; padding: 13px 42px; font-size: 1rem; font-family: inherit;
  color: var(--text); background: var(--card); border: 1px solid var(--line2); border-radius: 12px; }
#kbAsk:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); }
#kbAsk::-webkit-search-cancel-button { display: none; }
.askflo-clear { position: absolute; right: 8px; width: 28px; height: 28px; border: none;
  background: none; color: var(--dim); cursor: pointer; border-radius: 8px; font-size: .85rem; line-height: 1; }
.askflo-clear:hover { color: var(--text); background: var(--amber-soft); }
.askflo-sugg { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.kbchip { font-size: .78rem; padding: 6px 13px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line2); background: var(--card); color: var(--muted); font-family: inherit; }
.kbchip:hover { border-color: var(--amber); color: var(--amber-deep); background: var(--amber-soft); }

.kbanswer { margin-bottom: 16px; }
.kbanswer-title { margin: 0 0 8px; font-family: var(--font-display); font-size: 1.15rem; color: var(--text); }
.kbanswer-body p { color: var(--text); font-size: .96rem; line-height: 1.6; max-width: 76ch; }
.kbanswer-body p + p { margin-top: 10px; }
.kbanswer-foot { margin-top: 12px; }
.kbmiss .floban-body p { color: var(--text); max-width: 76ch; }

.kbcat-h { font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dim);
  margin: 26px 0 4px; padding-top: 14px; border-top: 1px solid var(--line); }
.kbresults > .kbcat-h:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.kbart { scroll-margin-top: 80px; }
.kbart h3 { font-family: var(--font-display); font-size: 1.02rem; margin: 18px 0 6px; }
.kbresults .kbart p + p { margin-top: 9px; }
.helpdoc mark, .kbanswer-body mark { background: var(--amber-soft); color: var(--amber-deep);
  border-radius: 3px; padding: 0 2px; }
.kbloading { color: var(--dim); padding: 20px 0; }

@media (max-width: 760px) {
  .askflo { padding: 14px 15px; gap: 11px; }
  #kbAsk { font-size: 16px; }   /* 16px stops iOS zoom-on-focus */
}

/* media groups in the post editor */
.medgrp { flex-basis: 100%; font-size: .56rem; letter-spacing: .12em; color: var(--dim);
  margin: 6px 0 2px; }
.lockednote { font-size: .56rem; color: var(--dim); letter-spacing: .1em; margin-left: 8px; }
.bkrow { cursor: pointer; align-items: flex-start; }
.bkrow .btn.sm-act { flex: none; margin-left: 10px; }
/* reusable Content-bank idea picker: search + sort + clean cards */
.npmodal.bkmodal { width: min(640px, 94vw); }
/* One shared 42px control height keeps the search box and both dropdowns on a
   clean baseline. NOTE: .bksearch is a <label>, and ".npbody label" (0,1,1)
   would otherwise force display:block + a 12px margin onto it - so every rule
   here is scoped under .bktools (0,2,0) to WIN that cascade, the margin is
   reset, and heights are pinned so a stray margin-box can never stretch a
   neighbour. */
.bktools { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; align-items: center; }
.bktools .bksearch { flex: 1 1 200px; display: flex; align-items: center; gap: 8px; height: 42px;
  min-height: 0; margin: 0; padding: 0 12px; border: 1px solid var(--line2); border-radius: 10px;
  background: var(--card); box-sizing: border-box; font-size: 14px; }
.bktools .bksearch:focus-within { border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); }
.bktools .bksearch .bkico { flex: 0 0 auto; width: 16px; height: 16px; color: var(--muted); display: flex; }
.bktools .bksearch .bkico svg { width: 100%; height: 100%; display: block; }
.bktools .bksearch input { flex: 1; border: 0; background: transparent; font-size: 14px; line-height: 1.2;
  color: inherit; outline: none; padding: 0; margin: 0; min-width: 0; height: 100%; }
.bktools .bksort { flex: 0 0 auto; height: 42px; min-height: 0; margin: 0; padding: 0 32px 0 12px;
  border: 1px solid var(--line2); border-radius: 10px; background: var(--card); font-size: 13px;
  color: inherit; cursor: pointer; box-sizing: border-box; -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8f9a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 11px center; }
.bktools .bksort:focus { border-color: var(--amber); outline: none; }
.bkcount { font-size: .58rem; letter-spacing: .1em; color: var(--muted); margin-bottom: 8px; text-transform: uppercase; }
.bkpick { display: flex; flex-direction: column; gap: 8px; max-height: 52vh; overflow-y: auto; padding-right: 2px; }
.bkpick .bkrow { text-align: left; align-items: stretch; flex-direction: column; gap: 3px; border: 1px solid var(--line2); border-radius: 12px; padding: 12px 14px; background: var(--card); cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.bkpick .bkrow:hover { border-color: var(--amber); box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.bkpick .bkrow .bkcat { align-self: flex-start; font-size: .5rem; letter-spacing: .08em; color: var(--amber-deep); background: var(--amber-soft); padding: 2px 8px; border-radius: 999px; margin-bottom: 3px; }
.bkpick .bkrow b { font-size: 15px; font-weight: 700; line-height: 1.3; }
.bkpick .bkrow span { font-size: 13px; color: var(--muted); line-height: 1.45; }
.bkempty { text-align: center; color: var(--muted); padding: 30px 0; font-size: 14px; }
/* grouped-by-category view: each group is its own column, its header sticks to
   the top of the scroll area so you always know which category you are in */
.bkpick .bkgroup { display: flex; flex-direction: column; gap: 8px; }
.bkpick .bkgrouphd { display: flex; align-items: center; gap: 8px; position: sticky; top: 0; z-index: 2;
  font-size: .56rem; letter-spacing: .12em; color: var(--muted); text-transform: uppercase;
  padding: 7px 2px 5px; margin: 2px 0 -2px; background: var(--card2); }
.bkpick .bkgrouphd .bkgn { flex: none; background: var(--amber-soft); color: var(--amber-deep);
  border-radius: 999px; padding: 1px 8px; font-size: .92em; letter-spacing: .04em; }
.dcapacts { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 2px; }
/* the inline panel under the caption actions (variants / translate choices) */
.dcappanel { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
/* small full-width lead-in above the choices ("Translate the caption into:") -
   its own row, quiet and compact so it labels the options without shouting */
.dcaphint { flex-basis: 100%; margin: 2px 0 1px; font-size: 11px; opacity: .7;
  letter-spacing: .04em; }
/* target-language buttons: a round SVG flag (Windows-safe - Unicode flag emoji
   don't render on Windows Chrome/Edge) sits before the language name, which stays
   the real label. alt="" - the flag is decorative, the name carries the meaning. */
.dcapvar-lang { display: inline-flex; align-items: center; gap: 7px; }
.capflag { width: 18px; height: 18px; border-radius: 50%; flex: none; display: block;
  box-shadow: 0 0 0 1px rgba(128, 128, 128, .28); }
.bkfull { margin-top: 10px; padding: 12px 14px; background: var(--card2);
  border: 1px solid var(--line); border-radius: 10px; }
.bkfull p { margin: 6px 0; font-size: .9rem; white-space: pre-wrap; }
.bkmeta { font-size: .58rem; letter-spacing: .1em; color: var(--dim); }
.qthumb { flex: none; width: 44px; height: 44px; border-radius: 9px; margin-right: 12px;
  background-color: var(--card2); background-size: cover; background-position: center;
  border: 1px solid var(--line); position: relative; }
.qthumb.none::after { content: "TXT"; position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center; font-family: var(--font-mono);
  font-size: .5rem; letter-spacing: .08em; color: var(--dim); }
/* media-count badge: white numeral (Peter's call) kept legible on the bright amber
   with a soft dark text-shadow, and a card-colour ring so it reads as a clean chip
   punched onto the thumbnail corner rather than melting into a busy photo. */
.qthumb .ord { position: absolute; right: -5px; bottom: -5px; background: var(--amber);
  color: #fff; font-family: var(--font-mono); font-size: .58rem; font-weight: 700;
  text-shadow: 0 1px 1.5px rgba(0, 0, 0, .5);
  border-radius: 999px; min-width: 17px; height: 17px; display: flex;
  align-items: center; justify-content: center; padding: 0 4px;
  box-shadow: 0 0 0 2px var(--card); }

/* create-with-AI row + library actions */
.genrow textarea { width: 100%; min-height: 64px; margin-bottom: 12px; }
.genopts { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.stylechips { display: flex; gap: 8px; flex-wrap: wrap; }
.genfrombank { margin-left: auto; }   /* group From-bank + Generate to the right */
#genGo { white-space: nowrap; }         /* never wrap the label to two lines */
.filterchips { display: inline-flex; gap: 6px; margin-right: 12px; }
.filterchips button { background: none; border: 1px solid var(--line2); border-radius: 999px;
  padding: 3px 11px; font-family: var(--font-mono); font-size: .56rem; letter-spacing: .1em;
  color: var(--muted); cursor: pointer; }
.filterchips button.on { background: var(--amber-soft); border-color: var(--amber); color: var(--amber-deep); }
/* Content-bank topic filter: its OWN full-width row that WRAPS, so every topic is
   visible at once (no clipped/overflowing header, no sideways scroll on mobile).
   ID beats the mobile .filterchips{overflow-x:auto} rule so it wraps everywhere. */
#bankCatChips { display: flex; flex-wrap: wrap; gap: 7px; padding: 14px 20px 10px;
  margin: 0; overflow: visible; }
.filterchips button .bccount { opacity: .55; margin-left: 4px; font-variant-numeric: tabular-nums; }
.filterchips button.on .bccount { opacity: .8; }
/* Media-library header on ONE line (>=1024px desktop): filters sit left by the title,
   Refresh/Select/search/sort on the right. It never wraps to a second line - the
   search shrinks and, only if truly tight, the filter chips scroll horizontally to
   absorb overflow. Below 1024px it falls back to the base wrap (the <=760px mobile
   rules still win). Verified by measurement: 1 line + no overflow from ~620px up to
   the .content 1200px cap (~1088px inner), which is why it wrapped even on wide screens. */
@media (min-width: 1024px) {
  .libhead { flex-wrap: nowrap; gap: 8px; }
  .libhead .btn { padding: 8px 13px; font-size: .8rem; border-radius: 9px; }
  .libhead #mediaSearch { flex: 0 1 160px; min-width: 78px; width: auto; margin-right: 0; }
  .libhead #mediaSort { flex: 0 0 auto; margin-right: 0; }
  .libhead #mediaFilters { flex: 0 1 auto; min-width: 0; margin-right: 0; gap: 5px;
    overflow-x: auto; scrollbar-width: none; }
  .libhead #mediaFilters::-webkit-scrollbar { height: 0; }
  .libhead .libtitle, .libhead .tipdot { flex: 0 0 auto; }
  .libhead .spacer { flex: 1 1 8px; min-width: 0; }
}
.masset { position: relative; }
.masset .img { position: relative; }
.aibadge { position: absolute; left: 8px; top: 8px; background: rgba(7,11,20,.72); color: #ffad33;
  font-size: .52rem; letter-spacing: .12em; border-radius: 6px; padding: 2px 7px; }
.mact { position: absolute; right: 8px; top: 8px; display: flex; gap: 6px; opacity: 0;
  transition: opacity .18s; }
.masset:hover .mact, .masset:focus-within .mact { opacity: 1; }
/* touch has no hover: reveal the asset actions permanently (mirrors .mth .mthx) */
@media (hover: none) { .masset .mact { opacity: 1; } }
.mbtn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border-radius: 8px; background: rgba(255,255,255,.92); border: 1px solid var(--line2);
  /* fixed dark glyph - the button is always a light chip, so var(--text) turned
     the icon white-on-white (invisible blank box) in dark mode. */
  color: #1c2740; font-size: .85rem; cursor: pointer; text-decoration: none; }
.mbtn:hover { border-color: var(--amber); }
.mbtn.del:hover { border-color: var(--red); color: var(--red); }
.masset .meta .hlink { font-size: .6rem; }
.genph .img { background: linear-gradient(100deg, var(--card2) 40%, #fff 50%, var(--card2) 60%);
  background-size: 200% 100%; animation: genshimmer 1.2s infinite linear; }
@keyframes genshimmer { to { background-position: -200% 0; } }

/* ticket attachments */
.tkattrow { display: flex; align-items: center; gap: 12px; margin: 4px 0 8px; }
.tkattrow .btn.dragover { border-color: var(--amber); background: var(--amber-soft); }
.tkatts { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 8px; }
.tkatt { position: relative; display: inline-block; }
.tkatt img, .tkmsg .tkatts img { width: 74px; height: 74px; object-fit: cover;
  border-radius: 9px; border: 1px solid var(--line2); display: block; }
.tkmsg .tkatts { margin-top: 8px; }
.tkmsg .tkatts a:hover img { border-color: var(--amber); }
.tkattdel { position: absolute; top: -7px; right: -7px; width: 20px; height: 20px;
  border-radius: 999px; border: 1px solid var(--line2); background: var(--card); color: var(--red);
  font-size: .65rem; cursor: pointer; line-height: 1; }
.notifyrow { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 12px; }
.notifyrow input[type=email] { flex: 1; min-width: 220px; }

/* content bank: how-it-works strip, clickable topic cards, grouped list */

.bcard { cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.bcard:hover { border-color: var(--amber); transform: translateY(-1px); box-shadow: var(--shadow); }
.bcard.sel { border-color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber), var(--shadow); }
.bcat-name { display: block; font-weight: 600; font-size: .92rem; color: var(--text); margin-bottom: 4px; }
/* provenance badge: where a topic's ideas came from (rotation / scan / extra) */
.prov-badge { display: inline-block; font-family: var(--font-mono); font-size: .5rem; letter-spacing: .07em;
  text-transform: uppercase; font-weight: 700; padding: 2px 7px; border-radius: 999px;
  border: 1px solid transparent; vertical-align: middle; white-space: nowrap; cursor: help; }
/* variants are doubled (.prov-badge.prov-x) so their colour beats the generic
   ".kcard span" rule (0,1,1) when a badge sits inside a topic card. */
.prov-badge.prov-rotation { background: var(--amber-soft); color: var(--amber-deep); border-color: var(--amber); }
.prov-badge.prov-scanned { background: var(--scan-soft); color: var(--scan); border-color: var(--scan); }
.prov-badge.prov-extra { background: var(--bg); color: var(--muted); border-color: var(--line2); }
.bcard .prov-badge { margin: 0 0 6px; font-size: .5rem; letter-spacing: .07em; }
/* legend under the topic cards - names the three badges + where each comes from */
.prov-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 14px;
  padding: 10px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--card2);
  font-size: .8rem; line-height: 1.55; color: var(--muted); }
.prov-legend > b { color: var(--text); font-size: .82rem; flex-basis: 100%; margin-bottom: 2px; }
.prov-legend .hlink { font-size: inherit; }
.bbar { height: 6px; border-radius: 999px; background: var(--line); margin-top: 8px; overflow: hidden; }
.bbar i { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--amber-bright), #f29718); }
.bbar-sub { display: block; font-family: var(--font-mono); font-size: .54rem;
  letter-spacing: .08em; color: var(--dim); margin-top: 5px; }
.bkgroup { position: sticky; top: 0; z-index: 5; background: var(--card2);
  border-bottom: 1px solid var(--line); padding: 8px 16px; font-size: .58rem;
  letter-spacing: .12em; color: var(--muted); }

/* media search + names */
.minisearch { width: 190px; padding: 7px 12px; border-radius: 999px; font-size: .82rem;
  font-family: var(--font-body); border: 1px solid var(--line2); background: var(--card);
  color: var(--text); margin-right: 10px; }
.minisearch:focus { outline: none; border-color: var(--amber); }
.mname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%;
  font-size: .72rem; color: var(--text); }

/* media lightbox + sort + unused chip */
.minisort { padding: 7px 10px; border-radius: 10px; border: 1px solid var(--line2);
  background: var(--card); color: var(--text); font-family: var(--font-body); font-size: .82rem;
  margin-right: 10px; }
.freechip { font-size: .54rem; letter-spacing: .08em; color: var(--amber-deep);
  background: var(--amber-soft); border-radius: 999px; padding: 3px 9px;
  white-space: nowrap; flex: none; align-self: center; }
.hlink.mono[data-mgo] { white-space: nowrap; flex: none; }
.masset { cursor: pointer; }
.masset:hover { box-shadow: var(--shadow); }
.mlb { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; }
.mlbdim { position: absolute; inset: 0; background: rgba(7, 11, 20, 0.62); }
.mlbcard { position: relative; display: grid; grid-template-columns: minmax(0, 1.4fr) 320px;
  gap: 0; width: min(980px, 94vw); max-height: 88vh; background: var(--card);
  border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-lg); }
.mlbmediawrap { position: relative; overflow: hidden; background: #0c1220; display: flex; align-items: center; justify-content: center; min-height: 220px; }
.mlbmediawrap::before { content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(100deg, #0c1220 34%, #1b2942 50%, #0c1220 66%); background-size: 200% 100%;
  animation: mlbshim 1.15s linear infinite; }
.mlbmediawrap.loaded::before { display: none; }
@keyframes mlbshim { to { background-position: -200% 0; } }
.mlbimg { position: relative; z-index: 1; width: 100%; height: 100%; max-height: 88vh; object-fit: contain;
  display: block; opacity: 0; transition: opacity .3s ease; }
.mlbmediawrap.loaded .mlbimg { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .mlbmediawrap::before { animation: none; } .mlbimg { transition: none; } }
.mlbside { display: flex; flex-direction: column; gap: 8px; padding: 20px 20px; min-width: 0;
  overflow-y: auto; max-height: 88vh; }
.mlbnamerow { display: flex; gap: 8px; }
.mlbnamerow input { flex: 1; min-width: 0; }
.mlbnamerow .btn { flex: none; }
.mlbside .mlbslim { font-size: .74rem; padding: 6px 10px; align-self: flex-start; }
/* Download + Share: two equal, centred buttons; the download is an <a>, kill its underline */
.mlbget { display: flex; gap: 8px; margin: 2px 0; }
.mlbget .btn { flex: 1; justify-content: center; text-decoration: none; }
.mlbgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mlbgrid .btn { width: 100%; font-size: .78rem; padding: 8px 10px; }
.mlbgrid .mlbspan2 { grid-column: 1 / -1; }
.mlbside label { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .14em; color: var(--muted); }
.mlbside input { width: 100%; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--line2);
  background: var(--card2); color: var(--text); font-size: .95rem; font-family: var(--font-body); }
.mlbside input:focus { outline: none; border-color: var(--amber); background: var(--card); }
.mlbmeta { font-size: .56rem; letter-spacing: .1em; color: var(--dim); }
/* media properties card: dimensions, size, aspect, network fit, default match */
.mlbprops { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin: 6px 0;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card2); }
.mlbprop { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mlbprop-wide { grid-column: 1 / -1; }
.mlbprop-k { font-family: var(--font-mono); font-size: .54rem; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; }
.mlbprop-v { font-size: .84rem; font-weight: 600; color: inherit; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; line-height: 1.3; }
/* media lightbox: where the image is filed + a one-click Move (mirrors bulk move) */
.mlbfolder { display: flex; align-items: center; gap: 10px; margin: 10px 0 2px; flex-wrap: wrap; }
.mlbfolder .mlbprop-k { flex: none; }
.mlbfolder-name { font-size: .84rem; font-weight: 600; color: var(--text); }
.mlbmovebtn { margin-left: auto; padding: 5px 12px; font-size: .68rem; }
.movemenu-i.on { color: var(--amber-deep); font-weight: 700; }   /* the folder it's already in */
.mlbdim2 { font-weight: 500; font-size: .7rem; color: var(--dim); text-transform: capitalize; }
.mlbtag { display: inline-block; font-size: .68rem; font-weight: 600; padding: 2px 9px; border-radius: 999px;
  background: rgba(20,151,107,.12); color: var(--green, #14976b); }
.mlbtag.warn { background: var(--amber-soft); color: var(--amber-deep); }
.mlbfit { font-size: .78rem; font-weight: 600; }
.mlbfit.ok { color: var(--green, #14976b); }
.mlbfit.warn { color: var(--amber-deep); }
.mlbside .actions { display: flex; flex-wrap: wrap; gap: 10px; }
.mlbclose { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px;
  border-radius: 999px; border: 1px solid var(--line2); background: var(--card); color: var(--text);
  cursor: pointer; font-size: .95rem; }
.mlbclose:hover { border-color: var(--amber); }
@media (max-width: 760px) {
  /* Full-screen scrolling sheet: the WHOLE card scrolls as ONE column. Was a
     cramped ~44vh nested scroll inside .mlbside (image ate the top half), which
     iOS could not reliably scroll - the action buttons below were unreachable.
     Now .mlb is the single scroll container (block + overflow-y:auto), the card
     fills at least the screen and grows with content, and the last button clears
     the bottom bar + home indicator via padding. Close stays pinned. */
  .mlb { display: block; bottom: auto; height: 100vh; height: 100dvh;
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .mlbcard { grid-template-columns: 1fr; width: 100%; min-height: 100%;
    max-height: none; border-radius: 0; overflow: visible; }
  .mlbimg { max-height: 44vh; }
  .mlbside { overflow-y: visible; max-height: none;
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
  .mlbclose { position: fixed; top: calc(10px + env(safe-area-inset-top, 0px));
    right: 12px; z-index: 10; }
}
.mlbposts { display: flex; flex-wrap: wrap; gap: 8px; }
.mth { position: relative; }
.mth .aibadge { left: 4px; top: 4px; font-size: .46rem; padding: 1px 5px; }

/* checkbox network chips + per-network preview + voice picker */
.netchip2 { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px;
  border: 1px solid var(--line2); border-radius: 999px; cursor: pointer;
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em;
  color: var(--muted); background: var(--card); transition: all .15s; }
.netchip2:hover { border-color: var(--amber); }
.netchip2.sel { border-color: var(--green); color: var(--green); background: var(--green-soft); }
.netchip2 .ncbox { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--line2);
  display: inline-flex; align-items: center; justify-content: center; font-size: .62rem;
  font-style: normal; background: var(--card); color: var(--green); flex: none; }
.netchip2.sel .ncbox { border-color: var(--green); background: var(--green-soft); }
.netchip2.ncoff b { text-decoration: underline dotted; text-underline-offset: 3px; }
.netchip2 b { font-weight: 600; }
.connline { font-size: .56rem; letter-spacing: .1em; color: var(--dim); margin: 6px 0 2px; }
.netprev { border: 1px solid var(--line); border-radius: 12px; margin: 8px 0; background: var(--card2); }
.netprev .npbody { padding: 12px 16px; }
.netprev .nptext { background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; font-size: .92rem; white-space: normal; margin-bottom: 8px; }
.voicerow { display: flex; gap: 10px; align-items: center; }
.voicerow select { flex: 1; }

/* one-screen queue: full-width list, editor in a slide-out, previews in popups */
/* Fixed height so the Posts pane is the SAME size with 0 posts or 121: min == max.
   The list scrolls when it overflows; the onboarding / empty state is centred in the
   reserved space - so switching between empty and full never changes the pane height
   (reserve-space pattern, no layout shift; web.dev CLS / Carbon empty-states) and the
   empty content never sits as a lone fragment at the top of a tall box. margin:auto
   centres it yet still lets it scroll from the top when a short screen makes it taller
   than the pane (unlike justify-content:center, which would clip the top). */
.qfull { min-height: calc(100vh - 275px); max-height: calc(100vh - 275px);
  overflow-y: auto; display: flex; flex-direction: column; }
.qfull > div { flex: 1 0 auto; display: flex; flex-direction: column; }
.qfull .qflow, .qfull .empty { margin: auto; }
.postwrap { position: fixed; inset: 0; z-index: 220; }
.postwrap[hidden] { display: none; }
.postdim { position: absolute; inset: 0; background: rgba(7, 11, 20, 0.55); }
.postpanel { position: absolute; top: 0; right: 0; bottom: 0; width: min(760px, 100vw);
  background: var(--bg); border-left: 1px solid var(--line); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; animation: ppin .22s ease; }
@keyframes ppin { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.postpanel header { display: flex; align-items: center; gap: 12px; padding: 16px 22px;
  background: var(--card); border-bottom: 1px solid var(--line); }
.postpanel header b { font-size: .68rem; letter-spacing: .14em; color: var(--muted); }
.ppclose { width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--line2);
  background: var(--card); color: var(--text); cursor: pointer; font-size: .9rem; flex: none; }
.ppclose:hover { border-color: var(--amber); }
.ppbody { flex: 1; overflow-y: auto; padding: 20px 24px 32px; }
.ppbody .detail { max-width: none; }
/* dialogs sit ABOVE the media lightbox (.mlb, 300) - else a form opened from inside
   it (e.g. "+ New folder" in the move menu) renders behind it - but below the tooltip
   layer (1000+), so tipdots inside a form still show on top */
.npwrap { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; }
.npdim { position: absolute; inset: 0; background: rgba(7, 11, 20, 0.45); }
@media (max-width: 760px) {
  /* .npwrap is the SHARED base for ~every modal/sheet overlay (network preview,
     upgrade, media picker, crop, connection popup...). Centered content taller
     than the screen was clipped top+bottom with no way to scroll to it - the same
     bug as the media-detail sheet. Make the wrapper a scroll container and stop the
     clip: modern engines keep small content centred (safe center) but top-align it
     the moment it would overflow; older engines just top-align (flex-start). The
     dim is pinned so it keeps covering the screen while the sheet scrolls.
     (research: flexbox align-items + overflow clip, overscroll-behavior.) */
  .npwrap { align-items: flex-start; align-items: safe center;
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    padding-block: 14px calc(18px + env(safe-area-inset-bottom, 0px)); }
  .npdim { position: fixed; }
}
.npmodal { position: relative; width: min(560px, 92vw); max-height: 80vh; overflow-y: auto;
  background: var(--card); border-radius: 16px; box-shadow: var(--shadow-lg);
  border: 1px solid var(--line); animation: ppin .18s ease; }

/* ---------- platform-true preview frames ---------- */
.npmodal { width: 420px; }
.npmodal.tall { width: 320px; }
.pv { font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--card); border: 1px solid #e3e6ea; border-radius: 12px; overflow: hidden;
  margin-bottom: 6px; color: #101418; }
.pvhead { display: flex; align-items: center; gap: 10px; padding: 11px 13px; }
.pvhead b { font-size: .86rem; font-weight: 600; }
.pvav { width: 34px; height: 34px; border-radius: 999px; color: #fff; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; font-size: .9rem; flex: none; }
.pvnames { display: flex; flex-direction: column; line-height: 1.25; }
.pvnames b { font-size: .88rem; }
.pvdim { color: #7a8794; font-size: .78rem; display: inline-flex; align-items: center; gap: 4px; }
.pvdim svg { width: 12px; height: 12px; }
.pvimg { position: relative; background: #0c1220 center/cover no-repeat; }
.pvimg.sq { aspect-ratio: 4 / 5; }
.pvimg.rnd { aspect-ratio: 16 / 9; border-radius: 14px; margin: 0 13px 10px; }
.pvimg.flat { aspect-ratio: 4 / 5; max-height: 420px; }
.pvfit { padding: 6px 12px 0; color: var(--amber-deep); }
.pvimg.wide { aspect-ratio: 16 / 9; }
.pvimg.gbp { aspect-ratio: 4 / 3; }   /* Google Business post image (Search/Maps feed) */
.pvgmbg { margin-left: auto; display: inline-flex; }
.pvgmbg svg { width: 18px; height: 18px; display: block; }
.pvimg video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pvplay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.pvplay svg { width: 46px; height: 46px; color: #fff; filter: drop-shadow(0 2px 8px rgba(0,0,0,.5)); }
.pvdur { position: absolute; right: 8px; bottom: 8px; background: rgba(0,0,0,.8); color: #fff;
  font-size: .7rem; padding: 1px 5px; border-radius: 4px; }
.pvcount { position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,.65); color: #fff;
  font-size: .72rem; padding: 2px 9px; border-radius: 999px; }
.pvdots { position: absolute; bottom: 9px; left: 0; right: 0; display: flex; gap: 4px; justify-content: center; }
.pvdots i { width: 6px; height: 6px; border-radius: 999px; background: rgba(255,255,255,.5); }
.pvdots i.on { background: var(--card); }
.pvacts { display: flex; justify-content: space-between; padding: 10px 13px 6px; }
.pvacts svg { width: 23px; height: 23px; margin-right: 12px; color: #101418; }
.pvacts.pvx { justify-content: space-between; color: #7a8794; font-size: .78rem;
  padding: 4px 13px 12px; }
.pvacts.pvx svg { width: 17px; height: 17px; margin-right: 3px; vertical-align: -3px; color: #7a8794; }
.pvlikes { padding: 0 13px; font-size: .84rem; }
.pvcap { padding: 4px 13px 2px; font-size: .84rem; line-height: 1.45; }
.pvwhen { padding: 4px 13px 12px; font-size: .66rem; color: #7a8794; letter-spacing: .03em; }
.pvmore { background: none; border: none; color: #7a8794; cursor: pointer; font-size: inherit; padding: 0; }
.pvtext { padding: 2px 13px 10px; font-size: .9rem; line-height: 1.45; }
.pvtextx { padding: 2px 13px 10px; font-size: .92rem; line-height: 1.4; }
.pvbar { display: flex; border-top: 1px solid #e3e6ea; }
.pvbar span { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 0; font-size: .8rem; color: #5b6673; font-weight: 600; }
.pvbar svg { width: 17px; height: 17px; }
/* TikTok vertical dark frame */
.pv-tt { aspect-ratio: 9 / 16; background: #000 center/cover no-repeat; position: relative;
  color: #fff; border: none; }
.pvttvid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pvttside { position: absolute; right: 10px; bottom: 86px; display: flex; flex-direction: column;
  gap: 14px; align-items: center; z-index: 2; }
.pvttside span { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pvttside svg { width: 26px; height: 26px; color: #fff; filter: drop-shadow(0 1px 4px rgba(0,0,0,.6)); }
.pvttside i { font-style: normal; font-size: .64rem; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.pvttcap { position: absolute; left: 12px; right: 58px; bottom: 12px; z-index: 2;
  text-shadow: 0 1px 4px rgba(0,0,0,.75); }
.pvttcap b { font-size: .84rem; }
.pvttcap p { font-size: .78rem; line-height: 1.4; margin: 3px 0; }
.pvttcap .pvmore { color: #d9dde2; }
.pvttmusic { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; }
.pvttmusic svg { width: 13px; height: 13px; }
.pv-tt::after { content: ""; position: absolute; inset: 40% 0 0 0; z-index: 1;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.68)); }
.pv-yt .pvythead { display: flex; gap: 10px; padding: 11px 13px; align-items: flex-start; }
.pv-skip { display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 34px 20px; color: #7a8794; }
.pv-skip svg { width: 34px; height: 34px; }
.pv-skip b { color: #101418; }
/* Pinterest pin card: tall 2:3 media, rounded, title + save row */
.pv-pin .pvimg.pin, .pv-pin .pvvid.pin { aspect-ratio: 2 / 3; max-height: 440px;
  border-radius: 18px; margin: 10px 12px 0; }
.pv-pin .pvpinbody { padding: 10px 14px 12px; }
.pv-pin .pvpintitle { display: block; font-size: 1.02rem; color: #101418; margin-bottom: 4px; }
.pv-pin .pvhead { padding: 8px 0 0; }
.pv-pin .pvpinsave { margin-left: auto; background: #e60023; color: #fff;
  border-radius: 999px; padding: 7px 15px; font-weight: 700; font-size: .82rem; }

/* preview polish: phone-scale card, breathing room, viewport-safe.
   width is viewport-capped so the fixed box never overflows a narrow phone
   (was a hard 430px = ~55px off-screen at 375px). Desktop still renders 430. */
.npmodal { width: min(430px, calc(100vw - 24px)); max-height: 90vh; display: flex; flex-direction: column; }
.npmodal .phead { flex: none; }
.npmodal .npbody { background: var(--card2); padding: 22px 24px; overflow-y: auto; }
/* Bank / wide list pickers: ONE fluid scroll region (the tkmodal pattern). The
   modal body is a fixed flex column - header, hint, search + filters stay put -
   and ONLY the list scrolls, filling the modal's height instead of a small fixed
   420px window. That removes the nested npbody+list double-scroller that made the
   scroll feel sticky, leaving a single smooth scrollbar. */
.npmodal.bkmodal .npbody,
.npmodal.mpmodal .npbody,
.npmodal.ovmodal .npbody { display: flex; flex-direction: column; overflow: hidden; }
.npmodal.bkmodal .bkpick,
.npmodal.mpmodal .mpgrid,
.npmodal.ovmodal .ovgrid { flex: 1 1 auto; min-height: 0; max-height: none;
  overflow-y: auto; overscroll-behavior: contain; }
/* "Collect from anyone" - INLINE panel (top of Overview + Media library).
   Generate row, fresh-link result (QR beside details), then manage rows. */
.clgen { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.clgenlab { font-size: .64rem; letter-spacing: .14em; color: var(--dim); }
.clopts { margin-top: 10px; }
.clopt { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem;
  cursor: pointer; border: 1px solid var(--line2); border-radius: 999px;
  padding: 5px 12px; background: var(--card); }
.clopt input { accent-color: var(--amber); }
.cltagopts { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cltagopts select, .cltagopts input { font-size: .74rem; padding: 5px 8px; }
.cltagopts input { width: 220px; }
.clmodechip { font-size: .56rem; letter-spacing: .08em; border: 1px solid var(--amber);
  color: var(--amber-deep); border-radius: 999px; padding: 2px 8px;
  background: var(--amber-soft); }
.clres { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap;
  border: 1px solid var(--amber); background: var(--amber-soft);
  border-radius: 12px; padding: 12px 14px; margin-top: 12px; }
.clres img { width: 148px; height: 148px; border-radius: 10px; background: #fff;
  padding: 6px; flex: none; }
.clresmeta { flex: 1 1 240px; min-width: 0; }
.clresurl { font-size: .62rem; word-break: break-all; color: var(--dim);
  padding: 6px 0 2px; }
/* back / forward chevrons: subtle, always present, disabled when there is
   nowhere to go */
.navhist { display: inline-flex; gap: 6px; margin-right: 8px; }
.navhist button { width: 34px; height: 34px; border-radius: 999px;
  border: 1px solid var(--line2); background: var(--card); color: var(--text);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.navhist button svg { width: 15px; height: 15px; }
.navhist button:hover:not(:disabled) { border-color: var(--amber); color: var(--amber-deep); }
.navhist button:disabled { opacity: .35; cursor: default; }
/* HOUSE ICONS on buttons/controls (.bic): 15px inline, inherits text colour,
   one amber accent - same recipe as the Quick nav. Never emoji on controls. */
.bic { display: inline-flex; width: 15px; height: 15px; margin-right: 6px;
  vertical-align: -2.5px; flex: none; }
.bic svg { width: 100%; height: 100%; }
.bic.cic { width: 11px; height: 11px; margin-right: 3px; vertical-align: -2px; }
/* post provenance chip: HOW this post was born (autopilot / campaign / preset
   / agent / hand-written...). Clickable when it has a home to jump to. */
/* Origin chip (AUTOPILOT / CAMPAIGN / FLO / PRESET ...). inline-flex so the house
   icon sits centred beside the label with an even gap (was an inline hack), a bit
   more breathing room than the old 1px padding, and a slightly heavier label. */
.qsrc { font-style: normal; display: inline-flex; align-items: center; gap: 4px;
  font-size: .56rem; font-weight: 600; letter-spacing: .09em;
  border: 1px solid var(--line2); border-radius: 999px; padding: 3px 9px;
  color: var(--muted); background: var(--card2); white-space: nowrap;
  vertical-align: middle; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.qsrc .bic { margin-right: 0; }   /* the flex gap spaces the icon; it inherits the pill colour */
/* AI-born posts (the daily autopilot + Flo) get a subtle amber ICON cue - a quiet
   "automated for you" brand signal that stays calm even when a column of autopilot
   drafts stacks up (icon only; the pill itself keeps its neutral fill) */
.qsrc[data-src="daily"] .bic, .qsrc[data-src="agent"] .bic { color: var(--amber); }
.qsrc.golink { cursor: pointer; }
.qsrc.golink:hover { border-color: var(--amber); color: var(--amber-deep); background: var(--amber-soft); }
.detailtop .qsrc { font-size: .62rem; padding: 4px 11px; gap: 5px; }
/* grouped uploads strip: what arrived through ONE link */
.cluploads { display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  border-top: 1px dashed var(--line2); margin-top: 8px; padding-top: 8px; }
.cluploads[hidden] { display: none; }
/* clickable button (opens the item in the media popup) styled like a plain thumb */
.clupthumb { width: 64px; text-decoration: none; color: var(--dim);
  background: none; border: none; padding: 0; margin: 0; cursor: pointer;
  font: inherit; text-align: center; }
.clupthumb img, .clupthumb video { width: 64px; height: 48px; object-fit: cover;
  border-radius: 7px; display: block; background: var(--card2);
  border: 1px solid var(--line2); }
.clupthumb:hover img, .clupthumb:hover video,
.clupthumb:focus-visible img, .clupthumb:focus-visible video { border-color: var(--amber); }
.clupthumb em { display: block; font-style: normal; font-size: .5rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-top: 2px; }
.clshare { display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
  border-top: 1px dashed var(--line2); margin-top: 8px; padding-top: 8px; }
.clshare[hidden] { display: none; }
.clshare .btn { font-size: .68rem; padding: 5px 9px; }
.clrow.clfocus { border-color: var(--amber); box-shadow: 0 0 0 2px rgba(224, 137, 0, .25); }
.clrow { border: 1px solid var(--line2); border-radius: 10px; padding: 8px 10px;
  margin-bottom: 8px; background: var(--card); }
/* zebra stripe a long list of links so rows are easy to tell apart */
.clrow:nth-of-type(even) { background: var(--card2); }
.clrow .clrowtop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding-bottom: 6px; }
.clrow .clname { font-size: .88rem; color: var(--text); }
.clrow .clpen { border: none; background: none; cursor: pointer; padding: 2px 4px;
  color: var(--dim); font-size: .8rem; line-height: 1; }
.clrow .clpen:hover { color: var(--amber-deep); }
.clrow .clmeta { font-size: .62rem; letter-spacing: .06em; color: var(--amber-deep);
  margin-left: auto; }
.clrow .clnamein { flex: 1 1 180px; max-width: 320px; font-size: .85rem;
  padding: 5px 9px; }
.clresname { padding: 0 0 4px; font-size: .92rem; }
.clrow .clrowbtns { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.clrow .clrowbtns .btn { font-size: .68rem; padding: 5px 9px; }
.clrow .clrowbtns select { font-size: .7rem; padding: 4px 6px; max-width: 140px; }
.npmodal .pv { width: 320px; margin: 0 auto 4px; border-radius: 14px;
  box-shadow: 0 10px 30px rgba(19, 26, 42, 0.14); }
.npmodal.tall { width: 340px; }
.npmodal.tall .pv-tt { width: 250px; border-radius: 16px; }
.npmodal .hint { max-width: 320px; margin: 0 auto; }
.pvhead { padding: 9px 12px; gap: 8px; }
.pvav { width: 30px; height: 30px; font-size: .8rem; }
.pvhead b { font-size: .8rem; }
.pvnames b { font-size: .8rem; }
.pvdim { font-size: .7rem; }
.pvacts { padding: 8px 12px 4px; }
.pvacts svg { width: 20px; height: 20px; margin-right: 10px; }
.pvlikes { font-size: .76rem; }
.pvcap { font-size: .76rem; padding: 3px 12px 2px; }
.pvwhen { font-size: .6rem; padding: 3px 12px 10px; }
.pvtext, .pvtextx { font-size: .8rem; padding: 2px 12px 9px; }
.pvbar span { font-size: .72rem; padding: 8px 0; }
.pvbar svg { width: 15px; height: 15px; }
.pvacts.pvx { font-size: .7rem; padding: 2px 12px 10px; }
.pvacts.pvx svg { width: 15px; height: 15px; }

/* top quick-nav: grouped dropdowns mirroring the sidebar */
.topnav { display: flex; align-items: center; gap: 4px; margin-right: 6px; }
.tnd { position: relative; }
.tnd-btn { background: none; border: none; cursor: pointer; padding: 9px 12px;
  border-radius: 10px; font-family: var(--font-body); font-weight: 600; font-size: .9rem;
  color: var(--muted); display: inline-flex; align-items: center; gap: 7px; transition: all .15s; }
.tnd-btn::after { content: ""; width: 6px; height: 6px; margin-top: -3px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg); transition: transform .18s; }
.tnd-btn:hover, .tnd.open .tnd-btn { color: var(--text); background: var(--card2); }
.tnd.open .tnd-btn::after { transform: rotate(225deg); margin-top: 3px; }
.tnd-menu { position: absolute; top: calc(100% + 10px); right: 0; min-width: 186px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-lg); padding: 7px; display: none; flex-direction: column;
  z-index: 120; }
.tnd-menu::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
.tnd.open .tnd-menu { display: flex; }
@media (hover: hover) { .tnd:hover .tnd-menu { display: flex; } .tnd:hover .tnd-btn { color: var(--text); background: var(--card2); } }
.tnd-menu button { text-align: left; background: none; border: none; cursor: pointer;
  padding: 10px 13px; border-radius: 9px; font-family: var(--font-body); font-size: .92rem;
  color: var(--text); white-space: nowrap; }
.tnd-menu button:hover { background: var(--amber-soft); }
/* ---- "Quick nav" MEGAMENU: grouped columns, an icon per feature, a one-line
   description each. Built on the .tnd base above; opens on click or hover, and
   JS pins the right edge to the viewport so the wide panel never overflows. ---- */
@keyframes tndMegaIn {
  from { opacity: 0; transform: translateY(-7px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* fill-mode left at default (none): if the animation runs it plays the entrance,
   and the panel always rests in its natural state - never stuck mid-keyframe. */
.tnd-mega.open .tnd-menu { animation: tndMegaIn .17s cubic-bezier(.16,.8,.3,1); }
@media (hover: hover) { .tnd-mega:hover .tnd-menu { animation: tndMegaIn .17s cubic-bezier(.16,.8,.3,1); } }
/* hover-intent: JS owns hover open/close with a close delay, so suppress the
   base .tnd:hover auto-open for the megamenu - only the .open class shows it,
   otherwise moving off the button would close it before you reach the items */
@media (hover: hover) { .tnd-mega:hover:not(.open) .tnd-menu { display: none; } }

.tnd-mega .tnd-menu {
  right: 0; /* JS re-pins the right edge to the viewport gutter on open */
  width: min(744px, calc(100vw - 32px));
  max-height: calc(100vh - 88px); overflow-y: auto;
  flex-direction: column;
  padding: 15px 18px 0;
}

.tnd-mega-head {
  display: flex; align-items: center; gap: 8px;
  font-size: .57rem; letter-spacing: .15em; color: var(--dim);
  padding: 0 2px 11px; margin-bottom: 13px;
  border-bottom: 1px solid var(--line);
}
.tnd-mega-head::before {
  content: ""; width: 7px; height: 7px; border-radius: 2px;
  background: var(--amber); flex: 0 0 auto;
}

.tnd-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 0; }
.tnd-col  { display: flex; flex-direction: column; gap: 16px; padding: 0 17px; }
.tnd-col:first-child { padding-left: 2px; }
.tnd-col:last-child  { padding-right: 2px; }
.tnd-col + .tnd-col  { border-left: 1px solid var(--line); }

.tnd-mega .tnd-sec { display: block; padding: 0; border: none; }
.tnd-mega .tnd-sec-h {
  display: block; padding: 0 10px 7px; color: var(--dim);
  font-size: .57rem; letter-spacing: .14em;
}
.tnm-list { display: flex; flex-direction: column; gap: 2px; }

.tnd-mega .tnm-item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  text-align: left; background: none; border: none; cursor: pointer;
  padding: 8px 10px; border-radius: 11px; color: var(--text);
  white-space: normal; transition: background .15s ease;
}
.tnd-mega .tnm-item:hover { background: var(--amber-soft); }

.tnm-ic {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--card2); border: 1px solid var(--line);
  color: var(--muted);
  transition: color .15s, border-color .15s, background .15s, transform .15s, box-shadow .15s;
}
.tnm-ic svg { width: 18px; height: 18px; }
.tnm-item:hover .tnm-ic {
  color: var(--amber); border-color: var(--amber); background: var(--card);
  transform: translateY(-1px) scale(1.04); box-shadow: 0 5px 12px rgba(224, 137, 0, .18);
}

.tnm-tx { display: flex; flex-direction: column; min-width: 0; line-height: 1.24; }
.tnm-lb {
  font-weight: 600; font-size: .905rem; color: var(--text);
  /* wrap to a 2nd line rather than ever truncating a feature name */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tnm-de {
  font-size: .69rem; color: var(--dim); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.tnm-item.is-active { background: var(--amber-soft); }
.tnm-item.is-active .tnm-ic { color: var(--amber); border-color: var(--amber); background: var(--card); }
.tnm-item.is-active .tnm-lb { color: var(--amber-deep); }

.tnd-mega-foot {
  display: flex; align-items: center; gap: 8px;
  margin-top: 14px; padding: 11px 4px 13px;
  border-top: 1px solid var(--line);
  color: var(--dim); font-size: .72rem;
}
.tnd-mega-foot svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--muted); }

/* keyboard focus: rounded amber ring that follows the item radius */
.tnd-mega .tnm-item:focus-visible { outline: none; background: var(--amber-soft); box-shadow: 0 0 0 2px var(--amber); }
.tnd-mega .tnm-item:focus-visible .tnm-ic { color: var(--amber); border-color: var(--amber); background: var(--card); }

/* dark: brighten the active label for contrast */
:root[data-theme="dark"] .tnm-item.is-active .tnm-lb { color: var(--amber-bright); }

/* responsive: 2 columns between 760-900px (top nav hides below 760) */
@media (max-width: 900px) {
  .tnd-mega .tnd-menu { width: min(560px, calc(100vw - 32px)); }
  .tnd-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2px; }
  .tnd-col { padding: 9px 16px; }
  .tnd-col + .tnd-col { border-left: 1px solid var(--line); }
  .tnd-col:nth-child(2n + 1) { border-left: none; }
  .tnd-col:nth-child(n + 3) { border-top: 1px solid var(--line); }
}

@media (prefers-reduced-motion: reduce) {
  .tnd-mega.open .tnd-menu, .tnd-mega:hover .tnd-menu { animation: none; }
  .tnd-mega .tnm-item, .tnm-ic { transition: none; }
  .tnm-item:hover .tnm-ic { transform: none; }
}
/* the sidebar always shows the full menu, so this quick-nav is a convenience -
   drop it on small screens where the header needs the room */
@media (max-width: 760px) { .topnav { display: none; } }
/* clickable brand + plan chip in the rail */
.brandmark { cursor: pointer; border-radius: 10px; }
.brandmark:hover b { color: #fff; }
.brandmark:hover { opacity: .92; }
button.planchip { border: none; cursor: pointer; text-align: left; transition: all .15s; }
button.planchip:hover { background: rgba(255,173,51,.22); color: #ffc46b; }
.tophelp svg circle:first-child { stroke: currentColor; }

/* half-screen slide-outs + drag-resize left edge */
.upmodal, .upmodal.wide { width: clamp(600px, 50vw, 96vw); max-width: 100vw; }
.postpanel { width: clamp(640px, 50vw, 96vw); max-width: 100vw; }
.presize { position: absolute; left: 0; top: 0; bottom: 0; width: 10px;
  cursor: ew-resize; z-index: 30; }
.presize::after { content: ""; position: absolute; left: 3px; top: 50%; height: 56px;
  width: 4px; border-radius: 999px; background: var(--line2); transform: translateY(-50%);
  opacity: 0; transition: opacity .15s; }
.presize:hover::after { opacity: 1; background: var(--amber); }
body.resizing { cursor: ew-resize; user-select: none; }
body.resizing .postpanel, body.resizing .upmodal { animation: none; transition: none; }

/* true carousel + collage + grid inside previews */
.pvcar { overflow: hidden; touch-action: pan-y; }
.pvstrip { display: flex; height: 100%; width: 100%; transition: transform .28s ease; }
.pvimg.pvcar .pvstrip { position: absolute; inset: 0; }
.pv-tt .pvstrip { position: absolute; inset: 0; z-index: 0; }
.pvslide { flex: 0 0 100%; height: 100%; background: #0c1220 center/cover no-repeat; }
.pvnav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 28px; height: 28px; border-radius: 999px; border: none; cursor: pointer;
  background: rgba(255,255,255,.92); color: #101418; font-size: 1.1rem; line-height: 1;
  box-shadow: 0 1px 6px rgba(0,0,0,.25); display: flex; align-items: center; justify-content: center; }
.pvnav.prev { left: 8px; }
.pvnav.next { right: 8px; }
.pvnav:hover { background: var(--card); }
.pv-tt .pvnav { background: rgba(0,0,0,.45); color: #fff; }
.pvdots.tt { position: absolute; bottom: 96px; left: 0; right: 0; z-index: 2; }
.pv-tt .pvcount { z-index: 2; }
.pvcollage { display: grid; gap: 2px; aspect-ratio: 16 / 10; }
.pvcollage.two { grid-template-columns: 1fr 1fr; }
.pvcollage.three { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.pvcollage.three .big { grid-row: 1 / 3; }
.pvcollage > div { background: #0c1220 center/cover no-repeat; position: relative; }
.pvgrid { display: grid; gap: 2px; border-radius: 14px; overflow: hidden;
  margin: 0 13px 10px; aspect-ratio: 16 / 10; }
.pvgrid.n2 { grid-template-columns: 1fr 1fr; }
.pvgrid.n3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.pvgrid.n3 > div:first-child { grid-row: 1 / 3; }
.pvgrid.n4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.pvgrid > div { background: #0c1220 center/cover no-repeat; position: relative; }
.pvmoreimg { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; background: rgba(0,0,0,.45); color: #fff;
  font-size: 1.1rem; font-weight: 700; }

/* ---------- queue calendar ---------- */
.viewtoggle { display: inline-flex; gap: 0; margin-left: auto; border: 1px solid var(--line2);
  border-radius: 999px; overflow: hidden; }
.viewtoggle button { background: var(--card); border: none; cursor: pointer; padding: 7px 16px;
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .12em; color: var(--muted); }
.viewtoggle button.on { background: var(--amber-soft); color: var(--amber-deep); font-weight: 600; }
.qcalwrap { padding: 18px 20px; max-height: calc(100vh - 275px); overflow-y: auto; }
.calhead { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.calhead b { font-family: var(--font-display); font-size: 1.1rem; min-width: 150px; text-align: center; }
.callegend { font-size: .56rem; letter-spacing: .08em; color: var(--dim);
  display: inline-flex; align-items: center; gap: 2px; flex-wrap: wrap; }   /* buttons carry their own padding */
/* legend items are clickable filters - read like the old inline key, hover = amber */
.calleg { display: inline-flex; align-items: center; background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: inherit; letter-spacing: inherit; color: var(--dim);
  padding: 3px 6px; border-radius: 6px; transition: background .12s, color .12s; }
.calleg:hover, .calleg:focus-visible { background: var(--amber-soft); color: var(--amber-deep); outline: none; }
.calleg.on { background: var(--amber-soft); color: var(--amber-deep); }
.callegend .calleg i { margin: 0 5px 0 0; }   /* dot hugs its label inside the button */
.calnote.calleg { color: var(--amber-deep); font-size: .56rem; }
.callegend i { width: 9px; height: 9px; border-radius: 999px; display: inline-block; margin-left: 8px; }
.calnote { font-size: .56rem; color: var(--amber-deep); }
/* calendar key hint: one clean, always-on helper line by the legend, replacing the
   old per-cell hover bubble. Right-aligned so it reads as part of the key. */
.calhint { flex-basis: 100%; display: flex; align-items: center; justify-content: flex-end;
  flex-wrap: wrap; gap: 5px; margin-top: 5px; font-size: .58rem; letter-spacing: .04em; color: var(--muted); }
.calhint .bic { width: 13px; height: 13px; margin-right: 0; }
.calhint-mid { color: var(--line); margin: 0 3px; }
.st-idea { background: var(--amber-bright); }
.st-approved { background: #5b8def; }
.st-scheduled { background: var(--green); }
.st-published { background: var(--dim); }
/* minmax(0,1fr) - not 1fr - so the 7 tracks can shrink below the chips' nowrap
   min-content and always fit the width; otherwise the last column (Sun) clips off */
.calgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.caldow { text-align: center; font-size: .56rem; letter-spacing: .12em; color: var(--dim); padding: 2px 0 6px; }
.calday { min-height: 96px; background: var(--card2); border: 1px solid var(--line);
  border-radius: 10px; padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.calday.out { opacity: .45; }
.calday.today { border-color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber); }
.calday.today .caldate { color: var(--amber-deep); font-weight: 700; }
.caldate { font-size: .72rem; color: var(--muted); }
.calchip { display: flex; align-items: center; gap: 5px; border: none; cursor: pointer;
  background: var(--card); border-radius: 7px; padding: 4px 6px; font-size: .66rem;
  font-family: var(--font-mono); color: var(--text); text-align: left;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; box-shadow: 0 1px 3px rgba(19,26,42,.08); }
.calchip:hover { box-shadow: 0 2px 8px rgba(19,26,42,.16); }
.calchip i { width: 7px; height: 7px; border-radius: 999px; flex: none; }
.calchip.st-idea i { background: var(--amber-bright); }
.calchip.st-approved i { background: #5b8def; }
.calchip.st-scheduled i { background: var(--green); }
.calchip.st-published i { background: var(--dim); }
/* chip layout: time + title, optional trailing lock for non-movable posts */
.calchip-tm { flex: none; color: var(--muted); font-size: .62rem; }
.calchip-tt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.calchip.drag { cursor: grab; }
.calchip.drag:active { cursor: grabbing; }
.calchip.drag:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(19, 26, 42, .20); }
.calchip-lock { width: 11px; height: 11px; flex: none; margin-left: auto; opacity: .5; }
.calchip.dragging { opacity: .35; }
.calchip.swapok { outline: 2px solid var(--amber); outline-offset: 1px;
  background: var(--amber-soft); }   /* drop here to swap the two posts' slots */
/* "+N more" overflow control - keeps every day cell the same height */
.calmore { border: 0; background: none; color: var(--amber-deep); font-size: .58rem;
  letter-spacing: .04em; cursor: pointer; padding: 3px 5px; text-align: left;
  align-self: flex-start; border-radius: 6px; }
.calmore:hover { background: var(--amber-soft); }
/* weekends a touch greyer than weekdays so the week reads at a glance (theme-safe wash) */
.calday.wknd { background-image: linear-gradient(0deg, rgba(120, 124, 140, .06), rgba(120, 124, 140, .06)); }
/* per-day "+N more" popover: the full day's posts, body-level + viewport-clamped */
.calpop { position: fixed; z-index: 1150; width: 264px; max-height: 60vh; overflow-y: auto;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 14px 40px rgba(19, 26, 42, .28); padding: 8px; }
.calpop-h { font-size: .56rem; letter-spacing: .08em; color: var(--muted); padding: 4px 8px 8px; }
.calpop-list { display: flex; flex-direction: column; gap: 4px; }
.calpop-row { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; border: 0;
  background: var(--card2); border-radius: 8px; padding: 8px 10px; color: var(--text); cursor: pointer;
  font-family: var(--font-mono); font-size: .72rem; overflow: hidden; white-space: nowrap; }
.calpop-row:hover { background: var(--amber-soft); }
.calpop-row i { width: 7px; height: 7px; border-radius: 999px; flex: none; }
.calpop-row.st-idea i { background: var(--amber-bright); }
.calpop-row.st-approved i { background: #5b8def; }
.calpop-row.st-scheduled i { background: var(--green); }
.calpop-row.st-published i { background: var(--dim); }
.calpop-row .calchip-tt { overflow: hidden; text-overflow: ellipsis; }
/* Campaign cards: make the expand header obviously clickable + reorder cue.
   Applies to BOTH surfaces (Overview "Your campaigns" + the Campaigns tab). */
.crplan-h { cursor: pointer; border-radius: 10px; transition: background .12s; padding: 4px 6px; margin: -4px -6px 0; }
.crplan-h:hover { background: var(--amber-soft); }
.crplan-h:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.crpseemore { display: inline-flex; align-items: center; gap: 4px; color: var(--amber-deep);
  font-size: .58rem; letter-spacing: .04em; white-space: nowrap; }
.crpseemore::after { content: ""; width: 7px; height: 7px; flex: none; margin-left: 2px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .15s; }
.crplan-h[aria-expanded="true"] .crpseemore::after { transform: rotate(-135deg); }
/* post rows read as clickable + previewable */
.crppost { cursor: pointer; }
.crppost:hover { border-color: var(--amber); background: var(--amber-soft); }
.crppost .crptitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* approval progress bar - a scannable "how ready" cue on each campaign card */
.crpprog { display: block; height: 5px; max-width: 340px; margin: 8px 0 2px;
  background: var(--line); border-radius: 999px; overflow: hidden; }
.crpprog i { display: block; height: 100%; background: var(--amber); border-radius: 999px; transition: width .3s; }
.crpprog.done i { background: var(--green); }
.calchip:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.calday.dropok { border-color: var(--amber); background: var(--amber-soft);
  box-shadow: inset 0 0 0 2px var(--amber); }
.calghost { position: fixed; z-index: 1200; left: 0; top: 0; pointer-events: none;
  background: var(--card); color: var(--text); border: 1px solid var(--amber);
  border-radius: 7px; padding: 5px 9px; font-size: .66rem; max-width: 220px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  box-shadow: 0 8px 24px rgba(19, 26, 42, .28); transform: rotate(-1.5deg); }
/* rich hover preview - body-level fixed so .qcalwrap's overflow can't clip it */
.calcard { position: fixed; z-index: 1100; left: 0; top: 0; width: 280px; pointer-events: none;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px;
  box-shadow: 0 14px 40px rgba(19, 26, 42, .28); opacity: 0; transform: translateY(4px);
  transition: opacity .14s, transform .14s; }
.calcard.on { opacity: 1; transform: translateY(0); }
.calcard-row { display: flex; gap: 10px; align-items: flex-start; }
.calcard-media { flex: none; width: 64px; height: 64px; border-radius: 8px; overflow: hidden;
  position: relative; background: var(--card2); }
.calcard-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.calcard-more { position: absolute; right: 3px; bottom: 3px; background: rgba(10, 14, 24, .78);
  color: #fff; font-size: .5rem; padding: 1px 5px; border-radius: 6px; }
.calcard-headw { min-width: 0; flex: 1; }
.calcard-metaline { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; flex-wrap: wrap; }
.calcard-pill { font-size: .5rem; letter-spacing: .08em; font-weight: 700; color: #fff;
  padding: 2px 7px; border-radius: 999px; background: var(--dim); }
.calcard-pill.st-idea { background: var(--amber-deep); }
.calcard-pill.st-approved { background: #3b6fd4; }
.calcard-pill.st-scheduled { background: #2f7d55; }
.calcard-pill.st-published { background: var(--dim); }
.calcard-when { font-size: .56rem; color: var(--muted); }
.calcard-title { font-weight: 650; font-size: .84rem; line-height: 1.28; word-break: break-word; }
.calcard-body { margin-top: 8px; font-size: .72rem; color: var(--muted); line-height: 1.4; }
.calcard-fc { margin-top: 6px; font-size: .56rem; color: var(--amber-deep); }
.calcard-nets { display: flex; gap: 5px; margin-top: 9px; flex-wrap: wrap; }
.calcard-nets .qnet { width: 24px; height: 24px; pointer-events: none; }
.calcard-foot { margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--line);
  font-size: .54rem; letter-spacing: .06em; color: var(--dim); }
/* published-post performance strip in the hover card: views · likes · comments */
.calcard-stats { display: flex; align-items: center; gap: 15px; margin-top: 9px;
  font-size: .74rem; color: var(--muted); }
.calcard-stat { display: inline-flex; align-items: center; gap: 5px; }
.calcard-stat b { font-weight: 700; color: var(--text); }
.calcard-stat .bic { width: 13px; height: 13px; margin-right: 0; }
.calcard-statspend { margin-top: 9px; font-size: .68rem; color: var(--dim); }
/* per-network performance rows in the hover card: each platform's OWN numbers on
   its own line, so a figure can never be shown under the wrong network */
.calcard-pernet { margin-top: 9px; display: flex; flex-direction: column; gap: 5px; }
.cpn-row { display: flex; align-items: center; gap: 8px; font-size: .72rem; color: var(--muted); }
.cpn-net { width: 16px; height: 16px; flex: none; color: var(--text); }
.cpn-net svg { width: 16px; height: 16px; display: block; }
.cpn-name { flex: none; min-width: 62px; letter-spacing: .05em; }
.cpn-nums { display: inline-flex; align-items: center; gap: 12px; margin-left: auto; }
.cpn-stat { display: inline-flex; align-items: center; gap: 4px; }
.cpn-stat b { font-weight: 700; color: var(--text); }
.cpn-stat .bic { width: 12px; height: 12px; margin-right: 0; }

/* -------- per-network publish status: failure warnings + fix guidance ------- */
/* compact red chip shown on the list row, calendar card and post detail header */
.netwarn { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px;
  padding: 3px 9px; border-radius: 999px; font-family: var(--font-mono);
  font-size: .6rem; letter-spacing: .04em; white-space: nowrap; cursor: help;
  color: var(--red); background: var(--red-soft); border: 1px solid rgba(214,69,69,.3); }
.netwarn .bic, .netwarn .bic svg { width: 13px; height: 13px; }
.cpn-warn { margin: 8px 0 2px; }
/* a rejected network row inside the hover card / calendar card */
.cpn-row.fail .cpn-name { color: var(--red); }
.cpn-fail { display: inline-flex; align-items: center; gap: 4px; margin-left: auto;
  color: var(--red); font-weight: 700; cursor: help; }
.cpn-fail .bic, .cpn-fail .bic svg { width: 12px; height: 12px; }
/* failed network icon in the list row gets a small red badge dot (no tooltip) */
.qnet.fail { position: relative; }
.qnet.fail::after { content: ""; position: absolute; top: -1px; right: -1px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--red);
  border: 1.5px solid var(--card); }
.qnet.fail svg { color: var(--red); }
.qnet.pend svg { opacity: .5; }
/* the "N networks didn't post" block in the post detail: reason + next action */
.netissues { margin: 2px 0 14px; border: 1px solid rgba(214,69,69,.32);
  border-radius: 12px; background: var(--red-soft); overflow: hidden; }
.netissues-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 11px 14px; border-bottom: 1px solid rgba(214,69,69,.22); }
.netissues-head .bic { color: var(--red); width: 17px; height: 17px; flex: none; }
.netissues-head b { font-size: .9rem; color: var(--text); }
.netissues-head > span { flex: 1 1 100%; font-size: .78rem; color: var(--muted); line-height: 1.45; }
.nfix-row { display: flex; gap: 11px; padding: 11px 14px; border-top: 1px solid var(--line);
  background: var(--card); }
.nfix-row:first-of-type { border-top: 0; }
.nfix-net { flex: none; display: flex; align-items: center; gap: 7px; min-width: 118px;
  font-size: .82rem; color: var(--text); }
.nfix-net svg { width: 18px; height: 18px; }
.nfix-net b { font-weight: 600; }
.nfix-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.nfix-why { font-size: .82rem; color: var(--text); }
.nfix-fix { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem;
  color: var(--amber-deep); font-weight: 700; }
.nfix-fix .bic { width: 14px; height: 14px; flex: none; }
.nfix-raw { font-family: var(--font-mono); font-size: .68rem; color: var(--muted);
  opacity: .8; word-break: break-word; cursor: help; }
.nfix-row.pend .nfix-net b, .nfix-row.pend .nfix-why { color: var(--muted); }
.nfix-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; border-top: 1px solid var(--line); background: var(--card); }
.nfix-actions .btn { display: inline-flex; align-items: center; gap: 6px; }
.nfix-actnote { font-size: .75rem; color: var(--muted); }
@media (max-width: 520px) {
  .nfix-row { flex-direction: column; gap: 6px; }
  .nfix-net { min-width: 0; }
  .netwarn { margin-left: 0; margin-top: 4px; }
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* usage meter */
.ubar-big { height: 14px; border-radius: 999px; background: var(--line); overflow: hidden; }
.ubar-big i { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--green), #3ecf8e); transition: width .4s; }
.ubar-big i.warm { background: linear-gradient(90deg, var(--amber-bright), #f29718); }
.ubar-big i.hot { background: linear-gradient(90deg, #f07b7b, var(--red)); }
.urow-meta { font-size: .6rem; letter-spacing: .1em; color: var(--muted); margin-top: 8px; }

/* ---- media-library storage meter (SPEC_PLANS_STORAGE.md) ------------------- */
.storemeter { margin: 0 0 14px; padding: 11px 13px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--card2); }
.storemeter .sm-top { display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; margin-bottom: 8px; }
.storemeter .sm-lab { font-size: .6rem; letter-spacing: .12em; color: var(--muted); }
.storemeter .sm-val { font-size: .82rem; font-weight: 600; color: var(--text); }
.storemeter .sm-mut { color: var(--muted); font-weight: 400; }
.storemeter .sm-bar { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.storemeter .sm-bar > i { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--green), #3ecf8e); transition: width .4s; }
.storemeter.warn .sm-bar > i { background: linear-gradient(90deg, var(--amber-bright), #f29718); }
.storemeter.full .sm-bar > i { background: linear-gradient(90deg, #f07b7b, var(--red)); }
.storemeter .sm-note { margin-top: 8px; font-size: .78rem; color: var(--muted); }
.storemeter.full .sm-note { color: var(--red); }

/* ---- AI credit meters: sidebar (permanent navy rail) + Quick-nav strip -------
   Single source: /api/usage. Fuel-gauge fill = credits LEFT, so a short bar
   reads as "nearly out"; colour + copy escalate green -> amber -> red as the
   balance depletes. Both are one click from the top-up packs on Your plan. */
.credbar { display: block; height: 6px; border-radius: 999px;
  background: var(--line); overflow: hidden; }
.credbar i { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--green), #3ecf8e); transition: width .45s ease; }
.credbar i.warm { background: linear-gradient(90deg, var(--amber-bright), #f29718); }
.credbar i.hot  { background: linear-gradient(90deg, #f07b7b, var(--red)); }

/* an attribute selector so [hidden] always beats the display below */
.sidecred[hidden], .qncred[hidden] { display: none; }

/* sidebar meter - on the dark navy rail, so it uses the navy palette */
.sidecred { display: flex; flex-direction: column; gap: 7px; width: 100%;
  text-align: left; cursor: pointer; font-family: var(--font-body);
  background: rgba(255, 255, 255, .035); border: 1px solid var(--navy-line);
  border-radius: 13px; padding: 10px 12px; transition: border-color .15s, background .15s; }
.sidecred:hover { border-color: var(--amber); background: rgba(255, 173, 51, .07); }
.sidecred:focus-visible { outline: none; border-color: var(--amber);
  box-shadow: 0 0 0 2px rgba(242, 151, 24, .5); }
.sidecred .credbar { background: rgba(255, 255, 255, .10); }
.sc-top { display: flex; align-items: center; justify-content: space-between;
  font-size: .54rem; letter-spacing: .13em; line-height: 1; }
.sc-lab { color: var(--navy-dim); }
.sc-cta { color: var(--amber-bright); opacity: 0; transition: opacity .15s; }
.sidecred:hover .sc-cta,
.sidecred.is-low .sc-cta, .sidecred.is-out .sc-cta { opacity: 1; }
.sc-num { color: var(--navy-text); font-size: 1.04rem; letter-spacing: -.01em; }
.sc-num b { font-weight: 700; }
.sc-unit { color: var(--navy-muted); font-size: .8rem; }
.sc-warn { display: none; font-size: .66rem; line-height: 1.3; color: var(--amber-bright); }
.sidecred.is-low .sc-warn, .sidecred.is-out .sc-warn { display: block; }
.sidecred.is-low { border-color: rgba(255, 173, 51, .42); }
.sidecred.is-out { border-color: rgba(214, 69, 69, .55); }
.sidecred.is-out .sc-warn { color: #ff9a9a; }

/* Quick-nav credit card - a compact VERTICAL card that lives in the Account
   column's spare space (keeps the whole megamenu on one screen, no scroll) */
.qncred { display: flex; flex-direction: column; gap: 8px;
  margin-top: 4px; padding: 12px 13px; border-radius: 13px;
  border: 1px solid var(--line); background: var(--card2); cursor: pointer;
  transition: border-color .15s, background .15s; }
.qncred:hover { border-color: var(--amber); }
.qncred.is-low { border-color: rgba(224, 137, 0, .5); background: var(--amber-soft); }
.qncred.is-out { border-color: rgba(214, 69, 69, .5); background: var(--red-soft); }
.qnc-top { display: flex; align-items: center; gap: 9px; }
.qnc-ic { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center; color: var(--amber);
  background: var(--card); border: 1px solid var(--line); }
.qnc-ic svg { width: 19px; height: 19px; }
.qnc-lb { font-size: .72rem; letter-spacing: .04em; color: var(--dim);
  font-weight: 600; text-transform: uppercase; }
.qnc-num { font-size: 1.15rem; color: var(--text); line-height: 1; }
.qnc-num b { font-weight: 700; }
.qnc-num span { font-size: .8rem; color: var(--muted); }
.qnc-sub { font-size: .7rem; color: var(--dim); line-height: 1.25; }
.qncred.is-low .qnc-sub { color: var(--amber-deep); font-weight: 600; }
.qncred.is-out .qnc-sub { color: var(--red); font-weight: 600; }
.qnc-btn { width: 100%; text-align: center; padding: 9px 10px; font-size: .82rem; margin-top: 2px; }

/* brief amber pulse when a meter jumps you to the usage panel */
@keyframes gfFlash {
  0% { box-shadow: 0 0 0 0 rgba(224, 137, 0, 0); }
  30% { box-shadow: 0 0 0 3px rgba(224, 137, 0, .30); }
  100% { box-shadow: 0 0 0 0 rgba(224, 137, 0, 0); }
}
.gf-flash { animation: gfFlash 1.3s ease; border-radius: 16px; }
@media (prefers-reduced-motion: reduce) { .gf-flash { animation: none; } }

/* ---- AI Credit usage guide (Your plan page): grouped, table-like list of
   what each feature costs. Responsive grid (feature | cost) - never scrolls
   sideways. Costs from credits.py; daily caps live per plan. */
.cg-colhead { display: flex; justify-content: space-between; align-items: center;
  font-size: .56rem; letter-spacing: .14em; color: var(--dim);
  padding: 4px 2px 8px; border-bottom: 1px solid var(--line); }
.cg-group { margin-top: 6px; }
.cg-gh { display: flex; align-items: center; gap: 8px;
  font-size: .58rem; letter-spacing: .13em; color: var(--amber-deep);
  padding: 14px 2px 6px; }
.cg-gh::before { content: ""; width: 6px; height: 6px; border-radius: 2px;
  background: var(--amber); flex: 0 0 auto; }
.cg-row { display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 10px 14px; padding: 9px 4px; border-top: 1px solid var(--line);
  border-radius: 8px; transition: background .12s; }
.cg-group .cg-row:first-of-type { border-top: none; }
.cg-row:hover { background: var(--amber-soft); }
.cg-feat { min-width: 0; }
.cg-feat b { display: block; font-size: .92rem; font-weight: 600; color: var(--text); }
.cg-feat span { display: block; font-size: .745rem; color: var(--dim);
  margin-top: 2px; line-height: 1.3; }
.cg-cost { text-align: right; white-space: nowrap; font-size: .82rem;
  font-weight: 700; color: var(--amber-deep); }
.cg-cost.cg-free { color: var(--green); }
.hint.cgfoot { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: .72rem; }
@media (max-width: 560px) {
  .cg-feat span { font-size: .72rem; }
  .cg-cost { font-size: .78rem; }
}

/* audit trail */
.audrow { align-items: center; cursor: default; }
.audrow.rowlink { cursor: pointer; }
/* clickable rows read as clickable at a GLANCE, not only on hover: a always-on
   "Open" affordance + a lift on hover, so the jump-to-the-work is discoverable */
.audrow.rowlink:hover { border-color: var(--amber); background: var(--amber-soft, rgba(224,137,0,.06)); }
.audrow .audgo { flex: none; margin-right: 10px; display: inline-flex; align-items: center;
  gap: 5px; font-size: .56rem; letter-spacing: .1em; color: var(--dim);
  opacity: .55; transition: opacity .15s, color .15s; }
.audrow.rowlink:hover .audgo { opacity: 1; color: var(--amber-deep, #c67700); }
.audrow .audgo .bic { width: 13px; height: 13px; margin: 0; }
/* inbound phone uploads: content arriving, visually set apart from actions */
.audrow.audinbound { background: var(--amber-soft, rgba(224,137,0,.05)); }
.audrow.audinbound:hover { background: var(--amber-soft, rgba(224,137,0,.1)); }
.audup { flex: none; margin-right: 12px; width: 26px; height: 26px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--amber-soft, rgba(224,137,0,.16)); }
.audup .bic { width: 15px; height: 15px; margin: 0; }
.audrow.audinbound .audgo { opacity: .8; color: var(--amber-deep, #c67700); }
.auddot { width: 9px; height: 9px; border-radius: 999px; flex: none; margin-right: 12px; }
.audhint { font-weight: 400; color: var(--muted); font-size: .84rem; }
/* activity design pass: sticky day dividers, calmer rows, aligned time column */
.auddayhead { position: sticky; top: 0; z-index: 2; background: var(--card);
  padding: 10px 18px 6px; font-size: .58rem; letter-spacing: .16em; color: var(--dim);
  border-bottom: 1px solid var(--line); }
.audrow { border-bottom: 1px solid var(--line); transition: background .12s; }
.audrow:hover { background: var(--card2); }
.audrow .t b { white-space: normal; }        /* let long action + hint wrap, not clip */
.audrow .audtime { flex: none; width: 46px; text-align: right; color: var(--dim);
  font-size: .72rem; letter-spacing: .04em; }
.audctlrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 4px 4px; }
.audstat { color: var(--dim); font-size: .62rem; letter-spacing: .08em; }

/* user roles: colour-coded badges + a plain-language legend */
.rolebadge { font-family: var(--font-mono); font-size: .56rem !important; letter-spacing: .1em;
  padding: 3px 9px; border-radius: 999px; cursor: help; }
.role-owner { background: var(--amber-soft); color: var(--amber-deep); }
.role-operator { background: rgba(58,123,213,.16); color: #2f66b0; }
.role-client { background: rgba(63,157,95,.16); color: #2e7d4f; }
.urolehint { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: .82rem; }
.urolehint .bic { flex: none; }
.roledefs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px; margin-top: 14px; }
.roledef { border: 1px solid var(--line2); border-left: 3px solid var(--line2);
  border-radius: 11px; padding: 12px 14px; background: var(--card2); }
.roledef:nth-child(1) { border-left-color: var(--amber); }
.roledef:nth-child(2) { border-left-color: #3a7bd5; }
.roledef:nth-child(3) { border-left-color: #3f9d5f; }
.roledef b { display: block; margin-bottom: 4px; font-size: .95rem; }
.roledef span { color: var(--muted); font-size: .82rem; line-height: 1.45; }

/* performance tiles + billing table */
.perfrow { display: flex; gap: 12px; flex-wrap: wrap; margin: 4px 0 10px; }
.perftile { flex: 1; min-width: 110px; background: var(--card2); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 14px; text-align: center; }
.perftile b { display: block; font-family: var(--font-display); font-size: 1.3rem; }
.perftile span { font-family: var(--font-mono); font-size: .56rem; letter-spacing: .12em; color: var(--dim); }
.perfnote { font-style: normal; font-size: .46rem; opacity: .7; }

/* per-network performance matrix (post detail) - network rows x metric cols */
.perfnetwrap { margin: 4px 0 10px; overflow-x: auto; }   /* contained scroll: page never shakes sideways */
.perfnet { width: 100%; border-collapse: collapse; }
.perfnet caption { text-align: left; }
.perfnet th, .perfnet td { padding: 8px 8px; border-bottom: 1px solid var(--line); }
.perfnet thead th { font-family: var(--font-mono); font-size: .54rem; letter-spacing: .1em;
  color: var(--dim); font-weight: 700; }
.perfnet .perfnetnm { text-align: left; white-space: nowrap; }
.perfnet thead th.perfnetnm { color: var(--dim); }
.perfnet tbody th.perfnetnm { font-weight: 600; box-shadow: inset 3px 0 0 var(--net-c, var(--line2)); }
.perfnet .perfcell-nm { display: flex; align-items: center; gap: 8px; padding-left: 4px; }
.perfnet .perfcell-nm b { font-weight: 600; font-size: .9rem; color: var(--text); }
/* the network NAME is the link to its live post (replaces the old LIVE ON strip).
   Research-driven: name-as-link, always-visible affordance (persistent subtle
   underline + trailing external arrow - never hover-only), a real focus ring,
   and a >=24px tap target. Only PUBLISHED networks get the anchor, so the arrow
   doubles as a coverage indicator; unpublished names stay plain text. */
.perfnet .perfnetlink { text-decoration: none; color: inherit; border-radius: 8px;
  padding-top: 7px; padding-bottom: 7px; transition: color .12s; }
.perfnet .perfnetlink b { text-decoration: underline; text-decoration-color: var(--line2);
  text-underline-offset: 2px; text-decoration-thickness: 1px;
  transition: color .12s, text-decoration-color .12s; }
.perfnet .perfnetlink:hover, .perfnet .perfnetlink:focus-visible { color: var(--amber-deep); }
.perfnet .perfnetlink:hover b, .perfnet .perfnetlink:focus-visible b {
  color: var(--amber-deep); text-decoration-color: var(--amber-deep); }
.perfnet .perfnetlink:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.perfnet .perfext { color: var(--muted); font-size: .8em; margin-left: -3px; flex: none;
  transition: color .12s, transform .12s; }
.perfnet .perfnetlink:hover .perfext, .perfnet .perfnetlink:focus-visible .perfext {
  color: var(--amber-deep); transform: translate(1px, -1px); }
.perfhint { padding: 0 0 8px; margin: 0; }
.perfnet .perfic { flex: none; width: 26px; height: 26px; padding: 5px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted); background: var(--card2); }
.perfnet .perfic svg { width: 100%; height: 100%; }
.perfnet .perfic.instagram { color: #d6336c; background: rgba(214,51,108,.12); }
.perfnet .perfic.facebook { color: #1877f2; background: rgba(24,119,242,.12); }
.perfnet .perfic.linkedin { color: #0a66c2; background: rgba(10,102,194,.12); }
.perfnet .perfic.youtube { color: #e23b2e; background: rgba(226,59,46,.12); }
.perfnet .perfic.pinterest { color: #e60023; background: rgba(230,0,35,.12); }
.perfnet .perfic.gmb { color: #1a73e8; background: rgba(26,115,232,.12); }
.perfnet .perfic.tiktok, .perfnet .perfic.twitter { color: var(--text); background: rgba(19,26,42,.08); }
.perfnet td, .perfnet th { vertical-align: middle; }
.perfnet th.perfn, .perfnet td.perfn { text-align: right; white-space: nowrap; min-width: 54px;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.perfnet td.perfn { font-size: .95rem; color: var(--text); }
.perfnet .perfna { color: var(--dim); }
.perfnet tbody tr { transition: background .12s; }
.perfnet tbody tr:hover { background: var(--card2); }
.perfnet tfoot th, .perfnet tfoot td { border-bottom: none; border-top: 2px solid var(--line2);
  background: var(--card2); }
.perfnet tfoot th.perfnetnm { font-family: var(--font-mono); font-size: .56rem; letter-spacing: .1em;
  color: var(--dim); font-weight: 700; }
.perfnet tfoot td.perfn { font-weight: 700; color: var(--text); }
/* mobile: the drawer is full-width, so stack each network into a mini-card
   rather than a cramped 5-column grid or a sideways scroll */
@media (max-width: 520px) {
  .perfnetwrap { overflow-x: visible; }
  .perfnet, .perfnet tbody, .perfnet tfoot, .perfnet tr, .perfnet th, .perfnet td { display: block; }
  .perfnet thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .perfnet tr { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px;
    margin-bottom: 8px; background: var(--card2); }
  .perfnet tbody tr.perfnetrow { border-left: 3px solid var(--net-c, var(--line)); }
  .perfnet th, .perfnet td { border-bottom: none; padding: 0; }
  .perfnet tbody th.perfnetnm { margin-bottom: 6px; padding-bottom: 6px; padding-left: 0;
    border-bottom: 1px solid var(--line); box-shadow: none; }
  .perfnet tbody .perfcell-nm { padding-left: 0; }
  .perfnet td.perfn { display: flex; justify-content: space-between; align-items: baseline;
    padding: 4px 0; font-size: 1rem; }
  .perfnet td.perfn::before { content: attr(data-label); font-family: var(--font-mono);
    font-size: .54rem; letter-spacing: .1em; color: var(--dim); text-transform: uppercase;
    align-self: center; }
  .perfnet tfoot tr { background: transparent; }
  .perfnet tfoot th.perfnetnm { border-bottom: 1px solid var(--line2); }
}

.billtbl { width: 100%; border-collapse: collapse; font-size: .88rem; }
.billtbl th { text-align: left; font-family: var(--font-mono); font-size: .56rem;
  letter-spacing: .12em; color: var(--dim); padding: 6px 10px; border-bottom: 1px solid var(--line); }
.billtbl td { padding: 9px 10px; border-bottom: 1px solid var(--line); }
.billtbl a { text-decoration: none; }
.nplive { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 10px auto 2px; max-width: 320px; }
.nplivestats { font-size: .6rem; letter-spacing: .08em; color: var(--muted); }
.dropopts { display: flex; gap: 10px; margin-top: 12px; }
.dropopts .btn { font-size: .85rem; padding: 9px 16px; }

/* page-image import picker */
.ipgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.iptile { position: relative; border: 1px solid var(--line2); border-radius: 10px;
  overflow: hidden; cursor: pointer; background: var(--card2); padding: 0; height: 96px; }
.iptile img, .iptile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.iptile span { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(7,11,20,.72);
  color: #fff; font-size: .5rem; letter-spacing: .1em; padding: 3px 0; text-align: center; }
.iptile:hover { border-color: var(--amber); }
.iptile[disabled] { cursor: default; }

/* Stock library picker (search -> pick free photos into the library) */
.stock-modal { width: min(820px, 95vw); max-height: 88vh; overflow: hidden;
  display: flex; flex-direction: column; }
.stock-body { display: flex; flex-direction: column; gap: 12px; min-height: 0; flex: 1; }
.stock-searchrow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.stock-q { flex: 1 1 220px; min-width: 0; font-size: 16px; padding: 9px 12px;
  border: 1px solid var(--line2); border-radius: 9px; background: var(--card2); color: var(--text); }
.stock-q:focus { outline: none; border-color: var(--amber); background: var(--card); }
.stock-grid { flex: 1; min-height: 140px; overflow-y: auto; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; align-content: start; }
.stktile { margin: 0; }
.stktile-pick { position: relative; display: block; width: 100%; padding: 0; cursor: pointer;
  border: 1px solid var(--line2); border-radius: 10px; overflow: hidden; background: var(--card2);
  aspect-ratio: 4 / 3; }
.stktile-pick img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stktile-pick:hover { border-color: var(--amber); }
.stktile-add { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(7,11,20,.72);
  color: #fff; font-size: .5rem; letter-spacing: .1em; padding: 4px 0; text-align: center; }
.stktile-pick.in { border-color: #14976b; cursor: default; }
.stktile-pick.in .stktile-add { background: #14976b; }
.stktile-pick[disabled] { cursor: default; }
.stktile-by { font-size: .5rem; color: var(--muted); margin: 3px 2px 0; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stock-foot { display: flex; align-items: center; gap: 10px; }
.stock-credit { margin-left: auto; font-size: .5rem; color: var(--muted); letter-spacing: .08em; }
.stock-empty { grid-column: 1 / -1; text-align: center; padding: 26px 8px; color: var(--muted); }


/* Creative Studio tab + modal dialogs */
.studiocards { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; margin-bottom: 14px; }
.studiocard .stform label { display: block; font-size: .6rem; letter-spacing: .1em;
  font-family: var(--font-mono); color: var(--muted); margin: 12px 0 5px; }
.studiocard .stform input, .studiocard .stform textarea, .studiocard .stform select {
  width: 100%; }
.strow { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }
.stpick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 4px; }
.sttile { border: 2px solid var(--line2); border-radius: 10px; overflow: hidden; padding: 0;
  cursor: pointer; height: 72px; background: var(--card2); }
.sttile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sttile:hover { border-color: var(--amber); }
.sttile.on { border-color: var(--amber); box-shadow: 0 0 0 2px var(--amber-soft); }
.costchip { font-size: .54rem; letter-spacing: .08em; font-family: var(--font-mono);
  border-radius: 999px; padding: 3px 9px; white-space: nowrap;
  background: var(--amber-soft); color: var(--amber-deep); }
.costchip.free { background: rgba(20, 151, 107, .12); color: var(--green); }
.gfdlg .gfmsg { padding: 0 0 14px; white-space: pre-line; }

/* Any VISIBLE file input wears a styled browse button (the site prefers hidden
   inputs behind a .btn, but a bare one must never ship the raw grey control). */
input[type=file]:not([hidden]) { font-family: var(--font-body); font-size: .9rem;
  color: var(--dim); max-width: 100%; }
input[type=file]:not([hidden])::file-selector-button {
  font-family: var(--font-body); font-size: .9rem; cursor: pointer; margin-right: 10px;
  background: var(--card2); color: var(--text); border: 1px solid var(--line2);
  padding: 8px 13px; border-radius: 10px; transition: all .18s ease; }
input[type=file]:not([hidden])::file-selector-button:hover {
  border-color: var(--amber); box-shadow: var(--shadow); }

/* Reusable media-associator popup (pick one photo; add via upload or phone QR) */
.mpmodal { width: min(700px, 94vw); }
.mpmodal .mpbody { padding: 16px 18px; }
.mpbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.mpbar .mpsearch { flex: 1 1 180px; min-width: 140px; }
.mpbar .spacer { flex: 1; }
.mpgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px; max-height: 52vh; overflow-y: auto; }
/* Square tile via the padding-bottom hack (NOT aspect-ratio): a <button> with
   aspect-ratio + absolute children doesn't resolve height on iOS Safari, so the
   thumbnails collapsed into overlapping slivers. padding-bottom:100% gives a real
   in-flow square height on every browser; the media absolute-fills it. */
.mptile { position: relative; height: 0; padding-bottom: 100%; aspect-ratio: auto; }
.mptile img, .mptile video { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; }
.mptile.vid::after { content: "\25B6"; position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center; font-size: 1.4rem; color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,.6); pointer-events: none; }
/* Video play BADGE (picker .mptile + library .masset): a neutral dark circle with a
   white triangle, centred and ABOVE the poster frame. Two bugs it fixes: (1) the
   picker glyph had NO z-index so once the poster reveals (opacity 0->1, z-index:1)
   it painted OVER the glyph = no way to tell a video from a photo; (2) a bare white
   glyph washes out on bright/busy posters. The badge reads on ANY frame. */
.mptile.vid::after, .masset .img.vid::after {
  inset: auto; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 34px; height: 34px; border-radius: 50%; padding-left: 3px;
  font-size: .82rem; text-shadow: none;
  background: rgba(12, 18, 32, .6);
  box-shadow: 0 1px 5px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .3); }
.mptname { position: absolute; left: 0; right: 0; bottom: 0; font-size: .56rem;
  padding: 4px 6px; color: #fff; text-align: left; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; background: linear-gradient(transparent, rgba(7,11,20,.82)); }
/* Smooth picker load: skeleton tiles hold the grid's FULL height from the first
   paint, so the centred modal opens at its final size instead of collapsing to a
   one-line "Loading..." then ballooning into a 52vh grid (the jump). Each real
   thumbnail then fades in on decode over a shimmer, mirroring .mlbmediawrap - no
   pop, no flash of an empty square. */
.mpgrid { min-height: 216px; align-content: start; }
.mpskel { position: relative; height: 0; padding-bottom: 100%; border: 2px solid var(--line2);
  border-radius: 10px; overflow: hidden; background: linear-gradient(100deg,
  var(--card2) 34%, var(--line2) 50%, var(--card2) 66%); background-size: 200% 100%;
  animation: shimmer 1.15s linear infinite; }
.mptile::before { content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(100deg, var(--card2) 34%, var(--line2) 50%, var(--card2) 66%);
  background-size: 200% 100%; animation: shimmer 1.15s linear infinite; }
.mptile.loaded::before { display: none; }
.mptile img, .mptile video { z-index: 1; opacity: 0; transition: opacity .3s ease; }
.mptile.loaded img, .mptile.loaded video { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .mpskel, .mptile::before { animation: none; }
  .mptile img, .mptile video { transition: none; } }
/* Selection made OBVIOUS on busy photos: a scrim + inset amber ring over the whole
   thumbnail, plus a bright numbered badge showing tap order - a lone border is easy
   to miss (research: Material check-mark+scrim, NN/g colour+icon, ordered badges). */
.mpsel { position: absolute; inset: 0; z-index: 2; border-radius: 8px; pointer-events: none;
  opacity: 0; transition: opacity .15s ease; box-shadow: inset 0 0 0 3px var(--amber);
  background: rgba(224, 137, 0, .18); }
.mptile.on .mpsel { opacity: 1; }
.mptick { position: absolute; top: 6px; right: 6px; z-index: 3; min-width: 24px; height: 24px;
  padding: 0 6px; border-radius: 999px; display: none; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: .72rem; font-weight: 700;
  background: var(--amber-bright); color: #1a1206;
  box-shadow: 0 0 0 2px #fff, 0 1px 5px rgba(0, 0, 0, .35); }
.mptile.on .mptick { display: flex; }
@media (prefers-reduced-motion: reduce) { .mpsel { transition: none; } }
.mpphonebox { text-align: center; margin-bottom: 14px; padding-bottom: 12px;
  border-bottom: 1px solid var(--line2); }
.mpphonebox img { width: 200px; height: 200px; border-radius: 12px; background: #fff; padding: 8px; }
.mpphonebox .hint { max-width: 340px; margin: 8px auto 0; }
.mpphonebox .mpwait { font-family: var(--font-mono); font-size: .72rem; color: var(--dim); margin-top: 6px; }
.mpfoot { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--line2); }

/* RULE: every text input, textarea and select ANYWHERE in the app wears the
   site field style by default - :where() keeps specificity at zero so scoped
   styles still win, but a browser-default input can never ship again. */
:where(input:not([type]), input[type=text], input[type=email], input[type=url],
  input[type=number], input[type=password], input[type=search],
  input[type=datetime-local], input[type=date], input[type=time], textarea, select) {
  background: var(--card2); border: 1px solid var(--line2); color: var(--text);
  border-radius: 10px; padding: 10px 12px; font-family: var(--font-body);
  font-size: .92rem; max-width: 100%; }
:where(input, textarea, select):focus { outline: none; border-color: var(--amber); }
:where(textarea) { resize: vertical; }
.gfdlg label { display: block; font-family: var(--font-mono); font-size: .6rem;
  letter-spacing: .12em; color: var(--dim); margin: 12px 0 5px; }
.gfdlg input, .gfdlg textarea, .gfdlg select { width: 100%; }


/* Studio: visual effect picker + multi-select order badges + toggles */
.fxgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.fxtile { position: relative; border: 2px solid var(--line2); border-radius: 10px;
  overflow: hidden; padding: 0; cursor: pointer; background: var(--card2); }
.fxtile img { width: 100%; aspect-ratio: 9/16; object-fit: cover; display: block; }
.fxtile span { position: absolute; left: 0; right: 0; bottom: 0;
  background: rgba(7,11,20,.78); color: #fff; font-size: .48rem;
  letter-spacing: .06em; padding: 3px 2px; text-align: center; }
.fxtile:hover { border-color: var(--amber); }
.fxtile.on { border-color: var(--amber); box-shadow: 0 0 0 2px var(--amber-soft); }
.sttile { position: relative; }
.stord { position: absolute; top: 4px; right: 4px; background: var(--amber);
  color: #1a1206; font-size: .6rem; width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-weight: 700; }
.stoggles { display: flex; flex-wrap: wrap; gap: 14px; margin: 10px 0 4px; }
.stog { display: flex; align-items: center; gap: 6px; font-size: .6rem;
  letter-spacing: .08em; color: var(--muted); cursor: pointer; }
.stog input { width: auto; }

/* overlay style pickers (captions / end-card / retention bar) + chooser */
.ovpicks { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px; margin: 12px 0 4px; }
.ovpick { display: flex; align-items: center; gap: 10px; text-align: left; padding: 11px 13px;
  border: 1px solid var(--line2); border-radius: 12px; background: var(--card); cursor: pointer;
  transition: border-color .12s, box-shadow .12s; }
.ovpick:hover { border-color: var(--amber); box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.ovpick-l { flex: 0 0 auto; font-size: .5rem; letter-spacing: .1em; color: var(--dim); }
.ovpick-v { flex: 1; font-size: .9rem; font-weight: 700; color: var(--text); }
.ovpick-go { flex: 0 0 auto; font-size: .52rem; letter-spacing: .08em; color: var(--amber-deep); }
.ovmodal { width: min(760px, 95vw); }
.ovmodal .npbody { padding: 14px 18px 18px; }
/* Wide pickers: help text FLOWS left-aligned, full width - never the centred
   320px block ".npmodal .hint" would otherwise force, which wastes vertical
   space on ragged line breaks. Applies to the style/bank/media choosers. */
.ovmodal .hint, .bkmodal .hint, .mpmodal .hint {
  max-width: none; margin: 0 0 12px; text-align: left; font-size: .8rem; line-height: 1.5; }
.ovgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 9px; max-height: 64vh; overflow-y: auto; padding: 2px; }
.ovopt { text-align: left; border: 2px solid var(--line2); border-radius: 12px; overflow: hidden;
  background: var(--card); cursor: pointer; padding: 0 0 8px; display: flex; flex-direction: column;
  transition: border-color .12s, box-shadow .12s; }
.ovopt:hover { border-color: var(--amber); }
.ovopt.on { border-color: var(--amber); box-shadow: 0 0 0 2px var(--amber-soft); }
.ovopt-l { font-size: .74rem; font-weight: 700; padding: 6px 8px 0; }
.ovopt-d { font-size: .58rem; color: var(--muted); padding: 1px 8px 0; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* the 9:16 mini-preview canvas each style draws itself into - height-driven so
   every card is the same height and the grid stays tidy */
.ovmini { position: relative; aspect-ratio: 9/16; height: 100px; width: auto; margin: 0 auto 6px;
  background: linear-gradient(150deg, #24344c, #131d2e); border-radius: 0 0 3px 3px; overflow: hidden; }
.ovmini-off { display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(45deg, #2a3346 0 6px, #232b3c 6px 12px); }
.ovmini-off span { font-size: .56rem; color: #9aa3b4; letter-spacing: .08em; }
.ovmini .ovb { position: absolute; border-radius: 2px; }               /* bar fill/base */
.ovcap { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap;
  border-radius: 4px; font-size: .34rem; font-weight: 800; padding: 2px 5px; line-height: 1; }
.ovcap.big { font-size: .42rem; padding: 3px 6px; }
.ovcard { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 0 8px; }
.ovcard .ovname { height: 5px; width: 62%; border-radius: 2px; }
.ovcard .ovsub { height: 3px; width: 34%; border-radius: 2px; background: var(--amber); opacity: .85; }
.ovcard .ovsub.big { height: 5px; width: 50%; }
.ovcard .ovdiv { height: 2px; width: 20px; border-radius: 2px; background: var(--amber); }
.ovcard .ovcta { height: 8px; width: 44%; border-radius: 5px; background: var(--amber); }
.ovcard .ovcta.wide { width: 100%; margin-left: -8px; border-radius: 0; box-sizing: content-box; padding: 0 8px; }
.ovfoot { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--line2); flex-wrap: wrap; }
.ovdef { display: flex; align-items: center; gap: 7px; font-size: .74rem; color: var(--text); cursor: pointer; }
.ovdef input { width: auto; }


/* talking avatar: tap-to-place mouth */
.mouthbox { position: relative; border: 1px solid var(--line2); border-radius: 12px;
  overflow: hidden; cursor: crosshair; margin-bottom: 6px; }
.mouthbox { max-width: 680px; }
.mouthbox img { width: 100%; max-height: 380px; object-fit: contain; display: block;
  background: var(--card2); }
.mouthzone { position: absolute; border: 1px dashed rgba(242, 151, 24, .55);
  pointer-events: none; }
.mouthfoot { position: absolute; border: 2px solid var(--amber); border-radius: 50%;
  pointer-events: auto; cursor: grab; touch-action: none;
  background: rgba(224, 137, 0, .12); box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.mouthfoot:active { cursor: grabbing; }
.mflip { position: absolute; left: 8%; right: 8%; top: -1px; height: 2px;
  background: rgba(255,255,255,.85); border-radius: 2px; pointer-events: none; }
.mfgrab { position: absolute; right: -11px; top: 50%; width: 20px; height: 20px;
  margin-top: -10px; border-radius: 50%; background: var(--amber);
  border: 3px solid #fff; box-shadow: 0 0 0 2px var(--amber);
  pointer-events: auto; cursor: ew-resize; touch-action: none; }
.mflabel { position: absolute; left: 50%; top: -26px; transform: translateX(-50%);
  background: rgba(7,11,20,.85); color: #fff; font-size: .62rem; letter-spacing: .06em;
  border-radius: 999px; padding: 2px 8px; pointer-events: none; }
.mouthdot { position: absolute; width: 18px; height: 18px; border-radius: 50%;
  background: var(--amber); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--amber);
  pointer-events: none; }
/* tilt knob on top of the oval - a child of .mouthfoot so it rotates WITH it,
   always sitting "above" the mouth in mouth-space; drag it to slant the mouth */
.mfrot { position: absolute; left: 50%; top: -24px; width: 16px; height: 16px; margin-left: -8px;
  border-radius: 50%; background: #fff; border: 3px solid var(--amber);
  box-shadow: 0 0 0 2px var(--amber); pointer-events: auto; cursor: grab; touch-action: none; }
.mfrot::before { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 11px;
  margin-left: -1px; background: var(--amber); }
.mfrot:active { cursor: grabbing; }
.mouthbox:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.mouthctl { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.mouthtilt { font-size: .62rem; letter-spacing: .06em; color: var(--amber-deep); font-weight: 600; }
#stTalkPreview.on { background: var(--amber); border-color: var(--amber); color: #1a1206; }
/* a field paired with its own "From bank" button (titled-photo headline) */
.stbankrow { display: flex; gap: 8px; align-items: center; }
.stbankrow input { flex: 1; min-width: 0; }
.stbankrow .btn { flex: none; }
/* hook / value ad lines carry an input + two AI buttons; let them wrap so the
   field keeps a usable width and the buttons drop below when space is tight
   (the input's flex-basis drives it - no magic breakpoint). */
.stbankrow.adline { flex-wrap: wrap; }
.stbankrow.adline > input { flex: 1 0 220px; }

/* video tiles show a real frame (media fragment #t=1.2), play badge on top */
.masset .img video, .mth video { position: absolute; inset: 0; width: 100%;
  height: 100%; object-fit: cover; pointer-events: none; }
.masset .img.vid::after, .mth.vid::after, .mptile.vid::after { z-index: 2; }   /* play glyph ABOVE the poster (video is z-index:1) - the picker was missing here */
.masset .img.vid .aibadge, .mth.vid .aibadge, .masset .img.vid .mact { z-index: 3; }


/* Studio tabs + inline build status */
.studiotabs { display: flex; flex-wrap: nowrap; overflow-x: auto; margin-bottom: 18px; gap: 6px;
  scrollbar-width: none; -ms-overflow-style: none; }
.studiotabs::-webkit-scrollbar { height: 0; }
.studiotabs > button { flex: 0 0 auto; white-space: nowrap; }
.studiotabs button { font-family: var(--font-mono); font-size: .68rem;
  letter-spacing: .04em; padding: 9px 13px; border-radius: 11px;
  border: 2px solid var(--line2); background: var(--card); color: var(--text);
  cursor: pointer; font-weight: 700; }
.studiotabs button:hover { border-color: var(--amber); }
.studiotabs button.on { background: var(--amber-bright); border-color: var(--amber-bright);
  color: #1a1206; box-shadow: var(--shadow); } /* bright fill so dark label clears AA */
.studiotabs button.dragging { opacity: .5; cursor: grabbing; }   /* the tab being moved */
/* reorder helper line under the tabs: quiet hint + a reset that only shows once
   a custom order is saved. Wraps on narrow screens so it never scrolls sideways. */
.streorder { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
  margin: -8px 0 15px; font-size: .72rem; color: var(--muted); }
.streorder-reset { color: var(--amber-deep); text-decoration: none; font-weight: 700;
  border-bottom: 1px dashed currentColor; }
.streorder-reset:hover { color: var(--amber); }
.stpanes { grid-template-columns: 1fr; }
.stpane .stform { max-width: none; }
.stpane .stform input:not([type=checkbox]), .stpane .stform select,
.stpane .stform textarea { max-width: 680px; }
/* AI Video: optional guide images first, then numbered 2-up steps, then the
   optional outro + music side by side - so the whole creator fits one screen.
   The numbers give the explicit order that keeps a 2-column form unambiguous. */
.clipform .clipintro { margin-bottom: 12px; }
.clipguide { margin-bottom: 13px; }                       /* optional guide images sit first, up top */
.clipguide .stfold { margin-top: 0; }                     /* sit tight under the intro - no double gap */
.clipguide .stfold-body { padding-top: 10px; }
.clipguide .stfold-body .stselstrip { margin-top: 0; }    /* editing-from strip hugs the head, neater */
.clipgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 18px; align-items: start; }
.clipgrid .ststep { min-width: 0; }
.clipgrid .clipdesc { grid-column: 1 / -1; }              /* the prompt is the hero - full width */
.clipform .ststep > label, .clipform .clipoutrofield > label { display: flex; align-items: center; gap: 7px; margin: 0 0 5px; }
/* White numerals on a FIXED deep amber (#995800 = light-theme --amber-deep). Not
   var(--amber): white on #e08900 is only 2.71:1 (fails AA), and --amber-deep flips
   lighter in dark mode where white would fail again. #995800 holds white at 5.6:1
   and stays >=3:1 against both light and dark cards - AA in both themes. */
.stnum { display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px;
  flex: none; border-radius: 50%; background: #995800; color: #fff;
  font-family: var(--font-mono); font-size: .64rem; font-weight: 700; }
/* fill the grid cell instead of the 680px single-column cap (beats .stpane .stform select) */
.stpane .stform.clipform select, .stpane .stform.clipform textarea,
.stpane .stform.clipform .aiprompt { max-width: none; width: 100%; }
.clipform .stnarr2 { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.clipform .stnarr2 .aistyle { width: auto; flex: 0 0 auto; }
.clipform .stnarr2 .aiprompt { flex: 1 1 160px; width: auto; }
/* last, optional: Brand outro + Music side by side. wireStudioMusic() injects the
   MUSIC label + row right after the outro <select>, so a 2-row column flow lays the
   four children out as two columns (outro | music) without touching that shared JS. */
.clipform .clipoutrofield { display: grid; grid-template-rows: auto auto; grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr); column-gap: 18px; align-items: start; margin-top: 15px; }
.clipform .clipoutrofield select, .clipform .clipoutrofield .stmusicrow { margin: 0; width: 100%; }
.clipform .clipoutrofield .stmusiclbl { margin: 0 0 5px !important; }   /* align with the outro label (row 1) */
@media (max-width: 760px) {
  .clipgrid { grid-template-columns: 1fr; }
  .clipform .clipoutrofield { display: block; }                        /* stack outro, then music */
  .clipform .clipoutrofield .stmusiclbl { margin: 12px 0 5px !important; }
}
@media (min-width: 1100px) {
  .stpane .stpick { grid-template-columns: repeat(8, 1fr); }
  .stpane .fxgrid { grid-template-columns: repeat(8, 1fr); }
}
.stpane { display: none; }
.stpane.on { display: block; }
/* ---- Full-screen (maximise) a Studio creator ----------------------------
   The header toggle (.stfs) expands a creator to fill the viewport for more
   editing room. In full screen a BRANDED BAR (logo + "Creative Studio >
   FEATURE" breadcrumb + Close) replaces the pane header, a soft brand gradient
   replaces the flat card, and a short loading cover hides the reflow/redraw
   pause. A CSS overlay (position:fixed), NOT the native Fullscreen API - works
   on iOS Safari + inside embeds, keeps our own Close control, pins the bar and
   scrolls the body. z-index 45 sits above the top bar (30) yet below toasts
   (50), the media lightbox (300) and tooltips (1000). No ancestor of .stpane
   sets transform/filter/contain, so inset:0 stays viewport-anchored (verified).
   Every bar item is in normal flex flow, so the Close control can never overlap
   the title/chip the way the earlier absolutely-positioned one did. */

/* enter control, in the normal pane header (icon only) */
.stfs { position: absolute; right: 40px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 6px; margin: 0;
  background: transparent; border: 1px solid var(--line2); color: var(--muted);
  border-radius: 9px; padding: 6px 8px; cursor: pointer; line-height: 0; }
.stfs:hover { border-color: var(--amber); color: var(--text); }
.stfs:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.stfs .bic { margin: 0; width: 16px; height: 16px; }
.stfs-lab { display: none; }
/* reserve header room for [cost chip] [enter btn] [fold chevron] */
.studiocard.stpane > .phead.pheadflex { padding-right: 82px; }

/* the branded bar + loading cover live in every pane, shown only in full screen */
.stfsbar, .stfsload { display: none; }

/* ---- maximised surface: soft brand gradient (the house ambient wash) ---- */
.studiocard.stpane.stfsmax { display: flex; flex-direction: column;
  position: fixed; inset: 0; z-index: 45; margin: 0; border: 0; border-radius: 0;
  max-height: 100vh; max-height: 100dvh;
  background:
    radial-gradient(1150px 640px at 6% -10%, rgba(255,173,51,.16), transparent 58%),
    radial-gradient(980px 640px at 99% 4%, rgba(62,207,142,.11), transparent 60%),
    var(--bg); }
.studiocard.stpane.stfsmax > .phead { display: none; }        /* replaced by the branded bar */
.studiocard.stpane.stfsmax > .stfsbar { display: flex; }
/* content sits on a centred "document" card so the gradient frames it */
.studiocard.stpane.stfsmax > .panelpad { flex: 1 1 auto; overflow-y: auto;
  -webkit-overflow-scrolling: touch; width: calc(100% - 40px); max-width: 1180px;
  margin: 20px auto; background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; box-shadow: 0 14px 44px -18px rgba(8,12,22,.42); }

/* branded bar: [logo] Creative Studio > FEATURE .............. [Close] */
.stfsbar { align-items: center; gap: 13px; flex: 0 0 auto;
  padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--card2); }
.stfsbar-logo { display: inline-flex; align-items: center; gap: 9px; flex: none;
  font-family: var(--font-display); font-weight: 700; font-size: 1.02rem;
  letter-spacing: -.01em; color: var(--text); }
.stfsbar-logo svg { width: 30px; height: 30px; border-radius: 7px; flex: none; }
.stfsbar-word b { color: var(--amber-deep); }
.stfsbar-div { width: 1px; height: 22px; background: var(--line2); flex: none; }
.stfsbar-crumb { display: inline-flex; align-items: center; gap: 8px; min-width: 0;
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; }
.stfsbar-crumb .cr-root { color: var(--muted); white-space: nowrap; }
.stfsbar-crumb .cr-sep { color: var(--dim); display: inline-flex; flex: none; }
.stfsbar-crumb .cr-sep .bic { margin: 0; width: 13px; height: 13px; }
.stfsbar-crumb .cr-cur { color: var(--amber-deep); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stfsbar .spacer { flex: 1 1 auto; min-width: 10px; }
.stfsclose { display: inline-flex; align-items: center; gap: 8px; flex: none;
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  background: var(--card); border: 1px solid var(--line2); color: var(--text);
  border-radius: 10px; padding: 9px 14px; cursor: pointer; line-height: 1; }
.stfsclose:hover { border-color: var(--amber); color: var(--amber-deep); background: var(--amber-soft); }
.stfsclose:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.stfsclose .bic { margin: 0; width: 15px; height: 15px; }

/* loading cover: same gradient + a brand spinner, hides the enter reflow/redraw */
.studiocard.stpane.stfsmax > .stfsload { display: flex; position: absolute; inset: 0; z-index: 4;
  flex-direction: column; align-items: center; justify-content: center; gap: 15px;
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .32s ease, visibility .32s;
  background:
    radial-gradient(1150px 640px at 6% -10%, rgba(255,173,51,.16), transparent 58%),
    radial-gradient(980px 640px at 99% 4%, rgba(62,207,142,.11), transparent 60%),
    var(--bg); }
.studiocard.stpane.stfsmax.stfs-loading > .stfsload { opacity: 1; visibility: visible;
  pointer-events: auto; transition: opacity .12s ease; }
.stfsload-spin { width: 36px; height: 36px; border-radius: 50%;
  border: 3px solid var(--line2); border-top-color: var(--amber); animation: stfsSpin .7s linear infinite; }
.stfsload-txt { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted); }
@keyframes stfsSpin { to { transform: rotate(360deg); } }

/* mobile: keep the mark, drop the wordmark + breadcrumb root so the bar never wraps */
@media (max-width: 620px) {
  .stfsbar { gap: 10px; padding: 9px 12px; }
  .stfsbar-word, .stfsbar-div, .stfsbar-crumb .cr-root, .stfsbar-crumb .cr-sep { display: none; }
  .studiocard.stpane.stfsmax > .panelpad { width: calc(100% - 20px); margin: 12px auto; border-radius: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .stfsload-spin { animation: none; }
  .studiocard.stpane.stfsmax > .stfsload { transition: none; }
}
.stbuild { margin-top: 14px; border-radius: 12px; padding: 12px 16px; font-size: .9rem;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.stbuild.pending { background: var(--amber-soft); color: var(--amber-deep); }
.stbuild.done { background: rgba(20, 151, 107, .12); color: var(--green); }
.stbuild.err { background: rgba(190, 40, 40, .1); color: #a33; }
.stbuild .hlink { font-weight: 700; text-decoration: underline; }
/* LIVE build stepper (staged builds e.g. Ultra Sync): each stage the worker reports lights
   up in turn - a slick determinate checklist right inside the build card. */
.stbuild.stprog { display: block; padding: 14px 16px; }
.stprog-head { font-size: .9rem; line-height: 1.45; margin-bottom: 12px; }
.stp-steps { list-style: none; margin: 0; padding: 0; }
.stp-step { display: flex; align-items: center; gap: 11px; padding: 5px 0; position: relative; }
/* a hairline rail threads the step dots into one connected timeline */
.stp-step::before { content: ""; position: absolute; left: 12px; top: -3px; bottom: -3px;
  width: 2px; background: var(--amber-deep); opacity: .16; }
.stp-step:first-child::before { top: 50%; }
.stp-step:last-child::before { bottom: 50%; }
.stp-ic { flex: none; width: 25px; height: 25px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font-size: 13px; font-weight: 800;
  background: var(--card, #fff); border: 2px solid var(--amber-deep); position: relative; z-index: 1; }
.stp-ic.wait { opacity: .32; }
.stp-ic.now { border-color: transparent; background: transparent; }
.stp-ic.now .stspin { width: 19px; height: 19px; border-width: 2px; }
.stp-ic.done { background: var(--green, #14976b); border-color: var(--green, #14976b); color: #fff; }
.stp-lb { font-size: .9rem; }
.stp-step.wait .stp-lb { opacity: .5; }
.stp-step.now .stp-lb { font-weight: 700; }
.stp-step.done .stp-lb { opacity: .82; }
.stp-sub { display: inline-block; margin-left: 7px; font-weight: 700; font-size: 11px;
  padding: 1px 8px; border-radius: 999px; background: var(--amber); color: #fff; vertical-align: 1px; }
.stspin.sm { width: 12px; height: 12px; border-width: 2px; }
.stp-note { margin-top: 4px; }
/* rich instant-result card (titled photo / collage): preview + post actions */
.stbuild.stresult { display: block; padding: 14px; color: inherit; background: var(--card2, #faf8f4); border: 1px solid var(--line, #e4dfd4); }
.stres-row { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.stres-thumb { position: relative; flex: 0 0 auto; width: 108px; height: 108px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line2, #d2ccbe); background: var(--card, #fff); cursor: zoom-in; padding: 0; }
.stres-thumb img, .stres-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.stres-thumb.isvid::after { content: "\25B6"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.6); background: rgba(10,15,28,.18); pointer-events: none; }
.stres-body { flex: 1 1 220px; min-width: 200px; }
.stres-h { font-size: .92rem; margin-bottom: 10px; color: var(--green, #14976b); font-weight: 600; }
.stres-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.stres-actions .btn { padding: 9px 13px; font-size: 13px; }
/* multi-output strip (a collage's 3 sizes): every size visible + clickable */
.stres-sizes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px;
  padding-top: 12px; border-top: 1px solid var(--line2, #d2ccbe); }
.stres-sizes-l { flex: 0 0 auto; font-size: .52rem; letter-spacing: .12em; color: var(--dim, #8a8f9a); }
.stres-size { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 8px; overflow: hidden; padding: 0;
  border: 1px solid var(--line2, #d2ccbe); background: var(--card, #fff); cursor: zoom-in; }
.stres-size img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stres-size.on { border-color: var(--amber); box-shadow: 0 0 0 2px var(--amber-soft); }
.stres-size:hover { border-color: var(--amber); }
.stspin { width: 14px; height: 14px; border-radius: 50%; flex: none;
  border: 2px solid var(--amber-deep); border-top-color: transparent;
  animation: stspin 1s linear infinite; }
@keyframes stspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .stspin { animation: none; } }
/* media-library Refresh: spin the icon while the library re-loads */
#mediaRefresh.spinning .bic { display: inline-flex; animation: stspin .8s linear infinite; }
@media (prefers-reduced-motion: reduce) { #mediaRefresh.spinning .bic { animation: none; } }
/* a Studio build button while its render is in flight: spinner + "Generating",
   non-clickable (also disabled in JS) so it can't be double-submitted */
.btn.stbuilding { cursor: progress; display: inline-flex; align-items: center;
  justify-content: center; gap: 7px; }
.btn.stbuilding .stspin { width: 13px; height: 13px;
  border-color: currentColor; border-top-color: transparent; }


/* EDITING FROM strip - the selection the build will actually use */
.stselstrip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--card2); border: 1px solid var(--line2); border-radius: 12px;
  padding: 10px 14px; margin: 12px 0 4px; }
.stsel-lab { font-size: .72rem; letter-spacing: .1em; color: var(--muted); flex: none; }
.stsel-name { font-size: .95rem; font-weight: 600; color: var(--text); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; max-width: 420px; }
.stselthumb { position: relative; width: 54px; height: 54px; border-radius: 10px;
  overflow: visible; flex: none; }
.stselthumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px;
  border: 2px solid var(--amber); }
.stselthumb i { position: absolute; bottom: -4px; left: -4px; background: var(--amber);
  color: #1a1206; font-style: normal; font-weight: 700; font-size: .58rem;
  width: 18px; height: 18px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; }
.stselthumb button { position: absolute; top: -7px; right: -7px; width: 20px; height: 20px;
  border-radius: 50%; border: none; background: #1a1206; color: #fff; font-size: .6rem;
  cursor: pointer; line-height: 1; }
/* EDITING FROM - clean per-image cards (thumb + its own name + remove), each
   opens the media popup on click. Used everywhere the strip appears. */
.stselstrip { align-items: flex-start; }
.stsel-cards { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 100%; }
.stselcard { position: relative; display: flex; align-items: center; gap: 9px; padding: 6px 9px 6px 6px;
  border: 1px solid var(--line2); border-radius: 10px; background: var(--card); cursor: pointer;
  max-width: 250px; transition: border-color .12s, box-shadow .12s; }
.stselcard:hover { border-color: var(--amber); box-shadow: 0 1px 6px rgba(0,0,0,.06); }
.stselcard:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.stselcard-thumb { position: relative; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 8px; overflow: hidden; background: var(--card2); }
.stselcard-thumb img, .stselcard-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.stselcard-thumb.isvid::after { content: "\25B6"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.stselord { position: absolute; top: 2px; left: 2px; background: var(--amber); color: #1a1206; font: 700 9px/1 ui-monospace, monospace; padding: 2px 4px; border-radius: 5px; }
.stselcard-name { font-size: 12.5px; font-weight: 500; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.stselcard-x { flex: 0 0 auto; border: 0; background: transparent; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; padding: 0 3px; border-radius: 5px; }
.stselcard-x:hover { color: #d33; background: rgba(211, 51, 51, .1); }


/* gfForm inline aux action (e.g. AI name beside the NAME field) */
.gfauxrow { display: flex; gap: 8px; align-items: stretch; }
.gfauxrow input { flex: 1; }
.gfauxrow .btn { flex: none; white-space: nowrap; }


/* Studio collapsible media folds */
.stfold { border: 1px solid var(--line2); border-radius: 12px; margin: 12px 0 6px;
  overflow: hidden; }
.stfold-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px;
  cursor: pointer; user-select: none; background: var(--card2);
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .1em;
  color: var(--muted); }
.stfold-head:hover { color: var(--text); }
.stfold-t { font-weight: 700; }
.stfold-sum { color: var(--amber-deep); letter-spacing: .04em; text-transform: none;
  font-size: .62rem; }
.stfold-chev { flex: none; transition: transform .18s ease; text-transform: lowercase;
  font-family: var(--font-body); font-size: .8rem; }
.stfold:not(.open) .stfold-chev { transform: rotate(-90deg); }
.stfold-body { padding: 12px 14px; }
.stfold:not(.open) .stfold-body { display: none; }
@media (prefers-reduced-motion: reduce) { .stfold-chev { transition: none; } }


/* Voiced narration AI tools */
.stnarr { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 8px; }
.stnarr select { width: auto; flex: none; }
.stnarr input { flex: 1; min-width: 200px; }
.stnarr .btn { flex: none; }
.bkpick { display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow-y: auto; }
.bkrow { text-align: left; border: 1px solid var(--line2); border-radius: 10px;
  background: var(--card2); padding: 10px 13px; cursor: pointer; display: block; }
.bkrow:hover { border-color: var(--amber); }
.bkrow b { display: block; font-size: .82rem; margin-bottom: 3px; }
.bkrow span { display: block; font-size: .74rem; color: var(--muted); }


/* Support: richer ticket rows + thread navigation */
.tkrow { align-items: flex-start; }
.tkrow .t { flex: 1; min-width: 0; }
.tkrow .tkmeta { display: block; font-family: var(--font-mono); font-size: .58rem;
  color: var(--muted); margin-top: 3px; }
.tkrow .tksnip { display: block; font-size: .78rem; color: var(--dim); margin-top: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tkrow:focus { outline: 2px solid var(--amber); outline-offset: -2px; }
.tkthead { gap: 8px; }
.tkthead .tktitle { font-family: var(--font-body); font-weight: 600; font-size: .9rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex;
  align-items: center; gap: 8px; }
.tkalert { font-family: var(--font-mono); font-size: .5rem; letter-spacing: .08em;
  color: var(--green); background: rgba(20,151,107,.12); padding: 2px 7px; border-radius: 999px; }
.tkscroll { max-height: 62vh; overflow-y: auto; }
.tkclosed { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.btn.sm[disabled] { opacity: .4; cursor: default; }


/* RULE: every panel section header collapses/expands. Click the header (not a
   control inside it) to fold the panel; state persists per header. Modals and
   nested non-panel pheads are excluded. */
.panel > .phead { cursor: pointer; }
.panel > .phead > * { cursor: auto; }
/* ...but real controls in the header stay clickable-looking (the reset is only
   meant for text/labels, not buttons or the sort select) */
.panel > .phead button:not(:disabled),
.panel > .phead select,
.panel > .phead a[href] { cursor: pointer; }
.panel > .phead::after { content: "\25be"; margin-left: 10px; flex: none;
  font-family: var(--font-body); font-size: .85rem; color: var(--muted);
  transition: transform .18s ease; }
.panel > .phead:not(.pheadflex)::after { float: right; }
.panel.pcol > .phead::after { transform: rotate(-90deg); }
/* a pheadflex header can wrap its chips onto a 2nd line; pin the expand/collapse
   chevron to the header's top-right so it stays in the SAME spot whether the
   header is one line or two, expanded or collapsed (never drops with the chips) */
.panel > .phead.pheadflex { position: relative; padding-right: 44px; }
.panel > .phead.pheadflex::after { position: absolute; top: 14px; right: 18px; margin: 0; line-height: 1; }
.panel.pcol > .phead.pheadflex::after { transform: rotate(-90deg); }
/* header-only bands (e.g. the Growth-page Flo banner) have no body to fold, so they
   must NOT advertise a fold: drop the chevron, the pointer and the reserved padding
   - otherwise a click looks broken (toggles an invisible state and does nothing) */
.panel.nofold > .phead { cursor: default; }
.panel.nofold > .phead.pheadflex { padding-right: 16px; }
.panel.nofold > .phead::after { content: none; }
.panel.pcol > :not(.phead) { display: none !important; }
@media (prefers-reduced-motion: reduce) { .panel > .phead::after { transition: none; } }
/* Add-media: a clean button reveals the upload options INLINE in the page (drag +
   drop on the page still works without opening it) */
.addmediabar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 14px; }
.addmedia-open { display: inline-flex; align-items: center; gap: 8px; }
.addmedia-open .bic svg { width: 18px; height: 18px; }
.createai-open { display: inline-flex; align-items: center; gap: 8px; }
.createai-open .bic svg { width: 18px; height: 18px; }
.addmedia-hint { font-size: .58rem; letter-spacing: .1em; color: var(--dim); text-transform: uppercase; }
.addmedia-inline { margin: 0 0 14px; }


/* support thread: clear active focus + comfortable scroll target */
#tkThread { scroll-margin-top: 84px; }
#tkThread .tkthead { border-bottom: 1px solid var(--line2); }
@media (min-width: 901px) {
  /* wide layout: keep the thread beside the list and in view as you scroll,
     so clicking any ticket shows the conversation right there */
  .split #tkThread { position: sticky; top: 84px; align-self: start;
    max-height: calc(100vh - 110px); overflow-y: auto; }
}
@media (max-width: 900px) {
  /* stacked layout: the open thread is the focus, lift it visually */
  #tkThread:not(:empty) { box-shadow: 0 0 0 2px var(--amber-soft); }
}


/* voice select + preview as a tight pair (button next to the input) */
.voicerow { display: flex; gap: 8px; align-items: stretch; max-width: 680px; }
.voicerow select { flex: 1; min-width: 0; }
.voicerow .btn { flex: none; white-space: nowrap; }
/* compact AI-write toolbar reused across studio panes */
.stnarr2 { display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin: 0 0 8px; max-width: 680px; }
.stnarr2 select { width: auto; flex: none; }
.stnarr2 input { flex: 1; min-width: 180px; }
.stnarr2 .btn { flex: none; }


/* Support: single-column form+list; the thread opens in a modal popup */
.tksupport { max-width: 900px; }
.tkmodal { width: min(760px, 94vw); max-height: 88vh; display: flex; flex-direction: column; }
.tkmodal .npbody.tkscroll { overflow-y: auto; flex: 1; }
.tkmodal .tkthead .tktitle { font-family: var(--font-body); font-weight: 600; font-size: .95rem; }


/* RULE: form fields inside any modal body match the rest of the app - block
   labels above the control, textareas fill the width. Complements the global
   :where(input...) appearance rule so a raw modal never ships bare fields. */
.npbody label { display: block; font-family: var(--font-mono); font-size: .6rem;
  letter-spacing: .12em; color: var(--dim); margin: 12px 0 5px; }
.npbody textarea { width: 100%; }
.tkreply { padding-top: 6px; }
.tkreply textarea { min-height: 100px; }


/* web-demo: the frame the AI saw (plan preview) */
.wdshot { max-width: 100%; max-height: 240px; border-radius: 12px;
  border: 1px solid var(--line2); margin: 4px 0 10px; display: block; }

/* ============================ Analytics tab ============================ */
.pagelede { color: var(--muted); max-width: 900px; line-height: 1.55; margin: -4px 0 18px; }
.pagelede b { color: var(--text); }
/* Growth Tools: header-only Flo band + a visible per-tool "what it does + why it grows you" line */
.gflowpanel .phead { border-bottom: 0; margin-bottom: 0; }
.growthwhy { margin: 0; padding: 4px 16px 14px; font-size: .82rem; color: var(--muted); line-height: 1.5; max-width: 940px; }
/* Content Coach (SPEC_CONTENT_COACH.md) - Flo's creative analysis on Growth Tools */
.coachhead { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.coachcompers { margin-bottom: 12px; }
.coachcomphead { font-size: .72rem; letter-spacing: .04em; color: var(--muted); margin-bottom: 6px; }
.coachcomplist { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.coachcomp { display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px 4px 10px;
  border: 1px solid var(--line2); border-radius: 12px; background: var(--card2); font-size: .82rem; }
.coachaddrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.coachaddrow select, .coachaddrow input { height: 38px; padding: 0 10px; border: 1px solid var(--line2);
  border-radius: 10px; background: var(--card2); color: var(--text); font: 500 16px var(--font-body); }
.coachaddrow input { flex: 1; min-width: 140px; }
.coachrep { display: grid; gap: 10px; }
.coachrephead { font-size: .72rem; letter-spacing: .04em; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.provchip { font-size: .64rem; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--line2);
  color: var(--muted); background: var(--card2); cursor: help; }
.coachpost { display: grid; grid-template-columns: auto auto auto 1fr auto auto; gap: 10px;
  align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line2); font-size: .86rem; }
.coachrank { color: var(--muted); }
.coachx { color: var(--amber-deep, var(--amber)); font-weight: 700; }
.coachhook { text-transform: capitalize; color: var(--text); font-weight: 600; }
.coachwhy { color: var(--muted); line-height: 1.4; min-width: 160px; }
.coachnums { color: var(--muted); white-space: nowrap; }
.coachlink { color: var(--amber-deep, var(--amber)); text-decoration: none; }
.coachpat, .coachrecs { border-top: 1px solid var(--line2); padding-top: 10px; }
.coachpat b, .coachrecs b { display: block; font-size: .72rem; letter-spacing: .04em; color: var(--muted); margin-bottom: 6px; }
.coachpat ul { margin: 0; padding-left: 18px; color: var(--text); font-size: .85rem; line-height: 1.6; }
.coachrec { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; padding: 6px 0; font-size: .88rem; }
.coachrec > span { flex: 1; min-width: 200px; }
.coachnote { font-size: .74rem; margin-top: 6px; line-height: 1.5; }
.linklike { background: none; border: 0; color: var(--muted); cursor: pointer; font: 500 .78rem var(--font-body); text-decoration: underline; padding: 0; }
@media (max-width: 560px) {
  .coachpost { grid-template-columns: auto auto 1fr; }
  .coachpost .coachwhy, .coachpost .coachnums { grid-column: 1 / -1; }
}
.antoolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.anfilter { height: 42px; padding: 0 14px; border: 1px solid var(--line2); border-radius: 12px;
  background: var(--card); color: var(--text); font-family: var(--font-body); font-size: 14px; }
.anfilter:focus { outline: none; border-color: var(--amber); }
.angrow { flex: 1 1 220px; min-width: 180px; }
.btn.ghost { background: transparent; }
.anmeta { color: var(--dim); margin: 0 0 14px; font-size: 12.5px; }
.anlabel { color: var(--muted); font-size: 12px; letter-spacing: .04em; margin: 18px 0 10px; }
.anmuted { color: var(--dim); font-weight: 400; }
.anengrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.engtile { background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 16px 14px; box-shadow: var(--shadow); }
.engtile b { display: block; font-family: var(--font-display); font-size: 28px; line-height: 1;
  color: var(--text); margin-bottom: 7px; }
.engtile span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .05em; color: var(--muted);
  display: flex; align-items: center; gap: 3px; }
.kcard b.bad { color: var(--red); }
/* top performing post banner */
.antop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 18px 0 6px;
  padding: 16px 20px; border-radius: 16px; border: 1px solid var(--amber);
  background: linear-gradient(180deg, var(--amber-soft), transparent); }
.antop-badge { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--amber-deep);
  white-space: nowrap; }
.antop b { font-family: var(--font-display); font-size: 16px; color: var(--text); flex: 1 1 260px; }
.antop-meta { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted);
  display: inline-flex; align-items: center; gap: 6px; }
/* network badges */
.annet { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border-radius: 6px; font: 700 9px/1 var(--font-mono); color: #fff; letter-spacing: .02em; }
.annet.tiktok { background: #111; } .annet.instagram { background: #d6336c; }
.annet.facebook { background: #1877f2; } .annet.twitter { background: #111; }
.annet.linkedin { background: #0a66c2; } .annet.youtube { background: #e23b2e; }
/* post list */
.anlist { display: flex; flex-direction: column; }
.anpager { display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 12px 16px; border-top: 1px solid var(--line); }
.anpager:empty { display: none; }
.anpager .anmuted { font-size: .78rem; letter-spacing: .04em; }
.anpager button[disabled] { opacity: .4; cursor: default; }
.anrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 13px 16px;
  border-top: 1px solid var(--line); }
.anrow:first-child { border-top: 0; }
.anrow-main { flex: 1 1 300px; min-width: 0; }
.anrow-main b { display: block; color: var(--text); font-size: 14px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.anrow-sub { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 5px;
  font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.anrow-metrics { display: flex; flex-wrap: wrap; gap: 6px; }
.anchip { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted);
  background: var(--card2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; }
.anchip b { font-weight: 700; color: var(--text); }
/* saves + shares: the value signals, given a quiet amber emphasis over likes */
.anchip.val { color: var(--amber-deep); border-color: var(--amber); background: var(--amber-soft); }
.anchip.val b { color: var(--amber-deep); }
.anchip-warn { color: var(--red); border-color: rgba(214, 69, 69, .35); background: var(--red-soft); }
/* WHO FOLLOWS YOU - audience demographics (age/gender/location per network) */
.demoseg span { cursor: pointer; }
.demhead { padding: 2px 2px 12px; font-size: .95rem; }
.demgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 720px) { .demgrid { grid-template-columns: 1fr; } }
.demblk .demlbl { font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); margin-bottom: 11px; }
.demrow { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.demrow .demk { width: 96px; font-size: .8rem; color: var(--muted); flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demrow .demtrack { flex: 1; height: 12px; background: var(--card2); border-radius: 4px; overflow: hidden; }
.demrow .demfill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--amber-deep), var(--amber-bright)); }
.demrow .demv { width: 42px; text-align: right; font-family: var(--font-mono); font-size: .72rem; color: var(--text); flex: none; font-variant-numeric: tabular-nums; }
.demdonutwrap { display: flex; align-items: center; gap: 14px; }
.demdonut { width: 90px; height: 90px; flex: none; }
.demlegend { font-size: 11px; line-height: 1.95; }
.demdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
/* WHEN YOUR AUDIENCE ENGAGES heatmap (7 x 24, own posts) */
.heatwrap { display: flex; flex-direction: column; gap: 3px; overflow-x: auto; }
.heatwrap .hrow { display: flex; gap: 3px; align-items: center; }
.heatwrap .hday { width: 30px; font-size: 9px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); flex: none; }
.heatwrap .hcell { flex: 1 1 auto; min-width: 9px; height: 14px; border-radius: 2px; }
.heatcap { margin-top: 11px; font-size: .74rem; color: var(--muted); letter-spacing: .03em; }
/* REACH OVER TIME - inline SVG area chart (house idiom, extends cxSpark) */
.antsvg { width: 100%; height: auto; display: block; }
.antgrid { stroke: var(--line); stroke-width: 1; }
.antarea { fill: var(--amber-soft); }
.antline { fill: none; stroke: var(--amber); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.antline-prior { fill: none; stroke: var(--line2); stroke-width: 2; stroke-linejoin: round; }
.antmark { fill: var(--card); stroke: var(--amber); stroke-width: 2; }
.antdot { fill: var(--amber); }
.antlab { font-family: var(--font-mono); font-size: 10px; fill: var(--dim); }
/* trend + scoreboard two-column band */
.antwocol { display: grid; grid-template-columns: 1.55fr 1fr; gap: 16px; }
@media (max-width: 760px) { .antwocol { grid-template-columns: 1fr; } }
.trendleg i { display: inline-block; width: 14px; height: 2px; vertical-align: middle; margin: 0 4px 0 8px; }
.trendleg .legthis { background: var(--amber); } .trendleg .leglast { background: var(--line2); }
.scrow { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.scrow .scname { width: 74px; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); flex: none; }
.scrow .sctrack { flex: 1; height: 16px; background: var(--card2); border-radius: 5px; overflow: hidden; }
.scrow .scfill { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--amber), var(--amber-bright)); }
.scrow .scval { width: 54px; text-align: right; font-family: var(--font-mono); font-size: 11px; color: var(--text); flex: none; font-variant-numeric: tabular-nums; }
.scrow .scdelta { width: 44px; text-align: right; font-family: var(--font-mono); font-size: 10px; flex: none; }
.scrow .scdelta.up { color: var(--green); } .scrow .scdelta.dn { color: var(--red); }
/* KPI tiles that drill to their detail */
.kpi.kpiclik { cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.kpi.kpiclik:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.kpi.kpiclik:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.kpi { position: relative; }
.kpi .kspark { position: absolute; right: 12px; bottom: 12px; opacity: .85; }
.kpibench { display: block; font-family: var(--font-mono); font-size: 9.5px; color: var(--dim); margin-top: 4px; cursor: help; }
/* Flo leads the What's-working panel with her top next-steps */
.floverdict { background: linear-gradient(180deg, var(--amber-soft), transparent); border: 1px solid var(--line); border-left: 3px solid var(--amber); border-radius: 12px; padding: 13px 16px; margin-bottom: 16px; }
.floverdict .flov-h { font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--amber-deep); margin-bottom: 7px; }
.floverdict .flov-rec { font-size: .95rem; color: var(--text); margin: 5px 0; line-height: 1.5; }
.floverdict .flopostlink { color: var(--amber-deep); cursor: pointer; font-weight: 600; }
/* Flo's read - prominent banner leading the Analytics tab */
/* Flo's live recommendation cards inside the Analytics read band. Spacing is matched
   to the "Top posts" list (.inslist/.insrow) directly below so the two card stacks
   read as one system: 6px row gap, 8px/10px card padding, 12px column gap, 8px top
   margin. Scoped to .anflorecs + #tab-analytics so the shared Flo band (Overview,
   upgrade modal, kbmiss) keeps its own rhythm. */
.floban-body .anflorecs { margin-top: 0; gap: 4px; }
.floban-body .anflorecs .florow { background: var(--card); padding: 8px 10px; }
.floban-body .anflorecs .floact .sm-act { padding: 6px 12px; }
/* Below the lede: the read (cards) on the left, Flo's "posting window" utility on the
   right, filling what would otherwise be dead space on a wide screen. */
.floban-split { display: flex; gap: 14px; align-items: stretch; margin-top: 9px; }
.floban-split .anflorecs { flex: 1 1 auto; min-width: 0; }
.floban-util { flex: 0 0 288px; display: flex; flex-direction: column; gap: 7px;
  background: var(--card); border: 1px solid var(--line); border-radius: 11px; padding: 12px 14px; }
.fu-head { display: flex; align-items: center; gap: 6px; font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--amber-deep); }
.fu-head svg { width: 14px; height: 14px; flex: none; }
.fu-hero { display: flex; align-items: baseline; gap: 8px; line-height: 1; }
.fu-hero b { font-family: var(--font-display); font-size: 1.5rem; color: var(--text); }
.fu-hero span { font-size: 1.05rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.fu-count { display: flex; align-items: center; gap: 7px; font-size: .88rem; color: var(--text); flex-wrap: wrap; }
.fu-count b { font-variant-numeric: tabular-nums; }
.fu-count em { color: var(--muted); font-style: normal; font-size: .8rem; }
.fu-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); flex: none;
  animation: fuPulse 2.6s ease-out infinite; }
@keyframes fuPulse { 0% { box-shadow: 0 0 0 0 rgba(224,137,0,.5); } 70% { box-shadow: 0 0 0 7px rgba(224,137,0,0); } 100% { box-shadow: 0 0 0 0 rgba(224,137,0,0); } }
@media (prefers-reduced-motion: reduce) { .fu-dot { animation: none; } }
.fu-strip { display: flex; align-items: flex-end; gap: 4px; height: 30px; margin: 3px 0 16px; }
.fu-bar { flex: 1; min-height: 3px; border-radius: 3px 3px 0 0; background: var(--line2); position: relative; }
.fu-bar.best { background: linear-gradient(180deg, var(--amber-bright), #f29718); }
.fu-bar > i { position: absolute; left: 0; right: 0; bottom: -15px; text-align: center; font-size: 8px;
  font-style: normal; letter-spacing: .04em; color: var(--muted); }
.fu-bar.best > i { color: var(--amber-deep); font-weight: 700; }
.fu-cta { margin-top: auto; align-self: flex-start; }
.fu-empty { font-size: .85rem; line-height: 1.45; color: var(--muted); }
@media (max-width: 900px) {
  .floban-split { flex-direction: column; }
  .floban-util { flex-basis: auto; }
}
/* Readability: cap the reading measure to ~62 characters per line (Bringhurst /
   Baymard 50-75, ~66 optimal; WCAG max 80). The card text was running ~110 CPL on a
   wide screen; the action button stays right, so the buttons form one aligned column
   down the read. */
.floban-body .anflorecs .flotext { max-width: 62ch; }
.florecs-empty { margin: 11px 0 0; font-size: .95rem; line-height: 1.5; color: var(--text); }
.upmodal .floban { margin-bottom: 16px; }  /* stage-panel lede: tighter than the page inset */
.floban { display: flex; align-items: flex-start; gap: 13px; margin-bottom: calc(var(--content-inset-top, 30px) * 0.75); background: linear-gradient(180deg, var(--amber-soft), transparent); border: 1px solid var(--line); border-left: 3px solid var(--amber); border-radius: 14px; padding: 16px 18px; box-shadow: var(--shadow); }
.floban-who { font-size: 10px; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; color: var(--amber-deep); margin-bottom: 6px; }
.floban-body p { font-size: 1.02rem; line-height: 1.55; color: var(--text); margin: 0; max-width: none; }
/* Analytics "your read" band: tighter frame + lede than the shared band base, so the
   whole read sits in less vertical space (Peter: too much spacing). Scoped by
   #tab-analytics id so the modal/kbmiss reuses of .floban keep their own rhythm. */
#tab-analytics .floban { gap: 12px; padding: 13px 16px; margin-bottom: calc(var(--content-inset-top, 30px) * 0.5); }
#tab-analytics .floban-who { margin-bottom: 4px; }
/* body fills the band so the lede runs the full width (one line on desktop); the
   read + the utility split the space below it. */
#tab-analytics .floban-body { flex: 1 1 auto; min-width: 0; }
#tab-analytics .floban-body p { font-size: .95rem; line-height: 1.45; }
/* Flo tools: the five on-demand assistant tools under the read */
.flotools { margin-bottom: calc(var(--content-inset-top, 30px) * 0.5); border: 1px solid var(--line);
  border-left: 3px solid var(--amber); border-radius: 12px; background: var(--card); padding: 12px 14px; box-shadow: var(--shadow); }
.ft-head { display: flex; align-items: center; gap: 8px; font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--amber-deep); margin-bottom: 10px; }
.ft-head .flomark { width: 20px; height: 20px; flex: none; }
.ft-sub { color: var(--muted); letter-spacing: .03em; text-transform: none; font-size: 11px; }
.ft-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ft-tab { border: 1px solid var(--line2); background: var(--bg); color: var(--text); border-radius: 999px;
  padding: 6px 13px; font-size: .82rem; cursor: pointer; white-space: nowrap; }
.ft-tab:hover { border-color: var(--amber); }
.ft-tab.on { background: var(--amber-soft); border-color: var(--amber); color: var(--amber-deep); font-weight: 600; }
.ft-body { min-height: 44px; }
.ft-form { display: flex; gap: 8px; align-items: stretch; }
.ft-form.col { flex-direction: column; }
.ft-in { flex: 1 1 auto; min-width: 0; border: 1px solid var(--line2); border-radius: 9px; padding: 9px 12px;
  font: inherit; font-size: .92rem; background: var(--bg); color: var(--text); resize: vertical; }
.ft-in:focus { outline: 2px solid var(--amber); outline-offset: 1px; border-color: var(--amber); }
.ft-out { margin-top: 10px; }
.ft-hint { color: var(--muted); font-size: .86rem; }
.ft-err { color: #c0392b; font-size: .88rem; }
.ft-answer { display: flex; gap: 8px; align-items: flex-start; font-size: .95rem; line-height: 1.5; color: var(--text);
  background: var(--amber-soft); border-radius: 10px; padding: 11px 13px; }
.ft-answer .ft-aic { width: 18px; height: 18px; flex: none; color: var(--amber-deep); margin-top: 1px; }
.ft-plan { display: flex; flex-direction: column; gap: 4px; }
.ft-planrow { display: grid; grid-template-columns: 96px 1fr auto; gap: 10px; align-items: center;
  padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; }
.ft-pday { color: var(--amber-deep); font-size: .8rem; white-space: nowrap; }
.ft-pmain { font-size: .9rem; color: var(--text); min-width: 0; }
.ft-pwhy { font-size: .78rem; color: var(--muted); text-align: right; }
.ft-cta { margin-top: 8px; }
.ft-lines { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
.ft-lines li { font-size: .92rem; line-height: 1.45; color: var(--text); }
.ft-score { display: flex; align-items: baseline; gap: 6px; }
.ft-score b { font-family: var(--font-display); font-size: 1.6rem; color: var(--amber-deep); }
.ft-score span { color: var(--muted); font-size: .85rem; }
.ft-why { color: var(--muted); font-size: .88rem; margin: 3px 0 0; }
.ft-rewrite, .ft-bio { border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; margin-top: 8px; }
.ft-rlbl { font-size: 9px; letter-spacing: .1em; color: var(--amber-deep); margin-bottom: 5px; display: flex; gap: 6px; }
.ft-rlbl span { color: var(--muted); }
.ft-rtxt { font-size: .92rem; line-height: 1.45; color: var(--text); white-space: pre-wrap; }
.ft-copy { margin-top: 8px; }
@media (max-width: 640px) {
  .ft-planrow { grid-template-columns: 1fr auto; }
  .ft-pwhy { grid-column: 1 / -1; text-align: left; }
}
/* flo_persona OFF: hide the typed Flo header strips for this brand */
.flo-persona-off .flohead { display: none; }
/* Shoot List cards (Content bank): Flo's ready-to-film video ideas */
.flomark.sm { width: 18px; height: 18px; }
.shootgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 12px; }
.shootcard { border: 1px solid var(--line); border-radius: 11px; background: var(--card); padding: 12px 13px;
  display: flex; flex-direction: column; gap: 8px; }
.sc-hook { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; line-height: 1.25; color: var(--text); }
.sc-block { font-size: .86rem; line-height: 1.4; }
.sc-lbl { display: block; font-size: 9px; letter-spacing: .1em; color: var(--amber-deep); margin-bottom: 2px; }
.sc-val { color: var(--text); white-space: pre-wrap; }
.sc-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
/* Flo header: whole-line reveal (fade, not char-by-char) + inline feature links */
@keyframes floReveal { from { opacity: 0; } to { opacity: 1; } }
.flo-reveal { animation: floReveal .4s ease-out; }
@media (prefers-reduced-motion: reduce) { .flo-reveal { animation: none; } }
.flolink { border: 0; background: none; padding: 0; font: inherit; color: var(--amber-deep);
  font-weight: 600; cursor: pointer; text-decoration: underline; text-decoration-color: var(--line2);
  text-underline-offset: 2px; }
.flolink:hover { text-decoration-color: var(--amber); }
/* "See what Flo can do for your brand" - show/hide reference on the Overview */
.flocando { border-top: 1px solid var(--line); }
/* Disclosure header: a full-width button. The caret sits in an amber chip so it
   reads as a tappable control at rest (NN/g: the caret is what signals a show/hide),
   and on hover/focus the row highlights, the chip fills amber and the caret nudges
   the way it will open - down when closed, up when open. That is the show/hide
   analogue of the pills' sliding arrow, using the correct icon for expand/collapse. */
.flocando-toggle { width: 100%; display: flex; align-items: center; gap: 10px; justify-content: space-between;
  background: none; border: 0; cursor: pointer; padding: 11px 16px; font: inherit; font-size: .92rem;
  font-weight: 600; color: var(--amber-deep); text-align: left; transition: background .16s ease; }
.flocando-toggle:hover, .flocando-toggle:focus-visible { background: var(--amber-soft); }
.flocando-toggle:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }
.flocando-chevwrap { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%;
  background: var(--amber-soft); border: 1px solid var(--amber); color: var(--amber-deep);
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .18s ease; }
.flocando-chev { width: 15px; height: 15px; display: block; transition: transform .2s ease; }
.flocando-toggle.open .flocando-chev { transform: rotate(180deg); }
.flocando-toggle:hover .flocando-chevwrap, .flocando-toggle:focus-visible .flocando-chevwrap {
  background: var(--amber); border-color: var(--amber); color: var(--navy); transform: translateY(2px); }
.flocando-toggle.open:hover .flocando-chevwrap, .flocando-toggle.open:focus-visible .flocando-chevwrap {
  transform: translateY(-2px); }
/* One-time discovery hint. Research (IxDF signifiers; web.dev/WCAG motion): a
   hidden affordance needs a discoverable-but-subtle signifier, and an attention
   animation must be self-limiting - "nudge then settle", never an endless loop.
   So the whole row gives a soft amber wash while the caret chip nudges DOWN (the
   way it opens) and throws one amber ring - three gentle pulses, then it rests.
   JS arms it only when the row is on-screen (IntersectionObserver) and only until
   the reference is first opened (localStorage gf-flocando-seen): it draws the eye
   once, then never nags. Reduced-motion users get the static amber chip instead. */
.flocando-toggle.flocando-hint { animation: fcdHintWash 1.4s ease 3; }
.flocando-toggle.flocando-hint .flocando-chevwrap {
  animation: fcdHintNudge 1.4s ease 3, fcdHintRing 1.4s ease-out 3; }
@keyframes fcdHintWash {
  0%, 46%, 100% { background-color: transparent; }
  22% { background-color: var(--amber-soft); } }
@keyframes fcdHintNudge {
  0%, 46%, 100% { transform: translateY(0); }
  22% { transform: translateY(3px); } }
@keyframes fcdHintRing {
  0% { box-shadow: 0 0 0 0 rgba(224, 137, 0, .5); }
  60% { box-shadow: 0 0 0 8px rgba(224, 137, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(224, 137, 0, 0); } }
@media (prefers-reduced-motion: reduce) {
  .flocando-chevwrap, .flocando-chev { transition: background .16s ease, border-color .16s ease, color .16s ease; }
  .flocando-toggle:hover .flocando-chevwrap, .flocando-toggle:focus-visible .flocando-chevwrap,
  .flocando-toggle.open:hover .flocando-chevwrap, .flocando-toggle.open:focus-visible .flocando-chevwrap { transform: none; }
  /* no attention motion for reduced-motion users - the amber caret chip is the
     resting signifier. Give it one static, non-animated emphasis instead. */
  .flocando-toggle.flocando-hint, .flocando-toggle.flocando-hint .flocando-chevwrap { animation: none; }
  .flocando-toggle.flocando-hint .flocando-chevwrap { background: var(--amber); border-color: var(--amber); color: var(--navy); }
}
.flocando-body { padding: 2px 16px 14px; display: flex; flex-direction: column; gap: 6px; }
.fcd-row { display: flex; align-items: center; gap: 12px; justify-content: space-between;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); }
.fcd-txt { min-width: 0; }
.fcd-txt b { display: block; font-size: .9rem; color: var(--text); }
.fcd-txt span { font-size: .82rem; color: var(--muted); }
/* The destination pill reads as clickable at rest (amber ring + soft fill), then
   lifts, fills and throws a single clean "sparkle" glint on hover/focus. */
.fcd-link { position: relative; overflow: hidden; border: 1px solid var(--amber); background: var(--amber-soft);
  color: var(--amber-deep); border-radius: 999px; padding: 6px 13px; font-size: .82rem; font-weight: 600;
  cursor: pointer; white-space: nowrap; flex: none;
  transition: background .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.fcd-link .fcd-lbl, .fcd-link .fcd-arrow { position: relative; z-index: 1; }
.fcd-link .fcd-arrow { display: inline-block; margin-left: 5px; transition: transform .18s ease; }
.fcd-link:hover, .fcd-link:focus-visible { background: var(--amber); color: var(--navy); border-color: var(--amber);
  transform: translateY(-1px); box-shadow: 0 4px 12px rgba(224, 137, 0, .28); }
.fcd-link:hover .fcd-arrow, .fcd-link:focus-visible .fcd-arrow { transform: translateX(3px); }
.fcd-link:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.fcd-link::after { content: ""; position: absolute; top: 0; bottom: 0; left: -75%; width: 45%; z-index: 0;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .55) 50%, transparent 100%);
  transform: skewX(-20deg); opacity: 0; pointer-events: none; }
.fcd-link:hover::after, .fcd-link:focus-visible::after { animation: fcdShine .6s ease forwards; }
@keyframes fcdShine { 0% { left: -75%; opacity: 0; } 15% { opacity: 1; } 100% { left: 130%; opacity: 0; } }
.fcd-foot { font-size: .85rem; color: var(--muted); margin-top: 4px; line-height: 1.5; }
.fcd-inlink { border: 0; background: none; padding: 0; font: inherit; color: var(--amber-deep); font-weight: 600;
  cursor: pointer; text-decoration: underline; text-decoration-color: var(--line2); text-underline-offset: 2px; }
.fcd-inlink:hover, .fcd-inlink:focus-visible { text-decoration-color: var(--amber); }
@media (max-width: 640px) {
  .fcd-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .fcd-link { align-self: flex-start; }
}
/* Reduced motion: keep the instant colour/fill affordance, drop the movement + glint. */
@media (prefers-reduced-motion: reduce) {
  .fcd-link, .fcd-link .fcd-arrow { transition: none; }
  .fcd-link:hover, .fcd-link:focus-visible { transform: none; }
  .fcd-link:hover .fcd-arrow, .fcd-link:focus-visible .fcd-arrow { transform: none; }
  .fcd-link:hover::after, .fcd-link:focus-visible::after { animation: none; }
}
/* Content bank: idea search + Manage-topics panel */
.bank-search { border: 1px solid var(--line2); border-radius: 8px; padding: 6px 11px; font: inherit;
  font-size: .85rem; background: var(--bg); color: var(--text); width: 180px; max-width: 42vw; }
.bank-search:focus { outline: 2px solid var(--amber); outline-offset: 1px; border-color: var(--amber); }
.topchips { display: flex; flex-wrap: wrap; gap: 7px; min-height: 30px; margin-bottom: 12px; }
.topchip { display: inline-flex; align-items: center; gap: 4px; background: var(--amber-soft);
  color: var(--amber-deep); border: 1px solid var(--amber); border-radius: 999px; padding: 5px 6px 5px 12px;
  font-size: .85rem; font-weight: 600; }
.topchip button { border: 0; background: none; color: var(--amber-deep); cursor: pointer; font-size: .9rem;
  line-height: 1; padding: 2px 5px; border-radius: 50%; opacity: .7; }
.topchip button:hover { opacity: 1; background: rgba(0,0,0,.08); }
.topadd { display: flex; gap: 8px; }
.topadd input { flex: 1 1 auto; min-width: 0; border: 1px solid var(--line2); border-radius: 8px;
  padding: 8px 11px; font: inherit; font-size: .9rem; background: var(--bg); color: var(--text); }
.topadd input:focus { outline: 2px solid var(--amber); outline-offset: 1px; border-color: var(--amber); }
/* Manage-topics: section labels, the "also in your bank" rows, footer + reset link */
.topsec-lbl { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .12em; color: var(--muted);
  margin: 16px 0 8px; display: flex; align-items: center; gap: 6px; }
.topsec-lbl:first-child { margin-top: 4px; }
.topextras { display: flex; flex-direction: column; gap: 8px; max-height: 34vh; overflow-y: auto; }
.topextra { border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; background: var(--card2); }
.topextra-h { display: flex; align-items: center; gap: 8px; }
.topextra-h b { font-size: .9rem; color: var(--text); }
.topextra-n { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .06em; color: var(--dim); white-space: nowrap; }
.topextra-a { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.topfoot { justify-content: space-between; align-items: center; margin-top: 18px; gap: 10px; flex-wrap: wrap; }
.topfoot-r { display: flex; gap: 8px; }
.linkdanger { border: 0; background: none; padding: 4px 2px; font: inherit; font-size: .82rem; font-weight: 600;
  color: var(--red); cursor: pointer; text-decoration: underline; text-decoration-color: transparent;
  text-underline-offset: 3px; transition: text-decoration-color .15s ease; }
.linkdanger:hover, .linkdanger:focus-visible { text-decoration-color: var(--red); }
@media (max-width: 640px) { .bank-search { width: 100%; max-width: none; } }
/* Saved Shoot List idea: its shots + script show as a film brief on the card */
.bkc-brief { margin: 2px 0 4px; padding: 8px 10px; border-radius: 8px; background: var(--amber-soft);
  font-size: .82rem; line-height: 1.4; color: var(--text); white-space: pre-wrap; }
.bkc-brief .mono { display: block; font-size: 9px; letter-spacing: .1em; color: var(--amber-deep); margin-bottom: 4px; }
.floban-body .flopostlink { color: var(--amber-deep); font-weight: 600; cursor: pointer; }
.floban-body .flosteps { list-style: none; counter-reset: flostep; margin: 9px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 7px; }
.floban-body .flosteps li { counter-increment: flostep; position: relative; padding-left: 30px;
  font-size: .95rem; line-height: 1.5; color: var(--text); }
.floban-body .flosteps li::before { content: counter(flostep); position: absolute; left: 0; top: 1px;
  width: 20px; height: 20px; border-radius: 999px; background: var(--amber-soft); color: var(--amber-deep);
  font: 700 .72rem/20px var(--font-mono); text-align: center; }
.floban-body .flosteps .hlink { font-size: inherit; }
/* .flolist - a scannable list of PARALLEL tools inside a Flo band (Growth Tools).
   No numerals (unlike .flosteps): these are options, not sequential steps. */
.floban-body .flolist { list-style: none; margin: 9px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px; }
.floban-body .flolist li { position: relative; padding-left: 16px;
  font-size: .95rem; line-height: 1.5; color: var(--text); }
.floban-body .flolist li::before { content: ""; position: absolute; left: 3px; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--amber); }
.floban-body .flolist .hlink { font-size: inherit; font-weight: 700; }
/* FOLLOWER GOAL + pace-to-goal */
.angoal { margin: 0 0 16px; }
.goalcard { background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--line2); border-radius: 12px; padding: 13px 16px; }
.goalcard.ontrack, .goalcard.done { border-left-color: var(--green); }
.goalcard.behind { border-left-color: var(--amber); }
.goaltop { display: flex; align-items: center; gap: 12px; margin-bottom: 9px; }
.goaltop .goallbl { font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.goaltop .goalnum { font-size: .95rem; color: var(--text); } .goaltop .goalnum b { font-size: 1.15rem; }
.goaltop .goaledit { margin-left: auto; background: none; border: 1px solid var(--line2); border-radius: 8px; padding: 4px 12px; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); cursor: pointer; }
.goaltop .goaledit:hover { border-color: var(--amber); color: var(--amber-deep); }
.goaltrack { height: 12px; background: var(--card2); border-radius: 5px; overflow: hidden; margin-bottom: 8px; }
.goalfill { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--amber-deep), var(--amber-bright)); }
.goalcard.ontrack .goalfill, .goalcard.done .goalfill { background: linear-gradient(90deg, var(--green), #35b98a); }
.goalpace { font-size: .9rem; color: var(--muted); }
.goalpace.ontrack, .goalpace.done { color: var(--green); } .goalpace.behind { color: var(--amber-deep); }
.goalset { background: var(--card2); border: 1px dashed var(--line2); border-radius: 10px; padding: 10px 16px; font-size: .9rem; color: var(--muted); cursor: pointer; }
.goalset:hover { border-color: var(--amber); color: var(--amber-deep); }
.goalform { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.goalform label { display: flex; flex-direction: column; gap: 4px; font-size: .78rem; color: var(--muted); }
.goalform input { padding: 8px 10px; border: 1px solid var(--line2); border-radius: 8px; background: var(--card2); color: var(--text); font-family: var(--font-body); font-size: 16px; }
/* #20 Analytics on phones: no sideways scroll, comfortable layout (<=760px, the
   verified mobile breakpoint). Scoped to analytics classes only - zero desktop risk. */
@media (max-width: 760px) {
  .ankpis { grid-template-columns: 1fr 1fr; gap: 9px; }
  .annetgrid { grid-template-columns: 1fr; }          /* was minmax(288px) -> could overflow */
  .anengrid { grid-template-columns: 1fr 1fr; }
  .antoolbar { gap: 8px; }
  .antoolbar .anfilter { height: 40px; }
  .antoolbar .anfilter.angrow { flex: 1 1 100%; }     /* search input full width, not a sliver */
  .anrow { padding: 12px 13px; gap: 6px 10px; }
  .anrow .anrow-main { flex: 1 1 100%; min-width: 0; }
  .anrow .anrow-main b { overflow-wrap: anywhere; }   /* long captions/URLs wrap, never overflow */
  .anrow-metrics { width: 100%; }
  .goaltop { flex-wrap: wrap; }
  .goalform label { flex: 1 1 100%; }                 /* stacked inputs, easy to tap */
  .demgrid { gap: 16px; }
  .digrow input { flex: 1 1 100%; }
}
/* WEEKLY DIGEST + ALERTS opt-in control */
.andigest { margin-top: 20px; }
.digcard { background: var(--card2); border: 1px solid var(--line); border-radius: 12px; padding: 15px 18px; }
.digtop { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; }
.digtop .diglbl { font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.digstate { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line2); color: var(--muted); }
.digstate.on { border-color: var(--green); color: var(--green); background: var(--green-soft); }
.digsub { font-size: .9rem; color: var(--muted); margin-bottom: 12px; }
.digrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.digrow input { flex: 1 1 220px; padding: 9px 12px; border: 1px solid var(--line2); border-radius: 9px; background: var(--card); color: var(--text); font-family: var(--font-body); font-size: 16px; }
.digmsg { font-size: .82rem; margin-top: 8px; min-height: 1em; }
.digmsg.ok { color: var(--green); } .digmsg.err { color: var(--red); }
/* thumbnail on analytics rows (posts carry p.thumb) - makes the list scannable */
.anthumb { flex: none; width: 46px; height: 46px; border-radius: 9px; overflow: hidden; background: var(--card2); }
.anthumb.sm { width: 40px; height: 40px; border-radius: 8px; }
.anthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* every clickable analytics row reads the same way */
.anrow.clik, .antoprow.clik, .insrow.clik { cursor: pointer; }
.insrow.clik:hover { background: var(--amber-soft); }
.anrow-links { display: flex; gap: 10px; }
.anlink { font-family: var(--font-mono); font-size: 11px; color: var(--amber-deep); white-space: nowrap; }
.anlink:hover { text-decoration: underline; }

/* analytics: averages strip + per-network + sort */
.anstrip { display: flex; flex-wrap: wrap; gap: 12px; margin: 14px 0 4px; }
.anstat { flex: 1 1 200px; background: var(--card2); border: 1px solid var(--line);
  border-radius: 14px; padding: 14px 18px; }
.anstat b { font-family: var(--font-display); font-size: 26px; color: var(--amber-deep); margin-right: 4px; }
.anstat span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .05em; color: var(--muted);
  display: inline-flex; align-items: center; gap: 3px; }
.ansort { height: 34px; font-size: 12px; padding: 0 10px; }
.anbynet { display: flex; flex-direction: column; }
.bnrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 16px;
  border-top: 1px solid var(--line); }
.bnrow:first-child { border-top: 0; }
.bnhead { display: flex; align-items: center; gap: 9px; flex: 0 0 180px; }
.bnhead b { color: var(--text); font-size: 14px; }
.bnmetrics { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 260px; }

/* -------- analytics redesign: headline verdict + hero KPIs -------- */
.anhead { margin: 6px 0 18px; }
.anverdict { font-family: var(--font-display); font-weight: 500; font-size: 1.14rem; line-height: 1.5;
  color: var(--text); margin: 0 0 14px; max-width: 66ch; }
.anverdict b { color: var(--amber-deep); font-weight: 700; }
.anverdict:empty { display: none; }
.ankpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 12px; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 15px 17px;
  box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.kpi:first-child { border-color: var(--line2); box-shadow: 0 0 0 1px var(--amber-soft), var(--shadow); }
.kpitop { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.kpinum { font-family: var(--font-display); font-weight: 700; font-size: 1.95rem; line-height: 1;
  color: var(--text); }
.kpidelta { font-family: var(--font-mono); font-size: .72rem; font-weight: 700; white-space: nowrap; }
.kpidelta.up { color: var(--green); } .kpidelta.dn { color: var(--red); }
.kpilbl { font-family: var(--font-mono); font-size: .59rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--dim); display: inline-flex; align-items: center; gap: 4px; }

/* -------- analytics redesign: BY NETWORK cards (the hero) -------- */
.annetgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); gap: 14px;
  padding: 14px 16px 16px; }
.ancard { border: 1px solid var(--line2); border-radius: 16px; background: var(--card);
  padding: 16px 16px 14px; display: flex; flex-direction: column; }
.ancard-h { display: flex; align-items: center; gap: 11px; }
.ancard-ic { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 11px; color: #fff; }
.ancard-ic svg { width: 22px; height: 22px; }
.ancard-ic.instagram { background: #d6336c; } .ancard-ic.facebook { background: #1877f2; }
.ancard-ic.tiktok { background: #111; } .ancard-ic.linkedin { background: #0a66c2; }
.ancard-ic.youtube { background: #e23b2e; } .ancard-ic.twitter { background: #111; }
.ancard-ic.pinterest { background: #e60023; } .ancard-ic.gmb { background: #1a73e8; }
.ancard-nm { flex: 1 1 auto; min-width: 0; }
.ancard-nm b { display: block; font-size: 15px; color: var(--text); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.ancard-nm span { font-family: var(--font-mono); font-size: 11px; color: var(--dim); }
.anrate { flex: 0 0 auto; font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  color: var(--green); background: var(--green-soft); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.ancard-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin: 15px 0 2px; }
.ancard-heronum { min-width: 0; }
.ancard-heronum b { font-family: var(--font-display); font-weight: 700; font-size: 1.75rem; line-height: 1;
  color: var(--text); }
.ancard-heronum span { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--dim); margin-top: 5px; }
.ancard-hero .cxdelta { margin-left: 0; margin-top: 6px; display: inline-block; }
.ancard-hero .cxspark { width: 104px; height: 30px; flex: 0 0 auto; }
.ancard-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 9px 0 3px;
  font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }
.ancard-stats b { color: var(--text); font-weight: 700; }
.ancard-stats i { color: var(--line2); font-style: normal; }
.ancard-mix { margin: 7px 0 3px; }
.mixbar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--card2);
  gap: 1.5px; }
.mixbar .mixseg { display: block; height: 100%; }
.mixseg-likes, .mixdot-likes { background: #e08900; }
.mixseg-comments, .mixdot-comments { background: #1877f2; }
.mixseg-shares, .mixdot-shares { background: #0e7857; }
.mixseg-saves, .mixdot-saves { background: #8250df; }
.mixlegrow { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .03em; color: var(--muted); }
.mixleg { display: inline-flex; align-items: center; gap: 5px; }
.mixleg i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; flex: 0 0 auto; }
.ancard-top { display: flex; align-items: center; gap: 9px; margin: 11px 0 2px; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: 11px; background: var(--card2); cursor: pointer; }
.ancard-top:hover { border-color: var(--amber); background: var(--amber-soft); }
.ancard-topk { flex: 0 0 auto; font-size: 8.5px; letter-spacing: .1em; color: var(--amber-deep); }
.ancard-topt { flex: 1 1 auto; min-width: 0; font-size: 12.5px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ancard-tops { flex: 0 0 auto; font-family: var(--font-mono); font-size: 12px; }
.ancard-tops b { color: var(--text); font-weight: 700; }
.ancard-more { margin-top: 12px; align-self: flex-start; border: none; background: none; cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; color: var(--amber-deep); padding: 2px 0; }
.ancard-more::after { content: " \25be"; }
.ancard-more.open::after { content: " \25b4"; }
.ancard-content { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.anlistlead { margin: 22px 0 9px; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--dim); }

/* -------- ads scorecard: compact, goal-first KPI tiles -------- */
.adkpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px;
  margin-bottom: 12px; }
.adkpis-goal { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-bottom: 10px; }
.adkpi { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.adkpi b { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; line-height: 1.05;
  color: var(--text); }
.adkpi b.bad { color: var(--red); } .adkpi b.good { color: var(--green); }
.adkpi span { font-family: var(--font-mono); font-size: .55rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--dim); display: inline-flex; align-items: center; gap: 3px; }
.adkpi.pri { border-color: var(--line2); box-shadow: 0 0 0 1px var(--amber-soft), var(--shadow); }
.adkpi.pri b { font-size: 1.72rem; }
.adsublabel { font-family: var(--font-mono); font-size: .56rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--dim); margin: 4px 2px 8px; }

/* -------- ads breakdowns: demographics + placement -------- */
.adsdemo-h { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .12em; color: var(--dim);
  margin: 14px 0 8px; }
.adsdemo-h:first-child { margin-top: 2px; }
.adsage { display: flex; flex-direction: column; gap: 7px; }
.adsage-row { display: flex; align-items: center; gap: 10px; }
.adsage-l { flex: 0 0 66px; font-family: var(--font-mono); font-size: 12px; color: var(--text); }
.adsbar { flex: 1 1 auto; height: 9px; background: var(--card2); border-radius: 999px; overflow: hidden; }
.adsbar-fill { display: block; height: 100%; background: var(--amber-bright); border-radius: 999px; }
.adsbar-fill.c { background: #1877f2; }
.adsage-v { flex: 0 0 auto; font-family: var(--font-mono); font-size: 11px; color: var(--muted);
  min-width: 44px; text-align: right; }
.adsgender { display: flex; flex-wrap: wrap; gap: 8px; }
.adsg { font-family: var(--font-mono); font-size: 12px; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--line2); background: var(--card2); color: var(--muted); }
.adsg b { color: var(--text); }
.adsg.g-f { border-color: rgba(214, 69, 105, .4); }
.adsg.g-m { border-color: rgba(24, 119, 242, .4); }
.adsdemo-note { margin: 13px 0 0; font-size: 10px; letter-spacing: .02em; }

/* -------- ads video completion funnel -------- */
.vidverdict { font-family: var(--font-display); font-weight: 500; font-size: 1rem; line-height: 1.45;
  color: var(--text); margin: 0 0 16px; max-width: 64ch; }
.vidverdict b { color: var(--amber-deep); font-weight: 700; }
.vidfunnel { display: flex; flex-direction: column; gap: 8px; }
.vidstage { display: flex; align-items: center; gap: 10px; }
.vidstage-l { flex: 0 0 52px; font-size: 12px; color: var(--text); }
.vidbar { flex: 1 1 auto; height: 12px; background: var(--card2); border-radius: 999px; overflow: hidden; }
.vidbar-fill { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--amber-bright), var(--amber)); }
.vidstage-v { flex: 0 0 auto; font-size: 11px; color: var(--muted); min-width: 82px; text-align: right; }
.vidstage-v b { color: var(--text); }
/* the stage where the most viewers are lost - drawn to the eye so the funnel and
   the plain-English verdict point at the same leak */
.vidstage.leak .vidstage-l { color: var(--red); font-weight: 700; }
.vidstage.leak .vidbar { box-shadow: inset 0 0 0 1.5px rgba(214, 69, 69, .45); }
.vidstats { margin-top: 15px; }

/* -------- ads targeting tips (collapsible, educational) -------- */
.aetarget { padding: 0; }
.aetarget > summary { cursor: pointer; padding: 14px 16px; list-style: none; display: flex; align-items: center; }
.aetarget > summary::-webkit-details-marker { display: none; }
.aetarget > summary::after { content: "\25be"; margin-left: auto; color: var(--dim); font-size: .8rem; }
.aetarget[open] > summary::after { content: "\25b4"; }
.aetip { padding: 11px 0; border-top: 1px solid var(--line); }
.aetip:first-child { border-top: 0; padding-top: 0; }
.aetip b { display: block; color: var(--text); font-size: 13.5px; margin-bottom: 3px; }
.aetip span { color: var(--muted); font-size: 12.5px; line-height: 1.5; }

/* ============================ Dark theme ============================ */
:root[data-theme="dark"] {
  --bg: #0a0e18; --card: #121a2b; --card2: #0e1524;
  --line: #212c40; --line2: #30405d;
  /* --dim was #6b7890 = only ~3.9:1 on the dark cards (below WCAG AA 4.5); lifted
     to clear 4.5:1 on both dark surfaces while staying dimmer than --muted. */
  --text: #e9eef8; --muted: #98a5bc; --dim: #7f8ba2;
  /* Saturated accents are lightened for dark (Material-3 tonal guidance) so the
     amber/green chip TEXT clears AA on the dark -soft chip backgrounds (deep amber
     #c67700 gave only ~4.1:1). Light theme keeps the deeper values. */
  --amber-deep: #e0951f; --green: #2fbd8a; --amber: #e8a13a;  /* --amber lightened for dark too (links were 3.75:1) */
  --amber-soft: rgba(224, 137, 0, 0.16);
  --green-soft: rgba(20, 151, 107, 0.18);
  --red-soft: rgba(214, 69, 69, 0.18);
  --scan: #8fb2ec; --scan-soft: rgba(120, 160, 230, 0.18);  /* lightened for AA on dark -soft chip */
  --shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.6);
}
:root[data-theme="dark"] .switch span { background: var(--line2); }
:root[data-theme="dark"] .side { border-right: 1px solid var(--navy-line); }
/* theme toggle button icon swap */
.tptheme .ic-sun { display: none; }
.tptheme .ic-moon { display: inline-flex; }
:root[data-theme="dark"] .tptheme .ic-sun { display: inline-flex; }
:root[data-theme="dark"] .tptheme .ic-moon { display: none; }
.tptheme svg { width: 18px; height: 18px; }

/* dark mode: topbar icons go white (amber accents drop away). The outline
   strokes sit on the <svg> itself as stroke="currentColor", so target the svg
   AND its children; keep fill-only accents (the dot) via the fill rule. */
:root[data-theme="dark"] .topsupport { color: #fff; }
:root[data-theme="dark"] .topsupport svg,
:root[data-theme="dark"] .topsupport svg *:not([stroke="none"]) { stroke: #fff; }
:root[data-theme="dark"] .topsupport svg [fill]:not([fill="none"]) { fill: #fff; }

/* analytics: segmented Organic/Ads switch */
.anseg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px;
  background: var(--card2); border: 1px solid var(--line); margin: 0 0 16px; }
.anseg button { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em;
  padding: 8px 18px; border-radius: 9px; border: 0; background: transparent;
  color: var(--muted); cursor: pointer; font-weight: 600; white-space: nowrap; }
.anseg button.on { background: var(--card); color: var(--text); box-shadow: var(--shadow); }
:root[data-theme="dark"] .anseg button.on { background: var(--line2); color: #fff; }
/* Shared video-FORMAT segmented control (every Creative Studio video build).
   Wraps to 2x2 on phones rather than scrolling sideways, so no option is ever
   hidden off-screen (mobile no-sideways rule). */
.stfmt { display: flex; flex-wrap: wrap; gap: 6px; padding: 5px; border-radius: 12px;
  background: var(--card2); border: 1px solid var(--line); margin: 0 0 16px; }
.stfmt button { flex: 1 1 0; min-width: 76px; display: flex; flex-direction: column;
  align-items: center; gap: 2px; padding: 8px 6px; border-radius: 9px; border: 0;
  background: transparent; color: var(--muted); cursor: pointer;
  font: 600 13px/1 var(--font-mono); letter-spacing: .03em; }
.stfmt button small { font-size: 10px; font-weight: 600; letter-spacing: .01em;
  color: var(--muted); opacity: .85; text-transform: none; font-family: var(--font-mono); }
.stfmt button.on { background: var(--card); color: var(--text); box-shadow: var(--shadow); }
.stfmt button.on small { color: inherit; opacity: .9; }
:root[data-theme="dark"] .stfmt button.on { background: var(--line2); color: #fff; }
@media (max-width: 760px) { .stfmt button { flex: 1 1 40%; } }
/* clickable affordances */
.clik { cursor: pointer; }
.anrow.clik:hover, .antoprow:hover { background: var(--amber-soft); }
.anrow { position: relative; transition: background .12s; }
.anrow-open { font-family: var(--font-mono); font-size: 10.5px; color: var(--amber-deep);
  opacity: 0; transition: opacity .12s; white-space: nowrap; align-self: center; }
.anrow.clik:hover .anrow-open, .antoprow:hover .anrow-open { opacity: 1; }
.annet.clik { text-decoration: none; }
.annet.clik:hover { outline: 2px solid var(--amber); outline-offset: 1px; }
.kcard b.good { color: var(--green); }
/* top 5 posts */
.antoprow { display: flex; align-items: center; gap: 14px; padding: 12px 16px;
  border-top: 1px solid var(--line); }
.antoprow:first-child { border-top: 0; }
.antop-rank { flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 13px var(--font-mono); background: var(--card2); color: var(--muted);
  border: 1px solid var(--line2); }
.antop-rank.r1 { background: linear-gradient(180deg, var(--amber-bright), var(--amber));
  color: #3a2600; border-color: transparent; }
.antop-rank.r2 { background: #c9cfdb; color: #2a3140; border-color: transparent; }
.antop-rank.r3 { background: #e0b083; color: #3a2600; border-color: transparent; }
.antop-body { flex: 1 1 auto; min-width: 0; }
.antop-body b { display: block; color: var(--text); font-size: 14px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.antop-sub { display: flex; align-items: center; gap: 7px; margin-top: 4px;
  font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.antop-score { flex: none; text-align: right; }
.antop-score b { display: block; font-family: var(--font-display); font-size: 18px; color: var(--text); }
.antop-score em { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .05em;
  color: var(--dim); font-style: normal; }

/* account: change-password form */
.pwform { max-width: 380px; }
.pwform label { display: block; font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .05em; color: var(--muted); margin: 12px 0 5px; }
.pwform input { width: 100%; }

/* active-brand cues: topbar chip + overview banner */
.brandtag { display: inline-flex; align-items: center; vertical-align: middle;
  margin-left: 10px; padding: 3px 12px; border-radius: 999px; font-family: var(--font-mono);
  font-size: .62rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--amber-deep); background: var(--amber-soft); border: 1px solid var(--amber);
  position: relative; top: -2px; }
.brandtag:empty { display: none; }

/* ==================== Fill-from-website + draft review modal ==================== */
/* URL row on the Brand profile panel */
.furow { display: flex; gap: 10px; flex-wrap: wrap; }
.furow input { flex: 1 1 260px; min-width: 200px; }
/* "or use a picture" divider + row under the website box */
.fuor { display: flex; align-items: center; gap: 10px; margin: 12px 0; color: var(--dim);
  font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; }
.fuor::before, .fuor::after { content: ""; height: 1px; flex: 1; background: var(--line2); }
.fupicrow { align-items: center; gap: 12px; }

/* brand-profile logo field (DESIGN section) */
.logofield { display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; align-items: center; }
.logoprev { width: 96px; height: 68px; border: 1px solid var(--line2); border-radius: 10px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: repeating-conic-gradient(var(--card2) 0% 25%, transparent 0% 50%) 0 / 16px 16px, var(--card); }
.logoprev img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logoprev.empty { color: var(--dim); font-size: .62rem; letter-spacing: .08em; background: var(--card2); }
.logoact { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.logohint { grid-column: 1 / -1; margin: 2px 0 0; color: var(--dim); font-size: .78rem; line-height: 1.5; }
.logohint b { color: var(--muted); }
@media (max-width: 560px) { .logofield { grid-template-columns: 1fr; } }

/* special panel heading (the growth-engine "How GrowFleet works"). ONLY the title
   text gets the gradient - the phead also holds #pipeSched chips, and a transparent
   text-fill on the whole header would make those chips invisible. */
.howtitle { font-size: .82rem; letter-spacing: .1em; font-family: var(--font-mono);
  background: linear-gradient(90deg, var(--amber-deep) 0%, #c0398a 90%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  color: var(--amber-deep); }
.howsub { color: var(--dim); font-size: .58rem; letter-spacing: .12em; margin-left: 10px; }

/* "no posts yet" - compact plain-English flow (fits with no scroll) */
.qflow { max-width: 760px; margin: 4px auto; padding: 10px 16px 12px; text-align: left; }
.qflow-head { text-align: center; margin: 0 0 9px; }
.qflow-head .picon { display: inline-flex; width: 30px; height: 30px; }
.qflow-head b { display: block; font-size: 1rem; margin: 4px 0 2px; color: var(--text); }
.qflow-head span { color: var(--muted); font-size: .8rem; }
.qflow-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px;
  grid-template-columns: 1fr 1fr; }
.qflow-steps li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 11px;
  border: 1px solid var(--line2); border-radius: 11px; background: var(--card2); }
/* step 5 spans full width ONLY when the Build button has been removed (empty
   bank); with a button present, step 5 and the button share the last row */
.qflow-steps li.qfspan { grid-column: 1 / -1; }
.qfstepn { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--amber);
  color: #fff; font-weight: 700; font-size: .76rem; display: flex; align-items: center;
  justify-content: center; margin-top: 1px; }
.qflow-steps b, .qflow-steps .hlink { display: inline-block; font-size: .88rem; color: var(--text); }
.qflow-steps .hlink { font-family: var(--font-body); font-weight: 600; }
.qflow-steps small { display: block; color: var(--muted); font-size: .77rem; margin-top: 1px; line-height: 1.35; }
/* the Build CTA lives in the final grid cell (beside step 5), not a separate
   row - a dashed frame marks it as the action rather than another step */
.qflow-cta { display: flex; align-items: center; justify-content: center; margin: 0;
  border: 1px dashed var(--line2); border-radius: 12px; padding: 8px 11px; }
.qflow-cta .btn { width: 100%; }
@media (max-width: 620px) { .qflow-steps { grid-template-columns: 1fr; } }

/* live logo preview: a mock design showing position + border, updates on change */
.logostage { position: relative; width: 210px; height: 262px; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--line2);
  background: linear-gradient(135deg, #5b2a8a 0%, #c0398a 55%, #7a3d63 100%); }
.logostage.nologo { background: var(--card2); }
.logostage.nologo::after { content: "Upload a logo to preview it"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; color: var(--dim);
  font-size: .72rem; text-align: center; padding: 0 22px; }
.logostage.nologo .logostage-hl, .logostage.nologo .logostage-logo { display: none; }
.logostage-hl { position: absolute; left: 12px; bottom: 14px; display: flex; flex-direction: column;
  gap: 6px; transition: bottom .16s ease; }
.logostage-hl i { display: block; height: 9px; border-radius: 3px; background: rgba(255, 255, 255, .92); }
.logostage-hl i:nth-child(1) { width: 118px; }
.logostage-hl i:nth-child(2) { width: 84px; }
.logostage[data-pos="bl"] .logostage-hl, .logostage[data-pos="br"] .logostage-hl { bottom: 70px; }
.logostage-logo { position: absolute; max-width: 45%; max-height: 22%; object-fit: contain;
  transition: all .16s ease; }
.logostage[data-pos="tl"] .logostage-logo { top: 10px; left: 10px; }
.logostage[data-pos="tr"] .logostage-logo { top: 10px; right: 10px; }
.logostage[data-pos="bl"] .logostage-logo { bottom: 10px; left: 10px; }
.logostage[data-pos="br"] .logostage-logo { bottom: 10px; right: 10px; }
.logostage[data-pos="c"] .logostage-logo { top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 40%; }
.logostage-cap { display: block; margin-top: 6px; font-size: .56rem; letter-spacing: .08em; color: var(--dim); }

/* logo crop + resize modal */
.lcrop-modal { width: min(560px, 94vw); }
.lcrop-hold { display: flex; justify-content: center; padding: 4px 0 2px; }
.lcrop-stage { position: relative; user-select: none; touch-action: none; overflow: hidden;
  border: 1px solid var(--line2); border-radius: 8px;
  background: repeating-conic-gradient(#e9e5dc 0% 25%, #ffffff 0% 50%) 0 / 18px 18px; }
.lcrop-img { display: block; width: 100%; height: 100%; pointer-events: none; }
.lcrop-box { position: absolute; box-sizing: border-box; border: 2px solid var(--amber);
  box-shadow: 0 0 0 100vmax rgba(10, 15, 25, .45); cursor: move; }
.lch { position: absolute; width: 14px; height: 14px; background: #fff; border: 2px solid var(--amber);
  border-radius: 3px; touch-action: none; }
.lch[data-h="nw"] { left: -8px; top: -8px; cursor: nwse-resize; }
.lch[data-h="ne"] { right: -8px; top: -8px; cursor: nesw-resize; }
.lch[data-h="sw"] { left: -8px; bottom: -8px; cursor: nesw-resize; }
.lch[data-h="se"] { right: -8px; bottom: -8px; cursor: nwse-resize; }
.lcrop-tools { display: flex; align-items: center; gap: 10px; margin: 14px 0 2px; flex-wrap: wrap; }

/* image editor (media library): crop & rotate / adjust / text -> new asset */
.ied-modal { width: min(640px, 96vw); }
.ied-tabs { display: flex; gap: 6px; margin-bottom: 12px; padding: 4px;
  background: var(--card2); border: 1px solid var(--line); border-radius: 12px; }
.ied-tab { flex: 1; padding: 8px 10px; border: none; background: transparent; border-radius: 9px;
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .03em; color: var(--muted);
  cursor: pointer; transition: all .12s; }
.ied-tab:hover { color: var(--text); }
.ied-tab.on { background: var(--card); color: var(--amber-deep); font-weight: 700; box-shadow: var(--shadow); }
.ied-stagewrap { display: flex; justify-content: center; padding: 2px 0 6px; }
.ied-stage { position: relative; overflow: hidden; touch-action: none; user-select: none;
  max-width: 100%; border: 1px solid var(--line2); border-radius: 10px; background: #0e1218; }
.ied-canvas-hold { position: absolute; inset: 0; }
.ied-canvas { display: block; width: 100%; height: 100%; }
.ied-texts { position: absolute; inset: 0; pointer-events: none; }
.ied-text { position: absolute; transform: translate(-50%, -50%); font-family: var(--font-display);
  line-height: 1.05; white-space: pre; text-align: center; cursor: move; padding: 2px 6px; max-width: 94%;
  touch-action: none; text-shadow: 0 2px 10px rgba(0,0,0,.55), 0 0 2px rgba(0,0,0,.5); }
.ied-text.sel { outline: 1.5px dashed var(--amber-bright); outline-offset: 4px; border-radius: 2px; }
.ied-panel { margin-top: 4px; }
.ied-panel[hidden] { display: none; }
.ied-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
/* crop frame + handles (shared look with the logo cropper's dimmed exterior) */
.icrop-box { position: absolute; box-sizing: border-box; border: 2px solid var(--amber-bright);
  box-shadow: 0 0 0 100vmax rgba(8, 12, 20, .55); cursor: move; }
.icrop-grid { position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.45) 0 0), linear-gradient(rgba(255,255,255,.45) 0 0),
    linear-gradient(rgba(255,255,255,.45) 0 0), linear-gradient(rgba(255,255,255,.45) 0 0);
  background-repeat: no-repeat; background-size: 1px 100%, 1px 100%, 100% 1px, 100% 1px;
  background-position: 33.33% 0, 66.67% 0, 0 33.33%, 0 66.67%; }
.icrop-size { position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: .66rem; font-weight: 700; letter-spacing: .04em;
  color: #fff; background: rgba(12, 16, 24, .82); border: 1px solid rgba(255,255,255,.14);
  padding: 2px 8px; border-radius: 999px; white-space: nowrap; pointer-events: none; }
.ich { position: absolute; width: 14px; height: 14px; background: #fff; box-sizing: border-box;
  border: 2px solid var(--amber-bright); border-radius: 3px; touch-action: none; }
.ich::after { content: ""; position: absolute; inset: -9px; }   /* bigger touch target */
.ich[data-h="nw"] { left: -8px; top: -8px; cursor: nwse-resize; }
.ich[data-h="ne"] { right: -8px; top: -8px; cursor: nesw-resize; }
.ich[data-h="sw"] { left: -8px; bottom: -8px; cursor: nesw-resize; }
.ich[data-h="se"] { right: -8px; bottom: -8px; cursor: nwse-resize; }
.ich[data-h="n"] { top: -8px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.ich[data-h="s"] { bottom: -8px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.ich[data-h="w"] { left: -8px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
.ich[data-h="e"] { right: -8px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
.icrop-ratios { display: flex; flex-wrap: wrap; gap: 6px; }
.icrat { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .03em; padding: 6px 12px;
  border-radius: 999px; border: 1px solid var(--line2); background: var(--card); color: var(--muted);
  cursor: pointer; transition: all .12s; }
.icrat:hover { border-color: var(--amber); color: var(--text); }
.icrat.on { color: var(--amber-deep); background: var(--amber-soft); border-color: var(--amber); font-weight: 700; }
/* adjust sliders */
.ied-adj { margin: 10px 0; }
.ied-adj label { display: flex; justify-content: space-between; font-family: var(--font-mono);
  font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.ied-adj output { color: var(--amber-deep); font-weight: 700; }
.ied-adjr, .ied-textsize { width: 100%; height: 6px; accent-color: var(--amber); cursor: pointer; }
/* text tool */
.ied-textctl { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.ied-textinput { width: 100%; font-size: 16px; padding: 9px 12px; border-radius: 10px;
  border: 1px solid var(--line2); background: var(--card2); color: var(--text); font-family: var(--font-body); }
.ied-textinput:focus { outline: none; border-color: var(--amber); background: var(--card); }
.ied-textrow { display: flex; align-items: center; gap: 10px; }
.ied-textrow label { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); }
.ied-textrow .ied-textsize { flex: 1; }
.ied-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.ied-swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line2);
  cursor: pointer; padding: 0; transition: transform .1s; }
.ied-swatch:hover { transform: scale(1.1); }
.ied-swatch.on { border-color: var(--amber); box-shadow: 0 0 0 2px var(--amber-soft); }
.btn.sm-act.on { border-color: var(--amber); background: var(--amber-soft); color: var(--amber-deep); font-weight: 700; }
/* save-as name + footer hint */
.icrop-lbl { display: block; margin: 14px 0 6px; font-family: var(--font-mono); font-size: .6rem;
  letter-spacing: .12em; color: var(--muted); text-transform: uppercase; }
.icrop-namerow { display: flex; }
.icrop-name { width: 100%; font-size: 16px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--line2); background: var(--card2); color: var(--text); font-family: var(--font-body); }
.icrop-name:focus { outline: none; border-color: var(--amber); background: var(--card); }
.ied-foothint { margin-right: auto; padding: 0; }
/* video editor: native <video> preview, trim bar, chips, finish toggles */
.ied-video { background: #000; object-fit: contain; }
.vtrim { padding: 8px 2px 2px; }
.vtrim-track { position: relative; height: 30px; border-radius: 8px; background: var(--card2);
  border: 1px solid var(--line2); touch-action: none; cursor: pointer; }
.vtrim-sel { position: absolute; top: 0; bottom: 0; background: var(--amber-soft);
  border-left: 2px solid var(--amber); border-right: 2px solid var(--amber); pointer-events: none; }
.vtrim-play { position: absolute; top: -3px; bottom: -3px; width: 2px; background: #fff;
  box-shadow: 0 0 5px rgba(0,0,0,.7); pointer-events: none; transform: translateX(-1px); }
.vtrim-handle { position: absolute; top: 50%; width: 16px; height: 26px; transform: translate(-50%, -50%);
  background: var(--amber); border: 1px solid #fff; border-radius: 5px; cursor: ew-resize;
  touch-action: none; box-shadow: 0 1px 4px rgba(0,0,0,.45); z-index: 2; }
.vtrim-handle::after { content: ""; position: absolute; inset: -12px; }   /* bigger touch target */
.vtrim-handle:focus-visible { outline: 2px solid var(--amber-bright); outline-offset: 2px; }
.vtrim-row { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.vtrim-time { font-family: var(--font-mono); font-size: .68rem; color: var(--muted); }
.vtrim-time b { color: var(--amber-deep); }
.vsub { display: block; margin: 14px 0 7px; font-family: var(--font-mono); font-size: .6rem;
  letter-spacing: .12em; color: var(--muted); text-transform: uppercase; }
.vchips { display: flex; flex-wrap: wrap; gap: 6px; }
.vchip { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .03em; padding: 6px 12px;
  border-radius: 999px; border: 1px solid var(--line2); background: var(--card); color: var(--muted);
  cursor: pointer; transition: all .12s; }
.vchip:hover { border-color: var(--amber); color: var(--text); }
.vchip.on { color: var(--amber-deep); background: var(--amber-soft); border-color: var(--amber); font-weight: 700; }
.vbadge { display: inline-block; margin-top: 10px; font-family: var(--font-mono); font-size: .62rem;
  color: var(--amber-deep); background: var(--amber-soft); border: 1px solid var(--amber);
  padding: 4px 10px; border-radius: 999px; }
.vchk { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text);
  cursor: pointer; padding: 3px 0; }
.vchk input { width: 16px; height: 16px; accent-color: var(--amber); flex: none; }
.ied-finish { margin-top: 12px; display: flex; flex-direction: column; gap: 2px;
  border-top: 1px solid var(--line); padding-top: 12px; }
.vfinrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vselect { font-family: var(--font-body); font-size: 13px; padding: 5px 9px; border-radius: 8px;
  border: 1px solid var(--line2); background: var(--card2); color: var(--text); cursor: pointer; }
.vselect:disabled { opacity: .45; cursor: not-allowed; }
.vselect:focus { outline: none; border-color: var(--amber); }
/* video-editor text fonts - served from the SAME bundled TTFs the worker renders, so
   the on-video preview is true WYSIWYG */
@font-face { font-family: "gfvf-montserrat"; src: url("/api/font/montserrat"); font-weight: 400; font-display: swap; }
@font-face { font-family: "gfvf-montserrat"; src: url("/api/font/montserrat?w=bold"); font-weight: 700; font-display: swap; }
@font-face { font-family: "gfvf-oswald"; src: url("/api/font/oswald"); font-weight: 400; font-display: swap; }
@font-face { font-family: "gfvf-oswald"; src: url("/api/font/oswald?w=bold"); font-weight: 700; font-display: swap; }
@font-face { font-family: "gfvf-anton"; src: url("/api/font/anton"); font-display: swap; }
@font-face { font-family: "gfvf-bebasneue"; src: url("/api/font/bebasneue"); font-display: swap; }
@font-face { font-family: "gfvf-playfair"; src: url("/api/font/playfair"); font-weight: 400; font-display: swap; }
@font-face { font-family: "gfvf-playfair"; src: url("/api/font/playfair?w=bold"); font-weight: 700; font-display: swap; }
.vfonts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.vfont { font-size: 15px; padding: 5px 12px; border-radius: 8px; border: 1px solid var(--line2);
  background: var(--card); color: var(--text); cursor: pointer; line-height: 1.15; }
.vfont:hover { border-color: var(--amber); }
.vfont.on { border-color: var(--amber); background: var(--amber-soft); color: var(--amber-deep); }
.vsetup { margin-left: auto; font-size: 12px; white-space: nowrap; flex: none; }
.gfvresume { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 500;
  display: flex; align-items: center; gap: 12px; padding: 9px 12px 9px 18px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--amber); box-shadow: var(--shadow-lg);
  font-size: 14px; color: var(--text); max-width: calc(100vw - 24px); animation: ppin .18s ease; }
.gfvresume span { color: var(--muted); }
.gfvresume-x { border: 0; background: transparent; color: var(--muted); font-size: 19px;
  line-height: 1; cursor: pointer; padding: 0 2px; }
.gfvresume-x:hover { color: var(--text); }
/* Our outro resume pill (.gfoutro-resume, scoped so the existing #gfVResume
   video-editor pill is untouched) must never run past a narrow screen: allow it
   to wrap, and drop the context prefix on phones so "Resume <creator>" + close
   always fit. Centre with left/right/margin - NOT translateX(-50%) - so the pop
   animation (which drives transform) can't knock it off-centre. */
.gfoutro-resume { flex-wrap: wrap; justify-content: center; row-gap: 6px;
  left: 12px; right: 12px; margin: 0 auto; width: fit-content;
  transform: none; animation: gfResumeIn .18s ease; }
@keyframes gfResumeIn { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 520px) { .gfoutro-resume > span { display: none; } }
/* "BRAND OUTRO" section labels in the video creators are links to the outro
   setup (Brand profile). font:inherit keeps the tiny mono label look; the
   underline + up-right arrow mark it as a link that opens the setup elsewhere. */
.outro-setup-link { font: inherit; letter-spacing: inherit; text-transform: inherit;
  color: var(--amber-deep); background: none; border: 0; padding: 0; margin: 0;
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.outro-setup-link:hover { color: var(--amber); }
.outro-setup-link::after { content: " ↗"; text-decoration: none; display: inline-block; }
.gfvresume .gfvr-x { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 15px;
  width: 26px; height: 26px; border-radius: 50%; flex: none; }
.gfvresume .gfvr-x:hover { background: var(--card2); color: var(--text); }
@media (max-width: 560px) { .gfvresume span { display: none; } }
@media (max-width: 560px) {
  .ied-foothint { display: none; }
  .ied-tab { font-size: .6rem; padding: 8px 6px; }
  .vchip, .icrat { font-size: .62rem; padding: 6px 10px; }
}

/* modal shell - sticky header/footer, scrollable body, on theme */
.fumodal { width: min(720px, 94vw); max-height: 90vh; display: flex; flex-direction: column;
  padding: 0; overflow: hidden; }
.npmhead { display: flex; align-items: center; gap: 14px; padding: 18px 22px; flex: none;
  border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--amber-soft), transparent); }
.npmh-ic { flex: none; width: 38px; height: 38px; border-radius: 12px; display: inline-flex;
  align-items: center; justify-content: center; font-size: 1.05rem; color: #3a2600;
  background: linear-gradient(180deg, var(--amber-bright), var(--amber)); box-shadow: 0 4px 12px var(--amber-soft); }
.npmh-t { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.npmh-t b { font-family: var(--font-display); font-size: 1.16rem; color: var(--text); }
.npmh-t span { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .05em;
  color: var(--muted); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.npmx { flex: none; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line2);
  background: var(--card); color: var(--muted); cursor: pointer; font-size: .95rem; transition: all .15s; }
.npmx:hover { color: var(--text); border-color: var(--amber); transform: rotate(90deg); }
.npmbody { padding: 20px 22px; overflow-y: auto; flex: 1; }
.npmbody::-webkit-scrollbar { width: 12px; }
.npmbody::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 999px; border: 4px solid var(--card); }
.npmfoot { display: flex; justify-content: flex-end; gap: 10px; padding: 15px 22px; flex: none;
  border-top: 1px solid var(--line); background: var(--card2); }

/* hero screenshot of the site we read */
.fuhero { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--line2); margin-bottom: 16px; }
.fushot { display: block; width: 100%; max-height: 200px; object-fit: cover; object-position: top; }
.fuhero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 64px;
  background: linear-gradient(transparent, rgba(7, 11, 20, 0.78)); }
.fuhero-cap { position: absolute; left: 13px; bottom: 10px; z-index: 1; color: #fff;
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; }

/* intro + toolbar */
.fulead { color: var(--muted); font-size: .9rem; line-height: 1.55; margin: 0 0 16px; }
.fulead b { color: var(--text); }
.futools { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; }
.fulink { background: none; border: 0; padding: 0; cursor: pointer; color: var(--amber-deep);
  font-family: var(--font-mono); font-size: .72rem; font-weight: 600; letter-spacing: .03em; }
.fulink:hover { text-decoration: underline; }
.futools-sep { color: var(--line2); }
.fucount-chip { font-family: var(--font-mono); font-size: .66rem; color: var(--muted);
  background: var(--card2); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; }

/* field cards */
.fugrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.ficard { background: var(--card2); border: 1px solid var(--line); border-radius: 14px;
  padding: 13px 15px 15px; transition: border-color .15s, opacity .15s; }
.ficard.big { grid-column: 1 / -1; }
.ficard:hover { border-color: var(--line2); }
.ficard.off { opacity: .6; }
.ficard.off:hover { opacity: 1; }
.fic-top { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.fic-lab { flex: 1; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted); font-weight: 600; }
.fic-badge { font-family: var(--font-mono); font-size: .56rem; font-weight: 700; letter-spacing: .06em;
  padding: 3px 8px; border-radius: 999px; flex: none; }
.fic-badge.new { color: var(--green); background: var(--green-soft); }
.fic-badge.chg { color: var(--amber-deep); background: var(--amber-soft); }
.fic-badge.same { color: var(--dim); background: transparent; border: 1px solid var(--line); }
.fic-cur { font-size: .74rem; color: var(--dim); margin: -2px 0 9px; }
.fic-cur span { color: var(--muted); }
.fic-sw { display: flex; gap: 6px; margin: 0 0 10px; }
.fic-sw .fusw { width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--line2); }
.fic-input { width: 100%; font-family: var(--font-body); }
textarea.fic-input { resize: vertical; min-height: 58px; line-height: 1.5; }
/* the include toggle (pill switch) */
.fic-tog { position: relative; flex: none; width: 40px; height: 22px; cursor: pointer; }
.fic-tog input { position: absolute; opacity: 0; margin: 0; }
.fic-tog span { position: absolute; inset: 0; border-radius: 999px; background: var(--line2); transition: background .18s; }
.fic-tog span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; transition: left .18s; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
.fic-tog input:checked + span { background: var(--amber); }
.fic-tog input:checked + span::after { left: 21px; }
.fic-tog input:focus-visible + span { outline: 2px solid var(--amber); outline-offset: 2px; }

/* logo option */
.fulogo { display: flex; align-items: center; gap: 11px; margin: 16px 0 0; padding: 13px 15px;
  border: 1px dashed var(--line2); border-radius: 12px; color: var(--muted); font-size: .88rem; cursor: pointer; }
.fulogo:hover { border-color: var(--amber); }
.fulogo input { position: absolute; opacity: 0; }
.fulogo-sw { flex: none; width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--line2); position: relative; }
.fulogo input:checked + .fulogo-sw { background: var(--amber); border-color: var(--amber); }
.fulogo input:checked + .fulogo-sw::after { content: "✓"; position: absolute; inset: 0; color: #fff;
  font-size: .78rem; display: flex; align-items: center; justify-content: center; }
.fusw { display: inline-block; }

@media (max-width: 560px) {
  .fugrid { grid-template-columns: 1fr; }
  .npmhead, .npmfoot { padding-left: 16px; padding-right: 16px; }
  .npmbody { padding: 16px; }
}

/* draft field source tag (parsed vs AI) */
.fic-src { font-family: var(--font-mono); font-size: .54rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.fic-src.parsed { color: var(--green); }
.fic-lab { min-width: 0; }

/* ============= Posts row: network icons + approval switch ============= */
.qnets { display: flex; gap: 5px; align-items: center; flex: none; }
.qnet { width: 28px; height: 28px; border-radius: 999px; border: 1px solid var(--line2);
  background: var(--card); color: var(--muted); cursor: pointer; padding: 0; transition: all .14s;
  display: inline-flex; align-items: center; justify-content: center; }
.qnet svg { width: 15px; height: 15px; }
.qnet:hover { color: var(--amber-deep); border-color: var(--amber); transform: translateY(-1px); }
.qnet.instagram:hover { color: #d6336c; border-color: #d6336c; }
.qnet.facebook:hover { color: #1877f2; border-color: #1877f2; }
.qnet.linkedin:hover { color: #0a66c2; border-color: #0a66c2; }
.qnet.youtube:hover { color: #e23b2e; border-color: #e23b2e; }
.qnet.tiktok:hover, .qnet.twitter:hover { color: var(--text); border-color: var(--text); }
/* the row approval switch */
.qapp { position: relative; flex: none; width: 40px; height: 22px; cursor: pointer; margin: 0 2px; }
.qapp input { position: absolute; opacity: 0; margin: 0; }
.qapp span { position: absolute; inset: 0; border-radius: 999px; background: var(--line2); transition: background .18s; }
.qapp span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; transition: left .18s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.qapp input:checked + span { background: var(--green); }
.qapp input:checked + span::after { left: 21px; }
.qapp:hover span { filter: brightness(1.05); }
/* detail: top approve row */
/* detailtop: two aligned groups (metadata pills, then actions). flex-wrap keeps
   them side by side on desktop and stacks to exactly 2 rows on a phone. Each group
   holds ONE control height so nothing wraps ragged (Post-from-Phone feedback). */
.detailtop { display: flex; align-items: center; gap: 10px 12px; margin-bottom: 10px; flex-wrap: wrap; }
.dtacts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* metadata is ONE never-wrapping row: status + format stay their natural size, the
   source chip is the only one that shrinks (ellipsis) to take whatever space is left.
   So the three pills are always on a single line - no pixel-fragile width caps - and
   the block stays 2 rows on any phone (measured, Post-from-Phone feedback). */
.dtmeta { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; min-width: 0; }
.dtmeta > .pill, .dtmeta > .qfmt { flex: none; }
.dtmeta > .qsrc { flex: 0 1 auto; min-width: 0; }
/* every metadata pill snaps to one height + vertical-centre, so status/source/format
   line up cleanly regardless of their own font size or padding */
.dtmeta > .pill, .dtmeta > .qsrc, .dtmeta > .qfmt {
  height: 28px; margin: 0; box-sizing: border-box; display: inline-flex; align-items: center; }
.dtacts > .btn.sm-act { margin: 0; }
.qsrc-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* Phones are narrow (~287px of content): compact each group a touch so the three
   metadata pills sit on one line with the source at its natural size, and the two
   action buttons fit the next line - exactly 2 rows, never 3. */
@media (max-width: 760px) {
  .detailtop { gap: 8px; }
  .dtmeta { gap: 6px; }
  .dtmeta > .pill, .detailtop .dtmeta .qsrc, .detailtop .dtmeta .qfmt {
    height: 25px; font-size: .53rem; padding-left: 7px; padding-right: 7px; }
  .detailtop .dtmeta .qsrc { gap: 4px; }
  .dtacts { gap: 8px; }
  .dtacts > .btn.sm-act { padding: 8px 10px; font-size: .78rem; }
}
/* detail: collapsible attach library */
.medlib-head { cursor: pointer; display: flex; align-items: center; gap: 6px; user-select: none; }
.medlib-head:hover { color: var(--amber-deep); }
.medchev { margin-left: auto; font-size: .72rem; }
.medlib { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px; }
.medlib[hidden] { display: none; }

/* ============= Post lifecycle timeline + status note ============= */
.lifecycle { display: flex; align-items: center; gap: 4px; margin: 6px 0 12px; flex-wrap: wrap; }
.lc-step { display: flex; align-items: center; gap: 8px; }
.lc-dot { width: 12px; height: 12px; border-radius: 50%; flex: none;
  border: 2px solid var(--line2); background: var(--card); }
.lc-step.done .lc-dot { background: var(--green); border-color: var(--green); }
.lc-step.active .lc-dot { background: var(--amber); border-color: var(--amber); box-shadow: 0 0 0 4px var(--amber-soft); }
.lc-txt { display: flex; flex-direction: column; line-height: 1.2; }
.lc-txt b { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .05em;
  text-transform: uppercase; color: var(--dim); }
.lc-step.done .lc-txt b { color: var(--text); }
.lc-step.active .lc-txt b { color: var(--amber-deep); }
.lc-txt span { font-size: .72rem; color: var(--dim); white-space: nowrap; }
.lc-step.done .lc-txt span, .lc-step.active .lc-txt span { color: var(--muted); }
.lc-sep { flex: 1 1 18px; min-width: 12px; height: 2px; background: var(--line); border-radius: 2px; }
.lc-step.done + .lc-sep { background: var(--green); }
.statusnote { margin: 0 0 14px; padding: 11px 14px; border-radius: 11px; background: var(--card2);
  border: 1px solid var(--line); color: var(--muted); font-size: .86rem; line-height: 1.5; }
.statusnote b { color: var(--text); }

/* overview header: autopilot summary chips (was a dense mono blob) */
#pipeSched { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.pipechip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px;
  background: var(--card2); border: 1px solid var(--line); font-family: var(--font-body);
  font-size: .76rem; color: var(--text); text-transform: none; letter-spacing: 0; }
.pipechip em { font-family: var(--font-mono); font-size: .56rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--dim); font-style: normal; }
.pipechip.on { border-color: var(--green); color: var(--green); background: var(--green-soft); }
.pipechip.on em { color: var(--green); opacity: .8; }
.pipechip.warn { border-color: var(--amber); color: var(--amber-deep); background: var(--amber-soft); }
.pipechip.warn em { color: var(--amber-deep); opacity: .8; }
/* "all times in your timezone" note under the post lifecycle */
.tznote { color: var(--dim); font-size: .72rem; letter-spacing: 0; text-transform: none;
  margin: -2px 0 14px; }
.tznote b { color: var(--muted); }
.tznote .hlink { font-size: .72rem; }

/* ---------- Ad Engine ---------- */
.aeplat { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 18px; }
.aeplat-card { display: flex; align-items: center; gap: 10px; background: var(--card);
  border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; min-width: 220px; }
.aeplat-dot { width: 9px; height: 9px; border-radius: 999px; background: var(--line2); flex: none; }
.aeplat-card.on .aeplat-dot { background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.aeplat-txt { display: flex; flex-direction: column; line-height: 1.25; }
.aeplat-txt b { font-size: .9rem; color: var(--text); }
.aeplat-txt span { font-size: .72rem; color: var(--dim); font-family: var(--font-mono); }
.aeplat-card .btn { margin-left: auto; padding: 5px 12px; font-size: .8rem; }

.aerecs, .aecamps { display: flex; flex-direction: column; }
.aerec { display: flex; align-items: center; gap: 12px; padding: 13px 16px;
  border-top: 1px solid var(--line); border-left: 3px solid var(--line2); }
.aerec:first-child { border-top: none; }
.aerec.good { border-left-color: var(--green); }
.aerec.bad { border-left-color: var(--red); }
.aerec.warn { border-left-color: var(--amber); }
.aerec-main { flex: 1; min-width: 0; }
.aerec-main b { display: block; font-size: .92rem; color: var(--text); }
.aerec-sub { font-size: .8rem; color: var(--muted); }
.aerec-sub i { font-style: normal; color: var(--text); font-weight: 600; }
.aerec-ctrl .btn, .aecamp-ctrl .btn { padding: 6px 12px; font-size: .8rem; }

.aecamp { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-top: 1px solid var(--line); }
.aecamp:first-child { border-top: none; }
.aecamp-main { flex: 1; min-width: 0; }
.aecamp-main b { display: block; font-size: .92rem; color: var(--text); }
.aecamp-sub { font-size: .78rem; color: var(--muted); font-family: var(--font-mono); }
.aestatus { display: inline-block; font-size: .64rem; letter-spacing: .08em; padding: 2px 7px;
  border-radius: 999px; border: 1px solid var(--line2); color: var(--dim); }
.aestatus.on { color: var(--green); border-color: var(--green); }
.aestatus.paused { color: var(--amber-deep); border-color: var(--amber); }
.aecamp-ctrl { display: flex; gap: 8px; flex: none; }

.aecopy { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 24px; align-items: start; }
.aecopy-form { display: flex; flex-direction: column; gap: 12px; }
.aefield { display: flex; flex-direction: column; gap: 5px; font-size: .72rem; color: var(--muted);
  font-family: var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
.aefield input, .aefield select { font-family: var(--font-body); font-size: .92rem; text-transform: none;
  letter-spacing: 0; color: var(--text); background: var(--card2); border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 11px; }
.aefield input:focus, .aefield select:focus { outline: none; border-color: var(--amber); }
.aeopt { color: var(--dim); text-transform: none; }
.aecopy-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.aecopy-form .btn { align-self: flex-start; }
.aehint { color: var(--dim); font-size: .68rem; margin: 2px 0 0; letter-spacing: 0; }
.aecopy-out { min-width: 0; }
.aecopy-head { color: var(--dim); font-size: .62rem; letter-spacing: .12em; margin-bottom: 10px; }
.aevar { background: var(--card2); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 16px; margin-bottom: 12px; }
.aevar-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.aevar-head .mono { color: var(--dim); font-size: .62rem; letter-spacing: .1em; }
.aevar-head .btn { margin-left: auto; padding: 4px 12px; font-size: .78rem; }
.aescore { font-family: var(--font-mono); font-size: .68rem; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--line2); color: var(--muted); }
.aescore.good { color: var(--green); border-color: var(--green); }
.aescore.bad { color: var(--red); border-color: var(--red); }
.aevar-line { display: flex; gap: 10px; padding: 5px 0; border-top: 1px dashed var(--line); }
.aevar-line:first-of-type { border-top: none; }
.aevar-line span { flex: none; width: 96px; font-family: var(--font-mono); font-size: .6rem;
  letter-spacing: .06em; color: var(--dim); text-transform: uppercase; padding-top: 3px; }
.aevar-line b { font-weight: 500; color: var(--text); font-size: .92rem; line-height: 1.4; }
.aevar-warn { color: var(--amber-deep); font-size: .68rem; margin-top: 8px; }
@media (max-width: 780px) { .aecopy { grid-template-columns: 1fr; } }

/* ---------- Connections (full catalog) ---------- */
.connsummary { display: flex; align-items: center; gap: 18px; background: var(--card);
  border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; margin-bottom: 20px; }
.connsum-txt b { display: block; font-size: 1.05rem; color: var(--text); }
.connsum-txt span { font-size: .82rem; color: var(--muted); }
.connsum-bar { flex: none; width: 120px; height: 8px; border-radius: 999px; background: var(--line);
  overflow: hidden; margin-left: auto; }
.connsum-bar i { display: block; height: 100%; background: var(--green); border-radius: 999px; transition: width .3s; }
.conngroup { margin-bottom: 22px; }
.conghead { display: flex; align-items: center; gap: 8px; color: var(--dim); font-size: .62rem;
  letter-spacing: .12em; margin: 0 0 10px; }
.congcount { color: var(--muted); }
.conncards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.conncard { background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--line2);
  border-radius: 16px; padding: 15px 16px; display: flex; flex-direction: column; }
.conncard.live { border-left-color: var(--green); }
.conncard.warn { border-left-color: var(--amber); }
.conncard-top { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.connpill { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .06em; padding: 2px 9px;
  border-radius: 999px; border: 1px solid var(--line2); color: var(--dim); text-transform: uppercase; }
.connpill.live { color: var(--green); border-color: var(--green); background: var(--green-soft); }
.connpill.warn { color: var(--amber-deep); border-color: var(--amber); background: var(--amber-soft); }
.connpill.sm { font-size: .56rem; padding: 1px 7px; }
.connscope { margin-left: auto; font-family: var(--font-mono); font-size: .56rem; letter-spacing: .06em;
  color: var(--dim); text-transform: uppercase; }
.connscope.fleet { color: var(--amber-deep); }
.conncard-name { font-size: .98rem; color: var(--text); margin: 2px 0; }
.conncard-hint { font-size: .8rem; color: var(--muted); line-height: 1.45; margin: 0 0 8px; }
.conncard-detail { font-size: .72rem; color: var(--dim); margin: 0 0 10px; word-break: break-word;
  font-family: var(--font-mono); }
.conncard-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.conncard-actions .btn { padding: 6px 12px; font-size: .8rem; }
/* per-network connect-status strip on the Social accounts card */
.connnets { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.connnet { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px;
  border-radius: 999px; border: 1px solid var(--line2); font-size: .72rem;
  color: var(--dim); background: var(--card2); }
.connnet svg { width: 13px; height: 13px; }
.connnet.on { border-color: var(--green); color: var(--green); background: var(--green-soft); }

/* ---------- Social connect hero (the request -> 72h link -> analytics cycle) ---------- */
.shero { background: linear-gradient(180deg, var(--card), var(--card2)); border: 1px solid var(--line);
  border-left: 3px solid var(--line2); border-radius: 16px; padding: 16px 18px; margin: 0 0 16px; box-shadow: var(--shadow); }
.shero.live { border-left-color: var(--green); }
.shero.warn { border-left-color: var(--amber); }
.shero.off { border-left-color: var(--line2); }
.shero-top { display: flex; align-items: flex-start; gap: 12px; }
.shero-ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px; background: var(--amber-soft);
  color: var(--amber-deep); display: flex; align-items: center; justify-content: center; }
.shero-ic .bic { width: 22px; height: 22px; margin: 0; }
.shero-txt { min-width: 0; flex: 1 1 auto; }
.shero-h { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.shero-h b { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: var(--text); }
.shero-exp { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .04em; color: var(--amber-deep); }
.shero-txt p { color: var(--muted); font-size: .86rem; margin: 4px 0 0; max-width: 64ch; }
.shero-cta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: 0 0 auto; }
.shsteps { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 13px; padding-top: 12px; border-top: 1px dashed var(--line2); }
.shstep { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: .6rem;
  letter-spacing: .05em; text-transform: uppercase; color: var(--dim); }
.shstep i { width: 8px; height: 8px; border-radius: 50%; background: var(--line2); flex: 0 0 auto; }
.shstep.on { color: var(--amber-deep); } .shstep.on i { background: var(--amber); }
.shstep.done { color: var(--green); } .shstep.done i { background: var(--green); }
.shadv { margin: 2px 0 10px; }
.shadv .hlink { font-size: .8rem; }
@media (max-width: 640px) {
  .shero-top { flex-wrap: wrap; }
  .shero-cta { align-items: stretch; width: 100%; }
  .shero-cta .btn { justify-content: center; }
}

/* branded connect handoff (Option A): the secure sign-in framed in GrowFleet -
   partner page opens in a popup, the result is confirmed and shown here. */
.cxhand-lead { display: flex; align-items: flex-start; gap: 12px; }
.cxhand-lead p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.55; }
.cxhand-lead p b { color: var(--text); }
.cxhand-ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px;
  background: var(--amber-soft); color: var(--amber-deep);
  display: flex; align-items: center; justify-content: center; }
.cxhand-ic .bic { width: 20px; height: 20px; margin: 0; }
.cxhand-ic.ok { background: var(--green-soft); color: var(--green); }
.cxhand-ic.warn { background: var(--amber-soft); color: var(--amber-deep); }
.cxhand-spin { flex: 0 0 auto; width: 26px; height: 26px; margin: 3px 6px 0; border-radius: 999px;
  border: 2.5px solid var(--amber); border-top-color: transparent; animation: bpspin .8s linear infinite; }
.cxhand-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 2px; }
.cxhand-chip { display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; color: var(--text);
  border: 1px solid var(--line2); border-radius: 999px; padding: 5px 12px; background: var(--card); }
.cxhand-gl { flex: 0 0 auto; display: inline-flex; }
.cxhand-gl svg { width: 15px; height: 15px; }
.cxhand-rows { display: grid; gap: 8px; margin: 14px 0 2px; }
.cxhand-row { display: flex; align-items: center; justify-content: space-between;
  border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; }
.cxhand-net { display: inline-flex; align-items: center; gap: 9px; font-size: .9rem; color: var(--text); }
.cxhand-net .cxhand-gl svg { width: 18px; height: 18px; }
.cxhand-ok { display: inline-flex; align-items: center; gap: 5px; color: var(--green); font-size: .82rem; }
.cxhand-ok .bic { width: 14px; height: 14px; margin: 0; }
.cxhand-cta { flex-wrap: wrap; margin-top: 16px; }
.cxhand-foot { margin: 14px 0 0; font-size: .77rem; color: var(--dim); }

/* WLI iframe connect: the partner's white-label connect surface embedded in a
   GrowFleet modal (SPEC_WLI_IFRAME_CONNECT). Desktop / non-Safari only - the
   popup handoff covers Safari/iOS and any failure. */
.npmodal.cxframe { width: min(900px, 96vw); }
.cxframe-lead { margin: 0 0 12px; color: var(--muted); font-size: .9rem; line-height: 1.5; }
.cxframe-stage { position: relative; border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; background: var(--card2); height: min(70vh, 620px); }
.cxframe-load { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: var(--card2); transition: opacity .25s ease; }
.cxframe-stage.ready .cxframe-load { opacity: 0; pointer-events: none; }
.cxframe-if { width: 100%; height: 100%; border: 0; display: block; }
.cxframe-cta { margin-top: 14px; align-items: center; gap: 14px; flex-wrap: wrap; }

/* managed-for-you line (fleet infra collapsed; no vendor names, no fields) */
.mgline { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line);
  border-left: 3px solid var(--green); border-radius: 12px; padding: 12px 15px; margin: 0 0 16px; }
.mgline.wait { border-left-color: var(--amber); }
.mgic { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; background: var(--green-soft); color: var(--green);
  display: flex; align-items: center; justify-content: center; }
.mgline.wait .mgic { background: var(--amber-soft); color: var(--amber-deep); }
.mgic .bic { width: 18px; height: 18px; margin: 0; }
.mgtxt b { display: block; font-size: .9rem; color: var(--text); }
.mgtxt span { font-size: .82rem; color: var(--muted); }

/* locked connection card + lock badge (plan gate -> upgrade) */
.conncard.locked { border-left-color: var(--amber); }
.connpill.lock { color: var(--amber-deep); border-color: var(--amber); background: var(--amber-soft);
  display: inline-flex; align-items: center; gap: 3px; }
.connpill.lock .bic { width: 11px; height: 11px; margin: 0; }
.connpill.sm.lock .bic { width: 10px; height: 10px; }

/* The one connection pop-up (openConn): description + fields + how-to + where-used.
   The `.cxguide` set is container-agnostic so the WhatsApp tab reuses it verbatim. */
.connhelp .chdesc { font-size: .92rem; color: var(--text); line-height: 1.55; margin: 0; }
.connhelp .cxlocknote { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: .82rem;
  color: var(--amber-deep); }
.connhelp .cxlocknote .bic { width: 14px; height: 14px; margin: 0; }
/* field rows */
.cxform { display: grid; gap: 3px; margin-top: 16px; }
.cxform .cxf-l { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-top: 11px; }
.cxform .cxf-l:first-child { margin-top: 0; }
.cxform .cxf-i { width: 100%; padding: 11px 13px; border-radius: 11px; border: 1px solid var(--line2);
  background: var(--card2); color: var(--text); font-size: .9rem;
  /* credentials are machine strings (IDs, keys, tokens, domains) - mono reads
     cleaner and makes a mistyped character obvious. Dropdowns stay in the UI font. */
  font-family: var(--font-mono); letter-spacing: .01em; }
.cxform select.cxf-i { font-family: var(--font-body); font-size: .95rem; letter-spacing: 0; }
.cxform .cxf-i:focus { outline: none; border-color: var(--amber); background: var(--card); }
.cxform .cxf-i::placeholder { color: var(--dim); opacity: .7; }
.cxform .cxf-h { font-size: .76rem; color: var(--dim); margin: 3px 0 0; }
/* SecretInput: a reveal toggle sits inside secret fields only (tokens, keys) */
.secwrap { position: relative; display: flex; }
.secwrap .cxf-i { padding-right: 44px; }
.secshow { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center; border: none; background: none;
  cursor: pointer; color: var(--dim); border-radius: 8px; }
.secshow:hover { color: var(--amber-deep); background: var(--amber-soft); }
.secshow:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.secshow .bic { width: 17px; height: 17px; margin: 0; }
/* browser autofill must keep the design's field colours, not a blue/yellow tint */
.cxf-i:-webkit-autofill, .cxf-i:-webkit-autofill:hover, .cxf-i:-webkit-autofill:focus,
.kvform .kv input:-webkit-autofill, .field input:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px var(--card2) inset;
  box-shadow: 0 0 0 1000px var(--card2) inset;
  caret-color: var(--text);
  transition: background-color 9999s ease-out 0s;
}
/* how-to + where-used blocks (shared with the WhatsApp form) */
.cxguide { margin-top: 18px; }
.cxguide-h { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .14em; color: var(--dim); margin-bottom: 9px; }
.cxsteps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.cxsteps li { font-size: .86rem; color: var(--muted); line-height: 1.5; }
.cxsteps li::marker { color: var(--amber-deep); font-family: var(--font-mono); font-weight: 600; }
.cxdoc { margin-top: 12px; }
.cxlinks { display: flex; flex-wrap: wrap; gap: 8px; }
.cxactions { margin-top: 18px; }
.connhelp a.btn { text-decoration: none; display: inline-flex; align-items: center; }
.cxgo, .cxlink { font-size: .8rem; }
a.cxlink { text-decoration: none; display: inline-flex; align-items: center; }
/* the WhatsApp connect form (tab) reuses the guide blocks; give them room */
/* WhatsApp connect: form + setup guide side by side on desktop, stacked on
   mobile - a modern connect-page layout built from the existing .cxform/.cxguide. */
.waconnect { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
@media (min-width: 900px) { .waconnect { grid-template-columns: minmax(0,1fr) minmax(0,340px); gap: 28px; } }
.waconnect .cxform { margin-top: 0; }
.waconnect .waguide-col { align-self: stretch; }
.waconnect .waguide-col .cxguide { margin-top: 0; }
@media (min-width: 900px) { .waconnect .waguide-col .cxguide { height: 100%; } }
/* WhatsApp panels lead with the house .phead like every other panel */
#tab-whatsapp .panel .phead .wadot { margin-left: 8px; }
#waStatus .cxguide { margin-top: 14px; padding: 14px 16px; background: var(--card2);
  border: 1px solid var(--line); border-radius: 12px; }

/* FIX (cascade): `.npmodal .hint` (network-preview caption) was narrowing +
   centering the intro in EVERY gfForm modal. Forms are full-width, left-aligned. */
.gfdlg .hint, .connhelp .hint { max-width: none; margin-left: 0; margin-right: 0; }
/* long connection titles (e.g. "Meta Ads (Facebook + Instagram)") must wrap, not
   force the modal wider than a phone (.pheadflex is white-space:nowrap by default). */
.connhelp .pheadflex { white-space: normal; }
.connhelp .cxtt { flex: 1 1 auto; min-width: 0; line-height: 1.3; }

/* Connections quick-glance popup (from the header) */
.connpop { align-items: flex-start; justify-content: flex-end; }
.connpop-panel { position: relative; z-index: 1; width: min(360px, 94vw); max-height: 82vh; overflow-y: auto;
  margin: 60px 20px 0 0; background: var(--card); border: 1px solid var(--line2); border-radius: 16px;
  box-shadow: var(--shadow); }
.connpop .phead { padding: 12px 16px; border-bottom: 1px solid var(--line); }
.connpop-body { padding: 12px 14px; }
.connpop-sum { margin-bottom: 10px; }
.connpop-grp { margin-bottom: 12px; }
.connpop-cat { display: flex; gap: 6px; color: var(--dim); font-size: .62rem; letter-spacing: .1em;
  text-transform: uppercase; margin-bottom: 4px; }
.connpop-cat span { color: var(--muted); }
.connpop-row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 5px 0; border-top: 1px dashed var(--line); }
.connpop-row:first-of-type { border-top: none; }
.connpop-name { font-size: .86rem; color: var(--text); }
.connpop-fleet { font-style: normal; font-family: var(--font-mono); font-size: .54rem;
  color: var(--amber-deep); letter-spacing: .05em; }
.connpop-foot { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.connpop-foot .btn { width: 100%; }
/* popover PRIMARY row (social publishing = the brand's real connection) + the
   managed-services line, so the popover leads with the true connection state */
.connpop-hero { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line);
  border-left: 3px solid var(--green); border-radius: 12px; margin-bottom: 10px; cursor: pointer; }
.connpop-hero.wait, .connpop-hero.off { border-left-color: var(--amber); }
.connpop-hero:hover { border-color: var(--line2); }
.connpop-hero .mgic { width: 28px; height: 28px; }
.connpop-hero.wait .mgic, .connpop-hero.off .mgic { background: var(--amber-soft); color: var(--amber-deep); }
.connpop-herotx { min-width: 0; }
.connpop-heroh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.connpop-heroh b { font-size: .9rem; color: var(--text); }
.connpop-herotx > span { display: block; font-size: .78rem; color: var(--muted); margin-top: 2px; line-height: 1.35; }
.connpop-managed { display: flex; align-items: center; gap: 8px; padding: 7px 11px; border: 1px dashed var(--line);
  border-radius: 10px; margin-bottom: 12px; }
.connpop-managed .cmic { flex: 0 0 auto; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; color: var(--green); }
.connpop-managed.wait .cmic { color: var(--amber-deep); }
.connpop-managed .cmic .bic { width: 16px; height: 16px; margin: 0; }
.connpop-mgtx { flex: 1; min-width: 0; font-size: .78rem; color: var(--muted); }
.connpop-optlead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 2px 0 8px;
  padding-top: 10px; border-top: 1px solid var(--line); color: var(--dim); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; }
.connpop-optlead span { color: var(--muted); letter-spacing: .04em; }
/* connected network glyphs in the primary hero (which accounts are live) */
.connpop-nets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.connpop-net { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 26px; height: 26px; border: 1px solid var(--line2); border-radius: 999px; color: var(--muted); background: var(--card); }
.connpop-net svg { width: 15px; height: 15px; }
/* each optional add-on row is a button that opens that connection's setup */
button.connpop-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  font: inherit; color: inherit; text-align: left; background: none; border: 0; border-top: 1px dashed var(--line);
  cursor: pointer; padding: 8px 6px; border-radius: 8px; }
button.connpop-row:first-of-type { border-top: none; }
button.connpop-row:hover { background: var(--amber-soft); }
button.connpop-row:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }
.connpop-act { display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto; white-space: nowrap;
  font-size: .72rem; font-weight: 600; }
.connpop-act.set, .connpop-act.warn, .connpop-act.lock { color: var(--amber-deep); }
.connpop-act.live { color: var(--green); }
.connpop-act .bic { width: 13px; height: 13px; }
.connpop-act .bic svg { width: 13px; height: 13px; }

/* ---------- Build-batch progress ---------- */
.bpmodal { position: relative; z-index: 1; width: min(420px, 92vw); background: var(--card);
  border: 1px solid var(--line); border-radius: 20px; padding: 26px 26px 22px; text-align: center;
  box-shadow: var(--shadow-lg); }
.bp-ico { width: 46px; height: 46px; margin: 0 auto 12px; border-radius: 999px; display: flex;
  align-items: center; justify-content: center; background: var(--amber-soft); color: var(--amber-deep);
  font-size: 1.35rem; font-weight: 700; }
.bp-ico.ok { background: var(--green-soft); color: var(--green); }
.bp-ico.warn { background: var(--red-soft); color: var(--red); }
.bp-spin { width: 22px; height: 22px; border-radius: 999px; border: 2.5px solid var(--amber);
  border-top-color: transparent; animation: bpspin .8s linear infinite; }
@keyframes bpspin { to { transform: rotate(360deg); } }
.bp-title { display: block; font-size: 1.1rem; color: var(--text); margin-bottom: 4px; }
.bp-sub { color: var(--muted); font-size: .88rem; margin: 0 0 16px; min-height: 2.4em; line-height: 1.4; }
.gfpb { position: relative; height: 10px; border-radius: 999px; background: var(--line); overflow: hidden; }
.gfpb i { display: block; height: 100%; width: 6%; border-radius: 999px;
  background: linear-gradient(90deg, var(--amber), var(--amber-bright)); transition: width .45s ease; }
.gfpb.indet::after { content: ""; position: absolute; inset: 0; border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255,173,51,.55), transparent);
  transform: translateX(-100%); animation: bpshim 1.15s ease-in-out infinite; }
@keyframes bpshim { to { transform: translateX(100%); } }
.bp-actions { display: flex; gap: 10px; justify-content: center; margin-top: 18px; }
.bp-actions .btn { padding: 8px 16px; font-size: .88rem; }

/* ---------- per-network caption customisation ---------- */
.opt { font-weight: 400; color: var(--dim); font-size: .7rem; text-transform: none; letter-spacing: 0; }
.pnwrap { border: 1px solid var(--line); border-radius: 14px; margin: 4px 0 8px; background: var(--card2); overflow: hidden; }
.pnwrap.hascustom { border-color: var(--amber); }
.pnhead { width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: none;
  border: none; cursor: pointer; text-align: left; font-family: var(--font-body); }
.pnhead-t { font-weight: 600; color: var(--text); font-size: .92rem; }
.pnstate { margin-left: auto; color: var(--dim); font-size: .72rem; }
.pnwrap.hascustom .pnstate { color: var(--amber-deep); }
.pnchev { color: var(--dim); transition: transform .18s; font-size: .8rem; }
.pnwrap.open .pnchev { transform: rotate(90deg); }
/* keep the summary row on ONE line: only the long title shrinks/ellipsizes;
   the ? help dot, state label and chevron stay put and never wrap off-line */
.pnhead-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pnhead .tipdot, .pnhead .pnstate, .pnhead .pnchev { flex: none; }
.pnhead .pnstate, .pnhead .pnchev { white-space: nowrap; }
.pnbody { padding: 4px 14px 14px; border-top: 1px solid var(--line); }
.pnhint { color: var(--muted); font-size: .82rem; margin: 10px 0 12px; line-height: 1.45; }
.pnhint b { color: var(--text); }
.pnactions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.pncard { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px;
  background: var(--card); transition: border-color .15s; }
.pncard.custom { border-color: var(--amber); box-shadow: inset 3px 0 0 var(--amber); }
.pncard-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.pnprev { font-size: .7rem; }
.pncard-head b { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; color: var(--text); }
.pnsame { font-size: .64rem; color: var(--dim); font-family: var(--font-mono); }
.pncount { font-size: .66rem; color: var(--dim); font-family: var(--font-mono); }
.pncount.warn { color: var(--amber-deep); }
.pncount.bad { color: var(--red); font-weight: 700; }
.pnreset { font-size: .7rem; }
.pntext, .pnfc { width: 100%; min-height: 62px; resize: vertical; border: 1px solid var(--line2);
  border-radius: 9px; padding: 8px 10px; font-family: var(--font-body); font-size: .88rem;
  color: var(--text); background: var(--card2); box-sizing: border-box; }
.pnfc { min-height: 42px; margin-top: 8px; }
.pntext:focus, .pnfc:focus { outline: none; border-color: var(--amber); }
.pnfc-toggle { margin-top: 6px; font-size: .72rem; display: inline-block; }
.pnnote { color: var(--dim); font-size: .66rem; margin: 6px 0 0; }

/* ---------- different media per network (parallels the caption .pncard) ---------- */
.pmcard { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px;
  background: var(--card); transition: border-color .15s; display: flex; flex-direction: column; gap: 8px; }
.pmcard.custom { border-color: var(--amber); box-shadow: inset 3px 0 0 var(--amber); }
.pmcard-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pmcard-head b { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; color: var(--text); }
.pmstat { font-size: .64rem; color: var(--dim); font-family: var(--font-mono); }
.pmstat.on { color: var(--amber-deep); }
.pmreset { font-size: .7rem; }
/* the per-network media strip mirrors the main post strip (.mth), sized for the card.
   the x removes just from THIS network, so it is always shown here (not hover-gated) -
   removing is a primary action, which is what customising a network is about. */
.pmstrip { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.pmstrip .mth { width: 52px; height: 52px; border-radius: 8px; }
.pmstrip .mth .ord { top: 2px; left: 3px; font-size: .52rem; padding: 0 4px; }
.pmstrip .mth .mthx { width: 18px; height: 18px; font-size: 12px; top: -7px; right: -7px; opacity: 1; }
.pmadd { align-self: center; min-height: 52px; padding: 0 12px; border-style: dashed; color: var(--dim); }
.pmadd:hover { color: var(--text); border-color: var(--amber); }
.pmreorder { flex-basis: 100%; margin-top: 2px; }
.pmnomedia { font-size: .66rem; color: var(--dim); line-height: 1.4; }
/* compact (collapsed) card: one line - name + tiny preview + "customise". Only a
   network that differs from your main media opens into the full editable strip. */
.pmcard.open { border-color: var(--line); }
.pmcompact { flex-wrap: nowrap; }
.pmcompact .pmsame { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pmcompact b, .pmcompact .pmmini, .pmcompact .pmcustomise { flex: none; }
.pmministrip { display: flex; align-items: center; gap: 5px; min-width: 0; }
.pmmini { width: 26px; height: 26px; border-radius: 5px; background: var(--card2) center/cover;
  border: 1px solid var(--line2); flex: none; position: relative; }
.pmmini.vid::after { content: "\25B6"; position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; font-size: 9px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.pmsame { font-size: .64rem; color: var(--dim); font-family: var(--font-mono); }
.pmmore { align-self: center; background: var(--card2); color: var(--dim); font-family: var(--font-mono);
  font-size: .56rem; line-height: 1; padding: 3px 6px; border-radius: 999px; border: 1px solid var(--line2); }
.pmcustomise { flex: none; }

/* ---------- growth tools (agent / plugs / links / sets) ---------- */
#tab-growth .panel { margin-bottom: 18px; }
.gform { display: grid; gap: 10px; margin-bottom: 14px; }
.gform input, .gform textarea, .gform select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line2); border-radius: 10px;
  background: var(--card2); color: var(--text); font: 500 .9rem var(--font-body); }
.gform textarea { resize: vertical; }
.gform input:focus, .gform textarea:focus, .gform select:focus {
  outline: none; border-color: var(--amber); }
.glab { color: var(--muted); font-size: .7rem; letter-spacing: .04em; margin-top: 2px; }
.gnum { max-width: 120px; }
#agResult .aglabel { display: block; color: var(--muted); font-size: .7rem; margin: 12px 0 4px; }
#agResult textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line2);
  border-radius: 10px; background: var(--card2); color: var(--text); font: 500 .9rem var(--font-body); }
.agnets { margin: 6px 0; }
.grow { display: flex; gap: 12px; align-items: center; border: 1px solid var(--line);
  border-radius: 12px; background: var(--card); padding: 12px 14px; margin-bottom: 10px; }
.grow.off { opacity: .6; }
.growmain { flex: 1; min-width: 0; font-size: .9rem; }
.growmain b { word-break: break-word; }
.growsub { display: block; color: var(--muted); font-size: .78rem; margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grow .actions { margin: 0; flex-shrink: 0; }
.gpad { padding: 10px 2px; }
.gfireh { margin-top: 14px; }
.gfire { color: var(--muted); font-size: .76rem; padding: 5px 2px; border-bottom: 1px solid var(--line); }
.gfunnel { display: grid; gap: 6px; }
.gfrow { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr; gap: 8px;
  align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card2); font-size: .82rem; }
@media (max-width: 720px) { .gfrow { grid-template-columns: 1fr 1fr; } }
/* composer link-shortening toggle (feature E, in the post editor) */
.ppbody .dshorten { display: flex; margin: 2px 0 12px; }
/* first-comment quick actions (+ use hashtags / generate with AI) */
.fcactions { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }

/* ---------- per-network connection cards (Connections tab) ---------- */
.cxwrap { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 14px; margin: 6px 0 22px; }
.cxcard { border: 1px solid var(--line2); border-radius: 14px; background: var(--card);
  padding: 14px 15px 12px; display: flex; flex-direction: column; min-width: 0; }
.cxcard.cxoff { background: var(--card2); }
.cxtop { display: flex; align-items: center; gap: 10px; }
.cxglyph { flex: 0 0 auto; display: inline-flex; }
.cxglyph svg { width: 26px; height: 26px; }
.cxname { min-width: 0; flex: 1 1 auto; line-height: 1.15; }
.cxname b { display: block; font-size: .92rem; color: var(--text); }
.cxname span { font-size: .72rem; color: var(--dim); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; display: block; }
.cxpill { flex: 0 0 auto; font-size: .6rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--green); border: 1px solid var(--green); border-radius: 999px; padding: 2px 8px; }
.cxhero { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px;
  margin: 12px 0 4px; }
.cxheronum { min-width: 0; }
.cxbig { font-size: 1.7rem; line-height: 1; color: var(--text); }
.cxlbl { font-size: .68rem; letter-spacing: .05em; color: var(--dim); margin-left: 4px; }
.cxdelta { display: inline-block; font-size: .72rem; margin-left: 6px; font-weight: 600; }
.cxdelta.up { color: var(--green); }
.cxdelta.dn { color: var(--red); }
.cxspark { width: 116px; height: 32px; flex: 0 0 auto; opacity: .9; }
.cxmetrics { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; }
.cxchip { font-size: .72rem; color: var(--text); background: var(--card2);
  border: 1px solid var(--line2); border-radius: 8px; padding: 4px 8px; }
.cxchip i { color: var(--dim); font-style: normal; margin-right: 5px; font-size: .66rem;
  text-transform: uppercase; letter-spacing: .04em; }
.cxoffmsg { font-size: .74rem; color: var(--dim); margin: 10px 0 12px; }
.cxfoot { font-size: .64rem; letter-spacing: .03em; color: var(--dim); margin: 8px 0 0; }
.cxit-tag { display: inline-block; font-size: .58rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--amber-deep); border: 1px solid var(--line2); border-radius: 5px; padding: 0 5px;
  margin-right: 6px; vertical-align: middle; }
.cxcard.cxoff .btn { align-self: flex-start; }
.cxmore { margin-top: 10px; align-self: flex-start; border: none; background: none; cursor: pointer;
  color: var(--amber-deep); font-size: .74rem; padding: 4px 0; }
.cxmore::after { content: " ▾"; }
.cxmore.open::after { content: " ▴"; }
.cxcontent { margin-top: 8px; display: flex; flex-direction: column; gap: 6px;
  max-height: 260px; overflow-y: auto; }
.cxcontent[hidden] { display: none; }
.cxitem { display: flex; align-items: center; gap: 9px; padding: 6px; border: 1px solid var(--line2);
  border-radius: 9px; background: var(--card2); }
.cxit-th { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 7px; object-fit: cover;
  background: var(--line2); }
.cxit-noimg { display: inline-block; }
.cxit-b { min-width: 0; flex: 1 1 auto; }
.cxit-t { font-size: .76rem; color: var(--text); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.cxit-m { display: flex; flex-wrap: wrap; gap: 8px; font-size: .68rem; color: var(--dim); margin-top: 2px; }
.cxit-m b { color: var(--text); }
.cxit-w { flex: 0 0 auto; font-size: .64rem; color: var(--dim); }
.cxempty { font-size: .74rem; color: var(--dim); padding: 6px 2px; }
@media (max-width: 560px) {
  .cxwrap { grid-template-columns: 1fr; gap: 12px; }
  .cxbig { font-size: 1.5rem; }
}

/* ---- Photo Collage editor (Creative Studio) ---- */
.collrow { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
/* Layout picker: readable, comfortably-sized chips that still sit on one desktop
   line (full names remain in each chip's tooltip); wraps on narrow/mobile. */
#collTemplates { gap: 6px; }
#collTemplates .netchip { padding: 6px 10px; letter-spacing: 0; font-size: .64rem; white-space: nowrap; }
#collTemplates .netchip .bic { margin-right: 5px; }
.collstage { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; margin: 6px 0 12px; }
.collpvwrap { position: relative; flex: 0 0 auto; background: #0d1424; border-radius: 10px; padding: 10px; line-height: 0; }
.collcanvas { max-width: 100%; height: auto; border-radius: 6px; touch-action: none; cursor: grab; box-shadow: 0 4px 18px rgba(0,0,0,.28); }
.collcanvas:active { cursor: grabbing; }
.collpvhint { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; color: #9aa6bd; font-size: 13px; pointer-events: none; }
.collslots { flex: 1 1 220px; display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 10px; align-content: flex-start; }
.collslot { border: 1px solid var(--line, #2a3550); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 6px; background: rgba(127,140,170,.06); }
.collslot.sel { border-color: #f29718; box-shadow: 0 0 0 1px #f29718 inset; }
.collslot-head { font: 600 10px/1 ui-monospace, monospace; letter-spacing: .08em; color: var(--muted); }
.collslot-pick { aspect-ratio: 1/1; border: 1px dashed var(--line2, #2a3550); border-radius: 8px; overflow: hidden; background: var(--card2, #0e1524); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.collslot-pick img { width: 100%; height: 100%; object-fit: cover; }
.collslot-add { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--muted); font-size: 12px; }
.collslot-label { font: 600 11px/1.4 inherit; text-align: center; padding: 6px; border-radius: 6px; border: 1px solid var(--line, #2a3550); background: var(--card2, #0e1524); color: inherit; }
.collslot-label:focus { outline: none; border-color: var(--amber, #f29718); background: var(--card, #fff); }
.collslot-zoom { width: 100%; }
.collopts { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 16px 24px; margin: 12px 0 4px; align-items: start; }
.collopt-full { grid-column: 1 / -1; }
.collbrandrow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.collsigbtns { display: flex; gap: 8px; flex-wrap: wrap; }
.collsigbtns .btn { padding: 8px 12px; font-size: 12.5px; }
.collmultionly { display: none; }
.collopt label { display: block; font: 600 10px/1 ui-monospace, monospace; letter-spacing: .08em; color: var(--muted); margin-bottom: 6px; }
.collopt .collrow { margin: 0; }
/* consent row - the broad `.studiocard .stform label` (tiny mono, block) captures
   this label, so override it with higher specificity: a normal left-aligned row */
.studiocard .stform label.collconsent { display: flex; align-items: flex-start; gap: 9px; margin: 12px 0 2px;
  cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 500; line-height: 1.45;
  letter-spacing: 0; text-transform: none; color: var(--muted); }
.studiocard .stform label.collconsent input { width: 17px; height: 17px; flex: 0 0 auto; margin: 1px 0 0; accent-color: var(--amber); }
.collcheck { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border: 1px solid var(--line, #2a3550); border-radius: 8px; font-size: 12.5px; cursor: pointer; background: rgba(127,140,170,.05); }
.collcheck.on { border-color: #f29718; background: rgba(242,151,24,.1); }
.collcheck input { width: 15px; height: 15px; flex: 0 0 auto; accent-color: #f29718; margin: 0; }
/* titled-photo size checkboxes: wrap into a tidy row/grid on any width */
.stovsizes { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 6px; }
.stovsizes .collcheck { flex: 1 1 132px; }
.collmini { font-size: 11.5px; color: var(--muted); margin-top: 6px; }
.collembed-h { font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
.collembed-code { width: 100%; font: 11px/1.4 ui-monospace, monospace; padding: 8px; border-radius: 8px; border: 1px solid var(--line, #2a3550); background: #0d1424; color: #cdd6e6; resize: vertical; margin-bottom: 8px; }
.collcanvas.grabbing { cursor: grabbing; }
.collcrophint { line-height: 1.3; margin-top: 9px; text-align: center; font-size: 11px; color: var(--navy-muted); } /* sits on the dark canvas - needs a light muted */
/* per-slot header + remove, filled state */
.collslot-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.collslot.has .collslot-pick { border-style: solid; }
.collslot-x { border: 0; background: transparent; color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer; padding: 0 3px; border-radius: 4px; }
.collslot-x:hover { color: #ff6b6b; background: rgba(255,107,107,.12); }

/* Split-screen caption-style swatches: each chip is a LIVE preview of the look
   (mirrors core captions._render_strip), so you pick by seeing, not by name. */
#splitLooks { display: flex; flex-wrap: wrap; gap: 8px; }
.capsw { border: 1px solid var(--line, #2a3550); border-radius: 10px; padding: 9px 10px;
  background: var(--card2, #0e1524); cursor: pointer; display: flex; align-items: center;
  justify-content: center; min-width: 92px; min-height: 46px; overflow: hidden;
  transition: border-color .12s, box-shadow .12s; }
.capsw:hover { border-color: var(--amber, #e08900); }
.capsw.on { border-color: var(--amber, #e08900); box-shadow: 0 0 0 1px var(--amber, #e08900) inset; }
.capsw-in { font: 800 13px/1 system-ui, -apple-system, Segoe UI, sans-serif; white-space: nowrap; }
.capsw-strip .capsw-in { background: rgba(7,11,20,.85); color: #fff; padding: 5px 10px 8px;
  border-radius: 6px; border-bottom: 3px solid var(--amber, #e08900); }
.capsw-boxed .capsw-in { background: var(--amber, #e08900); color: #1a1206; padding: 5px 10px; border-radius: 5px; }
.capsw-band .capsw-in { background: rgba(7,11,20,.9); color: #fff; padding: 5px 10px; border-left: 4px solid var(--amber, #e08900); }
.capsw-bold .capsw-in { background: rgba(7,11,20,.88); color: #fff; padding: 5px 10px; border-radius: 8px;
  font-size: 15px; text-shadow: 0 1px 1px rgba(0,0,0,.5); }
.capsw-outline .capsw-in { color: #fff; -webkit-text-stroke: 2px #000; paint-order: stroke fill; }
.capsw-impact .capsw-in { color: #fff; font: 900 15px/1 Oswald, Anton, Impact, system-ui, sans-serif;
  text-transform: uppercase; letter-spacing: .02em; -webkit-text-stroke: 2px #000; paint-order: stroke fill; }
.capsw-gradient .capsw-in { background: linear-gradient(180deg, var(--amber, #e08900), #7a4a00);
  color: #fff; padding: 5px 10px; border-radius: 5px; text-shadow: 0 1px 1px rgba(0,0,0,.35); }
.capsw-neon .capsw-in { color: #fff; text-shadow: 0 0 5px var(--amber, #e08900), 0 0 11px var(--amber, #e08900); }
.capsw-highlight .capsw-in { background: var(--amber, #e08900); color: #1a1206; padding: 3px 6px; border-radius: 4px; }

/* Split-screen live preview player + timeline/sound mixer (plays in the pane). */
.splitprev-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; margin: 8px 0 12px; }
.splitprev { position: relative; width: 184px; aspect-ratio: 9 / 16; flex: 0 0 auto;
  border-radius: 12px; overflow: hidden; background: #0b0f18; border: 1px solid var(--line, #2a3550); }
/* N-cell preview: flexbox strips - a column of rows (vertical) or a row of columns
   (horizontal); each cell flexes equally, seams are borders between adjacent cells. */
.sp-cells { position: absolute; inset: 0; display: flex; }
.sp-cells.vertical { flex-direction: column; }
.sp-cells.horizontal { flex-direction: row; }
.sp-cell { position: relative; flex: 1 1 0; min-width: 0; min-height: 0; overflow: hidden; background: #0b0f18; }
.sp-cell img, .sp-cell video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sp-cell.contain img, .sp-cell.contain video { object-fit: contain; }
.sp-cells.divon.vertical .sp-cell + .sp-cell { border-top: 2px solid rgba(255,255,255,.85); }
.sp-cells.divon.horizontal .sp-cell + .sp-cell { border-left: 2px solid rgba(255,255,255,.85); }
/* split: cell-count + orientation setup row, per-cell caption-position stack, slots */
/* split setup row: CELLS + LAYOUT sit together, not spread by the auto-fit grid */
.collopts.spsetup { display: flex; flex-wrap: wrap; gap: 14px 36px; margin: 2px 0 8px; }
/* split options: a deliberate 2-column block (media/timing left, captions right) so
   the heterogeneous controls no longer scatter across the generic auto-fit grid */
.collopts.spopts { grid-template-columns: 1fr 1fr; gap: 18px 34px; }
.spcol { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
@media (max-width: 680px) { .collopts.spopts { grid-template-columns: 1fr; } }
/* ULTRA SYNC: the premium AI-director panel beside the media cells */
/* Split media row: the cells stay a HORIZONTAL row (auto width); the Ultra panel
   fills the remaining space to their right (the empty area from the screenshot). */
.splitmediarow { display: grid; grid-template-columns: auto minmax(320px, 1fr); gap: 20px; align-items: start; margin: 6px 0 10px; }
.splitmediarow .splitslots { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; max-width: 660px; }
.splitmediarow .splitslots .collslot { flex: 0 0 148px; }
.ultrapanel { border: 1px solid var(--amber, #e08900); border-radius: 14px; min-width: 0; margin: 0;
  background: linear-gradient(155deg, rgba(224,137,0,.10), rgba(127,140,170,.05) 62%); }
/* the collapsed CTA bar = the fold head; expands to the full panel body */
.ultrapanel .stfold-head { padding: 13px 16px; gap: 10px; align-items: center; border-radius: 14px; }
.ultrahead { justify-content: flex-start; }
.ultrasum { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--muted); font-size: 12.5px;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ultrapanel .stfold-chev { color: var(--amber-deep, #b46a00); }
.ultrabody { padding: 0 16px 14px; display: flex; flex-direction: column; gap: 9px; }
.ultramark { font: 800 16px/1 "Bricolage Grotesque", var(--font, system-ui), sans-serif; letter-spacing: .01em; }
.ultramark span { color: var(--amber, #e08900); margin-left: 3px; }
.ultradesc { font-size: 12px; line-height: 1.5; color: var(--muted); margin: 0; }
.ultradesc b { color: var(--text, inherit); }
.ultralblrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ultralbl { font: 600 10px/1 ui-monospace, monospace; letter-spacing: .08em; color: var(--muted); }
.ultrawrite { padding: 3px 11px; font-size: 12px; }
.ultrapanel textarea { width: 100%; box-sizing: border-box; min-height: 62px; resize: vertical; }
.ultractrls { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 18px; margin-top: 2px; }
.ultrafld { font: 600 10px/1 ui-monospace, monospace; letter-spacing: .08em; color: var(--muted); display: flex; align-items: center; gap: 7px; }
.ultrafld select { font: inherit; font-size: 12px; padding: 4px 6px; }
.ultrafoot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 5px; }
@media (max-width: 760px) { .splitmediarow { grid-template-columns: 1fr; } }
.sp-cappos { display: flex; flex-direction: column; gap: 6px; }
.sp-cappos .sp-posrow { margin: 0; }
.splitslots { grid-template-columns: repeat(auto-fill, minmax(128px, 148px)); margin: 4px 0 6px; }
/* per-slot tools (reorder / clear), preview cell badges, layout diagrams, mixer buttons */
.splitslot .collslot-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.splitslot-tools { display: inline-flex; gap: 2px; }
.spslot-btn { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  padding: 0; border: 1px solid var(--line, #2a3550); border-radius: 5px; background: var(--card2, #0e1524);
  color: var(--muted); cursor: pointer; }
.spslot-btn:hover { border-color: var(--amber, #e08900); color: inherit; }
.spslot-btn .bic { display: inline-flex; } .spslot-btn .bic svg { width: 13px; height: 13px; }
.spslot-x:hover { border-color: #d05a5a; }
.sp-cellno { position: absolute; top: 4px; left: 4px; z-index: 4; min-width: 15px; height: 15px; padding: 0 3px;
  display: flex; align-items: center; justify-content: center; border-radius: 4px;
  font: 700 10px/1 ui-monospace, monospace; color: #fff; background: rgba(7,11,20,.62); pointer-events: none; }
.splayopt { display: inline-flex; align-items: center; gap: 6px; }
.splayico { width: 15px; height: 15px; flex: 0 0 auto; }
.sp-mixbtns { display: flex; flex-wrap: wrap; gap: 8px; }
.btn.gfdim { opacity: .72; }
@media (max-width: 560px) {
  .splitprev { width: 100%; max-width: 260px; }
  .splitprev-side { flex-basis: 100%; min-width: 0; }
  .sp-ctl, .sp-fade { flex-wrap: wrap; }
}
.sp-cap { position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%); z-index: 4;
  max-width: 92%; text-align: center; pointer-events: none; }
.sp-cap .capsw-in { font-size: 9px; line-height: 1.15; padding: 2px 5px; white-space: normal; }
.sp-cap.pos-top { top: 6%; bottom: auto; }
.sp-cap.pos-middle { top: 50%; bottom: auto; transform: translate(-50%, -50%); }
.sp-cap.pos-bottom { top: auto; bottom: 8%; }
.sp-posrow { align-items: center; }
.sp-poslab { font: 600 10px/1 ui-monospace, monospace; letter-spacing: .06em; color: var(--muted); flex: 0 0 64px; }
.sp-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  text-align: center; color: var(--muted); font-size: 11px; padding: 12px; z-index: 5; }
.splitprev-side { flex: 1 1 240px; min-width: 220px; display: flex; flex-direction: column; gap: 9px; }
.sp-tx { display: flex; align-items: center; gap: 12px; }
.sp-time { color: var(--muted); font-size: 12px; }
.sp-seek, .sp-slider, .sp-mixrow input[type="range"] { width: 100%; accent-color: var(--amber, #e08900); }
.sp-durlab { display: flex; justify-content: space-between; font: 600 10px/1 ui-monospace, monospace;
  letter-spacing: .08em; color: var(--muted); }
.sp-mix { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.sp-mixtip { font-size: 11px; line-height: 1.4; color: var(--muted); }
.sp-mixtip b { color: var(--text, inherit); }
.sp-xfade { align-self: flex-start; padding: 4px 12px; font-size: 12px; }
.sp-mixrow { border: 1px solid var(--line, #2a3550); border-radius: 9px; padding: 6px 9px;
  display: flex; flex-direction: column; gap: 4px; background: rgba(127,140,170,.05); }
.sp-mixh { display: flex; align-items: center; justify-content: space-between;
  font: 700 10px/1 ui-monospace, monospace; letter-spacing: .08em; color: var(--muted); margin-bottom: 1px; }
.sp-ctl { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--muted); }
.sp-ctl > label { flex: 0 0 36px; cursor: help; }
.sp-ctl > input[type="range"] { flex: 1; }
.sp-ctl .sp-v { flex: 0 0 38px; text-align: right; font-variant-numeric: tabular-nums; }
.sp-fade { gap: 10px; }
.sp-fg { display: flex; align-items: center; gap: 4px; flex: 1; font-size: 10px; }
.sp-fg input[type="range"] { flex: 1; min-width: 30px; }
.sp-fg b { flex: 0 0 30px; text-align: right; font-weight: 600; color: var(--muted); }
.sp-mixrow .netchip { padding: 2px 9px; font-size: 11px; }
.sp-note { font-size: 11px; color: var(--muted); font-style: italic; }
/* multi before/after groups */
.collgrouphd { grid-column: 1 / -1; font: 600 10px/1 ui-monospace, monospace; letter-spacing: .08em; color: var(--muted); margin: 4px 0 -2px; display: flex; gap: 8px; align-items: baseline; }
.collgrouphd span { font-weight: 500; color: #6b7690; letter-spacing: 0; }
.collgroup { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(102px, 1fr)); gap: 8px; }
/* reveal transition picker with live motion previews */
.colltrgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; margin: 2px 0 10px; }
.colltr { position: relative; border: 1px solid var(--line, #2a3550); border-radius: 9px; padding: 5px; background: rgba(127,140,170,.05); cursor: pointer; display: flex; flex-direction: column; gap: 5px; }
.colltr:hover { border-color: var(--line2, #40506e); }
.colltr.on { border-color: #f29718; box-shadow: 0 0 0 1px #f29718 inset; }
.colltr-l { font-size: 11px; color: var(--muted); text-align: center; }
.colltr.on .colltr-l { color: var(--amber-deep); } /* was bright #f29718 = 2.2:1 on the light tile */
.colltr-prev { position: relative; display: block; width: 100%; height: 42px; border-radius: 6px; overflow: hidden; background: #e7ebf3; }
.colltr-b, .colltr-a { position: absolute; inset: 0; }
.colltr-b { background: repeating-linear-gradient(45deg, #c8cfdc, #c8cfdc 6px, #d6dce7 6px, #d6dce7 12px); }
/* REST: every tile reads as a clean before|after split (stripes | amber) */
.colltr-a { background: linear-gradient(135deg, #f29718, #f7b85a); clip-path: inset(0 0 0 50%); }
.colltr-prev::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; margin-left: -.5px; background: rgba(255,255,255,.7); z-index: 2; transition: opacity .15s; }
.colltr::after { content: "\25B6"; position: absolute; top: 6px; right: 7px; font-size: 7px; color: #fff; background: rgba(10,15,28,.5); border-radius: 50%; width: 15px; height: 15px; line-height: 15px; text-align: center; pointer-events: none; z-index: 3; transition: opacity .15s; }
/* HOVER / SELECTED: play the real motion; seam + play-cue fade away */
.colltr:hover .colltr-a, .colltr.on .colltr-a { clip-path: none; }
.colltr:hover .colltr-prev::before, .colltr.on .colltr-prev::before, .colltr:hover::after, .colltr.on::after { opacity: 0; }
.colltr:hover .colltr-wiperight .colltr-a, .colltr.on .colltr-wiperight .colltr-a { animation: trWipeR 2.6s ease-in-out infinite; }
.colltr:hover .colltr-revealright .colltr-a, .colltr.on .colltr-revealright .colltr-a,
.colltr:hover .colltr-coverright .colltr-a, .colltr.on .colltr-coverright .colltr-a,
.colltr:hover .colltr-slideright .colltr-a, .colltr.on .colltr-slideright .colltr-a { animation: trRevealR 2.6s ease-in-out infinite; }
.colltr:hover .colltr-slideright .colltr-b, .colltr.on .colltr-slideright .colltr-b { animation: trSlideOutR 2.6s ease-in-out infinite; }
.colltr:hover .colltr-smoothright .colltr-a, .colltr.on .colltr-smoothright .colltr-a { animation: trSmoothR 2.6s ease-in-out infinite; }
.colltr:hover .colltr-wipedown .colltr-a, .colltr.on .colltr-wipedown .colltr-a { animation: trWipeD 2.6s ease-in-out infinite; }
.colltr:hover .colltr-circleopen .colltr-a, .colltr.on .colltr-circleopen .colltr-a { animation: trCircle 2.6s ease-in-out infinite; }
.colltr:hover .colltr-rectcrop .colltr-a, .colltr.on .colltr-rectcrop .colltr-a { animation: trRect 2.6s ease-in-out infinite; }
.colltr:hover .colltr-pixelize .colltr-a, .colltr.on .colltr-pixelize .colltr-a { animation: trFade 2.6s steps(6, end) infinite; }
.colltr:hover .colltr-dissolve .colltr-a, .colltr.on .colltr-dissolve .colltr-a { animation: trFade 2.6s ease-in-out infinite; }
@keyframes trWipeR { 0%, 100% { clip-path: inset(0 100% 0 0); } 40%, 82% { clip-path: inset(0 0 0 0); } }
@keyframes trRevealR { 0%, 100% { transform: translateX(-100%); } 40%, 82% { transform: translateX(0); } }
@keyframes trSlideOutR { 0%, 100% { transform: translateX(0); } 40%, 82% { transform: translateX(100%); } }
@keyframes trSmoothR { 0%, 100% { clip-path: inset(0 100% 0 0); filter: blur(2px); } 40%, 82% { clip-path: inset(0 0 0 0); filter: blur(0); } }
@keyframes trWipeD { 0%, 100% { clip-path: inset(0 0 100% 0); } 40%, 82% { clip-path: inset(0 0 0 0); } }
@keyframes trCircle { 0%, 100% { clip-path: circle(0% at 50% 50%); } 40%, 82% { clip-path: circle(75% at 50% 50%); } }
@keyframes trRect { 0%, 100% { clip-path: inset(50%); } 40%, 82% { clip-path: inset(0); } }
@keyframes trFade { 0%, 100% { opacity: 0; } 40%, 82% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .colltr-a, .colltr-b { animation: none !important; } }
.colldur { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.colldur-lbl { font: 600 10px/1 ui-monospace, monospace; letter-spacing: .08em; color: var(--muted); }
#collGo.ready { box-shadow: 0 0 0 2px rgba(242,151,24,.28); }
.collrevrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 10px 0 4px; }
.collrevrow .collmini { margin: 0; }
/* Collage output mode (still image vs reveal video): the MAKE toggle shows only
   the active mode's options + primary button. Elements are tagged collmode-image
   / collmode-reveal; the collage .stform carries collmode-is-image /
   collmode-is-reveal. !important beats the inline display the before/after
   (.collbaonly) layout toggle sets, so the mode gate always wins. */
.collmode-is-image .collmode-reveal { display: none !important; }
.collmode-is-reveal .collmode-image { display: none !important; }
.actions .collrevnote-inline { align-self: center; margin: 0; }
/* compact visual corner-position picker (mini frame + 5 dots) */
.poswrap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.posdefault { font: 600 12px/1 inherit; padding: 8px 11px; border: 1px solid var(--line, #2a3550); border-radius: 999px; background: rgba(127,140,170,.05); color: inherit; cursor: pointer; }
.posdefault.on { border-color: #f29718; background: rgba(242,151,24,.12); color: var(--amber-deep, #f29718); }
.cornerpick { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); grid-template-areas: "tl . tr" ". c ." "bl . br"; width: 74px; height: 56px; border: 1.5px solid var(--line2, #40506e); border-radius: 8px; padding: 6px; gap: 2px; background: rgba(127,140,170,.06); flex: 0 0 auto; }
.cp-cell { border: 0; background: transparent; padding: 0; cursor: pointer; position: relative; }
.cp-tl { grid-area: tl; } .cp-tr { grid-area: tr; } .cp-c { grid-area: c; } .cp-bl { grid-area: bl; } .cp-br { grid-area: br; }
.cp-cell i { position: absolute; inset: 22%; border-radius: 50%; background: var(--mut, #9aa6bd); opacity: .45; transition: opacity .12s, background .12s, box-shadow .12s; }
.cp-cell:hover i { opacity: .85; }
.cp-cell.on i { background: #f29718; opacity: 1; box-shadow: 0 0 0 3px rgba(242,151,24,.25); }
@media (max-width: 640px) { .collpvwrap { width: 100%; text-align: center; } .colltrgrid { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); } }

/* --- Per-network format + accessibility (SPEC_NETWORK_FORMATS.md) --- */
.fmtwrap { margin: 2px 0 12px; }
.fmtrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 5px 0; }
.fmtnet { font: 600 10px/1 var(--font-mono, ui-monospace, monospace); letter-spacing: .08em; color: var(--muted, #8b97b0); min-width: 76px; }
.fmtsegs { display: inline-flex; border: 1px solid var(--line, #e3e5e8); border-radius: 9px; overflow: hidden; }
.fmtseg { border: 0; background: transparent; padding: 5px 13px; font-size: 13px; cursor: pointer; color: var(--text, var(--ink, #1c1d1f)); }
.fmtseg + .fmtseg { border-left: 1px solid var(--line, #e3e5e8); }
.fmtseg.sel { background: var(--amber, #f29718); color: #fff; }
.fmtseg:focus-visible { outline: 2px solid var(--amber, #f29718); outline-offset: -2px; }
.fmtfeed { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted, #8b97b0); cursor: pointer; }
.fmthint { font-size: 12.5px; color: var(--muted, #8b97b0); }
.fmtcover { width: 62px; padding: 3px 6px; margin: 0 2px; }
.fmtnote { margin: 2px 0 6px; color: var(--muted, #8b97b0); }
.fmtaltwrap { display: flex; gap: 10px; padding: 8px 0 2px; align-items: flex-start; }
.fmtaltlist { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.fmtaltitem { display: flex; align-items: center; gap: 8px; }
.fmtaltitem img { width: 34px; height: 34px; object-fit: cover; border-radius: 6px; flex: 0 0 auto; }
.fmtaltinput { flex: 1; min-width: 0; padding: 5px 8px; font-size: 13px; }
/* collapsible Format & Accessibility (collapsed by default) */
.fmtdetails { margin-top: 4px; border-top: 1px solid var(--line, #e3e5e8); }
.fmtsummary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 9px; padding: 12px 0;
  font-family: var(--font-mono, ui-monospace, monospace); font-size: .6rem; letter-spacing: .14em;
  color: var(--muted, #8b97b0); user-select: none; }
.fmtsummary::-webkit-details-marker { display: none; }
.fmtsummary::before { content: "\25B8"; font-size: .72rem; color: var(--dim, #9aa6bd); transition: transform .15s; }
.fmtdetails[open] .fmtsummary::before { transform: rotate(90deg); }
.fmtbody { padding: 2px 0 6px; display: flex; flex-direction: column; gap: 4px; }
/* live format badge in the summary - draws the eye to Reels even when collapsed */
.fmtbadge { text-transform: none; font-weight: 600; letter-spacing: .02em; font-size: .68rem;
  color: #fff; background: var(--amber, #f29718); padding: 2px 8px; border-radius: 999px; }
.fmthint2 { text-transform: none; font-style: italic; letter-spacing: .02em; font-size: .68rem;
  color: var(--dim, #9aa6bd); }
/* Post-TYPE badge on every queue row (qFmtBadge): the post's content FORMAT -
   Reel / Carousel / Video / Image / Text. Neutral + monochrome on purpose so it
   reads as a quiet descriptor and never competes with the STATUS pill's colour
   (format and status are different axes - research: Buffer/Later/Hootsuite/Sprout
   all keep format = icon+label, status = colour). An outline chip (transparent
   fill) sits a step below the filled source chip, so the eye reads the source
   first; the border keeps it legible on the card2 row-hover. */
.qfmt { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px;
  padding: 2px 8px; border-radius: 999px; font-weight: 600; font-size: .56rem;
  letter-spacing: .09em; vertical-align: middle; white-space: nowrap;
  color: var(--muted); background: transparent; border: 1px solid var(--line2); }
.qfmt svg { width: 11px; height: 11px; flex: none; }
.detailtop .qfmt { font-size: .62rem; padding: 4px 10px; }
@media (max-width: 640px) { .fmtnet { min-width: 0; } .fmtaltwrap { flex-direction: column; gap: 4px; } }
/* --- Google Business post controls (SPEC_NETWORK_FORMATS Feature F) --- */
.gbpwrap { border-top: 1px dashed var(--line, #e3e5e8); margin-top: 4px; padding-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.gbpwrap select, .gbpwrap input[type="text"], .gbpwrap input[type="url"], .gbpwrap input[type="datetime-local"] {
  flex: 1 1 150px; min-width: 120px; padding: 6px 9px; font-size: 13px;
  border: 1px solid var(--line, #e3e5e8); border-radius: 8px;
  background: var(--card, #fff); color: var(--text, var(--ink, #1c1d1f)); }
.gbpwrap select { flex: 0 0 auto; }
.gbpwrap input:focus-visible, .gbpwrap select:focus-visible { outline: 2px solid var(--amber, #f29718); outline-offset: -1px; }

/* ============================================================================
   MOBILE MODE  (docs/SPEC_MOBILE_MODE.md)
   Phone layout of the SAME dashboard: a bottom tab bar with the 4 core jobs,
   everything else one tap away, installable. Auto-activates at <=760px (keeps
   iPad-portrait 768 out; reuses the app's existing 760 tier). Desktop >760px is
   pixel-identical - every rule below is inside @media(max-width:760px) or is an
   additive component (.mbar/.gfsheet) hidden by default. Sources cited in the
   spec (WCAG 2.2, Apple HIG, Material 3, web.dev, MDN).
   ========================================================================== */

/* --- the bottom tab bar + sheet primitive: defined always, shown only <=760 --- */
.mbar { display: none; }
dialog.gfsheet { display: none; }              /* closed dialogs stay hidden    */
dialog.gfsheet[open] { display: flex; }        /* open -> the flex column below */

@media (max-width: 760px) {
  /* Shake/zoom lockdown (ported from the proven guest pages, MINUS their
     maximum-scale=1 which fails WCAG 1.4.4 - we use 16px inputs instead).
     overflow-x:clip (not hidden) so it never turns an ancestor into a scroll
     container that would kill position:sticky. */
  html, body { overflow-x: clip; overscroll-behavior-y: none; }
  /* 16px minimum on text inputs stops iOS zoom-on-focus (the "shake"); range/
     checkbox/radio/color don't take text so they're left alone */
  /* !important so the 16px zoom-guard beats component classes (.qsort, .minisort,
     .anfilter, .fmtaltinput...) now and for any control added later. 16px is the
     desired size on mobile anyway - bigger, tap-friendly, and iOS won't zoom. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),
  select, textarea { font-size: 16px !important; }

  /* Shell: hide the desktop sidebar, size in svh so the iOS toolbar never clips.
     .side already becomes a wrapping pile at 900 - here it's gone entirely. */
  .shell { grid-template-columns: 1fr; min-height: 100svh; }
  .side { display: none; }

  /* Top bar: slim, sticky, clears the notch. The right cluster already sheds
     labels (640) and the megamenu (760); whoami is hidden from 900. */
  .topbar { position: sticky; top: 0; z-index: 30; padding: 10px 12px;
    padding-top: calc(10px + env(safe-area-inset-top, 0px)); gap: 8px; }
  .topbar h1 { font-size: 1.15rem; }

  /* Content: single column, and pad the bottom so the fixed bar never covers
     the last row (bar height + home-indicator inset). */
  .content { --content-inset-top: 14px; padding: 14px 12px calc(78px + env(safe-area-inset-bottom, 0px));
    max-width: 100%; }

  /* Scroll containers that assumed desktop chrome (calc(100vh - 275px)) flow in
     the normal page scroll instead - avoids nested-scroll + the 100vh trap. The
     reserved min-height is desktop-only: on a phone the empty state sizes to its
     content rather than forcing a near-viewport-tall box (mobile needs its own
     reserved height, not the desktop one). */
  .qfull, .qcalwrap { max-height: none; min-height: 0; }

  /* Top bar: declutter to the title. Every control here (theme, help, support,
     connections, back/forward) is reachable from the bottom bar or the More
     sheet - and 6 actions is double the Material-3 mobile max of 3. */
  .tbright, .navhist { display: none; }
  .topbar > .tbtitle { flex: 1 1 100%; }

  /* Long panel headers are nowrap on desktop (title + controls on one line); on a
     phone they must WRAP instead of clipping off-screen, e.g.
     "COLLECT FROM ANYONE · GET PHOTOS + VIDEOS SENT STRAIGHT IN". */
  .phead, .pheadflex { white-space: normal; }

  /* Posts LIST rows: the flex row's fixed siblings (thumb, network icons, approve
     toggle, status pill) starve the text column (min-width:0) down to its
     min-content = one word per line. Give the thumb+text a full first line so the
     rest wraps to a tidy second line (flexbox min-content fix + stack-on-narrow). */
  .qrow { flex-wrap: wrap; row-gap: 8px; align-items: center; padding: 12px 14px; }
  .qrow .t { flex: 1 1 calc(100% - 80px); min-width: 0; }
  /* meta line = source/format PILLS + date text. It must NOT use -webkit-line-clamp:
     that only clamps pure text - on iOS Safari it slices inline-flex chips top/bottom
     to the 13px line box (they're ~20px), the exact clip seen on device (WebKit bug
     274308). A wrapping flex row lays the chips out as real flex items that never clip
     on any browser, and stays a tidy 1-2 lines because the mobile meta is short. */
  .qrow .t > span { display: flex; flex-wrap: wrap; align-items: center;
    gap: 4px 7px; line-height: 1.35; }
  /* line 2 = status (left) + approve toggle (right, thumb reach). The per-row
     network icons are hidden on mobile - they're secondary triage info (up to 7
     of them won't share a 360px line with the controls) and are shown in full in
     the post editor. Keeps the row to a clean two lines. */
  .qrow .qnets { display: none; }
  .qrow .pill { order: 3; flex: none; }
  .qrow .qapp { order: 4; margin-left: auto; }

  /* Calendar: renderCalendar() emits an AGENDA (a day-list) instead of the 7-col
     grid on mobile - the verified best pattern for dense days (10+ posts). */
  .calagenda { display: flex; flex-direction: column; gap: 16px; }
  .calagd-date { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em;
    color: var(--muted); padding-bottom: 6px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
  .calagd-day.today .calagd-date { color: var(--amber-deep); font-weight: 700; }
  /* agenda chips share the panel's --card bg, so on dark (where box-shadow is
     invisible) they'd blend in; a --line border delineates each row in both
     themes and signals it's tappable (research: separate dark-list items). */
  .calagenda .calchip { width: 100%; margin: 0 0 6px; padding: 11px 12px; font-size: .86rem;
    border-radius: 10px; border: 1px solid var(--line); white-space: normal;
    text-align: left; line-height: 1.35; box-shadow: none; }
  .calagenda .calchip i { align-self: flex-start; margin-top: 5px; }
  .calhead { flex-wrap: wrap; column-gap: 6px; row-gap: 6px; }
  .calhead b { min-width: 0; flex: 0 1 auto; font-size: 1rem; }
  .calhead .spacer { display: none; }            /* no greedy spacer at 320px */
  /* the legend is an inline-flex (= nowrap by default) so its 4 labels overrun a
     320px panel; let it wrap onto multiple rows */
  .calhead .callegend { flex-basis: 100%; margin-top: 0; font-size: .52rem; flex-wrap: wrap; row-gap: 3px; }
  .calhead .calnote { flex-basis: 100%; }

  /* Grown toolbars / tab strips scroll horizontally in one row. display:flex is
     REQUIRED - the base .filterchips/.studiotabs is inline-flex (content-sized), so
     it overflowed its parent and overflow-x did nothing; block-level flex makes it a
     real scroll viewport. Children must NOT shrink or they compress instead of
     scrolling (research: flex:0 0 auto + scroll-snap; -webkit-overflow-scrolling is
     a no-op on iOS 13+). */
  .filters, .antoolbar, .anseg, .aeplat, .studiotabs, .anstrip, .filterchips {
    display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    overscroll-behavior-x: contain; scroll-snap-type: x proximity;
    scrollbar-width: none; -ms-overflow-style: none; }
  .filters > *, .antoolbar > *, .anseg > *, .aeplat > *,
  .studiotabs > *, .anstrip > *, .filterchips > * { flex: 0 0 auto; scroll-snap-align: start; }
  .filters::-webkit-scrollbar, .antoolbar::-webkit-scrollbar, .anseg::-webkit-scrollbar,
  .aeplat::-webkit-scrollbar, .studiotabs::-webkit-scrollbar, .anstrip::-webkit-scrollbar,
  .filterchips::-webkit-scrollbar { height: 0; }

  /* Media-library action buttons (From phone / Collect / Import) wrap instead of
     overrunning the row and getting cut off (research: wrap for a few actions). */
  .dropopts { flex-wrap: wrap; }

  /* Media library toolbar: was ~5 stacked rows (bulk / search / sort / chips /
     count) that pushed the first thumbnail BELOW the fold. Reflow into 3 tight
     rows - [YOUR LIBRARY ? ... AI-rename] / [search  sort] / [chips  count] - so a
     row of media shows on the first screen. Search stays a visible flex-grow field
     with a leading magnifier; sort keeps its current value in the native menu; the
     low-frequency bulk action is compact but still visible. The non-zero basis on
     search + chips forces the row breaks (a 0-basis flex item would squeeze onto
     the previous row). (research: NN/g content-to-chrome + above-the-fold + keep
     search visible; Material chips single scroll row; sort = current-value menu.) */
  .libhead { column-gap: 8px; row-gap: 8px; align-items: center; }
  .libhead .libtitle { flex: 0 0 auto; }
  /* Refresh matches Select's compact size (both are .btn; Select alone was shrunk) */
  .libhead #mediaBulk, .libhead #mediaRefresh { flex: 0 0 auto; padding: 8px 12px;
    font-size: .78rem; white-space: nowrap; }
  .libhead #mediaRefresh .bic { width: 14px; height: 14px; margin-right: 5px; }
  .libhead .mbulk-full { display: none; }   /* -> "✦ AI rename" (Bulk implied by the mode it opens) */
  .libhead #mediaSearch { flex: 1 1 130px; min-width: 0; width: auto; margin: 0;
    padding-left: 34px; background-repeat: no-repeat; background-position: 12px center;
    background-size: 15px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b93a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E"); }
  .libhead #mediaSort { flex: 0 0 auto; margin: 0; }
  /* basis 120 forces the chips to break to their own row (won't fit beside
     search+sort) yet still leaves room for the compact count beside them. */
  .libhead #mediaFilters { flex: 1 1 120px; min-width: 0; margin: 0; }
  .libhead #mediaCount { flex: 0 0 auto; margin: 0 0 0 auto; font-size: .5rem; white-space: nowrap; }
  .dropopts .btn { flex: 1 1 auto; }

  /* D2: post editor becomes a full-screen sheet; drop the desktop resize handle.
     It STOPS above the bottom bar (64px + safe area) instead of covering it, so
     the tab bar stays visible while editing a post - Peter reported the new-post
     editor had "no bottom menu". Bar taps close the editor first (see gfMobileInit). */
  .postwrap { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  .postpanel { width: 100vw; inset: 0; border-left: none; }
  .postpanel header { position: sticky; top: 0; z-index: 2; }
  .presize { display: none; }

  /* D3: right slide-outs go full-width with a safe-area-aware base. */
  .upmodal, .upmodal.wide { width: 100vw; max-width: 100vw;
    padding: 22px 16px calc(30px + env(safe-area-inset-bottom, 0px)); }
  .paneltop { margin-left: -16px; margin-right: -16px; padding: 14px 16px; }

  /* Generic centred modal: give it breathing room from the screen edges
     (its width is already viewport-capped at source, D1). */
  .npwrap { padding: 12px; }

  /* D5/hover: media-asset actions already revealed via @media(hover:none). */
  /* D7: let the page scroll over the collage canvas (was touch-action:none). */
  .collcanvas { touch-action: pan-y; }

  /* D10: pull inset close-buttons back on-screen at a phone edge. */
  .mpk .mlbclose { top: 6px; right: 6px; }

  /* ---- the bottom tab bar ---- */
  .mbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    background: var(--card); border-top: 1px solid var(--line);
    padding: 5px 4px calc(5px + env(safe-area-inset-bottom, 0px));
    justify-content: space-around; align-items: stretch;
    box-shadow: 0 -3px 14px rgba(19,26,42,.06); }
  .mbar.gf-kbd { transform: translateY(130%); }   /* slide away with the keyboard */
  :root[data-theme="dark"] .mbar { background: var(--navy2); border-top-color: var(--navy-line); }
}

/* Bottom-bar buttons: 48px targets (Material), icon + label. Defined outside the
   query since the bar only exists <=760 anyway. */
.mbar-btn { flex: 1 1 0; min-width: 0; min-height: 52px; display: flex;
  flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: none; border: none; cursor: pointer; padding: 4px 2px;
  color: var(--muted); font-family: var(--font-body); border-radius: 12px; }
.mbar-btn svg { width: 23px; height: 23px; }
.mbar-btn span { font-size: .62rem; letter-spacing: .01em; line-height: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mbar-btn.on { color: var(--amber-deep); }
.mbar-btn.on svg { stroke: var(--amber-deep); }
:root[data-theme="dark"] .mbar-btn { color: var(--navy-muted); }
:root[data-theme="dark"] .mbar-btn.on { color: var(--amber-bright); }
.mbar-btn .mbar-plus { width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(180deg, var(--amber-bright), #f29718); color: #1a1206;
  display: flex; align-items: center; justify-content: center; margin-top: -1px; }
.mbar-btn .mbar-plus svg { width: 20px; height: 20px; stroke: #1a1206; }

/* ---- the shared <dialog> sheet primitive (bottom sheet + full-screen) ---- */
dialog.gfsheet { flex-direction: column; width: 100%; max-width: 640px;
  max-height: 86svh; margin: 0 auto; position: fixed; inset: auto 0 0 0; top: auto;
  border: none; border-top: 1px solid var(--line); border-radius: 18px 18px 0 0;
  padding: 0; background: var(--card); color: var(--text);
  box-shadow: var(--shadow-lg); overflow: hidden;
  animation: gfSheetUp .2s cubic-bezier(.16,.8,.3,1); }
dialog.gfsheet.full { max-height: none; height: 100svh; inset: 0; border-radius: 0;
  border-top: none; animation: gfSheetFade .18s ease; }
dialog.gfsheet::backdrop { background: rgba(7,11,20,.5); backdrop-filter: blur(2px); }
@keyframes gfSheetUp { from { transform: translateY(100%); } to { transform: none; } }
@keyframes gfSheetFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { dialog.gfsheet { animation: none; } }
:root[data-theme="dark"] dialog.gfsheet { background: var(--navy2); border-color: var(--navy-line); }
.gfsheet-head { flex: none; display: flex; align-items: center; gap: 10px;
  padding: 14px 16px calc(14px + env(safe-area-inset-top, 0px)); border-bottom: 1px solid var(--line);
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
dialog.gfsheet:not(.full) .gfsheet-head { padding-top: 14px; }
.gfsheet-grip { position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 38px; height: 4px; border-radius: 999px; background: var(--line2); }
dialog.gfsheet.full .gfsheet-grip { display: none; }
.gfsheet-head .spacer { flex: 1; }
.gfsheet-close { width: 34px; height: 34px; border-radius: 999px; flex: none;
  border: 1px solid var(--line2); background: var(--card); color: var(--text);
  font-size: 1rem; cursor: pointer; }
.gfsheet-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 8px 12px calc(16px + env(safe-area-inset-bottom, 0px)); }
:root[data-theme="dark"] .gfsheet-head { border-color: var(--navy-line); }
:root[data-theme="dark"] .gfsheet-close { background: var(--navy); border-color: var(--navy-line2);
  color: var(--navy-text); }
body.gf-sheet-open { overflow: hidden; }

/* rows inside sheets (More menu items, Add actions): 48px+ tap targets */
.gf-mrow { display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 52px; padding: 12px 12px; border: none; background: none;
  border-radius: 12px; cursor: pointer; text-align: left; color: var(--text);
  font-family: var(--font-body); font-size: 1rem; }
.gf-mrow:hover, .gf-mrow:focus-visible { background: var(--card2); }
.gf-mrow.on { background: var(--amber-soft); color: var(--amber-deep); font-weight: 600; }
.gf-mrow .gf-mic { width: 24px; height: 24px; flex: none; display: flex;
  align-items: center; justify-content: center; color: var(--muted); }
.gf-mrow .gf-msub { display: block; font-size: .76rem; color: var(--muted); font-weight: 400; }
.gf-mrow .gf-lock { margin-left: auto; font-size: .8rem; opacity: .7; }
:root[data-theme="dark"] .gf-mrow { color: var(--navy-text); }
:root[data-theme="dark"] .gf-mrow:hover { background: var(--navy); }
/* AI credits card pinned near the bottom of the mobile menu (mirrors the desktop
   sidebar credit meter): balance + top-up on top, a fuel-gauge bar beneath. */
.gf-mcred { align-items: stretch; }
.gf-mcred .gf-mcredbody { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.gf-mcred .gf-mcredtop { display: flex; align-items: baseline; gap: 8px; font-size: .95rem; }
.gf-mcred .gf-mcredtop b { font-weight: 700; }
.gf-mcred .gf-mcredcta { margin-left: auto; font-size: .8rem; color: var(--amber-deep); font-weight: 600; }
.gf-mcred .gf-mcredbar { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.gf-mcred .gf-mcredbar > i { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--green), #3ecf8e); transition: width .4s; }
.gf-mcred .gf-mcredbar > i.warm { background: linear-gradient(90deg, var(--amber-bright), #f29718); }
.gf-mcred .gf-mcredbar > i.hot { background: linear-gradient(90deg, #f07b7b, var(--red)); }
.gf-mcred.is-low .gf-mcredtop b { color: var(--amber-deep); }
.gf-mcred.is-out .gf-mcredtop b { color: var(--red); }
:root[data-theme="dark"] .gf-mcred .gf-mcredbar { background: rgba(255, 255, 255, .10); }
.gf-mgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.gf-sheet-brand { display: flex; align-items: center; gap: 10px; padding: 6px 12px 12px;
  border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.gf-sheet-brand select { flex: 1; min-width: 0; padding: 11px 12px; font-size: 16px;
  border-radius: 10px; border: 1px solid var(--line2); background: var(--card2); color: var(--text); }
:root[data-theme="dark"] .gf-sheet-brand select { background: var(--navy); border-color: var(--navy-line2); color: var(--navy-text); }
.gf-ios-hint { margin: 4px 12px 12px; padding: 12px 14px; border: 1px solid var(--line2);
  border-radius: 12px; background: var(--card2); font-size: .88rem; color: var(--muted); }

/* --- "What's working" insight card (Analytics tab) --- */
#insightsPanel .insh { margin-top: 14px; }
.insnote { text-align: center; margin: 6px 0 0; }
.inslist { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.insrow { display: grid; grid-template-columns: 1fr auto auto auto auto; gap: 12px; align-items: center;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
.insrow:hover { border-color: var(--amber); box-shadow: var(--shadow); }
.insrow .institle { cursor: pointer; }
.insrow .institle:hover { color: var(--amber-deep); }
.mltbtn { font-size: .78rem; padding: 4px 10px; border: 1px solid var(--line2); border-radius: 999px;
  background: var(--card); color: var(--amber-deep); cursor: pointer; white-space: nowrap; }
.mltbtn:hover { border-color: var(--amber); box-shadow: var(--shadow); }
.institle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.insmeta { color: var(--muted); font-size: .8rem; }
.insnum { white-space: nowrap; font-size: .85rem; color: var(--text); }
.insviews { color: var(--muted); }
.insbars { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.insbar { display: grid; grid-template-columns: 160px 1fr 52px; gap: 10px; align-items: center; }
.insbarlab { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; }
.insbartrack { background: var(--amber-soft); border-radius: 6px; height: 12px; overflow: hidden; }
.insbarfill { display: block; height: 100%; background: linear-gradient(180deg, var(--amber-bright), #f29718); }
.insbarval { text-align: right; font-size: .85rem; color: var(--text); }
@media (max-width: 640px) {
  .insrow { grid-template-columns: 1fr auto auto; }
  .insrow .insmeta, .insrow .insviews { display: none; }
  .insbar { grid-template-columns: 110px 1fr 44px; }
}

/* --- Flo: the proactive assistant card at the top of Overview. A gentle amber
   wash + left edge sets her apart as "the assistant speaking" without shouting;
   every colour is a token so both themes are covered. --- */
.flopanel { border-color: var(--amber);
  background: linear-gradient(180deg, var(--amber-soft), transparent 62%), var(--card);
  box-shadow: inset 3px 0 0 var(--amber-bright); }
.flohead { align-items: center; gap: 9px; flex-wrap: wrap; }
.floblurb { min-width: 0; display: inline-flex; align-items: baseline; flex: 0 1 auto; }
.flotype { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.flocaret { display: inline-block; width: 2px; height: 1.05em; margin-left: 2px;
  background: var(--amber-deep); vertical-align: -0.18em; animation: flocaretblink 1.05s steps(1) infinite; }
@keyframes flocaretblink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .flocaret { animation: none; } }
/* prev / pause / next controls for the typed header (WCAG: pausable auto-motion).
   margin-right clears the panel's absolute fold caret (phead padding-right 44px). */
.floctrls { display: inline-flex; align-items: center; gap: 2px; flex: none; margin-right: 8px; }
.floctrl { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  padding: 0; border: 1px solid transparent; border-radius: 7px; background: none;
  color: var(--dim); cursor: pointer; transition: color .12s, border-color .12s, background .12s; }
.floctrl:hover { color: var(--amber-deep); border-color: var(--line2); background: var(--card2); }
.floctrl:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.floctrl .bic { width: 16px; height: 16px; margin-right: 0; }
/* FLO MARK - the assistant's ONE identity mark, used on every Flo surface:
   panel headers, the Campaigns/Analytics ledes, the Outreach band and inline
   "Flo's reply" labels. Glyph is the #gfFloMark sprite symbol (dashboard.html).
   Chip = avatar (28, .lg 36). .bare = inline label glyph, no chip.
   The glyph is currentColor only - the house icon set bakes a #f29718 accent
   into each control glyph, which is invisible on this amber chip. */
.flomark { flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 999px;
  background: linear-gradient(180deg, var(--amber-bright), #f29718); color: #3a2600; }
.flomark svg { width: 18px; height: 18px; display: block; }
.flomark.lg { width: 36px; height: 36px; }
.flomark.lg svg { width: 22px; height: 22px; }
.flomark.bare { width: auto; height: auto; border-radius: 0; background: none;
  color: var(--amber-deep); }
.flomark.bare svg { width: 15px; height: 15px; }
/* sprite host - holds #gfFloMark, never painted */
.gfsprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.floname { font-weight: 700; letter-spacing: .04em; }
.floblurb { font-weight: 400; }
.florows { display: flex; flex-direction: column; gap: 9px; }
.florow { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
  padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--card); }
.florow:hover { border-color: var(--amber); box-shadow: var(--shadow); }
.florow .floric { width: 20px; height: 20px; margin-right: 0; color: var(--amber-deep); flex: none; }
.flotext { font-size: .92rem; line-height: 1.45; color: var(--text); }
.flopostlink { color: var(--amber-deep); font-weight: 600; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--line2);
  text-underline-offset: 2px; border-radius: 3px; }
.flopostlink:hover { text-decoration-color: var(--amber); }
.flopostlink:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.floact { display: flex; }
.floact .sm-act { padding: 7px 13px; font-size: .8rem; border-radius: 9px;
  letter-spacing: 0; white-space: nowrap; }
@media (max-width: 640px) {
  .florow { grid-template-columns: auto 1fr; }
  .floact { grid-column: 1 / -1; justify-content: flex-start; padding-left: 32px; }
  /* the typed blurb drops to its own line and wraps, so a long message can never
     push the header sideways on a phone */
  .floblurb { flex-basis: 100%; }
  .flotype { white-space: normal; }
}

/* -------- Creative Studio: Ads creator -------- */
.adtypeseg { margin-bottom: 12px; }
.adnets, .adengines { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 2px; }
.adnets .netchip small, .adengines .netchip small { opacity: .7; font-weight: 400; }
.adnote { margin: 4px 0 10px; }
.admodepane { margin-top: 6px; }
/* chosen photo preview in the ad picker - the customer SEES their selection,
   clickable to view full size (mirrors the collage slot thumbnail) */
.adpick-ths { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.adpick-th { width: 84px; height: 84px; padding: 0; line-height: 0; overflow: hidden;
  border: 2px solid var(--line2); border-radius: 10px; background: none; cursor: zoom-in; }
.adpick-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.adpick-th:hover { border-color: var(--amber); }
/* the ads photo picker is a flex row (chosen thumbs + a compact Change button),
   NOT the stretching .stpick grid that inflated the button to a big empty box. */
.stpick.adpickbox { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.adpickbox .adpick-ths { margin-bottom: 0; }
.adpickbox .stpbtn { width: auto; padding: 8px 14px; font-size: .82rem; }   /* smaller + clean, site style */
/* ad options - deliberate rows (CTA + POSITION | SIZES full width | LOGO + SIGNATURE),
   not an auto-fit grid, so every control gets the width it actually needs */
.adopts { display: flex; flex-direction: column; gap: 18px; margin: 14px 0 6px; }
.adopts .adrow2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; align-items: start; }
.adopt > label { display: block; font: 600 10px/1.4 var(--font-mono, ui-monospace, monospace);
  letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.adopt .adsizes, .adopt .anseg, .adopt .adctarow, .adopt .collbrandrow { margin: 0; }
@media (max-width: 620px) { .adopts .adrow2 { grid-template-columns: 1fr; gap: 14px; } }
.adsizes { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0; }
.adsizes .collcheck small { opacity: .6; font-family: var(--font-mono); font-size: .82em; }
.adctarow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.adctarow .adctasel { flex: 1 1 200px; }
.adcopy { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.adcopyhead { margin-top: 4px; }
.adcopyact { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.adcopylist { display: grid; gap: 8px; }
.adcopysrc { font-size: .58rem; letter-spacing: .12em; color: var(--dim); margin: 2px 0; }
.adcopycard { position: relative; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--card); }
.adcopy-h { font-weight: 700; margin-bottom: 3px; padding-right: 44px; }
.adcopy-b { font-size: .9em; color: var(--dim); margin-bottom: 4px; }
.adcopy-cta { font-size: .6rem; letter-spacing: .1em; color: var(--amber-deep); }
.adcopycard .adcopyuse { margin-top: 8px; }
.adscore { position: absolute; top: 10px; right: 10px; font-family: var(--font-mono); font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 20px; background: var(--line2); color: var(--text); }
.adscore.good { background: var(--green-soft, rgba(40,180,110,.16)); color: var(--green); }
.adscore.bad { background: var(--red-soft, rgba(220,70,90,.16)); color: var(--red); }
.adresult { padding: 4px 0; }
.adthumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.adthumbs img { width: 62px; height: 62px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.adlaunch { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }

/* -------- Ads creator: visual template picker -------- */
.adtemplates { display: grid; grid-template-columns: repeat(auto-fill, minmax(94px, 1fr)); gap: 8px; margin: 4px 0 12px; }
.adtplload { color: var(--dim); font-family: var(--font-mono); font-size: .58rem; letter-spacing: .1em; padding: 10px 2px; }
.adtpl { display: flex; flex-direction: column; gap: 5px; padding: 5px; border: 2px solid var(--line2); border-radius: 12px; background: var(--card); cursor: pointer; }
.adtpl:hover { border-color: var(--amber); }
.adtpl.on { border-color: var(--amber-bright); box-shadow: 0 0 0 1px var(--amber-bright), var(--shadow); }
.adtpl img, .adtpl-ph { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 7px; display: block; }
.adtpl-ph { background: var(--line2); }
.adtpl-l { font-family: var(--font-mono); font-size: .54rem; letter-spacing: .05em; text-transform: uppercase; color: var(--dim); text-align: center; }
.adtpl.on .adtpl-l { color: var(--text); }

/* ---- Commerce product feed (one feed -> Google / Meta / TikTok catalogs) ---- */
.feedplats { display: flex; gap: 5px; align-items: center; }
.feedplat { font-size: .58rem; font-weight: 600; letter-spacing: .02em; padding: 3px 9px;
  border-radius: 999px; border: 1px solid var(--line2); color: var(--muted);
  background: var(--card2); font-family: var(--font-body); }
.feedplat.is-new { color: var(--amber-deep); border-color: var(--amber); background: var(--amber-soft); }
.feedurlrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.feedurlrow input { flex: 1; min-width: 240px; padding: 11px 13px; border-radius: 11px;
  background: var(--card2); border: 1px solid var(--line2); color: var(--text);
  font-family: var(--font-mono); font-size: 12px; }
.feedurlrow input:focus { outline: none; border-color: var(--amber); background: var(--card); }
.feedsetup { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.feedsetup-h { font-size: .6rem; letter-spacing: .16em; color: var(--muted); margin-bottom: 9px; }
.feedplatd { border: 1px solid var(--line); border-radius: 12px; background: var(--card2);
  margin-bottom: 8px; }
.feedplatd + .feedplatd { margin-top: 0; }
.feedplatd > summary { cursor: pointer; padding: 11px 14px; font-size: .9rem; color: var(--text);
  display: flex; align-items: center; gap: 9px; list-style: none; }
.feedplatd > summary::-webkit-details-marker { display: none; }
.feedplatd > summary b { color: var(--amber-deep); font-weight: 700; }
.feedplatd > summary::after { content: "+"; margin-left: auto; color: var(--amber-deep);
  font-weight: 700; font-size: 1.15rem; line-height: 1; }
.feedplatd[open] > summary::after { content: "\2212"; }
.feedplatd[open] > summary { border-bottom: 1px solid var(--line); }
.feedplatd-sub { font-size: .58rem; letter-spacing: .03em; color: var(--muted); background: var(--card);
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; }
.feedplatd ol { margin: 0; padding: 8px 16px 10px 34px; }
.feedplatd li { font-size: .86rem; color: var(--dim); margin: 6px 0; line-height: 1.5; }
.feedplatd li b { color: var(--text); font-weight: 600; }
.feedplatd li .mono { font-family: var(--font-mono); font-size: .8rem; color: var(--amber-deep);
  background: var(--amber-soft); padding: 1px 5px; border-radius: 5px; }
.feedroute { padding: 0 2px; }
.feedroute-t { font-size: .56rem; letter-spacing: .12em; color: var(--amber-deep); margin: 9px 0 -2px 14px; }
.feednote { font-size: .8rem; color: var(--muted); margin: 6px 14px 12px; font-style: italic; }

/* ---- Print studio (business cards + flyers) ---- */
.prtemplates { display: grid; gap: 8px; margin: 6px 0 12px; }
.prtemplates.prtpl-card { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }
.prtemplates.prtpl-flyer { grid-template-columns: repeat(auto-fill, minmax(102px, 1fr)); }
.prtplload { color: var(--muted); font-size: .72rem; padding: 8px 2px; }
.prtpl { position: relative; display: flex; flex-direction: column; gap: 5px; padding: 5px; border: 2px solid var(--line2, rgba(140,140,150,.28)); border-radius: 12px; background: var(--card, #fff); cursor: pointer; }
.prtpl:hover { border-color: var(--amber, #e08900); }
.prtpl.on { border-color: var(--amber-bright, #e08900); box-shadow: 0 0 0 1px var(--amber-bright, #e08900); }
.prtpl img, .prtpl-ph { width: 100%; height: auto; display: block; border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.prtpl-ph { aspect-ratio: 3 / 2; background: var(--line2, #e6e6ea); }
.prtpl-l { font-family: var(--font-mono); font-size: .56rem; letter-spacing: .04em; text-transform: uppercase; color: var(--dim, #6b7280); text-align: center; }
.prtpl.on .prtpl-l { color: var(--text, #111); }
/* magnify affordance on each layout thumbnail (enlarge without selecting) */
.prtpl-zoom { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 8px; background: rgba(10,14,20,.6); color: #fff; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .13s ease; }
.prtpl:hover .prtpl-zoom, .prtpl:focus-within .prtpl-zoom { opacity: 1; }
.prtpl-zoom .bic svg { width: 15px; height: 15px; }
@media (hover: none) { .prtpl-zoom { opacity: .9; } }
.prfields { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 14px; margin: 10px 0; }
.prfield { display: flex; flex-direction: column; gap: 3px; }
.prfield.wide { grid-column: 1 / -1; }
.prfield label { font-size: .68rem; letter-spacing: .04em; color: var(--muted); text-transform: uppercase; }
.prfield textarea { resize: vertical; }
#prIdeas { display: flex; flex-direction: column; gap: 5px; margin: 6px 0; }
.pridea { text-align: left; padding: 7px 10px; border: 1px solid rgba(140,140,150,.24); border-radius: 8px; background: transparent; color: inherit; cursor: pointer; display: block; }
.pridea:hover { border-color: var(--amber, #e08900); }
.pridea b { display: block; font-size: .82rem; }
.prresult-in { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; align-items: flex-start; }
.prpreview { flex: 0 0 auto; max-width: 340px; }
.prpreview img { max-width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 18px rgba(0,0,0,.16); }
.prpreview img, .prdesign-th img { cursor: zoom-in; }
/* enlarge-on-click lightbox for any card/flyer preview */
.prlbx { position: fixed; inset: 0; z-index: 1600; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(6,8,12,.86); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: prlbxIn .16s ease; }
@keyframes prlbxIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .prlbx { animation: none; } }
.prlbx-fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 100%; max-height: 100%; }
.prlbx-img { max-width: 92vw; max-height: 84vh; width: auto; height: auto; object-fit: contain; border-radius: 10px; background: #fff; box-shadow: 0 24px 70px rgba(0,0,0,.55); cursor: default; }
.prlbx-cap { color: rgba(255,255,255,.74); font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; }
.prlbx-x { position: fixed; top: 16px; right: 18px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.24); background: rgba(20,24,32,.72); color: #fff; font-size: 1.05rem; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.prlbx-x:hover { background: rgba(44,50,62,.92); border-color: rgba(255,255,255,.5); }
.prside { flex: 1 1 260px; min-width: 240px; display: flex; flex-direction: column; gap: 8px; }
.prhandoff { display: flex; flex-wrap: wrap; gap: 6px; }
#prPhotos { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0; }
.prphoto { flex: 1 1 200px; min-width: 180px; }
.prphoto label { font-size: .68rem; letter-spacing: .04em; color: var(--muted); text-transform: uppercase; display: block; margin-bottom: 4px; }
/* FRONT / BACK content panels - colour-coded so it's clear which side you edit */
.prside-panel { border-radius: 12px; }
.prside-panel.prside-active { background: rgba(80, 130, 200, .09); border: 1px solid rgba(80, 130, 200, .30); padding: 8px 12px 10px; margin: 6px 0; }
.prside-panel-back { background: rgba(224, 137, 0, .10); border: 1px solid rgba(224, 137, 0, .32); padding: 8px 12px 10px; margin: 8px 0; border-radius: 12px; }
.prside-tag { display: inline-block; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em; padding: 3px 11px; border-radius: 6px; margin-bottom: 8px; font-weight: 700; }
.prside-tag-front { background: #3f6fb4; color: #fff; }
.prside-tag-back { background: var(--amber, #e08900); color: #1a1206; }
/* Optional QR link + My Designs saved library */
.prqr { margin: 8px 0; }
.prqr input { width: 100%; }
.prsaved { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line, rgba(255, 255, 255, .10)); }
.prdesigns { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.prdesign { display: flex; align-items: center; gap: 12px; padding: 8px; border: 1px solid var(--line, rgba(255, 255, 255, .12)); border-radius: 12px; background: var(--card2, rgba(255, 255, 255, .03)); }
.prdesign-th { flex: 0 0 auto; width: 92px; height: 58px; border-radius: 8px; overflow: hidden; background: rgba(120, 130, 150, .14); display: flex; align-items: center; justify-content: center; cursor: zoom-in; }
.prdesign-th img { width: 100%; height: 100%; object-fit: contain; }
.prdesign-th .prtpl-ph { width: 100%; height: 100%; }
.prdesign-meta { flex: 1 1 auto; min-width: 0; }
.prdesign-name { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 3px 6px; border-radius: 7px; color: inherit; font-weight: 600; font-size: .92rem; cursor: text; }
.prdesign-nametext { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.prdesign-name:hover { background: rgba(120, 130, 150, .14); }
.prdesign-name .cic { flex: 0 0 auto; color: var(--muted, #9aa3b2); }
.prdesign-name:hover .cic { color: var(--amber, #e08900); }
.prdesign-namein { width: 100%; font: inherit; font-weight: 600; padding: 3px 6px; border: 1px solid var(--amber, #e08900); border-radius: 7px; background: rgba(0, 0, 0, .18); color: inherit; outline: none; }
.prdesign-sub { font-size: .66rem; color: var(--muted); margin: 2px 0 0 6px; }
.prdesign-act { flex: 0 0 auto; display: flex; gap: 6px; }
.prdl { text-align: center; }
@media (max-width: 620px) { .prfields { grid-template-columns: 1fr; } .prpreview { max-width: 100%; } }

/* ---------- Post from Phone panel (SPEC_POST_FROM_PHONE.md) ----------
   Manual native-posting helper: save each media, copy the caption, open the app.
   Lives inside .gfsheet-body (vertical scroll only); everything wraps/breaks so a
   phone at 375px never scrolls sideways. gfSheet is a centred dialog on desktop and
   a bottom sheet on phones (responsive rule at the end of this block). */
.pfp { display: flex; flex-direction: column; gap: 16px; max-width: 100%; }

/* WHY (tip): icon + sentence are ONE flex row, so the sentence never fragments */
.pfp-tip { display: flex; gap: 9px; align-items: flex-start; margin: 0;
  font-size: .86rem; line-height: 1.5; color: var(--text);
  background: var(--amber-soft); border: 1px solid var(--line);
  border-radius: 14px; padding: 12px 14px; }
.pfp-tip .bic { flex: none; color: var(--amber-deep); margin-top: 1px; }
.pfp-tip b { color: var(--amber-deep); }

/* HOW (3-step guide chips, in the same order as the sections below) */
.pfp-steps { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 0; }
.pfp-step { display: inline-flex; align-items: center; gap: 7px; flex: 1 1 auto;
  justify-content: center; font-size: .76rem; color: var(--muted);
  background: var(--card2); border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 12px 6px 6px; white-space: nowrap; }
.pfp-step b { flex: none; width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--amber-bright); color: #1a1206; font-size: .72rem; font-weight: 700; }

/* sections */
.pfp-sec { display: flex; flex-direction: column; gap: 9px; }
.pfp-h { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--dim); display: flex; align-items: center;
  gap: 8px; min-height: 30px; }
.pfp-sub { font-family: var(--font-body); letter-spacing: 0; text-transform: none;
  font-size: .72rem; color: var(--dim); }
/* Caption's Copy: the section's primary action. Sits at the header's right edge,
   comfortable tap size, a clear (now dark) glyph, and a soft amber lift instead of a
   heavy glow so it reads as a tidy button, not a floating chip. */
.btn.amber.pfp-hbtn { margin-left: auto; padding: 10px 18px; font-size: .88rem;
  border-radius: 12px; letter-spacing: 0; box-shadow: 0 3px 9px rgba(242, 151, 24, .2); }
.btn.amber.pfp-hbtn:hover { box-shadow: 0 5px 14px rgba(242, 151, 24, .28); }
.pfp-hbtn .bic { width: 17px; height: 17px; margin-right: 7px; }

/* caption */
.pfp-text { background: var(--card2); border: 1px solid var(--line); border-radius: 12px;
  padding: 11px 13px; font-size: .9rem; line-height: 1.5; color: var(--text);
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
  max-height: 210px; overflow-y: auto; }
.pfp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pfp-chip { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem;
  font-weight: 600; color: var(--amber-deep); background: var(--amber-soft);
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 13px; cursor: pointer; }
.pfp-chip:hover { border-color: var(--amber); }
.pfp-chip .bic { width: 15px; height: 15px; }
.pfp-note { font-size: .74rem; color: var(--dim); margin: 0; line-height: 1.4; }

/* media strip: compact tiles that WRAP (never a sideways scroll) */
.pfp-media { display: flex; flex-wrap: wrap; gap: 10px; }
.pfp-mnet { display: flex; flex-direction: column; gap: 8px; }
.pfp-nl { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--amber-deep); }
.pfp-m { display: flex; flex-direction: column; gap: 7px; width: 96px; max-width: 100%; }
.pfp-mthumb { position: relative; display: block; width: 96px; height: 96px; max-width: 100%;
  border-radius: 14px; border: 1px solid var(--line2); overflow: hidden;
  background: var(--card2) center/cover no-repeat; }
.pfp-mthumb.vid { background: #000; }
.pfp-mthumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pfp-mvid { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; color: #fff; pointer-events: none; }
.pfp-mvid .bic svg { width: 30px; height: 30px; filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.pfp-mbtn { display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  width: 96px; max-width: 100%; font-size: .78rem; font-weight: 600; cursor: pointer;
  color: var(--text); background: var(--card); border: 1px solid var(--line2);
  border-radius: 10px; padding: 7px 8px; font-family: var(--font-body); }
.pfp-mthumb { transition: border-color .15s, box-shadow .15s; }
.pfp-m:hover .pfp-mthumb { border-color: var(--amber); box-shadow: var(--shadow); }
.pfp-mbtn:hover { border-color: var(--amber); color: var(--amber-deep); }
.pfp-mbtn:active, .pfp-netchip:active { transform: translateY(0); }
.pfp-mbtn .bic { width: 15px; height: 15px; }
.pfp-none { font-size: .82rem; color: var(--dim); margin: 0; }

/* OPEN THE APP: network chips (each copies that net's caption + opens the app) */
.pfp-open { display: flex; flex-wrap: wrap; gap: 9px; }
.pfp-netchip { display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  font-family: var(--font-body); font-size: .88rem; font-weight: 600; color: var(--text);
  background: var(--card); border: 1px solid var(--line2); border-radius: 12px;
  padding: 9px 13px 9px 11px; transition: border-color .15s, transform .15s, box-shadow .15s; }
.pfp-netchip:hover { border-color: var(--amber); transform: translateY(-1px); box-shadow: var(--shadow); }
.pfp-netchip:hover .pfp-ext { color: var(--amber-deep); }
.pfp-ext { display: inline-flex; color: var(--dim); margin-left: 1px; }
.pfp-ext .bic { width: 15px; height: 15px; }
.pfp-neti { display: inline-flex; width: 22px; height: 22px; flex: none; }
.pfp-neti svg { width: 100%; height: 100%; }
.pfp-neti.instagram { color: #d6336c; } .pfp-neti.facebook { color: #1877f2; }
.pfp-neti.linkedin { color: #0a66c2; } .pfp-neti.youtube { color: #e23b2e; }
.pfp-neti.pinterest { color: #e60023; } .pfp-neti.gmb { color: #1a73e8; }
.pfp-neti.tiktok, .pfp-neti.twitter { color: var(--text); }

/* done / posted / QR / copied-flash */
.pfp-done { display: flex; flex-direction: column; gap: 8px; margin-top: 2px;
  padding-top: 16px; border-top: 1px solid var(--line); }
.pfp-donebtn { align-self: flex-start; font-size: .92rem; padding: 11px 20px; }
.pfp-donehint { font-size: .74rem; color: var(--dim); margin: 0; line-height: 1.45; }
.pfp-posted { display: flex; align-items: center; gap: 8px; font-size: .86rem; font-weight: 600;
  color: var(--green); background: var(--card2); border: 1px solid var(--line);
  border-radius: 12px; padding: 13px 15px; margin: 0; }
.pfp-posted .bic { flex: none; }
.pfp-qrbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  align-self: center; margin-top: 2px; font-size: .78rem; color: var(--dim);
  background: none; border: none; cursor: pointer; padding: 6px; }
.pfp-qrbtn:hover { color: var(--amber-deep); }
.pfp-qrbtn .bic { width: 16px; height: 16px; }
.pfp-done-flash { background: var(--green) !important; border-color: var(--green) !important;
  color: #fff !important; }

/* the composer's manual toggle hint (unchanged behaviour) */
.pfpmodehint { display: flex; align-items: center; gap: 6px; font-size: .78rem;
  color: var(--amber-deep); margin: -4px 0 4px; }
.pfpmodehint .bic { flex: none; }

/* ---- responsive gfSheet: centred dialog on desktop, bottom sheet on phones ----
   NN/g + Material: bottom sheets suit small screens, centred dialogs suit large. The
   base rule (bottom-anchored) stays for phones; >=761px re-centres and enlarges it. */
@media (min-width: 761px) {
  dialog.gfsheet:not(.full) { inset: 0; margin: auto; max-width: 580px; max-height: 88vh;
    border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-lg);
    animation: gfSheetPop .18s cubic-bezier(.16, .8, .3, 1); }
  dialog.gfsheet:not(.full) .gfsheet-grip { display: none; }
  dialog.gfsheet:not(.full) .gfsheet-head { padding-top: 16px; }
}
@keyframes gfSheetPop { from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: none; } }
:root[data-theme="dark"] dialog.gfsheet:not(.full) { border-color: var(--navy-line); }