/* Live mirror demo: boutique theme. All UI inside .stage is sized in container units (cqh/cqw)
   so the same layout scales from a laptop letterbox to a 1080x1920 mirror panel. */
:root {
  --ivory: #f8f3ec;
  --linen: #efe6da;
  --sand: #e3d6c4;
  --taupe: #a8977f;
  --umber: #6b5a49;
  --espresso: #241b15;
  --night: #16110d;
  --accent: #b08a52;        /* brass: the single accent */
  --accent-soft: #d8bf91;
  --accent-ink: #7d6037;
  --glass: rgba(248, 243, 236, 0.80);
  --glass-line: rgba(255, 255, 255, 0.55);
  --smoke: rgba(22, 17, 13, 0.50);
  --smoke-strong: rgba(22, 17, 13, 0.74);
  --shadow: 0 1.2cqh 3.6cqh rgba(22, 17, 13, 0.28);
  --font-ar: "IBM Plex Sans Arabic", "Segoe UI", system-ui, sans-serif;
  --font-display: "Cormorant Garamond", "IBM Plex Sans Arabic", Georgia, serif;
  --ease: cubic-bezier(.2, .75, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .5, 1);
  --t-fast: 160ms;
  --t-med: 320ms;
  --t-slow: 700ms;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; background: var(--night); color: var(--espresso);
  font-family: var(--font-ar); -webkit-font-smoothing: antialiased; overflow: hidden;
  -webkit-tap-highlight-color: transparent; user-select: none;
}
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
button:focus-visible { outline: 0.3cqh solid var(--accent-soft); outline-offset: 0.3cqh; }
svg { display: block; }

