/* ArtReview — استایلِ صفحاتِ عمومی. توکن‌ها از docs/DESIGN-SYSTEM.md */

:root{
  color-scheme:light;
  --stage-w:1040px;
  /* توکن‌ها عیناً از مرجعِ public/final/user.html — کاغذِ گرم + تراکوتا */
  --paper:#faf6f2; --surface:#ffffff; --sunk:#f2eae3; --raised:#fffdfb;
  --ink:#2b2320; --ink-soft:#4c4039; --muted:#6f625a; --faint:#9a8a80;
  --line:#ebe0d6; --line-2:#dccbbd; --frame:#e6dcd2;
  --accent:#e2553a; --accent-deep:#c2402a; --accent-soft:#fdeee9; --accent-ink:#ffffff;
  --brand-warm:#c2402a;
  --shadow:0 1px 2px rgba(43,35,32,.05),0 6px 18px rgba(43,35,32,.07);
  --shadow-lg:0 2px 6px rgba(43,35,32,.07),0 18px 40px rgba(43,35,32,.12);
  --r-xl:26px; --r-lg:18px; --r-md:14px; --r-sm:12px; --r-pill:999px;
  /* هِیرلاین: مرزِ نازک‌تر از 1px در نمایشگرِ رتینا */
  --hair:color-mix(in srgb, var(--line-2) 62%, transparent);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  /* min-height لازم است وگرنه در صفحه‌های کوتاه بکگراند از پایین خالی می‌ماند */
  margin:0; min-height:100vh; background:var(--paper); color:var(--ink); direction:rtl;
  font-family:'Vazirmatn','Vazir',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:15px; line-height:1.75; font-weight:500; -webkit-font-smoothing:antialiased;
}
a{color:var(--accent-deep); text-decoration:none}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.lat{font-family:'Archivo','Vazirmatn',sans-serif; letter-spacing:.14em; font-weight:700; text-transform:uppercase; direction:ltr; display:inline-block}
.num{font-variant-numeric:tabular-nums}

h1,h2,h3{margin:0; font-weight:700; letter-spacing:-.015em; text-wrap:balance; line-height:1.3}
h1{font-size:24px}
h2{font-size:18px}
p{margin:0}

/* چیدمان */
.page{min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:32px 20px 48px; gap:20px}
.wrap{width:100%; max-width:480px; display:flex; flex-direction:column; gap:22px}
.stack{display:flex; flex-direction:column; gap:16px}
.between{display:flex; align-items:center; justify-content:space-between; gap:12px}
.wrap > header.between{padding-bottom:18px; border-bottom:1px solid var(--hair)}

/* سربرگ */
.brand{display:flex; align-items:center; gap:10px}
.mark{
  width:40px; height:40px; border-radius:var(--r-md); display:grid; place-items:center;
  background:var(--accent); color:var(--accent-ink); font-weight:800; font-size:15px;
}
/* نشانِ دایره‌ای — سریفِ لوکس، دو سطری. letter-spacing فقط روی متنِ لاتین است. */
.emblem{
  width:72px; height:72px; border-radius:50%; display:grid; place-content:center;
  gap:1px; text-align:center; direction:ltr; unicode-bidi:isolate;
  font-family:Archivo,system-ui,sans-serif; color:var(--ink);
  border:1px solid var(--line-2);
  background:color-mix(in srgb, var(--surface) calc(var(--glass-alpha) + 10%), transparent);
  box-shadow:var(--shadow);
}
.emblem-a{font-size:19px; font-weight:600; line-height:1}
.emblem-b{font-size:12px; font-weight:500; letter-spacing:.16em; line-height:1; text-indent:.16em}

/* برندِ هدر: لوگو/نشان + نامِ محصول کنارِ هم (DESIGN-SYSTEM §۱۰.۱–۱۰.۳) */
.brand-logo{height:46px; width:auto; object-fit:contain; display:block}
.brand-tag{display:flex; flex-direction:column; gap:2px}
.brand-tag-line{
  font-size:clamp(13px, 2vw, 16px); font-weight:500; line-height:1.4;
  color:var(--muted); white-space:nowrap; letter-spacing:-.01em;
}
.brand-tag-line:first-child{color:var(--ink); font-weight:600}

