/* آخرین نگهبان — app shell styles (shared by every artboard) */
.lg-app{
  --bg:#FFFCF5; --surface:#FFFFFF; --surface-2:#FFF6E0; --line:#ECE5D5; --ink:#2A2833; --muted:#67646F;
  --y:#FFC21A; --y-d:#D99A00; --y-ink:#3A2A00;
  --b:#1E9BF0; --b-d:#1273B8; --b-fill:#1677C2; --b-fill-d:#0E5A96; --b-text:#0F6FB5; --b-tint:#E6F4FE;
  --inner:#8E5CF7; --inner-d:#6A3BD6; --body:#3CC46B; --body-d:#279A4D;
  --lock:#E9E3D5; --lock-d:#D3CAB6; --lock-ink:#A69D89;
  --ai:#6A3BD6; --ai-tint:#F0E9FF;
  --stars:0; --clouds:1; --glow:.55;
  direction:rtl; font-family:'Vazirmatn',Tahoma,'Segoe UI',sans-serif; background:var(--bg); color:var(--ink);
  container-type:inline-size; container-name:lg; position:relative; overflow:clip; min-height:100%;
  --sy:0; --mx:0; --my:0;
}
.lg-app[data-theme="dark"]{
  --bg:#0D1222; --surface:#151C31; --surface-2:#1C2541; --line:#28324F; --ink:#EEF1FA; --muted:#A4ADC6;
  --b-text:#6CC4FF; --b-tint:#16294A;
  --lock:#242E48; --lock-d:#18203A; --lock-ink:#6A7699;
  --ai:#C3A6FF; --ai-tint:#2A2150;
  --stars:1; --clouds:0; --glow:1;
}
.lg-app, .lg-app *{transition-property:background-color,border-color,color,opacity; transition-duration:.45s; transition-timing-function:ease}
.lg-app *{box-sizing:border-box}
.lg-app h1,.lg-app h2,.lg-app h3,.lg-app p{margin:0}
.lg-app button{font-family:inherit}
.lg-app a{color:var(--b-text); text-decoration:none}
.lg-app a:hover{color:var(--b)}
.f-display{font-family:'Lalezar','Vazirmatn',Tahoma,sans-serif; font-weight:400; letter-spacing:0}

/* ---------- shell ---------- */
.lg-shell{display:grid; grid-template-columns:248px minmax(0,1fr) 372px; grid-template-areas:"nav main top" "nav main aside"; grid-template-rows:auto 1fr; max-width:1440px; margin:0 auto; position:relative; z-index:1}
.lg-nav{grid-area:nav; border-inline-start:0; border-inline-end:2px solid var(--line); padding:28px 16px}
.lg-nav-inner{position:sticky; top:28px; display:flex; flex-direction:column; gap:6px}
.lg-main{grid-area:main; position:relative; padding:24px 40px 96px; min-width:0}
.lg-top{grid-area:top; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:24px 32px 8px 24px}
.lg-aside{grid-area:aside; display:flex; flex-direction:column; gap:22px; padding:16px 32px 48px 24px}

/* ---------- nav ---------- */
.logo-word{display:block; height:44px; width:auto; margin:0 12px 26px 0}
.logo-mark{display:none; width:48px; height:48px; border-radius:14px; margin:0 auto 22px}
.nav-item{display:flex; align-items:center; gap:16px; padding:8px 14px; min-height:54px; border-radius:16px; border:2px solid transparent; color:var(--ink) !important; font-weight:800; font-size:15px; letter-spacing:.01em}
.nav-item:hover{background:var(--surface-2)}
.nav-item.on{border-color:var(--b); background:var(--b-tint); color:var(--b-text) !important}
.nav-ico{width:38px; height:38px; flex:none; object-fit:contain; display:block}
.nav-tag{margin-inline-start:auto; font-size:11px; font-weight:800; color:var(--muted); border:1.5px solid var(--line); border-radius:999px; padding:1px 8px}
.nav-promo{margin-top:22px; border:2px solid var(--line); border-radius:20px; padding:18px; display:flex; flex-direction:column; gap:8px; align-items:center; text-align:center}
.nav-promo p{color:var(--muted); font-size:13px; line-height:1.8}

