/* Aaviq builder — "Rangoli Hologram": night-market warmth meets starship light.
   Dark brand, glass panels with warm rims, saffron→kumkum light. Mobile first, logical
   properties (RTL-safe), big targets, motion off under prefers-reduced-motion.
   Customer sites (preview iframes) keep their own designs; we only frame them. */
:root {
  /* surface */
  --night: #0b0717;
  --night-2: #150c27;
  --night-3: #1f1236;
  --glass: rgba(255, 236, 214, .055);
  --glass-hi: rgba(255, 236, 214, .09);
  --rim: rgba(255, 205, 150, .16);
  --rim-hi: rgba(255, 205, 150, .32);
  /* ink */
  --text: #fbf1e4;
  --muted: #cdbcab;
  --faint: #a8969f;
  /* light */
  --saffron: #ffb347;
  --marigold: #ff9f1c;
  --kumkum: #ff5d73;
  --lotus: #c77dff;
  --tulsi: #3ee6c1;
  --on-accent: #1d0a06;
  --grad: linear-gradient(100deg, #ffc56b 0%, #ff8a4c 45%, #ff5d73 100%);
  --grad-text: linear-gradient(100deg, #ffd27a 0%, #ff8a5c 40%, #ff5d73 70%, #c77dff 100%);
  --glow: 0 0 0 1px rgba(255, 179, 71, .25), 0 10px 40px -8px rgba(255, 110, 70, .55);
  /* type (i18n.js overrides --font/--display per language) */
  --font: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Sora", var(--font);
  --mono: ui-monospace, "SFMono-Regular", "Roboto Mono", Menlo, Consolas, var(--font), monospace;
  --lh: 1.55;
  /* shape */
  --r-lg: 26px;
  --r-md: 18px;
  --r-sm: 12px;
  --tap: 52px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --panel: linear-gradient(180deg, var(--glass-hi), var(--glass));
  --shadow: 0 30px 60px -30px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .06);
  --field: rgba(11, 7, 23, .6);
  --ok-soft: rgba(62, 230, 193, .1);
  --bad: #ff8a95;
  --bad-soft: rgba(255, 93, 115, .12);
  --warn-text: #ffcf87;
  --warn-soft: rgba(255, 179, 71, .1);
  /* legacy names (old "bazaar" theme), mapped onto the new palette */
  --ink: var(--text);
  --paper: var(--night);
  --paper-2: var(--night-2);
  --card: #1a1029;
  --line: var(--rim);
  --indigo: #d9b8ff;
  --indigo-soft: rgba(199, 125, 255, .12);
  --marigold-deep: var(--saffron);
  --marigold-soft: rgba(255, 179, 71, .12);
  --kumkum-soft: var(--bad-soft);
  --leaf: var(--tulsi);
  --leaf-soft: var(--ok-soft);
  --wa: #0f7a40;
  --warn-bg: var(--warn-soft);
  --warn: var(--warn-text);
  --danger: var(--bad);
  --ok: var(--tulsi);
  --radius: var(--r-md);
  --lift: none;
  --soft: var(--shadow);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--night); }
body {
  margin: 0; min-height: 100vh; color: var(--text);
  font-family: var(--font); font-size: 18px; line-height: var(--lh);
  background:
    radial-gradient(1100px 600px at 85% -10%, rgba(255, 120, 70, .16), transparent 60%),
    radial-gradient(900px 600px at -10% 30%, rgba(199, 125, 255, .12), transparent 60%),
    radial-gradient(800px 500px at 50% 110%, rgba(255, 179, 71, .10), transparent 60%),
    var(--night);
  background-attachment: fixed;
}
img { max-width: 100%; }
a { color: var(--saffron); text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); line-height: calc(var(--lh) * .76); margin: 0 0 .35em; font-weight: 700; letter-spacing: -.02em; }
:lang(en) h1, :lang(en) h2 { letter-spacing: -.035em; }
p { margin: 0 0 .75em; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--saffron); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }
[hidden] { display: none !important; }
::selection { background: rgba(255, 140, 80, .4); }

/* ---------- ambient light ---------- */
#fireflies { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.aurora { position: fixed; inset: -20% -10% auto; height: 70vh; z-index: 0; pointer-events: none;
  background: radial-gradient(40% 50% at 70% 45%, rgba(255, 93, 115, .13), transparent 70%), radial-gradient(35% 45% at 30% 30%, rgba(255, 179, 71, .10), transparent 70%);
  animation: drift 26s ease-in-out infinite alternate; }
@keyframes drift { to { transform: translate3d(-6%, 4%, 0) rotate(8deg); } }

/* ---------- header ---------- */
.top {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 8px 14px; background: rgba(11, 7, 23, .78); border-block-end: 1px solid rgba(255, 205, 150, .1);
  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); min-height: 48px; }
.brand-word { font: 700 23px/1 "Sora", var(--font); letter-spacing: -.04em; text-transform: lowercase; }
.logo { display: block; width: 34px; height: 34px; flex: none; filter: drop-shadow(0 0 8px rgba(255, 140, 80, .6)); }
.logo svg { display: block; width: 100%; height: 100%; }
.top-actions { display: flex; gap: 6px; align-items: center; }
.top .btn.small { min-height: 44px; }
.lang-btn { border-radius: 99px !important; }
.mock-tag { position: fixed; inset-block-end: 6px; inset-inline-end: 6px; background: var(--saffron); color: var(--on-accent); font: 700 11px/1 system-ui; padding: 4px 6px; border-radius: 6px; z-index: 50; }

/* sign-up / log-in buttons and the account menu */
.top-signup.btn.primary { box-shadow: 0 0 0 1px rgba(255, 179, 71, .25), 0 6px 22px -8px rgba(255, 110, 70, .6); }
.acct { position: relative; }
.acct-btn { gap: 6px; padding-inline: 12px; max-width: 280px; }
.acct-btn .i-user { color: var(--saffron); }
.acct-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; font-size: 14px; }
.acct-chev { width: 16px; height: 16px; opacity: .8; transition: transform .2s var(--ease); }
.acct-btn[aria-expanded="true"] .acct-chev { transform: rotate(180deg); }
.acct-menu {
  position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + 8px); z-index: 30;
  width: 270px; max-width: calc(100vw - 24px); padding: 8px; border-radius: var(--r-md);
  background: rgba(21, 12, 39, .97); box-shadow: inset 0 0 0 1px var(--rim-hi), 0 24px 50px -16px rgba(0, 0, 0, .9), 0 0 40px -18px rgba(255, 120, 70, .5);
  animation: view-in .18s var(--ease) both;
}
.acct-menu[hidden] { display: none; }
.acct-who { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px 10px; border-block-end: 1px solid rgba(255, 205, 150, .12); margin-block-end: 6px; }
.acct-who strong { font-size: 15px; overflow-wrap: anywhere; }
.acct-who .hint { font-size: 13px; }
.acct-item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 8px 12px; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--text); font: inherit; font-size: 16px; font-weight: 600; text-decoration: none; text-align: start; cursor: pointer; position: relative;
}
.acct-item .i { color: var(--saffron); }
.acct-item:hover, .acct-item:focus-visible { background: rgba(255, 179, 71, .1); outline: none; }
.acct-item.is-busy { color: transparent; }
.acct-item.is-busy::after { content: ""; position: absolute; inset-inline-start: 50%; width: 18px; height: 18px; margin-inline-start: -9px; border: 2.5px solid rgba(255, 179, 71, .25); border-top-color: var(--saffron); border-radius: 50%; animation: spin .8s linear infinite; }

main { position: relative; z-index: 1; overflow-x: clip; max-width: 640px; margin: 0 auto; padding: 22px 16px 96px; outline: none; }
.view { display: flex; flex-direction: column; gap: 16px; animation: view-in .5s var(--ease) both; }
.view > * { margin-block: 0; }
@keyframes view-in { from { opacity: 0; transform: translateY(10px); } }
.boot { display: grid; place-items: center; min-height: 50vh; }

/* ---------- type ---------- */
.title { font-size: 30px; }
.title.big { font-size: 38px; }
.lead { font-size: 18.5px; color: var(--muted); }
.hint { font-size: 15px; color: var(--muted); margin: 0; }
.muted { color: var(--muted); }
.center { text-align: center; }
.sub { font-size: 22px; margin-block-start: 8px; }
.label { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 17px; }
.error { color: var(--bad); font-weight: 600; margin: 0; }
.error:not(:empty) { background: var(--bad-soft); border: 1px solid rgba(255, 93, 115, .35); border-radius: var(--r-sm); padding: 10px 14px; }
.error:empty, .warn:empty, .ok:empty, .status-line:empty { display: none; }
.warn { color: var(--warn-text); font-size: 15px; margin: 0; }
.ok { color: var(--tulsi); font-weight: 600; display: flex; gap: 8px; align-items: center; margin: 0; }
.status-line { font-weight: 600; color: var(--saffron); margin: 0; }
.eyebrow { display: inline-flex; align-self: flex-start; flex-wrap: nowrap; align-items: center; gap: 8px; width: fit-content; max-width: 100%;
  padding: 6px 14px; border-radius: 18px; margin: 0; background: rgba(255, 179, 71, .08); box-shadow: inset 0 0 0 1px var(--rim);
  color: var(--saffron); font-weight: 600; font-size: 14px; line-height: 1.4; }
