/* ============================================================
   Editor v2 — Chrome Styles
   Tokens mirror block_renderer.py. Language from chrome mockup.
   ============================================================ */

/* Self-hosted fonts (vendor/woff2 — no CDN dependency) */
@font-face { font-family: 'Heebo'; font-style: normal; font-weight: 300; font-display: swap; src: url(fonts/heebo-300.woff2) format('woff2'); }
@font-face { font-family: 'Heebo'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/heebo-400.woff2) format('woff2'); }
@font-face { font-family: 'Heebo'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/heebo-500.woff2) format('woff2'); }
@font-face { font-family: 'Heebo'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/heebo-600.woff2) format('woff2'); }
@font-face { font-family: 'Heebo'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/heebo-700.woff2) format('woff2'); }
@font-face { font-family: 'Heebo'; font-style: normal; font-weight: 800; font-display: swap; src: url(fonts/heebo-800.woff2) format('woff2'); }
@font-face { font-family: 'Heebo'; font-style: normal; font-weight: 900; font-display: swap; src: url(fonts/heebo-900.woff2) format('woff2'); }
@font-face { font-family: 'Assistant'; font-style: normal; font-weight: 300; font-display: swap; src: url(fonts/assistant-300.woff2) format('woff2'); }
@font-face { font-family: 'Assistant'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/assistant-400.woff2) format('woff2'); }
@font-face { font-family: 'Assistant'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/assistant-500.woff2) format('woff2'); }
@font-face { font-family: 'Assistant'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/assistant-600.woff2) format('woff2'); }
@font-face { font-family: 'Assistant'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/assistant-700.woff2) format('woff2'); }
@font-face { font-family: 'Assistant'; font-style: normal; font-weight: 800; font-display: swap; src: url(fonts/assistant-800.woff2) format('woff2'); }
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 400 900; font-display: swap; src: url(fonts/rubik-hebrew.woff2) format('woff2'); unicode-range: U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F; }
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 400 900; font-display: swap; src: url(fonts/rubik-latin.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Frank Ruhl Libre'; font-style: normal; font-weight: 500 900; font-display: swap; src: url(fonts/frank-ruhl-libre-hebrew.woff2) format('woff2'); unicode-range: U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F; }
@font-face { font-family: 'Frank Ruhl Libre'; font-style: normal; font-weight: 500 900; font-display: swap; src: url(fonts/frank-ruhl-libre-latin.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Suez One'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/suez-one-hebrew.woff2) format('woff2'); unicode-range: U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F; }
@font-face { font-family: 'Suez One'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/suez-one-latin.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  --primary:        #0E2A47;
  --primary-dark:   #081B30;
  --secondary:      #1B4870;
  --accent:         #C8A04B;
  --accent-soft:    #E7D3A1;
  --accent-deep:    #9A6A00;
  --bg:             #F4F7FB;
  --surface:        #FFFFFF;
  --surface-2:      #FBFCFE;
  --text:           #0E1A28;
  --muted:          #5B6B7C;
  --border:         #E2E8F0;
  --border-soft:    #EDF1F6;
  --radius:         14px;
  --radius-sm:      10px;
  --radius-lg:      18px;
  --shadow:         0 10px 30px rgba(14,42,71,.12);
  --shadow-soft:    0 2px 10px rgba(14,42,71,.06);
  --shadow-pop:     0 18px 50px rgba(8,27,48,.22);
  --st-draft:       #5B6B7C;  --st-draft-bg:  #EEF1F5;
  --st-info:        #1B4870;  --st-info-bg:   #E5EEF7;
  --st-wait:        #9A6A00;  --st-wait-bg:   #FBF1D9;
  --st-live:        #1A7A4A;  --st-live-bg:   #E1F3E9;
  --topbar-h:       60px;
  --rail-w:         312px;
  --chat-w:         340px;
  /* --- action-button tokens (Uri, 22.6: deep hot orange, white text 4.71:1 AA, near-black border) --- */
  --action:         #C84B00;
  --action-on:      #FFFFFF;
  --action-border:  #0C1622;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: 'Assistant', system-ui, Arial, sans-serif;
  background: var(--bg); color: var(--text);
  font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
h1,h2,h3,.h { font-family: 'Heebo', system-ui, Arial, sans-serif; }
button { font-family: inherit; cursor: pointer; }
.vh { position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0); }
:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; border-radius: 6px; }

/* ============================================================ LAYOUT */
.layout { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.layout .workspace { flex: 1; height: auto; min-height: 0; }
.workspace {
  display: grid;
  grid-template-columns: var(--rail-w) 1fr var(--chat-w);
  min-height: 0;
}
body.chat-collapsed .workspace { grid-template-columns: var(--rail-w) 1fr 52px; }
.zone {
  background: var(--surface); min-height: 0;
  display: flex; flex-direction: column; overflow: hidden;
}
.zone-rail   { border-inline-end: 1px solid var(--border); }
.zone-chat   { border-inline-start: 1px solid var(--border); }
.zone-preview{ background: var(--bg); }
.zone-head {
  padding: 13px 16px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 9px;
  background: var(--surface); flex: none;
}
.zone-head .ico {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--st-info-bg); color: var(--secondary);
  display: grid; place-items: center; font-size: .95rem;
}
.zone-head h2 { margin: 0; font-size: .95rem; font-family: 'Heebo'; font-weight: 800; color: var(--primary); }
.zone-head .tag { margin-inline-start: auto; font-size: .72rem; color: var(--muted); }

/* ============================================================ TOP BAR */
.topbar {
  height: var(--topbar-h); background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 18px; position: relative; z-index: 40; flex: none;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand .logo {
  width: 34px; height: 34px; border-radius: 9px;
  background: linear-gradient(135deg,var(--primary),var(--secondary));
  display: grid; place-items: center; color: #fff;
  font-weight: 800; font-family: 'Heebo'; font-size: 1rem;
}
.brand .name  { font-family:'Heebo'; font-weight:800; font-size:1rem; color:var(--primary); line-height:1.1; }
.brand .sub   { font-size:.74rem; color:var(--muted); }
.topbar-mid   { display:flex; align-items:center; gap:10px; }
.save-state   { display:flex; align-items:center; gap:7px; font-size:.82rem; color:var(--muted); }
.save-state .dot { width:8px; height:8px; border-radius:50%; background:var(--st-live); }
.topbar-right { display:flex; align-items:center; gap:12px; }
.btn { border:none; font-family:'Heebo'; font-weight:800; border-radius:10px; font-size:.9rem;
  min-height:40px; padding:0 18px; display:inline-flex; align-items:center; gap:7px; }
.btn-primary { background:var(--accent); color:var(--primary-dark); }
.btn-primary:hover { filter:brightness(.96); }
.btn-ghost { background:transparent; border:1px solid var(--border); color:var(--text); font-weight:700; }
.btn-ghost:hover { background:var(--surface-2); }
/* --- unified action button (intake-v2 A1) --- */
.btn-action{ background:var(--action); color:var(--action-on); border:2.5px solid var(--action-border); border-radius:10px; font-family:'Heebo'; font-weight:800; font-size:.95rem; padding:11px 20px; cursor:pointer; line-height:1; box-shadow:0 1px 0 rgba(0,0,0,.15); display:inline-flex; align-items:center; gap:8px; }
.btn-action:hover{ filter:brightness(.97); }
.btn-action:focus-visible{ outline:3px solid var(--action); outline-offset:2px; }
.btn-action:disabled{ opacity:.55; cursor:default; }
.btn-action--arrow{ border-radius:999px; width:44px; height:44px; padding:0; justify-content:center; font-size:1.2rem; }
.avatar { width:36px; height:36px; border-radius:50%; background:var(--accent-soft);
  color:var(--primary-dark); display:grid; place-items:center;
  font-weight:800; font-family:'Heebo'; font-size:.85rem; }

/* ============================================================ PROGRESS BANNER */
.progress {
  background: var(--surface); border-bottom: 1px solid var(--border);
  position: relative; z-index: 30; flex: none;
}
.progress-head {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 20px; cursor: pointer; user-select: none;
}
.progress-head .lead { font-family:'Heebo'; font-weight:700; font-size:.9rem; color:var(--primary); }
.progress-head .now  { font-size:.82rem; color:var(--muted); }
.progress-head .chev { margin-inline-start:auto; color:var(--muted); transition:transform .2s ease; font-size:.9rem; }
body.banner-collapsed .progress-head .chev { transform:rotate(-180deg); }
.mini-track { display:none; align-items:center; gap:6px; margin-inline-start:14px; }
body.banner-collapsed .mini-track { display:flex; }
.mini-track .seg { width:26px; height:5px; border-radius:3px; background:var(--border); }
.mini-track .seg.done    { background:var(--accent); }
.mini-track .seg.current { background:var(--primary); }
.stepper {
  display: flex; align-items: flex-start; gap: 0;
  padding: 4px 20px 16px;
  overflow: hidden; max-height: 120px;
  transition: max-height .2s ease, padding .2s ease, opacity .15s ease;
  opacity: 1;
}
body.banner-collapsed .stepper { max-height:0; padding-top:0; padding-bottom:0; opacity:0; }
.step { flex:1; display:flex; flex-direction:column; align-items:center; text-align:center; position:relative; padding:0 4px; }
.step:not(:last-child)::before { content:""; position:absolute; top:14px; left:-50%; width:100%; height:3px; background:var(--border); z-index:0; }
.step.done:not(:last-child)::before { background:var(--accent); }
.step .dot {
  width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  background:var(--surface); border:3px solid var(--border); color:var(--muted);
  font-weight:800; font-family:'Heebo'; font-size:.8rem; position:relative; z-index:1;
}
.step.done    .dot { background:var(--accent); border-color:var(--accent); color:#fff; }
.step.current .dot { background:var(--primary); border-color:var(--primary); color:#fff; box-shadow:0 0 0 4px rgba(14,42,71,.12); }
.step .lbl { margin-top:7px; font-size:.76rem; color:var(--muted); font-weight:500; cursor:default; }
.step.current .lbl { color:var(--primary); font-weight:800; }
.step.done .lbl    { color:var(--text); }

/* Tooltip bubble (mobile tap / keyboard) */
.tip-bubble {
  position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
  background:var(--primary-dark); color:#fff; font-size:.75rem; line-height:1.45;
  padding:7px 11px; border-radius:8px; white-space:normal; min-width:140px; max-width:220px;
  text-align:center; z-index:50; box-shadow:var(--shadow-pop); pointer-events:none;
}
.tip-bubble::after {
  content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:5px solid transparent; border-top-color:var(--primary-dark);
}

/* ============================================================ WIZARD / INTAKE */
#view-wizard {
  display: flex; align-items: center; justify-content: center;
  height: 100%; min-height: 0; flex: 1; overflow-y: auto;
  padding: 32px 16px;
}
.wizard-card {
  background: var(--surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: 36px 40px; max-width: 540px; width: 100%;
}
.wizard-card h1 { font-family:'Heebo'; font-size:1.5rem; font-weight:800; color:var(--primary); margin:0 0 6px; }
.wizard-card .sub { color:var(--muted); margin:0 0 28px; }
.wiz-step { display:none; }
.wiz-step.active { display:block; }
.form-row { margin-bottom:18px; }
.form-row label { display:block; font-weight:700; font-size:.88rem; color:var(--text); margin-bottom:6px; }
.form-row input, .form-row select {
  width:100%; border:1.5px solid var(--border); border-radius:var(--radius-sm);
  padding:11px 13px; font-size:.95rem; font-family:inherit;
  background:var(--surface); color:var(--text);
  transition:border-color .15s;
}
.form-row input:focus, .form-row select:focus { outline:none; border-color:var(--secondary); }
.form-row .hint { font-size:.8rem; color:var(--muted); margin-top:4px; }
.form-row .err  { font-size:.8rem; color:#B4232A; margin-top:4px; display:none; }
.upload-zone {
  border: 2px dashed var(--border); border-radius: var(--radius-sm);
  padding: 20px; text-align: center; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.upload-zone:hover { border-color:var(--secondary); background:#EFF5FB; }
.upload-zone .ico { font-size:2rem; margin-bottom:8px; }
.upload-zone .hint-txt { font-size:.85rem; color:var(--muted); }
.upload-preview { max-width:120px; max-height:60px; border-radius:8px; margin-top:12px; }
.wiz-nav { display:flex; justify-content:space-between; align-items:center; margin-top:28px; gap:12px; }
.wiz-nav .back { flex:none; }
.verify-stub {
  background: var(--st-info-bg); border-radius: var(--radius-sm);
  padding: 18px 20px; text-align: center; margin-top: 16px;
}
.verify-stub .big { font-family:'Heebo'; font-weight:800; font-size:1.1rem; color:var(--primary); margin-bottom:6px; }
.verify-stub .sub { font-size:.85rem; color:var(--muted); }

/* ============================================================ RAIL */
.rail-body { flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:8px; }
.rail-section-label {
  font-family:'Heebo'; font-weight:800; font-size:.74rem; color:var(--secondary);
  display:flex; align-items:center; gap:6px; margin:6px 2px 2px;
}
.rail-section-label::before { content:""; width:4px; height:14px; border-radius:2px; background:var(--accent); }
.locked-row {
  display:flex; align-items:center; gap:9px; padding:10px 12px;
  border-radius:var(--radius-sm);
  background:repeating-linear-gradient(135deg,#F1F4F8,#F1F4F8 9px,#EBEFF4 9px,#EBEFF4 18px);
  border:1px dashed var(--border);
}
.locked-row .lname { font-weight:700; font-size:.9rem; color:var(--muted); }
.lock-chip {
  margin-inline-start:auto; display:inline-flex; align-items:center; gap:5px;
  font-size:.7rem; font-weight:800; font-family:'Heebo';
  color:var(--st-info); background:var(--st-info-bg); border-radius:999px; padding:3px 9px;
}
.block-card {
  display:flex; align-items:center; gap:10px; padding:10px 11px;
  border-radius:var(--radius-sm); background:var(--surface);
  border:1px solid var(--border); transition:border-color .15s,box-shadow .15s; cursor:pointer;
}
.block-card:hover  { border-color:#CBD7E5; box-shadow:var(--shadow-soft); }
.block-card.active { border-color:var(--primary); box-shadow:0 0 0 1px var(--primary); }
.block-card .bnum {
  width:24px; height:24px; border-radius:7px; background:var(--st-info-bg); color:var(--secondary);
  font-family:'Heebo'; font-weight:800; font-size:.78rem; display:grid; place-items:center; flex:none;
}
.block-card .binfo { flex:1; min-width:0; }
.block-card .bname { font-weight:700; font-size:.9rem; color:var(--text); }
.block-card .bmeta { font-size:.72rem; color:var(--muted); }
.block-card .acts  { display:flex; align-items:center; gap:3px; }
.iconbtn {
  width:30px; height:30px; border-radius:8px; border:1px solid transparent;
  background:transparent; color:var(--muted); display:grid; place-items:center;
  font-size:.95rem; line-height:1;
}
.iconbtn:hover  { background:var(--st-draft-bg); color:var(--secondary); }
.iconbtn:disabled { opacity:.3; cursor:not-allowed; }
.iconbtn.danger:hover { background:#FCEBEC; color:#B4232A; }

/* ── #8 (run-3): remove-confirm row — high-contrast, always visible ──────── */
.remove-confirm-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: #FFF5F5; border: 1px solid #E9B4B7;
  border-radius: var(--radius-sm); margin: 2px 0 4px;
}
.remove-confirm-row .rc-msg {
  flex: 1; font-family: 'Heebo'; font-size: .8rem;
  color: #7A2020; line-height: 1.35;
}
/* "הסר" — bold danger button: solid red fill, white text */
.remove-confirm-row .rc-yes {
  width: auto; min-height: 44px; padding: 0 14px;
  background: #B4232A; color: #fff;
  border: 2px solid #8C1A1F; border-radius: var(--radius-sm);
  font-family: 'Heebo'; font-weight: 800; font-size: .88rem;
  cursor: pointer; flex-shrink: 0;
}
.remove-confirm-row .rc-yes:hover { background: #8C1A1F; }
/* "בטל" — secondary ghost: visible border, dark text */
.remove-confirm-row .rc-no {
  width: auto; min-height: 44px; padding: 0 14px;
  background: var(--surface); color: var(--secondary);
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  font-family: 'Heebo'; font-weight: 700; font-size: .88rem;
  cursor: pointer; flex-shrink: 0;
}
.remove-confirm-row .rc-no:hover { background: var(--surface-2); border-color: var(--secondary); }
/* ── end #8 ──────────────────────────────────────────────────────────────── */

.reorder { display:flex; flex-direction:column; gap:1px; }
.reorder .iconbtn { width:26px; height:18px; border-radius:5px; }
.add-block {
  margin-top:4px; border:1.5px dashed var(--border); border-radius:var(--radius-sm);
  background:var(--surface-2); color:var(--secondary); font-family:'Heebo';
  font-weight:800; font-size:.9rem; padding:12px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  cursor:pointer; width:100%;
}
.add-block:hover { border-color:var(--secondary); background:#EFF5FB; }
.theme-box { margin-top:6px; border-top:1px solid var(--border-soft); padding-top:12px; display:flex; flex-direction:column; gap:14px; }
.swatch-row { display:flex; gap:9px; flex-wrap:wrap; }
.swatch {
  width:34px; height:34px; border-radius:9px;
  border:2px solid #fff; box-shadow:0 0 0 1px var(--border);
  position:relative; cursor:pointer;
}
.swatch.sel { box-shadow:0 0 0 2px var(--primary); }
.swatch.sel::after { content:"✓"; position:absolute; inset:0; display:grid; place-items:center;
  color:#fff; font-size:.8rem; font-weight:800; text-shadow:0 1px 2px rgba(0,0,0,.3); }
.mini-label { font-size:.78rem; font-weight:700; color:var(--text); margin-bottom:6px; }
.font-pick {
  border:1px solid var(--border); border-radius:var(--radius-sm); padding:9px 11px;
  background:var(--surface-2); display:flex; align-items:center; justify-content:space-between; cursor:pointer;
}
.font-pick .fname { font-family:'Heebo'; font-weight:800; font-size:.92rem; color:var(--text); }
.font-pick .fsub  { font-size:.72rem; color:var(--muted); }

/* Block catalog picker modal */
.catalog-modal {
  position:fixed; inset:0; background:rgba(8,27,48,.35); z-index:100;
  display:none; place-items:center; backdrop-filter:blur(2px);
}
.catalog-modal.open { display:grid; }
.catalog-card {
  background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-pop);
  padding:28px; max-width:580px; width:90%; max-height:80vh; overflow-y:auto;
}
.catalog-card h2 { font-family:'Heebo'; font-size:1.2rem; font-weight:800; color:var(--primary); margin:0 0 16px; }
.catalog-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.cat-item {
  border:1.5px solid var(--border); border-radius:var(--radius-sm); padding:14px 16px;
  cursor:pointer; transition:border-color .15s,background .15s;
}
.cat-item:hover { border-color:var(--secondary); background:var(--st-info-bg); }
.cat-item .ci-name { font-family:'Heebo'; font-weight:800; font-size:.95rem; color:var(--primary); margin-bottom:4px; }
.cat-item .ci-desc { font-size:.8rem; color:var(--muted); }

/* ============================================================ PREVIEW */
.preview-bar {
  flex:none; display:flex; align-items:center; gap:10px; padding:11px 16px;
  background:var(--surface); border-bottom:1px solid var(--border);
}
.device-toggle {
  display:inline-flex; background:var(--bg); border:1px solid var(--border);
  border-radius:999px; padding:3px; gap:2px;
}
.device-toggle button {
  border:none; background:transparent; border-radius:999px; padding:7px 15px;
  font-family:'Heebo'; font-weight:700; font-size:.82rem; color:var(--muted);
  display:flex; align-items:center; gap:6px; min-height:34px;
}
.device-toggle button.active { background:var(--surface); color:var(--primary); box-shadow:var(--shadow-soft); }

.pin-toggle {
  display:inline-flex; align-items:center; gap:6px; border:1px solid var(--border);
  background:var(--surface); border-radius:10px; padding:7px 13px;
  font-family:'Heebo'; font-weight:700; font-size:.82rem; color:var(--secondary); min-height:36px;
}
.pin-toggle.on { background:var(--st-wait-bg); border-color:#F0E0B5; color:var(--accent-deep); }
.preview-stage {
  flex:1; overflow:auto; padding:26px;
  display:flex; justify-content:center; align-items:flex-start; position:relative;
}
.device {
  background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow);
  overflow:hidden; transition:max-width .25s ease; position:relative; width:100%;
}
.device.desktop { max-width:980px; }
.device.mobile  { max-width:380px; }
#preview-frame { width:100%; border:none; min-height:600px; display:block; }
.pv-overlay {
  position:absolute; inset:0; display:none; place-items:center;
  background:rgba(244,247,251,.72); backdrop-filter:blur(2px); z-index:6;
}
.pv-overlay.show { display:grid; }
.pv-card { background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:22px 26px; text-align:center; max-width:300px; }
.pv-card .spin { width:34px; height:34px; border-radius:50%; border:3px solid var(--border);
  border-top-color:var(--accent); margin:0 auto 12px; animation:spin .9s linear infinite; }
@keyframes spin { to{transform:rotate(360deg);} }
.pv-card h3 { margin:0 0 5px; font-size:1rem; color:var(--primary); font-family:'Heebo'; }
.pv-card p  { margin:0; font-size:.85rem; color:var(--muted); }
.saved-toast {
  position:absolute; top:16px; right:50%; transform:translateX(50%); z-index:7;
  background:var(--st-live-bg); color:var(--st-live); border:1px solid #BFE6CF;
  border-radius:999px; padding:8px 16px; font-family:'Heebo'; font-weight:800;
  font-size:.84rem; display:none; align-items:center; gap:7px; box-shadow:var(--shadow-soft);
}
.saved-toast.show { display:flex; }
.reject-toast {
  position:absolute; top:16px; right:50%; transform:translateX(50%); z-index:7;
  background:#FCEBEC; color:#B4232A; border:1px solid #E9B4B7;
  border-radius:var(--radius-sm); padding:10px 16px; font-family:'Heebo';
  font-size:.84rem; max-width:360px; display:none; box-shadow:var(--shadow-soft);
}
.reject-toast.show { display:block; }

/* ============================================================ AI CHAT */
.chat-body { flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; }
.chat-msg { max-width:88%; padding:10px 13px; border-radius:var(--radius-sm); font-size:.9rem; line-height:1.5; }
.chat-msg.user { background:var(--primary); color:#fff; align-self:flex-start; border-bottom-right-radius:3px; }
.chat-msg.ai   { background:var(--st-info-bg); color:var(--text); align-self:flex-end; border-bottom-left-radius:3px; }
.chat-msg.err  { background:#FCEBEC; color:#B4232A; align-self:flex-end; }
.chat-footer { padding:10px 12px; border-top:1px solid var(--border); display:flex; gap:8px; flex:none; }
.chat-footer textarea {
  flex:1; border:1.5px solid var(--border); border-radius:var(--radius-sm);
  padding:9px 11px; font-size:.9rem; font-family:inherit; resize:none;
  background:var(--surface); color:var(--text); min-height:54px; max-height:160px;
}
.chat-footer textarea:focus { outline:none; border-color:var(--secondary); }
.chat-footer .send { width:40px; height:40px; border-radius:10px; background:var(--accent);
  color:var(--primary-dark); border:none; display:grid; place-items:center; font-size:1.1rem; align-self:flex-end; }
.chat-footer .send:hover { filter:brightness(.96); }
body.chat-collapsed .chat-body,
body.chat-collapsed .chat-footer,
body.chat-collapsed .chat-unavailable-msg { display:none; }
/* FIX #14b: keep the collapse toggle visible + clickable in the 52px rail so
   the user can RE-OPEN the chat (was: title pushed the button out of view). */
body.chat-collapsed .zone-chat .zone-head .ico,
body.chat-collapsed .zone-chat .zone-head h2 { display:none; }
body.chat-collapsed .zone-chat .zone-head { justify-content:center; padding-inline:0; }

/* ── chat unavailable notice (shown when ai_chat affordance is off) ── */
.chat-unavailable-msg {
  margin: 0 12px 12px;
  padding: 12px 14px;
  background: var(--st-info-bg, #EEF4FF);
  border: 1.5px solid var(--secondary, #6C8EBF);
  border-radius: var(--radius-sm, 8px);
  color: var(--text);
  font-size: .88rem;
  line-height: 1.55;
  text-align: right;
  direction: rtl;
}

/* ============================================================ PIN OVERLAY */
.pin-wrap { position:absolute; inset:0; pointer-events:none; }
.pin-wrap.active { pointer-events:auto; cursor:crosshair; }
.pin-marker {
  position:absolute; transform:translate(-50%,-100%);
  width:30px; height:38px; pointer-events:auto; cursor:pointer;
}
.pin-body {
  width:30px; height:30px; border-radius:50% 50% 50% 0;
  background:var(--accent); transform:rotate(-45deg);
  border:2px solid #fff; display:grid; place-items:center;
  box-shadow:0 4px 12px rgba(8,27,48,.3);
}
.pin-num { transform:rotate(45deg); color:var(--primary-dark); font-family:'Heebo'; font-weight:800; font-size:.75rem; }
.pin-resolved .pin-body { background:var(--st-live); }
.pin-note {
  position:absolute; top:42px; right:-8px; width:220px;
  background:var(--surface); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-pop); border:1px solid var(--border); padding:12px 13px; z-index:9;
  display:none;
}
.pin-note.open { display:block; }
.pin-note .nhead { display:flex; align-items:center; gap:7px; margin-bottom:7px; }
.pin-note .who   { font-family:'Heebo'; font-weight:800; font-size:.78rem; color:var(--primary); }
.pin-note .x     { margin-inline-start:auto; color:var(--muted); background:none; border:none; font-size:1rem; line-height:1; }
.pin-note p      { margin:0; font-size:.84rem; color:var(--text); line-height:1.5; }
.pin-note .nfoot { margin-top:9px; display:flex; gap:7px; }
.pin-note .nfoot button { flex:1; font-family:'Heebo'; font-weight:700; font-size:.78rem; border-radius:8px; min-height:34px; border:none; }
.pin-note .nfoot .ok { background:var(--accent); color:var(--primary-dark); }
.pin-note .nfoot .gh { background:transparent; border:1px solid var(--border); color:var(--muted); }

/* Pin list in rail */
.pin-list-item {
  display:flex; align-items:flex-start; gap:8px; padding:9px 11px;
  border-radius:var(--radius-sm); border:1px solid var(--border);
  font-size:.88rem; background:var(--surface);
}
.pin-list-item.resolved { opacity:.55; }
.pin-list-item .pnum { font-family:'Heebo'; font-weight:800; color:var(--accent-deep); min-width:18px; }
.pin-list-item .ptxt { flex:1; color:var(--text); }
.pin-list-item .pst  { font-size:.72rem; color:var(--muted); }

/* ============================================================ SLOT EDITOR */
.slot-editor-overlay {
  position:fixed; inset:0; background:rgba(8,27,48,.25); z-index:50;
  display:none; place-items:center;
}
.slot-editor-overlay.open { display:grid; }
.slot-editor-card {
  background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-pop);
  padding:28px 32px; max-width:520px; width:92%;
}
.slot-editor-card h2 { font-family:'Heebo'; font-size:1.1rem; font-weight:800; color:var(--primary); margin:0 0 18px; }
.slot-editor-card .slot-row { margin-bottom:16px; }
.slot-editor-card .slot-row label { display:block; font-weight:700; font-size:.86rem; color:var(--text); margin-bottom:5px; }
.slot-editor-card .slot-row input,
.slot-editor-card .slot-row textarea {
  width:100%; border:1.5px solid var(--border); border-radius:var(--radius-sm);
  padding:9px 12px; font-size:.93rem; font-family:inherit; background:var(--surface); color:var(--text);
}
.slot-editor-card .slot-row textarea { min-height:80px; resize:vertical; }
.slot-editor-card .slot-row input:focus,
.slot-editor-card .slot-row textarea:focus { outline:none; border-color:var(--secondary); }
.slot-editor-card .slot-row .slot-err { font-size:.8rem; color:#B4232A; margin-top:4px; display:none; }
.slot-editor-card .slot-row .slot-err.show { display:block; }
.slot-editor-footer { display:flex; gap:10px; justify-content:flex-end; margin-top:20px; }

/* ============================================================ BATCH 2 DIRECT CONTROLS */

/* Font picker cards */
.ctrl-font-card {
  display:flex; flex-direction:column; gap:2px;
  border:1.5px solid var(--border); border-radius:var(--radius-sm);
  padding:9px 11px; background:var(--surface-2); cursor:pointer; width:100%;
  text-align:start; transition:border-color .15s,background .15s;
}
.ctrl-font-card:hover { border-color:var(--secondary); background:#EFF5FB; }
.ctrl-font-card.sel   { border-color:var(--primary); background:var(--st-info-bg); }
.ctrl-font-heading { font-size:1rem; font-weight:800; color:var(--text); }
.ctrl-font-sub     { font-size:.72rem; color:var(--muted); }

/* Free color picker */
.ctrl-color-wrap { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ctrl-color-input {
  width:40px; height:40px; border:1.5px solid var(--border);
  border-radius:var(--radius-sm); padding:2px; cursor:pointer; background:none;
}
.ctrl-color-apply { min-height:34px; padding:0 12px; font-size:.82rem; }

/* Shape toggle */
.ctrl-shape-row { display:flex; gap:8px; }
.ctrl-shape-btn {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  border:1.5px solid var(--border); border-radius:var(--radius-sm);
  padding:8px; background:var(--surface-2); cursor:pointer;
  transition:border-color .15s,background .15s;
}
.ctrl-shape-btn:hover { border-color:var(--secondary); background:#EFF5FB; }
.ctrl-shape-btn.sel   { border-color:var(--primary); background:var(--st-info-bg); }
.ctrl-shape-icon { font-size:1.2rem; color:var(--text); }
.ctrl-shape-lbl  { font-size:.74rem; color:var(--muted); font-weight:700; }

/* Floating header toggle */
.ctrl-toggle-wrap { display:flex; align-items:center; gap:8px; }
.ctrl-toggle-chk  { width:18px; height:18px; accent-color:var(--primary); cursor:pointer; }
.ctrl-toggle-label { font-size:.84rem; font-weight:700; color:var(--text); cursor:pointer; }

/* Background swapper */
.ctrl-bg-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:6px;
}
.ctrl-bg-thumb {
  aspect-ratio:16/9; border:2px solid var(--border); border-radius:8px;
  background:var(--surface-2); overflow:hidden; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:.7rem; color:var(--muted); padding:2px;
  transition:border-color .15s,box-shadow .15s;
}
.ctrl-bg-thumb:hover { border-color:var(--secondary); box-shadow:var(--shadow-soft); }
.ctrl-bg-thumb.sel   { border-color:var(--primary); box-shadow:0 0 0 1px var(--primary); }
.ctrl-bg-thumb img   { width:100%; height:100%; object-fit:cover; border-radius:6px; }

/* Inline error */
.ctrl-inline-err {
  font-size:.78rem; color:#B4232A; margin-top:4px; display:none;
}

/* Loading / empty states */
.ctrl-loading, .ctrl-empty {
  font-size:.82rem; color:var(--muted); padding:8px 0; text-align:center;
}

/* Highlight pulse — fired by Controls.open*() */
@keyframes ctrl-highlight-pulse {
  0%   { box-shadow:0 0 0 0 rgba(14,42,71,.3); }
  50%  { box-shadow:0 0 0 6px rgba(14,42,71,.0); }
  100% { box-shadow:0 0 0 0 rgba(14,42,71,.0); }
}
.ctrl-highlight { animation:ctrl-highlight-pulse .5s ease 2; }

/* @ hint badge in chat footer */
.at-hint {
  align-self:flex-end; margin-bottom:7px;
  width:24px; height:24px; border-radius:7px;
  background:var(--st-info-bg); color:var(--secondary);
  display:grid; place-items:center;
  font-family:'Heebo'; font-weight:800; font-size:.85rem;
  cursor:pointer; flex:none;
  border:1px solid var(--border);
  transition:background .12s,color .12s;
}
.at-hint:hover { background:var(--secondary); color:#fff; }

/* ============================================================ @-COMMAND MENU */
#at-cmd-menu {
  position:absolute;
  bottom:calc(100% + 4px);  /* float above the chat-footer */
  inset-inline-end:0;
  width:260px;
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-pop);
  z-index:200;
  overflow:hidden;
  direction:rtl;
}

.at-cmd-item {
  display:flex; align-items:center; gap:8px;
  padding:9px 13px; cursor:pointer;
  border-bottom:1px solid var(--border-soft);
  transition:background .1s;
}
.at-cmd-item:last-child { border-bottom:none; }
.at-cmd-item:hover, .at-cmd-item--active {
  background:var(--st-info-bg);
}

.at-cmd-chip {
  font-family:'Heebo'; font-weight:700; font-size:.88rem;
  color:#1d4ed8;           /* blue */
  background:#eff6ff;
  border-radius:5px; padding:2px 7px;
  white-space:nowrap; flex:none;
}

.at-cmd-desc {
  font-size:.82rem; color:var(--muted); flex:1; text-align:right;
}

/* @-token chip in chat body (blue + bold, run-3 owner spec) */
.chat-at-chip {
  align-self:flex-start;
  background:transparent;
  padding:2px 0;
  max-width:none;
}

.at-token {
  display:inline-block;
  font-family:'Heebo'; font-weight:700; font-size:.9rem;
  color:#1d4ed8;          /* blue */
  background:#eff6ff;
  border-radius:6px;
  padding:3px 10px;
  border:1px solid #bfdbfe;
}

/* ============================================================ D1 — ENTRY CHOICE CARDS */
.choice-grid { display:flex; flex-direction:column; gap:14px; }

.choice {
  display:flex; align-items:flex-start; gap:16px; width:100%; text-align:start;
  border-radius:var(--radius); padding:20px; cursor:pointer;
  border:1.5px solid var(--border); background:var(--surface-2);
  transition:border-color .15s,box-shadow .15s,transform .12s;
}
.choice:hover { box-shadow:var(--shadow-soft); transform:translateY(-1px); }

.choice.primary {
  border:2px solid var(--accent);
  background:linear-gradient(180deg,#FFFDF7,#FFFFFF);
  box-shadow:0 8px 26px rgba(200,160,75,.18);
  position:relative;
}
.choice.primary:hover { box-shadow:0 12px 32px rgba(200,160,75,.26); }

.choice .ic {
  width:54px; height:54px; flex:none; border-radius:14px;
  display:grid; place-items:center; font-size:1.7rem;
  background:var(--st-info-bg);
}
.choice.primary .ic { background:var(--accent-soft); }
.choice .body { flex:1; min-width:0; }

.choice .ribbon {
  display:inline-flex; align-items:center; gap:5px;
  background:var(--accent); color:var(--primary-dark);
  font-family:'Heebo'; font-weight:800; font-size:.72rem;
  border-radius:999px; padding:3px 10px; margin-bottom:8px;
}
.choice h2 { font-family:'Heebo'; font-weight:800; font-size:1.15rem; color:var(--primary); margin:0 0 4px; line-height:1.3; }
.choice p  { font-size:.9rem; color:var(--muted); margin:0 0 10px; }
.choice ul { margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:6px 14px; }
.choice li { font-size:.84rem; color:var(--text); display:flex; align-items:center; gap:6px; }
.choice li::before { content:"✓"; color:var(--st-live); font-weight:800; }

.choice .go {
  margin-top:14px; display:inline-flex; align-items:center; gap:7px;
  font-family:'Heebo'; font-weight:800; font-size:.95rem;
  border:none; border-radius:11px; min-height:46px; padding:0 22px;
}
.choice.primary .go   { background:var(--accent); color:var(--primary-dark); }
.choice.secondary .go { background:transparent; border:1px solid var(--border); color:var(--secondary); }
.choice .chev { margin-inline-start:auto; color:var(--muted); font-size:1.3rem; align-self:center; }

.choice.secondary { padding:16px 18px; }
.choice.secondary .ic  { width:44px; height:44px; font-size:1.35rem; }
.choice.secondary h2   { font-size:1.02rem; }

.reassure { margin-top:20px; text-align:center; font-size:.82rem; color:var(--muted); }
.reassure b { color:var(--text); font-weight:700; }

.iconbtn-help {
  width:38px; height:38px; min-width:44px; min-height:44px;
  border-radius:50%; border:1px solid var(--border);
  background:var(--surface); color:var(--secondary);
  font-family:'Heebo'; font-weight:800; font-size:1.1rem;
  display:grid; place-items:center; padding:0;
}
.iconbtn-help:hover { background:var(--surface-2); border-color:var(--secondary); }

@media(max-width:480px) {
  .choice { padding:16px; gap:12px; }
  .choice .ic { width:46px; height:46px; font-size:1.4rem; }
  .choice ul  { flex-direction:column; gap:5px; }
  .choice .go { width:100%; justify-content:center; }
  .choice .chev { display:none; }
}

/* ============================================================ D2 — ONBOARDING OVERLAY */
.onb-overlay {
  position:fixed; inset:0; z-index:9500;
  background:rgba(8,27,48,.55); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center;
  padding:20px 16px; overflow-y:auto;
}
.onb-overlay[hidden] { display:none; }

.onb-card {
  background:var(--surface); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-pop); max-width:460px; width:100%;
  padding:28px 26px 22px; position:relative;
  animation:onb-pop .28s cubic-bezier(.16,1,.3,1);
}
@keyframes onb-pop {
  from { opacity:0; transform:translateY(14px) scale(.97); }
  to   { opacity:1; transform:none; }
}
@media(prefers-reduced-motion:reduce) {
  .onb-card { animation:none; }
}

.onb-x {
  position:absolute; top:14px; inset-inline-start:14px;
  width:34px; height:34px; border-radius:9px; border:none; background:transparent;
  color:var(--muted); font-size:1.3rem; line-height:1; display:grid; place-items:center;
}
.onb-x:hover { background:var(--surface-2); color:var(--text); }

.onb-badge {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--st-live-bg); color:var(--st-live);
  font-family:'Heebo'; font-weight:800; font-size:.78rem;
  border-radius:999px; padding:5px 12px; margin-bottom:14px;
}
.onb-card h2 {
  font-family:'Heebo'; font-weight:800; font-size:1.42rem; color:var(--primary);
  margin:0 0 6px; line-height:1.25;
}
.onb-sub { color:var(--muted); font-size:.96rem; margin:0 0 22px; }

.onb-steps { display:flex; flex-direction:column; gap:12px; margin-bottom:16px; }
.onb-step {
  display:flex; align-items:center; gap:14px;
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius); padding:14px 15px; text-align:start;
}
.onb-step .num {
  width:38px; height:38px; flex:none; border-radius:11px;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  color:#fff; font-family:'Heebo'; font-weight:800; font-size:1.05rem;
  display:grid; place-items:center;
}
.onb-step .txt { flex:1; min-width:0; }
.onb-step .t-title { font-family:'Heebo'; font-weight:800; font-size:1.02rem; color:var(--text); line-height:1.3; }
.onb-step .t-sub   { font-size:.83rem; color:var(--muted); margin-top:2px; }
.onb-step .emoji   { font-size:1.5rem; flex:none; }

.onb-disclosure {
  font-size:.76rem; color:var(--muted); text-align:center;
  margin:0 0 14px; padding:0 4px; line-height:1.5;
}

.onb-actions { display:flex; flex-direction:column; gap:9px; }
.onb-btn {
  border:none; font-family:'Heebo'; font-weight:800; border-radius:12px; font-size:1rem;
  min-height:50px; padding:0 18px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%;
}
.onb-btn-primary { background:var(--accent); color:var(--primary-dark); }
.onb-btn-primary:hover { filter:brightness(.96); }
.onb-btn-ghost {
  background:transparent; border:1px solid var(--border); color:var(--muted);
  font-weight:700; min-height:44px; font-size:.9rem;
}
.onb-btn-ghost:hover { background:var(--surface-2); color:var(--text); }

@media(max-width:480px) {
  .onb-card { padding:24px 18px 18px; }
  .onb-card h2 { font-size:1.28rem; }
}

/* ============================================================ B-3: REVIEW MODE
   body.review-mode — hides all chrome; expands preview full-bleed.
   The iframe stays; zone-preview becomes the only visible zone.
   Sticky bar sits above the bottom edge, always visible.
   ============================================================ */

/* Hide all editor chrome in review mode */
body.review-mode .topbar,
body.review-mode #progress-banner,
body.review-mode .zone-rail,
body.review-mode .zone-chat,
body.review-mode .preview-bar,
body.review-mode .pin-wrap        { display:none !important; }

/* Collapse workspace grid to a single column (the preview) */
body.review-mode .workspace {
  grid-template-columns: 1fr !important;
}

/* Preview zone fills the whole viewport height minus the sticky bar */
body.review-mode .zone-preview {
  background: #000;
}

/* Remove padding/device-frame chrome — go full-bleed */
body.review-mode .preview-stage {
  padding: 0;
  align-items: stretch;
  height: 100%;
}
body.review-mode #device-frame {
  max-width: 100% !important;
  border-radius: 0;
  box-shadow: none;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
body.review-mode #preview-frame {
  flex: 1;
  min-height: 0;
  height: 100%;
}

/* Keep layout filling the full height so preview stretches */
body.review-mode #view-editor {
  height: 100vh;
  height: 100dvh;
}

/* Sticky review bar */
.review-bar {
  position: fixed;
  bottom: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  z-index: 200;
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -6px 24px rgba(14,42,71,.10);
  padding: 14px 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  /* hidden by default (JS toggles via [hidden]) */
}
.review-bar[hidden] { display: none !important; }

.review-bar__heading {
  margin: 0;
  font-family: 'Heebo', system-ui, Arial, sans-serif;
  font-weight: 700;
  font-size: .97rem;
  color: var(--primary);
  text-align: center;
  line-height: 1.5;
  max-width: 560px;
}

.review-bar__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  max-width: 480px;
}

/* Ensure ≥44px touch targets on both buttons */
.review-bar__btn-proceed,
.review-bar__btn-back {
  min-height: 48px;
  min-width: 160px;
  flex: 1;
  font-size: 1rem;
}

@media(max-width: 480px) {
  .review-bar {
    padding: 12px 14px env(safe-area-inset-bottom, 12px);
  }
  .review-bar__heading { font-size: .9rem; }
  .review-bar__btn-proceed,
  .review-bar__btn-back { min-width: 120px; font-size: .93rem; }
}

/* Ensure the preview-stage can grow to fill remaining height in review mode */
body.review-mode #view-editor .workspace {
  flex: 1;
  min-height: 0;
}
/* Reserve space at the bottom so the sticky bar does not cover the iframe */
body.review-mode .preview-stage {
  padding-bottom: 88px;
}

/* ============================================================ B-4: QA GATE UI
   Spinner overlay + result panel.
   Mobile-first, RTL, app.css tokens.
   ============================================================ */

/* ── QA Spinner overlay ──────────────────────────────────────────────────── */
#qa-spinner {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(14, 26, 40, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
}
#qa-spinner[hidden] { display: none !important; }

.qa-spinner__inner {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  padding: 36px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  min-width: 220px;
}

.qa-spinner__text {
  margin: 0;
  font-family: 'Heebo', system-ui, Arial, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--primary);
  text-align: center;
}

/* ── QA Result Panel ─────────────────────────────────────────────────────── */
#qa-panel {
  position: fixed;
  inset: 0;
  z-index: 290;
  background: rgba(14, 26, 40, 0.50);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
#qa-panel[hidden] { display: none !important; }

.qa-panel__card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  padding: 28px 24px 24px;
  max-width: 480px;
  width: 100%;
  direction: rtl;
  text-align: right;
}

.qa-panel__title {
  margin: 0 0 20px;
  font-family: 'Heebo', system-ui, Arial, sans-serif;
  font-weight: 700;
  font-size: 1.12rem;
  color: var(--primary);
}

.qa-panel__list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.qa-issue {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}

.qa-issue__label {
  font-family: 'Heebo', system-ui, Arial, sans-serif;
  font-size: .95rem;
  color: var(--text);
  line-height: 1.45;
  flex: 1;
}

.qa-issue__fix-btn {
  flex-shrink: 0;
  min-height: 40px;
  min-width: 90px;
  font-size: .88rem;
  border-color: var(--accent-deep);
  color: var(--accent-deep);
}
.qa-issue__fix-btn:hover {
  background: var(--accent-soft);
}

.qa-panel__footer {
  margin: 0 0 20px;
  font-size: .88rem;
  color: var(--muted);
  line-height: 1.5;
  text-align: center;
}

.qa-panel__actions {
  display: flex;
  justify-content: center;
}

.qa-panel__btn-back {
  min-height: 44px;
  min-width: 140px;
  font-size: .95rem;
}

@media(max-width: 480px) {
  .qa-panel__card { padding: 20px 14px 16px; }
  .qa-panel__title { font-size: 1rem; }
  .qa-issue { flex-direction: column; align-items: flex-start; gap: 8px; }
  .qa-issue__fix-btn { width: 100%; }
}

/* ============================================================ B-6: APPROVE + PUBLISH UI
   S4 Approve card · S5 Publishing screen · S6 Live screen.
   Mobile-first, RTL, app.css tokens.
   ============================================================ */

/* ── S4: Approve card overlay ───────────────────────────────────────────── */
#approve-card {
  position: fixed;
  inset: 0;
  z-index: 310;
  background: rgba(14, 26, 40, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
#approve-card[hidden] { display: none !important; }

.approve-card__inner {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  padding: 32px 28px 28px;
  max-width: 460px;
  width: 100%;
  direction: rtl;
  text-align: right;
}

.approve-card__title {
  margin: 0 0 14px;
  font-family: 'Heebo', system-ui, Arial, sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--primary);
}

.approve-card__body {
  margin: 0 0 28px;
  font-size: 1rem;
  color: var(--text);
  line-height: 1.6;
}

.approve-card__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.approve-card__btn-primary {
  min-height: 52px;
  font-size: 1rem;
  font-weight: 700;
  font-family: 'Heebo', system-ui, Arial, sans-serif;
  width: 100%;
}

.approve-card__btn-back {
  min-height: 44px;
  font-size: .95rem;
  width: 100%;
}

.approve-card__error {
  margin: 16px 0 0;
  font-size: .88rem;
  color: #B4232A;
  text-align: center;
  line-height: 1.5;
}
.approve-card__error[hidden] { display: none !important; }

/* ── S5: Publishing screen overlay ─────────────────────────────────────── */
#publish-card {
  position: fixed;
  inset: 0;
  z-index: 310;
  background: rgba(14, 26, 40, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
#publish-card[hidden] { display: none !important; }

.publish-card__inner {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  padding: 40px 32px 36px;
  max-width: 460px;
  width: 100%;
  direction: rtl;
  text-align: center;
}

/* S5 */
.publish-s5__icon {
  font-size: 3rem;
  margin-bottom: 18px;
  display: block;
}

.publish-s5__title {
  margin: 0 0 14px;
  font-family: 'Heebo', system-ui, Arial, sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--primary);
}

.publish-s5__body {
  margin: 0;
  font-size: .97rem;
  color: var(--muted);
  line-height: 1.6;
}

/* S6 */
#publish-s6[hidden] { display: none !important; }

.publish-s6__icon {
  font-size: 3rem;
  margin-bottom: 18px;
  display: block;
}

.publish-s6__title {
  margin: 0 0 18px;
  font-family: 'Heebo', system-ui, Arial, sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--st-live);
}

.publish-s6__url {
  display: inline-block;
  margin: 0 0 24px;
  font-size: .95rem;
  color: var(--secondary);
  word-break: break-all;
  text-decoration: underline;
}

.publish-s6__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.publish-s6__btn-copy,
.publish-s6__btn-wa {
  min-height: 48px;
  font-size: .97rem;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

@media (max-width: 480px) {
  .approve-card__inner  { padding: 24px 18px 20px; }
  .approve-card__title  { font-size: 1.1rem; }
  .publish-card__inner  { padding: 28px 18px 24px; }
  .publish-s5__title,
  .publish-s6__title    { font-size: 1.1rem; }
}

/* ============================================================ RUN1-#4: INTAKE FORM (re-skin)
   The rich intake form (intake_form.js) was built with inline DARK styles
   (#1a1a2e card, #0d0d1a inputs) that clashed with the light editor + entry
   screen. These classes re-skin it onto the SHARED design tokens so the form
   feels like the same product. Mobile-first, RTL, WCAG-AA, >=44px targets.
   intake_form.js now emits class names instead of inline styles.
   ============================================================ */

/* Backdrop + scroll container */
.if-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(8,27,48,.45); backdrop-filter: blur(3px);
  display: flex; align-items: flex-start; justify-content: center;
  overflow-y: auto; padding: 24px 16px;
}

/* The form card -- light surface, shared radius + pop shadow */
.if-card {
  background: var(--surface); color: var(--text);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-pop);
  padding: 32px; width: 100%; max-width: 680px; position: relative;
  animation: onb-pop .28s cubic-bezier(.16,1,.3,1);
}
@media (prefers-reduced-motion: reduce) { .if-card { animation: none; } }

.if-title {
  font-family: 'Heebo', system-ui, Arial, sans-serif;
  font-size: 1.42rem; font-weight: 800; color: var(--primary);
  margin: 0 0 6px; line-height: 1.25;
}
.if-subtitle { font-size: .96rem; color: var(--muted); margin: 0 0 24px; line-height: 1.5; }

/* Chunk 11 — CTA segmented selector */
.if-cta-seg-row {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px;
}
.if-cta-seg-btn {
  flex: 1; min-width: 90px;
  padding: 9px 12px; border-radius: 8px;
  border: 1.5px solid var(--border-soft);
  background: var(--surface); color: var(--text);
  font-family: 'Heebo', system-ui, Arial, sans-serif;
  font-size: .88rem; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.if-cta-seg-btn:hover { border-color: var(--accent); }
.if-cta-seg-btn.sel {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--secondary); font-weight: 700;
}

/* Chunk 8 — guided scroll arrows (between sections) */
.if-scroll-arrow {
  display: block;
  margin: 4px auto 20px;
}

/* #6: Footer nudge (scroll-up reminder above action row) */
.if-footer-nudge {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 0 6px;
  border-top: 1px solid var(--border-soft);
}
/* Nudge's up-arrow: smaller, inline with text */
.if-footer-nudge .if-scroll-arrow {
  width: 32px; height: 32px; font-size: .95rem; margin: 0; flex: none;
}
.if-scroll-nudge-text { font-size: .82rem; color: var(--muted); }

/* Chunk 7 — guidance header */
.if-guidance-header {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent), color-mix(in srgb, var(--secondary) 6%, transparent));
  border: 1.5px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 10px;
  padding: 16px 20px;
  margin: 0 0 24px;
}
/* #2: welcome band — sits above the guidance title inside .if-guidance-header */
.if-welcome {
  font-family: 'Heebo', system-ui, Arial, sans-serif;
  font-size: .95rem; font-weight: 600; color: var(--secondary);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 8px;
  padding: 11px 14px;
  margin: 0 0 14px;
  line-height: 1.55;
}
.if-welcome strong { color: var(--accent); font-weight: 800; }
.if-guidance-title {
  font-family: 'Heebo', system-ui, Arial, sans-serif;
  font-size: 1rem; font-weight: 800; color: var(--secondary);
  margin: 0 0 8px;
}
.if-guidance-body {
  font-size: .88rem; color: var(--text); line-height: 1.65;
  margin: 0;
}

/* Section */
.if-section { margin-bottom: 26px; }
.if-section-title {
  font-family: 'Heebo', system-ui, Arial, sans-serif;
  font-size: .92rem; font-weight: 800; color: var(--secondary);
  margin: 0 0 14px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border-soft);
  display: flex; align-items: center; gap: 7px;
}
.if-section-title::before { content:""; width:4px; height:15px; border-radius:2px; background:var(--accent); flex:none; }
.if-section-hint { font-size: .82rem; color: var(--muted); margin: 0 0 12px; line-height: 1.5; }

/* Rows + labels */
.if-row { margin-bottom: 16px; }
.if-label { display: block; font-size: .86rem; font-weight: 700; color: var(--text); margin-bottom: 6px; }

/* Inputs / textareas / selects -- shared field style */
.if-field {
  width: 100%; box-sizing: border-box;
  padding: 11px 13px; font-size: .95rem; font-family: inherit;
  background: var(--surface); color: var(--text);
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  transition: border-color .15s; margin-top: 2px;
}
.if-field::placeholder { color: var(--muted); opacity: .75; }
.if-field:focus { outline: none; border-color: var(--secondary); }
textarea.if-field { resize: vertical; min-height: 64px; line-height: 1.5; }

/* Sub-card (a testimonial block) */
.if-subcard {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px; margin-bottom: 12px;
}
.if-subcard-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.if-subcard-num {
  font-family: 'Heebo', system-ui, Arial, sans-serif;
  font-size: .8rem; font-weight: 800; color: var(--secondary);
}

/* Repeating add/remove rows */
.if-inline-row { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }

/* Add button (dashed, like .add-block) */
.if-add-btn {
  margin-top: 8px; min-height: 44px; padding: 0 16px;
  border: 1.5px dashed var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--secondary);
  font-family: 'Heebo', system-ui, Arial, sans-serif; font-weight: 800; font-size: .88rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.if-add-btn:hover { border-color: var(--secondary); background: #EFF5FB; }

/* Remove button -- >=44px tap target */
.if-remove-btn {
  flex: none; width: 44px; height: 44px; border-radius: var(--radius-sm);
  border: 1px solid transparent; background: transparent; color: var(--muted);
  font-size: 1rem; line-height: 1; display: grid; place-items: center; cursor: pointer;
  transition: background .15s, color .15s;
}
.if-remove-btn:hover { background: #FCEBEC; color: #B4232A; }

/* Image drop zone */
.if-img-cat { margin-bottom: 18px; }
.if-img-cat-label { font-size: .86rem; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.if-img-cat-hint  { font-size: .78rem; color: var(--muted); margin-bottom: 8px; line-height: 1.45; }
.if-img-zone {
  border: 2px dashed var(--border); border-radius: var(--radius-sm);
  padding: 16px; min-height: 64px; cursor: pointer; text-align: center;
  color: var(--muted); font-size: .85rem;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px;
  transition: border-color .15s, background .15s;
}
.if-img-zone:hover { border-color: var(--secondary); background: #EFF5FB; }
.if-img-zone.dragover { border-color: var(--secondary); background: var(--st-info-bg); }
.if-img-thumb { position: relative; width: 64px; height: 64px; border-radius: 8px; overflow: hidden; display: inline-block; box-shadow: var(--shadow-soft); }
.if-img-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.if-img-thumb-rem {
  position: absolute; top: 3px; inset-inline-end: 3px;
  width: 22px; height: 22px; border-radius: 50%; border: none;
  background: rgba(8,27,48,.7); color: #fff; cursor: pointer;
  font-size: 12px; line-height: 1; padding: 0; display: grid; place-items: center;
}

/* Choice group label */
.if-choice-label { font-size: .86rem; font-weight: 700; color: var(--text); margin-bottom: 8px; }

/* Font-pair option buttons (#4: demo words layout) */
.if-choice-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.if-font-btn {
  flex: 1; min-width: 110px; min-height: 60px; padding: 9px 12px;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text); cursor: pointer;
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  transition: border-color .15s, background .15s;
}
.if-font-btn:hover { border-color: var(--secondary); background: #EFF5FB; }
.if-font-btn.sel   { border-color: var(--primary); background: var(--st-info-bg); box-shadow: 0 0 0 1px var(--primary); }
/* Demo word lines inside each font-pair button */
.if-font-demo-head {
  font-size: 1.05rem; font-weight: 700; line-height: 1.2;
  color: var(--text); display: block;
}
.if-font-demo-body {
  font-size: .85rem; font-weight: 400; line-height: 1.2;
  color: var(--muted); display: block;
}

/* Palette swatch buttons (>=44px tap target) */
.if-pal-btn {
  width: 44px; height: 44px; border-radius: 50%;
  border: 3px solid #fff; box-shadow: 0 0 0 1px var(--border);
  cursor: pointer; flex-shrink: 0; padding: 0; position: relative;
  transition: box-shadow .15s, transform .1s;
}
.if-pal-btn:hover { transform: translateY(-1px); }
.if-pal-btn.sel   { box-shadow: 0 0 0 2px var(--primary); }
.if-pal-btn.sel::after {
  content:"\2713"; position:absolute; inset:0; display:grid; place-items:center;
  color:#fff; font-size:.9rem; font-weight:800; text-shadow:0 1px 3px rgba(0,0,0,.45);
}

/* Layout preset cards */
.if-layout-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.if-layout-btn {
  flex: 1; min-width: 140px; padding: 12px 8px;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  transition: border-color .15s, background .15s;
}
.if-layout-btn:hover { border-color: var(--secondary); background: #EFF5FB; }
.if-layout-btn.sel   { border-color: var(--primary); background: var(--st-info-bg); box-shadow: 0 0 0 1px var(--primary); }
.if-layout-btn-label { font-size: .8rem; font-weight: 700; color: var(--text); }
.if-wire {
  width: 80px; height: 80px; overflow: hidden; background: var(--bg);
  border: 1px solid var(--border-soft); border-radius: 6px;
  display: flex; flex-direction: column; gap: 1.5px; padding: 3px;
}
.if-wire-row { flex: none; border-radius: 2px; }

/* Status line */
.if-status { font-size: .85rem; color: var(--secondary); margin: 4px 0 10px; min-height: 18px; }

/* Inline error */
.if-err-msg {
  color: #B4232A; font-size: .83rem; margin-top: 8px;
  padding: 9px 12px; background: #FCEBEC; border: 1px solid #E9B4B7;
  border-radius: var(--radius-sm); line-height: 1.45;
}

/* #6: Footer — two sub-rows: nudge + action row */
.if-footer {
  display: flex; flex-direction: column; gap: 0;
  margin-top: 14px;
  border-top: 1px solid var(--border);
  padding-top: 0;
}
/* Action row: cancel (ghost, secondary) + submit (orange, primary) */
.if-footer-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 14px 0 0;
}
.if-footer-cancel {
  min-height: 48px; padding: 0 20px;
  flex: none;
}
.if-footer-submit {
  min-height: 48px; padding: 0 24px;
  flex: 1;          /* take remaining space so it reads as primary */
  justify-content: center;
  font-size: 1rem;
}

@media (max-width: 480px) {
  .if-card { padding: 22px 16px; }
  .if-title { font-size: 1.22rem; }
  .if-choice-row, .if-layout-row { gap: 8px; }
  .if-font-btn, .if-layout-btn { min-width: calc(50% - 4px); }
  .if-footer-actions { flex-direction: column-reverse; gap: 8px; }
  .if-footer-cancel, .if-footer-submit { width: 100%; text-align: center; }
}