.kicker{color:var(--accent); font-size:12.5px; font-weight:700}
.meta{font-size:13.5px; color:var(--muted)}
.tiny{font-size:12.5px; color:var(--muted)}
.sect-title{font-size:19px; font-weight:700}
.grow{flex:1; min-width:0}
.row{display:flex; align-items:center; gap:10px}
.pad{padding:18px 20px}
.hair{height:1px; background:var(--line); margin:4px 0}
.lede{color:var(--ink-soft); font-size:15.5px}
.lead{font-size:14.5px; color:var(--ink-soft); line-height:1.85}

/* کارت */
.card{
  background:var(--surface); border:0; border-radius:var(--r-lg);
  padding:14px; box-shadow:var(--shadow);
  transition:transform .18s, box-shadow .18s;
}
.card:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg)}
.card.on{box-shadow:var(--shadow), inset 0 0 0 2px var(--accent)}
/* کارتِ فرم‌محور (ورود/همکاری) تنفسِ بیشتری لازم دارد */
form.card, .wrap > .card{padding:24px 22px}
form.card:hover, .wrap > .card:hover{transform:none; box-shadow:var(--shadow)}

/* فیلد */
.field{display:flex; flex-direction:column; gap:6px}
.label{
  font-size:13px; font-weight:600; color:var(--ink-soft);
  letter-spacing:0; text-transform:none;
}
/* ورودی — سبکِ MUI filled / iOS: زمینهٔ فرورفتهٔ ملایم، گوشهٔ گرد،
   و در فوکوس حلقهٔ نازکِ رنگی به‌جای تغییرِ ضخامتِ مرز (تا چیدمان نپرد). */
.input{
  width:100%; min-height:48px; padding:12px 14px; border-radius:var(--r-md);
  border:0; background:var(--sunk); color:var(--ink);
  font:inherit; font-size:15.5px; font-weight:500;
  transition:background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
  -webkit-appearance:none; appearance:none;
}
textarea.input{
  min-height:96px; padding:12px 14px; line-height:1.8;
  resize:vertical; font-size:15px; font-weight:400;
}

.input::placeholder{color:var(--faint); font-weight:400}
.input:focus{
  outline:0; box-shadow:inset 0 0 0 2px var(--accent);
}
.input.bad,.input[aria-invalid="true"]{
  box-shadow:inset 0 0 0 2px var(--accent-deep);
}
.help{font-size:12.5px; color:var(--muted); line-height:1.65}
.err-text{font-size:12px; color:var(--accent-deep); font-weight:500}

/* تیکِ همکاری */
.check{
  display:flex; align-items:center; gap:10px; cursor:pointer;
  padding:14px 0 2px; border:0; border-top:1px solid var(--hair);
  background:none; font-size:14px; color:var(--ink-soft);
  transition:color 160ms ease;
}
.check:hover{color:var(--ink)}
.check input{width:16px; height:16px; margin:0; accent-color:var(--accent); flex:none; cursor:pointer}
.check b{font-size:14px; font-weight:500; display:block}
.check .help{margin-top:2px}
.check:has(input:checked){color:var(--ink)}

/* بخشِ بازشوندهٔ همکاری */
.collab{display:flex; flex-direction:column; gap:18px; margin-top:14px; padding-top:18px; border-top:1px solid var(--hair)}
.collab[hidden]{display:none}
[data-menusheet]{display:flex}
[data-menusheet][hidden]{display:none}

/* دکمه */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:0 16px; border-radius:var(--r-pill); border:0;
  background:var(--sunk); color:var(--ink);
  font:inherit; font-size:14px; font-weight:700; letter-spacing:0;
  cursor:pointer; text-decoration:none;
  transition:transform .12s;
}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--ink); color:var(--paper)}
.btn.soft{background:var(--accent-soft); color:var(--accent-deep)}
.btn.on{background:var(--accent); color:var(--accent-ink)}
.btn.ghost{background:var(--surface); border:1px solid var(--line-2); color:var(--ink)}
.btn.sq{width:44px; height:44px; padding:0}
.btn.full,.btn.block{width:100%}

/* پیام */
.note{
  border-radius:0; padding:0 0 0 12px; font-size:12.5px; color:var(--faint);
  border:0; border-inline-start:2px solid var(--line-2); background:none;
}
.note.ok{border-inline-start-color:var(--accent); color:var(--ink-soft)}
.note.bad{border-inline-start-color:var(--accent-deep); color:var(--ink-soft)}
.note b{font-weight:700}

