:root {
  --vd-terracotta: #5E8C76;
  --vd-terracotta-deep: #5E8C76;
  --vd-peach: #DCE8E2;
  --vd-peach-light: #F8F9F6;
  --vd-lavender: #6B9080;
  --vd-lavender-muted: #88A89A;
  --vd-stone-cream: #F8F9F6;
  --vd-stone: #D4C4A8;
  --vd-sand: #C9A227;
  --vd-ink: #1C1612;
  --vd-ink-soft: #5A534C;
  --vd-paper: #FFFFFF;
  --vd-font-ar: "IBM Plex Sans Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --vd-font-ar-display: "Amiri", "Noto Naskh Arabic", "IBM Plex Sans Arabic", "Times New Roman", serif;
  --vd-font-latin: "IBM Plex Sans", "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --vd-hairline: 1px solid var(--vd-text, #1C1612);
  --vd-cta: #111111;
  --vd-cta-text: #FFFFFF;
  --vd-cta-hover: #2C2C2C;
}
[data-scene="palace"] {
  --vd-bg: #F8F9F6;
  --vd-surface: #FFFFFF;
  --vd-text: #1C1612;
  --vd-text-muted: #5A534C;
  --vd-border: #D4C4A8;
  --vd-cta: #5E8C76;
  --vd-accent: #C9A227;
  --vd-identity: #1C1612;
}
[data-scene="house"] {
  --vd-bg: #F4F1EC;
  --vd-surface: #FFFFFF;
  --vd-text: #1C1612;
  --vd-text-muted: #5A534C;
  --vd-border: #D4C4A8;
  --vd-cta: #5E8C76;
  --vd-accent: #6B9080;
  --vd-identity: #1C1612;
}
[data-overlay="ink"] {
  --vd-overlay: rgba(28, 22, 18, 0.78);
  --vd-overlay-text: #FFFFFF;
}
[data-overlay="linen"] {
  --vd-overlay: rgba(255, 255, 255, 0.82);
  --vd-overlay-text: #1C1612;
}
[data-overlay="dusk"] {
  --vd-overlay: rgba(28, 22, 18, 0.72);
  --vd-overlay-text: #FFFFFF;
}
[data-costume="customer"] {
  --vd-identity-px: 28px;
  --vd-body-px: 16px;
  --vd-price-px: 18px;
  --vd-tap-px: 44px;
}
[data-costume="cashier"] {
  --vd-identity-px: 36px;
  --vd-body-px: 16px;
  --vd-price-px: 20px;
  --vd-tap-px: 52px;
  --vd-cta: #111111;
  --vd-cta-text: #FFFFFF;
}
[data-costume="kitchen"] {
  --vd-identity-px: 48px;
  --vd-body-px: 28px;
  --vd-price-px: 32px;
  --vd-tap-px: 56px;
  --vd-cta: #111111;
  --vd-cta-text: #FFFFFF;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--vd-bg, #FFFFFF); color: var(--vd-text, #1C1612); }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { font-family: var(--vd-font-latin); font-weight: 400; }
[lang="ar"], .ar, [dir="rtl"] { font-family: var(--vd-font-ar); }
.ar-display { font-family: var(--vd-font-ar-display); font-weight: 700; }
::selection { background: #1C1612; color: #FFFFFF; }
button { font-family: inherit; }
/* Forbidden: purple SaaS gradient, cheap glow, emoji strips, card-stack hero */
@media (max-width: 767px) { :root { --vd-viewport: mobile; } }
@media (min-width: 768px) and (max-width: 1279px) { :root { --vd-viewport: tablet; } }
@media (min-width: 1280px) { :root { --vd-viewport: tv; } }
[dir="rtl"] { unicode-bidi: isolate; }
@media (min-width: 1280px) {
  [data-costume="kitchen"] { --vd-identity-px: 64px; --vd-body-px: 32px; --vd-price-px: 36px; }
}

    button.cta, a.cta, button.hq-cta, a.hq-cta, button.send, button.ready, button.install,
    .studio button.cta, .studio button.cat-add, #gate button[type="submit"] {
      background: #111111;
      color: #FFFFFF;
      border-color: transparent;
      border-radius: 10px;
    }
    button.cta:hover:not(:disabled), a.cta:hover, button.hq-cta:hover:not(:disabled), a.hq-cta:hover,
    button.send:hover:not(:disabled), button.ready:hover:not(:disabled), button.install:hover,
    .studio button.cta:hover:not(:disabled), .studio button.cat-add:hover, #gate button[type="submit"]:hover {
      background: #2C2C2C;
      color: #FFFFFF;
    }
    button.cta:active:not(:disabled), a.cta:active, button.hq-cta:active, a.hq-cta:active,
    button.send:active:not(:disabled), button.ready:active:not(:disabled), button.install:active,
    .studio button.cta:active:not(:disabled), .studio button.cat-add:active, #gate button[type="submit"]:active {
      background: #1A1A1A;
      color: #FFFFFF;
    }
    a.vd-lockup {
      text-decoration: none;
      color: inherit;
      cursor: pointer;
    }
    a.vd-lockup:hover { opacity: 0.82; }
    a.vd-lockup:focus-visible {
      outline: 2px solid #111111;
      outline-offset: 3px;
    }
    .vd-lockup {
      display: inline-flex;
      flex-direction: row;
      align-items: center;
      gap: 12px;
      min-width: 0;
      flex-shrink: 0;
      color: #111111;
      font-family: "IBM Plex Sans", "Source Sans 3", "Segoe UI", system-ui, sans-serif;
      line-height: 1.15;
    }
    .vd-lockup-mark {
      display: block;
      flex-shrink: 0;
      width: auto;
      height: 56px;
      object-fit: contain;
      object-position: center;
      background: transparent;
      border: 0;
      border-radius: 0;
      padding: 0;
      margin: 0;
      box-shadow: none;
    }
    .vd-lockup-text {
      display: none;
      gap: 2px;
      min-width: 0;
      text-align: start;
    }
    .vd-lockup-name {
      font-weight: 700;
      letter-spacing: 0.01em;
      white-space: nowrap;
    }
    .vd-lockup-line {
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.02em;
      opacity: 0.62;
      white-space: nowrap;
    }
    .vd-lockup--nav { gap: 0; }
    .vd-lockup--nav .vd-lockup-mark { display: none; }
    .vd-lockup--nav .vd-lockup-text { display: flex; flex-direction: column; }
    .vd-lockup--nav .vd-lockup-name { font-size: 15px; font-weight: 700; }
    .vd-lockup--nav .vd-lockup-line { display: none; }
    .vd-lockup--login {
      margin: 0;
      flex-direction: column;
      gap: 0;
    }
    .vd-lockup--login .vd-lockup-mark {
      width: min(72vw, 168px);
      height: auto;
      max-width: min(72vw, 168px);
    }
    .vd-lockup--splash {
      flex-direction: column;
      gap: 0;
    }
    .vd-lockup--splash .vd-lockup-mark {
      width: min(78vw, 320px);
      height: auto;
      max-width: min(78vw, 320px);
      mix-blend-mode: multiply;
    }
    @media (max-width: 640px) {
      .vd-lockup--nav .vd-lockup-name { font-size: 14px; }
    }
    .bar-brand {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
      flex: 1;
    }
    .bar-brand > div { min-width: 0; }
    .brand-splash {
      font-family: "IBM Plex Sans", "Source Sans 3", "Segoe UI", system-ui, sans-serif;
    }