:root{
    /* Light (default) */
    --stone-bg:#F8F7FA;
    --soft-blue:#A7C7E7;
    --pastel-purple:#C3B1E1;
    --copper-accent:#B5651D;
    --charcoal-text:#36454F;
    --white:#FFFFFF;

    --card-bg: var(--white);
    --glass-bg: rgba(255,255,255,.6);
    --glass-border: rgba(255,255,255,.7);
    --shadow: 0 10px 30px rgba(0,0,0,.06);
  }
  html.dark{
    /* Dark */
    --stone-bg:#0F1117;
    --soft-blue:#5A7DB6;
    --pastel-purple:#7A66A5;
    --copper-accent:#D89242;
    --charcoal-text:#E5E7EB;
    --white:#141821;

    --card-bg:#171A21;
    --glass-bg: rgba(15,17,23,.6);
    --glass-border: rgba(255,255,255,.12);
    --shadow: 0 10px 30px rgba(0,0,0,.35);
  }
  html,body{
    background: var(--stone-bg);
    color: var(--charcoal-text);
    font-family: Vazirmatn, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    transition: background .35s ease, color .35s ease;
  }

  /* شیپ‌های موجی */
  .curve-blob{
    position:absolute; inset:auto auto -40% -10%;
    width:60vw; height:60vw; max-width:900px; max-height:900px;
    filter: blur(40px); opacity:.25; border-radius: 50%;
    background:
      radial-gradient(60% 60% at 50% 40%, var(--pastel-purple), rgba(255,255,255,0) 65%),
      radial-gradient(50% 50% at 60% 60%, var(--soft-blue), rgba(255,255,255,0) 70%);
    pointer-events:none;
    transition: opacity .35s ease, filter .35s ease;
  }
  .curve-blob.right{ inset:auto -15% -45% auto; transform: rotate(20deg); }

  /* کارت‌ها و اجزا */
  .soft-card{
    background: var(--card-bg);
    border-radius: 2rem;
    box-shadow: var(--shadow);
    transition: background .35s ease, box-shadow .35s ease, border-color .35s ease;
  }
  .glass{
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    transition: background .35s ease, border-color .35s ease;
  }
  .copper-chip{
    background: linear-gradient(135deg, color-mix(in oklab, var(--copper-accent) 12%, transparent), color-mix(in oklab, var(--copper-accent) 22%, transparent));
    color: var(--copper-accent);
    border: 1px solid color-mix(in oklab, var(--copper-accent) 25%, transparent);
  }

  /* دکمه‌ها */
  .btn{
    display:inline-flex; align-items:center; gap:.5rem;
    border-radius: 999px; padding:.75rem 1.25rem; font-weight:600;
    transition: filter .2s ease, transform .2s ease;
  }
  .btn:hover{ filter: brightness(1.05); transform: translateY(-1px); }
  .btn-primary{ background: var(--charcoal-text); color: #fff; }
  .btn-copper{ background: var(--copper-accent); color: #fff; }

  /* انیمیشن‌ها */
  @keyframes floaty{ from{ transform: translateY(0) } 50%{ transform: translateY(-8px) } to{ transform: translateY(0) } }
  @keyframes fadeUp{ from{ opacity:0; transform: translateY(16px) } to{ opacity:1; transform: translateY(0) } }
  .floaty{ animation: floaty 6s ease-in-out infinite }
  .reveal{ opacity:0; transform: translateY(16px); }
  .revealed{ animation: fadeUp .7s ease forwards }

  /* اسکرول افقی دسته‌ها */
  .cat-scroll{ scroll-snap-type: x mandatory; }
  .cat-item{ scroll-snap-align: start; }

  /* دکمه تغییر تم (بالا-چپ) */
  .theme-toggle{
    position: fixed;
    top: 1rem; left: 1rem; /* در RTL بهتره چپ باشه تا با منو برخورد نکنه */
    z-index: 60;
    inline-size: 44px; block-size: 44px;
    display: grid; place-items: center;
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    box-shadow: var(--shadow);
    cursor: pointer;
  }
  .theme-toggle svg{ width: 22px; height: 22px; }
  .theme-toggle .icon{ display: none; }
  .theme-toggle .icon-sun{ display: block; }
  html.dark .theme-toggle .icon-sun{ display: none; }
  html.dark .theme-toggle .icon-moon{ display: block; }


    /* دکمه ورود / ثبت‌نام */
  .btn-login {
    background-color: #d89242;
    color: #fff;
  }
  .btn-login:hover { filter: brightness(1.06); }

  /*Footer*/
  .trust-badge{width:86px;height:86px}
  .trust-badge > img,
  .trust-badge > iframe,
  .trust-badge > a{width:100%!important;height:100%!important;border:0!important;display:block}
  /*Footer*/