/* کارتِ موفقیت */
.done{text-align:center; display:flex; flex-direction:column; gap:14px; align-items:center}
.done .seal{
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:none; border:1px solid var(--accent);
  color:var(--accent-deep); font-size:19px; line-height:1;
}
.done .seal svg{width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.pos{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 8px; padding:14px 4px 0;
  border-radius:0; background:none;
  border:0; border-top:1px solid var(--hair);
  font-size:13.5px; color:var(--muted);
}
.pos .num,.pos .n{
  font-size:34px; font-weight:600; line-height:1;
  color:var(--accent-deep); letter-spacing:-.03em;
}
.pos .t{font-size:13.5px; color:var(--muted)}

.foot{text-align:center; color:var(--faint); font-size:12.5px}

/* حرکت */
@keyframes rise{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}
.enter{animation:rise 300ms cubic-bezier(.2,.7,.3,1) both}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}

/* عنوانِ بخش و نشانگرِ گام — بخشِ «یک معرفی کوتاه» */
.sect-title{
  position:relative; font-size:14px; font-weight:600; color:var(--ink);
  padding-inline-start:11px; letter-spacing:-.01em;
}
/* لنگرِ عمودیِ نازک — نشانهٔ بخش، جایگزینِ تیترِ درشت */
.sect-title::before{
  content:""; position:absolute; inset-inline-start:0; top:.32em; bottom:.32em;
  width:2px; border-radius:1px; background:var(--accent);
}
.step{font-size:11px; letter-spacing:.14em; color:var(--muted)}
/* فاصلهٔ نفس‌کشیدنِ دکمهٔ ارسال از آخرین فیلد */
.card > .btn.block{margin-top:8px}
.tiny{font-size:11.5px}
.stack.g6{gap:6px}

/* ───────── بکگراندِ موزاییکِ جامعهٔ هنری + سربرگِ بزرگ ───────── */

/* تصویرِ موزاییک از /admin/site-media ساخته می‌شود. کلاسِ body از layouts/site.blade.php می‌آید:
   has-tile ⇒ تصویر هست، no-tile ⇒ گالری خالی است و هیچ درخواستِ ۴۰۴ی فرستاده نمی‌شود.
   تصاویر باید واضح بمانند — هیچ فیلترِ محو یا لایهٔ سفیدی روی آن‌ها گذاشته نمی‌شود. */
body.has-tile{
  /* لایهٔ رنگ/گرادیانت همیشه بالای تصویر می‌نشیند؛ وقتی خاموش است شفافِ کامل است.
     نشانیِ تصویر از --tile می‌آید که layouts/site.blade.php با mtime مهرش می‌کند. */
  background-image:var(--bg-overlay, linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0))), var(--tile, url("/assets/site/tile.jpg"));
  background-size:auto, var(--bg-size, cover);
  background-position:center, var(--bg-pos, top left);
  background-repeat:no-repeat, var(--bg-repeat, repeat);
  /* fixed + repeat ⇒ پوششِ ۱۰۰٪؛ با scroll، بکگراند در صفحهٔ بلند کشیده و کناره خالی می‌شد */
  background-attachment:fixed;
}

/* ستونِ سربرگ از ستونِ فرم پهن‌تر است */
.page > .stage > .wrap{max-width:480px}
.wrap > header,
.wrap > .card,
.wrap > .foot{width:100%; max-width:480px; margin-inline:auto}

/* صحنه: شعار در چپ (روی تصویر)، کادرِ فرم در راست */
.stage{
  width:100%; max-width:var(--stage-w); display:flex; flex-direction:row;
  align-items:center; justify-content:center; gap:clamp(24px, 5vw, 72px);
}
.stage > .wrap{flex:0 0 auto}

/* شعارِ ادیتوریالِ راست‌چین — درشت، کم‌رنگ، با کلماتِ کلیدیِ پررنگ */
.hero-lede{
  flex:0 1 auto; width:auto; max-width:42ch;
  text-align:right; direction:rtl;
  font-size:clamp(16px, 1.7vw, 20px); line-height:1.85; font-weight:400;
  color:var(--ink-soft);
  /* روی تصویر است نه روی شیشه — سایه خوانایی را تضمین می‌کند */
  text-shadow:0 1px 14px color-mix(in srgb, var(--paper) 82%, transparent);
}
.lede-row{display:block}
/* بندهای توضیحی: ریزتر و خنثی‌تر از نوارِ عنوان تا سلسله‌مراتب دیده شود */
.lede-body{
  font-size:.95em; line-height:2.05; font-weight:400;
  color:var(--muted); letter-spacing:0;
}
.lede-body + .lede-body{margin-top:1em}
/* تأکید فقط با وزن و رنگ، نه با درشت‌کردن — تضادِ ظریف به‌جای بولدِ سنگین */
.lede-hi{font-weight:600; color:var(--ink)}
/* نوارِ عنوان: بالای هر دو ستون، تمام‌عرض — لوگو و کنارش نام و توضیحِ کوتاه.
   در RTL با row-reverse لوگو اولْ سمتِ راست می‌نشیند. */