/* ---------- sky + parallax ---------- */
.lg-sky{position:absolute; inset:0; pointer-events:none; z-index:0; overflow:clip}
.sky-layer{position:absolute; inset:-120px 0; will-change:transform}
.sky-far{transform:translate3d(calc(var(--mx) * 10px), calc(var(--sy) * -0.12px + var(--my) * 6px), 0)}
.sky-mid{transform:translate3d(calc(var(--mx) * 26px), calc(var(--sy) * -0.32px + var(--my) * 14px), 0)}
.sky-near{transform:translate3d(calc(var(--mx) * 48px), calc(var(--sy) * -0.6px + var(--my) * 26px), 0)}
.stars{position:absolute; inset:0; opacity:var(--stars);
  background-image:
    radial-gradient(1.6px 1.6px at 22px 34px,#fff 50%,transparent 52%),
    radial-gradient(1.2px 1.2px at 140px 90px,#cfe3ff 50%,transparent 52%),
    radial-gradient(1.8px 1.8px at 210px 180px,#fff 50%,transparent 52%),
    radial-gradient(1.1px 1.1px at 70px 220px,#ffe9a8 50%,transparent 52%),
    radial-gradient(1.4px 1.4px at 260px 40px,#fff 50%,transparent 52%);
  background-size:300px 260px}
.stars.twinkle{background-size:420px 380px; background-position:90px 60px; animation:twinkle 4.5s ease-in-out infinite}
.celestial{position:absolute; top:150px; left:6%; width:120px; height:120px; border-radius:50%}
.celestial .sun{position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle,#FFE38A 0 34%,rgba(255,214,90,.35) 35% 52%,transparent 70%); opacity:var(--clouds)}
.celestial .moon{position:absolute; inset:18px; border-radius:50%; background:#FFF4CF; box-shadow:0 0 40px 10px rgba(255,228,140,.35), inset -14px -8px 0 0 #E9D9A6; opacity:var(--stars)}
.cloud{position:absolute; opacity:calc(var(--clouds) * .95); animation:drift 26s ease-in-out infinite alternate}
.cloud path{fill:#FFFFFF; stroke:#EFE7D6; stroke-width:2}
.orb{position:absolute; border-radius:50%; filter:blur(2px); opacity:calc(.35 + var(--glow) * .4); animation:breathe 7s ease-in-out infinite}
.spark{position:absolute; bottom:-20px; width:6px; height:6px; border-radius:50%; background:#FFD447; box-shadow:0 0 10px 3px rgba(255,200,40,.55); opacity:0; animation:rise 16s linear infinite}

/* ---------- path ---------- */
.lg-path{position:relative; z-index:2; max-width:600px; margin:0 auto}
.unit-banner{position:sticky; top:16px; z-index:10; background:var(--b-fill); color:#fff; border-radius:18px; padding:18px 22px; display:flex; align-items:center; justify-content:space-between; gap:16px; box-shadow:0 6px 0 var(--b-fill-d), 0 18px 40px -18px rgba(14,90,150,.55)}
.unit-kicker{display:flex; align-items:center; gap:8px; font-size:14px; font-weight:800; color:#fff}
.unit-kicker .dot{width:10px; height:10px; border-radius:50%; background:#9BD8FF; box-shadow:0 0 10px 2px rgba(155,216,255,.9)}
.unit-title{font-size:27px; line-height:1.35; margin-top:2px; color:#fff}
.guide-btn{flex:none; display:flex; align-items:center; gap:8px; min-height:48px; padding:0 16px; border-radius:14px; border:2px solid rgba(255,255,255,.5); background:rgba(255,255,255,.08); color:#fff; font-weight:900; font-size:14px; cursor:pointer; box-shadow:0 4px 0 rgba(0,0,0,.18); transition:transform .15s, box-shadow .15s, background-color .3s}
.guide-btn:hover{background:rgba(255,255,255,.18)}
.guide-btn:active{transform:translateY(3px); box-shadow:0 1px 0 rgba(0,0,0,.18)}

.path-nodes{position:relative; display:flex; flex-direction:column; align-items:center; gap:26px; padding:64px 0 20px}
.node-wrap{position:relative; translate:var(--off,0px) 0}
.node-pop{animation:pop .7s cubic-bezier(.2,1.5,.4,1) both; animation-delay:var(--d,0s)}
.node{--c:var(--b); --cd:var(--b-d); width:74px; height:68px; border-radius:50%; border:0; padding:0; background:var(--c); color:#fff; box-shadow:0 8px 0 var(--cd); display:grid; place-items:center; cursor:pointer; position:relative; transition:transform .15s ease, box-shadow .15s ease, background-color .45s}
.node::after{content:""; position:absolute; top:9px; left:18px; width:20px; height:9px; border-radius:50%; background:rgba(255,255,255,.35); transform:rotate(-22deg)}
.node:hover{transform:translateY(-3px); box-shadow:0 11px 0 var(--cd)}
.node:active{transform:translateY(6px); box-shadow:0 2px 0 var(--cd)}
.node svg{width:34px; height:34px; position:relative; z-index:1}
.node.lock{--c:var(--lock); --cd:var(--lock-d); color:var(--lock-ink)}
.node.lock::after{opacity:.4}
.node.big{width:92px; height:84px}
.node.big svg{width:42px; height:42px}
.node.shadow{--c:var(--lock); --cd:var(--lock-d); color:var(--lock-ink); width:116px; height:98px; border-radius:30px; opacity:.85}
.node.shadow svg{width:58px; height:58px}
.ring{position:absolute; inset:-13px -13px -5px; border-radius:50%; border:7px solid var(--lock); pointer-events:none}
.ring::before{content:""; position:absolute; inset:-7px; border-radius:50%; border:7px solid transparent; border-top-color:var(--b); border-right-color:var(--b); transform:rotate(-45deg)}
.pulse{position:absolute; inset:0; border-radius:50%; animation:pulse 2.2s ease-out infinite; pointer-events:none}
.start-bubble{position:absolute; bottom:calc(100% + 22px); left:50%; translate:-50% 0; background:var(--surface); border:2px solid var(--line); color:var(--b-text); font-weight:900; font-size:15px; padding:9px 18px; border-radius:14px; white-space:nowrap; animation:bob 1.8s ease-in-out infinite; box-shadow:0 4px 0 var(--line)}
.start-bubble::after{content:""; position:absolute; top:100%; left:50%; width:14px; height:14px; background:var(--surface); border-right:2px solid var(--line); border-bottom:2px solid var(--line); transform:translate(-50%,-7px) rotate(45deg)}
.node-cap{position:absolute; top:calc(100% + 16px); left:50%; translate:-50% 0; white-space:nowrap; font-size:12px; font-weight:800; color:var(--muted)}

.mascot{position:absolute; z-index:3; pointer-events:none}
.mascot-par{transform:translate3d(calc(var(--mx) * -18px), calc(var(--sy) * 0.08px + var(--my) * -12px), 0)}
.mascot img{display:block; width:100%; height:auto; animation:float 4.2s ease-in-out infinite; filter:drop-shadow(0 18px 18px rgba(30,40,80,.18))}
.mascot .shadow-blob{width:60%; height:16px; margin:-6px auto 0; border-radius:50%; background:rgba(40,40,70,.14); animation:blob 4.2s ease-in-out infinite}
.say{position:absolute; background:var(--surface); border:2px solid var(--line); border-radius:16px; padding:10px 14px; font-size:14px; font-weight:800; line-height:1.7; color:var(--ink); width:180px; box-shadow:0 4px 0 var(--line); animation:bob 3.4s ease-in-out infinite}

.unit-divider{display:flex; align-items:center; gap:16px; margin:44px 0 0; color:var(--muted); font-weight:800; font-size:16px; position:relative; z-index:2}
.unit-divider::before,.unit-divider::after{content:""; flex:1; height:2px; background:var(--line); border-radius:2px}
.path-fade{-webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent); mask-image:linear-gradient(to bottom,#000 55%,transparent)}

/* ---------- top bar ---------- */
.lights{display:flex; align-items:center; gap:10px}
.light{width:22px; height:22px; border-radius:50%; background:var(--lc); box-shadow:0 0 calc(6px + var(--glow) * 12px) calc(var(--glow) * 3px) var(--lc); animation:glowp 3.6s ease-in-out infinite}
.chip-coin{display:flex; align-items:center; gap:6px; font-weight:900; font-size:17px; color:var(--y-d); min-height:44px; padding:0 6px}
.lg-app[data-theme="dark"] .chip-coin{color:var(--y)}
.chip-coin img{width:40px; height:30px; object-fit:contain; animation:coin 5s ease-in-out infinite}
.theme-toggle{position:relative; width:84px; height:44px; border-radius:999px; border:2px solid var(--line); background:var(--surface-2); cursor:pointer; padding:0; flex:none}
.theme-toggle .knob{position:absolute; top:3px; right:3px; width:34px; height:34px; border-radius:50%; background:var(--y); box-shadow:0 3px 0 var(--y-d); display:grid; place-items:center; transition:transform .45s cubic-bezier(.5,1.6,.4,1), background-color .45s, box-shadow .45s; color:#7A5200}
.lg-app[data-theme="dark"] .theme-toggle .knob{transform:translateX(-40px); background:#3B4A78; box-shadow:0 3px 0 #222C4C; color:#FFE59A}
.theme-toggle .knob svg{width:20px; height:20px}
.theme-toggle .ic-moon{display:none}
.lg-app[data-theme="dark"] .theme-toggle .ic-moon{display:block}
.lg-app[data-theme="dark"] .theme-toggle .ic-sun{display:none}
.avatar{width:46px; height:46px; border-radius:50%; border:2px solid var(--line); background:var(--surface-2); overflow:hidden; display:grid; place-items:center; flex:none}
.avatar img{width:120%; height:auto; margin-top:12px}

/* ---------- cards ---------- */
.card{background:var(--surface); border:2px solid var(--line); border-radius:22px; padding:22px; position:relative; display:flex; flex-direction:column; gap:14px}
.card-head{display:flex; align-items:center; justify-content:space-between; gap:10px}
.card-title{font-size:22px; line-height:1.4}
.txt-btn{background:none; border:0; padding:6px 2px; min-height:44px; color:var(--b-text); font-weight:900; font-size:14px; cursor:pointer}
.light-tag{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:800; color:var(--b-text)}
.light-tag i{width:9px; height:9px; border-radius:50%; background:var(--b); display:block}
.meta{display:flex; flex-wrap:wrap; gap:8px}
.meta span{font-size:12.5px; font-weight:700; color:var(--muted); background:var(--surface-2); border:1.5px solid var(--line); border-radius:999px; padding:4px 12px}
.btn{display:flex; align-items:center; justify-content:center; gap:8px; min-height:50px; border:0; border-radius:15px; padding:0 18px; font-weight:900; font-size:16px; cursor:pointer; --sd:var(--line); box-shadow:0 5px 0 var(--sd); transition:transform .15s, box-shadow .15s, background-color .45s, color .45s, border-color .45s}
.btn:hover{transform:translateY(-1px); filter:brightness(1.04)}
.btn:active{transform:translateY(4px); box-shadow:0 1px 0 var(--sd)}
.btn-y{background:var(--y); color:var(--y-ink); --sd:var(--y-d)}
.btn-b{background:var(--b-fill); color:#fff; --sd:var(--b-fill-d)}
.btn-g{background:var(--surface); color:var(--ink); border:2px solid var(--line); --sd:var(--line); font-size:14px}
.row2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.peek{position:absolute; top:-46px; left:10px; width:104px; pointer-events:none; animation:float 4.8s ease-in-out infinite}
.ai-badge{font-size:11px; font-weight:900; color:var(--ai); background:var(--ai-tint); border-radius:999px; padding:2px 10px}
.guide-line{display:flex; align-items:center; gap:10px; font-size:14px; font-weight:800}
.guide-line img{width:36px; height:36px; border-radius:11px}
.question{font-size:17px; font-weight:800; line-height:1.9}
.lanterns{display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:6px; padding:6px 0 2px}
.lantern{aspect-ratio:3/4; border-radius:8px 8px 10px 10px; background:var(--lock); position:relative}
.lantern::before{content:""; position:absolute; top:-5px; left:30%; right:30%; height:5px; border-radius:3px 3px 0 0; background:var(--lock-d)}
.lantern.lit{background:linear-gradient(#FFE07A,#FFB800); box-shadow:0 0 calc(6px + var(--glow) * 10px) rgba(255,190,30,.7); animation:glowp 3s ease-in-out infinite}
.lantern.lit::before{background:#D99A00}
.small-muted{font-size:13px; color:var(--muted); font-weight:600; line-height:1.8}
.shop-card{flex-direction:row; align-items:center; gap:16px; overflow:hidden}
.shop-card img{width:96px; flex:none; animation:float 5s ease-in-out infinite}
.foot{display:flex; flex-wrap:wrap; justify-content:center; gap:8px 18px; padding:4px 0}
.foot a{font-size:12.5px; font-weight:800; color:var(--muted)}

/* ---------- motion ---------- */
@keyframes pop{0%{opacity:0; transform:scale(.4) translateY(20px)}100%{opacity:1; transform:none}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes float{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-14px) rotate(1.5deg)}}
@keyframes blob{0%,100%{transform:scaleX(1); opacity:1}50%{transform:scaleX(.78); opacity:.6}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(30,155,240,.55)}100%{box-shadow:0 0 0 22px rgba(30,155,240,0)}}
@keyframes twinkle{0%,100%{opacity:calc(var(--stars) * .3)}50%{opacity:var(--stars)}}
@keyframes drift{0%{translate:0 0}100%{translate:40px 0}}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
@keyframes rise{0%{transform:translateY(0); opacity:0}12%{opacity:calc(.35 + var(--glow) * .6)}85%{opacity:calc(.2 + var(--glow) * .5)}100%{transform:translateY(-1100px); opacity:0}}
@keyframes glowp{0%,100%{filter:brightness(1)}50%{filter:brightness(1.18)}}
@keyframes coin{0%,80%,100%{transform:rotateY(0)}90%{transform:rotateY(180deg)}}
@keyframes rise-in{0%{opacity:0; transform:translateY(24px)}100%{opacity:1; transform:none}}
.card{animation:rise-in .7s cubic-bezier(.2,.9,.3,1) both}
.card:nth-of-type(2){animation-delay:.12s}
.card:nth-of-type(3){animation-delay:.24s}
@supports (animation-timeline: view()){
  .reveal{animation:rise-in linear both; animation-timeline:view(); animation-range:entry 0% entry 70%}
}
@media (prefers-reduced-motion: reduce){
  .lg-app *, .lg-app *::before, .lg-app *::after{animation:none !important}
  .sky-layer,.mascot-par{transform:none !important}
}

/* ---------- responsive (container) ---------- */
@container lg (max-width: 1240px){
  .lg-shell{grid-template-columns:96px minmax(0,1fr) 330px}
  .nav-item .lbl,.nav-tag,.nav-promo,.logo-word{display:none}
  .logo-mark{display:block}
  .nav-item{justify-content:center; padding:8px}
  .lg-main{padding:24px 24px 96px}
}
@container lg (max-width: 940px){
  .lg-shell{grid-template-columns:minmax(0,1fr); grid-template-areas:"top" "main" "aside" "nav"; grid-template-rows:auto}
  .lg-top{position:sticky; top:0; z-index:30; background:var(--bg); border-bottom:2px solid var(--line); padding:10px 16px}
  .lg-main{padding:20px 16px 48px}
  .lg-aside{padding:8px 16px 32px}
  .lg-nav{position:sticky; bottom:0; z-index:30; background:var(--surface); border-inline-end:0; border-top:2px solid var(--line); padding:6px 8px}
  .lg-nav-inner{position:static; flex-direction:row; justify-content:space-around}
  .logo-mark{display:none}
  .nav-item{min-width:52px}
  .unit-banner{top:76px; padding:14px 16px}
  .unit-title{font-size:21px}
  .guide-btn .lbl{display:none}
  .mascot.m-side{width:130px !important; left:auto !important; right:-6px !important}
  .mascot.m-fly{display:none}
  .say{display:none}
  .celestial{left:auto; right:8%; top:120px; width:84px; height:84px}
}

/* =====================================================================
   inner pages (کارگاه، سرا، تالار، بازارچه، نامه‌ی من، خانه‌ی نگهبان)
   ===================================================================== */
.pg{position:relative; z-index:2; max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:26px}
.hero{--hc:var(--b-fill); --hcd:var(--b-fill-d); position:relative; overflow:clip; border-radius:26px; background:var(--hc); color:#fff; box-shadow:0 7px 0 var(--hcd); padding:30px 30px 30px 220px; min-height:190px; display:flex; flex-direction:column; justify-content:center; gap:8px}
.hero h1{font-size:40px; line-height:1.3; color:#fff}
.hero p{font-size:15px; font-weight:600; line-height:1.9; color:#fff; max-width:440px}
.hero-kicker{font-size:13px; font-weight:900; color:#fff; display:flex; align-items:center; gap:8px}
.hero-art{position:absolute; left:18px; bottom:-8px; width:190px; pointer-events:none}
.hero-art img{display:block; width:100%; animation:float 4.6s ease-in-out infinite}
.hero-pattern{position:absolute; inset:0; opacity:.16; pointer-events:none; background-image:radial-gradient(circle at 12px 12px,#fff 2.5px,transparent 3px); background-size:28px 28px; transform:translate3d(calc(var(--mx) * 16px), calc(var(--sy) * -0.08px), 0)}
.hero.inner{--hc:#7446E0; --hcd:#5530B0}
.hero.body{--hc:#22894A; --hcd:#17663A}
.hero.gold{--hc:#E8A400; --hcd:#B87F00}
.hero.gold h1,.hero.gold p,.hero.gold .hero-kicker{color:#2E2100}
.hero.paper{--hc:#F3E6C8; --hcd:#D9C79E}
.hero.paper h1,.hero.paper p,.hero.paper .hero-kicker{color:#3B2C12}
.lg-app[data-theme="dark"] .hero.paper{--hc:#3A3020; --hcd:#251E13}
.lg-app[data-theme="dark"] .hero.paper h1,.lg-app[data-theme="dark"] .hero.paper p,.lg-app[data-theme="dark"] .hero.paper .hero-kicker{color:#F6E9C9}
.hero.mirror{--hc:#24305C; --hcd:#151D3D}
.mirror-pattern{position:absolute; inset:-40px; opacity:.5; pointer-events:none;
  background:
    linear-gradient(135deg,rgba(255,255,255,.14) 25%,transparent 25%) 0 0/36px 36px,
    linear-gradient(225deg,rgba(255,255,255,.08) 25%,transparent 25%) 0 0/36px 36px,
    linear-gradient(45deg,rgba(155,216,255,.12) 25%,transparent 25%) 0 0/36px 36px;
  transform:translate3d(calc(var(--mx) * 20px), calc(var(--sy) * -0.1px), 0)}
.shine{position:absolute; top:-30%; bottom:-30%; width:120px; left:-160px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent); transform:skewX(-18deg); animation:shine 5.5s ease-in-out infinite; pointer-events:none}
@keyframes shine{0%,55%{left:-160px}100%{left:110%}}

.tabs{display:flex; flex-wrap:wrap; gap:10px}
.tab{min-height:46px; padding:0 18px; border-radius:14px; border:2px solid var(--line); background:var(--surface); color:var(--ink); font-weight:800; font-size:14px; cursor:pointer; box-shadow:0 3px 0 var(--line); transition:transform .15s, box-shadow .15s, background-color .45s, color .45s, border-color .45s}
.tab:active{transform:translateY(3px); box-shadow:0 0 0 var(--line)}
.tab.on{border-color:var(--b); background:var(--b-tint); color:var(--b-text); box-shadow:0 3px 0 var(--b)}

.sec{display:flex; flex-direction:column; gap:14px}
.sec-head{display:flex; align-items:center; justify-content:space-between; gap:12px}
.sec-title{display:flex; align-items:center; gap:10px; font-size:24px; line-height:1.4}
.sec-title .light{width:16px; height:16px}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(210px,100%),1fr)); gap:18px}
.grid-2{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); gap:18px}

.tile{--cc:var(--b); --ccd:var(--b-d); background:var(--surface); border:2px solid var(--line); border-radius:20px; overflow:clip; display:flex; flex-direction:column; box-shadow:0 5px 0 var(--line); color:var(--ink) !important; transition:transform .2s ease, box-shadow .2s ease, background-color .45s, border-color .45s}
.tile:hover{transform:translateY(-4px); box-shadow:0 9px 0 var(--line)}
.tile:active{transform:translateY(3px); box-shadow:0 2px 0 var(--line)}
.tile-art{position:relative; aspect-ratio:16/10; background:var(--cc); display:grid; place-items:center; overflow:clip}
.tile-art::before{content:""; position:absolute; inset:0; opacity:.18; background-image:radial-gradient(circle at 10px 10px,#fff 2px,transparent 2.5px); background-size:22px 22px}
.tile-art img{position:relative; width:52%; animation:float 5s ease-in-out infinite}
.tile-art svg{position:relative; width:64px; height:64px; color:#fff}
.tile-body{padding:14px 16px 16px; display:flex; flex-direction:column; gap:6px}
.tile-title{font-size:16px; font-weight:900; line-height:1.7}
.tile-meta{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; font-size:12.5px; font-weight:700; color:var(--muted)}
.c-inner{--cc:#8E5CF7; --ccd:#6A3BD6}
.c-link{--cc:#1E9BF0; --ccd:#1273B8}
.c-body{--cc:#3CC46B; --ccd:#279A4D}
.c-gold{--cc:#FFC21A; --ccd:#D99A00}
.c-rose{--cc:#FF7A8A; --ccd:#D9566A}
.dots{display:flex; gap:5px}
.dots i{width:18px; height:7px; border-radius:4px; background:var(--lock); display:block}
.dots i.f{background:var(--cc)}
.tag{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:900; border-radius:999px; padding:2px 10px; background:var(--surface-2); border:1.5px solid var(--line); color:var(--muted)}
.tag.soon{color:var(--muted)}
.tag.own{background:var(--ai-tint); border-color:transparent; color:var(--ai)}

.ph{position:relative; display:grid; place-items:center; text-align:center; border:2.5px dashed rgba(255,255,255,.7); border-radius:14px; color:#fff; font-size:12.5px; font-weight:800; padding:10px; margin:12px; align-self:stretch; justify-self:stretch}
.ph-light{border-color:var(--line); color:var(--muted); background:var(--surface-2)}

.wide{display:grid; grid-template-columns:220px minmax(0,1fr); gap:0; align-items:stretch}
.wide .tile-art{aspect-ratio:auto; min-height:150px}
.wide .tile-body{justify-content:center; padding:18px 20px; gap:8px}

/* feed / posts */
.post{background:var(--surface); border:2px solid var(--line); border-radius:22px; padding:18px 20px; display:flex; flex-direction:column; gap:12px}
.post.pinned{border-color:var(--ai); box-shadow:0 0 0 4px var(--ai-tint)}
.post-head{display:flex; align-items:center; gap:12px}
.post-head .who{display:flex; flex-direction:column; min-width:0}
.post-head .who b{font-size:15px; font-weight:900}
.post-head .who span{font-size:12.5px; color:var(--muted); font-weight:700}
.av{--ac:#1E9BF0; width:46px; height:46px; flex:none; border-radius:50%; background:var(--ac); color:#fff; display:grid; place-items:center; font-weight:900; font-size:18px; box-shadow:0 3px 0 rgba(0,0,0,.15); overflow:clip}
.av img{width:118%; margin-top:10px}
.icon-btn{margin-inline-start:auto; width:44px; height:44px; border-radius:12px; border:0; background:transparent; color:var(--muted); display:grid; place-items:center; cursor:pointer}
.icon-btn:hover{background:var(--surface-2)}
.icon-btn svg{width:20px; height:20px}
.post-text{font-size:15.5px; line-height:2; font-weight:600}
.post-art{border-radius:16px; background:var(--cc,#FFC21A); min-height:200px; display:grid; overflow:clip; position:relative}
.reacts{display:flex; flex-wrap:wrap; gap:8px}
.react{min-height:40px; padding:0 14px; border-radius:999px; border:2px solid var(--line); background:var(--surface); color:var(--ink); font-size:13px; font-weight:800; cursor:pointer; transition:transform .15s, background-color .3s}
.react:hover{background:var(--surface-2); transform:translateY(-2px)}
.react:active{transform:scale(.94)}
.try-btn{min-height:44px; padding:0 16px; border-radius:14px; border:2px solid var(--b); background:var(--b-tint); color:var(--b-text); font-size:14px; font-weight:900; cursor:pointer; box-shadow:0 3px 0 var(--b); display:flex; align-items:center; gap:8px}
.try-btn:active{transform:translateY(3px); box-shadow:none}
.process{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
.process div{background:var(--surface-2); border:1.5px solid var(--line); border-radius:12px; padding:8px 10px; font-size:12.5px; font-weight:700; line-height:1.8}
.process b{display:block; font-size:11px; color:var(--muted); font-weight:900}

/* gallery (تالار) */
.gallery{columns:3 230px; column-gap:18px}
.gallery .tile{break-inside:avoid; margin-bottom:18px}
.gallery .tile-art{aspect-ratio:auto}
.end-card{text-align:center; align-items:center; padding:30px 24px}

/* timeline (نامه‌ی من) */
.timeline{position:relative; display:flex; flex-direction:column; gap:18px; padding-inline-start:34px}
.timeline::before{content:""; position:absolute; top:8px; bottom:8px; right:11px; width:4px; border-radius:4px; background:var(--line)}
.tl{position:relative}
.tl::before{content:""; position:absolute; right:-31px; top:22px; width:16px; height:16px; border-radius:50%; background:var(--cc,#FFC21A); box-shadow:0 0 0 4px var(--bg), 0 0 calc(4px + var(--glow) * 10px) var(--cc,#FFC21A)}
.tl-date{font-size:12.5px; font-weight:900; color:var(--muted); margin-bottom:6px}
.seen{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:800; color:var(--muted)}
.seen svg{width:16px; height:16px}

/* wallet + shop items (خانه‌ی نگهبان) */
.room{position:relative; height:330px; border-radius:26px; overflow:clip; border:2px solid var(--line); background:var(--surface-2)}
.room-wall{position:absolute; inset:0 0 34% 0; background:#FFE9B8}
.lg-app[data-theme="dark"] .room-wall{background:#2A2F55}
.room-floor{position:absolute; inset:66% 0 0 0; background:#E8C98C}
.lg-app[data-theme="dark"] .room-floor{background:#3A3560}
.room-window{position:absolute; top:34px; right:56px; width:120px; height:110px; border-radius:60px 60px 10px 10px; background:#9BD8FF; border:8px solid #fff; overflow:clip}
.lg-app[data-theme="dark"] .room-window{background:#101735; border-color:#4A4F7D}
.room-window i{position:absolute; width:4px; height:4px; border-radius:50%; background:#fff; opacity:var(--stars)}
.room-l1{transform:translate3d(calc(var(--mx) * 8px), calc(var(--my) * 4px), 0)}
.room-l2{transform:translate3d(calc(var(--mx) * 22px), calc(var(--my) * 10px), 0)}
.room-l3{transform:translate3d(calc(var(--mx) * -30px), calc(var(--my) * -14px), 0)}
.room-slot{position:absolute; display:grid; place-items:center; border:2.5px dashed rgba(90,70,30,.35); border-radius:16px; color:#6B5524; font-size:12px; font-weight:800; text-align:center; padding:6px}
.lg-app[data-theme="dark"] .room-slot{border-color:rgba(255,255,255,.3); color:#D8D2F0}
.coin{display:inline-flex; align-items:center; gap:4px; font-weight:900; color:var(--y-d)}
.lg-app[data-theme="dark"] .coin{color:var(--y)}
.coin img{width:28px; height:22px; object-fit:contain}
.hist{display:flex; flex-direction:column}
.hist div{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 0; border-bottom:1.5px dashed var(--line); font-size:13.5px; font-weight:700}
.hist div:last-child{border-bottom:0}
.shelf{display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:5px; align-items:end; height:64px}
.shelf i{display:block; border-radius:4px 4px 2px 2px; background:var(--lock)}
.shelf i.f{background:var(--cc,#3CC46B); box-shadow:0 0 calc(var(--glow) * 10px) var(--cc,#3CC46B)}

.price{font-weight:900; font-size:15px; color:var(--ink)}
.heart{width:44px; height:44px; border-radius:14px; border:2px solid var(--line); background:var(--surface); color:var(--muted); display:grid; place-items:center; cursor:pointer; flex:none; box-shadow:0 3px 0 var(--line)}
.heart svg{width:20px; height:20px}
.heart:active{transform:translateY(3px); box-shadow:none}
.buy-row{display:flex; align-items:center; gap:10px; margin-top:6px}
.buy-row .btn{flex:1; min-height:44px; font-size:14px}
.awning{position:absolute; top:0; left:0; right:0; height:26px; background:repeating-linear-gradient(90deg,#FFC21A 0 36px,#fff 36px 72px); -webkit-mask:radial-gradient(18px 12px at 18px 26px,transparent 98%,#000) 0 0/36px 100%; mask:radial-gradient(18px 12px at 18px 26px,transparent 98%,#000) 0 0/36px 100%; animation:sway 6s ease-in-out infinite; transform-origin:top}
@keyframes sway{0%,100%{transform:skewX(0)}50%{transform:skewX(-2deg)}}

@container lg (max-width: 940px){
  .hero{padding:24px 22px 150px; min-height:0}
  .hero h1{font-size:30px}
  .hero-art{width:130px; left:auto; right:16px; bottom:-10px}
  .wide{grid-template-columns:minmax(0,1fr)}
  .process{grid-template-columns:minmax(0,1fr)}
  .room{height:280px}
}

/* =====================================================================
   flows, forms, panels (ورود، واحد، ساخت پست، پنل والد، بازبینی، مدیریت)
   ===================================================================== */
/* two-column shell for panels */
.lg-shell.two{grid-template-columns:248px minmax(0,1fr); grid-template-areas:"nav top" "nav main"}
.lg-shell.two .lg-top{padding:22px 40px 6px}
.lg-shell.two .lg-main{padding:18px 40px 80px}
.pg.wide-pg{max-width:1060px}
.nav-sec{font-size:11.5px; font-weight:900; color:var(--muted); padding:14px 16px 4px; letter-spacing:.02em}
.nav-ico-s{width:30px; height:30px; flex:none; display:grid; place-items:center; border-radius:10px; background:var(--surface-2); color:var(--b-text)}
.nav-ico-s svg{width:18px; height:18px}
.nav-item.on .nav-ico-s{background:var(--b); color:#fff}
.child-switch{display:flex; align-items:center; gap:10px; border:2px solid var(--line); border-radius:16px; padding:8px 12px; min-height:52px; background:var(--surface)}
.child-switch .av{width:36px; height:36px; font-size:15px}
.panel-badge{font-size:12px; font-weight:900; color:#fff; background:var(--b-fill); border-radius:999px; padding:3px 12px}

/* focus shell (lesson-like flows) */
.focus{min-height:100%; display:flex; flex-direction:column; position:relative; z-index:1}
.focus-top{display:flex; align-items:center; gap:18px; max-width:980px; width:100%; margin:0 auto; padding:26px 24px 10px}
.close-x{width:44px; height:44px; border-radius:12px; border:0; background:transparent; color:var(--muted); display:grid; place-items:center; cursor:pointer; flex:none}
.close-x:hover{background:var(--surface-2)}
.close-x svg{width:24px; height:24px}
.steps{flex:1; display:flex; gap:6px}
.steps i{flex:1; height:14px; border-radius:8px; background:var(--lock); display:block; position:relative; overflow:clip}
.steps i.f{background:var(--y)}
.steps i.f::after{content:""; position:absolute; top:3px; left:8px; right:8px; height:3px; border-radius:2px; background:rgba(255,255,255,.55)}
.steps i.c{background:linear-gradient(90deg,var(--lock) 50%,var(--y) 50%)}
.focus-body{flex:1; max-width:760px; width:100%; margin:0 auto; padding:24px 24px 40px; display:flex; flex-direction:column; gap:22px}
.stage{animation:stage-in .5s cubic-bezier(.2,.9,.3,1) both}
@keyframes stage-in{0%{opacity:0; transform:translateX(-28px)}100%{opacity:1; transform:none}}
.focus-title{font-size:32px; line-height:1.4}
.focus-bar{border-top:2px solid var(--line); background:var(--surface); position:sticky; bottom:0; z-index:5}
.focus-bar-in{max-width:980px; margin:0 auto; padding:18px 24px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.focus-bar .btn{min-width:170px}
.mentor{display:flex; align-items:flex-end; gap:16px}
.mentor img{width:150px; flex:none; animation:float 4.4s ease-in-out infinite}
.bubble{position:relative; background:var(--surface); border:2px solid var(--line); border-radius:20px; padding:16px 18px; font-size:16.5px; font-weight:700; line-height:2; box-shadow:0 4px 0 var(--line)}
.bubble::after{content:""; position:absolute; bottom:22px; right:-9px; width:16px; height:16px; background:var(--surface); border-top:2px solid var(--line); border-right:2px solid var(--line); transform:rotate(45deg)}
.choices{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr)); gap:14px}
.choice{display:flex; flex-direction:column; gap:6px; text-align:right; border:2px solid var(--line); border-radius:18px; background:var(--surface); color:var(--ink); padding:16px 18px; cursor:pointer; box-shadow:0 4px 0 var(--line); font-family:inherit; min-height:64px; transition:transform .15s, box-shadow .15s, background-color .3s, border-color .3s}
.choice:hover{background:var(--surface-2)}
.choice:active{transform:translateY(3px); box-shadow:0 1px 0 var(--line)}
.choice b{font-size:16px; font-weight:900}
.choice span{font-size:13px; color:var(--muted); font-weight:600; line-height:1.8}
.choice.sel{border-color:var(--b); background:var(--b-tint); box-shadow:0 4px 0 var(--b)}
.choice.sel b{color:var(--b-text)}
.choice .pic{height:84px; border-radius:12px; background:var(--cc,var(--surface-2)); display:grid; place-items:center; margin-bottom:4px}
.choice .pic svg{width:44px; height:44px; color:#fff}
.mission-card{border:2px solid var(--line); border-radius:22px; background:var(--surface); overflow:clip}
.mission-card .mc-head{background:var(--b-fill); color:#fff; padding:18px 20px; display:flex; flex-direction:column; gap:4px}
.mission-card .mc-head b{font-size:20px}
.mc-rows{display:grid; grid-template-columns:repeat(2,minmax(0,1fr))}
.mc-rows div{padding:14px 18px; border-top:2px solid var(--line); display:flex; flex-direction:column; gap:2px; font-size:14px; font-weight:700}
.mc-rows div:nth-child(odd){border-left:2px solid var(--line)}
.mc-rows span{font-size:12px; color:var(--muted); font-weight:900}
.safety{display:flex; gap:10px; align-items:flex-start; padding:14px 18px; border-top:2px solid var(--line); background:rgba(255,194,26,.12); font-size:13.5px; font-weight:700; line-height:1.9}
.not-now{background:none; border:0; color:var(--muted); font-weight:900; font-size:15px; min-height:48px; padding:0 10px; cursor:pointer}
.not-now:hover{color:var(--ink)}
.chips{display:flex; flex-wrap:wrap; gap:10px}
.chip{min-height:44px; padding:0 16px; border-radius:999px; border:2px solid var(--line); background:var(--surface); color:var(--ink); font-weight:800; font-size:14px; cursor:pointer; font-family:inherit}
.chip.sel{border-color:var(--b); background:var(--b-tint); color:var(--b-text)}
.celebrate{position:relative; text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px; padding-top:10px}
.burst{position:absolute; top:40px; left:50%; width:10px; height:10px; pointer-events:none}
.burst i{position:absolute; width:10px; height:10px; border-radius:3px; background:var(--y); animation:burst 1.4s cubic-bezier(.2,.8,.3,1) both}
@keyframes burst{0%{transform:translate(0,0) rotate(0); opacity:1}100%{transform:translate(var(--bx),var(--by)) rotate(260deg); opacity:0}}
.video{position:relative; aspect-ratio:16/9; border-radius:20px; background:#141A2E; overflow:clip; display:grid; place-items:center}
.video .ph{color:#C9D3F0; border-color:rgba(201,211,240,.35); position:absolute; inset:0; margin:14px}
.play{position:relative; width:78px; height:78px; border-radius:50%; border:0; background:var(--y); color:#3A2A00; display:grid; place-items:center; box-shadow:0 6px 0 var(--y-d); cursor:pointer; animation:breathe 2.6s ease-in-out infinite}
.play svg{width:32px; height:32px; margin-left:-4px}
.ctrls{display:flex; flex-wrap:wrap; gap:8px}
.seek{height:10px; border-radius:6px; background:var(--lock); position:relative; overflow:clip}
.seek i{position:absolute; inset:0 auto 0 0; width:var(--p,35%); background:var(--y); border-radius:6px}

/* forms */
.form{display:grid; gap:16px}
.field{display:flex; flex-direction:column; gap:6px}
.field label,.field .lbl2{font-size:14px; font-weight:900}
.field .hint{font-size:12.5px; color:var(--muted); font-weight:600; line-height:1.8}
.input{min-height:48px; border:2px solid var(--line); border-radius:14px; background:var(--surface); color:var(--ink); padding:0 14px; font:inherit; font-size:15px; font-weight:600; width:100%}
.input:focus{outline:none; border-color:var(--b); box-shadow:0 0 0 4px var(--b-tint)}
textarea.input{padding:12px 14px; min-height:96px; resize:vertical; line-height:1.9}
.sw-row{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1.5px dashed var(--line)}
.sw-row:last-child{border-bottom:0}
.sw-row .t{display:flex; flex-direction:column; gap:2px; font-weight:800; font-size:14.5px}
.sw-row .t small{font-size:12.5px; color:var(--muted); font-weight:600; line-height:1.8}
.sw{appearance:none; -webkit-appearance:none; width:56px; height:32px; border-radius:999px; background:var(--lock); position:relative; cursor:pointer; flex:none; border:0; margin:0}
.sw::after{content:""; position:absolute; top:4px; right:4px; width:24px; height:24px; border-radius:50%; background:#fff; box-shadow:0 2px 0 rgba(0,0,0,.15); transition:transform .3s cubic-bezier(.5,1.6,.4,1)}
.sw:checked{background:var(--b)}
.sw:checked::after{transform:translateX(-24px)}
.sw:disabled{opacity:.6; cursor:not-allowed}
.check-row{display:flex; gap:12px; align-items:flex-start; font-size:14px; font-weight:700; line-height:1.9}
.check-row input{width:22px; height:22px; margin-top:4px; accent-color:var(--b); flex:none}

/* panel blocks */
.alert{display:flex; gap:14px; align-items:flex-start; border:2px solid #E8A400; background:rgba(255,194,26,.14); border-radius:18px; padding:16px 18px; font-size:14px; font-weight:700; line-height:1.9}
.alert svg{width:24px; height:24px; color:#B87F00; flex:none; margin-top:2px}
.lg-app[data-theme="dark"] .alert svg{color:var(--y)}
.alert.red{border-color:#D9566A; background:rgba(217,86,106,.12)}
.alert.red svg{color:#C2475A}
.lg-app[data-theme="dark"] .alert.red svg{color:#FF8A9A}
.tbl{width:100%; border-collapse:separate; border-spacing:0; font-size:14px}
.tbl th{text-align:right; font-size:12.5px; font-weight:900; color:var(--muted); padding:10px 14px; border-bottom:2px solid var(--line)}
.tbl td{padding:14px; border-bottom:1.5px solid var(--line); font-weight:700; vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl-box{overflow-x:auto; border:2px solid var(--line); border-radius:20px; background:var(--surface)}
.pill{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:900; border-radius:999px; padding:3px 11px; background:var(--surface-2); color:var(--muted); border:1.5px solid var(--line); white-space:nowrap}
.pill.ok{background:rgba(60,196,107,.14); color:#1F7A40; border-color:transparent}
.lg-app[data-theme="dark"] .pill.ok{color:#7FE0A2}
.pill.wait{background:rgba(255,194,26,.18); color:#8A6200; border-color:transparent}
.lg-app[data-theme="dark"] .pill.wait{color:#FFD76A}
.pill.bad{background:rgba(217,86,106,.14); color:#B03A4D; border-color:transparent}
.lg-app[data-theme="dark"] .pill.bad{color:#FF9AAA}
.pill.info{background:var(--b-tint); color:var(--b-text); border-color:transparent}
.lamps{display:flex; gap:8px; align-items:center}
.lamp{width:18px; height:18px; border-radius:50%; background:var(--lock); position:relative}
.lamp.on{background:#FFC21A; box-shadow:0 0 calc(4px + var(--glow) * 10px) rgba(255,190,30,.8)}
.lamp-legend{display:flex; justify-content:space-between; font-size:11.5px; font-weight:800; color:var(--muted)}
.btn-sm{min-height:40px; font-size:13.5px; padding:0 14px; border-radius:12px; box-shadow:0 3px 0 var(--sd)}
.pipeline{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.pipeline .pill{padding:6px 14px}
.pipeline svg{width:16px; height:16px; color:var(--muted)}
.countdown{font-variant-numeric:tabular-nums; font-weight:900; color:#B03A4D}
.lg-app[data-theme="dark"] .countdown{color:#FF9AAA}
.split{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:22px; align-items:start}

/* journey map (راه نگهبان) */
.journey{position:relative; height:980px; border-radius:28px; overflow:clip; border:2px solid var(--line); background:#BFE6FF}
.lg-app[data-theme="dark"] .journey{background:#121A36}
.j-layer{position:absolute; inset:-40px; pointer-events:none}
.j-far{transform:translate3d(calc(var(--mx) * 10px), calc(var(--sy) * -0.06px + var(--my) * 6px), 0)}
.j-mid{transform:translate3d(calc(var(--mx) * 24px), calc(var(--sy) * -0.14px + var(--my) * 12px), 0)}
.j-near{transform:translate3d(calc(var(--mx) * 40px), calc(var(--sy) * -0.24px + var(--my) * 20px), 0)}
.j-hill{position:absolute; border-radius:50% 50% 0 0}
.station{position:absolute; display:flex; flex-direction:column; align-items:center; gap:8px; width:150px; margin-left:-75px; text-align:center; z-index:3}
.station .node{width:84px; height:76px}
.station .label{background:var(--surface); border:2px solid var(--line); border-radius:12px; padding:4px 12px; font-size:13px; font-weight:900; box-shadow:0 3px 0 var(--line)}
.station.shadowed .node{filter:grayscale(1); opacity:.55}
.station.shadowed .label{color:var(--muted)}
.foot-dots{position:absolute; inset:0; pointer-events:none; z-index:2}
.foot-dots i{position:absolute; width:9px; height:13px; border-radius:50%; background:rgba(90,70,40,.35)}
.lg-app[data-theme="dark"] .foot-dots i{background:rgba(255,226,140,.45); box-shadow:0 0 8px rgba(255,210,90,.6)}

/* modal */
.modal-back{position:absolute; inset:0; z-index:60; background:rgba(10,14,30,.5); display:grid; place-items:center; padding:20px; animation:fade .25s ease both}
.modal{width:min(440px,100%); background:var(--surface); border:2px solid var(--line); border-radius:24px; padding:24px; display:flex; flex-direction:column; gap:14px; animation:pop .45s cubic-bezier(.2,1.4,.4,1) both}
@keyframes fade{from{opacity:0}to{opacity:1}}

@container lg (max-width: 1240px){
  .lg-shell.two{grid-template-columns:96px minmax(0,1fr)}
  .nav-sec,.child-switch .lbl,.panel-badge{display:none}
}
@container lg (max-width: 940px){
  .lg-shell.two{grid-template-columns:minmax(0,1fr); grid-template-areas:"top" "main" "nav"}
  .lg-shell.two .lg-top,.lg-shell.two .lg-main{padding-inline:16px}
  .split{grid-template-columns:minmax(0,1fr)}
  .mc-rows{grid-template-columns:minmax(0,1fr)}
  .mc-rows div:nth-child(odd){border-left:0}
  .mentor img{width:96px}
  .focus-title{font-size:25px}
  .journey{height:900px}
}
.hill-1{background:#A9DDB2}.hill-2{background:#86CC94}.hill-3{background:#63B877}
.lg-app[data-theme="dark"] .hill-1{background:#1C2750}.lg-app[data-theme="dark"] .hill-2{background:#22305E}.lg-app[data-theme="dark"] .hill-3{background:#2A3A6E}
.j-path{position:absolute; inset:0; width:100%; height:100%; z-index:1}
.j-path path{fill:none; stroke:#FFF7E0; stroke-width:26; stroke-linecap:round; stroke-linejoin:round}
.lg-app[data-theme="dark"] .j-path path{stroke:#3B4A7E}
.j-path path.dash{stroke:#E8C98C; stroke-width:4; stroke-dasharray:2 16}
.lg-app[data-theme="dark"] .j-path path.dash{stroke:#FFD76A}
.force{display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; padding:16px 10px; border:2px solid var(--line); border-radius:18px; background:var(--surface)}
.force .orbx{width:54px; height:54px; border-radius:50%; background:var(--cc); display:grid; place-items:center; color:#fff; box-shadow:0 4px 0 var(--ccd), 0 0 calc(var(--glow) * 18px) var(--cc)}
.force .orbx svg{width:26px; height:26px}
.force b{font-size:15px; font-weight:900}
.force small{font-size:12px; color:var(--muted); font-weight:700; line-height:1.7}
.like{display:inline-flex; align-items:center; gap:4px; min-height:44px; padding:0 6px 0 14px; border-radius:999px; border:2px solid var(--line); background:var(--surface); font-weight:800; font-size:14px}
.like button{width:32px; height:32px; border-radius:50%; border:0; background:var(--surface-2); color:var(--muted); cursor:pointer; display:grid; place-items:center}
.like button svg{width:14px; height:14px}
.vid-row{display:flex; align-items:center; gap:14px; padding:12px 14px; border-radius:16px; border:2px solid transparent; color:var(--ink) !important}
.vid-row:hover{background:var(--surface-2)}
.vid-row.on{border-color:var(--b); background:var(--b-tint)}
.vid-row .n{width:40px; height:40px; border-radius:12px; display:grid; place-items:center; font-weight:900; background:var(--lock); color:var(--lock-ink); flex:none}
.vid-row.done .n{background:var(--body); color:#fff}
.vid-row.on .n{background:var(--b); color:#fff}
.cover{aspect-ratio:1; border-radius:24px; background:#7446E0; display:grid; overflow:clip; box-shadow:0 8px 0 #5530B0; animation:float 6s ease-in-out infinite}
.design-index .tile-art{aspect-ratio:auto; min-height:110px}

.lg-app a.node{color:#fff}
.lg-app a.btn-y{color:var(--y-ink)}
.lg-app a.btn-b{color:#fff}
.lg-app a.btn-g{color:var(--ink)}
.lg-app a.try-btn{color:var(--b-text)}

/* زیرمنوی بخش‌ها: تالار (سرای من · تالار آینه) و خانه‌ی نگهبان (اتاق · نامه‌ی من) */
.seg{display:flex; flex-wrap:wrap; gap:6px; padding:6px; width:fit-content; max-width:100%; box-sizing:border-box; border:2px solid var(--line); border-radius:18px; background:var(--surface); box-shadow:0 3px 0 var(--line); position:relative; z-index:2}
.seg a{display:flex; align-items:center; gap:8px; min-height:46px; padding:0 18px 0 20px; border-radius:12px; font-weight:900; font-size:15px; color:var(--ink); text-decoration:none; transition:background-color .3s, color .3s}
.seg a:hover{background:var(--surface-2)}
.seg a.on{background:var(--b-tint); color:var(--b-text); box-shadow:inset 0 0 0 2px var(--b)}
.seg img{width:30px; height:30px; object-fit:contain}
.seg-tag{font-size:11px; font-weight:800; color:var(--muted); border:1.5px solid var(--line); border-radius:999px; padding:1px 8px}
@media (max-width: 560px){ .seg{width:100%} .seg a{flex:1 1 0; justify-content:center; padding:0 10px} }

/* ---- آرت‌های سه‌بعدی ---- */
.tile-art img.art{width:auto; height:90%; max-width:84%; object-fit:contain; align-self:end; filter:drop-shadow(0 10px 12px rgba(20,25,60,.22))}
.cover{place-items:center}
.cover-art{width:84%; height:84%; object-fit:contain; filter:drop-shadow(0 12px 14px rgba(20,25,60,.28))}
.post-art .post-img{place-self:center; height:240px; width:auto; max-width:90%; object-fit:contain; filter:drop-shadow(0 12px 14px rgba(20,25,60,.25))}

/* ---- سه نور: زنده و کلیک‌خور ---- */
.lights{position:relative; gap:14px}
button.light{position:relative; flex:none; padding:0; border:0; cursor:pointer; outline-offset:5px;
  animation:glowp 3.6s ease-in-out infinite, lwave 7s ease-in-out infinite;
  animation-delay:calc(var(--i,0) * -1.2s), calc(var(--i,0) * .22s);
  transition:transform .25s cubic-bezier(.3,1.6,.5,1), box-shadow .3s}
button.light::after{content:""; position:absolute; inset:-7px; border-radius:50%;
  background:radial-gradient(circle at 50% 0,#fff 0 2px,transparent 2.6px);
  animation:lorbit calc(4.5s + var(--i,0) * .9s) linear infinite; opacity:.85; pointer-events:none}
button.light::before{content:""; position:absolute; inset:0; border-radius:50%; border:2px solid var(--lc); opacity:0; pointer-events:none}
button.light:hover,button.light:focus-visible{transform:scale(1.28) translateY(-2px)}
button.light.on{transform:scale(1.32); box-shadow:0 0 0 4px var(--bg), 0 0 0 7px var(--lc), 0 0 22px 6px var(--lc)}
button.light.on::before{animation:lripple .7s ease-out}
.light-name{position:absolute; top:calc(100% + 10px); left:50%; translate:-50% 0; white-space:nowrap; font-size:12px; font-weight:900; color:var(--ink);
  background:var(--surface); border:2px solid var(--line); border-radius:999px; padding:2px 10px; opacity:0; transform:translateY(-4px) scale(.9);
  transition:opacity .2s, transform .2s; pointer-events:none; z-index:41}
button.light:hover .light-name,button.light:focus-visible .light-name{opacity:1; transform:none}
button.light.on .light-name{opacity:0}
.light-pop{position:absolute; top:calc(100% + 18px); inset-inline-start:-8px; z-index:40; width:340px; max-width:calc(100vw - 32px); box-sizing:border-box;
  display:flex; gap:12px; align-items:flex-end; padding:16px 16px 16px 14px; border-radius:22px; background:var(--surface);
  border:2px solid var(--lc); box-shadow:0 5px 0 var(--lc), 0 18px 40px rgba(15,20,50,.18);
  animation:lpop .38s cubic-bezier(.3,1.5,.5,1) both; transform-origin:85% 0}
.light-pop::before{content:""; position:absolute; top:-9px; inset-inline-start:22px; width:14px; height:14px; background:var(--surface);
  border-top:2px solid var(--lc); border-left:2px solid var(--lc); transform:rotate(45deg)}
.light-pop-art{width:92px; flex:none; align-self:center; animation:float 3.8s ease-in-out infinite; filter:drop-shadow(0 8px 10px rgba(20,25,60,.2))}
.light-pop-body{display:flex; flex-direction:column; gap:6px; min-width:0}
.light-pop-body b{font-size:21px; color:var(--lc); line-height:1.3}
.light-pop-body p{margin:0; font-size:13.5px; line-height:1.8; font-weight:700; color:var(--ink)}
.light-pop-last{font-size:12.5px; font-weight:800; color:var(--muted)}
.light-go{align-self:flex-start; margin-top:4px; min-height:44px; display:inline-flex; align-items:center; padding:0 16px; border-radius:14px;
  background:var(--lc); color:#fff !important; font-weight:900; font-size:14px; text-decoration:none; box-shadow:0 4px 0 rgba(0,0,0,.18)}
.light-go:active{transform:translateY(3px); box-shadow:none}
.light-x{position:absolute; top:6px; inset-inline-end:6px; width:44px; height:44px; display:grid; place-items:center; border:0; background:none; color:var(--muted); cursor:pointer; border-radius:12px}
.light-x svg{width:18px; height:18px}
.light-x:hover{background:var(--surface-2); color:var(--ink)}
@keyframes lwave{0%,82%,100%{scale:1} 86%{scale:1.32} 90%{scale:.94} 94%{scale:1.06}}
@keyframes lorbit{to{rotate:360deg}}
@keyframes lripple{0%{opacity:.9; scale:1} 100%{opacity:0; scale:2.6}}
@keyframes lpop{0%{opacity:0; transform:translateY(-8px) scale(.85)} 100%{opacity:1; transform:none}}
@media (prefers-reduced-motion: reduce){ button.light,button.light::after,.light-pop,.light-pop-art{animation:none} }

/* ---- دکمه‌های تصویری دسته‌ها (بازارچه) ---- */
.cat-row{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.cats{display:flex; flex-wrap:wrap; gap:12px}
.cat{position:relative; width:66px; height:66px; display:grid; place-items:center; padding:0; border-radius:20px; border:2px solid var(--line); background:var(--surface);
  cursor:pointer; box-shadow:0 4px 0 var(--line); transition:transform .18s cubic-bezier(.3,1.6,.5,1), box-shadow .15s, background-color .3s, border-color .3s}
.cat svg{width:42px; height:42px; transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.cat:hover svg,.cat:focus-visible svg{transform:scale(1.12) rotate(-6deg)}
.cat:active{transform:translateY(4px); box-shadow:0 0 0 var(--line)}
.cat.on{border-color:var(--b); background:var(--b-tint); box-shadow:0 4px 0 var(--b)}
.cat.on svg{animation:catbob 2.4s ease-in-out infinite}
.cat-tip{position:absolute; top:calc(100% + 10px); left:50%; translate:-50% 0; white-space:nowrap; font-size:12px; font-weight:900; color:var(--ink);
  background:var(--surface); border:2px solid var(--line); border-radius:999px; padding:2px 10px; opacity:0; transform:translateY(-4px) scale(.9);
  transition:opacity .18s, transform .18s; pointer-events:none; z-index:5}
.cat:hover .cat-tip,.cat:focus-visible .cat-tip{opacity:1; transform:none}
.cat-now{font-size:20px; color:var(--b-text)}
@keyframes catbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media (max-width:560px){ .cats{gap:8px} .cat{width:56px; height:56px; border-radius:16px} .cat svg{width:36px; height:36px} }
@media (prefers-reduced-motion: reduce){ .cat.on svg{animation:none} }

/* ---- بازارچه: دکمه‌های تصویری ---- */
.cats.pics{gap:14px; padding-top:14px}
.cats.pics .cat{width:92px; height:92px; border-radius:26px; overflow:visible}
.cats.pics .cat img{position:absolute; left:50%; bottom:6px; width:112%; height:auto; max-height:118%; object-fit:contain; translate:-50% 0;
  filter:drop-shadow(0 6px 6px rgba(20,25,60,.22)); transition:transform .28s cubic-bezier(.3,1.6,.5,1); transform-origin:50% 100%}
.cats.pics .cat:hover img,.cats.pics .cat:focus-visible img{transform:scale(1.1) rotate(-5deg)}
.cats.pics .cat.on img{animation:catbob 2.4s ease-in-out infinite}
.cats.pics .cat:not(.on) img{filter:drop-shadow(0 6px 6px rgba(20,25,60,.18)) saturate(.85)}
@media (max-width:560px){ .cats.pics{gap:10px} .cats.pics .cat{width:72px; height:72px; border-radius:20px} }

/* ---- مسیر بلندتر با شخصیت‌ها ---- */
.mascot.m-char img{animation-duration:5s}
.mascot.m-far{opacity:.9; filter:saturate(.9)}
.mascot.m-far img{animation-duration:6s; animation-delay:-2s}
.path-scene{position:relative; height:300px; margin:40px 0 10px; display:flex; align-items:flex-end; justify-content:center; gap:40px; z-index:2}
.path-scene .scene-glow{position:absolute; left:50%; bottom:20px; width:420px; height:120px; translate:-50% 0; border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(255,194,26,.35), transparent 70%); pointer-events:none}
.path-scene img{display:block; height:100%; width:auto; filter:drop-shadow(0 18px 18px rgba(30,40,80,.2)); animation:float 4.6s ease-in-out infinite}
.path-scene .scene-l{height:240px}
.path-scene .scene-r{height:220px; margin-bottom:60px}
.path-scene .scene-r img{animation-duration:3.8s; animation-delay:-1.4s}
@container lg (max-width: 940px){
  .mascot.m-char{width:120px !important; left:auto !important; right:-8px !important}
  .mascot.m-far{display:none}
  .path-scene{height:200px; gap:12px} .path-scene .scene-l{height:170px} .path-scene .scene-r{height:150px; margin-bottom:40px}
}

/* ---- بازارچه: چهار کاشی رنگی + دکمه‌ی «همه» ---- */
.cat-pick{display:flex; flex-direction:column; gap:14px}
.cat-grid{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px}
.cat-tile{display:flex; flex-direction:column; align-items:center; gap:8px; padding:0; border:0; background:none; cursor:pointer; color:var(--ink); font:inherit}
.cat-box{position:relative; width:100%; aspect-ratio:1; border-radius:24px; background:var(--cc); box-shadow:0 6px 0 var(--cd); display:grid; place-items:center; overflow:hidden;
  transition:transform .2s cubic-bezier(.3,1.6,.5,1), box-shadow .2s}
.cat-box::before{content:""; position:absolute; inset:0; opacity:.2; background-image:radial-gradient(circle at 10px 10px,#fff 2px,transparent 2.5px); background-size:22px 22px}
.cat-box img{position:relative; width:86%; height:86%; object-fit:contain; filter:drop-shadow(0 8px 8px rgba(20,25,60,.25)); transition:transform .28s cubic-bezier(.3,1.6,.5,1)}
.cat-tile .cat-box img{animation:catfly 3.2s ease-in-out infinite}
.cat-tile:nth-child(2) .cat-box img{animation-delay:-.8s; animation-duration:3.6s}
.cat-tile:nth-child(3) .cat-box img{animation-delay:-1.6s; animation-duration:3s}
.cat-tile:nth-child(4) .cat-box img{animation-delay:-2.4s; animation-duration:3.4s}
.cat-tile:hover .cat-box img,.cat-tile:focus-visible .cat-box img{scale:1.08}
.cat-tile:active .cat-box{transform:translateY(5px); box-shadow:0 1px 0 var(--cd)}
.cat-tile.on .cat-box{box-shadow:0 6px 0 var(--cd), 0 0 0 4px var(--bg), 0 0 0 7px var(--cc)}
.cat-tile.on .cat-box img{animation-name:catflyhi; animation-duration:2.4s}
@keyframes catfly{0%,100%{translate:0 4px; rotate:-2deg} 50%{translate:0 -8px; rotate:2deg}}
@keyframes catflyhi{0%,100%{translate:0 6px; rotate:-3deg} 50%{translate:0 -14px; rotate:3deg}}
.cat-lbl{font-weight:900; font-size:15px}
.cat-tile.on .cat-lbl{color:var(--b-text)}
.cat-btn{width:100%; min-height:48px; border-radius:16px; border:2px solid var(--line); background:var(--surface); color:var(--ink); font:inherit; font-weight:900; font-size:15px;
  cursor:pointer; box-shadow:0 4px 0 var(--line); transition:transform .15s, box-shadow .15s, background-color .3s}
.cat-btn:active{transform:translateY(4px); box-shadow:0 0 0 var(--line)}
.cat-btn.on{border-color:var(--b); background:var(--b-tint); color:var(--b-text); box-shadow:0 4px 0 var(--b)}
@container lg (max-width: 940px){ .cat-grid{gap:10px} .cat-box{border-radius:18px} .cat-lbl{font-size:13px} }
@media (prefers-reduced-motion: reduce){ .cat-tile .cat-box img,.cat-tile.on .cat-box img{animation:none} }

/* ---- مسیر: یک شخصیت برای هر منزل، هر کدام با حرکت خودش ---- */
.mascot img.mv-hop{animation:mvhop 3.4s ease-in-out infinite; transform-origin:50% 100%}
.mascot img.mv-skate{animation:mvskate 4.4s ease-in-out infinite; transform-origin:50% 90%}
.mascot img.mv-fly{animation:mvfly 5.2s ease-in-out infinite}
.mascot img.mv-sway{animation:mvsway 1.8s ease-in-out infinite; transform-origin:40% 95%}
@keyframes mvhop{0%,100%{transform:translateY(0) scale(1,1)} 14%{transform:translateY(0) scale(1.02,.98)} 45%{transform:translateY(-14px) scale(.99,1.01)} 72%{transform:translateY(0) scale(1.015,.985)} 84%{transform:translateY(-3px) scale(1,1)}}
@keyframes mvskate{0%,100%{transform:translateX(0) rotate(0)} 25%{transform:translateX(-46px) rotate(-7deg)} 50%{transform:translateX(0) rotate(0)} 75%{transform:translateX(22px) rotate(6deg)}}
@keyframes mvfly{0%,100%{transform:translate(0,0) rotate(-3deg)} 25%{transform:translate(18px,-26px) rotate(4deg)} 50%{transform:translate(4px,-8px) rotate(-1deg)} 75%{transform:translate(-14px,-30px) rotate(-6deg)}}
@keyframes mvsway{0%,100%{transform:rotate(-4deg) translateY(0)} 50%{transform:rotate(5deg) translateY(-6px)}}
.mascot:has(img.mv-hop) .shadow-blob{animation:mvshadow 3.4s ease-in-out infinite}
@keyframes mvshadow{0%,14%,72%,100%{transform:scale(1); opacity:1} 45%{transform:scale(.82); opacity:.7} 84%{transform:scale(.96)}}
@media (prefers-reduced-motion: reduce){ .mascot img.mv-hop,.mascot img.mv-skate,.mascot img.mv-fly,.mascot img.mv-sway,.mascot .shadow-blob{animation:none} }

/* ---- دیوار نمایش در اتاق نگهبان ---- */
.wall-frames{position:absolute; top:40px; left:36px; display:flex; gap:14px; align-items:flex-start}
.frame{width:74px; height:88px; border-radius:6px; background:var(--fc); border:6px solid #8A5A2B; box-shadow:0 6px 10px rgba(60,40,10,.25), inset 0 0 0 3px rgba(255,255,255,.35);
  transform:rotate(var(--tilt,0deg)); display:grid; place-items:end center; padding-bottom:6px; box-sizing:border-box; position:relative}
.frame::before{content:""; position:absolute; top:-18px; left:50%; width:2px; height:16px; background:#8A5A2B; translate:-50% 0}
.frame span{font-size:10.5px; font-weight:900; color:#fff; background:rgba(0,0,0,.28); border-radius:6px; padding:1px 6px}
.lg-app[data-theme="dark"] .frame{border-color:#B98A55}
.showcase{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:16px}
.show-card{display:flex; flex-direction:column; border-radius:20px; overflow:clip; background:var(--surface); border:2px solid var(--line); box-shadow:0 5px 0 var(--line)}
.show-art{min-height:150px; background:var(--fc); display:grid; position:relative}
.show-art .process{background:var(--surface); border-radius:14px; padding:10px; font-size:13px}
.show-body{display:flex; flex-direction:column; gap:8px; padding:14px 16px 16px; align-items:flex-start}
.show-body b{font-size:15px; line-height:1.6}
.show-rm{min-height:44px; padding:0 4px; border:0; background:none; color:var(--muted); font:inherit; font-size:13px; font-weight:800; cursor:pointer; text-decoration:underline; text-underline-offset:3px}
.visit-banner{display:flex; gap:12px; align-items:center; padding:14px 18px; border-radius:18px; background:var(--b-tint); border:2px solid var(--b); color:var(--b-text); font-weight:800; font-size:14px; line-height:1.8}
.visit-banner svg{width:26px; height:26px; flex:none}
.owner-only{display:flex; flex-direction:column; gap:22px}
.who-link{font-weight:900; color:var(--ink) !important; text-decoration:none; border-bottom:2px dashed var(--line)}
.who-link:hover{border-bottom-color:var(--b); color:var(--b-text) !important}
.on-wall{display:inline-flex; align-items:center; gap:6px; align-self:flex-start; min-height:36px; font-size:13px; font-weight:900; color:var(--b-text) !important; text-decoration:none}
.on-wall svg{width:18px; height:18px}
.friend-head{display:flex; align-items:center; gap:14px}
.back-link{display:inline-flex; align-items:center; gap:6px; align-self:flex-start; min-height:44px; font-weight:900; font-size:14px; text-decoration:none}
.back-link svg{width:18px; height:18px}
@container lg (max-width: 940px){ .wall-frames{top:24px; left:16px; gap:8px} .frame{width:54px; height:66px; border-width:4px} .frame span{font-size:9px} }

/* ---- پست نمونه روی دیوار نمایش ---- */
.wall-post{position:relative; display:flex; flex-direction:column; gap:14px; padding:20px; border-radius:24px; background:var(--surface); border:2px solid var(--line);
  box-shadow:0 6px 0 var(--line); margin-top:6px}
.wp-pin{position:absolute; top:-10px; left:50%; width:22px; height:22px; translate:-50% 0; border-radius:50%; background:#FF7A8A; box-shadow:inset -3px -3px 0 rgba(0,0,0,.15), 0 3px 4px rgba(0,0,0,.2)}
.new-tag{color:var(--b-text)}
.wp-art{border-radius:18px; overflow:clip; border:2px solid var(--line); line-height:0}
.wp-svg{display:block; width:100%; height:auto}
.wp-title{margin:0; font-size:22px; line-height:1.5}
.wp-foot{display:flex; flex-direction:column; gap:12px; padding-top:12px; border-top:2px dashed var(--line)}
.wp-actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.wp-echo{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.react.on{border-color:var(--b); background:var(--b-tint); color:var(--b-text)}
.wp-sent{font-size:13px; font-weight:800; color:var(--b-text); animation:lpop .3s ease-out both}
.wp-tried{display:flex; align-items:center; gap:10px; font-size:14px; font-weight:700; line-height:1.7}
.wp-tried img{width:44px; height:44px; object-fit:contain; flex:none}
.save-btn{display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 14px; border-radius:14px; border:2px solid var(--line); background:var(--surface);
  color:var(--ink); font:inherit; font-weight:900; font-size:14px; cursor:pointer; box-shadow:0 3px 0 var(--line)}
.save-btn svg{width:18px; height:18px}
.save-btn.on{border-color:var(--y,#FFC21A); background:rgba(255,194,26,.16)}
.save-btn.on svg{fill:#FFC21A; stroke:#D99A00}

/* ---- واکنش‌های تصویری (تمپلیت؛ آرت نهایی جایگزین می‌شود) ---- */
.rx-row{display:flex; gap:10px; flex-wrap:wrap}
.rx{position:relative; width:54px; height:54px; padding:0; border-radius:50%; border:2px solid var(--line); background:var(--rb); display:grid; place-items:center;
  cursor:pointer; box-shadow:0 3px 0 var(--line); transition:transform .25s cubic-bezier(.3,1.7,.5,1), box-shadow .2s, border-color .2s}
.rx svg{width:32px; height:32px; transition:transform .3s cubic-bezier(.3,1.7,.5,1)}
.lg-app[data-theme="dark"] .rx{border-color:transparent}
.rx:hover,.rx:focus-visible{transform:translateY(-4px) rotate(-6deg)}
.rx:hover svg,.rx:focus-visible svg{transform:scale(1.15)}
.rx:active{transform:scale(.88)}
.rx.on{border-color:var(--b); box-shadow:0 3px 0 var(--b), 0 0 0 4px var(--b-tint); animation:rxpop .5s cubic-bezier(.3,1.7,.5,1)}
.rx.on svg{animation:rxbeat 1.6s ease-in-out infinite}
.rx-tip{position:absolute; top:calc(100% + 8px); left:50%; translate:-50% 0; white-space:nowrap; font-size:11.5px; font-weight:900; color:var(--ink);
  background:var(--surface); border:2px solid var(--line); border-radius:999px; padding:1px 9px; opacity:0; transform:translateY(-4px) scale(.9); transition:opacity .18s, transform .18s; pointer-events:none; z-index:5}
.rx:hover .rx-tip,.rx:focus-visible .rx-tip{opacity:1; transform:none}
.rx-got{width:44px; height:44px; cursor:default; box-shadow:none; border:3px solid var(--surface)}
.rx-got svg{width:26px; height:26px}
.rx-pile{display:flex}
.rx-pile .rx-got + .rx-got{margin-inline-start:-12px}
.rx-pile .rx-got:nth-child(1){animation:float 3.4s ease-in-out infinite}
.rx-pile .rx-got:nth-child(2){animation:float 3.4s ease-in-out -1.1s infinite}
.rx-pile .rx-got:nth-child(3){animation:float 3.4s ease-in-out -2.2s infinite}
@keyframes rxpop{0%{transform:scale(.7)} 60%{transform:scale(1.18)} 100%{transform:scale(1)}}
@keyframes rxbeat{0%,100%{transform:scale(1)} 50%{transform:scale(1.12)}}
@media (prefers-reduced-motion: reduce){ .rx.on,.rx.on svg,.rx-pile .rx-got{animation:none} }

/* =====================================================================
   دوستان، کد نگهبان و دعوت (نسخه‌ی ۳ سند)
   ===================================================================== */
.code-card{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:22px; align-items:center}
.gcode{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.gcode span{font-family:'Lalezar','Vazirmatn',Tahoma,sans-serif; font-size:24px; line-height:1.3; padding:6px 16px; border-radius:14px; background:var(--surface-2); border:2px solid var(--line); box-shadow:0 3px 0 var(--line); color:var(--ink); animation:pop .6s cubic-bezier(.2,1.5,.4,1) both}
.gcode span:nth-child(2){animation-delay:.08s}.gcode span:nth-child(3){animation-delay:.16s}
.gcode span.num{background:var(--y); border-color:var(--y-d); box-shadow:0 3px 0 var(--y-d); color:var(--y-ink); animation-delay:.24s}
.qr{width:132px; height:132px; border-radius:18px; background:#fff; border:2px solid var(--line); padding:12px; display:grid; grid-template-columns:repeat(9,1fr); grid-template-rows:repeat(9,1fr); gap:2px; box-shadow:0 4px 0 var(--line)}
.qr i{background:#1B2140; border-radius:2px}
.qr i.o{background:transparent}
.code-inputs{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) 90px; gap:10px}
.found{display:flex; align-items:center; gap:14px; padding:14px 16px; border:2px dashed var(--b); border-radius:18px; background:var(--b-tint); animation:stage-in .45s cubic-bezier(.2,.9,.3,1) both}
.found b{font-size:16px; font-weight:900}
.fr-list{display:flex; flex-direction:column}
.fr-row{display:flex; align-items:center; gap:14px; padding:12px 4px; border-bottom:1.5px dashed var(--line); flex-wrap:wrap}
.fr-row:last-child{border-bottom:0}
.fr-row .who{display:flex; flex-direction:column; min-width:0; flex:1 1 140px}
.fr-row .who b{font-size:15.5px; font-weight:900}
.fr-acts{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.fr-more{display:flex; gap:8px; flex-wrap:wrap; width:100%; padding:8px 60px 4px 0; animation:stage-in .35s ease both}
.fr-more .btn{min-height:40px}
.way{font-size:11.5px; font-weight:900; color:var(--muted); background:var(--surface-2); border:1.5px solid var(--line); border-radius:999px; padding:1px 9px; align-self:flex-start}
.cheer{position:relative; border-radius:18px; padding:14px; min-height:150px; display:flex; flex-direction:column; justify-content:flex-end; gap:6px; overflow:clip; background:var(--cbg); border:2px solid transparent; cursor:pointer; text-align:right; font-family:inherit; color:#2A2833; box-shadow:0 4px 0 rgba(0,0,0,.08); transition:transform .2s, box-shadow .2s, border-color .2s}
.cheer:hover{transform:translateY(-3px) rotate(-1deg)}
.cheer.sel{border-color:var(--b); box-shadow:0 4px 0 var(--b), 0 0 0 4px var(--b-tint)}
.cheer svg{position:absolute; top:10px; left:10px; width:74px; height:74px}
.cheer b{font-family:'Lalezar','Vazirmatn',Tahoma,sans-serif; font-weight:400; font-size:19px; line-height:1.4; position:relative}
.cheer-got{max-width:300px; cursor:default; animation:float 5s ease-in-out infinite}
.limit{display:inline-flex; gap:5px; align-items:center}
.limit i{width:12px; height:12px; border-radius:50%; background:var(--y); box-shadow:0 0 calc(var(--glow) * 8px) rgba(255,190,30,.8)}
.limit i.u{background:var(--lock); box-shadow:none}
.req-badge{display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 6px; border-radius:999px; background:var(--y); color:var(--y-ink); font-size:12px; font-weight:900}
.invite-card{display:flex; gap:14px; align-items:center; flex-wrap:wrap; padding:14px 16px; border-radius:18px; border:2px solid var(--line); background:var(--surface)}
.invite-card .ic{width:52px; height:52px; border-radius:16px; background:var(--b-fill); display:grid; place-items:center; color:#fff; box-shadow:0 4px 0 var(--b-fill-d); flex:none}
.invite-card .ic svg{width:28px; height:28px}
.friend-cta{display:flex; gap:10px; flex-wrap:wrap; margin-inline-start:auto}
.ref-steps{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; counter-reset:rs}
.ref-steps div{position:relative; padding:34px 14px 14px; border:2px solid var(--line); border-radius:16px; background:var(--surface-2); font-size:13px; font-weight:700; line-height:1.8}
.ref-steps div::before{counter-increment:rs; content:counter(rs); position:absolute; top:-12px; right:14px; width:30px; height:30px; border-radius:50%; background:var(--b-fill); color:#fff; display:grid; place-items:center; font-weight:900; box-shadow:0 3px 0 var(--b-fill-d)}
.link-box{display:flex; gap:10px; align-items:center; border:2px dashed var(--line); border-radius:14px; padding:6px 6px 6px 14px; background:var(--surface-2)}
.link-box code{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; direction:ltr; text-align:left; font-size:13px; font-weight:700; color:var(--muted)}
@container lg (max-width: 940px){
  .code-card{grid-template-columns:minmax(0,1fr)}
  .code-inputs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ref-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fr-more{padding-right:0}
}
.cheer-ic{position:absolute; top:6px; left:12px; font-size:46px; line-height:1; color:rgba(42,40,51,.5); font-family:'Vazirmatn',Tahoma,sans-serif}

/* =====================================================================
   موبایل: نوار پایین با برچسب، نوار بالای جمع‌وجور، کارت‌ها و شیت‌ها
   ===================================================================== */
.lg-app{-webkit-tap-highlight-color:transparent}
@keyframes navbob{0%{transform:translateY(0) scale(1)}40%{transform:translateY(-5px) scale(1.12)}100%{transform:none}}
@keyframes sheet{0%{transform:translateY(100%)}100%{transform:none}}
@media (hover: none){
  .tile:hover,.node:hover,.btn:hover,.react:hover,.cheer:hover,.rx:hover{transform:none}
  .tile:hover{box-shadow:0 5px 0 var(--line)}
  .node:hover{box-shadow:0 8px 0 var(--cd)}
}
@container lg (max-width: 940px){
  .lg-nav{padding:6px 4px calc(6px + env(safe-area-inset-bottom)); background:color-mix(in srgb, var(--surface) 92%, transparent); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:0 -8px 24px -16px rgba(20,25,60,.35)}
  .lg-nav-inner{gap:2px; overflow-x:auto; scrollbar-width:none; justify-content:space-between}
  .lg-nav-inner::-webkit-scrollbar{display:none}
  .nav-item{flex:1 0 auto; flex-direction:column; justify-content:center; gap:3px; min-width:62px; min-height:60px; padding:6px 6px 4px; border:0; border-radius:16px}
  .nav-item .lbl{display:block !important; font-size:10.5px; font-weight:900; line-height:1.3; white-space:nowrap}
  .nav-item .nav-tag{display:none}
  .nav-ico{width:30px; height:30px}
  .nav-ico-s{width:28px; height:28px}
  .nav-item.on{background:var(--b-tint)}
  .nav-item.on .nav-ico,.nav-item.on .nav-ico-s{animation:navbob .55s cubic-bezier(.3,1.7,.5,1)}
  .lg-top{gap:8px; padding:8px 12px; background:color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px)}
  .lg-top .theme-toggle,.focus-top .theme-toggle{width:64px; height:38px}
  .lg-top .theme-toggle .knob,.focus-top .theme-toggle .knob{width:30px; height:30px; top:2px; right:2px}
  .lg-app[data-theme="dark"] .lg-top .theme-toggle .knob,.lg-app[data-theme="dark"] .focus-top .theme-toggle .knob{transform:translateX(-24px)}
  .theme-toggle .knob svg{width:17px; height:17px}
  .chip-coin{font-size:15px; padding:0 2px; gap:4px}
  .chip-coin img{width:32px; height:24px}
  .avatar{width:40px; height:40px}
}
@container lg (max-width: 640px){
  .lg-main{padding:14px 12px 32px}
  .lg-shell.two .lg-main{padding:14px 12px 32px}
  .lg-aside{padding:4px 12px 24px; gap:16px}
  .lights{gap:10px}
  .light{width:20px; height:20px}
  .pg{gap:20px}
  .hero{border-radius:22px; padding:20px 18px 128px; gap:6px}
  .hero h1{font-size:28px}
  .hero p{font-size:14px; line-height:1.85}
  .hero-art{width:118px}
  .card{padding:16px; border-radius:20px; gap:12px}
  .card-title{font-size:19px}
  .sec-title{font-size:21px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
  .grid.design-index{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tile{border-radius:18px}
  .tile-body{padding:10px 12px 12px}
  .tile-title{font-size:14.5px; line-height:1.6}
  .tile-meta{font-size:11.5px}
  .tile .buy-row{flex-wrap:wrap}
  .grid-2{grid-template-columns:minmax(0,1fr); gap:14px}
  .tabs{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-inline:-12px; padding:2px 12px 6px}
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:none}
  .unit-banner{border-radius:16px; padding:12px 14px; top:62px; gap:10px}
  .unit-title{font-size:19px}
  .unit-kicker{font-size:12.5px}
  .guide-btn{min-height:44px; padding:0 12px}
  .path-nodes{gap:22px; padding-top:52px}
  .node{width:68px; height:62px}
  .node.big{width:82px; height:76px}
  .peek{width:84px; top:-38px}
  .row2{grid-template-columns:minmax(0,1fr)}
  .btn{min-height:48px}
  .modal-back{place-items:end center; padding:0}
  .modal{width:100% !important; max-width:none; border-radius:26px 26px 0 0; border-bottom:0; padding:18px 16px calc(20px + env(safe-area-inset-bottom)); max-height:88%; overflow:auto; animation:sheet .45s cubic-bezier(.2,.9,.3,1) both}
  .modal::before{content:""; display:block; width:44px; height:5px; border-radius:3px; background:var(--line); margin:0 auto 6px}
  .focus-top{padding:12px 12px 4px; gap:10px}
  .steps i{height:12px}
  .focus-body{padding:14px 14px 28px; gap:18px}
  .focus-title{font-size:23px}
  .focus-bar-in{padding:12px 14px calc(12px + env(safe-area-inset-bottom)); flex-wrap:nowrap}
  .focus-bar .btn{flex:1; min-width:0}
  .mentor{flex-direction:column; align-items:flex-start; gap:10px}
  .mentor img{width:88px}
  .bubble{font-size:15px; padding:12px 14px; line-height:1.95}
  .bubble::after{display:none}
  .choices{grid-template-columns:minmax(0,1fr); gap:10px}
  .mission-card .mc-head b{font-size:18px}
  .journey{height:800px; border-radius:22px}
  .station{width:120px; margin-left:-60px}
  .station .node{width:68px; height:62px}
  .station .label{font-size:12px}
  .room{height:240px; border-radius:22px}
  .gallery{columns:2 140px; column-gap:12px}
  .gallery .tile{margin-bottom:12px}
  .tbl{font-size:13px}
  .tbl td,.tbl th{padding:10px}
  .split{gap:16px}
  .gcode span{font-size:19px; padding:4px 12px}
  .qr{width:112px; height:112px; justify-self:center}
  .fr-acts{width:100%}
  .fr-acts .btn{flex:1 1 auto}
  .friend-cta{width:100%}
  .friend-cta .btn{flex:1}
  .ref-steps{grid-template-columns:minmax(0,1fr)}
  .sw-row{flex-wrap:wrap; gap:10px}
  .process{grid-template-columns:minmax(0,1fr)}
  .rx{width:48px; height:48px}
  .rx svg{width:28px; height:28px}
  .lanterns{gap:4px}
  .seg a{min-height:44px; font-size:13.5px}
  .seg img{width:24px; height:24px}
  .alert{padding:12px 14px; gap:10px; flex-wrap:wrap}
  .video{border-radius:16px}
  .ctrls{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-inline:-12px; padding:0 12px 4px}
  .ctrls .chip{flex:none}
}

/* =====================================================================
   نگهبانت: ستون کناری حذف شد و به یه آیکون کله‌ی کاراکتر + پاپ‌آپ تبدیل شد
   ===================================================================== */
.lg-shell.guide{grid-template-columns:248px minmax(0,1fr); grid-template-areas:"nav top" "nav main"; grid-template-rows:auto 1fr}
.lg-shell.guide .lg-top{padding:22px 40px 6px}
.lg-shell.guide .lg-main{padding-bottom:140px}

.guide-fab{--gx:calc(248px + 28px); position:fixed; z-index:80; bottom:28px; right:var(--gx); width:76px; height:76px; padding:0; border:0; border-radius:50%; cursor:pointer; background:var(--y); box-shadow:0 6px 0 var(--y-d), 0 14px 30px -10px rgba(20,25,60,.45); display:grid; place-items:center; overflow:visible; animation:gf-in .7s cubic-bezier(.2,1.6,.4,1) .3s both, gf-bob 3.6s ease-in-out 1s infinite; transition:transform .2s, box-shadow .2s}
.guide-fab:hover{transform:translateY(-3px) scale(1.04)}
.guide-fab:active{transform:translateY(4px); box-shadow:0 2px 0 var(--y-d)}
.guide-fab .gf-face{position:absolute; inset:4px; border-radius:50%; overflow:hidden; background:#FFE9A8}
.guide-fab img{width:100%; height:100%; object-fit:cover; object-position:50% 18%; transform:scale(1.6); transform-origin:50% 22%}
.guide-fab .gf-ring{position:absolute; inset:-6px; border-radius:50%; border:3px solid var(--y); opacity:.0; animation:gf-ring 2.4s ease-out 1.2s infinite; pointer-events:none}
.guide-fab .gf-dot{position:absolute; top:2px; left:4px; width:18px; height:18px; border-radius:50%; background:#1E9BF0; border:3px solid var(--bg); box-shadow:0 0 calc(6px + var(--glow) * 8px) rgba(30,155,240,.8)}
.guide-fab.seen .gf-dot,.guide-fab.seen .gf-ring{display:none}
.guide-fab.open{animation:none; box-shadow:0 3px 0 var(--y-d), 0 0 0 5px var(--b-tint)}
.guide-tease{position:fixed; z-index:79; bottom:44px; right:calc(248px + 28px + 90px); max-width:240px; background:var(--surface); color:var(--ink); border:2px solid var(--line); border-radius:18px 18px 4px 18px; padding:10px 14px; font-size:14px; font-weight:900; line-height:1.7; box-shadow:0 4px 0 var(--line), 0 14px 30px -14px rgba(20,25,60,.4); animation:gf-tease 9s ease 1.4s both; pointer-events:none}
.guide-back{position:fixed; inset:0; z-index:78; border:0; padding:0; margin:0; background:rgba(10,14,30,.28); cursor:pointer; animation:fade .25s ease both}

.lg-shell.guide .guide-pop{position:fixed; z-index:81; grid-area:auto; right:calc(248px + 28px); bottom:118px; width:390px; max-width:calc(100vw - 32px); max-height:min(660px, calc(100vh - 150px)); overflow:auto; overscroll-behavior:contain; padding:0 16px 16px; gap:14px; background:var(--bg); border:2px solid var(--line); border-radius:26px; box-shadow:0 24px 60px -20px rgba(20,25,60,.5); transform-origin:100% 100%; opacity:0; visibility:hidden; transform:translateY(18px) scale(.92); pointer-events:none; transition:opacity .25s ease, transform .35s cubic-bezier(.2,1.3,.4,1), visibility 0s linear .35s}
.lg-shell.guide .guide-pop.open{opacity:1; visibility:visible; transform:none; pointer-events:auto; transition:opacity .25s ease, transform .4s cubic-bezier(.2,1.3,.4,1), visibility 0s}
.guide-pop .guide-head{position:sticky; top:0; z-index:2; display:flex; align-items:center; gap:12px; margin:0 -16px; padding:14px 16px 12px; background:var(--bg); border-bottom:2px solid var(--line)}
.guide-av{width:46px; height:46px; flex:none; border-radius:50%; overflow:hidden; background:#FFE9A8; box-shadow:0 3px 0 var(--y-d)}
.guide-av img{width:100%; height:100%; object-fit:cover; object-position:50% 18%; transform:scale(1.6); transform-origin:50% 22%}
.guide-ttl{display:flex; flex-direction:column; flex:1; min-width:0}
.guide-ttl b{font-size:21px; line-height:1.3}
.guide-ttl span{font-size:12.5px; color:var(--muted); font-weight:700}
.guide-hi{display:flex; padding-top:2px}
.guide-hi .bubble{font-size:14.5px; padding:10px 14px; border-radius:18px 4px 18px 18px; animation:stage-in .5s ease .1s both}
.guide-hi .bubble::after{display:none}
.guide-pop .card{margin-top:0 !important; animation:rise-in .5s cubic-bezier(.2,.9,.3,1) both}
.guide-pop .card:nth-of-type(2){animation-delay:.08s}
.guide-pop .card:nth-of-type(3){animation-delay:.16s}
.guide-pop .card:nth-of-type(4){animation-delay:.24s}
.guide-pop .peek{display:none}
.guide-pop .foot{padding-top:4px}

@keyframes gf-in{0%{opacity:0; transform:translateY(30px) scale(.4)}100%{opacity:1; transform:none}}
@keyframes gf-bob{0%,100%{translate:0 0}50%{translate:0 -6px}}
@keyframes gf-ring{0%{opacity:.8; transform:scale(.9)}100%{opacity:0; transform:scale(1.35)}}
@keyframes gf-tease{0%{opacity:0; transform:translateX(14px) scale(.9)}6%{opacity:1; transform:none}85%{opacity:1; transform:none}100%{opacity:0; transform:translateX(8px)}}
@media (prefers-reduced-motion: reduce){ .guide-fab,.guide-fab .gf-ring,.guide-tease,.guide-pop .card,.guide-hi .bubble{animation:none !important} }

@container lg (max-width: 1240px){
  .lg-shell.guide{grid-template-columns:96px minmax(0,1fr)}
  .guide-fab{--gx:calc(96px + 22px)}
  .guide-tease{right:calc(96px + 22px + 90px)}
  .lg-shell.guide .guide-pop{right:calc(96px + 22px)}
}
@container lg (max-width: 940px){
  .lg-shell.guide{grid-template-columns:minmax(0,1fr); grid-template-areas:"top" "main" "nav"; grid-template-rows:auto}
  .lg-shell.guide .lg-top{padding:8px 12px}
  .lg-shell.guide .lg-main{padding-bottom:110px}
  .guide-fab{--gx:14px; width:64px; height:64px; bottom:calc(86px + env(safe-area-inset-bottom))}
  .guide-tease{right:92px; bottom:calc(100px + env(safe-area-inset-bottom)); max-width:200px; font-size:13px}
  .lg-shell.guide .guide-pop{right:0; left:0; bottom:0; width:auto; max-width:none; max-height:82%; border-radius:26px 26px 0 0; border-bottom:0; padding-bottom:calc(16px + env(safe-area-inset-bottom)); transform-origin:50% 100%; transform:translateY(100%)}
  .lg-shell.guide .guide-pop.open{transform:none}
  .guide-pop .guide-head::before{content:""; position:absolute; top:6px; left:50%; width:44px; height:5px; margin-left:-22px; border-radius:3px; background:var(--line)}
  .guide-pop .guide-head{padding-top:18px}
  .guide-back{z-index:80}
}

/* guide popup: compact message list (collapsed rows, one opens at a time) */
.lg-shell.guide .guide-pop{width:360px; gap:10px; max-height:min(600px, calc(100vh - 150px))}
.guide-pop .guide-hi{padding-top:4px}
.guide-pop .card{margin-top:0 !important; padding:0; gap:12px; border-radius:18px; box-shadow:0 3px 0 var(--line); transition:box-shadow .2s}
.guide-pop .card.shop-card{flex-direction:column; align-items:stretch}
.guide-pop .card.shop-card img{width:72px; align-self:center}
.guide-pop .card.gx-off > :not(.gm-row){display:none !important}
.guide-pop .card.gx-on{padding:0 16px 16px; box-shadow:0 3px 0 var(--b-tint), 0 0 0 2px var(--b) inset}
.guide-pop .card.gx-on > .gm-row{margin:0 -16px}
.guide-pop .card h2,.guide-pop .card h3{display:none}
.guide-pop .card .card-head{justify-content:flex-end; min-height:0}
.gm-row{display:flex; align-items:center; gap:12px; width:100%; min-height:58px; padding:8px 16px; border:0; background:none; color:var(--ink); font:inherit; text-align:right; cursor:pointer; border-radius:16px}
.gm-row:hover{background:var(--surface-2)}
.gm-row b{flex:1; min-width:0; font-size:15.5px; font-weight:900; line-height:1.5; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.gm-ic{flex:none; width:12px; height:12px; border-radius:50%; background:var(--line)}

.gm-chev{flex:none; width:10px; height:10px; border-left:2.6px solid var(--muted); border-bottom:2.6px solid var(--muted); transform:rotate(-45deg) translate(2px,-2px); transition:transform .25s}
.gm-row[aria-expanded="true"] .gm-chev{transform:rotate(135deg) translate(-1px,1px)}
.guide-pop .card.gx-on > :not(.gm-row){animation:rise-in .35s cubic-bezier(.2,.9,.3,1) both}
.guide-pop .foot{display:none}
@media (prefers-reduced-motion: reduce){ .guide-pop .card.gx-on > *{animation:none !important} }
.guide-pop .card.gx-on{gap:10px}
.guide-pop .card.gx-on > .card-head,.guide-pop .card .meta,.guide-pop .card .row2,.guide-pop .card > :has(.lanterns),.guide-pop .card .guide-line{display:none !important}
.guide-pop .card .btn{min-height:46px; font-size:15px}
.guide-pop .card p[style*="font-size: 18px"]{font-size:16px !important}
/* row icons: tinted tile per section */
.gm-ic{position:relative; width:38px; height:38px; border-radius:12px; display:grid; place-items:center; color:var(--gc,#6B7AA6); background:color-mix(in srgb, var(--gc,#6B7AA6) 16%, transparent); box-shadow:0 3px 0 color-mix(in srgb, var(--gc,#6B7AA6) 30%, transparent); transition:transform .2s}
.gm-ic svg{width:21px; height:21px}
.gm-row:hover .gm-ic{transform:rotate(-6deg) scale(1.06)}
.guide-hi + .card .gm-ic{box-shadow:0 3px 0 color-mix(in srgb, var(--gc) 30%, transparent)}
.guide-hi + .card .gm-ic::after{content:""; position:absolute; top:-3px; left:-3px; width:12px; height:12px; border-radius:50%; background:#1E9BF0; border:2.5px solid var(--surface)}
.guide-pop .card.gx-on{box-shadow:0 3px 0 color-mix(in srgb, var(--gc-on, var(--b)) 30%, transparent), 0 0 0 2px var(--b) inset}
.lg-app.dark .gm-ic,[data-theme="dark"] .gm-ic{background:color-mix(in srgb, var(--gc,#6B7AA6) 24%, transparent)}

/* Compose: Instagram-like post flow (pick → caption → share) */
.ig{position:relative; z-index:1; min-height:100%; display:flex; flex-direction:column; max-width:980px; margin:0 auto; padding:0 20px}
.ig-top{display:grid; grid-template-columns:48px 1fr 48px; align-items:center; gap:10px; padding:18px 0 12px}
.ig-top .theme-toggle{justify-self:end}
.ig-title{text-align:center; font-size:24px; line-height:1.4}
.ig-body{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:22px; align-items:start; padding-bottom:110px}
.ig-prev{position:sticky; top:12px}
.ig-tile{position:relative; aspect-ratio:1; border-radius:18px; border:0; padding:10px; color:#1d2340; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; gap:4px; text-align:right; font-family:inherit; cursor:pointer; overflow:hidden; box-shadow:0 4px 0 rgba(20,25,60,.18); transition:transform .15s, box-shadow .15s}
.ig-tile::before{content:""; position:absolute; inset:0; background:radial-gradient(circle at 75% 25%, rgba(255,255,255,.55), transparent 45%); pointer-events:none}
.ig-tile b{position:relative; font-size:13.5px; font-weight:900; line-height:1.5}
.ig-kind{position:absolute; top:8px; right:8px; font-size:11px; font-weight:900; background:rgba(255,255,255,.75); border-radius:999px; padding:2px 9px}
.ig-tile:active{transform:scale(.96)}
.ig-tile.big{cursor:default; border-radius:26px; padding:22px; box-shadow:0 6px 0 rgba(20,25,60,.18), 0 24px 50px -24px rgba(20,25,60,.5)}
.ig-tile.big b{font-size:30px; line-height:1.4}
.ig-tile.big .ig-kind{top:16px; right:16px; font-size:13px; padding:4px 12px}
.ig-ph{position:absolute; top:50%; left:50%; transform:translate(-50%,-60%); font-size:14px; font-weight:800; color:rgba(29,35,64,.55); border:2px dashed rgba(29,35,64,.3); border-radius:14px; padding:10px 16px}
.ig-sel{position:absolute; top:7px; left:7px; width:24px; height:24px; border-radius:50%; border:2.5px solid #fff; background:rgba(0,0,0,.15); display:grid; place-items:center; color:#fff}
.ig-sel svg{width:14px; height:14px; opacity:0}
.ig-tile.sel{box-shadow:0 0 0 3px var(--bg), 0 0 0 6px var(--b)}
.ig-tile.sel .ig-sel{background:var(--b)}
.ig-tile.sel .ig-sel svg{opacity:1}
.ig-side{display:flex; flex-direction:column; gap:14px; animation:rise-in .4s cubic-bezier(.2,.9,.3,1) both}
.ig-tabs{display:flex; gap:6px; border-bottom:2px solid var(--line)}
.ig-tab{flex:1; min-height:46px; border:0; background:none; color:var(--muted); font:inherit; font-weight:900; font-size:15px; cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-2px}
.ig-tab.on{color:var(--ink); border-bottom-color:var(--ink)}
.ig-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
.ig-cam{display:flex; flex-direction:column; align-items:center; gap:14px; padding:34px 16px; border:2px dashed var(--line); border-radius:22px; text-align:center}
.ig-shutter{width:74px; height:74px; border-radius:50%; border:5px solid var(--ink); box-shadow:inset 0 0 0 5px var(--bg), inset 0 0 0 40px var(--ink); opacity:.85}
.ig-lbl{font-weight:900; font-size:15px}
.ig-cap{min-height:96px; font-size:16px; line-height:1.9}
.ig-chips{display:flex; flex-wrap:wrap; gap:8px}
.ig-chips .like{padding:0 14px}
.ig-warn{display:flex; align-items:center; gap:10px; padding:10px 12px; border:2px solid var(--y); background:color-mix(in srgb, var(--y) 14%, var(--surface)); border-radius:16px; font-size:14px; font-weight:800; line-height:1.7; animation:rise-in .35s ease both}
.ig-warn img{width:40px; height:40px; flex:none; border-radius:50%; object-fit:cover; object-position:50% 18%; background:#FFE9A8}
.ig-warn > span{flex:1}
.ig-safe{display:flex; flex-wrap:wrap; gap:8px}
.ig-safe > span{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:800; color:var(--g-text, #1a7f45); background:color-mix(in srgb, #22A45D 12%, transparent); border-radius:999px; padding:4px 12px}
.ig-safe svg{width:14px; height:14px}
.ig-where{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.ig-w{display:flex; flex-direction:column; gap:4px; text-align:right; padding:12px 14px; border:2px solid var(--line); border-radius:16px; background:var(--surface); color:var(--ink); font:inherit; cursor:pointer; box-shadow:0 3px 0 var(--line)}

.ig-w > span{line-height:1.6}
.ig-w.on{border-color:var(--b); background:var(--b-tint); box-shadow:0 3px 0 var(--b)}
.ig-bar{position:fixed; left:0; right:0; bottom:0; z-index:6; display:flex; justify-content:center; padding:14px 20px calc(14px + env(safe-area-inset-bottom)); background:linear-gradient(to top, var(--bg) 60%, transparent)}
.ig-bar .btn{width:min(420px, 100%); min-height:56px; font-size:18px}
.ig-done{padding:40px 0 60px}
@container lg (max-width: 760px){
  .ig{padding:0 14px}
  .ig-body{grid-template-columns:minmax(0,1fr); gap:16px}
  .ig-prev{position:relative; top:0}
  .ig-body:not(.cap) .ig-tile.big{aspect-ratio:4/3}
  .ig-body.cap .ig-prev{width:110px}
  .ig-body.cap .ig-tile.big{border-radius:16px; padding:8px}
  .ig-body.cap .ig-tile.big b,.ig-body.cap .ig-ph{display:none}
  .ig-body.cap .ig-tile.big .ig-kind{top:6px; right:6px; font-size:10px; padding:1px 7px}
  .ig-where{grid-template-columns:1fr}
}
.ig-w > b{font-size:16px; font-weight:900; color:var(--ink)}
.ig-w > span{font-size:12.5px; color:var(--muted); font-weight:700}
/* Compose: single screen */
.ig-body.one{padding-bottom:120px}
.ig-strip{display:flex; gap:8px; overflow-x:auto; padding:6px 4px 10px; margin:0 -4px; scrollbar-width:none}
.ig-strip::-webkit-scrollbar{display:none}
.ig-tile.mini{flex:none; width:76px; height:76px; aspect-ratio:auto; border-radius:16px; padding:0}
.ig-tile.mini .ig-sel{top:5px; left:5px; width:20px; height:20px}
.ig-add{flex:none; width:76px; height:76px; border-radius:16px; border:2px dashed var(--line); background:var(--surface); color:var(--ink); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; font:inherit; font-size:12px; font-weight:900; cursor:pointer}
.ig-add svg{width:24px; height:24px}
.ig-row{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px}
.ig-where{display:flex; gap:4px; padding:4px; border:2px solid var(--line); border-radius:999px; background:var(--surface)}
.ig-w{min-height:40px; padding:0 16px; border:0; border-radius:999px; box-shadow:none; background:none; color:var(--muted); font:inherit; font-size:14px; font-weight:900; cursor:pointer}
.ig-w.on{background:var(--b-tint); color:var(--b-text); box-shadow:inset 0 0 0 2px var(--b); border:0}
.ig-done .ig-safe{justify-content:center}
@container lg (max-width: 760px){
  .ig-body.one .ig-tile.big{aspect-ratio:16/10}
  .ig-body.one .ig-tile.big b{font-size:24px}
}
.ig-side{min-width:0}
.ig-where .ig-w{display:inline-flex; flex-direction:row; align-items:center; justify-content:center; text-align:center; gap:0; padding:0 16px; min-height:40px; border:0; border-radius:999px; box-shadow:none; background:none; color:var(--muted)}
.ig-where .ig-w.on{background:var(--b-tint); color:var(--b-text); box-shadow:inset 0 0 0 2px var(--b)}
@container lg (max-width: 760px){
  .ig-body.one{gap:12px}
  .ig-body.one .ig-cap{min-height:76px}
}
.ig-chips .like{min-height:36px; font-size:13px; padding:0 12px}

/* Post sample (Instagram-like card) */
.pv-page{position:relative; z-index:1; max-width:1060px; margin:0 auto; padding:0 20px 60px}
.pv-cols{display:grid; grid-template-columns:minmax(0,470px) minmax(0,400px); justify-content:center; gap:36px; align-items:start}
.pv-col{display:flex; flex-direction:column; gap:12px}
.pv-h{font-size:14px; font-weight:900; color:var(--muted); padding:0 6px}
.pv{background:var(--surface); border:2px solid var(--line); border-radius:24px; box-shadow:0 4px 0 var(--line); overflow:clip; display:flex; flex-direction:column; animation:rise-in .6s cubic-bezier(.2,.9,.3,1) both}
.pv > .post-head{padding:12px 14px}
.pv-media{position:relative; aspect-ratio:1; background:#BFE6FF}
.pv-art{display:block; width:100%; height:100%; animation:fade .35s ease both}
.pv-count{position:absolute; top:12px; left:12px; font-size:12px; font-weight:900; color:#fff; background:rgba(20,25,60,.55); border-radius:999px; padding:3px 10px}
.pv-nav{position:absolute; top:0; bottom:0; width:40%; border:0; background:none; cursor:pointer}
.pv-nav.prev{right:0} .pv-nav.next{left:0}
.pv-dots{display:flex; justify-content:center; gap:5px; padding-top:10px}
.pv-dots i{width:7px; height:7px; border-radius:50%; background:var(--line); transition:background-color .3s, transform .3s}
.pv-dots i.on{background:var(--b); transform:scale(1.2)}
.pv-acts{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:8px 14px 18px}
.pv-acts .rx{width:46px; height:46px}
.pv-acts .rx svg{width:27px; height:27px}
.pv-save{width:46px; height:46px; flex:none; border-radius:14px; border:0; background:none; color:var(--ink); display:grid; place-items:center; cursor:pointer}
.pv-save svg{width:26px; height:26px}
.pv-save.on svg{fill:var(--y); stroke:var(--y-d); animation:rxpop .5s cubic-bezier(.3,1.7,.5,1)}
.pv-cap{padding:0 16px; font-size:15px; line-height:2; font-weight:600}
.pv-cap b{font-weight:900; margin-inline-end:4px}
.pv-tags{display:flex; flex-wrap:wrap; gap:8px; padding:10px 16px 0}
.pv-guide{display:flex; gap:10px; margin:14px 14px 0; padding:12px; border-radius:16px; background:var(--ai-tint, var(--surface-2)); border:2px solid var(--ai, var(--line))}
.pv-guide img{width:40px; height:40px; flex:none; border-radius:12px}
.pv-guide b{display:flex; align-items:center; gap:6px; font-size:14px; font-weight:900}
.pv-guide p{font-size:14px; line-height:1.9; font-weight:600; margin-top:2px}
.pv-try{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:12px 14px 16px; padding:12px 14px; border-radius:16px; background:var(--surface-2)}
.pv-try b{display:block; font-size:14.5px; font-weight:900}
.pv-try span{font-size:12.5px; color:var(--muted); font-weight:700}
.pv-try .try-btn{text-decoration:none}
.pv.own{padding:16px; gap:16px; animation-delay:.12s}
.pv-own-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.pv-own-row{display:flex; align-items:center; gap:12px}
.pv-thumb{width:72px; height:72px; border-radius:14px; overflow:clip; flex:none}
.pv-own-txt{display:flex; flex-direction:column; gap:2px}
.pv-own-txt b{font-size:16px; font-weight:900}
.pv-own-sec{display:flex; flex-direction:column; gap:8px; padding-top:14px; border-top:2px solid var(--line)}
.pv-own-sec > b{font-size:14.5px; font-weight:900}
.pv-got{display:flex; flex-wrap:wrap; gap:8px}
.pv-chip{display:inline-flex; align-items:center; gap:6px; padding:4px 12px 4px 6px; border-radius:999px; background:var(--rb); color:#1d2340; font-size:13px; font-weight:900}
.pv-chip svg{width:24px; height:24px}
.pv-tried{display:flex; align-items:center; gap:10px; font-size:14px; font-weight:700}
.pv-tried .av{width:34px; height:34px; font-size:14px}
.pv-own-acts{display:flex; gap:8px; flex-wrap:wrap}
.pv-own-acts .btn svg{width:18px; height:18px}
@container lg (max-width: 940px){
  .pv-cols{grid-template-columns:minmax(0,470px); gap:24px}
}
@container lg (max-width: 640px){
  .pv-page{padding:0 0 40px}
  .pv-page .ig-top{padding:14px 14px 10px}
  .pv{border-radius:0; border-left:0; border-right:0; box-shadow:none}
  .pv.own{border-radius:20px; margin:0 12px; border:2px solid var(--line)}
}
.req-dot{width:10px; height:10px; border-radius:50%; background:var(--y); box-shadow:0 0 0 3px var(--y-tint, rgba(255,194,26,.25)); margin-inline-start:2px}
/* wall: all posts as big cards */
.wall-post + .wall-post{margin-top:22px}
.wp-quote{line-height:1.9; aspect-ratio:480/300; display:grid; place-items:center; padding:28px; background:linear-gradient(140deg, color-mix(in srgb, var(--qc) 75%, #fff), var(--qc)); border:0}
.wp-quote p{color:#fff; font-size:clamp(18px, 3.2cqi, 26px); font-weight:900; text-align:center; text-shadow:0 2px 0 rgba(0,0,0,.12)}

/* راه نگهبان merged into مسیر رشد */
.mz-past{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:18px auto 0; width:fit-content; max-width:100%; padding:8px 14px; border-radius:999px; background:var(--surface); border:2px solid var(--line); font-size:13.5px; font-weight:700; color:var(--muted); position:relative; z-index:2}
.mz-past b{color:var(--ink); font-weight:900}
.mz-dot{width:24px; height:24px; border-radius:50%; display:grid; place-items:center; background:#3CC46B; color:#fff; flex:none}
.mz-dot svg{width:14px; height:14px}
.mz-link{font-weight:900; color:var(--b-text); text-decoration:none}
.mz-card{position:relative; z-index:2; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:16px; margin:16px auto 8px; max-width:640px; padding:16px 18px; border-radius:24px; background:linear-gradient(135deg, color-mix(in srgb, var(--b) 18%, var(--surface)), var(--surface)); border:2px solid var(--b); box-shadow:0 5px 0 var(--b)}
.mz-art{width:78px; height:78px; object-fit:contain; animation:float 4s ease-in-out infinite}
.mz-body{display:flex; flex-direction:column; gap:4px; min-width:0}
.mz-kick{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:900; color:var(--b-text)}
.mz-kick svg{width:15px; height:15px}
.mz-body b{font-size:20px; line-height:1.5}
.mz-body p{font-size:13px; color:var(--muted); font-weight:700; line-height:1.8}
.mz-cta{white-space:nowrap; text-decoration:none}
.mz-cta svg{width:18px; height:18px}
.mz-steps{display:flex; flex-direction:column; align-items:center; gap:14px; padding:40px 0 10px; position:relative; z-index:2}
.mz-steps i{width:10px; height:14px; border-radius:50%; background:var(--line)}
.mz-steps i:nth-child(odd){translate:-10px 0; rotate:-12deg}
.mz-steps i:nth-child(even){translate:10px 0; rotate:12deg}
.mz-gate{position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:8px; margin:0 auto 60px; max-width:360px; padding:22px 20px; text-align:center; border-radius:24px; border:2px dashed var(--line); background:color-mix(in srgb, var(--surface) 70%, transparent)}
.mz-lock{width:76px; height:70px; border-radius:22px; display:grid; place-items:center; background:var(--surface-2); color:var(--muted); box-shadow:0 5px 0 var(--line); filter:grayscale(1)}
.mz-lock svg{width:30px; height:30px}
.mz-gate b{font-size:22px; color:var(--muted)}
.mz-gate p{font-size:13.5px; color:var(--muted); font-weight:700; line-height:1.8}
@container lg (max-width: 640px){
  .mz-card{grid-template-columns:auto minmax(0,1fr); margin:14px 12px 4px}
  .mz-art{width:60px; height:60px}
  .mz-cta{grid-column:1 / -1}
  .mz-body b{font-size:17px}
  .mz-past{margin:14px 12px 0}
}
@container lg (max-width: 640px){
  .mz-past{border-radius:16px; padding:8px 12px; font-size:12.5px}
  .mz-body p{display:none}
  .mz-card{padding:12px 14px; gap:10px}
  .mz-cta{min-height:44px}
}
.seg > a > svg{width:30px; height:30px; flex:none}
@container lg (max-width: 640px){
  .seg{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; max-width:100%}
  .seg::-webkit-scrollbar{display:none}
  .seg a{white-space:nowrap; padding:0 12px; font-size:14px; flex:none}
  .seg img,.seg > a > svg{width:26px; height:26px}
}

/* path characters: empty side, grey when not reached, softer motion */
.path-nodes.locked .mascot img{filter:grayscale(1) brightness(1.04) drop-shadow(0 18px 18px rgba(30,40,80,.14)); opacity:.82}
.path-nodes.locked .mascot .say{color:var(--muted)}
.mascot img.mv-skate{animation:mvskate2 7s cubic-bezier(.45,0,.55,1) infinite}
.mascot img.mv-fly{animation:mvfly2 8s cubic-bezier(.45,0,.55,1) infinite}
.mascot img.mv-sway{animation:mvsway2 5s cubic-bezier(.45,0,.55,1) infinite}
@keyframes mvskate2{0%,100%{transform:translateX(0) rotate(0)} 30%{transform:translateX(-16px) rotate(-3deg)} 50%{transform:translateX(-4px) rotate(-.5deg)} 75%{transform:translateX(10px) rotate(2.5deg)}}
@keyframes mvfly2{0%,100%{transform:translate(0,0) rotate(-1.5deg)} 33%{transform:translate(8px,-12px) rotate(2deg)} 66%{transform:translate(-6px,-16px) rotate(-2.5deg)}}
@keyframes mvsway2{0%,100%{transform:rotate(-2deg) translateY(0)} 50%{transform:rotate(2.5deg) translateY(-5px)}}
@container lg (max-width: 640px){
  .mascot.m-char.m-l{left:-8px !important; right:auto !important}
}

/* profile menu (replaces «بیشتر»; parent switch) */
.prof{position:relative}
.prof-btn{padding:0; cursor:pointer; transition:box-shadow .2s, transform .2s}
.prof-btn:hover{transform:scale(1.05)}
.prof-btn.on{box-shadow:0 0 0 3px var(--b)}
.prof-back{position:fixed; inset:0; z-index:88; border:0; background:transparent; padding:0}
.prof-pop{position:absolute; z-index:89; top:calc(100% + 10px); left:0; width:280px; display:flex; flex-direction:column; gap:2px; padding:10px; border-radius:22px; background:var(--surface); border:2px solid var(--line); box-shadow:0 18px 40px -16px rgba(20,25,60,.45); transform-origin:12% 0; animation:prof-in .3s cubic-bezier(.2,1.3,.4,1) both}
@keyframes prof-in{from{opacity:0; transform:translateY(-6px) scale(.94)}}
.prof-head{display:flex; align-items:center; gap:12px; padding:6px 8px 12px; border-bottom:2px solid var(--line); margin-bottom:6px}
.prof-head b{display:block; font-size:18px}
.prof-head span{font-size:12.5px; color:var(--muted); font-weight:700}
.prof-av{width:48px; height:48px; border-radius:50%; overflow:hidden; background:var(--surface-2); flex:none; display:grid; place-items:center}
.prof-av img{width:120%; margin-top:12px}
.prof-row{display:flex; align-items:center; gap:12px; width:100%; min-height:46px; padding:0 10px; border:0; border-radius:14px; background:none; color:var(--ink); font:inherit; font-size:15px; font-weight:800; text-align:right; text-decoration:none; cursor:pointer}
.prof-row:hover{background:var(--surface-2)}
.prof-row svg{width:21px; height:21px; flex:none; color:var(--muted)}
.prof-row span{flex:1}
.prof-sep{height:2px; background:var(--line); margin:6px 4px}
.sw-ui{position:relative; width:44px; height:26px; border-radius:999px; background:var(--line); flex:none; transition:background-color .25s}
.sw-ui::after{content:""; position:absolute; top:3px; right:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 2px 3px rgba(0,0,0,.2); transition:transform .25s cubic-bezier(.3,1.5,.5,1)}
.sw-ui.on{background:var(--b)}
.sw-ui.on::after{transform:translateX(-18px)}
.prof-gate{display:flex; flex-direction:column; gap:10px; margin:6px 4px 2px; padding:12px; border-radius:16px; background:var(--b-tint); animation:rise-in .3s ease both}
.prof-gate p{font-size:13.5px; font-weight:700; line-height:1.8; color:var(--ink)}
.prof-gate .btn{text-decoration:none; align-self:flex-start}
@container lg (max-width: 640px){
  .prof-pop{position:fixed; top:64px; left:12px; right:12px; width:auto}
}
.lg-app a.prof-row,.lg-app a.prof-row:hover{color:var(--ink); text-decoration:none}
/* path characters: vertically centred on their unit's mission line */
.path-nodes > .mascot.m-char{top:50% !important; translate:0 calc(-50% + 20px)}
.path-nodes > .mascot.mascot-par{transform:translate3d(calc(var(--mx) * -10px), calc(var(--my) * -8px), 0)}
/* keep side characters inside the path column */
.path-nodes > .mascot.m-char.m-l{left:max(24px, calc(50% - 330px)) !important}
.path-nodes > .mascot.m-char.m-r{left:min(calc(100% - 226px), calc(50% + 130px)) !important}
@container lg (max-width: 940px){
  .path-nodes > .mascot.m-char{right:14px !important}
  .path-nodes > .mascot.m-char.m-l{left:14px !important; right:auto !important}
}
@container lg (max-width: 940px){
  .path-nodes > .mascot.m-side{right:8px !important}
  .path-nodes > .mascot.m-char.m-l{left:22px !important}
}
/* stronger path curve + bubbles centred over their character, so nothing leaves the column */
.lg-path{--curve:1.6}
.path-nodes .node-wrap{translate:calc(var(--off,0px) * var(--curve)) 0}
.path-nodes > .mascot .say{left:50% !important; translate:-50% 0}
@container lg (max-width: 940px){
  .lg-path{--curve:1.2}
  .path-nodes > .mascot .say{width:150px; font-size:12.5px; padding:8px 10px}
}
.path-nodes > .mascot.m-char.m-l{left:max(34px, calc(50% - 330px)) !important}
@container lg (max-width: 940px){ .path-nodes > .mascot.m-char.m-l{left:30px !important} }

/* ===== Parent panel: compact, visual ===== */
.pp{gap:18px}
.pp .sec-head p{margin-top:2px}
.alert.slim{padding:10px 14px; font-size:13.5px}
.pay{display:inline-flex; align-items:center; font-size:11.5px; font-weight:900; border-radius:999px; padding:2px 10px; white-space:nowrap; border:1.5px solid}
.pay.free{color:#1a8a4a; background:color-mix(in srgb,#3CC46B 14%,transparent); border-color:color-mix(in srgb,#3CC46B 40%,transparent)}
.pay.sub{color:#7a4fe0; background:color-mix(in srgb,#8E5CF7 14%,transparent); border-color:color-mix(in srgb,#8E5CF7 40%,transparent)}
.pay.buy{color:#c2641a; background:color-mix(in srgb,#FF9F43 16%,transparent); border-color:color-mix(in srgb,#FF9F43 45%,transparent)}
.pay.give,.pay.gift{color:#c2475a; background:color-mix(in srgb,#FF7A8A 14%,transparent); border-color:color-mix(in srgb,#FF7A8A 40%,transparent)}
[data-theme="dark"] .pay.free{color:#6be39a} [data-theme="dark"] .pay.sub{color:#b99bff} [data-theme="dark"] .pay.buy{color:#ffb978} [data-theme="dark"] .pay.give,[data-theme="dark"] .pay.gift{color:#ff9eaa}
.kpis{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px}
.kpi{display:flex; flex-direction:column; gap:2px; padding:14px 16px; border-radius:18px; background:var(--surface); border:2px solid var(--line); box-shadow:0 3px 0 var(--line)}
.kpi span{font-size:12.5px; font-weight:800; color:var(--muted)}
.kpi b{font-size:30px; font-weight:900; line-height:1.3}
.kpi small{font-size:12px; color:var(--muted); font-weight:700}
.pgrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; align-items:start}
.pc{padding:16px 18px; gap:12px}
.pc.pw{grid-column:span 2}
.pc .card-title{font-size:18px; display:flex; align-items:center; gap:8px}
.ch-week{width:100%; height:auto; display:block}
.lgd,.dn-l{display:flex; flex-wrap:wrap; gap:12px; font-size:12.5px; font-weight:800; color:var(--muted)}
.lgd i,.dn-l i{display:inline-block; width:10px; height:10px; border-radius:3px; margin-inline-end:5px}
.dn{display:flex; align-items:center; gap:16px}
.ch-donut{width:110px; height:110px; flex:none}
.dn-l{flex-direction:column; gap:6px}
.dn-l b{color:var(--ink); margin-inline-start:4px}
.tip{font-size:13px; line-height:1.9; font-weight:700; padding:10px 12px; border-radius:14px; background:var(--surface-2)}
.sk{display:flex; flex-direction:column; gap:6px; padding:8px 0}
.sk + .sk{border-top:1.5px dashed var(--line)}
.sk-h{display:flex; justify-content:space-between; gap:8px; font-size:14px}
.sk-h span{font-size:12px; font-weight:900}
.sk-bar{display:grid; grid-template-columns:repeat(4,1fr); gap:5px}
.sk-bar i{height:12px; border-radius:6px; background:var(--line)}
.sk-bar i.on{background:var(--sc)}
.sk-l{display:grid; grid-template-columns:repeat(4,1fr); gap:5px; font-size:11px; font-weight:800; color:var(--muted); text-align:center}
.mapc{display:flex; flex-wrap:wrap; gap:8px}
.mapc span{font-size:13px; font-weight:900; padding:6px 12px; border-radius:999px; color:var(--ink); background:color-mix(in srgb, var(--c) 18%, transparent); border:1.5px solid color-mix(in srgb, var(--c) 45%, transparent)}
.rows{display:flex; flex-direction:column}
.row{display:flex; align-items:center; gap:12px; padding:12px 0; border-top:1.5px dashed var(--line)}
.rows .row:first-child{border-top:0}
.row.slim{padding:8px 0; border-top:0}
.r-ic{width:38px; height:38px; flex:none; border-radius:12px; display:grid; place-items:center; color:var(--c); background:color-mix(in srgb, var(--c) 16%, transparent); font-weight:900}
.r-t{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px}
.r-t b{font-size:14.5px; font-weight:900}
.r-t span{font-size:12.5px; color:var(--muted); font-weight:700; line-height:1.7}
.r-a{display:flex; gap:6px; flex-wrap:wrap}
.seg-pick{display:flex; flex-wrap:wrap; gap:4px; margin-top:4px}
.seg-pick button{min-height:32px; padding:0 10px; border-radius:999px; border:1.5px solid var(--line); background:var(--surface); color:var(--ink); font:inherit; font-size:12px; font-weight:800; cursor:pointer}
.seg-pick button.on{border-color:var(--b); background:var(--b-tint); color:var(--b-text)}
.cnt-dot{width:9px; height:9px; border-radius:50%; background:var(--y)}
.avs{display:flex; gap:-6px}
.avs span{width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:var(--ac); color:#fff; font-weight:900; border:3px solid var(--surface); margin-inline-start:-8px; position:relative}
.avs span:first-child{margin-inline-start:0}
.avs span.new::after{content:""; position:absolute; top:-2px; left:-2px; width:11px; height:11px; border-radius:50%; background:var(--y); border:2px solid var(--surface)}
.more-l{font-size:13px; font-weight:900}
.gc-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding-top:10px; border-top:1.5px dashed var(--line)}
.gc{flex:1; font-weight:900; font-size:14px}
.mini-bar{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; font-size:12.5px; font-weight:800; color:var(--muted)}
.mini-bar b{color:var(--ink)}
.mb{height:10px; border-radius:6px; background:var(--line); overflow:hidden}
.mb i{display:block; height:100%; border-radius:6px; background:linear-gradient(90deg, var(--y), #FF9F43)}
.tiers{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; align-items:stretch}
.tier{display:flex; flex-direction:column; gap:10px; padding:16px 18px; border-radius:22px; background:var(--surface); border:2px solid var(--line); box-shadow:0 4px 0 var(--line)}
.tier.t-sub{border-color:#8E5CF7; box-shadow:0 4px 0 #8E5CF7}
.tier-h{display:flex; align-items:center; gap:8px}
.tier-h b{font-size:18px}
.tier ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.tier li{font-size:13.5px; font-weight:700; padding-inline-start:18px; position:relative}
.tier li::before{content:""; position:absolute; right:0; top:.55em; width:8px; height:8px; border-radius:50%; background:currentColor; opacity:.35}
.t-free li::before{background:#3CC46B; opacity:1} .t-sub li::before{background:#8E5CF7; opacity:1} .t-buy li::before{background:#FF9F43; opacity:1}
.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:auto}
.plans button{display:flex; flex-direction:column; gap:2px; padding:8px 6px; border-radius:14px; border:2px solid var(--line); background:var(--surface); color:var(--ink); font:inherit; font-size:12.5px; font-weight:800; cursor:pointer}
.plans button b{font-size:13px}
.plans button.on{border-color:#8E5CF7; background:color-mix(in srgb,#8E5CF7 12%,var(--surface))}
.fair{font-size:12.5px; color:var(--muted); font-weight:700; text-align:center}
.p-camps{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.p-camp{display:flex; flex-direction:column; gap:8px; padding:12px; border-radius:16px; background:var(--surface-2)}
.p-camp b{font-size:14px}
.p-camp span{font-size:12px; color:var(--muted); font-weight:800}
.p-camp .btn{align-self:flex-start}
@container lg (max-width: 1240px){ .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))} .pc.pw{grid-column:span 2} }
@container lg (max-width: 940px){ .tiers{grid-template-columns:1fr} .kpis{grid-template-columns:repeat(2,minmax(0,1fr))} }
@container lg (max-width: 640px){ .pgrid{grid-template-columns:1fr} .pc.pw{grid-column:auto} .p-camps{grid-template-columns:1fr} .row{flex-wrap:wrap} .kpi b{font-size:24px} }
.ch-week{height:180px; width:100%}
/* support campaigns: covers + admin editor */
.p-camp p{font-size:12.5px; line-height:1.8; color:var(--muted); font-weight:700}
.p-cover{position:relative; display:grid; place-items:center; aspect-ratio:16/9; border-radius:12px; overflow:hidden; background-size:cover; background-position:center}
.p-cover .ph{color:rgba(29,35,64,.55); border:2px dashed rgba(29,35,64,.3); border-radius:12px; padding:6px 12px; font-size:12px; font-weight:800}
.p-tag{position:absolute; top:8px; right:8px; font-size:11px; font-weight:900; color:#1d2340; background:rgba(255,255,255,.8); border-radius:999px; padding:2px 9px}
.as-grid{display:grid; grid-template-columns:320px minmax(0,1fr); gap:16px; align-items:start}
.as-list{gap:6px}
.as-item{display:flex; align-items:center; gap:10px; width:100%; padding:8px; border:2px solid transparent; border-radius:16px; background:none; color:var(--ink); font:inherit; text-align:right; cursor:pointer}
.as-item:hover{background:var(--surface-2)}
.as-item.on{border-color:var(--b); background:var(--b-tint)}
.as-th{width:52px; height:40px; flex:none; border-radius:10px}
.as-item .r-t b{font-size:13.5px}
.as-item .mini-bar{grid-template-columns:1fr auto}
.as-cols{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:20px; align-items:start}
.as-drop{display:grid; place-items:center; aspect-ratio:16/9; border-radius:16px; border:2px dashed rgba(29,35,64,.25); cursor:pointer; overflow:hidden}
.as-drop-in{display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 14px; border-radius:14px; background:rgba(255,255,255,.82); color:#1d2340; text-align:center}
.as-drop-in svg{width:26px; height:26px}
.as-drop-in b{font-size:13px} .as-drop-in small{font-size:11.5px; font-weight:700; opacity:.7}
.as-row3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
.as-ups{display:flex; flex-direction:column; gap:8px}
.as-up{display:flex; align-items:center; gap:10px; padding:8px; border-radius:14px; background:var(--surface-2)}
.as-up-th{width:44px; height:44px; flex:none; border-radius:10px; display:grid; place-items:center; background:var(--surface); color:var(--muted)}
.as-up-th svg{width:20px; height:20px}
.as-prev{position:sticky; top:16px; display:flex; flex-direction:column; gap:10px}
.as-prev .p-camp{background:var(--surface-2)}
.as-acts{display:flex; flex-wrap:wrap; gap:8px; padding-top:12px; border-top:1.5px dashed var(--line)}
@container lg (max-width: 1240px){ .as-cols{grid-template-columns:1fr} .as-prev{position:static} }
@container lg (max-width: 940px){ .as-grid{grid-template-columns:1fr} .as-row3{grid-template-columns:1fr} }
/* support campaigns: covers + admin editor */
.p-camp p{font-size:12.5px; line-height:1.8; color:var(--muted); font-weight:700}
.p-cover{position:relative; display:grid; place-items:center; aspect-ratio:16/9; border-radius:12px; overflow:hidden; background-size:cover; background-position:center}
.p-cover .ph{color:rgba(29,35,64,.55); border:2px dashed rgba(29,35,64,.3); border-radius:12px; padding:6px 12px; font-size:12px; font-weight:800}
.p-tag{position:absolute; top:8px; right:8px; font-size:11px; font-weight:900; color:#1d2340; background:rgba(255,255,255,.8); border-radius:999px; padding:2px 9px}
.as-grid{display:grid; grid-template-columns:320px minmax(0,1fr); gap:16px; align-items:start}
.as-list{gap:6px}
.as-item{display:flex; align-items:center; gap:10px; width:100%; padding:8px; border:2px solid transparent; border-radius:16px; background:none; color:var(--ink); font:inherit; text-align:right; cursor:pointer}
.as-item:hover{background:var(--surface-2)}
.as-item.on{border-color:var(--b); background:var(--b-tint)}
.as-th{width:52px; height:40px; flex:none; border-radius:10px}
.as-item .r-t b{font-size:13.5px}
.as-item .mini-bar{grid-template-columns:1fr auto}
.as-cols{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:20px; align-items:start}
.as-drop{display:grid; place-items:center; aspect-ratio:16/9; border-radius:16px; border:2px dashed rgba(29,35,64,.25); cursor:pointer; overflow:hidden}
.as-drop-in{display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 14px; border-radius:14px; background:rgba(255,255,255,.82); color:#1d2340; text-align:center}
.as-drop-in svg{width:26px; height:26px}
.as-drop-in b{font-size:13px} .as-drop-in small{font-size:11.5px; font-weight:700; opacity:.7}
.as-row3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
.as-ups{display:flex; flex-direction:column; gap:8px}
.as-up{display:flex; align-items:center; gap:10px; padding:8px; border-radius:14px; background:var(--surface-2)}
.as-up-th{width:44px; height:44px; flex:none; border-radius:10px; display:grid; place-items:center; background:var(--surface); color:var(--muted)}
.as-up-th svg{width:20px; height:20px}
.as-prev{position:sticky; top:16px; display:flex; flex-direction:column; gap:10px}
.as-prev .p-camp{background:var(--surface-2)}
.as-acts{display:flex; flex-wrap:wrap; gap:8px; padding-top:12px; border-top:1.5px dashed var(--line)}
@container lg (max-width: 1240px){ .as-cols{grid-template-columns:1fr} .as-prev{position:static} }
@container lg (max-width: 940px){ .as-grid{grid-template-columns:1fr} .as-row3{grid-template-columns:1fr} }
.pgrid > *,.kpis > *,.tiers > *{min-width:0}
@container lg (max-width: 640px){ .sec-head{flex-wrap:wrap} .pg .sec-head .sec-title{font-size:26px !important} }

/* media/home tabs stay reachable while scrolling */
.pg > .seg{position:sticky; top:10px; z-index:25}

/* portrait room (phone-shaped), more slots to customise */
.room-wrap{display:grid; grid-template-columns:minmax(0,420px) minmax(0,1fr); gap:20px; align-items:start; justify-content:center}
.room.tall{height:auto; aspect-ratio:9/16; max-height:760px; width:100%}
.room.tall .room-wall{inset:0 0 38% 0}
.room.tall .room-floor{inset:62% 0 0 0}
.room.tall .room-window{top:7%; right:10%; width:30%; height:auto; aspect-ratio:1/1.05}
.room.tall .wall-frames{top:8%; left:8%; flex-direction:column; gap:10px}
.room-shelf{position:absolute; top:38%; left:8%; right:8%; display:flex; gap:8px; justify-content:center; padding-bottom:6px; border-bottom:8px solid #C98B4E; border-radius:2px}
.rs-slot{flex:1; height:64px; display:grid; place-items:center; border:2.5px dashed rgba(90,70,30,.35); border-radius:12px; color:#6B5524; font-size:11px; font-weight:800}
.room.tall .rs-clock{top:24%; right:12%; width:26%; height:11%}
.room.tall .rs-lamp{bottom:16%; right:6%; width:20%; height:22%}
.room.tall .rs-plant{bottom:16%; left:6%; width:18%; height:18%}
.room.tall .rs-box{bottom:3%; left:6%; width:28%; height:10%}
.room.tall .rs-rug{bottom:3%; left:32%; width:40%; height:9%; border-radius:50%}
.rs-me{position:absolute; left:50%; bottom:12%; width:46%; translate:-50% 0}
.room-side{gap:10px; position:sticky; top:70px}
.rs-list{display:grid; grid-template-columns:auto 1fr; gap:8px 12px; font-size:13px; font-weight:700}
.rs-list span{color:var(--muted)}
.room-side .btn{align-self:flex-start; text-decoration:none}
@container lg (max-width: 940px){ .room-wrap{grid-template-columns:minmax(0,1fr)} .room.tall{max-width:420px; margin:0 auto} .room-side{position:static} }

/* avatar builder */
.av-page{position:relative; z-index:1; max-width:1000px; margin:0 auto; padding:0 20px 40px}
.av-body{display:grid; grid-template-columns:minmax(0,380px) minmax(0,1fr); gap:28px; align-items:start}
.av-stage-wrap{display:flex; flex-direction:column; gap:14px; position:sticky; top:12px}
.av-stage{position:relative; aspect-ratio:1; border-radius:32px; border:2px solid var(--line); box-shadow:0 6px 0 var(--line); overflow:hidden; display:grid; place-items:center; transition:background .4s}
.av-fig{position:relative; width:72%; animation:float 4s ease-in-out infinite}
.av-img{display:block; width:100%; transition:filter .35s}
.av-acc{position:absolute; translate:-50% 0; pointer-events:none; animation:av-pop .35s cubic-bezier(.3,1.6,.5,1) both}
@keyframes av-pop{from{transform:scale(.5); opacity:0}}
.av-shadow{position:absolute; bottom:9%; left:50%; width:36%; height:14px; translate:-50% 0; border-radius:50%; background:rgba(20,25,60,.18)}
.av-name{position:absolute; bottom:12px; left:50%; translate:-50% 0; padding:4px 14px; border-radius:999px; background:rgba(255,255,255,.85); color:#1d2340; font-size:16px}
.av-actions{display:flex; gap:10px; justify-content:center}
.av-actions .btn-y{min-width:160px}
.av-note{text-align:center; font-size:13.5px; font-weight:800; color:var(--b-text)}
.av-pick{display:flex; flex-direction:column; gap:14px}
.av-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(104px,1fr)); gap:10px}
.av-opt{position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; padding:8px 8px 10px; border-radius:18px; border:2px solid var(--line); background:var(--surface); color:var(--ink); font:inherit; cursor:pointer; box-shadow:0 3px 0 var(--line); transition:transform .15s}
.av-opt:hover{transform:translateY(-2px)}
.av-opt.on{border-color:var(--b); box-shadow:0 3px 0 var(--b), 0 0 0 4px var(--b-tint)}
.av-opt b{font-size:12.5px; font-weight:900}
.av-sw{width:100%; aspect-ratio:1; border-radius:14px; display:grid; place-items:center; overflow:hidden}
.av-sw img{width:78%; height:78%; object-fit:contain}
.av-none{width:40%; aspect-ratio:1; border-radius:50%; border:3px dashed var(--muted); opacity:.5}
.av-opt.locked .av-sw{filter:grayscale(.6); opacity:.75}
.av-price{position:absolute; top:6px; left:6px; font-size:10.5px; font-weight:900; padding:2px 7px; border-radius:999px; background:var(--y); color:#3A2A00}
@container lg (max-width: 760px){ .av-page{padding:0 14px 30px} .av-body{grid-template-columns:1fr} .av-stage-wrap{position:static} .av-stage{max-width:340px; width:100%; margin:0 auto} .av-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
.room.tall .wall-frames{flex-direction:row; top:6%; left:5%; right:auto; gap:8px; transform-origin:0 0; scale:.78}
.room.tall .rs-clock{top:24%; right:auto; left:8%; width:34%; height:10%}
.room.tall .room-window{top:5%; right:7%; width:28%}

/* ===== سرا = گروه من / تالار = شبکه‌ی همه ===== */
.seg-2{display:flex; flex-direction:column; line-height:1.3}
.seg-2 b{font-size:15px; font-weight:900}
.seg-2 small{font-size:11px; font-weight:700; color:var(--muted)}
.seg a.on .seg-2 small{color:inherit; opacity:.75}
.sr-kick{display:inline-block; font-size:12.5px; font-weight:900; opacity:.85}
.sr-house{position:relative; border-radius:28px; overflow:hidden; background:linear-gradient(180deg,#1E9BF0,#1677C2); color:#fff; box-shadow:0 6px 0 #0f5f9c; padding:20px 20px 0}
.sr-roof h1{font-size:34px; line-height:1.3; margin:2px 0}
.sr-roof p{font-size:14px; font-weight:700; opacity:.9}
.sr-arches{display:flex; gap:10px; overflow-x:auto; scrollbar-width:none; padding:18px 4px 0; margin-top:10px; background:repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 2px, transparent 2px 86px)}
.sr-arches::-webkit-scrollbar{display:none}
.sr-arch{position:relative; flex:none; width:76px; display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 4px 10px; border-radius:40px 40px 10px 10px; background:rgba(255,255,255,.14); border:2px solid rgba(255,255,255,.25); border-bottom:0}
.sr-arch .av{width:46px; height:46px; font-size:17px; border:3px solid rgba(255,255,255,.9)}
.sr-arch b{font-size:11px; font-weight:800; white-space:nowrap; max-width:70px; overflow:hidden; text-overflow:ellipsis}
.sr-arch.me{background:rgba(255,194,26,.3); border-color:#FFC21A}
.sr-arch.more .av{background:rgba(255,255,255,.25); color:#fff}
.sr-badge{position:absolute; top:-8px; font-style:normal; font-size:10px; font-weight:900; background:#FFC21A; color:#3A2A00; border-radius:999px; padding:1px 8px}
.sr-host{display:flex; align-items:center; gap:10px; margin:0 -20px; padding:10px 20px; background:rgba(0,0,0,.18); font-size:13px; font-weight:700}
.sr-host img{width:30px; height:30px; border-radius:9px}
.sr-host .ai-badge{margin-inline-start:6px}
.sr-cols{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:20px; align-items:start}
.sr-main{display:flex; flex-direction:column; gap:16px}
.sr-answered{display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:13px; font-weight:800; color:var(--muted)}
.sr-answered .btn{margin-inline-start:auto}
.sr-board-h{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
.sr-board{display:flex; flex-direction:column; gap:16px; padding:16px; border-radius:24px; background:repeating-linear-gradient(0deg, color-mix(in srgb, #C98B4E 10%, var(--surface-2)) 0 28px, color-mix(in srgb, #C98B4E 6%, var(--surface-2)) 28px 56px); border:3px solid color-mix(in srgb, #C98B4E 40%, var(--line))}
.sr-note{position:relative; display:flex; flex-direction:column; gap:12px; padding:16px 18px; border-radius:6px 18px 18px 18px; background:var(--surface); box-shadow:0 4px 0 var(--line), 0 10px 20px -14px rgba(20,25,60,.4); border-top:8px solid var(--nc)}
.sr-note::before{content:""; position:absolute; top:-14px; left:50%; width:18px; height:18px; translate:-50% 0; border-radius:50%; background:#E2475E; box-shadow:inset -3px -3px 0 rgba(0,0,0,.15)}
.sr-note:nth-child(even){rotate:.4deg} .sr-note:nth-child(odd){rotate:-.4deg}
.sr-foot{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
.sr-side{display:flex; flex-direction:column; gap:14px; position:sticky; top:70px}
.sr-feed{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.sr-feed li{display:flex; align-items:center; gap:10px; font-size:13px; font-weight:700; line-height:1.7}
.sr-feed .av{width:30px; height:30px; font-size:12px; flex:none}
.sr-lan{width:30px; height:30px; flex:none; border-radius:10px; background:radial-gradient(circle, #FFE07A, #FFC21A); box-shadow:0 0 12px rgba(255,194,26,.6)}
.sr-to-talar{display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:18px; text-decoration:none; color:var(--ink); background:linear-gradient(135deg, color-mix(in srgb,#8E5CF7 18%, var(--surface)), var(--surface)); border:2px solid color-mix(in srgb,#8E5CF7 45%, var(--line))}
.sr-to-talar img{width:42px; height:42px; object-fit:contain}
.sr-to-talar b{display:block; font-size:14px; font-weight:900} .sr-to-talar small{font-size:12px; color:var(--muted); font-weight:700}
/* تالار: social feed */
.tl-hero{position:relative; display:flex; gap:18px; align-items:center; padding:20px; border-radius:28px; overflow:hidden; color:#fff; background:linear-gradient(135deg,#6A3BD6,#8E5CF7 55%,#B48CFF); box-shadow:0 6px 0 #5226b8}
.tl-hero h1{font-size:32px; line-height:1.3; margin:2px 0}
.tl-hero p{font-size:13.5px; font-weight:700; opacity:.92; line-height:1.9; max-width:520px}
.tl-mirror{flex:none; width:96px; height:120px; border-radius:48px 48px 12px 12px; background:conic-gradient(from 45deg, rgba(255,255,255,.55), rgba(255,255,255,.12), rgba(255,255,255,.5), rgba(255,255,255,.1), rgba(255,255,255,.55)); border:4px solid rgba(255,255,255,.7); box-shadow:inset 0 0 0 6px rgba(255,255,255,.15); position:relative}
.tl-mirror::after{content:""; position:absolute; inset:14px; border-radius:36px 36px 6px 6px; background:repeating-conic-gradient(rgba(255,255,255,.35) 0 12deg, transparent 12deg 30deg); animation:spin 30s linear infinite}
.tl-stories{display:flex; gap:14px; overflow-x:auto; scrollbar-width:none; padding:4px 2px}
.tl-stories::-webkit-scrollbar{display:none}
.tl-story{flex:none; display:flex; flex-direction:column; align-items:center; gap:6px; border:0; background:none; color:var(--ink); font:inherit; cursor:pointer}
.tl-ring{width:64px; height:64px; border-radius:50%; padding:3px; background:conic-gradient(var(--sc), #FFC21A, var(--sc)); display:grid; place-items:center}
.tl-dot{width:100%; height:100%; border-radius:50%; border:3px solid var(--bg); background:color-mix(in srgb, var(--sc) 30%, var(--surface))}
.tl-story b{font-size:12px; font-weight:800}
.tl-story.on b{color:var(--b-text)}
.tl-story.on .tl-dot{background:var(--sc)}
.tl-feed{display:flex; flex-direction:column; gap:22px; max-width:520px; width:100%; margin:0 auto}
.tl-media{display:grid; place-items:center; aspect-ratio:1}
.tl-media .ph{color:rgba(29,35,64,.55); border:2px dashed rgba(29,35,64,.3); border-radius:14px; padding:10px 16px; font-size:13px; font-weight:800}
.tl-title{display:block; font-family:inherit; font-size:16px}
.tl-post .pv-acts .rx{width:44px; height:44px}
.tl-end{display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; padding:26px 20px; border-radius:24px; border:2px dashed var(--line)}
.tl-end img{width:110px; animation:float 3.6s ease-in-out infinite}
.tl-end b{font-size:22px}
.tl-end p{font-size:14px; color:var(--muted); font-weight:700}
@keyframes spin{to{rotate:360deg}}
@container lg (max-width: 1240px){ .sr-cols{grid-template-columns:1fr} .sr-side{position:static} }
@container lg (max-width: 640px){ .sr-roof h1,.tl-hero h1{font-size:26px} .tl-mirror{width:64px; height:84px} .tl-hero{padding:16px; gap:12px} .tl-feed{margin:0 -12px; max-width:none; width:auto} .tl-post{border-radius:0; border-left:0; border-right:0} .seg-2 small{display:none} }
@container lg (max-width: 760px){ .av-pick .ig-tabs{overflow-x:auto; scrollbar-width:none} .av-pick .ig-tab{flex:none; padding:0 12px; font-size:13.5px} }

/* multi-sara: my saras switcher + list */
.my-saras{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding:2px}
.my-saras::-webkit-scrollbar{display:none}
.ms{flex:none; display:inline-flex; align-items:center; gap:8px; min-height:42px; padding:0 14px; border-radius:999px; border:2px solid var(--line); background:var(--surface); color:var(--ink); font-size:14px; font-weight:900; text-decoration:none; position:relative}
.lg-app a.ms{color:var(--ink)}
.ms small{font-size:11px; font-weight:800; color:var(--muted); background:var(--surface-2); border-radius:999px; padding:1px 8px}
.ms-dot{width:12px; height:12px; border-radius:50%; background:var(--c)}
.ms.on{border-color:var(--b); background:var(--b-tint)}
.lg-app a.ms.on{color:var(--b-text)}
.ms.add{border-style:dashed}
.lg-app a.ms.add{color:var(--b-text)}
.ms-new{width:8px; height:8px; border-radius:50%; background:var(--y)}
.sl-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap}
.sl-cap{display:flex; flex-direction:column; gap:4px; min-width:180px}
.sl-cap b{font-size:16px; font-weight:900}
.sl-cap small{font-size:11.5px; color:var(--muted); font-weight:700}
.sl-bar{height:10px; border-radius:6px; background:var(--line); overflow:hidden}
.sl-bar i{display:block; height:100%; background:var(--b); border-radius:6px; transition:width .3s}
.sl-h{font-size:16px; font-weight:900}
.sl-mine{display:flex; gap:10px; flex-wrap:wrap}
.sl-chip{display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:18px; background:var(--surface); border:2px solid color-mix(in srgb, var(--c) 50%, var(--line))}
.sl-chip b{display:block; font-size:14px} .sl-chip small{font-size:11.5px; color:var(--muted); font-weight:700}
.sl-em{width:36px; height:36px; border-radius:12px; display:grid; place-items:center; background:var(--c); color:#fff; font-size:18px; flex:none}
.sl-home{font-size:11px; font-weight:900; color:var(--b-text); background:var(--b-tint); border-radius:999px; padding:2px 8px}
.sl-leave{border:0; background:none; color:var(--muted); font:inherit; font-size:12.5px; font-weight:800; text-decoration:underline; cursor:pointer}
.sl-filter{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none}
.sl-filter .tab{flex:none}
.sl-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:16px}
.sl-card{display:flex; flex-direction:column; border-radius:22px; overflow:hidden; background:var(--surface); border:2px solid var(--line); box-shadow:0 4px 0 var(--line); transition:transform .2s}
.sl-card:hover{transform:translateY(-3px)}
.sl-card.in{border-color:var(--c); box-shadow:0 4px 0 var(--c)}
.sl-card.full{opacity:.7}
.sl-top{position:relative; height:86px; background:linear-gradient(140deg, color-mix(in srgb, var(--c) 70%, #fff), var(--c)); display:flex; align-items:flex-end; justify-content:space-between; padding:10px 14px}
.sl-top::before{content:""; position:absolute; inset:auto 0 0 0; height:28px; background:repeating-linear-gradient(90deg, rgba(255,255,255,.25) 0 26px, transparent 26px 34px); -webkit-mask:radial-gradient(14px 16px at 13px 100%, #000 98%, transparent) 0 0/34px 28px; mask:radial-gradient(14px 16px at 13px 100%, #000 98%, transparent) 0 0/34px 28px}
.sl-em.big{width:48px; height:48px; font-size:24px; background:rgba(255,255,255,.3); border:2px solid rgba(255,255,255,.7); position:relative}
.sl-topic{position:relative; font-size:11.5px; font-weight:900; color:#1d2340; background:rgba(255,255,255,.85); border-radius:999px; padding:2px 10px}
.sl-body{display:flex; flex-direction:column; gap:8px; padding:12px 14px 14px; flex:1}
.sl-body b{font-size:19px}
.sl-body p{font-size:13px; color:var(--muted); font-weight:700; line-height:1.8; flex:1}
.sl-meta{display:flex; justify-content:space-between; font-size:12px; font-weight:800; color:var(--muted)}
.sl-lan{display:flex; gap:4px}
.sl-lan i{flex:1; height:8px; border-radius:4px; background:var(--line)}
.sl-lan i.on{background:var(--y)}
.sl-body .btn{align-self:stretch}
.sl-body .btn:disabled{opacity:.55; cursor:not-allowed; box-shadow:none}
.sl-note{font-size:13px; font-weight:800; color:var(--b-text); background:var(--b-tint); padding:10px 14px; border-radius:14px}
.sl-note.soft{color:var(--muted); background:var(--surface-2)}

/* mobile: tabs fit the width (icon above label), nothing hidden off-screen */
@container lg (max-width: 640px){
  .pg > .seg{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); width:100%; overflow:visible; gap:4px; padding:4px}
  .pg > .seg a{flex-direction:column; justify-content:center; gap:2px; min-height:58px; padding:4px 2px; font-size:11.5px; text-align:center; white-space:normal; line-height:1.3}
  .pg > .seg img,.pg > .seg > a > svg{width:24px; height:24px}
  .pg > .seg .seg-tag,.pg > .seg .seg-2 small{display:none}
  .pg > .seg .seg-2 b{font-size:11.5px}
  .pg > .seg .req-dot{position:absolute; margin:0; translate:14px -18px}
  .pg > .seg a{position:relative}
}

/* compose entry (Sara, Talar): visible on every width, mobile included */
.compose-bar{display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:20px; background:var(--surface); border:2px solid var(--line); box-shadow:0 4px 0 var(--line); color:var(--ink); text-decoration:none}
.compose-bar:hover{border-color:var(--b)}
.compose-bar .cb-t{display:flex; flex-direction:column; gap:2px; flex:1; min-width:0}
.compose-bar .cb-t b{font-size:15px; font-weight:900}
.compose-bar .cb-t small{font-size:12.5px; color:var(--muted); font-weight:700}
.compose-bar .cb-btn{flex:none; pointer-events:none}
@container lg (max-width: 640px){ .compose-bar{flex-wrap:wrap} .compose-bar .cb-btn{width:100%} }

/* ===== public website (Landing, About, ParentGuide, Safety, Privacy, Contact) ===== */
.pub{position:relative; z-index:1; max-width:1180px; margin:0 auto; padding:0 24px}
.pub-top{position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:18px; padding:14px 0; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(8px)}
.pub-logo img{height:40px; display:block}
.pub-nav{display:flex; gap:4px; margin-inline-start:auto}
.pub-nav a{padding:8px 12px; border-radius:12px; font-weight:800; font-size:14.5px; color:var(--ink)}
.lg-app .pub-nav a{color:var(--ink)}
.pub-nav a:hover{background:var(--surface-2)}
.lg-app .pub-nav a.on{color:var(--b-text); background:var(--b-tint)}
.pub-acts{display:flex; align-items:center; gap:10px}
.pub-cta{text-decoration:none; white-space:nowrap}
.pub-burger{display:none; width:44px; height:44px; border-radius:12px; border:2px solid var(--line); background:var(--surface); color:var(--ink); place-items:center; cursor:pointer}
.pub-burger svg{width:22px; height:22px}
.pub-drawer{position:absolute; top:100%; left:0; right:0; display:flex; flex-direction:column; gap:4px; padding:12px; border-radius:20px; background:var(--surface); border:2px solid var(--line); box-shadow:0 18px 40px -16px rgba(20,25,60,.4); animation:prof-in .3s cubic-bezier(.2,1.3,.4,1) both}
.pub-drawer a{padding:12px 14px; border-radius:12px; font-weight:800}
.lg-app .pub-drawer a:not(.btn){color:var(--ink)}
.pub-main{display:flex; flex-direction:column; gap:64px; padding:24px 0 72px}
.pub-hero{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:32px; align-items:center; min-height:520px}
.pub-hero.small{min-height:300px}
.pub-kick{display:inline-block; font-size:13px; font-weight:900; color:var(--b-text); background:var(--b-tint); border-radius:999px; padding:4px 14px}
.ph-text h1{font-size:clamp(34px, 5.2cqi, 58px); line-height:1.35; margin:14px 0 12px}
.pub-hero.small h1{font-size:clamp(30px, 4cqi, 44px)}
.ph-text p{font-size:17px; line-height:2; font-weight:600; color:var(--muted); max-width:560px}
.ph-cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:22px}
.ph-cta .btn{text-decoration:none; min-width:170px}
.ph-ticks{list-style:none; padding:0; margin:20px 0 0; display:flex; flex-wrap:wrap; gap:8px 18px; font-size:13.5px; font-weight:800}
.ph-ticks li::before{content:"✓"; color:#3CC46B; margin-inline-end:6px; font-weight:900}
.ph-art{position:relative; display:grid; place-items:center}
.ph-art img{position:relative; width:min(420px, 100%); animation:float 4.2s ease-in-out infinite; filter:drop-shadow(0 24px 24px rgba(20,25,60,.2))}
.ph-art.small img{width:min(260px, 80%)}
.ph-blob{position:absolute; inset:8% 6%; border-radius:46% 54% 58% 42% / 48% 42% 58% 52%; background:radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--y) 55%, transparent), color-mix(in srgb, var(--b) 25%, transparent)); animation:blobmorph 12s ease-in-out infinite}
@keyframes blobmorph{50%{border-radius:58% 42% 44% 56% / 42% 58% 42% 58%}}
.ph-bubble{position:absolute; top:6%; right:0; max-width:220px; padding:10px 14px; border-radius:18px 18px 18px 4px; background:var(--surface); border:2px solid var(--line); box-shadow:0 4px 0 var(--line); font-size:13.5px; font-weight:900; line-height:1.7}
.pub-sec{display:flex; flex-direction:column; gap:18px}
.pub-h{font-size:clamp(26px, 3.4cqi, 38px); line-height:1.4; text-align:center}
.pub-split .pub-h{text-align:right}
.pub-h2{font-size:24px; line-height:1.4}
.pub-lead{font-size:16px; line-height:2; color:var(--muted); font-weight:600; text-align:center; max-width:720px; margin:0 auto}
.pub-split .pub-lead,.doc .pub-lead{text-align:right; margin:0}
.pub-3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.pub-2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
.pub-card{position:relative; display:flex; flex-direction:column; gap:10px; padding:22px; border-radius:24px; background:var(--surface); border:2px solid var(--line); box-shadow:0 5px 0 var(--line); border-top:6px solid var(--c)}
.pub-card b{font-size:19px; font-weight:900}
.pub-card p{font-size:14.5px; line-height:1.9; color:var(--muted); font-weight:600}
.pub-card > svg{width:30px; height:30px; color:var(--c)}
.pub-card .pay{align-self:flex-start}
.pc-dot{width:40px; height:40px; border-radius:50%; background:var(--c); box-shadow:0 0 calc(10px + var(--glow) * 18px) var(--c)}
.pc-price{font-weight:900; font-size:15px}
.pub-steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; counter-reset:s}
.pub-steps li{display:flex; gap:14px; padding:20px; border-radius:22px; background:var(--surface-2)}
.ps-n{flex:none; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:var(--y); color:#3A2A00; font-weight:900; font-size:20px; box-shadow:0 3px 0 var(--y-d)}
.pub-steps b{font-size:17px} .pub-steps p{font-size:14px; color:var(--muted); line-height:1.9; font-weight:600}
.pub-split{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:32px; align-items:center}
.pub-art{display:grid; place-items:center; padding:24px; border-radius:32px; background:radial-gradient(circle, color-mix(in srgb, var(--b) 18%, transparent), transparent 70%)}
.pub-art img{width:min(280px, 100%); animation:float 4.6s ease-in-out infinite}
.pub-list{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px}
.pub-list li{position:relative; padding-inline-start:26px; font-size:15px; font-weight:700; line-height:1.9}
.pub-list li::before{content:""; position:absolute; right:0; top:.6em; width:12px; height:12px; border-radius:4px; background:var(--b)}
.pub-list.num{counter-reset:n} .pub-list.num li{counter-increment:n} .pub-list.num li::before{content:counter(n); width:22px; height:22px; top:.25em; border-radius:50%; color:#fff; font-size:12px; display:grid; place-items:center; font-weight:900}
.pub-no{display:flex; flex-wrap:wrap; justify-content:center; gap:10px}
.pub-no span{padding:10px 18px; border-radius:999px; background:var(--surface); border:2px solid var(--line); font-weight:900; font-size:14.5px; text-decoration:line-through; text-decoration-color:#E2475E; text-decoration-thickness:3px}
.pub-fine{font-size:13px; color:var(--muted); font-weight:700; text-align:center}
.pub-faq{border-radius:18px; background:var(--surface); border:2px solid var(--line); padding:0 18px}
.pub-faq + .pub-faq{margin-top:10px}
.pub-faq summary{display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:58px; font-weight:900; font-size:15.5px; cursor:pointer; list-style:none}
.pub-faq summary::-webkit-details-marker{display:none}
.pub-faq summary svg{width:20px; height:20px; transition:transform .25s}
.pub-faq[open] summary svg{transform:rotate(180deg)}
.pub-faq p{padding:0 0 16px; font-size:14.5px; line-height:2; color:var(--muted); font-weight:600}
.pub-band{display:flex; align-items:center; gap:20px; flex-wrap:wrap; padding:24px 28px; border-radius:30px; background:linear-gradient(135deg,#1E9BF0,#1677C2); color:#fff; box-shadow:0 6px 0 #0f5f9c}
.pub-band img{width:110px; animation:float 4s ease-in-out infinite}
.pub-band div{flex:1; min-width:200px} .pub-band b{font-size:28px} .pub-band p{opacity:.9; font-weight:700}
.pub-band .btn{text-decoration:none}
.pub-toc{display:flex; flex-wrap:wrap; gap:8px; justify-content:center}
.pub-toc a{padding:6px 14px; border-radius:999px; background:var(--surface-2); font-weight:800; font-size:13.5px}
.doc{max-width:820px; width:100%; margin:0 auto; padding:24px; border-radius:24px; background:var(--surface); border:2px solid var(--line); scroll-margin-top:90px}
.pub-mini{display:flex; flex-direction:column; gap:6px; padding:16px; border-radius:18px; background:var(--surface-2)}
.pub-mini svg{width:26px; height:26px; color:var(--b)}
.pub-mini b{font-size:16px} .pub-mini p{font-size:14px; color:var(--muted); line-height:1.9; font-weight:600}
.pub-mini.ok svg{color:#3CC46B} .pub-mini.no svg{color:#E2475E}
.pub-mini.urgent{background:color-mix(in srgb,#E2475E 12%, var(--surface)); border:2px solid #E2475E}
.pub-mini.urgent svg{color:#E2475E}
.pub-team{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
.pt{display:flex; flex-direction:column; align-items:center; gap:6px; padding:18px; border-radius:22px; background:var(--surface); border:2px solid var(--line)}
.pt-av{width:84px; height:84px; border-radius:50%; border:3px dashed var(--line); background:var(--surface-2)}
.pt small{color:var(--muted); font-weight:700}
.pub-form{gap:14px; padding:22px}
.pub-ways{display:flex; flex-direction:column; gap:12px}
.pub-split.contact{align-items:start; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.pub-foot{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:24px; padding:32px 0 40px; border-top:2px solid var(--line)}
.pf-brand img{width:52px; border-radius:14px} .pf-brand p{margin-top:10px; font-size:14px; color:var(--muted); font-weight:700; line-height:1.9}
.pf-cols{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.pf-cols div{display:flex; flex-direction:column; gap:8px; font-size:14px; font-weight:700}
.pf-cols b{font-size:15px; margin-bottom:4px} .pf-cols span{color:var(--muted); font-size:13px}
.lg-app .pf-cols a{color:var(--ink)}
.pf-legal{grid-column:1 / -1; font-size:12.5px; color:var(--muted); font-weight:700}
@container lg (max-width: 1240px){ .pub-nav a{padding:8px 8px; font-size:13.5px} }
@container lg (max-width: 940px){
  .pub-nav{display:none} .pub-burger{display:grid} .pub-acts{margin-inline-start:auto}
  .pub-hero,.pub-split,.pub-split.contact{grid-template-columns:1fr} .pub-hero{min-height:0}
  .ph-art{order:-1} .ph-art img{width:min(300px, 80%)}
  .pub-3,.pub-steps{grid-template-columns:1fr} .pub-team{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pub-foot{grid-template-columns:1fr}
}
@container lg (max-width: 640px){
  .pub{padding:0 16px} .pub-main{gap:44px} .pub-cta{display:none} .pub-2{grid-template-columns:1fr}
  .pf-cols{grid-template-columns:1fr 1fr} .ph-bubble{display:none} .doc{padding:18px}
  .ph-text h1{font-size:32px}
}