:root{
      color-scheme: light;
      --bg:#FAF8F5;
      --bg-2:#F3EEE6;
      --card:#ffffff;
      --card-2:#F3EEE6;
      --text:#1F1B16;
      --muted:#6B6259;
      --border:rgba(181,80,46,0.14);
      --border-strong:rgba(181,80,46,0.22);
      --input-bg:#fff;
      --input-text:#1F1B16;
      --btn-text:#1F1B16;
      --pill-bg:rgba(181,80,46,0.06);
      --hero-bg:linear-gradient(135deg, rgba(181,80,46,0.14), rgba(180,120,60,0.1));
      --shadow:rgba(43,33,25,0.14);
      --modal-bg:rgba(43,33,25,0.4);
      --modal-surface:linear-gradient(180deg, #ffffff, #F3EEE6);
      --link:#B5502E;
      --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-6:1.5rem; --sp-8:2rem; --sp-12:3rem;
      --shadow-card:0 8px 24px rgba(31,27,22,0.10), 0 2px 6px rgba(31,27,22,0.06);
      --shadow-card-hover:0 16px 32px rgba(31,27,22,0.16);
      --radius-sm:10px; --radius-md:16px; --radius-lg:20px;
      --surface-gray:#F5F5F5;
    }
    *{ scrollbar-color: rgba(99,102,241,0.5) transparent; }
    html{ scroll-behavior:smooth; }
    ::selection{ background:rgba(181,80,46,0.3); color:var(--text); }
    ::-webkit-scrollbar{ width:10px; height:10px; }
    ::-webkit-scrollbar-track{ background:transparent; }
    ::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,#B5502E,#D98A3D); border-radius:999px; border:2px solid transparent; background-clip:padding-box; }
    body{ background: linear-gradient(180deg,var(--bg) 0%, var(--bg-2) 100%); color:var(--text); font-family:'Inter','Vazirmatn',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
    html[dir="rtl"] body{ font-family:'Vazirmatn','Inter',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial; line-height:1.85; }
    html[dir="rtl"] h1, html[dir="rtl"] .brand-title, html[dir="rtl"] .hero-copy h1{ line-height:1.35; }
    h1, h2, h3, .font-semibold, .font-medium{ letter-spacing:-0.01em; }
    a, button{ outline-offset:3px; }
    a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{ outline:2px solid #B5502E; border-radius:8px; }
    .fade-up{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
    .fade-up.in-view{ opacity:1; transform:translateY(0); }
    .search-box{ background: linear-gradient(90deg, var(--card), var(--card-2)); border:1px solid var(--border); padding:8px; border-radius:12px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.03); }
    .card{ position:relative; background: linear-gradient(180deg, var(--card), var(--card-2)); border:1px solid var(--border); padding:10px; border-radius:14px; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; box-shadow:0 6px 18px rgba(2,6,23,0.08); }
    .card:hover{ transform:translateY(-3px); box-shadow:0 16px 32px rgba(2,6,23,0.14); border-color:var(--border-strong); }
    .small-muted{ color:var(--muted); font-size:13px; }
    /* The seller/admin dashboards use a handful of hardcoded dark Tailwind utility
       classes (bg-white/5, bg-slate-900/60, border-white/10, text-slate-400, the
       pastel -300 status colors, etc.) for their card chrome, since they were built
       dark-only. Rather than rewriting every element, give those exact classes a
       light-theme-only override so both themes render with proper contrast. */
    /* text-cyan-400/text-amber-400 aren't in the compiled tailwind.css bundle
       at all (unlike -300/emerald-400/rose-400, which are) — order-status
       labels using them ('processing'/'pending_verification') silently show
       no color in either theme. Defined once, unscoped, so both themes get
       the accent color Tailwind would have generated. */
    .text-cyan-400{ color:#22d3ee; }
    .text-amber-400{ color:#fbbf24; }
    body[data-theme="light"] .bg-white\/5,
    body[data-theme="light"] .bg-slate-900\/60,
    body[data-theme="light"] .bg-\[\#071827\]{ background:#ffffff; }
    body[data-theme="light"] .border-white\/10{ border-color:rgba(181,80,46,0.16); }
    body[data-theme="light"] .border-white\/5{ border-color:rgba(181,80,46,0.10); }
    body[data-theme="light"] .bg-slate-700{ background:#e7dbc9; color:#1F1B16; }
    body[data-theme="light"] .bg-slate-800{ background:#F3EEE6; color:#1F1B16; }
    body[data-theme="light"] .text-slate-400{ color:#6B6259; }
    body[data-theme="light"] .text-emerald-300, body[data-theme="light"] .text-emerald-400{ color:#0f7a42; }
    body[data-theme="light"] .text-cyan-300, body[data-theme="light"] .text-cyan-400{ color:#0e7490; }
    body[data-theme="light"] .text-amber-300, body[data-theme="light"] .text-amber-400{ color:#a15c00; }
    body[data-theme="light"] .text-rose-300, body[data-theme="light"] .text-rose-400{ color:#be123c; }
    /* Order-status alert boxes (pending sellers/subscriptions) — the default
       yellow-500/10 + yellow-400/20 pairing is a dark-background pattern
       (bright translucent yellow glowing on near-black); on the light theme's
       cream background it read as a washed-out, low-contrast smudge. */
    body[data-theme="light"] .bg-yellow-500\/10{ background:rgba(217,138,61,0.14); }
    body[data-theme="light"] .border-yellow-400\/20{ border-color:rgba(217,138,61,0.4); }
    body[data-theme="light"] .dashboard-stat{ background:rgba(181,80,46,0.04); }
    body[data-theme="light"] .dashboard-table{ background:#ffffff; border-color:rgba(181,80,46,0.14); }
    body[data-theme="light"] .dashboard-table thead{ background:rgba(181,80,46,0.04); }
    body[data-theme="light"] .dashboard-table thead tr{ color:#6B6259; }
    body[data-theme="light"] table thead tr.border-b.border-white\/10{ border-color:rgba(181,80,46,0.16); }
    body[data-theme="light"] tr.border-b.border-white\/10{ border-color:rgba(181,80,46,0.14); }
    .btn-ghost{ background:transparent; border:1px solid var(--border); padding:6px 10px; border-radius:10px; color:var(--btn-text); display:inline-flex; align-items:center; justify-content:center; gap:.4rem; line-height:1.2; transition:all .2s ease; }
    .btn-ghost:hover{ background:rgba(255,255,255,0.05); transform:translateY(-1px); border-color:var(--border-strong); }
    body[data-theme="light"] .btn-ghost:hover{ background:rgba(15,23,42,0.05); }
    .logo-sm{ width:44px;height:44px;border-radius:8px;object-fit:cover;border:1px solid var(--border); }
    .pill{ background:var(--pill-bg); padding:6px 10px;border-radius:999px;font-size:13px; display:inline-flex; align-items:center; line-height:1.2; }
    .input-dark{ background:var(--input-bg); border:1px solid var(--border); padding:8px 10px;border-radius:8px;color:var(--input-text); }
    .modal-backdrop{ position:fixed;inset:0;background:var(--modal-bg);display:flex;align-items:flex-start;justify-content:center;z-index:60; overflow-y:auto; padding:2rem 1rem; -webkit-overflow-scrolling:touch; }
    .modal{ background:var(--modal-surface); border:1px solid var(--border); padding:18px;border-radius:12px; width:100%; max-width:520px; box-shadow:0 20px 60px var(--shadow); margin-top:auto; margin-bottom:auto; }
    .link-muted{ color:var(--link); text-decoration:none; }
    .btn-primary{ position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; background:linear-gradient(90deg, #B5502E, #D98A3D); color:#fff; border:none; padding:.95rem 1.6rem; border-radius:999px; font-weight:700; box-shadow:0 18px 40px rgba(181,80,46,0.25); transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease; }
    .btn-primary::after{ content:''; position:absolute; inset:0; background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%); transform:translateX(-100%); transition:transform .6s ease; }
    .btn-primary:hover{ transform:translateY(-2px); opacity:.98; box-shadow:0 22px 48px rgba(181,80,46,0.35); }
    .btn-primary:hover::after{ transform:translateX(100%); }
    .btn-primary:active{ transform:translateY(0) scale(.97); box-shadow:0 12px 28px rgba(181,80,46,0.3); }

    /* Arabic/Kurdish/Farsi legibility: negative letter-spacing is a Latin-script
       trick that visually breaks connected-script letter joining, and the
       smallest pill/badge sizes read as under-legible in non-Latin glyphs. */
    html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
    html[dir="rtl"] .font-semibold, html[dir="rtl"] .font-medium,
    html[dir="rtl"] .shop-menu .menu-item-name{ letter-spacing:normal; }
    html[dir="rtl"] .shop-menu .menu-badge{ font-size:.72rem; }
    html[dir="rtl"] .shop-menu .product-card-badge{ font-size:.7rem; }
    html[dir="rtl"] .shop-menu .product-card-cta{ font-size:.84rem; }
    @media (max-width: 479px){
      html[dir="rtl"] .shop-menu .product-card-name{ font-size:.82rem; }
      html[dir="rtl"] .shop-menu .product-card-cta{ font-size:.78rem; }
    }
    @media (max-width: 1023px){
      html[dir="rtl"] .shop-menu .menu-item-actions a, html[dir="rtl"] .shop-menu .menu-item-fav-btn{ font-size:.7rem; }
    }