.lede-head{
  /* هم‌عرضِ صحنه و هم‌تراز با لبهٔ راستِ متنِ زیرین */
  width:100%; max-width:var(--stage-w); margin-inline:auto;
  box-sizing:border-box;
  display:flex; flex-direction:row-reverse; justify-content:flex-end; align-items:center;
  gap:20px; direction:rtl; text-align:right;
  font-size:clamp(18px, 2.1vw, 25px);
  line-height:1.3; font-weight:600; color:var(--ink);
  letter-spacing:-.02em;
  text-shadow:0 1px 14px color-mix(in srgb, var(--paper) 82%, transparent);
}
.lede-head .lede-hi{font-size:2.1em; font-weight:800; color:var(--ink); letter-spacing:-.03em}
.lede-logo{height:134px; width:auto; object-fit:contain; display:block; flex:0 0 auto}
span.lede-logo{height:auto}
.lede-logo .emblem-a{font-size:55px}
.lede-logo .emblem-b{font-size:32px}

/* دکمهٔ تم — گوشهٔ صفحه، بیرون از کادرِ فرم */
.theme-fab{
  position:fixed; top:16px; left:16px; right:auto; z-index:40;
  flex:0 0 auto;
  background:var(--surface); border:1px solid var(--line);
  box-shadow:0 6px 18px rgba(0,0,0,.10);
}
/* ستونِ متنیِ عنوان: نام و توضیحِ کوتاه، کنارِ لوگوی بزرگ */
.lede-headtext{display:flex; flex-direction:column; gap:.35em; align-items:flex-start}
/* توضیحِ کوتاه: هم‌اندازهٔ متنِ پایهٔ hero، نه ۱.۵ برابرِ عنوان */
.lede-sub{
  display:block; font-size:1.02em; line-height:1.6;
  font-weight:600; letter-spacing:0; color:var(--brand-warm);
}

/* جملهٔ دعوت — داخلِ کادر، بالای فرم، راست‌چین */
.hero-note{
  max-width:36ch; margin-inline-end:auto;
  text-align:right; direction:rtl;
  font-size:14px; line-height:1.9; color:var(--muted);
  padding-bottom:18px; border-bottom:1px solid var(--hair);
}

@media (max-width:960px){
  .stage{flex-direction:column; gap:22px}
  .hero-lede{max-width:480px; width:100%}
  /* نوارِ عنوان روی موبایل: لوگوی کوچک‌تر، متن زیرِ آن نه کنارش اگر جا نبود */
  .lede-head{max-width:480px; gap:14px; flex-wrap:nowrap; justify-content:flex-end; text-align:right}
  .lede-headtext{align-items:flex-start}
  .lede-logo{height:78px}
  .lede-logo .emblem-a{font-size:32px}
  .lede-logo .emblem-b{font-size:19px}
}

.hero .kicker{
  font-size:13px; letter-spacing:.02em; color:var(--muted);
  padding:6px 16px; border-radius:var(--r-pill);
  border:1px solid var(--line-2);
  background:var(--surface);
}
.hero-title{
  font-size:clamp(34px, 7vw, 62px); line-height:1.25; font-weight:800;
  color:var(--ink); max-width:12ch;
  text-shadow:0 1px 0 color-mix(in srgb, var(--paper) 80%, transparent);
}
.hero-sub{
  font-size:16px; line-height:1.85; color:var(--ink-soft); max-width:46ch;
  padding:12px 18px; border-radius:var(--r-lg);
  background:var(--surface);
}

/* کارتِ فرم روی تصویر باید کاملاً مات بماند تا خوانا باشد */
.card{background:var(--surface)}

@media (max-width:560px){
  .hero-sub{font-size:14.5px}
  .hero-note{font-size:14.5px}
}

/* ───────── وارونه‌سازیِ بکگراند ─────────
   فقط لایهٔ تصویر وارونه می‌شود، نه محتوا. تصویر به یک لایهٔ ::before منتقل
   می‌شود تا filter روی متنِ صفحه اثر نگذارد. این قوانین عمداً بعد از قوانینِ
   پایه آمده‌اند تا با specificityِ بالاتر بر آن‌ها غلبه کنند. */
