:root {
    /* palette: sage #8da185, pale sage #c8d3c3, cream #f6f2ea, gold #c9a867 */
    color-scheme:light;
    --bg:#f6f2ea; --card:#fffdf9; --muted:#eef1ea; --line:#e2ddd2; --text:#2e3a2b; --mute:#6a7464;
    --sage:#8da185; --sage-pale:#c8d3c3; --gold:#c9a867;
    --primary:#5c7654; --primary-hover:#4d6646; /* darker sage so white text stays readable */
    --gold-text:#8a6a2b; --danger:#b4544a; --success:#4f7a47;
    --shadow:0 1px 2px #2e3a2b0a, 0 10px 28px #2e3a2b12;
    --c:var(--primary);
  }
  * { box-sizing:border-box }
  /* 'Vazirmatn FD' renders 0-9 as Persian digits everywhere, inputs included */
  input, button, select, textarea { font-family:inherit }
  [hidden] { display:none !important }
  body { margin:0; background:var(--bg); color:var(--text); font:14px/1.7 'Vazirmatn FD','Segoe UI',system-ui,sans-serif }
  body::before { content:''; display:block; height:4px; background:linear-gradient(90deg,var(--sage),var(--sage-pale) 60%,var(--gold)) }
  main { max-width:1600px; margin:0 auto; padding:24px 24px 48px }
  @media (max-width:820px) { main { padding:16px 12px 40px } }
  .kicker { display:inline-block; font-size:11.5px; font-weight:600; color:var(--primary); background:color-mix(in srgb,var(--sage-pale) 45%,var(--card)); border:1px solid var(--sage-pale); border-radius:99px; padding:2px 10px }
  h1 { font-size:28px; font-weight:800; line-height:1.4; margin:10px 0 4px }
  h1 span { color:var(--primary) }
  .sub { color:var(--mute); margin-bottom:20px }
  input,select { background:var(--card); color:var(--text); border:1px solid var(--line); border-radius:10px; padding:9px 12px; font:inherit; font-size:13px }
  input { flex:1; min-width:200px } select { min-width:180px; max-width:100%; font-weight:600 }
  input:focus,select:focus { outline:2px solid var(--primary); outline-offset:-1px }
  .btn { background:var(--primary); color:#fff; border:0; border-radius:12px; padding:9px 15px; font:600 13px inherit; font-family:inherit; cursor:pointer; box-shadow:0 6px 16px #5c765433; transition:background .15s }
  .btn:hover { background:var(--primary-hover) }
  .num,.id { font-family:'Vazirmatn FD',sans-serif; font-size:12.5px } .num { white-space:nowrap }
  .id { color:var(--mute); white-space:nowrap }
  .tag { white-space:nowrap }
  .tag { font-size:11px; font-weight:600; padding:2px 8px; border-radius:99px; background:var(--muted); color:var(--mute) }
  .on { background:color-mix(in srgb,var(--success) 14%,transparent); color:var(--success) }
  .msg { padding:40px; text-align:center; color:var(--mute) }

  /* admin */
  .row { display:flex; align-items:center; gap:12px; padding:10px 18px; border-bottom:1px solid var(--line) }
  .row:last-child { border-bottom:0 } .row .grow { flex:1 } .row small { color:var(--mute) }
  details.card { background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); overflow:hidden; margin-bottom:12px; position:relative }
  details.card::before { content:''; position:absolute; inset-inline-start:0; top:0; bottom:0; width:4px; background:var(--c) }
  details summary { list-style:none; cursor:pointer }
  details.card > summary { cursor:pointer; padding:14px 18px 14px 22px; display:flex; align-items:center; gap:12px; font-weight:700; font-size:15px }
  details summary::-webkit-details-marker { display:none }
  summary .caret { transition:transform .15s; color:var(--mute) } details[open] > summary .caret { transform:rotate(-90deg) }
  details.card.off { opacity:.6 }
  .body { border-top:1px solid var(--line); background:color-mix(in srgb,var(--muted) 40%,transparent) }
  input.sw { appearance:none; min-width:0; padding:0; border:0; width:38px; height:22px; border-radius:99px; background:var(--line); position:relative; cursor:pointer; flex:none; transition:background .15s }
  input.sw::after { content:''; position:absolute; top:3px; inset-inline-start:3px; width:16px; height:16px; border-radius:50%; background:#fff; transition:inset-inline-start .15s }
  input.sw:checked { background:var(--primary) } input.sw:checked::after { inset-inline-start:19px }
  input.sw:focus-visible { outline:2px solid var(--primary); outline-offset:2px }
  #saved { font-size:12px; color:var(--mute); margin-inline-start:auto }
  a { color:var(--primary); font-weight:600 }
  details.group { border-bottom:1px solid var(--line) } details.group:last-child { border-bottom:0 }
  details.group > summary.row { border-bottom:0; font-weight:600 }
  details.group.off > summary { opacity:.6 }
  .items { background:var(--bg); border-top:1px solid var(--line) }
  .items .row { padding:6px 18px; padding-inline-start:44px }
  .items .grow { display:flex; flex-direction:column; gap:2px; min-width:0 }
  .items .grow small { font-size:11px }
  input.rename { width:100%; min-width:0; flex:none; padding:6px 10px; font-size:13px }
  input.rename::placeholder { color:var(--text); opacity:.85 }
  .items .num { min-width:56px }

  /* customer order form (RTL): form on the right, sticky summary on the left */
  .layout { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:16px; align-items:start }
  @media (max-width:900px) { .layout { grid-template-columns:1fr } }
  .panel { background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:20px }
  .summary { position:sticky; top:16px }
  .summary h2 { font-size:15px; font-weight:700; margin:0 0 12px }
  .field { margin-bottom:16px; position:relative }
  .field > label, .field > .label { display:block; font-size:13px; font-weight:600; margin-bottom:6px }
  .hint { font-size:12px; color:var(--mute); margin-top:4px } .hint.err { color:var(--danger) }
  .field input { width:100% }
  .dd-btn { display:flex; align-items:center; gap:10px; width:100%; min-height:44px; padding:8px 12px; background:var(--card); color:var(--text); border:1px solid var(--line); border-radius:10px; font:inherit; font-size:13.5px; text-align:start; cursor:pointer; transition:border-color .15s }
  .dd-btn:hover, .dd-btn[aria-expanded="true"] { border-color:var(--primary) }
  .dd-btn:focus-visible { outline:2px solid var(--primary); outline-offset:-1px }
  .dd-btn:disabled { opacity:.5; cursor:default }
  .dd-btn .grow, .opt .grow { flex:1; min-width:0 }
  .dd-btn small, .opt small { color:var(--mute); font-size:11.5px; margin-inline-start:6px }
  .dd-btn .caret { color:var(--mute); transform:rotate(-90deg) }
  .dd-pop { position:absolute; inset-inline:0; top:calc(100% + 4px); z-index:20; background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:0 1px 2px #2e3a2b14, 0 18px 40px #2e3a2b1f; padding:6px }
  .dd-pop input { width:100%; margin-bottom:6px }
  .dd-list { max-height:340px; overflow:auto }
  .opt { display:flex; align-items:center; gap:10px; width:100%; padding:8px 10px; border:0; border-radius:8px; background:none; color:var(--text); font:inherit; font-size:13px; text-align:start; cursor:pointer }
  .opt:hover, .opt:focus-visible { background:var(--muted); outline:0 }
  .opt[aria-selected="true"] { background:color-mix(in srgb,var(--sage-pale) 55%,transparent) }
  .ico { width:26px; height:26px; border-radius:8px; flex:none; display:grid; place-items:center; background:color-mix(in srgb,var(--c) 14%,transparent) }
  .ico i { width:15px; height:15px; background:var(--c); -webkit-mask:var(--m) center/contain no-repeat; mask:var(--m) center/contain no-repeat }
  .price { display:flex; align-items:center; gap:14px; flex-wrap:wrap; border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin-bottom:16px; background:color-mix(in srgb,var(--muted) 50%,transparent) }
  .price b { font:700 22px 'Vazirmatn FD',sans-serif; display:block; line-height:1.2 } .price small { color:var(--mute); font-size:11.5px }
  .stats { display:flex; gap:8px; flex-wrap:wrap; flex:1 }
  .stat { flex:1; min-width:90px; text-align:center; font-size:11.5px; color:var(--mute) }
  .stat span { display:block; margin-top:3px; padding:3px 8px; border-radius:99px; background:var(--muted); color:var(--text); font:600 12px 'Vazirmatn FD',sans-serif }
  .stat span.on, .stat span.no { font-family:inherit }
  .stat span.on { background:color-mix(in srgb,var(--success) 14%,transparent); color:var(--success) } .stat span.no { background:color-mix(in srgb,var(--danger) 12%,transparent); color:var(--danger) }
  .sumrow { display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--line); font-size:13px }
  .sumrow span:first-child { color:var(--mute) } .sumrow span:last-child { text-align:end; min-width:0 }
  .total { display:flex; justify-content:space-between; align-items:baseline; margin:14px 0 }
  .total b { font:700 24px 'Vazirmatn FD',sans-serif }
  .btn.block { width:100%; padding:12px; font-size:14px }
  .btn:disabled { opacity:.5; cursor:not-allowed; filter:none }

  /* top bar (customer pages) */
  .topbar { position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:16px; min-height:60px; padding:8px 24px; background:color-mix(in srgb,var(--card) 85%,transparent); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); flex-wrap:wrap }
  .topbar .brand { display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:21px; color:var(--text); text-decoration:none }
  .topbar nav { display:flex; gap:4px }
  .topbar nav a { color:var(--mute); text-decoration:none; padding:6px 12px; border-radius:10px; font-weight:600; font-size:13.5px }
  .topbar nav a:hover { background:var(--muted); color:var(--text) } .topbar nav a.active { background:var(--muted); color:var(--text) }
  .topbar .grow { flex:1 }
  .topbar .bal { text-align:end; line-height:1.2 } .topbar .bal small { display:block; color:var(--mute); font-size:11px } .topbar .bal b { font-size:15px }
  .topbar .who { color:var(--mute); font-size:13px }
  .topbar .btn { text-decoration:none }
  .ghost { background:var(--card); color:var(--text); border:1px solid var(--line); border-radius:10px; padding:7px 12px; font:inherit; font-size:13px; font-weight:600; cursor:pointer }
  .ghost:hover { border-color:var(--primary) }
  @media (max-width:820px) { .topbar { padding:8px 12px } .topbar .who { display:none } }

  /* login */
  /* toasts */
  .toasts { position:fixed; top:72px; inset-inline-end:24px; z-index:50; display:grid; gap:10px; width:min(360px, calc(100vw - 24px)) }
  .notice { display:flex; align-items:flex-start; gap:10px; padding:12px 14px; font-size:13.5px; line-height:1.8; background:var(--card); border:1px solid var(--line); border-inline-start:4px solid var(--primary); border-radius:12px; box-shadow:0 1px 2px #2e3a2b14, 0 18px 40px #2e3a2b26; animation:toast-in .25s ease-out }
  .notice.err { border-inline-start-color:var(--danger) }
  .notice i { flex:none; width:22px; height:22px; display:grid; place-items:center; border-radius:50%; font-style:normal; font-weight:800; font-size:12px; color:#fff; background:var(--primary) }
  .notice.err i { background:var(--danger) }
  @keyframes toast-in { from { opacity:0; translate:0 -8px } }
  @media (max-width:820px) { .toasts { inset-inline:12px; width:auto } }
  @media (prefers-reduced-motion:reduce) { .notice { animation:none } }

  /* wallet */
  .topup { max-width:480px; margin-bottom:24px }
  .presets { display:flex; gap:8px; margin-bottom:16px } .presets button { flex:1 }
  h2.section { font-size:17px; font-weight:800; margin:0 0 12px }

  /* login: form fixed at the exact viewport center, landing scene painted behind it */
  .linkbtn { border:0; padding:0; background:none; color:var(--primary); font:inherit; font-weight:600; text-decoration:underline; cursor:pointer }
  .linkbtn:disabled { color:var(--mute); text-decoration:none; cursor:default }
  .hint.ok { color:var(--success) }
  .auth-stage { position:relative; z-index:1; min-height:100vh; min-height:100dvh; display:grid; place-items:center; padding:24px 16px }
  .auth { width:100%; max-width:400px; padding:28px; background:color-mix(in srgb,var(--card) 86%,transparent); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:0 1px 2px #2e3a2b0f, 0 30px 70px #2e3a2b26 }
  .auth-head { margin-bottom:18px } .auth-head b { display:block; font-size:20px; font-weight:800 } .auth-head small { color:var(--mute); font-size:12.5px }
  .captcha { min-height:65px; display:flex; justify-content:center }
  input.code { text-align:center; font-size:22px; font-weight:700; letter-spacing:.5em; padding-inline-start:calc(12px + .5em) }

  /* landing scene */
  body.landing::before { position:fixed; inset:0 0 auto; z-index:2 }
  .scene { position:fixed; inset:0; overflow:hidden; pointer-events:none; user-select:none }
  .scene::before { content:''; position:absolute; inset:0; background:radial-gradient(#5c765426 1px,transparent 1.5px) 0 0/22px 22px; -webkit-mask:radial-gradient(ellipse at center,#000 10%,transparent 70%); mask:radial-gradient(ellipse at center,#000 10%,transparent 70%) }
  .glow { position:absolute; border-radius:50%; filter:blur(70px); opacity:.55 }
  .g1 { width:520px; height:520px; background:var(--sage-pale); top:-140px; inset-inline-start:-120px }
  .g2 { width:460px; height:460px; background:color-mix(in srgb,var(--gold) 45%,var(--bg)); bottom:-160px; inset-inline-end:-100px }
  .g3 { width:380px; height:380px; background:color-mix(in srgb,var(--sage) 35%,var(--bg)); top:50%; left:50%; translate:-50% -50%; opacity:.35 }
  .rings { position:absolute; left:50%; top:50%; width:0; height:0 }
  .ring { position:absolute; width:var(--s); height:var(--s); left:calc(var(--s) / -2); top:calc(var(--s) / -2); border-radius:50%; border:1px solid color-mix(in srgb,var(--sage) 30%,transparent) }
  .ring:nth-child(2) { border-style:dashed; border-color:color-mix(in srgb,var(--gold) 45%,transparent) }
  .orbit { position:absolute; inset:0; animation:spin 60s linear infinite }
  .sat { position:absolute; left:-23px; top:-23px; width:46px; height:46px; display:grid; place-items:center; border-radius:14px; background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow); transform:rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a))) }
  .sat i, .fcard .ico i { width:20px; height:20px; background:var(--c); -webkit-mask:var(--m) center/contain no-repeat; mask:var(--m) center/contain no-repeat }
  .sat i { animation:spin 60s linear infinite reverse } /* cancels the orbit turn so logos stay upright */
  .scene.soft { z-index:-1 } /* same scene behind logged-in pages, blurred so content stays readable */
  .soft .rings { filter:blur(3px); opacity:.7 }
  body:has(.soft) .panel, body:has(.soft) .tablewrap { background:color-mix(in srgb,var(--card) 80%,transparent) } /* let the icons show faintly through */
  @keyframes spin { to { rotate:360deg } }

  .lp-top { position:absolute; top:22px; inset-inline:max(24px, calc(50% - 700px)); display:flex; align-items:center; justify-content:space-between; gap:12px }
  .lp-top .brand { display:inline-flex; align-items:center; gap:9px; font-weight:800; font-size:23px }
  .lp-pill { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:600; color:var(--primary); background:color-mix(in srgb,var(--card) 80%,transparent); border:1px solid var(--line); border-radius:99px; padding:5px 12px }
  .lp-pill b { width:7px; height:7px; border-radius:50%; background:var(--success); box-shadow:0 0 0 4px color-mix(in srgb,var(--success) 20%,transparent) }
  .lp-foot { position:absolute; bottom:18px; inset-inline:16px; text-align:center; font-size:12px; color:var(--mute); letter-spacing:.02em }

  .lp-hero, .lp-cards { position:absolute; top:50%; translate:0 -50% }
  .lp-hero { inset-inline-start:max(40px, calc(50% - 700px)); width:min(430px, calc(50% - 270px)) }
  .lp-hero h2 { font-size:44px; font-weight:800; line-height:1.35; margin:14px 0 12px; letter-spacing:-.01em }
  .lp-hero h2 em { font-style:normal; color:var(--primary); background:linear-gradient(transparent 62%,color-mix(in srgb,var(--gold) 45%,transparent) 62%) }
  .lp-hero p { color:var(--mute); font-size:15px; line-height:2; margin:0 0 18px }
  .lp-hero ul { list-style:none; margin:0; padding:0; display:grid; gap:10px }
  .lp-hero li { display:flex; align-items:center; gap:10px; font-size:13.5px; font-weight:600 }
  .lp-hero li::before { content:'✓'; flex:none; width:22px; height:22px; display:grid; place-items:center; border-radius:7px; font-size:12px; color:#fff; background:var(--primary) }

  .lp-cards { inset-inline-end:max(40px, calc(50% - 700px)); width:290px; display:grid; gap:16px }
  .fcard { background:color-mix(in srgb,var(--card) 92%,transparent); border:1px solid var(--line); border-radius:16px; box-shadow:0 1px 2px #2e3a2b0a, 0 18px 40px #2e3a2b1a; padding:14px 16px; animation:float 7s ease-in-out infinite }
  .fcard:nth-child(1) { rotate:-2deg; margin-inline-end:30px } .fcard:nth-child(2) { animation-delay:-2.3s; margin-inline-start:24px } .fcard:nth-child(3) { rotate:1.5deg; animation-delay:-4.6s; margin-inline-end:10px }
  .fcard small { display:block; color:var(--mute); font-size:11.5px } .fcard b { font-size:13.5px }
  .fcard .ico { width:34px; height:34px; border-radius:10px; flex:none; display:grid; place-items:center; background:color-mix(in srgb,var(--c) 13%,transparent) }
  .fc-head, .fc-foot, .toast { display:flex; align-items:center; gap:10px } .fc-foot { justify-content:space-between; margin-top:10px }
  .bar { height:7px; border-radius:99px; background:var(--muted); margin-top:12px; overflow:hidden }
  .bar span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--sage),var(--primary)) }
  .fcard .big { font-size:20px; font-weight:800 } .fcard .big em { font-style:normal; font-size:12px; color:var(--success); background:color-mix(in srgb,var(--success) 13%,transparent); border-radius:99px; padding:1px 8px; margin-inline-start:6px; vertical-align:middle }
  .bars { direction:ltr; display:flex; align-items:flex-end; gap:7px; height:64px; margin-top:12px }
  .bars span { flex:1; height:var(--h); border-radius:6px 6px 3px 3px; background:var(--sage-pale) } .bars span:last-child { background:var(--gold) }
  .toast > div { flex:1 } .tick { width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:13px; font-weight:800; color:#fff; background:var(--success) }
  @keyframes float { 50% { translate:0 -8px } }

  @media (max-width:1199px) { .lp-hero, .lp-cards { display:none } }
  @media (max-width:820px) { .rings { scale:.62 } .lp-pill { display:none } .lp-foot { display:none } }
  /* the orbit is slow and non-flashing, so it keeps turning at a calmer pace when Windows animations are off */
  @media (prefers-reduced-motion:reduce) { .fcard { animation:none } .orbit, .sat i { animation-duration:180s } }
  .tabs { display:flex; gap:4px; background:var(--muted); padding:4px; border-radius:12px; margin-bottom:18px }
  .tabs button { flex:1; border:0; background:none; color:var(--mute); font:inherit; font-weight:700; padding:8px; border-radius:9px; cursor:pointer }
  .tabs button[aria-selected="true"] { background:var(--primary); color:#fff }

  /* tables (orders) */
  .tablewrap { background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); overflow:auto }
  .table { width:100%; border-collapse:collapse; font-size:13px }
  .table th, .table td { padding:10px; text-align:start; border-bottom:1px solid var(--line); vertical-align:middle }
  .table th { color:var(--mute); font-weight:600; font-size:11.5px; white-space:nowrap; background:var(--card) }
  .table tr:last-child td { border-bottom:0 }
  .table td.link { max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
  .table input { min-width:0; width:110px; padding:6px 8px }
  .status { display:inline-block; white-space:nowrap; font-size:11.5px; font-weight:600; padding:2px 10px; border-radius:99px }
  .status.ok { background:color-mix(in srgb,var(--success) 14%,transparent); color:var(--success) }
  .status.bad { background:color-mix(in srgb,var(--danger) 12%,transparent); color:var(--danger) }
  .status.warn { background:color-mix(in srgb,var(--gold) 22%,transparent); color:var(--gold-text) }
  .status.wait { background:var(--muted); color:var(--mute) }
  .ok-text { color:var(--success) }
  .admin-tabs { max-width:640px }
  .price { border-color:color-mix(in srgb,var(--gold) 45%,var(--line)); background:color-mix(in srgb,var(--gold) 9%,var(--card)) }
  .price b, .total b, .topbar .bal b { color:var(--gold-text) }
  .topbar { background:color-mix(in srgb,var(--card) 88%,transparent) }
  .ico { background:color-mix(in srgb,var(--sage-pale) 50%,transparent) }
  .stat span.fa { font-family:inherit }