:root {
      color-scheme: light;
      --bg: #fff7f7;
      --bg-soft: #fff1f2;
      --panel: rgba(255,255,255,.78);
      --panel-strong: rgba(255,255,255,.92);
      --ink: #231316;
      --muted: #7c5258;
      --line: rgba(185,28,28,.16);
      --primary: #c81e1e;
      --primary-2: #f43f5e;
      --accent: #0f766e;
      --shadow: 0 18px 55px rgba(127,29,29,.14);
      --safe-top: env(safe-area-inset-top, 0px);
      --safe-bottom: env(safe-area-inset-bottom, 0px);
      --safe-left: env(safe-area-inset-left, 0px);
      --safe-right: env(safe-area-inset-right, 0px);
      --android-nav-bar: 0px; /* Will be set by JavaScript for Android */
    }
    :root[data-theme="dark"] {
      color-scheme: dark;
      --bg: #09090b;
      --bg-soft: #181012;
      --panel: rgba(24,16,18,.76);
      --panel-strong: rgba(24,16,18,.94);
      --ink: #fff1f2;
      --muted: #d6a8ae;
      --line: rgba(248,113,113,.22);
      --primary: #ef4444;
      --primary-2: #fb7185;
      --accent: #2dd4bf;
      --shadow: 0 20px 60px rgba(0,0,0,.36);
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      min-height: 100dvh;
      overflow: hidden;
      background:
        linear-gradient(160deg, rgba(248,113,113,.18), transparent 34%),
        linear-gradient(22deg, rgba(15,118,110,.08), transparent 30%),
        var(--bg);
      color: var(--ink);
      font-family: Cairo, Tajawal, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      -webkit-tap-highlight-color: transparent;
      -webkit-font-smoothing: antialiased;
    }
    html[lang="ar"] body {
      font-family: "Noto Sans Arabic", Cairo, Tajawal, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    button, input, textarea, select { font: inherit; }
    button { color: inherit; cursor: pointer; }
    img { display: block; max-width: 100%; }
    #mas-app { min-height: 100dvh; }
    .phone-stage {
      width: 100%;
      height: 100dvh;
      display: flex;
      justify-content: center;
      overflow: hidden;
    }
    .phone-shell {
      position: relative;
      width: min(100%, 460px);
      height: 100dvh;
      overflow: hidden;
      background: rgba(255,255,255,.18);
      border-inline: 1px solid var(--line);
    }
    @media (min-width: 560px) {
      .phone-stage { align-items: center; padding: 20px; }
      .phone-shell {
        height: min(920px, calc(100dvh - 40px));
        border: 8px solid rgba(35,19,22,.14);
        border-radius: 36px;
        box-shadow: var(--shadow);
      }
    }
    .app-scroll {
      height: 100%;
      overflow-y: auto;
      overscroll-behavior: contain;
      padding: 0;
      scrollbar-width: none;
    }
    .app-scroll > .stack {
      width: min(100%, 430px);
      margin-inline: auto;
      padding: 0 14px calc(100px + env(safe-area-inset-bottom, 0px)) 14px;
      transform: translateY(calc(var(--catalog-pull-distance, 0px) * .58));
      transition: transform .32s cubic-bezier(.2,.8,.2,1);
      will-change: transform;
    }
    .app-scroll.is-pulling > .stack { transition: none; }
    .app-scroll.is-refreshing > .stack { transition: transform .24s ease; }
    .app-scroll::-webkit-scrollbar { display: none; }
    .glass {
      background: var(--panel);
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }