/* ============================================================
   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; }
}

/* ===========================================================================
   Registration view (CF Master Migration Phase 3, task #189/#179, 6.7.2026)
   Hebrew RTL, mobile-first. Flag-guarded by register.js's
   AUTH_REGISTRATION_ENABLED -- inert (display:none) until the flag is on.
   =========================================================================== */
.auth-layout {
  align-items: center; justify-content: center;
  background: var(--surface-2, #f4f4f4); padding: 24px 16px;
  min-height: 100vh; min-height: 100dvh;
}
.auth-card {
  width: 100%; max-width: 420px; background: var(--surface, #fff);
  border-radius: 16px; padding: 28px 24px; box-shadow: 0 4px 24px rgba(0,0,0,.08);
}
.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.auth-brand .logo {
  width: 40px; height: 40px; border-radius: 10px; background: var(--action, #222);
  color: var(--action-on, #fff); display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-family: 'Heebo';
}
.auth-title { font-weight: 800; font-size: 1.1rem; }
.auth-sub { font-weight: 700; margin: 0 0 14px; }
.auth-note { font-size: .88rem; color: var(--text-muted, #666); margin: 0 0 16px; }
.auth-step { display: flex; flex-direction: column; gap: 10px; }
/* display:flex above overrides the browser default [hidden]{display:none},
   which made every registration step show at once (found live 6.7 go-live). */
.auth-step[hidden] { display: none; }
.auth-label { font-size: .85rem; font-weight: 700; margin-top: 6px; }
.auth-input {
  border: 1px solid var(--border, #ccc); border-radius: 10px; padding: 11px 14px;
  font-family: 'Heebo'; font-size: .95rem; width: 100%; box-sizing: border-box;
}
.auth-consent-row {
  display: flex; align-items: flex-start; gap: 8px; font-size: .85rem;
  cursor: pointer; margin: 6px 0;
}
.auth-consent-row input { margin-top: 3px; }
.auth-divider { display: flex; align-items: center; gap: 10px; margin: 14px 0; color: var(--text-muted, #888); font-size: .85rem; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border, #ddd); }
.auth-btn-back { align-self: flex-start; }
.auth-error {
  margin-top: 14px; padding: 10px 14px; border-radius: 8px;
  background: #fdecea; color: #b3261e; font-size: .88rem; font-weight: 600;
}
#auth-turnstile { margin: 8px 0; }

@media (max-width: 480px) {
  .auth-card { padding: 20px 16px; border-radius: 12px; }
}

/* ── Station G/I: payment card (task #206, 7.7.2026) ──────────────────────
   Non-modal, inline card shown after the S6 live-screen celebration --
   sits alongside it rather than covering it (the client should still see
   their live-but-noindexed page's URL while deciding to pay). */
#payment-card {
  position: relative;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  margin-top: 16px;
}

.payment-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;
}

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

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

/* Payer-details form (payment_link_failed fix, 9.7.2026): three editable
   fields pre-filled from the account's registered defaults -- same RTL/
   a11y/44px-touch-target conventions as .pa-support-* (personal_area tab
   4, Support form). */
.payment-card__fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0 0 22px;
}

.payment-card__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Payer-details hint (owner directive, 9.7.2026): explains that the payer
   should enter the details they will actually pay WITH -- e.g. the exact
   name printed on the credit card, or the phone number the bit app is
   installed on -- since these fields are pre-filled from the account's
   registered defaults but may need to differ for the actual payment
   instrument used. Subtle info-note styling matching .chat-unavailable-msg. */
.payment-card__hint {
  margin: 0 0 16px;
  padding-block: 10px;
  padding-inline: 12px;
  background: var(--st-info-bg, #EEF4FF);
  border: 1.5px solid var(--secondary, #6C8EBF);
  border-radius: var(--radius-sm, 8px);
  color: var(--text);
  font-size: .82rem;
  line-height: 1.55;
  text-align: right;
  direction: rtl;
}

.payment-card__hint strong {
  font-weight: 700;
}

.payment-card__label {
  font-size: .86rem;
  font-weight: 700;
  color: var(--text);
}

.payment-card__input {
  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, #ddd);
  border-radius: 8px;
  min-height: 44px;
  direction: rtl;
  text-align: right;
}

.payment-card__input:focus-visible {
  outline: 3px solid var(--accent, #ffcf4d);
  outline-offset: 2px;
  border-color: var(--secondary, #333);
}

.payment-card__input[aria-invalid="true"] {
  border-color: #B4232A;
}

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

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

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

/* ── Payment overlay (owner directives, 10.7.2026) ─────────────────────────
   Full-viewport overlay covering the WHOLE /bff/payment/start wait, which
   may now take up to ~30s worst-case (claude_tools.make_payment_link's
   bounded MAKE retry: up to 3 attempts, ~5s then ~20s between them -- see
   that module's docstring). Sits ABOVE #payment-card (z-index 300) so it
   fully covers it during the wait. Deliberately NOT gated behind
   @media(prefers-reduced-motion:reduce) -- unlike most motion in this app
   (.onb-card/.if-card below), this spinner is functional in-progress
   feedback the payer needs to actually SEE is alive, not a decorative
   flourish (our own controlled brand widget, owner direction 10.7.2026). */
#payment-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(14, 26, 40, 0.72);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
#payment-overlay.show { display: flex; }

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

.payment-overlay__spinner {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 4px solid var(--border, #ddd);
  border-top-color: var(--accent, #ffcf4d);
  margin: 0 auto 20px;
  animation: spin .9s linear infinite;
}

/* Indeterminate progress bar -- purely decorative reassurance under the
   spinner (pure CSS, no deps, reuses the loading-state ::after only --
   see .payment-overlay__inner--error below, which removes it). */
.payment-overlay__inner:not(.payment-overlay__inner--error)::after {
  content: '';
  display: block;
  width: 100%;
  height: 4px;
  margin-top: 22px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--border,#ddd) 0%, var(--accent,#ffcf4d) 50%, var(--border,#ddd) 100%);
  background-size: 200% 100%;
  animation: payment-overlay-progress 1.6s ease-in-out infinite;
}

@keyframes payment-overlay-progress {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.payment-overlay__title {
  margin: 0 0 8px;
  font-family: 'Heebo', system-ui, Arial, sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--primary);
}

.payment-overlay__body {
  margin: 0;
  font-size: .88rem;
  color: var(--text);
  line-height: 1.55;
}

/* Dedicated failure screen (error-experience doctrine, 10.7.2026): calm,
   never alarming red-everywhere -- only the title tints toward the
   existing error color, matching .payment-card__error's own restraint. */
.payment-overlay__inner--error .payment-overlay__title { color: #B4232A; }

.payment-overlay__code {
  margin: 14px 0 0;
  font-size: .78rem;
  color: var(--muted, #7A8699);
  font-family: 'Courier New', monospace;
  direction: ltr;
  unicode-bidi: embed;
}

.payment-overlay__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 22px;
}

#payment-overlay__home,
#payment-overlay__retry,
#payment-overlay__support {
  min-height: 48px;
  width: 100%;
}

.payment-overlay__secondary-btn {
  background: var(--surface);
  color: var(--secondary, #6C8EBF);
  border: 1.5px solid var(--border, #ddd);
  border-radius: 8px;
  font-size: .92rem;
  font-weight: 600;
  font-family: 'Heebo', system-ui, Arial, sans-serif;
  cursor: pointer;
}

/* ===========================================================================
   Personal area (task #216 skeleton, 7.7.2026). Navigation shell only --
   see personal_area.js module docstring for the real backend gap. Hebrew
   RTL, mobile-first (nav becomes a horizontal scroll strip on narrow
   viewports rather than the desktop sidebar).
   =========================================================================== */
.pa-shell {
  display: flex; min-height: 100vh; min-height: 100dvh;
  background: var(--surface-2, #f4f4f4);
}
.pa-nav {
  display: flex; flex-direction: column; gap: 4px;
  width: 220px; flex-shrink: 0; padding: 24px 12px;
  background: var(--surface, #fff); border-inline-start: 1px solid var(--border, #eee);
}
.pa-nav-btn {
  text-align: right; padding: 12px 14px; border-radius: 10px; border: none;
  background: transparent; font-family: 'Heebo'; font-size: .95rem; font-weight: 600;
  cursor: pointer; color: var(--text, #222);
}
.pa-nav-btn.is-active { background: var(--surface-2, #f0f0f0); font-weight: 800; }
.pa-content { flex: 1; padding: 32px 24px; overflow: auto; }
.pa-panel h2 { margin: 0 0 16px; font-size: 1.25rem; }
.pa-placeholder, .pa-loading { color: var(--text-muted, #666); font-size: .92rem; }
.pa-error { color: #b3261e; font-size: .92rem; }
.pa-leads-list { display: block; }
/* .pa-lead-row / table styling superseded by the My-Leads block below
   (task #224) -- kept as a single rule set there, not duplicated here. */

@media (max-width: 640px) {
  .pa-shell { flex-direction: column; }
  .pa-nav {
    flex-direction: row; width: 100%; overflow-x: auto; padding: 12px;
    border-inline-start: none; border-bottom: 1px solid var(--border, #eee);
  }
  .pa-nav-btn { flex-shrink: 0; }
  .pa-content { padding: 20px 16px; }
}

/* ===========================================================================
   My-Sites tab (task #223, personal_area_completion_arch_20260709.md, Beni).
   Card grid + status badges + empty-state. RTL logical properties (no
   physical left/right); WCAG: icon+text status (never color-alone), 44px
   min touch targets, visible focus outlines.
   =========================================================================== */
.pa-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}
.pa-panel-header h2 { margin: 0; }

.pa-btn {
  min-height: 44px; min-width: 44px; padding-inline: 16px;
  border-radius: 10px; border: none; cursor: pointer; text-decoration: none;
  font-family: 'Heebo'; font-weight: 700; font-size: .9rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.pa-btn-primary { background: var(--accent, #ffcf4d); color: var(--primary-dark, #222); }
.pa-btn-primary:hover { filter: brightness(.96); }
.pa-btn-ghost { background: transparent; border: 1px solid var(--border, #ddd); color: var(--text, #222); }
.pa-btn-ghost:hover { background: var(--surface-2, #f4f4f4); }
.pa-btn:focus-visible { outline: 3px solid var(--accent, #ffcf4d); outline-offset: 2px; }

.pa-sites-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.pa-site-card {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--border, #eee); border-radius: 12px;
  background: var(--surface, #fff);
}
.pa-site-thumb {
  height: 120px; display: flex; align-items: center; justify-content: center;
}
.pa-site-thumb-label {
  font-family: 'Heebo'; font-weight: 800; font-size: 1.8rem; color: #fff;
}
.pa-site-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.pa-site-name { margin: 0; font-size: 1.05rem; }
.pa-site-url {
  font-size: .85rem; color: var(--accent-dark, #0a5); text-decoration: none;
  word-break: break-all;
}
.pa-site-url:hover, .pa-site-url:focus-visible { text-decoration: underline; }
.pa-site-plan { margin: 0; font-size: .8rem; color: var(--text-muted, #666); }
.pa-site-actions {
  display: flex; gap: 8px; padding-inline: 16px; padding-block-end: 16px;
  margin-top: auto;
}
.pa-site-actions .pa-btn { flex: 1; }

.pa-badge {
  display: inline-flex; align-items: center; gap: 6px; width: fit-content;
  padding: 4px 10px; border-radius: 999px; font-size: .8rem; font-weight: 700;
}
.pa-badge-icon { font-size: .9rem; line-height: 1; }
.pa-badge--live { background: #e6f4ea; color: #1e7a34; }
.pa-badge--trial { background: #fdf0e2; color: #a15c00; }
.pa-badge--suspended { background: #fdeaea; color: #b3261e; }
.pa-badge--draft { background: #ececec; color: #555; }

.pa-empty-state {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 8px; padding: 48px 20px; color: var(--text-muted, #666);
}
.pa-empty-icon { font-size: 2.5rem; }
.pa-empty-title { margin: 0; font-weight: 700; font-size: 1rem; color: var(--text, #222); }
.pa-empty-sub { margin: 0; font-size: .9rem; }
.pa-empty-cta { margin-top: 8px; }

@media (max-width: 768px) {
  .pa-sites-list { grid-template-columns: 1fr; }
  .pa-site-actions { flex-direction: column; }
  .pa-panel-header { flex-direction: column; align-items: stretch; }
}

/* ===========================================================================
   My-Leads tab (task #224, personal_area_completion_arch_20260709.md, Beni).
   Semantic table (desktop) -> stacked "cards" (<=768px, WCAG responsive-
   table technique C22/SCR22: role="row"/"cell" kept explicit in the JS so
   screen readers still get table semantics even though CSS switches the
   visual layout to block). RTL logical properties throughout, 44px min
   touch targets (via the shared .pa-btn rules above), visible focus
   outlines, status/detail never icon-only (buttons always carry text).
   =========================================================================== */
.pa-leads-header { margin-bottom: 12px; }
.pa-leads-count { margin: 0; font-weight: 700; color: var(--text, #222); }

.pa-leads-table {
  width: 100%; border-collapse: collapse; background: var(--surface, #fff);
  border: 1px solid var(--border, #eee); border-radius: 12px; overflow: hidden;
  font-size: .9rem;
}
.pa-leads-table thead th {
  text-align: start; padding: 12px 14px; background: var(--surface-2, #f4f4f4);
  font-weight: 700; font-size: .85rem; color: var(--text-muted, #555);
}
.pa-leads-table tbody tr.pa-lead-row {
  border-block-start: 1px solid var(--border, #eee); cursor: pointer;
}
.pa-leads-table tbody tr.pa-lead-row:hover { background: var(--surface-2, #fafafa); }
.pa-leads-table tbody tr.pa-lead-row:focus-visible {
  outline: 3px solid var(--accent, #ffcf4d); outline-offset: -3px;
}
.pa-leads-table td { padding: 12px 14px; vertical-align: top; }
.pa-lead-detail-btn { min-height: 36px; padding-inline: 12px; font-size: .82rem; }

.pa-lead-detail {
  display: flex; flex-direction: column; gap: 16px; max-width: 560px;
  background: var(--surface, #fff); border: 1px solid var(--border, #eee);
  border-radius: 12px; padding: 20px;
}
.pa-lead-detail-back { align-self: flex-start; }
.pa-lead-detail-fields {
  display: flex; flex-direction: column; gap: 10px;
}
.pa-lead-detail-field {
  display: flex; justify-content: space-between; gap: 12px;
  padding-block-end: 8px; border-block-end: 1px solid var(--surface-2, #f0f0f0);
  font-size: .92rem;
}
.pa-lead-detail-label { color: var(--text-muted, #666); font-weight: 700; }
.pa-lead-detail-value { color: var(--text, #222); text-align: end; }
.pa-lead-detail-msg-label { margin: 0; font-weight: 700; color: var(--text-muted, #666); }
.pa-lead-detail-msg-body {
  margin: 0; white-space: pre-wrap; word-break: break-word;
  background: var(--surface-2, #f8f8f8); border-radius: 8px; padding: 12px 14px;
}

@media (max-width: 768px) {
  .pa-leads-header { flex-direction: column; align-items: stretch; }
  .pa-leads-table, .pa-leads-table thead, .pa-leads-table tbody,
  .pa-leads-table th, .pa-leads-table td, .pa-leads-table tr {
    display: block;
  }
  .pa-leads-table thead { position: absolute; inset-inline-start: -9999px; }
  .pa-leads-table tbody tr.pa-lead-row {
    border: 1px solid var(--border, #eee); border-radius: 10px;
    margin-block-end: 10px; padding: 6px 0;
  }
  .pa-leads-table td {
    display: flex; justify-content: space-between; gap: 12px;
    padding-inline: 14px; padding-block: 6px; text-align: end;
  }
  .pa-leads-table td[data-label]:not([data-label=""])::before {
    content: attr(data-label); font-weight: 700; color: var(--text-muted, #666);
    text-align: start;
  }
  .pa-lead-detail { max-width: none; }
  .pa-lead-detail-value { text-align: end; }
}

/* ===========================================================================
   Support tab (TAB 4, personal_area_completion_arch_20260709.md §TAB4, Beni
   9.7.2026). Simple contact form -- RTL logical properties, WCAG labels
   (<label for>, aria-required), a VISIBLE focus outline (never outline:none
   -- unlike the wizard's .if-field, which relies on a border-color-only
   focus change), 44px+ touch targets, mobile-friendly single column.
   =========================================================================== */
.pa-support-form {
  display: flex; flex-direction: column; gap: 16px; max-width: 520px;
}
.pa-support-row { display: flex; flex-direction: column; gap: 6px; }
.pa-support-label {
  font-size: .86rem; font-weight: 700; color: var(--text, #222);
}
.pa-support-field {
  width: 100%; box-sizing: border-box;
  padding: 11px 13px; font-size: .95rem; font-family: inherit;
  background: var(--surface, #fff); color: var(--text, #222);
  border: 1.5px solid var(--border, #ddd); border-radius: 8px;
  min-height: 44px;
}
.pa-support-field:focus-visible {
  outline: 3px solid var(--accent, #ffcf4d); outline-offset: 2px;
  border-color: var(--secondary, #333);
}
.pa-support-field[readonly] { background: var(--surface-2, #f4f4f4); color: var(--text-muted, #666); }
textarea.pa-support-field { resize: vertical; min-height: 120px; line-height: 1.5; }

.pa-support-submit { align-self: flex-start; min-width: 140px; }
.pa-support-submit:disabled { opacity: .6; cursor: not-allowed; }

.pa-support-success {
  margin: 0; padding: 12px 14px; border-radius: 8px;
  background: #e6f4ea; color: #1e7a34; font-weight: 700;
}
.pa-support-error {
  margin: 0; padding: 12px 14px; border-radius: 8px;
  background: #fdeaea; color: #b3261e; font-weight: 700;
}

@media (max-width: 768px) {
  .pa-support-form { max-width: none; }
}

/* ===========================================================================
   Legal-documents tab (TAB 3, personal_area_completion_arch_20260709.md
   §TAB3, task #226, Beni 9.7.2026). Static config-driven template library +
   content-approval gate (personal_area.js LEGAL_TEMPLATES_APPROVED,
   default false). RTL logical properties throughout; the pending badge is
   icon+text (never color-alone, same convention as .pa-badge above); the
   (future, gate=true) download/edit actions reuse the shared .pa-btn rules
   -- same 44px min touch target + :focus-visible outline as every other
   tab, nothing new to define for them.
   =========================================================================== */
.pa-legal-list { display: flex; flex-direction: column; gap: 20px; }

.pa-legal-disclaimer {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 0; padding: 12px 14px; border-radius: 8px;
  background: #fff4e5; color: #7a4b00; font-weight: 700; font-size: .88rem;
}
.pa-legal-disclaimer-icon { font-size: 1rem; line-height: 1.4; }

.pa-legal-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.pa-legal-card {
  display: flex; flex-direction: column; gap: 8px; padding: 16px;
  border: 1px solid var(--border, #eee); border-radius: 12px;
  background: var(--surface, #fff);
}
.pa-legal-title { margin: 0; font-size: 1.05rem; }
.pa-legal-type { margin: 0; font-size: .78rem; font-weight: 600; color: var(--text-muted, #666); }
.pa-legal-desc { margin: 0; font-size: .9rem; color: var(--text, #222); }

.pa-legal-actions {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 8px;
}
.pa-legal-pending { margin-top: auto; align-self: flex-start; }
.pa-badge--pending { background: #fdf0e2; color: #a15c00; }

@media (max-width: 768px) {
  .pa-legal-cards { grid-template-columns: 1fr; }
}