body.bg-invert.has-tile{
  background-image:var(--bg-overlay, linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0)));
  background-size:auto;
  background-position:center;
  background-repeat:no-repeat;
  background-attachment:fixed;
}

body.bg-invert.has-tile::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background-image:var(--tile, url("/assets/site/tile.jpg"));
  background-size:var(--bg-size, cover);
  background-position:var(--bg-pos, top left);
  background-repeat:var(--bg-repeat, repeat);
  filter:invert(1);
}

/* ───────── کادرِ شیشه‌ای (سبکِ اپل) + افکتِ حرکتی ─────────
   کلِ ستونِ محتوا داخلِ یک شیشهٔ واحد می‌نشیند، نه هر بخش جدا. توکنِ رنگ
   از --surface می‌آید تا در لایت و دارک خودش هماهنگ شود. عمداً انتهای فایل
   آمده تا بر قوانینِ پایه با specificityِ برابر غلبه کند. */
:root{
  /* --glass-alpha و --glass-blur را ادمین از فرمِ ظاهرِ بکگراند تعیین می‌کند و
     layout روی body تزریقشان می‌کند. مقدارِ اینجا فقط fallbackِ بدونِ تزریق است.
     بقیهٔ سطوح نسبت به همان یک عدد ساخته می‌شوند تا با یک اسلایدر هماهنگ بمانند. */
  --glass-alpha:42%;
  --glass-blur:22px;
  --glass:color-mix(in srgb, var(--surface) var(--glass-alpha), transparent);
  --glass-line:color-mix(in srgb, var(--surface) calc(var(--glass-alpha) + 16%), transparent);
  --glass-glow:color-mix(in srgb, var(--surface) calc(var(--glass-alpha) - 18%), transparent);
}

.page .wrap{
  position:relative;
  padding:26px 24px 30px;
  border-radius:var(--r-xl);
  background:var(--glass);
  border:1px solid var(--glass-line);
  box-shadow:var(--shadow-lg), inset 0 1px 0 var(--glass-glow);
  /* -webkit- برای سافاری لازم است؛ بدونِ آن شیشه در iOS ساده می‌شود نه خراب. */
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(180%);
  backdrop-filter:blur(var(--glass-blur)) saturate(180%);
  overflow:hidden;
}

/* درخششِ نرمِ بالای شیشه — همان لبهٔ روشنِ دیزاینِ اپل */
.page .wrap::before{
  content:"";
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(160deg, var(--glass-glow), transparent 46%);
}
.page .wrap > *{position:relative; z-index:1}

/* داخلِ شیشه، کارت و زیرعنوان دیگر جعبهٔ مات نمی‌خواهند — وگرنه شیشه دیده نمی‌شود */
.page .wrap > .card{
  background:color-mix(in srgb, var(--surface) calc(var(--glass-alpha) - 7%), transparent);
  border-color:var(--glass-line);
  box-shadow:none;
}
/* داخلِ شیشه کارت دیگر پدینگِ افقیِ اضافه نمی‌خواهد — شیشه خودش قاب است */
.page .wrap > .card{padding:22px 20px}
.page .wrap .hero-sub,
.page .wrap .hero .kicker{
  background:color-mix(in srgb, var(--surface) calc(var(--glass-alpha) - 20%), transparent);
  border:1px solid var(--glass-line);
}

/* ورودی روی شیشه: پس‌زمینهٔ بسیار کم‌رنگ تا ناحیهٔ تایپ پیدا باشد،
   ولی همچنان خط‌زیرین است نه جعبه. */
.page .wrap .input{
  background:color-mix(in srgb, var(--sunk) calc(var(--glass-alpha) + 6%), transparent);
  border-color:color-mix(in srgb, var(--line-2) 70%, transparent);
}

@media (max-width:560px){
  .page .wrap{padding:18px 14px 22px; border-radius:var(--r-lg)}
}

/* ── افکتِ حرکتی ── */

/* شیشه با نرمی بالا می‌آید و بلور جا می‌افتد */
@keyframes glass-in{
  from{opacity:0; transform:translateY(18px) scale(.985)}
  to{opacity:1; transform:none}
}
.page .wrap.enter{animation:glass-in 620ms cubic-bezier(.2,.8,.25,1) both}

