@font-face {
  font-family: "Stencil";
  src: url("/fonts/big-shoulders-stencil-display-latin-800-normal.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: "Instrument";
  src: url("/fonts/instrument-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Instrument";
  src: url("/fonts/instrument-sans-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

@font-face { font-family: "Noto Arabic"; src: url("/fonts/noto-sans-arabic-arabic-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Noto Arabic"; src: url("/fonts/noto-sans-arabic-arabic-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Cairo"; src: url("/fonts/cairo-arabic-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }

:root {
  --ink: #0e3a42;
  --ink-2: #17505a;
  --line: #3a6670;
  --salt: #f6efe1;
  --salt-2: #e4d6bb;
  --salt-text: #fbf6ea;
  --dim: #b7cbc6;
  --page-dim: #4f5f5c;
  --tape: #e9ac2c;
  --tape-edge: #a86f05;
  --err: #7a1010;
  --radius: 6px;
  --stencil: "Stencil", "Cairo", "Arial Narrow", Impact, sans-serif;
  --sans: "Instrument", "Noto Arabic", system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", "Geeza Pro", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--salt);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.55;
}
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.box :focus-visible { outline-color: var(--tape); }
.tape :focus-visible { outline-color: var(--ink); }

.page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 0 clamp(1.25rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 3rem);
  overflow-x: clip;
}

.brand { padding: clamp(1.25rem, 3vw, 2.25rem) 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.wordmark {
  font-family: var(--stencil);
  font-weight: 800;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: none;
}

.stage {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
  max-width: 82rem;
  width: 100%;
  margin: 0 auto;
}

.intro h1 {
  font-family: var(--stencil);
  font-weight: 800;
  font-size: clamp(2.9rem, 2rem + 4.4vw, 5.6rem);
  line-height: 0.96;
  letter-spacing: 0.01em;
  margin: 0 0 1.5rem;
  text-wrap: balance;
}
.lede { margin: 0 0 1rem; max-width: 34rem; font-size: 1.1875rem; }
.note { margin: 0; max-width: 34rem; color: var(--page-dim); font-size: 0.9375rem; }

/* The box */
.box {
  position: relative;
  background: var(--ink);
  color: var(--salt-text);
  border-radius: 8px;
  box-shadow: 12px 12px 0 var(--salt-2);
  height: min(42rem, calc(100dvh - 9rem));
  min-height: 30rem;
}
.box-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: inherit;
  overflow: hidden;
  transition: filter 0.4s ease, opacity 0.4s ease;
}
.box.is-locked .box-inner { filter: blur(3px); opacity: 0.45; }

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--line);
}
.status { margin: 0; font-size: 0.9375rem; color: var(--dim); }
.actions { display: flex; gap: 0.5rem; }
.ghost {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.5rem 0.875rem;
  min-height: 2.5rem;
  color: var(--salt-text);
}
.ghost:hover { border-color: var(--dim); }

.log {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overscroll-behavior: contain;
}
.starters { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }
.starters p { margin: 0 0 0.25rem; color: var(--dim); }
.starters .greeting { color: var(--salt-text); font-size: 1.1875rem; line-height: 1.4; overflow-wrap: anywhere; }
.starter {
  text-align: start;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.75rem 0.875rem;
  min-height: 2.75rem;
  color: var(--salt-text);
}
.starter:hover { border-color: var(--tape); }

.msg {
  max-width: 88%;
  padding: 0.625rem 0.875rem;
  border-radius: var(--radius);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.msg.user { align-self: flex-end; background: var(--tape); color: var(--ink); }
.msg.bot { align-self: flex-start; background: var(--ink-2); }
.msg.error { align-self: flex-start; background: transparent; border: 1px solid var(--tape); color: var(--salt-text); }
.msg.pending { color: var(--dim); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.45; } }

.composer {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
  padding: 0.75rem;
  border-top: 1px solid var(--line);
}
.composer textarea {
  flex: 1;
  resize: none;
  max-height: 9rem;
  min-height: 2.75rem;
  background: #0f313d;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.625rem 0.75rem;
  font-size: 1rem; /* 16px stops iOS zooming in on focus */
  line-height: 1.4;
}
.composer textarea::placeholder { color: var(--dim); }
.send {
  background: var(--tape);
  color: var(--ink);
  border: 0;
  border-radius: var(--radius);
  font-weight: 600;
  min-height: 2.75rem;
  padding: 0 1.25rem;
}
.send:hover { background: #ffc845; }
.send:disabled { opacity: 0.5; cursor: default; }

/* Packing tape across the box */
.tape {
  position: absolute;
  left: -14px;
  right: -14px;
  top: 50%;
  transform: translateY(-50%) rotate(-1.5deg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(0, 0, 0, 0.05)),
    var(--tape);
  color: var(--ink);
  padding: 1.25rem clamp(1rem, 3vw, 1.75rem) 1rem;
  border-top: 2px solid var(--tape-edge);
  border-bottom: 2px solid var(--tape-edge);
  transition: transform 0.6s cubic-bezier(0.65, 0.05, 0.25, 1), opacity 0.35s ease 0.2s, visibility 0s linear 0.6s;
}
.tape label { display: block; font-weight: 600; margin-bottom: 0.375rem; }
.tape .field { margin-bottom: 0.75rem; }
.tape .field input { width: 100%; }
.tape-row { display: flex; gap: 0.5rem; }
.tape input {
  flex: 1;
  min-width: 0;
  min-height: 2.75rem;
  background: var(--ink);
  color: var(--salt-text);
  border: 0;
  border-radius: var(--radius);
  padding: 0 0.875rem;
  font-size: 1rem;
}
.tape button {
  background: var(--ink);
  color: var(--salt-text);
  border: 0;
  border-radius: var(--radius);
  min-height: 2.75rem;
  padding: 0 1.125rem;
  font-weight: 600;
  white-space: nowrap;
}
.tape button:hover { background: var(--ink-2); }
.code-error { margin: 0.5rem 0 0; min-height: 1.5rem; color: var(--err); font-weight: 600; }

.box.is-open .tape {
  transform: translateY(-50%) translateY(-160%) rotate(-7deg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (max-width: 56rem) {
  .stage { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 2rem; }
  .box { height: min(40rem, 78dvh); min-height: 28rem; box-shadow: 6px 6px 0 var(--salt-2); margin-bottom: 0.5rem; }
  .tape { left: -8px; right: -8px; }
}
@media (max-width: 26rem) {
  .tape-row { flex-direction: column; }
  .msg { max-width: 94%; }
}
.box.instant .tape, .box.instant .box-inner { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .tape, .box-inner { transition: none; }
  .msg.pending { animation: none; }
}


/* ---- Developer workspace ---- */
.run {
  background: var(--tape);
  color: var(--ink);
  border: 0;
  border-radius: var(--radius);
  font-weight: 600;
  min-height: 2.5rem;
  padding: 0 1.25rem;
}
.run:hover { background: #ffc845; }
.ghost.small { min-height: 2rem; padding: 0.25rem 0.625rem; font-size: 0.875rem; }
.bar { flex-wrap: wrap; }
.actions { flex-wrap: wrap; }

.pane-tabs { display: none; border-bottom: 1px solid var(--line); }
.pane-tabs button {
  flex: 1; background: transparent; border: 0; border-bottom: 3px solid transparent;
  min-height: 2.75rem; color: var(--dim); font-weight: 600;
}
.pane-tabs button[aria-pressed="true"] { color: var(--salt-text); border-bottom-color: var(--tape); }

.ws {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(16rem, 3fr) minmax(0, 4fr) minmax(0, 4fr);
}
.pane { min-width: 0; min-height: 0; display: flex; flex-direction: column; border-left: 1px solid var(--line); }
.pane:first-child { border-left: 0; }

.filetabs {
  display: flex; align-items: center; gap: 0.25rem; padding: 0.375rem 0.5rem;
  border-bottom: 1px solid var(--line); overflow-x: auto; flex: none;
}
.ftab { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); white-space: nowrap; }
.ftab.is-active { border-color: var(--tape); }
.ftab button, .fadd {
  background: transparent; border: 0; color: var(--salt-text);
  min-height: 2.25rem; padding: 0 0.625rem; font-size: 0.9375rem;
}
.ftab .fdel { color: var(--dim); padding: 0 0.5rem; }
.ftab .fdel:hover { color: var(--tape); }
.fadd { color: var(--dim); white-space: nowrap; }
.fadd:hover { color: var(--tape); }
.fnew {
  width: 9rem; min-height: 2.25rem; background: #0f313d; color: var(--salt-text);
  border: 1px solid var(--tape); border-radius: var(--radius); padding: 0 0.5rem; font-size: 1rem;
}

.editor { flex: 1; min-height: 0; overflow: hidden; }
.editor .cm-editor { height: 100%; }

.outbar {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.375rem 0.5rem; border-bottom: 1px solid var(--line); flex: none;
}
.out-tabs { display: flex; gap: 0.25rem; }
.out-tabs button {
  background: transparent; border: 1px solid transparent; border-radius: var(--radius);
  min-height: 2.25rem; padding: 0 0.75rem; color: var(--dim);
}
.out-tabs button[aria-pressed="true"] { color: var(--salt-text); border-color: var(--line); }
.badge {
  display: inline-block; min-width: 1.25rem; padding: 0 0.3rem; margin-inline-start: 0.25rem;
  background: var(--tape); color: var(--ink); border-radius: 999px; font-size: 0.8125rem; text-align: center;
}
.preview { flex: 1; min-height: 0; position: relative; background: #fff; }
.preview[hidden], .console[hidden] { display: none; }
.preview iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }
.preview .empty { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; padding: 1rem; text-align: center; color: #3a5660; }
.preview .empty[hidden] { display: none; }
.console {
  flex: 1; min-height: 0; overflow: auto; padding: 0.5rem 0.75rem;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.8125rem; line-height: 1.5;
}
.console .line { white-space: pre-wrap; overflow-wrap: anywhere; padding: 0.125rem 0; border-bottom: 1px solid var(--ink-2); }
.console .warn { color: var(--tape); }
.console .error { color: #ff9d7e; }
.console:empty::before { content: attr(data-empty); color: var(--dim); }

/* Composer inside a narrow chat pane */
.pane-chat .composer { flex: none; }
.pane-chat .msg { max-width: 94%; }

/* Once unlocked, the box grows into a full-width workspace */
.page.is-workspace .intro { display: none; }
.page.is-workspace .stage { grid-template-columns: minmax(0, 1fr); align-items: stretch; max-width: none; }
.page.is-workspace .box { height: calc(100dvh - 6.5rem); min-height: 32rem; box-shadow: 8px 8px 0 var(--salt-2); }
.page.is-workspace .brand { padding: 1rem 0; }

@media (max-width: 56rem) {
  .pane-tabs { display: flex; }
  .ws { grid-template-columns: minmax(0, 1fr); }
  .ws .pane { display: none; border-left: 0; }
  .ws[data-pane="chat"] .pane-chat, .ws[data-pane="code"] .pane-code, .ws[data-pane="out"] .pane-out { display: flex; }
  .page.is-workspace .box { height: calc(100dvh - 5rem); min-height: 26rem; box-shadow: 4px 4px 0 var(--salt-2); }
}
@media (max-width: 40rem) {
  .actions .ghost, .run { min-height: 2.25rem; padding: 0 0.625rem; font-size: 0.9375rem; }
}

/* ---- Templates, chips, device preview, expand ---- */
.box-inner { position: relative; }
.starter-head { margin: 0.75rem 0 0.25rem !important; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--dim) !important; }
.starter.alt { border-style: dashed; color: var(--tape); }
.msg.bot.pending { font-variant-numeric: tabular-nums; }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; align-self: flex-start; }
.chip {
  background: transparent; border: 1px solid var(--line); border-radius: 999px;
  color: var(--salt-text); padding: 0.375rem 0.75rem; min-height: 2.25rem; font-size: 0.875rem;
}
.chip:hover { border-color: var(--tape); color: var(--tape); }

.tpl-panel {
  position: absolute; inset: 0; z-index: 5; overflow-y: auto;
  background: var(--ink); padding: 1.25rem clamp(1rem, 3vw, 2rem);
}
.tpl-panel[hidden] { display: none; }
.tpl-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.tpl-head h2 { margin: 0; font-family: var(--stencil); font-weight: 800; font-size: 1.75rem; letter-spacing: 0.02em; }
.tpl-note { margin: 0.25rem 0 1rem; color: var(--dim); font-size: 0.9375rem; }
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0.75rem; }
.tpl-card {
  display: flex; flex-direction: column; gap: 0.25rem; text-align: start;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 8px;
  padding: 1rem; color: var(--salt-text); min-height: 5.5rem;
}
.tpl-card b { font-size: 1.0625rem; }
.tpl-card span { color: var(--dim); font-size: 0.9rem; }
.tpl-card:hover { border-color: var(--tape); }

.out-tools { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; justify-content: flex-end; }
.dev-tabs { display: flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.dev-tabs button { background: transparent; border: 0; color: var(--dim); min-height: 2rem; padding: 0 0.625rem; font-size: 0.8125rem; }
.dev-tabs button[aria-pressed="true"] { background: var(--ink-2); color: var(--salt-text); }
.outbar { flex-wrap: wrap; }

.preview[data-dev="tablet"], .preview[data-dev="phone"] { background: #20343d; }
.preview[data-dev="tablet"] iframe { left: 50%; right: auto; width: min(768px, 100%); transform: translateX(-50%); box-shadow: 0 0 0 1px var(--line); }
.preview[data-dev="phone"] iframe { left: 50%; right: auto; width: min(390px, 100%); transform: translateX(-50%); box-shadow: 0 0 0 1px var(--line); }
.preview[data-dev="tablet"] .empty, .preview[data-dev="phone"] .empty { color: var(--dim); }

.box.is-focus .ws { grid-template-columns: minmax(0, 1fr); }
.box.is-focus .pane-chat, .box.is-focus .pane-code { display: none; }

@media (max-width: 56rem) {
  .box.is-focus .ws[data-pane] .pane-out { display: flex; }
  .dev-tabs, #focusBtn { display: none; }
  .tpl-grid { grid-template-columns: 1fr; }
}


/* ---- Language switch, RTL, publish ---- */
.lang {
  background: transparent; border: 2px solid var(--ink); color: var(--ink); border-radius: var(--radius);
  min-height: 2.5rem; padding: 0 1rem; font-weight: 600; font-family: var(--sans);
}
.lang:hover { background: var(--ink); color: var(--salt); }
.ghost.accent { border-color: var(--tape); color: var(--tape); }
.ghost.accent:hover { background: var(--tape); color: var(--ink); }
.linkbtn { display: inline-flex; align-items: center; text-decoration: none; background: transparent; border: 1px solid var(--line); border-radius: var(--radius); color: var(--salt-text); }
.linkbtn:hover { border-color: var(--dim); }

html[dir="rtl"] body { font-size: 1.0625rem; line-height: 1.7; }
html[dir="rtl"] .intro h1 { font-family: "Cairo", var(--sans); font-weight: 800; letter-spacing: 0; line-height: 1.25; font-size: clamp(2.2rem, 1.6rem + 3.4vw, 4.2rem); }
html[dir="rtl"] .tpl-head h2 { font-family: "Cairo", var(--sans); letter-spacing: 0; }
html[dir="rtl"] .starter-head { letter-spacing: 0; text-transform: none; }
html[dir="rtl"] .tape { transform: translateY(-50%) rotate(1.5deg); }
html[dir="rtl"] .box.is-open .tape { transform: translateY(-50%) translateY(-160%) rotate(7deg); }
/* Code is always left-to-right, even in the Arabic interface. */
.pane-code, .editor { direction: ltr; }
.console { text-align: start; }

/* Template groups */
.tpl-group { margin: 0 0 1.25rem; }
.tpl-group h3 { margin: 0 0 0.5rem; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tape); }
html[dir="rtl"] .tpl-group h3 { letter-spacing: 0; text-transform: none; font-size: 0.9375rem; }
.tpl-card .flag { align-self: flex-start; font-size: 0.6875rem; letter-spacing: 0.08em; padding: 0.1rem 0.4rem; border: 1px solid var(--tape); color: var(--tape); border-radius: 3px; }

/* Publish panel */
.pub-form { display: grid; gap: 0.5rem; max-width: 30rem; }
.pub-form label { font-weight: 600; }
.slug-row { display: flex; align-items: stretch; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #0f313d; }
.slug-prefix { display: flex; align-items: center; padding: 0 0.75rem; color: var(--dim); background: var(--ink-2); white-space: nowrap; }
.slug-row input { flex: 1; min-width: 0; background: transparent; border: 0; padding: 0.625rem 0.75rem; min-height: 2.75rem; font-size: 1rem; color: var(--salt-text); }
.hint { margin: 0; color: var(--dim); font-size: 0.875rem; }
.pub-error { margin: 0; min-height: 1.5rem; color: #ff9d7e; font-weight: 600; }
.pub-form .run { justify-self: start; min-height: 2.75rem; }
.pub-done { margin: 0.75rem 0 0; padding: 1rem; border: 1px solid var(--tape); border-radius: 8px; max-width: 30rem; }
.pub-done .ok { margin: 0 0 0.5rem; font-weight: 600; color: var(--tape); }
.pub-link { display: block; color: var(--salt-text); overflow-wrap: anywhere; margin-bottom: 0.75rem; }
.pub-actions { display: flex; gap: 0.5rem; }
.pub-mine { margin: 1.5rem 0 0.5rem; font-size: 0.875rem; color: var(--dim); font-weight: 600; }
.pub-list { list-style: none; margin: 0 0 1rem; padding: 0; max-width: 30rem; display: grid; gap: 0.5rem; }
.pub-list li { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.5rem 0.75rem; border: 1px solid var(--line); border-radius: var(--radius); }
.pub-list a { color: var(--salt-text); overflow-wrap: anywhere; }
.pub-list .none { color: var(--dim); border-style: dashed; }

[hidden] { display: none !important; }

.gate-links { margin: .9rem 0 0; font-size: .85rem; display: flex; flex-wrap: wrap; gap: .35rem .6rem; align-items: center; }
.gate-links a { color: inherit; opacity: .8; }
.gate-links a:hover { opacity: 1; }
.gate-links span { opacity: .4; }

.tpl-search { width: 100%; margin: 0 0 1rem; padding: 0.6rem 0.8rem; border: 2px solid var(--line); background: var(--ink-2); color: var(--salt-text); border-radius: var(--radius); font: inherit; }
.tpl-search:focus-visible { outline: 3px solid var(--tape); outline-offset: 2px; }
.pub-list .exp { display: block; font-size: 0.8125rem; color: var(--dim); }

/* Business details panel, launch check, QR code */
.det-in { background: #0f313d; border: 1px solid var(--line); border-radius: var(--radius); padding: 0.625rem 0.75rem; min-height: 2.75rem; font-size: 1rem; color: var(--salt-text); width: 100%; }
.det-in:disabled, .det-colours input:disabled { opacity: 0.45; }
.det-colours { border: 0; margin: 0.5rem 0 0; padding: 0; }
.det-colours legend { font-weight: 600; padding: 0; margin-bottom: 0.4rem; }
.det-swatches { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.det-swatches button { width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 2px solid transparent; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4); padding: 0; cursor: pointer; }
.det-swatches button[aria-pressed="true"] { border-color: #fff; box-shadow: 0 0 0 3px var(--tape); }
.det-swatches button:disabled { opacity: 0.4; cursor: default; }
.det-custom { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.6rem; font-weight: 400; }
.det-custom input { width: 3rem; height: 2.25rem; padding: 0; border: 1px solid var(--line); background: transparent; border-radius: 6px; }
.pub-check { margin: 0 0 1rem; max-width: 30rem; padding: 0.75rem 1rem; border: 1px solid var(--line); border-radius: 8px; }
.pub-check h3 { margin: 0 0 0.4rem; font-size: 1rem; }
.pub-check ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.pub-check li { display: flex; gap: 0.6rem; align-items: center; justify-content: space-between; font-size: 0.9375rem; padding-inline-start: 1.5rem; position: relative; }
.pub-check li::before { content: "!"; position: absolute; inset-inline-start: 0; top: 0.1rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: #ffb24d; color: #1a1a1a; font: 700 0.75rem/1.1rem system-ui, sans-serif; text-align: center; }
.pub-check li.info::before { content: "i"; background: #8fb7c4; }
.pub-check li.good::before { content: "✓"; background: var(--tape); }
.qr-box { display: flex; gap: 1rem; align-items: center; margin: 0.5rem 0; }
.qr { width: 8.5rem; height: 8.5rem; flex: none; background: #fff; border-radius: 8px; padding: 0.25rem; }
.qr svg { display: block; width: 100%; height: 100%; }
.pub-actions { flex-wrap: wrap; }

/* Launch kit, legal fields, taps */
.kit-h { margin: 1.25rem 0 0.5rem; font-size: 1.05rem; }
.kit-poster { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: flex-start; }
.kit-poster canvas { width: 13rem; height: auto; aspect-ratio: 1240 / 1754; background: #fff; border-radius: 6px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); }
.kit-ctl { display: grid; gap: 0.6rem; max-width: 20rem; }
.kit-radio { border: 0; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.kit-radio legend { font-weight: 600; padding: 0; margin-bottom: 0.3rem; }
.kit-radio label { display: flex; gap: 0.5rem; align-items: center; }
.kit-texts { display: grid; gap: 0.9rem; max-width: 38rem; }
.kit-item label { display: block; font-weight: 600; margin-bottom: 0.25rem; }
.kit-item textarea { width: 100%; min-height: 7rem; resize: vertical; background: #0f313d; color: var(--salt-text); border: 1px solid var(--line); border-radius: 8px; padding: 0.6rem 0.75rem; font: inherit; line-height: 1.5; }
.kit-item .ghost { margin-top: 0.35rem; }
.kit-ai { margin: 1rem 0 0.5rem; }
.det-legal { border: 0; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.det-legal legend { font-weight: 600; padding: 0; margin-bottom: 0.4rem; }
.pub-list .taps { display: block; font-size: 0.875rem; color: var(--tape); }

/* Box report */
.rep-facts, .rep-events { list-style: none; margin: 0 0 0.5rem; padding: 0; display: grid; gap: 0.35rem; max-width: 38rem; }
.rep-facts li { padding-inline-start: 1.5rem; position: relative; }
.rep-facts li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--tape); font-weight: 700; }
.rep-events { max-height: 14rem; overflow: auto; margin-bottom: 1rem; }
.rep-events li { display: flex; gap: 0.8rem; font-size: 0.9375rem; }
.rep-events time { color: var(--dim); font-variant-numeric: tabular-nums; flex: none; }

/* Quick start strip */
.quick { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; padding: 0.5rem 0.75rem; border-top: 1px solid var(--line); }
.q-label { font-size: 0.8125rem; color: var(--dim); text-transform: uppercase; letter-spacing: 0.06em; margin-inline-end: 0.2rem; }
.q-step { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.65rem; min-height: 2rem; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--salt-text); font-size: 0.875rem; cursor: pointer; }
.q-step i { font-style: normal; width: 1.15rem; height: 1.15rem; border-radius: 50%; display: grid; place-items: center; font-size: 0.7rem; font-weight: 700; background: rgba(255, 255, 255, 0.14); }
.q-step.done { border-color: var(--tape); }
.q-step.done i { background: var(--tape); color: #1a1a1a; font-size: 0; }
.q-step.done i::before { content: "✓"; font-size: 0.75rem; }

/* ---- v14 overhaul: calmer gate, warm surfaces, grouped toolbar ---- */
/* Gate: a straight card, not a rotated strip of tape */
.tape { transform: translateY(-50%); border-radius: 12px; left: 12px; right: 12px; }
html[dir="rtl"] .tape { transform: translateY(-50%); }
.box.is-open .tape { transform: translateY(-50%) translateY(-160%); }
html[dir="rtl"] .box.is-open .tape { transform: translateY(-50%) translateY(-160%); }
/* Welcome line above the headline, bilingual */
.intro::before {
  content: "أهلاً وسهلاً · Welcome";
  display: block;
  font-family: var(--sans);
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: .6rem;
  letter-spacing: .02em;
}
/* Gold and teal strip under the brand row, same as the other pages */
.brand { position: relative; }
.brand::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -10px;
  height: 8px;
  background: repeating-linear-gradient(90deg, var(--tape) 0 12px, var(--ink-2) 12px 20px, var(--tape) 20px 26px, transparent 26px 34px);
}
/* Toolbar: primary action stands out, the rest sit quietly */
.actions { gap: .5rem; }
.actions .ghost { border-radius: 999px; }
.actions .accent { background: var(--tape); color: var(--ink); border-color: var(--tape-edge); }
.actions .run { border-radius: 999px; }
/* Box: softer shadow, warm frame */
.page.is-workspace .box { box-shadow: 6px 6px 0 var(--salt-2); }

/* Keep the strip clear of the welcome line on phones */
.stage { margin-top: 1.4rem; }

/* ---- v15: pane collapse, reply language, sign out ---- */
.pane { position: relative; }
.pane-toggle {
  position: absolute; top: .5rem; inset-inline-end: .5rem; z-index: 2;
  width: 2rem; height: 2rem; border-radius: 999px; border: 1px solid var(--line);
  background: var(--ink-2); color: var(--salt-text); font: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.pane-toggle:hover { border-color: var(--tape); }
.pane.is-collapsed { overflow: hidden; }
.pane.is-collapsed > *:not(.pane-toggle) { visibility: hidden; }
.pane.is-collapsed .pane-toggle { inset-inline: 0.35rem; top: 0.5rem; margin: 0 auto; }
.reply-lang { display: flex; align-items: center; gap: .4rem; padding: .4rem .6rem; border-bottom: 1px solid var(--line); flex: none; }
.reply-lang-label { font-size: .85rem; color: var(--dim); margin-inline-end: .2rem; }
.reply-btn {
  background: transparent; color: var(--salt-text); border: 1px solid var(--line); border-radius: 999px;
  min-height: 2rem; padding: 0 .8rem; font: inherit; font-size: .9rem; cursor: pointer;
}
.reply-btn[aria-pressed="true"] { background: var(--tape); color: var(--ink); border-color: var(--tape-edge); font-weight: 600; }
.actions .signout { border-color: var(--tape); color: var(--salt-text); font-weight: 600; }

@media (max-width: 56rem) { .pane-toggle { display: none; } }

/* Publish form: business name and WhatsApp number */
#pubForm .det-in { width: 100%; }

/* Menu scan review */
.scan-btn { margin: 0 0 1rem; }
.scan-biz { display: grid; gap: 0.25rem; margin: 0 0 1rem; max-width: 28rem; font-size: 0.9375rem; }
.scan-biz input, .scan-row input { font: inherit; padding: 0.5rem 0.6rem; border-radius: 6px; border: 1px solid var(--salt-2); background: var(--salt); color: var(--ink); min-width: 0; width: 100%; }
.scan-rows { display: grid; gap: 0.6rem; }
.scan-row { display: grid; grid-template-columns: 1fr 1fr 1fr 6rem auto; gap: 0.5rem; align-items: end; }
.scan-row label { display: grid; gap: 0.2rem; font-size: 0.8125rem; color: var(--dim); }
.scan-row button { align-self: end; }
.scan-actions { margin: 1rem 0 0; }
@media (max-width: 40rem) { .scan-row { grid-template-columns: 1fr 1fr; } .scan-row .scan-remove { justify-self: start; } }

/* ---- Phone layout: one pane at a time, toolbar in one scrollable row, composer easy to reach ---- */
@media (max-width: 56rem) {
  .ws { grid-template-columns: minmax(0, 1fr) !important; } /* overrides the inline column widths set for desktop */
  .actions { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 0.25rem 0 0.5rem; }
  .actions::-webkit-scrollbar { display: none; }
  .actions > * { flex: none; }
  .reply-lang { overflow-x: auto; scrollbar-width: none; }
  .composer textarea { min-height: 2.75rem; font-size: 16px; }
  .pane-chat .msg { max-width: 92%; }
}
@media (max-width: 56rem) {
  .composer textarea { min-height: 3.5rem; }
  .composer { align-items: stretch; }
  .composer .send, .composer button[type="submit"] { min-height: 3.5rem; }
}

/* ---- Redesign: clear hierarchy in the app. Primary actions first, tools second, one pane at a time on phones ---- */
.bar { display: flex; flex-direction: column; gap: 0.625rem; padding: 0.75rem 1rem 0.625rem; }
.bar-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.bar-top .status { font-size: 0.875rem; }
.actions { display: flex; flex-direction: column; gap: 0.5rem; }
.act-main { display: flex; gap: 0.5rem; }
.act-main button { flex: 1 1 0; min-height: 2.75rem; font-size: 1rem; font-weight: 700; }
.act-tools { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.act-tools button { min-height: 2.125rem; padding: 0 0.7rem; font-size: 0.875rem; border-radius: 999px; }
.stage:has(.box:not(.is-locked)) .intro { display: none; }
.quick { border-top: 0; }
@media (max-width: 56rem) {
  .bar { padding: 0.625rem 0.75rem 0.5rem; }
  .act-tools { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 0.125rem; }
  .act-tools::-webkit-scrollbar { display: none; }
  .act-tools button { flex: none; }
  .act-main button { min-height: 2.75rem; }
  .quick { display: none; }
  .starters .starter { padding: 0.75rem 0.875rem; font-size: 0.9375rem; }
}
@media (min-width: 56.0625rem) {
  .act-main { order: 0; }
  .act-main button { flex: 0 0 auto; }
}
.bar, .bar-top, .actions, .act-main, .act-tools { min-width: 0; max-width: 100%; box-sizing: border-box; }
.act-main button { min-width: 0; }

/* ---- Welcome page, guided tour, and a livelier look ---- */
.intro { display: none; }
.welcome { padding: 1.5rem 0 2rem; display: grid; gap: 1rem; }
.welcome-kicker { margin: 0; font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); font-weight: 700; }
.welcome h1 { margin: 0; font-family: var(--stencil); font-weight: 800; font-size: clamp(2.5rem, 9vw, 4.25rem); line-height: 0.98; letter-spacing: 0.01em; text-wrap: balance; color: var(--ink); }
.welcome-lede { margin: 0; max-width: 40rem; font-size: 1.125rem; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.welcome-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.25rem; }
.cta-primary, .cta-secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0 1.375rem; border-radius: 999px; font-weight: 800; text-decoration: none; font-size: 1rem; }
.cta-primary { background: var(--tape); color: var(--ink); border: 2px solid var(--tape-edge); box-shadow: 3px 3px 0 var(--tape-edge); }
.cta-secondary { color: var(--ink); border: 2px solid var(--ink); background: transparent; }
.cta-primary:hover, .cta-secondary:hover { transform: translateY(-1px); }
.cta-primary:focus-visible, .cta-secondary:focus-visible { outline: 3px solid var(--tape); outline-offset: 3px; }
.welcome-h2 { margin: 1.5rem 0 0; font-family: var(--stencil); font-weight: 800; font-size: 1.75rem; color: var(--ink); }
.welcome-cards { display: grid; gap: 0.875rem; grid-template-columns: 1fr; }
@media (min-width: 52rem) { .welcome-cards { grid-template-columns: repeat(3, 1fr); } }
.wcard { background: var(--salt); border: 2px solid var(--ink); border-radius: 16px; padding: 1.125rem 1.125rem 1.25rem; box-shadow: 4px 4px 0 var(--ink); }
.wcard-ico { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--tape); color: var(--ink); font-weight: 800; }
.wcard h3 { margin: 0.75rem 0 0.375rem; font-size: 1.125rem; font-weight: 800; color: var(--ink); }
.wcard p { margin: 0; color: var(--ink-2); font-size: 0.975rem; }
.welcome-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.625rem; counter-reset: st; }
.welcome-steps li { display: grid; gap: 0.125rem; padding: 0.875rem 1rem 0.875rem 3.5rem; border-left: 4px solid var(--tape); background: var(--salt); border-radius: 0 12px 12px 0; position: relative; counter-increment: st; }
.welcome-steps li::before { content: counter(st); position: absolute; left: 0.875rem; top: 0.875rem; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--ink); color: var(--salt); font-weight: 800; display: grid; place-items: center; font-size: 0.9375rem; }
.welcome-steps b { font-size: 1.0625rem; color: var(--ink); }
.welcome-steps span { color: var(--ink-2); font-size: 0.975rem; }
.welcome-note { margin: 0.5rem 0 0; font-size: 0.875rem; color: var(--ink-2); }

.stage:has(.box:not(.is-locked)) .welcome { display: none; }

.bar-btns { display: flex; gap: 0.5rem; align-items: center; }
.tour-hl { outline: 3px solid var(--tape) !important; outline-offset: 4px; border-radius: 999px; position: relative; z-index: 2; }
.tour { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); width: min(92vw, 28rem); z-index: 60; background: var(--ink); color: var(--salt); border: 2px solid var(--tape); border-radius: 18px; padding: 1rem 1.125rem; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35); display: grid; gap: 0.5rem; }
.tour[hidden] { display: none !important; }
.tour-step { margin: 0; font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tape); font-weight: 800; }
.tour-text { margin: 0; font-size: 1.0625rem; line-height: 1.45; }
.tour-actions { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.tour-nav { display: flex; gap: 0.5rem; }
.tour .ghost { color: var(--salt); border-color: var(--salt-2); }
.tour .accent { background: var(--tape); color: var(--ink); border: 0; min-height: 2.5rem; padding: 0 1rem; border-radius: 999px; font-weight: 800; }
@media (prefers-reduced-motion: reduce) { .cta-primary, .cta-secondary { transition: none; } }