/* ---------- Frame + portrait stage (letterboxed on landscape) ---------- */
.frame {
  position: fixed; inset: 0; display: grid; place-items: center;
  background:
    radial-gradient(120% 80% at 50% 0%, #2a2019 0%, var(--night) 60%),
    var(--night);
}
.stage {
  position: relative; overflow: hidden; container-type: size;
  aspect-ratio: 9 / 16;
  height: min(100dvh, calc(100vw * 16 / 9));
  width: auto;
  background: #1d1611;
  box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 3vh 9vh rgba(0,0,0,.55);
}
@media (max-aspect-ratio: 9/16) { .stage { width: 100vw; height: auto; } }

#video { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
#scene, #fx { position: absolute; inset: 0; width: 100%; height: 100%; }
#fx { pointer-events: none; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#gl[hidden] { display: none; }

/* ---------- Lite 2D / Pro 3D switch + honesty note ---------- */
.mode-switch {
  position: absolute; z-index: 45; top: 19.4cqh; inset-inline-end: 3.2cqh;
  display: flex; gap: 0.3cqh; padding: 0.35cqh; border-radius: 99px;
  background: rgba(22,17,13,.46); border: 1px solid rgba(216,191,145,.35); backdrop-filter: blur(10px);
}
.mode-switch button {
  min-height: 3.4cqh; padding: 0 1.3cqh; border-radius: 99px; white-space: nowrap;
  color: rgba(248,243,236,.8); font-size: 1.15cqh; font-weight: 500;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.mode-switch button[aria-checked="true"] { background: var(--ivory); color: var(--espresso); }
.mode-switch button[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.mode-switch[aria-busy="true"] button[data-render="3d"] { animation: breathe 1.2s var(--ease) infinite; }
/* the switch stays usable over the attract screen; under the snapshot modal it drops back */
.stage.modal-open .mode-switch { z-index: 5; }
.stage.attract-on .mode-switch { top: 3cqh; }

/* honesty label: visible in every state (live, attract, snapshot modal, demo) */
.mode-note {
  position: absolute; z-index: 45; bottom: 40.6cqh; inset-inline-start: 3.2cqh; max-width: 60cqw;
  pointer-events: none; transition: bottom var(--t-med) var(--ease), top var(--t-med) var(--ease);
}
.stage.attract-on .mode-note { bottom: 3cqh; }
.stage.modal-open .mode-note { bottom: auto; top: 0.8cqh; max-width: 86cqw; }
.lite-note, .pro-note {
  display: block; width: max-content; max-width: 100%; text-align: start;
  padding: 0.6cqh 1.4cqh; border-radius: 1.4cqh; background: rgba(22,17,13,.5);
  border: 1px solid rgba(216,191,145,.3); backdrop-filter: blur(8px);
  color: rgba(248,243,236,.92); font-size: 1.08cqh; line-height: 1.4;
}
.pro-note strong { display: block; font-weight: 600; font-size: 1.15cqh; color: var(--accent-soft); }
.pro-note small { display: block; font-size: 0.98cqh; opacity: .88; margin-top: 0.2cqh; }
.lite-note[hidden], .pro-note[hidden] { display: none; }

/* ---------- Top bar ---------- */
.topbar {
  position: absolute; inset-inline: 0; top: 0; z-index: 5;
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 2.2cqh 3.2cqh 5cqh;
  background: linear-gradient(to bottom, rgba(22,17,13,.62), rgba(22,17,13,0));
  color: var(--ivory);
}
.brand { display: flex; flex-direction: column; gap: 0.3cqh; }
.brand-row { display: flex; align-items: baseline; gap: 1.4cqh; }
.wordmark {
  font-family: var(--font-display); font-weight: 600; font-size: 3.6cqh; line-height: 1;
  letter-spacing: 0.34em; margin-inline-end: -0.34em; direction: ltr;
}
.wordmark-ar { font-weight: 500; font-size: 2.3cqh; color: var(--accent-soft); line-height: 1; }
.tagline { font-size: 1.25cqh; letter-spacing: 0.04em; opacity: .78; font-weight: 300; }
.top-actions { display: flex; align-items: center; gap: 1.2cqh; }
.fps {
  position: absolute; top: 24cqh; inset-inline-end: 3.2cqh;
  font: 500 1.1cqh/1 ui-monospace, "SF Mono", Menlo, monospace; unicode-bidi: plaintext; white-space: nowrap;
  padding: 0.7cqh 1cqh; border-radius: 99px; background: rgba(0,0,0,.28); color: rgba(248,243,236,.82);
}
.pill-btn {
  min-height: 4.6cqh; padding: 0 2cqh; border-radius: 99px;
  background: rgba(248,243,236,.14); border: 1px solid rgba(248,243,236,.35);
  color: var(--ivory); font-size: 1.55cqh; font-weight: 500; backdrop-filter: blur(10px);
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.pill-btn:active, .icon-btn:active { transform: scale(.96); }
.icon-btn {
  width: 4.6cqh; height: 4.6cqh; border-radius: 50%; display: grid; place-items: center;
  background: rgba(248,243,236,.14); border: 1px solid rgba(248,243,236,.35); backdrop-filter: blur(10px);
}
.icon-btn svg { width: 2.2cqh; height: 2.2cqh; fill: none; stroke: var(--ivory); stroke-width: 1.8; stroke-linecap: round; }

/* ---------- Privacy badge ---------- */
.privacy {
  position: absolute; z-index: 5; top: 11cqh; inset-inline-start: 3.2cqh;
  display: flex; align-items: center; gap: 0.8cqh; max-width: 62cqw;
  padding: 0.8cqh 1.4cqh 0.8cqh 1.2cqh; border-radius: 99px;
  background: rgba(22,17,13,.46); border: 1px solid rgba(216,191,145,.35); backdrop-filter: blur(10px);
  color: var(--ivory); font-size: 1.2cqh; line-height: 1.3;
}
.privacy svg { width: 1.7cqh; height: 1.7cqh; flex: none; fill: none; stroke: var(--accent-soft); stroke-width: 1.8; }

/* ---------- Gentle prompt ---------- */
.prompt {
  position: absolute; z-index: 6; left: 50%; top: 40%;
  transform: translate(-50%, -50%) scale(.96); opacity: 0; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 1.4cqh; text-align: center;
  width: 70cqw; padding: 3cqh 3cqh; border-radius: 3cqh;
  background: rgba(22,17,13,.55); backdrop-filter: blur(16px); color: var(--ivory);
  font-size: 2.1cqh; font-weight: 400; line-height: 1.45;
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
.prompt.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.prompt svg { width: 6.4cqh; height: 6.4cqh; fill: none; stroke: var(--accent-soft); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; animation: sway 3.2s var(--ease) infinite; }
.prompt svg circle { fill: var(--accent-soft); stroke: none; }
@keyframes sway { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-0.6cqh) scale(.94); } }

/* ---------- Gesture hint + ring ---------- */
.gesture-hint {
  position: absolute; z-index: 5; top: 15.4cqh; inset-inline-start: 3.2cqh;
  display: flex; align-items: center; gap: 0.8cqh; max-width: 62cqw;
  padding: 0.7cqh 1.3cqh; border-radius: 99px; background: rgba(22,17,13,.32);
  color: rgba(248,243,236,.88); font-size: 1.15cqh; backdrop-filter: blur(8px);
  transition: opacity var(--t-med) var(--ease);
}
.gesture-hint svg { width: 1.8cqh; height: 1.8cqh; flex: none; fill: none; stroke: var(--accent-soft); stroke-width: 1.6; stroke-linejoin: round; }
.ring {
  position: absolute; z-index: 7; left: 0; top: 0; width: 11cqh; height: 11cqh;
  margin: -5.5cqh 0 0 -5.5cqh; opacity: 0; pointer-events: none;
  transition: opacity var(--t-fast) var(--ease); will-change: transform;
}
.ring.show { opacity: 1; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 7; }
.ring .track { stroke: rgba(248,243,236,.28); fill: rgba(22,17,13,.35); }
.ring .bar { stroke: var(--accent-soft); stroke-linecap: round; stroke-dasharray: 264; stroke-dashoffset: 264; }
.ring-label {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  color: var(--ivory); font-size: 1.3cqh; font-weight: 600; line-height: 1.1; padding: 1.5cqh;
}
.ring.fired .bar { stroke: #fff; }
.ring.fired { animation: pop 420ms var(--ease-spring); }
@keyframes pop { 0% { scale: 1; } 40% { scale: 1.18; } 100% { scale: 1; } }

/* ---------- Side actions ---------- */
.side-actions {
  position: absolute; z-index: 5; inset-inline-end: 2.6cqh; top: 42cqh;
  display: flex; flex-direction: column; gap: 2.2cqh;
}
.action-btn { display: flex; flex-direction: column; align-items: center; gap: 0.8cqh; width: 12cqh; color: var(--ivory); }
.action-icon {
  width: 7.6cqh; height: 7.6cqh; border-radius: 50%; display: grid; place-items: center;
  background: rgba(22,17,13,.48); border: 1px solid rgba(248,243,236,.38); backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.action-icon svg { width: 3.2cqh; height: 3.2cqh; fill: none; stroke: var(--ivory); stroke-width: 1.5; stroke-linejoin: round; }
.action-btn:active .action-icon { transform: scale(.93); background: var(--accent); }
#snapBtn .action-icon { background: var(--accent); border-color: rgba(255,255,255,.5); }
.action-label {
  font-size: 1.2cqh; font-weight: 500; text-align: center; line-height: 1.25;
  padding: 0.4cqh 0.9cqh; border-radius: 99px; background: rgba(22,17,13,.55); backdrop-filter: blur(8px);
}

/* ---------- Dock: product, swatches, sizes, catalogue rail ---------- */
.dock {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 5;
  padding: 7cqh 0 2.4cqh;
  background: linear-gradient(to top, rgba(22,17,13,.86) 0%, rgba(22,17,13,.62) 58%, rgba(22,17,13,0) 100%);
  color: var(--ivory);
}
.product { display: flex; align-items: flex-end; justify-content: space-between; gap: 2cqh; padding: 0 3.2cqh; }
.p-text { display: flex; flex-direction: column; gap: 0.35cqh; min-width: 0; }
.p-kicker { font-size: 1.15cqh; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-soft); }
.p-name { margin: 0; font-size: 2.7cqh; font-weight: 500; line-height: 1.15; }
html[lang="en"] .p-name { font-family: var(--font-display); font-size: 3.2cqh; font-weight: 600; }
.p-meta { font-size: 1.3cqh; opacity: .75; font-weight: 300; }
.p-price { font-size: 2.3cqh; font-weight: 500; white-space: nowrap; color: var(--ivory); }
.p-text, .p-price { transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease); }
.product.swap .p-text, .product.swap .p-price { opacity: 0; transform: translateY(0.8cqh); }

.controls { display: flex; align-items: center; justify-content: space-between; gap: 2cqh; padding: 1.6cqh 3.2cqh 1.8cqh; }
.swatches, .sizes { display: flex; align-items: center; gap: 1.1cqh; }
.swatch {
  width: 4.8cqh; height: 4.8cqh; border-radius: 50%; position: relative;
  background: var(--sw); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), 0 0.4cqh 1cqh rgba(0,0,0,.3);
  transition: transform var(--t-fast) var(--ease);
}
.swatch::after {
  content: ""; position: absolute; inset: -0.6cqh; border-radius: 50%;
  border: 0.25cqh solid var(--accent-soft); opacity: 0; transform: scale(.85);
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease-spring);
}
.swatch[aria-checked="true"]::after { opacity: 1; transform: scale(1); }
.swatch:active { transform: scale(.92); }
.size {
  min-width: 5.2cqh; height: 4.8cqh; padding: 0 1.2cqh; border-radius: 99px;
  border: 1px solid rgba(248,243,236,.38); font-size: 1.5cqh; font-weight: 500; direction: ltr;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.size[aria-checked="true"] { background: var(--ivory); color: var(--espresso); border-color: var(--ivory); }

.rail {
  display: flex; gap: 1.4cqh; overflow-x: auto; scroll-snap-type: x proximity;
  padding: 0.6cqh 3.2cqh 0.4cqh; scrollbar-width: none; overscroll-behavior: contain;
}
.rail::-webkit-scrollbar { display: none; }
.card {
  flex: none; width: 12.4cqh; scroll-snap-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 0.5cqh;
  padding: 1cqh 0.8cqh 1.1cqh; border-radius: 1.8cqh;
  background: var(--glass); color: var(--espresso); border: 1px solid var(--glass-line);
  box-shadow: 0 0.6cqh 1.8cqh rgba(0,0,0,.22);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), background var(--t-med) var(--ease);
}
.card .thumb { width: 100%; height: 8.6cqh; display: grid; place-items: center; border-radius: 1.2cqh;
  background: radial-gradient(80% 80% at 50% 35%, #fff 0%, var(--linen) 100%); overflow: hidden; }
.card .thumb img { max-width: 86%; max-height: 92%; object-fit: contain; filter: drop-shadow(0 0.4cqh 0.6cqh rgba(0,0,0,.18)); }
.card .c-name { font-size: 1.22cqh; font-weight: 500; text-align: center; line-height: 1.2; min-height: 2.9cqh; display: grid; place-items: center; }
.card .c-price { font-size: 1.1cqh; color: var(--umber); }
.card[aria-selected="true"] { transform: translateY(-0.8cqh); background: var(--ivory); box-shadow: 0 0 0 0.3cqh var(--accent), 0 1.2cqh 2.6cqh rgba(0,0,0,.35); }
.card:active { transform: scale(.97); }

.demo-tag {
  position: absolute; z-index: 4; bottom: 37.5cqh; left: 50%; transform: translateX(-50%);
  padding: 0.5cqh 1.3cqh; border-radius: 99px; background: rgba(22,17,13,.35);
  color: rgba(248,243,236,.75); font-size: 1.05cqh; white-space: nowrap; letter-spacing: .03em;
}

/* ---------- Countdown + flash ---------- */
.countdown { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; pointer-events: none; }
.countdown span {
  font-family: var(--font-display); font-weight: 600; font-size: 26cqh; color: var(--ivory);
  text-shadow: 0 1cqh 5cqh rgba(0,0,0,.45); opacity: 0;
}
.countdown span.tick { animation: tick 900ms var(--ease) forwards; }
@keyframes tick { 0% { opacity: 0; transform: scale(1.5); } 25% { opacity: 1; transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(.82); } }
.flash { position: absolute; inset: 0; z-index: 21; background: #fff; opacity: 0; pointer-events: none; }
.flash.go { animation: flash 520ms ease-out; }
@keyframes flash { 0% { opacity: .92; } 100% { opacity: 0; } }

/* ---------- Snapshot modal ---------- */
.modal {
  position: absolute; inset: 0; z-index: 30; display: grid; place-items: center;
  background: rgba(22,17,13,.62); backdrop-filter: blur(14px);
  animation: fadeIn var(--t-med) var(--ease);
}
.modal[hidden], .attract[hidden], .overlay[hidden] { display: none; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-card {
  width: 86cqw; max-height: 90cqh; display: flex; flex-direction: column; gap: 2cqh;
  padding: 2.4cqh; border-radius: 3cqh; background: var(--ivory); box-shadow: var(--shadow);
  animation: rise var(--t-slow) var(--ease);
}
@keyframes rise { from { transform: translateY(3cqh) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.snap-img { width: 100%; height: 50cqh; object-fit: contain; border-radius: 1.8cqh; background: var(--linen); }
.snap-side { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "qr t" "qr b" "qr n" "u u" "d d"; column-gap: 2.2cqh; row-gap: 0.6cqh; align-items: start; }
.snap-side h3 { grid-area: t; margin: 0; font-size: 2.2cqh; font-weight: 600; }
.snap-side .muted { grid-area: b; margin: 0; font-size: 1.4cqh; color: var(--umber); line-height: 1.45; }
.qr-wrap { grid-area: qr; width: 15cqh; height: 15cqh; padding: 0.8cqh; border-radius: 1.4cqh; background: #fff; border: 1px solid var(--sand); display: grid; place-items: center; }
.qr-wrap img { width: 100%; height: 100%; image-rendering: pixelated; }
.qr-fallback { font-size: 1cqh; word-break: break-all; margin: 0; }
.demo-note { grid-area: n; margin: 0.4cqh 0 0; font-size: 1.2cqh; color: var(--accent-ink); line-height: 1.4; }
.share-url { grid-area: u; margin-top: 1cqh; font-size: 1.05cqh; color: var(--taupe); word-break: break-all; text-align: start; }
.snap-side .primary-btn { grid-area: d; margin-top: 1.2cqh; }
.primary-btn, .ghost-btn {
  min-height: 6cqh; padding: 0 3cqh; border-radius: 99px; font-size: 1.7cqh; font-weight: 500;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.primary-btn { background: var(--espresso); color: var(--ivory); }
.primary-btn:active, .ghost-btn:active { transform: scale(.97); }
.ghost-btn { border: 1px solid var(--taupe); color: var(--espresso); }

/* ---------- Toast ---------- */
.toast {
  position: absolute; z-index: 46; left: 50%; top: 20cqh; width: max-content; max-width: 82cqw;
  transform: translate(-50%, -2cqh); opacity: 0; pointer-events: none;
  padding: 1.8cqh 2.6cqh; border-radius: 2cqh; background: var(--ivory); color: var(--espresso);
  box-shadow: var(--shadow); font-size: 1.6cqh; line-height: 1.45; text-align: center;
  border-top: 0.35cqh solid var(--accent);
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease-spring);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast small { display: block; color: var(--taupe); font-size: 1.2cqh; margin-top: .4cqh; }

/* ---------- Attract screen ---------- */
.attract {
  position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(90% 60% at 50% 35%, #3a2d23 0%, #1d1611 62%, #140f0b 100%);
  color: var(--ivory); animation: fadeIn 900ms var(--ease);
}
.attract-sheen {
  position: absolute; inset: -20%;
  background: linear-gradient(115deg, transparent 40%, rgba(216,191,145,.10) 48%, rgba(255,255,255,.07) 50%, transparent 58%);
  animation: sheen 6.5s var(--ease) infinite;
}
@keyframes sheen { 0% { transform: translateX(-60%); } 60%, 100% { transform: translateX(60%); } }
.attract-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.6cqh; text-align: center; padding: 0 8cqw; }
.attract-word { font-family: var(--font-display); font-weight: 600; font-size: 9cqh; letter-spacing: .3em; margin-inline-end: -.3em; line-height: 1; direction: ltr; }
.attract-word-ar { font-size: 5cqh; color: var(--accent-soft); font-weight: 500; line-height: 1.1; }
.attract-line { width: 9cqh; height: 1px; background: var(--accent); margin: 1cqh 0; }
.attract-tag { margin: 0; font-size: 2.2cqh; font-weight: 300; opacity: .9; }
.attract-gallery { display: flex; gap: 2cqh; margin: 4cqh 0 3cqh; }
.attract-gallery img { height: 13cqh; width: 9cqh; object-fit: contain; opacity: .92; animation: float 5s var(--ease) infinite; filter: drop-shadow(0 1cqh 1.5cqh rgba(0,0,0,.45)); }
.attract-gallery img:nth-child(2) { animation-delay: -1.6s; }
.attract-gallery img:nth-child(3) { animation-delay: -3.2s; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-1.2cqh); } }
.attract-cta {
  margin: 0; padding: 1.6cqh 3.4cqh; border-radius: 99px; border: 1px solid rgba(216,191,145,.55);
  font-size: 1.9cqh; animation: breathe 3s var(--ease) infinite;
}
@keyframes breathe { 0%,100% { opacity: .6; } 50% { opacity: 1; } }

/* ---------- Loading + error overlays ---------- */
.overlay {
  position: absolute; inset: 0; z-index: 50; display: grid; place-items: center; align-content: center; gap: 2cqh;
  background: radial-gradient(90% 60% at 50% 40%, #33271e 0%, #16110d 100%); color: var(--ivory);
  font-size: 1.7cqh; transition: opacity var(--t-slow) var(--ease);
}
.overlay.fade { opacity: 0; pointer-events: none; }
.loader { width: 6cqh; height: 6cqh; border-radius: 50%; border: 0.35cqh solid rgba(216,191,145,.25); border-top-color: var(--accent-soft); animation: spin 900ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.error-card {
  width: 84cqw; padding: 3.6cqh 3.2cqh; border-radius: 3cqh; background: var(--ivory); color: var(--espresso);
  display: flex; flex-direction: column; gap: 1cqh; box-shadow: var(--shadow); text-align: center;
}
.error-icon { width: 7cqh; height: 7cqh; margin: 0 auto 1cqh; border-radius: 50%; display: grid; place-items: center; background: var(--linen); }
.error-icon svg { width: 3.4cqh; height: 3.4cqh; fill: none; stroke: var(--accent-ink); stroke-width: 1.5; stroke-linecap: round; }
.error-card h3 { margin: 0; font-size: 2.2cqh; font-weight: 600; }
.error-card p { margin: 0 0 1cqh; font-size: 1.5cqh; line-height: 1.55; color: var(--umber); }
.error-card .err-en { font-family: var(--font-ar); }
.error-card h3.err-en { margin-top: 1.2cqh; padding-top: 2cqh; border-top: 1px solid var(--sand); }
.error-actions { display: flex; flex-direction: column; gap: 1.2cqh; margin-top: 1.6cqh; }
.error-actions .sep { opacity: .45; margin: 0 .6em; }
.error-actions button { padding: 1.2cqh 2.4cqh; line-height: 1.4; }
.error-actions button span[lang] { white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}