/* بخش‌های داخلی پشتِ‌سرِ هم می‌آیند — پلکانِ کوتاه، نه نمایشِ طولانی */
@keyframes lift{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
.page .wrap.enter > *{animation:lift 520ms cubic-bezier(.2,.8,.25,1) both}
.page .wrap.enter > *:nth-child(1){animation-delay:90ms}
.page .wrap.enter > *:nth-child(2){animation-delay:180ms}
.page .wrap.enter > *:nth-child(3){animation-delay:270ms}
.page .wrap.enter > *:nth-child(4){animation-delay:360ms}

/* واکنشِ زنده: شیشه زیرِ اشاره‌گر کمی روشن‌تر می‌شود */
.page .wrap{transition:box-shadow 450ms ease, border-color 450ms ease}
@media (hover:hover){
  .page .wrap:hover{
    border-color:color-mix(in srgb, var(--surface) calc(var(--glass-alpha) + 30%), transparent);
    box-shadow:var(--shadow-lg), inset 0 1px 0 color-mix(in srgb, var(--surface) 35%, transparent);
  }
}

/* دکمه و ورودی حرکتِ ریزِ لمسی می‌گیرند */
.btn{transition:transform 160ms cubic-bezier(.2,.8,.25,1), box-shadow 160ms ease, background-color 160ms ease}
@media (hover:hover){ .btn:hover{transform:translateY(-1px)} }
.btn:active{transform:translateY(0) scale(.985)}

/* مهرِ «ثبت شد» یک تپشِ کوتاه می‌زند */
@keyframes seal-pop{
  0%{opacity:0; transform:scale(.6)}
  60%{opacity:1; transform:scale(1.08)}
  100%{opacity:1; transform:scale(1)}
}
.done .seal{animation:seal-pop 520ms cubic-bezier(.2,.8,.25,1) both; animation-delay:220ms}

/* قاعدهٔ دسترس‌پذیری بالای فایل (prefers-reduced-motion) همهٔ این‌ها را خاموش می‌کند،
   ولی transform های باقی‌مانده باید صریح صفر شوند تا چیزی جابه‌جا نماند. */
@media (prefers-reduced-motion:reduce){
  .page .wrap.enter,
  .page .wrap.enter > *,
  .done .seal{animation:none; opacity:1; transform:none}
  .btn:hover,.btn:active{transform:none}
}

/* اگر مرورگر backdrop-filter نداشت، شیشه بدونِ بلور یعنی متنِ ناخوانا روی عکس.
   در آن حالت پس‌زمینه مات‌تر می‌شود تا خوانایی حفظ شود. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .page .wrap{background:color-mix(in srgb, var(--surface) 93%, transparent)}
  .page .wrap > .card{background:var(--surface)}
  .page .wrap .hero-sub,
  .page .wrap .hero .kicker{background:var(--surface)}
  .page .wrap .input{background:color-mix(in srgb, var(--sunk) 88%, transparent)}
}

/* موبایل: دکمهٔ تم از حالتِ شناور خارج و بالای صفحه می‌نشیند تا روی هیچ کادری نیفتد */
@media (max-width:640px){
  .page{padding:16px 14px 36px; gap:16px}
  .theme-fab{top:12px; left:12px; right:auto}
  .lede-head{gap:10px}
  .lede-logo{height:62px}
  .lede-logo .emblem-a{font-size:25px}
  .lede-logo .emblem-b{font-size:15px}
  .lede-head{font-size:19px}
  .lede-head .lede-hi{font-size:1.75em}
  .hero-lede{font-size:16px}
}

/* ===== کامپوننت‌های مرجع — عیناً از public/final/user.html ===== */
.xs{display:flex; gap:10px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px}
.xs::-webkit-scrollbar{display:none}

.chip{min-height:38px; display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line-2); background:var(--surface); color:var(--ink-soft); border-radius:var(--r-pill); padding:0 13px; font-size:12.5px; font-weight:600; cursor:pointer; white-space:nowrap; text-decoration:none}
.chip.on{background:var(--accent-soft); border-color:var(--accent); color:var(--accent-deep)}
.chip.dark{background:var(--ink); color:var(--paper); border-color:var(--ink)}

.icon{width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto}