:lang(en) .eyebrow { font: 600 12.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.pulse-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--tulsi); box-shadow: 0 0 0 0 rgba(62, 230, 193, .6); animation: pulse-ring 2s infinite; }
@keyframes pulse-ring { 70% { box-shadow: 0 0 0 9px rgba(62, 230, 193, 0); } 100% { box-shadow: 0 0 0 0 rgba(62, 230, 193, 0); } }
.glow-text, .hl { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.glow-text { filter: drop-shadow(0 0 22px rgba(255, 110, 80, .35)); }

/* ---------- icons ---------- */
.i { display: inline-flex; width: 22px; height: 22px; flex: none; }
.i svg { width: 100%; height: 100%; }
[dir="rtl"] .i-next, [dir="rtl"] .i-back, [dir="rtl"] .chev { transform: scaleX(-1); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; position: relative;
  min-height: var(--tap); padding: 10px 22px; border-radius: 99px; border: 0;
  background: var(--glass); color: var(--text); box-shadow: inset 0 0 0 1px var(--rim-hi);
  font: inherit; font-weight: 600; font-size: 17px; line-height: 1.25;
  text-decoration: none; cursor: pointer; text-align: center;
  -webkit-tap-highlight-color: transparent; transition: transform .2s var(--ease), box-shadow .2s, background .2s;
}
.btn:hover { background: var(--glass-hi); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn.small { min-height: 48px; padding: 6px 16px; font-size: 15px; }
.btn.big { min-height: 58px; font-size: 18px; width: 100%; }
.btn.huge { min-height: 62px; font-size: 19px; width: 100%; padding-inline: 28px; }
.btn.huge .i { width: 24px; height: 24px; }
.btn.primary { color: var(--on-accent); background: var(--grad); box-shadow: var(--glow); overflow: hidden; }
.btn.primary:hover { box-shadow: 0 0 0 1px rgba(255, 179, 71, .4), 0 14px 50px -6px rgba(255, 110, 70, .75); }
.btn.primary.huge::after, .btn.primary.big::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
  transform: translateX(-120%); animation: sheen 5s 1.5s infinite; }
@keyframes sheen { 30%, 100% { transform: translateX(120%); } }
.btn.secondary { background: var(--glass); }
.btn.ghost, .btn.light.ghost { background: transparent; color: var(--saffron); box-shadow: none; }
.btn.ghost:hover { background: rgba(255, 179, 71, .08); }
.btn.ghost:active { transform: none; }
.btn.light { background: rgba(255, 236, 214, .07); box-shadow: inset 0 0 0 1px var(--rim); }
.btn.danger { background: #d83a4c; color: #fff; box-shadow: 0 8px 30px -10px rgba(255, 93, 115, .7); }
.danger-text { color: var(--bad) !important; }
.btn.whatsapp { background: var(--wa); color: #fff; box-shadow: 0 0 0 1px rgba(37, 211, 102, .35), 0 10px 34px -10px rgba(37, 211, 102, .6); }
.btn.icon { padding: 0; width: 48px; min-height: 48px; }
.btn.record { background: linear-gradient(100deg, #ff6b7f, #e0344a); color: #fff; box-shadow: 0 0 0 1px rgba(255, 93, 115, .4), 0 12px 40px -10px rgba(255, 93, 115, .8); }
.btn.stop { background: var(--text); color: var(--night); }
.btn[aria-pressed="true"] { background: var(--saffron); color: var(--on-accent); box-shadow: 0 0 22px -6px rgba(255, 179, 71, .8); }
.btn.is-busy { color: transparent !important; }
.btn.is-busy::after {
  content: ""; position: absolute; inset: auto; width: 22px; height: 22px; border-radius: 50%; transform: none; background: none;
  border: 3px solid rgba(255, 236, 214, .25); border-top-color: var(--text); animation: spin .8s linear infinite;
}
.btn.primary.is-busy::after { border-color: rgba(29, 10, 6, .25); border-top-color: var(--on-accent); }
.row { display: flex; gap: 10px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.row.center { justify-content: center; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.navbar { display: flex; justify-content: space-between; gap: 10px; margin-block-start: 14px; }
.navbar .btn { flex: 1; }
.navbar .btn.ghost { flex: 0 1 auto; }

/* ---------- inputs ---------- */
input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="url"], input[type="search"], input:not([type]), input[type="time"], input[type="number"], textarea, select {
  width: 100%; min-height: var(--tap); padding: 12px 16px; border: 1px solid var(--rim-hi); border-radius: var(--r-sm);
  background: var(--field); color: var(--text); font: inherit; font-size: 18px; transition: border-color .2s, box-shadow .2s;
}
::placeholder { color: #9a8a93; opacity: 1; }
textarea { resize: vertical; line-height: var(--lh); }
select option { background: var(--night-2); color: var(--text); }
input:focus, textarea:focus, select:focus { border-color: var(--saffron); outline: none; box-shadow: 0 0 0 4px rgba(255, 179, 71, .18), 0 0 30px -6px rgba(255, 140, 80, .6); }
input:disabled { opacity: .6; }
input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(.85) sepia(.4); }
.code-input { font: 600 30px/1.2 "Sora", var(--font); letter-spacing: .35em; text-align: center; font-variant-numeric: tabular-nums; }
.pw-wrap { position: relative; }
.pw-wrap input { padding-inline-end: 56px; }
.pw-toggle { position: absolute; inset-block: 2px; inset-inline-end: 2px; width: 52px; display: grid; place-items: center; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--muted); cursor: pointer; }
.pw-toggle:hover, .pw-toggle[aria-pressed="true"] { color: var(--saffron); }
.pw-toggle:focus-visible { outline: 3px solid var(--saffron); outline-offset: -3px; }
.pw-strength { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; font-weight: 600; color: var(--muted); min-height: 20px; }
.pw-bar { display: inline-flex; gap: 4px; }
.pw-bar i { width: 26px; height: 5px; border-radius: 4px; background: rgba(255, 205, 150, .14); transition: background .2s; }
.pw-strength[data-level="0"] { visibility: hidden; }
.pw-strength[data-level="1"] { color: var(--bad); }
.pw-strength[data-level="1"] i:nth-child(1) { background: var(--bad); }
.pw-strength[data-level="2"] { color: var(--saffron); }
.pw-strength[data-level="2"] i:nth-child(-n+2) { background: var(--saffron); }
.pw-strength[data-level="3"] { color: var(--tulsi); }
.pw-strength[data-level="3"] i { background: var(--tulsi); box-shadow: 0 0 8px -1px rgba(62, 230, 193, .7); }
.forgot-link { margin: -4px 0 0; text-align: end; }
.forgot-link a, .auth-alt a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; color: var(--saffron); }
.auth-alt { display: flex; flex-direction: column; align-items: center; gap: 0; }
.auth-alt p { margin: 0; text-align: center; }
.ok-note { background: var(--ok-soft); border-color: rgba(62, 230, 193, .35); }
p.ok-note > .i { color: var(--tulsi); }
.field { display: flex; flex-direction: column; gap: 6px; padding: 10px; margin-inline: -10px; border-radius: 14px; border: 1px solid transparent; }
.field.suggested, .group.suggested, .day-row.suggested { background: var(--warn-soft); border-color: rgba(255, 179, 71, .45); }
.field.empty { background: var(--bad-soft); border-color: rgba(255, 93, 115, .4); }
.fill-note { color: var(--bad); font-size: 15px; margin: 0; font-weight: 600; }
.sug { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--warn-text); font-weight: 600; font-size: 15px; }
.sug.block { background: var(--warn-soft); border: 1px solid rgba(255, 179, 71, .45); padding: 10px; border-radius: 14px; }
.group { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.group legend { font-weight: 600; font-size: 17px; padding: 0; margin-block-end: 4px; }
.row-input { display: flex; align-items: flex-end; gap: 4px; }
.row-input .field { flex: 1; }
.check-line { display: flex; align-items: center; gap: 10px; min-height: 48px; font-weight: 600; }
input[type="checkbox"], input[type="radio"] { width: 24px; height: 24px; accent-color: var(--saffron); flex: none; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-block-end: 1px dashed var(--rim); min-height: var(--tap); }
.switch-text { display: flex; flex-direction: column; }
input.switch { appearance: none; -webkit-appearance: none; width: 56px; height: 32px; border-radius: 99px; background: rgba(255, 236, 214, .14); box-shadow: inset 0 0 0 1px var(--rim-hi); position: relative; cursor: pointer; transition: background .2s; margin: 0; flex: none; }
input.switch::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 26px; height: 26px; border-radius: 50%; background: var(--text); transition: inset-inline-start .2s var(--ease); box-shadow: 0 1px 4px rgba(0,0,0,.5); }
input.switch:checked { background: var(--tulsi); box-shadow: 0 0 16px -4px var(--tulsi); }
input.switch:checked::after { inset-inline-start: 27px; background: #04281f; }

/* ---------- glass cards & misc ---------- */
.card, .step-panel, .how li, .lang-card, .site-card, .action, .enq, .consent, .kind, .item-card, .photo-card, .credits, .summary, .wait-note, .confirm, .bill-banner, .tile, .style-tile, .choice, .check-row, .day-row, .doc-list li, .diff li, .lang-choice {
  background: var(--panel); border: 1px solid var(--rim); border-radius: var(--r-md); color: var(--text);
}
.card { padding: 18px; box-shadow: var(--shadow); }
.card h2 { font-size: 22px; display: flex; gap: 8px; align-items: center; }
.note { display: flex; gap: 10px; align-items: flex-start; background: rgba(199, 125, 255, .08); border-color: rgba(199, 125, 255, .28); box-shadow: none; font-size: 16px; flex-wrap: wrap; }
.note > .i { color: var(--lotus); margin-block-start: 2px; }
p.note { display: block; }
p.note > .i { vertical-align: -5px; margin-inline-end: 8px; }
.note > p { margin: 0; display: flex; gap: 8px; }
.warn-note { background: var(--warn-soft); border-color: rgba(255, 179, 71, .4); }
.warn-note > .i { color: var(--saffron); }
.quote { font-size: 17px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 99px; font-size: 14px; font-weight: 600; background: var(--glass-hi); color: var(--text); box-shadow: inset 0 0 0 1px var(--rim); white-space: nowrap; }
.chip-published { color: #b6ffe9; background: var(--ok-soft); box-shadow: inset 0 0 0 1px rgba(62, 230, 193, .35); }
.chip-published::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tulsi); animation: pulse-ring 2s infinite; }
.chip-paused { color: #ffc2c9; background: var(--bad-soft); box-shadow: inset 0 0 0 1px rgba(255, 93, 115, .35); }
.chip-draft { color: #ffd9a0; background: var(--warn-soft); box-shadow: inset 0 0 0 1px rgba(255, 179, 71, .35); }
.chip-designing { color: #ffd9a0; background: rgba(255, 179, 71, .12); box-shadow: inset 0 0 0 1px rgba(255, 179, 71, .45); }
.chip-designing::after { content: ""; width: 14px; height: 4px; background: radial-gradient(circle, currentColor 1.6px, transparent 2px) 0 0 / 5px 4px repeat-x; animation: dots 1.2s steps(4) infinite; }
@keyframes dots { from { width: 0; } to { width: 17px; } }
.help { background: transparent; border: 1px dashed var(--rim-hi); border-radius: 14px; padding: 0 14px; font-size: 16px; }
.help summary { display: flex; align-items: center; gap: 8px; min-height: 48px; cursor: pointer; font-weight: 600; color: var(--saffron); list-style: none; }
.help summary::-webkit-details-marker { display: none; }
.help[open] { padding-block-end: 8px; background: var(--glass); }
.tips ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.tips li { display: flex; gap: 10px; align-items: flex-start; }
.tips .i { color: var(--tulsi); margin-block-start: 3px; }

.progress { display: flex; flex-direction: column; gap: 8px; }
.progress-text { font: 600 13px/1.4 var(--font); color: var(--muted); letter-spacing: .04em; }
:lang(en) .progress-text { font-family: var(--mono); text-transform: uppercase; letter-spacing: .12em; }
.segs { display: flex; gap: 5px; }
.segs span { flex: 1; height: 5px; border-radius: 99px; background: rgba(255, 205, 150, .14); transition: background .3s; }
.segs span.done { background: var(--grad); box-shadow: 0 0 10px rgba(255, 140, 80, .5); }
.segs span.now { background: var(--saffron); box-shadow: 0 0 12px var(--saffron); animation: breathe 1.8s ease-in-out infinite; }
.bar { height: 6px; background: rgba(255, 205, 150, .14); border-radius: 99px; overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--grad); border-radius: 99px; transition: width .4s; box-shadow: 0 0 12px var(--marigold); }

.spinner-wrap { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 40px 0; color: var(--muted); }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255, 179, 71, .18); border-top-color: var(--saffron); animation: spin .8s linear infinite; display: inline-block; filter: drop-shadow(0 0 6px rgba(255, 179, 71, .6)); }
@keyframes spin { to { transform: rotate(360deg); } }

.toast {
  position: fixed; inset-inline: 12px; inset-block-end: 16px; margin: 0 auto; max-width: 520px; z-index: 40;
  background: rgba(21, 12, 39, .94); color: var(--text); padding: 12px 16px; border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px var(--rim-hi), 0 20px 50px -12px #000, 0 0 30px -10px rgba(255, 140, 80, .5);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  display: flex; gap: 12px; border-inline-start: 4px solid var(--saffron);
  align-items: center; justify-content: space-between; transform: translateY(150%); visibility: hidden; transition: transform .3s var(--ease), visibility .2s; font-size: 16px;
}
.toast.show { transform: none; visibility: visible; }

.confirm { background: var(--bad-soft); border-color: rgba(255, 93, 115, .4); padding: 14px; }
.confirm .row { flex-wrap: wrap; }

/* old motifs: retired in the dark brand */
.awning, .toran { display: none; }

/* ---------- holographic rangoli ---------- */
.rangoli { pointer-events: none; }
.mandala { display: block; width: 100%; height: 100%; overflow: visible; }
.mandala .halo { stroke-width: 7; opacity: .16; }
.mandala .line { stroke-width: 1.6; }
.mandala .ring { transform-box: fill-box; transform-origin: center; }
.mandala-hero .r3, .mandala-small .r3 { animation: spin 50s linear infinite reverse; }
.mandala-hero .r4 { opacity: .7; }
.core-glow { opacity: .9; }
.mandala-build .ring { opacity: .07; transform: scale(.94); transition: opacity 1.2s var(--ease), transform 1.4s var(--ease); }
.mandala-build .ring.on { opacity: 1; transform: none; }
.mandala-build .ring.now { opacity: .9; transform: none; animation: breathe 1.8s ease-in-out infinite; }
.mandala-build .ring.now .halo { opacity: .4; }
@keyframes breathe { 50% { opacity: .35; } }

/* the projector: beam + floating phone above a tilted rangoli plate */
.stage { position: relative; height: 470px; perspective: 900px; margin-inline: -16px; overflow: hidden; }
.plate-wrap { position: absolute; inset-inline: 0; bottom: -10px; height: 300px; display: grid; place-items: center;
  transform: rotateX(70deg); transform-style: preserve-3d; pointer-events: none; }
.plate { width: 400px; height: 400px; flex: none; animation: spin 90s linear infinite; }
.plate .rangoli { width: 100%; height: 100%; }
.beam { position: absolute; left: 50%; bottom: 120px; width: 300px; height: 330px; transform: translateX(-50%);
  background: linear-gradient(0deg, rgba(255, 170, 90, .32), rgba(255, 120, 90, .08) 60%, transparent);
  clip-path: polygon(30% 100%, 70% 100%, 100% 0, 0 0); pointer-events: none; mix-blend-mode: screen; }
.beam::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255, 220, 170, .1) 0 1px, transparent 1px 6px);
  animation: rise 3s linear infinite; }
@keyframes rise { to { background-position: 0 -60px; } }
.holo-phone { position: absolute; z-index: 2; left: 50%; width: 214px; aspect-ratio: 9 / 18.6; padding: 7px; border-radius: 34px;
  background: linear-gradient(160deg, #2a1b3e, #120a1f 50%, #24163a); transform: translateX(-50%);
  box-shadow: 0 0 0 1px rgba(255, 210, 160, .28), 0 0 40px -6px rgba(255, 130, 80, .55), 0 40px 80px -30px #000; }
.holo-phone::before { content: ""; position: absolute; top: 13px; left: 50%; width: 46px; height: 5px; margin-left: -23px; border-radius: 9px; background: #000; z-index: 3; opacity: .7; }
.phone-float { top: 30px; animation: float 7s ease-in-out infinite; }
@keyframes float { 50% { transform: translate(-50%, -12px); } }
.tag { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 99px; font-size: 14px; font-weight: 600;
  background: rgba(21, 12, 39, .85); color: var(--text); box-shadow: inset 0 0 0 1px var(--rim-hi), 0 10px 30px -10px #000; white-space: nowrap; }
.tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--tulsi); box-shadow: 0 0 10px var(--tulsi); }
.tag.t2 i { background: var(--saffron); box-shadow: 0 0 10px var(--saffron); }
.tag.t1 { top: 84px; inset-inline-start: 16px; } .tag.t2 { top: 214px; inset-inline-end: 16px; } .tag.t3 { top: 336px; inset-inline-start: 22px; }

/* ---------- welcome ---------- */
main:has(.welcome) { max-width: 1180px; }
.welcome { display: flex; flex-direction: column; gap: 56px; }
.hero { display: grid; gap: 4px; align-items: center; }
.hero-copy { display: flex; flex-direction: column; gap: 16px; padding-block-start: 8px; }
.hero h1.title { font-size: clamp(2.4rem, 10.5vw, 4.6rem); line-height: calc(var(--lh) * .72); margin: 0; }
:lang(en) .hero h1.title { letter-spacing: -.045em; line-height: 1.04; }
.hero h1.title > span { padding-block-end: .06em; }
.hero h1.title > span { display: block; }
.hero .lead { margin: 0; font-size: clamp(1.06rem, 2.4vw, 1.2rem); max-width: 34em; }
.hero-cta { display: flex; flex-direction: column; gap: 12px; margin-block-start: 8px; }
.trust { display: flex; flex-direction: column; gap: 6px; font-size: 15px; color: var(--muted); list-style: none; padding: 0; margin: 4px 0 0; }
.trust li { display: flex; gap: 8px; align-items: center; }
.trust .i { width: 18px; height: 18px; color: var(--tulsi); filter: drop-shadow(0 0 6px rgba(62, 230, 193, .6)); }
/* the sample shop website inside the floating phone (a customer site: light, its own colours) */
.demo { height: 100%; border-radius: 27px; overflow: hidden; background: #fffaf3; color: #2a120b; font-size: 11px; line-height: 1.35; text-align: start; }
.demo .awning { display: block; height: 40px; background: repeating-linear-gradient(90deg, #c4302b 0 22px, #fff4e2 22px 44px);
  -webkit-mask: linear-gradient(#000 0 0) top / 100% 28px no-repeat, radial-gradient(circle 11px at 11px 0, #000 97%, #0000) 0 28px / 22px 12px repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% 28px no-repeat, radial-gradient(circle 11px at 11px 0, #000 97%, #0000) 0 28px / 22px 12px repeat-x; }
.demo-body { padding: 2px 12px 12px; display: flex; flex-direction: column; gap: 6px; }
.demo-name { font: 700 19px/1.05 var(--display); color: #7a1f1a; margin: 0; letter-spacing: -.01em; }
.demo-tag { color: #6b5d4f; margin: 0; }
.demo-open { align-self: flex-start; background: #dcf2e4; color: #11613a; font-weight: 700; padding: 2px 8px; border-radius: 99px; }
.demo-open::before { content: "● "; color: #1d9a56; }
.demo-plate { border-radius: 12px; background: linear-gradient(160deg, #ffe2a8, #f6b765); height: 84px; display: grid; place-items: center; overflow: hidden; }
.demo-plate svg { width: 92%; height: auto; }
.demo-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.demo-items li { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px dashed #e7d6bb; }
.demo-items b { color: #7a1f1a; }
.demo-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.demo-btns > span { display: flex; align-items: center; justify-content: center; gap: 4px; border-radius: 99px; padding: 6px 4px; color: #fff; font-weight: 700; background: #b3261e; }
.demo-btns > span + span { background: #128c4a; }
.demo-btns .i { width: 13px; height: 13px; }

.how, .for { display: flex; flex-direction: column; gap: 16px; }
.how h2, .for h2, .lang-card h2 { font-size: clamp(1.5rem, 4.4vw, 2.2rem); margin: 0; }
.how ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.how li { position: relative; overflow: hidden; padding: 24px 22px 22px; box-shadow: var(--shadow); border-radius: var(--r-lg); }
.how li::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, rgba(255, 179, 71, .6), transparent 35%, transparent 70%, rgba(199, 125, 255, .5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.how .num { position: absolute; inset-inline-end: 18px; top: 10px; font: 700 54px/1 "Sora", var(--font); letter-spacing: -.05em;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 205, 150, .3); }
.how .step-ic { width: 48px; height: 48px; padding: 11px; margin-block-end: 14px; border-radius: 50%; color: var(--saffron);
  box-shadow: inset 0 0 0 1px rgba(255, 179, 71, .3); background: radial-gradient(circle, rgba(255, 179, 71, .15), transparent 70%); filter: drop-shadow(0 0 10px rgba(255, 160, 80, .5)); }
.how h3 { margin: 0 0 6px; font-size: 21px; }
.how p { margin: 0; color: var(--muted); font-size: 16px; }
.for ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.for li { display: flex; align-items: center; gap: 12px; padding: 12px; min-height: 64px; border-radius: var(--r-md); background: var(--glass); box-shadow: inset 0 0 0 1px var(--rim); font-weight: 600; font-size: 15.5px; line-height: 1.3; }
.for li .i { width: 40px; height: 40px; padding: 9px; border-radius: 12px; color: var(--saffron);
  background: radial-gradient(circle at 50% 30%, rgba(255, 179, 71, .25), rgba(255, 93, 115, .08)); box-shadow: inset 0 0 0 1px var(--rim-hi); }
.for li:nth-child(3n+2) .i { color: #ffb0bb; }
.for li:nth-child(3n) .i { color: #e3c6ff; }
.lang-card { display: flex; flex-direction: column; gap: 12px; padding: 24px 18px; border-radius: var(--r-lg); }
.lang-card h2 .i { color: var(--saffron); }
.final { position: relative; display: grid; justify-items: center; gap: 22px; padding: 70px 4px; text-align: center; overflow: hidden; }
.final > .rangoli { position: absolute; width: 520px; height: 520px; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: .35; }
.final > .rangoli .mandala { animation: spin 120s linear infinite; }
.final-title { position: relative; margin: 0; max-width: 15em; font: 700 clamp(1.7rem, 5vw, 2.6rem)/calc(var(--lh) * .76) var(--display); }
.final .btn { position: relative; width: auto; }
.site-foot { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-block: 24px 0; border-block-start: 1px solid rgba(255, 205, 150, .1); color: var(--faint); font-size: 15px; text-align: center; }
.site-foot strong { font: 700 15px "Sora", var(--font); color: var(--text); }

/* ---------- language grid ---------- */
.lang-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.lang-choice {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-height: 62px; padding: 8px 14px;
  border-radius: 14px; background: var(--glass); font: inherit; cursor: pointer; text-align: start;
  transition: border-color .2s, transform .1s, box-shadow .2s;
}
.lang-choice:hover { border-color: var(--rim-hi); }
.lang-choice:active { transform: scale(.98); }
.lang-choice .native { font-size: 20px; font-weight: 700; }
.lang-choice .eng { font-size: 13px; color: var(--muted); font-family: system-ui, sans-serif; }
.lang-choice[aria-current="true"] { border-color: var(--saffron); background: rgba(255, 179, 71, .12); box-shadow: 0 0 24px -8px rgba(255, 179, 71, .8); }
.sheet { width: min(640px, 100vw); max-width: 100vw; max-height: 90vh; border: 0; border-radius: 26px 26px 0 0; padding: 16px; margin-block-end: 0; overflow: auto;
  background: linear-gradient(180deg, #1d1230, var(--night)); color: var(--text); box-shadow: inset 0 1px 0 var(--rim-hi), 0 -20px 60px -20px rgba(255, 120, 70, .4); }
.sheet::backdrop { background: rgba(5, 2, 12, .7); backdrop-filter: blur(4px); }
.sheet-head { display: flex; justify-content: space-between; align-items: center; margin-block-end: 10px; }
.sheet-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 23px; }
.sheet-head h2 .i { color: var(--saffron); }

/* ---------- new site ---------- */
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  min-height: 116px; padding: 14px 8px; font: inherit; font-weight: 600; font-size: 16px; line-height: 1.25; cursor: pointer; text-align: center;
  transition: border-color .2s, transform .2s var(--ease), box-shadow .2s;
}
.tile:hover { border-color: var(--rim-hi); transform: translateY(-2px); }
.tile .i { width: 52px; height: 52px; padding: 12px; border-radius: 16px; color: var(--saffron);
  background: radial-gradient(circle at 50% 30%, rgba(255, 179, 71, .22), rgba(255, 93, 115, .06)); box-shadow: inset 0 0 0 1px var(--rim-hi); }
.tile:nth-child(3n+2) .i { color: #ffb0bb; }
.tile:nth-child(3n) .i { color: #e3c6ff; }
.tile[aria-pressed="true"], .style-tile[aria-pressed="true"], .choice[aria-pressed="true"], .check-row.on {
  border-color: var(--saffron); background: linear-gradient(180deg, rgba(255, 179, 71, .16), rgba(255, 93, 115, .06));
  box-shadow: 0 0 0 1px rgba(255, 179, 71, .4), 0 0 30px -8px rgba(255, 140, 80, .7);
}
.recorder { display: flex; flex-direction: column; gap: 12px; align-items: stretch; text-align: center; }
.rec-live { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 20px; font-weight: 700; }
.rec-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--kumkum); box-shadow: 0 0 14px var(--kumkum); animation: blink 1s infinite; }
.rec-time { font: 600 30px/1.2 "Sora", var(--font); font-variant-numeric: tabular-nums; }
@keyframes blink { 50% { opacity: .2; } }
.rec-done { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.rec-done audio { width: 100%; color-scheme: dark; }
.big-actions { display: grid; gap: 10px; }
.thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.thumbs:empty { display: none; }
.thumb { position: relative; margin: 0; aspect-ratio: 1; animation: pop .25s ease-out; }
.thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; box-shadow: 0 0 0 1px var(--rim-hi); }
.thumb-x { position: absolute; top: -6px; inset-inline-end: -6px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--rim-hi); background: var(--night-2); color: var(--text); display: grid; place-items: center; cursor: pointer; padding: 7px; }
@keyframes pop { from { transform: scale(.7); opacity: 0; } }
.doc-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.doc-list:empty { display: none; }
.doc-list li { display: flex; align-items: center; gap: 8px; border-radius: 12px; padding-block: 4px; padding-inline: 12px 4px; }
.doc-list span:nth-child(2) { flex: 1; overflow-wrap: anywhere; }

.kinds { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.kind { padding: 12px; display: flex; flex-direction: column; gap: 10px; transition: border-color .2s; }
.kind.has { border-color: rgba(62, 230, 193, .5); box-shadow: 0 0 24px -10px rgba(62, 230, 193, .6); }
.kind-head { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; }
.kind-art { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 236, 214, .92); box-shadow: 0 0 20px -8px rgba(255, 179, 71, .7); }
.kind-art svg { width: 44px; height: 44px; }
.kind-text { display: flex; flex-direction: column; min-width: 0; }
.kind-text strong { font-size: 17px; line-height: 1.3; }
.kind-text span { font-size: 14px; color: var(--muted); line-height: 1.35; }
.kind .count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: var(--tulsi); color: #04281f; font-size: 13px; margin-inline-start: 6px; vertical-align: 2px; }
.kind .btn.small { padding: 6px 12px; }
.photo-count { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.photo-count .segs { flex: 1; max-width: 160px; }

.consent { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-color: rgba(255, 179, 71, .45); box-shadow: 0 0 40px -16px rgba(255, 140, 80, .6); }
.consent h2 { font-size: 22px; margin: 0; display: block; }
.consent p { margin: 0; }
.consent.ask { animation: nudge .5s; }
@keyframes nudge { 30% { transform: translateX(-6px); } 60% { transform: translateX(6px); } }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choice { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 64px; padding: 10px 14px; border-radius: 14px; font: inherit; font-weight: 700; font-size: 18px; cursor: pointer; text-align: start; }
.choice small { font-weight: 500; font-size: 13px; color: var(--muted); }
.stock-sample { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.stock-sample span { aspect-ratio: 4/3; border-radius: 10px; position: relative; overflow: hidden; }
.stock-sample span::after { content: "CC"; position: absolute; inset-block-end: 4px; inset-inline-end: 4px; font: 700 10px/1 system-ui; background: rgba(0,0,0,.55); color: #fff; padding: 2px 4px; border-radius: 4px; }
.stock-sample span:nth-child(1) { background: linear-gradient(160deg, #f9c46b, #c7612a); }
.stock-sample span:nth-child(2) { background: linear-gradient(160deg, #9fd3b5, #2f6f53); }
.stock-sample span:nth-child(3) { background: linear-gradient(160deg, #a9b7ef, #2f3f8f); }

.style-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.style-tile { display: flex; flex-direction: column; gap: 8px; padding: 8px 8px 10px; font: inherit; cursor: pointer; text-align: start; transition: transform .2s var(--ease), border-color .2s, box-shadow .2s; }
.style-tile:hover { border-color: var(--rim-hi); }
.style-tile[aria-pressed="true"] { transform: translateY(-2px); }
.style-tile strong { font-size: 17px; padding-inline: 4px; display: flex; align-items: center; gap: 6px; }
.style-tile strong .i { width: 18px; height: 18px; display: none; color: var(--saffron); }
.style-tile[aria-pressed="true"] strong .i { display: inline-flex; }
.style-tile small { color: var(--muted); font-size: 13px; padding-inline: 4px; line-height: 1.3; }
/* style samples show what a customer site could look like: keep their own colours */
.sw-art { height: 84px; border-radius: 12px; display: flex; flex-direction: column; justify-content: center; padding: 10px 12px; gap: 6px; overflow: hidden; position: relative; }
.sw-art b { font-size: 28px; line-height: 1; }
.sw-art i { display: block; height: 6px; border-radius: 3px; width: 70%; }
.sw-art i + i { width: 45%; }
.s-traditional { background: #7a1f1a; color: #f6c453; border: 3px double #f6c453; }
.s-traditional b { font-family: Georgia, "Noto Serif", serif; }
.s-traditional i { background: #f6c453; opacity: .7; }
.s-modern { background: #f4f4f2; color: #111; }
.s-modern b { font-family: system-ui, sans-serif; font-weight: 800; letter-spacing: -.04em; }
.s-modern i { background: #111; }
.s-modern::after { content: ""; position: absolute; inset-inline-end: 10px; top: 10px; width: 26px; height: 26px; border-radius: 50%; background: #ff5a1f; }
.s-colourful { background: linear-gradient(135deg, #ff4f81 0 30%, #ffc400 30% 55%, #19b7a6 55% 80%, #4b5bdc 80%); color: #fff; }
.s-colourful b { font-family: system-ui, sans-serif; font-weight: 800; text-shadow: 2px 2px 0 rgba(0,0,0,.25); }
.s-colourful i { background: #fff; }
.s-premium { background: #15131c; color: #d9b46a; box-shadow: inset 0 0 0 1px rgba(217, 180, 106, .3); }
.s-premium b { font-family: Georgia, "Noto Serif", serif; font-style: italic; font-weight: 400; }
.s-premium i { background: linear-gradient(90deg, #d9b46a, transparent); height: 2px; }
.s-minimal { background: #fbfaf7; color: #333; border: 1px solid #e5e2db; }
.s-minimal b { font-family: system-ui, sans-serif; font-weight: 300; letter-spacing: .08em; font-size: 22px; }
.s-minimal i { background: #d8d4cb; height: 2px; }
.wish-count { text-align: end; }

.lang-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px; }
.check-row { display: flex; align-items: center; gap: 12px; min-height: var(--tap); padding: 6px 12px; border-radius: 14px; cursor: pointer; }
.check-row .native { font-weight: 700; font-size: 18px; }
.check-row .eng { color: var(--muted); font-size: 14px; flex: 1; }
.check-row .chip { margin-inline-start: auto; }
.summary { list-style: none; padding: 16px; margin: 0; display: flex; flex-direction: column; gap: 8px; border-style: dashed; }
.summary li { display: flex; align-items: center; gap: 10px; }
.summary li.off { color: var(--faint); }
.summary .i { color: var(--tulsi); }
.summary li.off .i { color: var(--faint); }

/* ---------- AI job: the hologram projector ---------- */
main:has(.build-grid) { max-width: 1180px; }
.job { display: flex; flex-direction: column; gap: 16px; }
.job-head { display: flex; flex-direction: column; gap: 10px; }
.job-head .title { margin: 0; }
:lang(en) .job-head .eyebrow { text-transform: none; letter-spacing: .02em; font-size: 13.5px; }
.build-grid { display: grid; gap: 16px; }
.build-side { display: grid; gap: 16px; align-content: start; }
.forge { position: relative; overflow: hidden; padding: 12px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--rim); box-shadow: var(--shadow); }
.forge::before, .forge::after { content: ""; position: absolute; width: 22px; height: 22px; border: 2px solid var(--saffron); opacity: .7; z-index: 4; }
.forge::before { top: 10px; inset-inline-start: 10px; border-inline-end: 0; border-block-end: 0; border-start-start-radius: 8px; }
.forge::after { bottom: 10px; inset-inline-end: 10px; border-inline-start: 0; border-block-start: 0; border-end-end-radius: 8px; }
.forge-hud { position: relative; z-index: 3; display: flex; justify-content: space-between; font: 600 13px var(--mono); letter-spacing: .08em; color: var(--muted); padding: 6px 16px; }
.forge-hud b { color: var(--saffron); }
.hud-time { font-variant-numeric: tabular-nums; color: var(--text); }
.forge-stage { position: relative; height: 380px; perspective: 800px; overflow: hidden; margin-inline: -12px; }
.forge .plate-wrap { bottom: -50px; }
.forge .plate { width: 380px; height: 380px; animation-duration: 60s; }
.forge .beam { bottom: 92px; height: 280px; width: 260px; }
.phone-build { top: 8px; width: 156px; }
.forge.is-failed .beam, .forge.is-failed .scan { display: none; }
.forge.is-failed .mandala { filter: grayscale(.8); opacity: .6; }
/* waiting in the design studio queue: the projector idles (no scan, dim beam, slow breathing) */
.forge.is-waiting .scan { display: none; }
.forge.is-waiting .beam { opacity: .35; animation: breathe 4s ease-in-out infinite; }
.forge.is-waiting .wire .w { animation-duration: 6s; }
@keyframes breathe { 50% { opacity: .55; } }
.meter { position: relative; z-index: 3; height: 4px; border-radius: 4px; background: rgba(255, 205, 150, .12); overflow: hidden; margin: 8px 6px 4px; }
.meter span { display: block; height: 100%; background: var(--grad); transform-origin: left; box-shadow: 0 0 16px var(--marigold); transition: transform 1.2s var(--ease); }
[dir="rtl"] .meter span { transform-origin: right; }
/* wireframe of a website being built inside the phone */
.wire { position: relative; height: 100%; border-radius: 27px; overflow: hidden; background: #120a1f; padding: 24px 10px 10px; display: flex; flex-direction: column; gap: 7px; }
.w { border-radius: 8px; border: 1px dashed rgba(255, 205, 150, .18); transition: all .8s var(--ease); }
.w-hero { display: grid; gap: 6px; padding: 7px; border-style: solid; border-color: rgba(255, 205, 150, .1); }
.w-photo { height: 56px; border-radius: 6px; border: 1px dashed rgba(255, 205, 150, .18); transition: all .8s var(--ease); }
.w-title, .w-sub { height: 10px; border-radius: 4px; background: rgba(255, 205, 150, .08); transition: all .8s var(--ease); }
.w-title { width: 70%; height: 13px; } .w-sub { width: 45%; }
.w-row { height: 18px; } .w-row.short { width: 70%; }
.w-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; border: 0; }
.w-btns span { height: 24px; border-radius: 99px; border: 1px dashed rgba(255, 205, 150, .18); transition: all .8s var(--ease); }
.w-map { flex: 1; min-height: 30px; }
.wire:not([data-stage="1"]) .w-title, .wire:not([data-stage="1"]) .w-sub { background: rgba(255, 210, 160, .55); box-shadow: 0 0 10px rgba(255, 170, 90, .5); }
.wire[data-stage="1"] .w-title, .wire[data-stage="1"] .w-sub { background: linear-gradient(90deg, rgba(255, 179, 71, .2), rgba(255, 220, 170, .8), rgba(255, 179, 71, .2)) 0 0 / 200% 100%; animation: shimmer 1.6s linear infinite; }
.wire:is([data-stage="2"], [data-stage="3"], [data-stage="4"], [data-stage="5"], [data-stage="6"]) .w-photo,
.wire:is([data-stage="3"], [data-stage="4"], [data-stage="5"], [data-stage="6"]) :is(.w-row, .w-btns span),
.wire:is([data-stage="4"], [data-stage="5"], [data-stage="6"]) .w-map {
  border-style: solid; border-color: rgba(255, 179, 71, .8); background: linear-gradient(90deg, rgba(255, 179, 71, .12), rgba(255, 93, 115, .22), rgba(255, 179, 71, .12)) 0 0 / 200% 100%;
  box-shadow: 0 0 14px -2px rgba(255, 140, 80, .5); animation: shimmer 2.4s linear infinite; }
.wire[data-stage="6"] .w { animation: none; border-color: rgba(62, 230, 193, .7); box-shadow: 0 0 14px -2px rgba(62, 230, 193, .5); }
@keyframes shimmer { to { background-position: -200% 0; } }
.scan { position: absolute; inset-inline: 0; height: 40px; top: -40px; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(255, 179, 71, .35) 85%, #ffe3b0 100%); animation: scan 2.6s cubic-bezier(.5, 0, .5, 1) infinite; }
.wire[data-stage="6"] .scan { display: none; }
@keyframes scan { to { top: 100%; } }

/* design stage timeline */
.timeline { list-style: none; margin: 0; padding: 4px 0; display: flex; flex-direction: column; }
.tl { position: relative; display: grid; grid-template-columns: 38px 1fr; gap: 0 14px; padding-block-end: 16px; }
.tl::before { content: ""; position: absolute; inset-inline-start: 18px; top: 42px; bottom: 4px; width: 2px; background: rgba(255, 205, 150, .12); }
.tl:last-child::before { display: none; }
.tl.st-done::before { background: linear-gradient(var(--tulsi), rgba(62, 230, 193, .3)); }
.tl-node { width: 38px; height: 38px; border-radius: 50%; background: var(--night); box-shadow: inset 0 0 0 1.5px rgba(255, 205, 150, .25); display: grid; place-items: center; color: var(--faint); font: 600 15px "Sora", var(--font); z-index: 1; }
.tl-node .i { width: 18px; height: 18px; }
.tl-body { padding-block-start: 6px; min-width: 0; }
.tl-body strong { display: block; font-size: 17px; line-height: 1.3; font-weight: 600; }
.tl-body p { margin: 2px 0 0; font-size: 15px; color: var(--muted); }
.tl-time { font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tl-note { font-style: italic; }
.tl.st-todo .tl-body strong { color: var(--faint); font-weight: 500; }
.tl.st-done .tl-node { background: var(--tulsi); color: #032a21; box-shadow: 0 0 16px -2px rgba(62, 230, 193, .7); }
.tl.st-skipped .tl-node { background: var(--night-3); color: var(--faint); }
.tl.st-skipped .tl-body strong { color: var(--faint); text-decoration: line-through; text-decoration-thickness: 1px; }
.tl.st-active .tl-node { background: var(--grad); color: var(--on-accent); box-shadow: 0 0 0 5px rgba(255, 140, 80, .16), 0 0 24px rgba(255, 140, 80, .7); }
.tl.st-active .tl-node .i { animation: paint 2.4s ease-in-out infinite; }
@keyframes paint { 50% { transform: rotate(-14deg) translateY(-2px); } }
.tl.st-active.is-wait .tl-node { background: var(--night-3); color: var(--saffron); box-shadow: inset 0 0 0 1.5px var(--saffron), 0 0 18px -4px rgba(255, 179, 71, .6); }
.tl.st-active.is-wait .tl-node .i { animation: none; }
.tl.st-error .tl-node { background: #d83a4c; color: #fff; box-shadow: 0 0 18px rgba(255, 93, 115, .7); }
.job-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; font-size: 15px; color: var(--muted); }
/* quick jobs: simple stage list next to the projector */
.stages-wrap { display: grid; gap: 14px; }
.stages { list-style: none; padding: 6px 0; margin: 0; display: flex; flex-direction: column; gap: 14px; width: 100%; }
.stages li { display: flex; align-items: center; gap: 14px; font-size: 17px; color: var(--faint); min-height: 36px; }
.stages .dot { width: 32px; height: 32px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 205, 150, .25); display: grid; place-items: center; flex: none; }
.stages .dot .i { width: 18px; height: 18px; }
.stages li.done { color: var(--text); }
.stages li.done .dot { background: var(--tulsi); color: #032a21; box-shadow: 0 0 14px -2px rgba(62, 230, 193, .7); }
.stages li.active { color: var(--text); font-weight: 600; }
.stages li.active .dot { box-shadow: inset 0 0 0 3px rgba(255, 179, 71, .2), 0 0 18px -4px rgba(255, 140, 80, .8); border: 3px solid var(--saffron); border-top-color: transparent; animation: spin 1s linear infinite; }
/* live log */
.log { padding: 14px 16px 16px; overflow: hidden; border-radius: var(--r-md); background: rgba(11, 7, 23, .55); border: 1px solid var(--rim); }
.log-head { display: flex; justify-content: space-between; align-items: center; font: 600 12.5px var(--font); letter-spacing: .06em; color: var(--muted); margin-block-end: 10px; }
:lang(en) .log-head { font-family: var(--mono); text-transform: uppercase; letter-spacing: .14em; }
.rec i { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--kumkum); box-shadow: 0 0 10px var(--kumkum); animation: blink 1.2s steps(2) infinite; }
.log-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; align-content: start; min-height: 120px; font-size: 14.5px; line-height: 1.45; }
:lang(en) .log-lines { font-family: var(--mono); font-size: 14px; }
.log-lines li { display: flex; gap: 10px; color: #e9dccd; animation: line-in .5s var(--ease) both; }
.log-lines li:not(:last-child) { opacity: .72; }
.log-lines time { color: var(--saffron); flex: none; font: 13.5px/1.55 var(--mono); font-variant-numeric: tabular-nums; }
.log-lines .fresh span::after { content: "▍"; color: var(--saffron); margin-inline-start: 2px; animation: blink 1s steps(2) infinite; }
@keyframes line-in { from { opacity: 0; transform: translateY(6px); } }
.wait-note { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; }
.wait-note > .i { width: 26px; height: 26px; color: var(--tulsi); margin-block-start: 2px; }
.wait-note p { margin: 0; color: var(--muted); }
.wait-note strong { display: block; font-size: 18px; line-height: 1.3; }
/* done */
.job:has(> .done-card), .view:has(> .done-card) { min-height: min(72vh, 680px); justify-content: center; }
.done-card { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 14px; padding: 34px 20px 24px; overflow: hidden; text-align: center;
  border-radius: var(--r-lg); background: var(--panel); border: 1px solid rgba(62, 230, 193, .35); box-shadow: 0 30px 80px -30px rgba(62, 230, 193, .45); }
.done-card > :not(.rangoli) { position: relative; }
.done-card > .rangoli { position: absolute; width: 560px; height: 560px; top: 120px; left: 50%; transform: translate(-50%, -50%); opacity: .22;
  -webkit-mask: radial-gradient(closest-side, transparent 30%, #000 75%); mask: radial-gradient(closest-side, transparent 30%, #000 75%); }
.done-card > .rangoli .mandala { animation: spin 100s linear infinite; }
.done-card .title, .done-card .lead { margin: 0; }
.big-ok { position: relative; width: 92px; height: 92px; margin: 6px auto 4px; border-radius: 50%; background: var(--tulsi); color: #032a21; display: grid; place-items: center;
  box-shadow: 0 0 0 8px rgba(62, 230, 193, .12), 0 0 50px rgba(62, 230, 193, .6); animation: pop .5s cubic-bezier(.3,1.6,.6,1); }
.big-ok .i { width: 48px; height: 48px; }

/* ---------- review ---------- */
.review-head { display: flex; flex-direction: column; gap: 4px; }
.save-state { font-size: 15px; color: var(--tulsi); font-weight: 600; }
.save-state.dirty { color: var(--warn-text); }
.mode-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: rgba(11, 7, 23, .6); padding: 4px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--rim); }
.mode-tabs .btn { min-height: 48px; background: transparent; box-shadow: none; }
.mode-tabs .btn[aria-pressed="true"] { background: var(--grad); color: var(--on-accent); box-shadow: var(--glow); }
.steps ol { list-style: none; display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 8px; margin: 0; scrollbar-width: thin; }
.step-chip {
  position: relative; display: flex; align-items: center; gap: 6px; min-height: 48px; padding: 6px 14px; border-radius: 99px;
  background: var(--glass); box-shadow: inset 0 0 0 1px var(--rim); text-decoration: none; color: var(--text); font-weight: 600; font-size: 15px; white-space: nowrap;
}
.step-chip .n { font: 600 12px var(--mono); color: var(--faint); }
.step-chip .i { width: 18px; height: 18px; }
.step-chip[aria-current="step"] { background: rgba(255, 179, 71, .14); box-shadow: inset 0 0 0 1px var(--saffron), 0 0 20px -6px rgba(255, 179, 71, .8); }
.step-chip[aria-current="step"] .n { color: var(--saffron); }
.dot-warn { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--saffron); color: var(--on-accent); font-size: 13px; }
.step-panel { display: flex; flex-direction: column; gap: 12px; padding: 18px; box-shadow: var(--shadow); border-radius: var(--r-lg); }
.step-title { display: flex; align-items: center; gap: 8px; font-size: 24px; flex-wrap: wrap; }
.step-title .i { color: var(--saffron); }
.step-title .of { font: 600 13px var(--font); color: var(--faint); margin-inline-start: auto; }
.panel { display: flex; flex-direction: column; gap: 10px; }
.type-line { color: var(--muted); margin: 0; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { display: flex; align-items: center; gap: 8px; padding-block: 6px; padding-inline: 8px 12px; border-radius: 99px; cursor: pointer; min-height: 48px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--rim); }
.swatch:has(input:checked) { background: rgba(255, 179, 71, .14); box-shadow: inset 0 0 0 1px var(--saffron), 0 0 20px -6px rgba(255, 179, 71, .7); }
.swatch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.swatch:focus-within { outline: 3px solid var(--saffron); }
.sw { width: 28px; height: 28px; border-radius: 50%; background: #999; box-shadow: 0 0 0 2px rgba(255, 255, 255, .8); }
.days { display: flex; flex-direction: column; gap: 6px; }
.day-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 10px; border-radius: 14px; }
.day-row.closed { opacity: .75; }
.day-open { display: flex; align-items: center; gap: 10px; min-width: 150px; min-height: 48px; cursor: pointer; }
.day { font-weight: 600; }
.day-state { font-size: 14px; color: var(--muted); margin-inline-start: auto; }
.times { display: flex; align-items: center; gap: 6px; flex: 1 1 220px; }
.times input { min-height: 48px; padding: 8px; font-size: 17px; }
.items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.item-card { padding: 10px 14px; }
.item-head { display: flex; align-items: center; gap: 8px; }
.item-head .num { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 179, 71, .14); color: var(--saffron); font: 600 13px "Sora", var(--font); flex: none; }
.item-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-actions { display: flex; }
.item-actions .btn.icon { width: 48px; min-height: 48px; }
.more summary { min-height: 48px; display: flex; align-items: center; font-weight: 600; color: var(--saffron); cursor: pointer; }
.pick-imgs { display: flex; gap: 6px; overflow-x: auto; padding-block-end: 4px; }
.pick { flex: none; width: 64px; height: 64px; border-radius: 12px; border: 2px solid var(--rim); padding: 0; background: var(--glass); color: var(--muted); overflow: hidden; cursor: pointer; font: inherit; font-size: 12px; }
.pick img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pick[aria-pressed="true"] { border-color: var(--saffron); box-shadow: 0 0 16px -4px var(--saffron); }
.photo-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.photo-card { position: relative; margin: 0; overflow: hidden; }
.photo-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; background: var(--night-2); }
.photo-card .badge { position: absolute; top: 8px; inset-inline-start: 8px; background: rgba(11, 7, 23, .85); color: var(--text); padding: 2px 10px; border-radius: 99px; font-size: 14px; font-weight: 600; box-shadow: inset 0 0 0 1px var(--rim-hi); }
.photo-card .badge.alt { inset-inline-start: auto; inset-inline-end: 8px; background: var(--grad); color: var(--on-accent); box-shadow: none; }
.photo-card .badge.free { top: 44px; font-size: 13px; }
.photo-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px; }
.credits { padding: 12px 14px; font-size: 14px; }
.credits h3 { font-size: 17px; margin: 0 0 6px; display: flex; align-items: center; gap: 6px; }
.credits ul { margin: 0; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 4px; }
.credits li { overflow-wrap: anywhere; color: var(--muted); }
.tabs { display: flex; gap: 6px; overflow-x: auto; border-block-end: 1px solid var(--rim); }
.tab { display: flex; align-items: center; gap: 6px; min-height: 48px; padding: 6px 14px; border: 0; background: none; font: inherit; font-weight: 600; color: var(--muted); border-block-end: 3px solid transparent; margin-block-end: -1px; cursor: pointer; white-space: nowrap; }
.tab[aria-selected="true"] { color: var(--text); border-block-end-color: var(--saffron); }
.tab-body { display: flex; flex-direction: column; gap: 10px; }
.lang-item { border-block-end: 1px dashed var(--rim); padding-block-end: 6px; }
.editor { display: flex; flex-direction: column; gap: 14px; }

/* preview: the customer's site in a holographic phone frame (content untouched) */
.preview { display: none; flex-direction: column; align-items: center; gap: 12px; position: relative; }
.review.show-preview .preview { display: flex; }
.review.show-preview .editor > :not(.review-head):not(.mode-tabs) { display: none; }
.pv-langs { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.pv-design { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; font-size: 15px; }
.style-chip { color: #ffd9a0; background: rgba(255, 179, 71, .1); box-shadow: inset 0 0 0 1px rgba(255, 179, 71, .4); }
.style-chip .i { width: 16px; height: 16px; }
.phone { position: relative; width: 100%; max-width: 380px; padding: 8px; border-radius: 40px;
  background: linear-gradient(160deg, #2a1b3e, #120a1f 50%, #24163a);
  box-shadow: 0 0 0 1px rgba(255, 210, 160, .28), 0 0 50px -10px rgba(255, 130, 80, .55), 0 40px 80px -30px #000; }
.phone::after { content: ""; position: absolute; inset-inline: 12%; bottom: -26px; height: 30px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 150, 80, .45), transparent); filter: blur(4px); }
.phone-notch { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 70px; height: 16px; background: #05030a; border-radius: 99px; z-index: 1; }
.phone-screen { display: block; width: 100%; height: min(70vh, 720px); border: 0; background: #fff; border-radius: 32px; }

/* ---------- publish / share ---------- */
.slug-input { display: flex; align-items: stretch; border: 1px solid var(--rim-hi); border-radius: var(--r-sm); background: var(--field); overflow: hidden; }
.slug-input:focus-within { border-color: var(--saffron); box-shadow: 0 0 0 4px rgba(255, 179, 71, .18), 0 0 30px -6px rgba(255, 140, 80, .6); }
/* The address reads left to right while typing: "my-shop" then ".aaviq.com" right after it
   (publish.js sizes the input to its text; the suffix takes the rest of the row). */
.slug-input input { flex: 0 1 auto; width: auto; field-sizing: content; min-width: 3ch; max-width: 100%; border: 0; box-shadow: none !important; background: transparent; padding-inline: 16px 1px; text-align: left; direction: ltr; font-weight: 700; }
.slug-input .suffix { flex: 1 0 auto; display: flex; align-items: center; padding-block: 0; padding-inline: 0 14px; color: var(--muted); font-size: 17px; font-weight: 600; white-space: nowrap; }
.slug-state { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 600; min-height: 28px; }
.slug-state.good { color: var(--tulsi); }
.slug-state.bad { color: var(--bad); }
.url-box { display: flex; align-items: center; justify-content: center; gap: 8px; background: rgba(11, 7, 23, .55); border: 1px dashed var(--rim-hi); border-radius: var(--r-md); padding: 12px; font-size: 17px; overflow-wrap: anywhere; text-align: center; margin: 0; }
.url-box .i { color: var(--tulsi); }
.url-box.big { font-size: 19px; padding: 18px; box-shadow: 0 0 40px -16px rgba(255, 140, 80, .6); }
.url-box a { color: inherit; text-decoration: none; }
.url { font-family: var(--font); overflow-wrap: anywhere; }
.url b { color: var(--saffron); font-weight: 700; }
.url span { color: var(--muted); }
.browser { background: var(--night-2); border: 1px solid var(--rim-hi); border-radius: var(--r-md); overflow: hidden; box-shadow: 0 0 40px -16px rgba(255, 140, 80, .5); }
.browser-bar { display: flex; align-items: center; gap: 8px; padding: 12px; background: rgba(255, 236, 214, .05); font-size: 15px; }
.browser-bar .i { width: 16px; height: 16px; color: var(--tulsi); }
.browser-bar .url { flex: 1; overflow-wrap: anywhere; }
.browser-dots { display: flex; gap: 4px; }
.browser-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--kumkum); }
.browser-dots i + i { background: var(--saffron); }
.browser-dots i + i + i { background: var(--tulsi); }

/* ---------- dashboard / site ---------- */
.dash-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.site-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.site-card { padding: 16px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--shadow); border-radius: var(--r-lg); transition: border-color .2s; }
.site-card:hover { border-color: var(--rim-hi); }
.site-main { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--text); }
.site-main > .i:first-child, .site-head > .i { width: 52px; height: 52px; padding: 12px; border-radius: 16px; color: var(--saffron);
  background: radial-gradient(circle at 50% 30%, rgba(255, 179, 71, .25), rgba(255, 93, 115, .08)); box-shadow: inset 0 0 0 1px var(--rim-hi), 0 0 24px -8px rgba(255, 140, 80, .6); }
.site-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.site-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-block: 6px 2px; }
.site-name { font-family: var(--display); font-weight: 700; font-size: 21px; line-height: 1.2; overflow-wrap: anywhere; }
.site-progress { display: flex; flex-direction: column; gap: 8px; background: rgba(255, 179, 71, .07); box-shadow: inset 0 0 0 1px rgba(255, 179, 71, .25); border-radius: 14px; padding: 12px 14px; font-size: 15px; font-weight: 600; text-decoration: none; color: var(--text); }
.site-progress .row { justify-content: space-between; }
.site-progress u { color: var(--saffron); }
.site-head { display: flex; align-items: center; gap: 14px; }
.site-head > .i { width: 60px; height: 60px; padding: 13px; border-radius: 18px; }
.site-head .title { margin-block-end: 6px; }
.site-head .row { flex-wrap: wrap; gap: 6px; }
.actions { display: flex; flex-direction: column; gap: 10px; }
.action { display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 14px 16px; text-decoration: none; transition: border-color .2s, transform .2s var(--ease), box-shadow .2s; }
.action:hover { border-color: var(--rim-hi); transform: translateY(-2px); }
.action:active { transform: translateY(0); }
.action > span:not(.i) { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.action strong { font-weight: 600; font-size: 17px; }
.action > .i:first-child { width: 46px; height: 46px; padding: 11px; border-radius: 14px; color: var(--saffron); background: rgba(255, 179, 71, .1); box-shadow: inset 0 0 0 1px var(--rim-hi); }
.action.primary { border-color: rgba(255, 179, 71, .55); background: linear-gradient(120deg, rgba(255, 179, 71, .16), rgba(255, 93, 115, .1)); box-shadow: 0 0 40px -14px rgba(255, 120, 70, .8); }
.action.primary > .i:first-child { background: var(--grad); color: var(--on-accent); box-shadow: var(--glow); }
.action.fresh > .i:first-child { color: #e3c6ff; background: rgba(199, 125, 255, .12); box-shadow: inset 0 0 0 1px rgba(199, 125, 255, .35); }
.action .chev, .site-main .chev { color: var(--faint); }
.design-line { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--muted); }
.design-line .i { width: 18px; height: 18px; color: var(--lotus); }
.signout { margin-block-start: 24px; padding-block-start: 14px; border-block-start: 1px solid rgba(255, 205, 150, .1); display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.diff { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.diff li { border-radius: 14px; padding: 10px 12px; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.diff .d-label { width: 100%; font-weight: 600; font-size: 14px; color: var(--muted); }
.diff .d-before { text-decoration: line-through; color: #ffc2c9; background: var(--bad-soft); padding: 2px 8px; border-radius: 6px; overflow-wrap: anywhere; }
.diff .d-after { color: #c8fff0; background: var(--ok-soft); padding: 2px 8px; border-radius: 6px; font-weight: 600; overflow-wrap: anywhere; }
.diff .d-arrow { color: var(--saffron); width: 18px; height: 18px; }
.diff .empty { font-style: italic; }
.diff li.added { border-color: rgba(62, 230, 193, .45); }
.diff li.removed { border-color: rgba(255, 93, 115, .45); }
.diff-img { width: 72px; height: 54px; object-fit: cover; border-radius: 6px; vertical-align: middle; }
.enq-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.enq { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--shadow); }
.enq.booking { border-inline-start: 4px solid var(--tulsi); }
.enq p { margin: 0; display: flex; gap: 6px; align-items: center; }
.enq-name { font-weight: 700; font-size: 19px; }
.enq-msg { background: rgba(11, 7, 23, .5); padding: 8px 10px; border-radius: 10px; }

/* failed job: message + "Try again" first */
.fail-top { display: flex; flex-direction: column; gap: 12px; }
.fail-top .title { margin: 0; }
.fail-msg { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--bad-soft); border: 1px solid rgba(255, 93, 115, .4); color: var(--text); font-size: 17px; font-weight: 600; }
.fail-msg > .i { flex: none; color: var(--bad); margin-block-start: 2px; }
.fail-top.is-later .fail-msg { background: var(--warn-soft); border-color: rgba(255, 179, 71, .45); }
.fail-top.is-later .fail-msg > .i { color: var(--saffron); }
.fail-top .hint { margin: 0; }
.site-failed { display: flex; flex-direction: column; gap: 8px; background: var(--bad-soft); border: 1px solid rgba(255, 93, 115, .35); border-radius: 14px; padding: 12px 14px; font-size: 15px; }
.site-failed.is-later { background: var(--warn-soft); border-color: rgba(255, 179, 71, .4); }
.site-failed strong { display: flex; gap: 8px; align-items: center; font-size: 17px; }
.site-failed p { margin: 0; }
.site-failed .btn { align-self: stretch; }

/* "change anything": what can be changed + before/after */
.any-card { display: flex; flex-direction: column; gap: 10px; }
.any-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.any-list li { display: inline-flex; align-items: center; gap: 6px; padding-block: 6px; padding-inline: 8px 12px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--rim); border-radius: 99px; font-weight: 600; font-size: 15px; }
.any-list .i { width: 18px; height: 18px; color: var(--saffron); }
.ba-panes { display: grid; gap: 30px; justify-items: center; }
.ba-pane { margin: 0; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ba-pane figcaption { font: 600 13px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--saffron); }
.ba-pane:first-child figcaption { color: var(--muted); }
.ba-pane:last-child .phone { box-shadow: 0 0 0 1px rgba(62, 230, 193, .45), 0 0 60px -10px rgba(62, 230, 193, .45), 0 40px 80px -30px #000; }
.ba-panes.show-after .ba-pane:first-child, .ba-panes.show-before .ba-pane:last-child { display: none; }
.ba-actions { display: flex; flex-direction: column; gap: 12px; }

/* ---------- access requests & billing ---------- */
.request-link { margin: 0; text-align: center; }
.request-link a { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; font-weight: 600; }
.request-form { padding: 18px; }
.request-form .field { margin-inline: 0; padding: 0; }
.request-form .label .hint { font-weight: 500; }
.hp { position: absolute !important; inset-inline-start: -9999px; width: 1px; height: 1px; opacity: 0; }
.bill-banner { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; font-size: 16px; }
.bill-banner > .i { width: 26px; height: 26px; margin-block-start: 2px; }
.bill-banner strong { display: block; font-size: 18px; line-height: 1.3; }
.bill-banner p { margin: 2px 0 0; color: var(--muted); }
.bill-banner.is-expired { background: var(--bad-soft); border-color: rgba(255, 93, 115, .5); box-shadow: 0 0 40px -16px rgba(255, 93, 115, .6); }
.bill-banner.is-expired > .i { color: var(--bad); }
.bill-banner.is-info { background: rgba(199, 125, 255, .08); border-color: rgba(199, 125, 255, .3); }
.bill-banner.is-info > .i { color: var(--lotus); }
.bill-banner.is-soon { background: var(--warn-soft); border-color: rgba(255, 179, 71, .45); }
.bill-banner.is-soon > .i { color: var(--saffron); }
.action.is-locked { opacity: .55; cursor: not-allowed; }
.action.is-locked > .i:first-child { background: var(--glass); color: var(--faint); box-shadow: inset 0 0 0 1px var(--rim); }

/* ---------- larger screens ---------- */
@media (min-width: 420px) {
  .tiles { grid-template-columns: repeat(3, 1fr); }
  .big-actions { grid-template-columns: 1fr 1fr; }
  .thumbs { grid-template-columns: repeat(5, 1fr); }
  .photo-grid { grid-template-columns: 1fr 1fr; }
  .photo-actions { grid-template-columns: 1fr; }
  .style-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 419px) {
  .hide-sm { display: none; }
  .top { padding-inline: 10px; gap: 6px; }
  .top .btn.small { padding-inline: 12px; }
  .lang-compact span:not(.i) { display: none; }
  .lang-compact.btn.small { padding-inline: 10px; }
  .brand { gap: 8px; }
}
@media (max-width: 359px) { .hide-xs { display: none; } .top .brand-word { display: none; } }
@media (min-width: 560px) {
  .hero-cta { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .hero-cta .btn.huge { width: auto; }
}
@media (min-width: 760px) {
  main { padding-block-start: 32px; }
  .title { font-size: 38px; }
  .how ol { grid-template-columns: repeat(3, 1fr); }
  .for ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lang-card { padding: 34px; }
  .trust { flex-direction: row; flex-wrap: wrap; gap: 6px 18px; }
  .forge-stage { height: 460px; }
  .phone-build { width: 190px; }
  .forge .plate { width: 440px; height: 440px; }
  .forge .beam { bottom: 120px; height: 340px; width: 320px; }
}
@media (min-width: 900px) {
  .top { padding: 10px 32px; }
  main:has(.review) { max-width: 1180px; }
  .review { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 32px; align-items: start; }
  .review .preview { display: flex; position: sticky; top: 84px; }
  .review .mode-tabs { display: none; }
  .review.show-preview .editor > * { display: flex; }
  .review.show-preview .editor > .review-head, .review.show-preview .editor > .steps { display: block; }
  main:has(.ba-panes) { max-width: 1000px; }
  .ba-tabs { display: none; }
  .ba-panes { grid-template-columns: 1fr 1fr; }
  .ba-panes .ba-pane { display: flex !important; }
}
@media (min-width: 960px) {
  .hero { grid-template-columns: 1.05fr .95fr; gap: 24px; min-height: calc(100vh - 160px); }
  .stage { height: 600px; overflow: visible; margin: 0; }
  .plate { width: 520px; height: 520px; }
  .plate-wrap { bottom: 10px; }
  .beam { bottom: 170px; width: 380px; height: 380px; }
  .phone-float { width: 250px; top: 40px; }
  .tag.t1 { top: 110px; inset-inline-start: 0; } .tag.t2 { top: 260px; inset-inline-end: -10px; } .tag.t3 { top: 400px; inset-inline-start: 2%; }
  .demo { font-size: 12.5px; }
  .demo-plate { height: 140px; }
  .demo-body { gap: 9px; padding-block-start: 8px; }
  .build-grid { grid-template-columns: 1.15fr .85fr; align-items: start; }
  .forge-stage { height: 520px; }
  .phone-build { width: 210px; top: 16px; }
  .forge .plate { width: 480px; height: 480px; }
  .forge .beam { bottom: 130px; height: 380px; width: 360px; }
  .job > .wait-note, .job > .btn, .job > .job-meta, .job > .hint { max-width: 100%; }
  .job > .btn.big { width: auto; align-self: flex-start; padding-inline: 28px; }
}

/* ---------- theme picker (SPEC-themes): picture cards drawn from each theme's tokens ---------- */
main:has(.theme-picker) { max-width: 760px; }
.theme-picker { display: flex; flex-direction: column; gap: 22px; }
.th-section { display: flex; flex-direction: column; gap: 10px; }
.th-section > .sub { display: flex; align-items: center; gap: 8px; margin: 0; }
.th-section > .sub .i { color: var(--saffron); }
.th-status { margin: 0; min-height: 0; }
.th-status:empty { display: none; }
.th-status.is-loading::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-inline-end: 8px; border-radius: 50%;
  border: 2px solid var(--saffron); border-inline-end-color: transparent; vertical-align: -1px; animation: spin .8s linear infinite; }
.th-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.th-card { display: flex; flex-direction: column; gap: 8px; padding: 6px 6px 10px; font: inherit; color: var(--text); cursor: pointer; text-align: start;
  background: var(--panel); border: 1px solid var(--rim); border-radius: var(--r-md); transition: transform .2s var(--ease), border-color .2s, box-shadow .2s; min-width: 0; }
.th-card:hover { border-color: var(--rim-hi); }
.th-card:focus-visible { outline: 3px solid var(--saffron); outline-offset: 2px; }
.th-card[aria-pressed="true"] { border-color: var(--saffron); transform: translateY(-2px);
  background: linear-gradient(180deg, rgba(255, 179, 71, .16), rgba(255, 93, 115, .06));
  box-shadow: 0 0 0 1px rgba(255, 179, 71, .4), 0 0 30px -8px rgba(255, 140, 80, .7); }
.th-text { display: flex; flex-direction: column; gap: 3px; padding-inline: 4px; min-width: 0; }
.th-text strong { display: flex; align-items: center; gap: 6px; font-size: 16px; line-height: 1.25; overflow-wrap: anywhere; }
.th-text strong .i { width: 18px; height: 18px; flex: none; display: none; color: var(--saffron); }
.th-card[aria-pressed="true"] .th-text strong .i { display: inline-flex; }
.th-text small { color: var(--muted); font-size: 13px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.th-badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; font-size: 12px; font-weight: 700;
  color: var(--on-accent); background: var(--grad); }
.th-badge .i { width: 13px; height: 13px; }
/* The art keeps the theme's own colours (it previews a customer site, not the builder). */
.th-art { --bg: #222; --sf: #333; --tx: #fff; --mu: #bbb; --ac: #f90; --ac2: #0cf; --fd: var(--display);
  position: relative; display: block; height: 112px; border-radius: 12px; overflow: hidden; background: var(--bg); isolation: isolate;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.th-art::before, .th-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.th-panel { position: absolute; inset: 14px 14px 14px 14px; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 8px 12px;
  background: var(--sf); color: var(--tx); border-radius: 10px; box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .45); }
.th-aa { font-family: var(--fd), Georgia, serif; font-size: 30px; line-height: 1; font-weight: 400; color: var(--tx); }
.th-panel i { display: block; height: 5px; border-radius: 3px; background: var(--tx); width: 72%; opacity: .85; }
.th-panel i.th-l2 { background: var(--mu); width: 48%; }
.th-row { display: flex; align-items: center; gap: 6px; margin-block-start: 2px; }
.th-btn { display: block; width: 46px; height: 13px; border-radius: 4px; background: var(--ac); }
.th-dot { display: block; width: 13px; height: 13px; border-radius: 50%; background: var(--ac2); }
/* shapes */
.sh-sharp .th-panel, .sh-sharp .th-btn { border-radius: 0; }
.sh-sharp .th-dot { border-radius: 2px; }
.sh-round .th-panel { border-radius: 12px; } .sh-round .th-btn { border-radius: 6px; }
.sh-pill .th-panel { border-radius: 22px; } .sh-pill .th-btn { border-radius: 99px; }
.sh-arch .th-panel { border-radius: 48% 48% 8px 8px / 34% 34% 8px 8px; padding-block-start: 16px; inset-block-start: 8px; } .sh-arch .th-btn { border-radius: 99px 99px 3px 3px; }
.sh-soft .th-panel { border-radius: 16px; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5); } .sh-soft .th-btn { border-radius: 8px; }
/* textures (behind the panel, in the theme's own colours) */
.tx-grain::before { background: repeating-conic-gradient(from 7deg, rgba(255, 255, 255, .05) 0 3%, rgba(0, 0, 0, .06) 3% 6%) 0 0 / 5px 5px; }
.tx-paper::before { background: repeating-linear-gradient(115deg, rgba(0, 0, 0, .04) 0 2px, transparent 2px 6px), repeating-linear-gradient(25deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 7px); }
.tx-dots::before { background: radial-gradient(var(--ac) 1.2px, transparent 1.8px) 0 0 / 11px 11px; opacity: .45; }
.tx-grid::before { background: linear-gradient(var(--mu) 1px, transparent 1px) 0 0 / 14px 14px, linear-gradient(90deg, var(--mu) 1px, transparent 1px) 0 0 / 14px 14px; opacity: .22; }
.tx-stars::before { background:
  radial-gradient(1.4px 1.4px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 34% 72%, #fff, transparent),
  radial-gradient(1.6px 1.6px at 58% 12%, #fff, transparent), radial-gradient(1px 1px at 82% 40%, #fff, transparent),
  radial-gradient(1.2px 1.2px at 92% 86%, #fff, transparent), radial-gradient(1px 1px at 6% 90%, #fff, transparent),
  radial-gradient(1.3px 1.3px at 70% 64%, var(--ac2), transparent); opacity: .9; }
.tx-scanlines::after { z-index: 1; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 3px); }
.tx-kolam::before { background: radial-gradient(circle, transparent 5px, var(--ac) 5.5px 6.5px, transparent 7px) 0 0 / 20px 20px,
  radial-gradient(var(--ac2) 1.3px, transparent 1.8px) 10px 10px / 20px 20px; opacity: .4; }
.tx-waves::before { background: radial-gradient(circle at 50% 100%, transparent 7px, var(--ac) 7.5px 8.5px, transparent 9px) 0 0 / 20px 10px; opacity: .35; }
.tx-stripes::before { background: repeating-linear-gradient(45deg, var(--ac) 0 3px, transparent 3px 12px); opacity: .2; }
.tx-halftone::before { background: radial-gradient(var(--ac) 32%, transparent 36%) 0 0 / 8px 8px;
  -webkit-mask-image: linear-gradient(135deg, #000, transparent 70%); mask-image: linear-gradient(135deg, #000, transparent 70%); opacity: .5; }
.tx-leaf::before { background: radial-gradient(ellipse 6px 2.6px at 50% 50%, var(--ac2) 85%, transparent 100%) 0 0 / 18px 14px,
  radial-gradient(ellipse 2.6px 6px at 50% 50%, var(--ac) 85%, transparent 100%) 9px 7px / 18px 14px; opacity: .35; }
/* motion: a hint of the mood (still image; nothing moves) */
.mo-cinematic::after { z-index: 0; background: radial-gradient(120% 90% at 85% 0%, color-mix(in srgb, var(--ac) 45%, transparent), transparent 60%); }
.mo-cinematic.tx-scanlines::after { z-index: 1; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 3px), radial-gradient(120% 90% at 85% 0%, color-mix(in srgb, var(--ac) 45%, transparent), transparent 60%); }
.mo-lively .th-dot { box-shadow: 10px -8px 0 -3px var(--ac), -4px 10px 0 -4px var(--ac2); }
.th-search { position: relative; }
.th-search > .i { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.th-search input { padding-inline-start: 46px; }
.th-search input::-webkit-search-cancel-button { filter: invert(.8); }
.th-groups { display: flex; flex-direction: column; gap: 18px; }
.th-groups[hidden], .th-results[hidden] { display: none; }
.th-group { display: flex; flex-direction: column; gap: 10px; }
.th-group h3 { margin: 0; font-size: 18px; display: flex; align-items: center; gap: 8px; }
.th-count { font-size: 13px; font-weight: 600; color: var(--muted); padding: 1px 8px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--rim); }
.th-more { align-self: center; }
.th-own { display: flex; flex-direction: column; gap: 10px; }
.th-own h2 { margin: 0; }
.th-own p { margin: 0; }
.th-own-row { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.th-own-row input { flex: 1 1 220px; }
.th-own-row .btn { flex: 1 0 auto; }
.th-own-out { display: flex; flex-direction: column; gap: 10px; }
.th-own-out:empty { display: none; }
.th-own-msg { display: flex; gap: 8px; align-items: flex-start; }
.th-own-msg .i { flex: none; margin-block-start: 2px; }
.th-own-grid { grid-template-columns: minmax(0, 1fr); max-width: 260px; }
.sum-change { margin-inline-start: auto; font-size: 14px; color: var(--saffron); padding: 4px 0 4px 8px; }
@media (max-width: 759px) {
  .th-rec > :first-child { grid-column: 1 / -1; }
  .th-rec > :first-child .th-art { height: 150px; }
  .th-rec > :first-child .th-aa { font-size: 40px; }
}
@media (min-width: 560px) {
  .th-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .th-art { height: 120px; }
}
@media (min-width: 760px) {
  .th-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .th-rec { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .th-rec .th-art { height: 140px; }
  .th-rec .th-aa { font-size: 40px; }
}

/* ---------- reduced motion: everything still, nothing lost ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .aurora, .scan, .btn.primary::after { display: none; }
}

/* ---------- "Tell us" voice feedback (SPEC-lifecycle §3) ---------- */
/* Floating mic: bottom corner, above the safe area; main keeps 96px of bottom padding, so at the end of
   every screen the last buttons sit clear of it. Lifts over the toast, hides while typing on a phone. */
.fab {
  position: fixed; z-index: 35; inset-block-end: calc(16px + env(safe-area-inset-bottom, 0px)); inset-inline-end: calc(14px + env(safe-area-inset-right, 0px));
  display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 18px 0 6px; border: 0; border-radius: 99px; cursor: pointer;
  background: rgba(21, 12, 39, .9); color: var(--text); font: inherit; font-weight: 700; font-size: 15px;
  box-shadow: inset 0 0 0 1px var(--rim-hi), 0 14px 34px -12px #000, 0 0 26px -10px rgba(255, 140, 80, .7);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); -webkit-tap-highlight-color: transparent;
  transition: transform .3s var(--ease), padding .25s var(--ease), opacity .2s, visibility .2s;
}
.fab > .i { width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: var(--grad); color: var(--on-accent); box-shadow: 0 0 16px -2px rgba(255, 120, 70, .8); }
.fab:hover { box-shadow: inset 0 0 0 1px var(--saffron), 0 14px 34px -12px #000, 0 0 30px -6px rgba(255, 140, 80, .8); }
.fab:active { transform: scale(.96); }
.fab:focus-visible { outline: 3px solid var(--saffron); outline-offset: 3px; }
.fab-label { white-space: nowrap; max-width: 140px; overflow: hidden; transition: max-width .25s var(--ease), opacity .2s; }
.fab.is-mini { padding-inline-end: 6px; gap: 0; }
.fab.is-mini .fab-label { max-width: 0; opacity: 0; }
.fab[hidden] { display: none; }
#toast.show ~ .fab, #toast.show ~ .fab-bubble { transform: translateY(-76px); }
body.is-typing .fab, body.fb-open .fab, body.is-typing .fab-bubble { opacity: 0; visibility: hidden; pointer-events: none; }
.fab-bubble {
  position: fixed; z-index: 36; inset-block-end: calc(80px + env(safe-area-inset-bottom, 0px)); inset-inline-end: 14px; width: min(320px, calc(100vw - 28px));
  padding: 14px; border-radius: var(--r-md); background: rgba(21, 12, 39, .96); color: var(--text);
  box-shadow: inset 0 0 0 1px var(--rim-hi), 0 24px 50px -16px #000, 0 0 40px -18px rgba(255, 120, 70, .6);
  opacity: 0; transform: translateY(12px); visibility: hidden; transition: opacity .3s, transform .3s var(--ease), visibility .3s;
}
.fab-bubble.show { opacity: 1; transform: none; visibility: visible; }
.fab-bubble::after { content: ""; position: absolute; inset-inline-end: 30px; bottom: -7px; width: 14px; height: 14px; background: inherit; transform: rotate(45deg); box-shadow: 1px 1px 0 var(--rim-hi); }
.fab-bubble p { margin: 0 0 10px; font-weight: 600; }
.fab-bubble .row { flex-wrap: wrap; }

.fb-sheet .sheet-head { margin-block-end: 4px; }
.fb-body { display: flex; flex-direction: column; gap: 14px; }
.fb-prompt { margin: 0; font-size: 18px; color: var(--muted); }
.fb-rec { padding: 16px; border-radius: var(--r-md); background: var(--glass); box-shadow: inset 0 0 0 1px var(--rim); }
.fb-type-btn { align-self: flex-start; }
.fb-type[hidden], .fb-type-btn[hidden] { display: none; }
.fb-privacy { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 14px; color: var(--muted); }
.fb-privacy .i { width: 18px; height: 18px; color: var(--tulsi); margin-block-start: 2px; }
.fb-thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fb-thumb {
  display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 8px 12px; border: 0; border-radius: var(--r-md); cursor: pointer;
  background: var(--glass); color: var(--text); font: inherit; font-weight: 700; font-size: 16px; box-shadow: inset 0 0 0 1px var(--rim-hi); transition: background .2s, box-shadow .2s, transform .2s var(--ease);
}
.fb-thumb:active { transform: scale(.96); }
.fb-thumb[aria-pressed="true"] { background: linear-gradient(180deg, rgba(255, 179, 71, .2), rgba(255, 93, 115, .08)); box-shadow: inset 0 0 0 2px var(--saffron), 0 0 24px -8px rgba(255, 140, 80, .8); }
.fb-thumb.small { min-height: 48px; width: 52px; padding: 0; }
.fb-thanks { display: flex; flex-direction: column; gap: 12px; align-items: stretch; text-align: center; padding-block: 10px 6px; }
.fb-thanks h3 { margin: 0; font-size: 26px; outline: none; }
.fb-thanks .lead { margin: 0; }

/* voice note with level meter */
.vn { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.vn-mic {
  width: 84px; height: 84px; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center; position: relative;
  background: linear-gradient(140deg, #ff7a8c, #e0344a); color: #fff; box-shadow: 0 0 0 6px rgba(255, 93, 115, .12), 0 14px 40px -10px rgba(255, 93, 115, .9);
  transition: transform .2s var(--ease), box-shadow .2s; -webkit-tap-highlight-color: transparent;
}
.vn-mic .i { width: 36px; height: 36px; }
.vn-mic::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 1.5px solid rgba(255, 140, 150, .35); animation: pulse-ring 2.4s infinite; }
.vn-mic:active { transform: scale(.94); }
.vn-mic:focus-visible { outline: 3px solid var(--saffron); outline-offset: 6px; }
.vn-label { margin: 0; font-weight: 700; font-size: 17px; }
.vn-live { display: flex; align-items: baseline; justify-content: center; gap: 10px; font-weight: 700; font-size: 17px; flex-wrap: wrap; }
.vn-live .rec-dot { align-self: center; }
.vn-time { font: 600 30px/1.1 "Sora", var(--font); font-variant-numeric: tabular-nums; }
.vn-of { color: var(--muted); font-size: 15px; font-variant-numeric: tabular-nums; }
.vn-meter { display: flex; align-items: center; gap: 3px; height: 48px; width: 100%; max-width: 320px; }
.vn-meter i { flex: 1; height: 100%; border-radius: 3px; background: linear-gradient(180deg, #ffd27a, #ff5d73); transform: scaleY(.08); transform-origin: center; transition: transform .08s linear; opacity: .9; }
.vn-meter.is-pulse i { animation: vn-pulse 1s ease-in-out infinite; }
.vn-meter.is-pulse i:nth-child(odd) { animation-delay: .3s; }
@keyframes vn-pulse { 50% { transform: scaleY(.6); } }
.vn .btn.stop { max-width: 320px; }
.vn-done { display: flex; flex-direction: column; gap: 10px; width: 100%; align-items: stretch; }
.vn-done audio { width: 100%; color-scheme: dark; }
.vn-done .row { justify-content: center; }
.vn-off { display: flex; gap: 12px; align-items: flex-start; text-align: start; width: 100%; padding: 12px 14px; border-radius: var(--r-sm); background: var(--warn-soft); box-shadow: inset 0 0 0 1px rgba(255, 179, 71, .4); }
.vn-off > .i { color: var(--saffron); margin-block-start: 2px; }
.vn-off p { margin: 0; }
.vn-off.is-denied { flex-wrap: wrap; }
.vn-off.is-denied > div { flex: 1 1 200px; }
.vn-off .btn { margin-inline-start: auto; }

/* contextual "How do you like it?" / "Tell us what happened" cards */
.fb-card {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: var(--r-md);
  background: linear-gradient(110deg, rgba(255, 179, 71, .1), rgba(199, 125, 255, .08)); border: 1px solid rgba(255, 179, 71, .3);
}
.fb-card-text { flex: 1 1 200px; display: flex; flex-direction: column; gap: 2px; }
.fb-card-text strong { font-size: 17px; }
.fb-card-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fb-card-mic .i { color: var(--saffron); }
.done-card .fb-card { text-align: start; }
.bill-banner .fb-banner-btn { margin-block-start: 10px; }

/* ---------- sign-up = request access (SPEC-lifecycle §1) ---------- */
.su-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.su-steps li { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: var(--r-sm); background: var(--glass); box-shadow: inset 0 0 0 1px var(--rim); font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--muted); }
.su-steps li.now { color: var(--text); box-shadow: inset 0 0 0 1px rgba(255, 179, 71, .5); background: rgba(255, 179, 71, .08); }
.su-steps .n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 700 13px "Sora", var(--font); background: rgba(255, 205, 150, .12); color: var(--muted); }
.su-steps li.now .n { background: var(--grad); color: var(--on-accent); }
.su-form { gap: 14px; }
.su-h { display: flex; align-items: center; gap: 8px; margin: 10px 0 -2px; font-size: 19px; color: var(--saffron); }
.su-h:first-child { margin-block-start: 0; }
.su-h .i { width: 20px; height: 20px; }
.su-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.su-type.tile { min-height: 92px; padding: 10px 4px; gap: 6px; font-size: 13.5px; }
.su-type.tile .i { width: 40px; height: 40px; padding: 9px; border-radius: 12px; }
.su-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.su-chip.btn.small { min-height: 44px; padding-inline: 14px; }
.su-intent { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--r-md); background: var(--glass); box-shadow: inset 0 0 0 1px var(--rim); }
.su-intent .vn-mic { width: 68px; height: 68px; }
.su-intent .vn-mic .i { width: 30px; height: 30px; }
.su-or { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--faint); font-size: 14px; font-weight: 600; }
.su-or::before, .su-or::after { content: ""; flex: 1; height: 1px; background: var(--rim); }
.su-terms { align-items: flex-start; font-weight: 500; line-height: 1.45; }
.su-terms input { margin-block-start: 2px; }
.su-terms a { color: var(--saffron); font-weight: 600; }
.fill-note:empty { display: none; }
@media (min-width: 560px) { .su-types { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* ---------- waiting for approval ---------- */
.wt-head { position: relative; display: grid; place-items: center; height: 150px; margin-block-end: -6px; }
.wt-head .rangoli { position: absolute; width: 170px; height: 170px; opacity: .8; }
.wt-icon { position: relative; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: rgba(21, 12, 39, .85); color: var(--saffron); box-shadow: inset 0 0 0 1.5px var(--rim-hi), 0 0 40px -6px rgba(255, 140, 80, .7); }
.wt-icon .i { width: 40px; height: 40px; }
.wt-icon.is-no { color: var(--lotus); }
.wt-eyebrow { align-self: center; }
.wt-steps { list-style: none; margin: 0; padding: 16px 18px; display: flex; flex-direction: column; gap: 0; }
.wt-step { display: grid; grid-template-columns: 38px 1fr; gap: 12px; position: relative; padding-block-end: 16px; }
.wt-step:last-child { padding-block-end: 0; }
.wt-step::before { content: ""; position: absolute; inset-inline-start: 18px; top: 38px; bottom: 0; width: 2px; background: var(--rim); }
.wt-step:last-child::before { display: none; }
.wt-step.is-done::before { background: linear-gradient(var(--tulsi), var(--rim)); }
.wt-node { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--night); box-shadow: inset 0 0 0 1.5px var(--rim-hi); color: var(--faint); }
.wt-node .i { width: 20px; height: 20px; }
.wt-step.is-done .wt-node { background: var(--tulsi); color: #032a21; box-shadow: 0 0 16px -4px var(--tulsi); }
.wt-step.is-now .wt-node { color: var(--on-accent); background: var(--grad); box-shadow: 0 0 0 4px rgba(255, 179, 71, .15), 0 0 20px -4px rgba(255, 140, 80, .9); animation: breathe 2s ease-in-out infinite; }
.wt-step strong { display: block; font-size: 17px; line-height: 1.35; padding-block-start: 7px; }
.wt-step.is-todo strong { color: var(--muted); }
.wt-step .hint { margin-block-start: 2px; }
.wt-tell { display: flex; flex-direction: column; gap: 12px; background: linear-gradient(140deg, rgba(255, 179, 71, .12), rgba(199, 125, 255, .08)); border-color: rgba(255, 179, 71, .35); }
.wt-tell h2 { margin: 0 0 4px; }
.wt-tell h2 .i { color: var(--saffron); }
@media (min-width: 560px) { .wt-tell { flex-direction: row; align-items: center; } .wt-tell .btn.big { width: auto; flex: none; } .wt-tell-text { flex: 1; } }

/* ---------- owner stats: "Your website this week" ---------- */
.st-card { display: flex; flex-direction: column; gap: 12px; }
.st-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.st-head h2 { margin: 0; font-size: 20px; }
.st-head h2 .i { color: var(--saffron); }
.st-seg { display: inline-flex; gap: 4px; padding: 3px; border-radius: 99px; background: var(--field); box-shadow: inset 0 0 0 1px var(--rim); }
.st-seg .btn.small { min-height: 36px; padding: 4px 12px; font-size: 13.5px; box-shadow: none; background: transparent; }
.st-seg .btn[aria-pressed="true"] { background: var(--saffron); color: var(--on-accent); }
.st-body { display: flex; flex-direction: column; gap: 10px; }
.st-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.st-big { display: flex; flex-direction: column; padding: 10px 14px; border-radius: var(--r-sm); background: var(--glass); box-shadow: inset 0 0 0 1px var(--rim); }
.st-big b { font: 700 30px/1.15 "Sora", var(--font); font-variant-numeric: tabular-nums; }
.st-big span { color: var(--muted); font-size: 14px; font-weight: 600; }
.st-spark-wrap { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 2px; }
.st-spark { display: block; width: 100%; height: 56px; overflow: visible; }
.st-spark-wrap .hint { font-size: 13px; }
.st-sub { margin: 4px 0 0; font-size: 15px; font-weight: 700; color: var(--muted); }
:lang(en) .st-sub { font: 600 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.st-taps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.st-taps li { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 10px 12px; border-radius: var(--r-sm); background: var(--glass); box-shadow: inset 0 0 0 1px var(--rim); }
.st-taps .i { grid-row: 1 / 3; width: 34px; height: 34px; padding: 7px; border-radius: 10px; color: var(--saffron); background: rgba(255, 179, 71, .12); }
.st-taps b { font: 700 20px/1.1 "Sora", var(--font); font-variant-numeric: tabular-nums; }
.st-taps span { font-size: 13.5px; color: var(--muted); line-height: 1.25; }
.st-taps li.is-zero .i { color: var(--faint); background: var(--glass); }
.st-src { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.st-src li { display: grid; grid-template-columns: minmax(84px, 30%) 1fr 44px; gap: 10px; align-items: center; font-size: 15px; }
.st-src-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-bar { height: 8px; border-radius: 4px; background: rgba(255, 205, 150, .1); overflow: hidden; }
.st-bar i { display: block; height: 100%; border-radius: 4px; background: var(--saffron); }
.st-src b { text-align: end; font-variant-numeric: tabular-nums; }
.st-note { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; }
.st-note .i { width: 16px; height: 16px; color: var(--tulsi); flex: none; margin-block-start: 2px; }
.st-empty { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.st-empty > div { flex: 1 1 180px; }
.st-empty-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: var(--saffron); background: rgba(255, 179, 71, .1); box-shadow: inset 0 0 0 1px var(--rim); }
.st-skel { display: flex; flex-direction: column; gap: 8px; }
.st-skel i { display: block; height: 18px; border-radius: 6px; background: linear-gradient(90deg, var(--glass), var(--glass-hi), var(--glass)); background-size: 200% 100%; animation: st-shimmer 1.4s linear infinite; }
.st-skel i:first-child { height: 54px; }
@keyframes st-shimmer { to { background-position: -200% 0; } }
@media (min-width: 560px) { .st-taps { grid-template-columns: repeat(4, minmax(0, 1fr)); } .st-hero { grid-template-columns: 1fr 1fr 2fr; } .st-spark-wrap { grid-column: auto; justify-content: center; } }
.su-form span.label { display: block; }
.su-form span.label .hint { margin-inline-start: 6px; font-weight: 500; }
.wt-step > div { min-width: 0; overflow-wrap: anywhere; }
/* tucked: only a thin glowing tab shows inside the page margin, so nothing under it is covered */
.fab.is-tucked { inset-inline-end: 0; padding: 0; gap: 0; width: 52px; border-start-end-radius: 0; border-end-end-radius: 0; transform: translateX(calc(100% - 13px)); background: var(--grad); }
.fab.is-tucked .fab-label { max-width: 0; opacity: 0; }
.fab.is-tucked > .i { box-shadow: none; }
[dir="rtl"] .fab.is-tucked { transform: translateX(calc(-100% + 13px)); }
#toast.show ~ .fab.is-tucked { transform: translate(calc(100% - 13px), -76px); }
[dir="rtl"] #toast.show ~ .fab.is-tucked { transform: translate(calc(-100% + 13px), -76px); }
.fb-thumb .i { width: 24px; height: 24px; }
.fb-thumb.is-up .i { color: var(--tulsi); }
.fb-thumb.is-down .i { color: #ffb0bb; }
.fb-thumb[aria-pressed="true"] .i { color: var(--text); }