.poster{aspect-ratio:1/1.35; border-radius:var(--r-md); overflow:hidden; position:relative; background:var(--sunk)}
.poster.fill{width:100%}
.poster img{width:100%; height:100%; object-fit:cover; display:block}
.poster .pt{position:absolute; inset:0; display:flex; align-items:flex-end; padding:10px; color:#fff; font-size:12.5px; font-weight:700; text-shadow:0 1px 3px rgba(0,0,0,.4); background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.42))}

.av{width:38px; height:38px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center; color:#fff; font-size:13px; font-weight:700; overflow:hidden}
.av img{width:100%; height:100%; object-fit:cover}
.av-ring{padding:2px; border-radius:50%; background:var(--line-2); display:inline-block}
.ring-live{position:relative; padding:2.5px; border-radius:50%; display:inline-block}

.badge{display:inline-flex; align-items:center; gap:4px; border-radius:var(--r-pill); padding:3px 9px; font-size:11.5px; font-weight:700; background:var(--sunk); color:var(--ink-soft)}
.badge-live{background:var(--accent); color:var(--accent-ink)}
.badge-gone{background:var(--sunk); color:var(--faint)}
.badge-top{background:var(--accent-soft); color:var(--accent-deep)}
.badge-went{background:#e6f0e9; color:#3b6b52}
.badge-skip{background:var(--sunk); color:var(--muted)}

.kv{display:flex; align-items:baseline; gap:6px; font-size:13.5px}
.kv .dots{flex:1; border-bottom:1.5px dotted var(--line-2); transform:translateY(-4px)}
.kv .k{color:var(--muted)}
.kv .v{font-weight:600}

.day-sep{display:flex; align-items:center; gap:10px; margin:6px 0}
.day-sep .lbl{font-size:12.5px; font-weight:700; color:var(--accent)}
.day-sep .ln{flex:1; height:1px; background:var(--line)}

.steps{display:flex; flex-direction:column; gap:0}
.step{display:flex; gap:12px; padding:12px 0; position:relative}
.step .no{width:28px; height:28px; border-radius:50%; background:var(--sunk); display:grid; place-items:center; font-size:12.5px; font-weight:700; flex:0 0 auto}
.step:not(:last-child)::after{content:""; position:absolute; inset-inline-start:13.5px; top:40px; bottom:0; width:1.5px; background:var(--line)}
.walk{font-size:12px; color:var(--faint); padding-inline-start:40px; padding-bottom:6px}

.cmt{display:flex; gap:10px; padding:12px 0}
.like{display:inline-flex; align-items:center; gap:4px; border:0; background:transparent; color:var(--muted); font-size:12.5px; font-weight:600; cursor:pointer; min-height:32px}
.like.on{color:var(--accent)}
.ask{background:var(--sunk); border-radius:var(--r-md); padding:12px}
.seg{display:flex; gap:8px}
.seg .btn{flex:1}

.map{height:170px; border-radius:var(--r-md); overflow:hidden; position:relative; background:var(--sunk)}
.map-tiles{position:absolute; inset:0; opacity:.55; background-image:linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px); background-size:34px 34px}
.pinmark{position:absolute; width:14px; height:14px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:var(--accent); box-shadow:0 1px 3px rgba(0,0,0,.3)}

.url-line{display:flex; align-items:center; gap:2px; font-family:'Archivo',sans-serif; direction:ltr; font-size:12.5px}
.url-line .host{color:var(--faint)}
.url-line .me{font-weight:700; color:var(--ink)}
.linkrow{display:flex; align-items:center; gap:8px; background:var(--sunk); border-radius:var(--r-pill); padding:7px 13px; font-size:12px; font-weight:600; color:var(--ink-soft)}

.prof-top{background:linear-gradient(160deg,#3b302b,#211a17); color:#faf6f2; padding:20px; border-radius:0 0 var(--r-xl) var(--r-xl)}
.prof-tile{flex:1; background:rgba(255,255,255,.14); border-radius:var(--r-md); padding:11px 13px}
.prof-tile .v{font-family:'Archivo',sans-serif; font-size:20px; font-weight:700}
.prof-tile .l{font-size:12px; opacity:.82}
.verified{width:17px; height:17px; border-radius:50%; background:var(--accent); color:#fff; font-size:10px; font-weight:800; display:grid; place-items:center}

.topbar{display:flex; align-items:center; gap:10px; padding:14px 20px 4px}
.topbar h1{font-size:20px}
.navbar{position:fixed; inset-inline:0; bottom:0; display:flex; background:var(--surface); border-top:1px solid var(--line); padding:6px 8px calc(6px + env(safe-area-inset-bottom)); z-index:40; max-width:430px; margin-inline:auto}
.navbar a,.navbar button{flex:1; min-height:56px; border:0; background:transparent; border-radius:var(--r-md); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; font-size:11px; font-weight:600; color:var(--muted); cursor:pointer; position:relative; text-decoration:none}
.navbar form{flex:1; display:flex; margin:0}
.navbar form button{width:100%}
.navbar a.on,.navbar button.on{color:var(--accent); background:var(--accent-soft)}
.nbadge{position:absolute; top:8px; inset-inline-start:calc(50% + 6px); background:var(--accent); color:var(--accent-ink); font-family:'Archivo',sans-serif; font-size:10.5px; font-weight:700; border-radius:var(--r-pill); padding:0 5px}

.bar-track{height:7px; border-radius:var(--r-pill); background:var(--sunk); overflow:hidden}
.bar-fill{height:100%; background:var(--accent); border-radius:var(--r-pill); animation:fill .6s ease}

@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@keyframes fill{from{width:0}}
.enter{animation:rise .3s ease both}
.stag>*{animation:rise .3s ease both}
.stag>*:nth-child(1){animation-delay:.02s}
.stag>*:nth-child(2){animation-delay:.06s}
.stag>*:nth-child(3){animation-delay:.1s}
.stag>*:nth-child(4){animation-delay:.14s}
.stag>*:nth-child(5){animation-delay:.18s}
.stag>*:nth-child(6){animation-delay:.22s}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important; transition:none!important}}

/* artreview30 — هم‌ترازی با ui-user-screens: نوارِ پایین، Toast، پروفایل */
.navbar{background:var(--paper); border-top:1px solid var(--line); padding:8px 10px calc(12px + env(safe-area-inset-bottom)); gap:4px}
.navbar a,.navbar button{gap:4px; font-size:11.5px; font-weight:500}
.navbar a.on,.navbar button.on{color:var(--accent-deep); background:var(--accent-soft); font-weight:700}
.navbar .icon{width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.toast{position:fixed; inset-inline:18px; bottom:calc(96px + env(safe-area-inset-bottom)); display:flex; justify-content:center; z-index:60; pointer-events:none; transition:opacity .3s}
.toast > div{background:var(--ink); color:var(--paper); border-radius:var(--r-pill); padding:12px 20px; font-size:13px; font-weight:600; box-shadow:0 8px 24px rgba(43,35,32,.28); text-align:center}
.toast.hide{opacity:0}
.prof-hero{display:flex; align-items:center; gap:14px; background:linear-gradient(135deg,var(--accent),var(--accent-deep)); color:#fff; border-radius:var(--r-lg); padding:18px; margin:12px 0}
.prof-hero .av{border-radius:50%; padding:3px; background:rgba(255,255,255,.3); line-height:0; flex:0 0 auto}
.prof-hero .av span{width:66px; height:66px; border-radius:50%; background:var(--sunk); color:var(--accent-deep); display:grid; place-items:center; font-size:26px; font-weight:800}
.prof-hero h1{font-size:20px; margin:0; color:#fff}
.prof-hero .handle{font-family:Archivo,sans-serif; font-size:12.5px; opacity:.85; margin-top:4px}
.prof-stats{display:flex; gap:8px; margin-top:10px}
.prof-stats div{flex:1; background:rgba(255,255,255,.14); border-radius:var(--r-md); padding:9px 11px; font-size:11.5px}
.prof-stats b{display:block; font-family:Archivo,sans-serif; font-size:17px}

/* T616 — پاپ‌آپِ نصبِ PWA */
.pwa-popup{position:fixed; inset:0; z-index:9999; display:flex; align-items:flex-end; justify-content:center; background:rgba(43,35,32,.45); padding:16px}
.pwa-popup[hidden]{display:none}
.pwa-popup__box{position:relative; width:100%; max-width:420px; background:#f2eae3; color:#2b2320; border-radius:16px; padding:18px 16px; box-shadow:0 8px 28px rgba(0,0,0,.22)}
.pwa-popup__close{position:absolute; top:8px; left:10px; background:none; border:0; font-size:20px; line-height:1; color:#2b2320; cursor:pointer; min-width:44px; min-height:44px}
.pwa-popup__text{margin:0 0 12px; font-size:14px; line-height:1.9; padding-inline-end:28px}
.pwa-popup__actions{display:flex; gap:10px}
.pwa-popup__install,.pwa-popup__later{flex:1; min-height:44px; border-radius:10px; font-size:14px; cursor:pointer; border:1px solid #2b2320}
.pwa-popup__install{background:#c2402a; color:#f4f2ef; border-color:#c2402a}
.pwa-popup__later{background:transparent; color:#2b2320}
@media (prefers-reduced-motion: no-preference){.pwa-popup{transition:opacity .2s}}