@font-face{font-family:Vazirmatn;src:url(/fonts/Vazirmatn-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Vazirmatn;src:url(/fonts/Vazirmatn-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Vazirmatn;src:url(/fonts/Vazirmatn-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
*{box-sizing:border-box}
/* Palette v4 MONOCHROME CHARCOAL (2026-10-29, Rayan: all warm colours removed):
   page #FFFFFF, sections #F7F8FA, cards #FFFFFF, border #E5E7EB,
   ink #16181D, primary #1C1E24, muted #6B7280, tags #F3F4F6.
   No warm colours in the site palette. The logo image itself is untouched
   and naturally contains colours. Site stays LIGHT. */
body{margin:0;font-family:Vazirmatn,Tahoma,sans-serif;background:#FFFFFF;color:#16181D;line-height:1.85;font-size:15px}
a{color:#1C1E24;text-decoration:none}
.wrap{max-width:760px;margin:0 auto;padding:22px 16px 40px}
.wrap.wide{max-width:1080px}
/* Floating pill header (desktop + mobile top).
   Header-fix 2026-10-29: the pill used to be sticky with top:12px and a
   transparent background — the sticky offset pushed the pill's visual box
   12px (8px mobile) BEYOND its in-flow space, so it covered the top of the
   first content element (measured: login H1 gap -12px desktop / -8px mobile),
   and while scrolling, text showed through around the pill. Now the float
   offset lives INSIDE the header's own box (padding), top is 0, and the
   header band is opaque white (invisible at rest on the white page), so the
   header can never overlap page text at rest or mid-scroll. */
html{scroll-padding-top:84px}
header{background:#FFFFFF;border:0;position:sticky;top:0;z-index:40;padding:10px 12px 8px}
.nav{max-width:1000px;margin:0 auto;padding:5px 10px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;background:#fff;border:1px solid #E5E7EB;border-radius:999px;box-shadow:0 8px 24px rgba(22,24,29,.08)}
.nav a{font-size:13px;padding:5px 9px;border-radius:999px;color:#374151}
.nav a.brand{display:flex;align-items:center;gap:7px;font-weight:700;color:#16181D;font-size:15px;padding:2px 4px}
.nav a.brand img{width:30px;height:30px;border-radius:50%;object-fit:cover;object-position:center 18%}
.nav a.brand small{display:block;font-weight:400;font-size:10px;color:#6B7280;line-height:1.4}
.nav a.cta{background:#1C1E24;color:#fff;padding:6px 12px;font-size:12.5px}
/* Header search (2026-10-30): compact box inside the pill, right next to the
   brand; the three-line button opens the scope picker. Single row at every
   width — the sticky header keeps its height, so the header-fix geometry
   (top:0, scroll-padding) is untouched. On mobile the submit button hides
   (keyboard search/enter submits) so the input keeps usable width. */
.hdr-search{position:relative;display:flex;align-items:center;gap:4px;flex:1 1 200px;min-width:0;margin:0}
.hdr-search-in{flex:1;width:auto;min-width:0;margin:0;padding:6px 10px;font-size:13px;border:1px solid #E5E7EB;border-radius:999px;background:#F7F8FA;color:#16181D}
.nav a.hdr-scope-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;flex:0 0 30px;border:1px solid #E5E7EB;border-radius:999px;background:#fff;color:#1C1E24;font-size:14px;line-height:1;padding:0}
.hdr-search-go{flex:0 0 auto;border:0;background:#1C1E24;color:#fff;font-family:inherit;font-size:12px;font-weight:700;border-radius:999px;padding:7px 11px;cursor:pointer}
.hdr-scope-menu{position:absolute;top:calc(100% + 8px);inset-inline-start:0;min-width:190px;background:#fff;border:1px solid #E5E7EB;border-radius:12px;box-shadow:0 16px 40px rgba(22,24,29,.16);padding:5px;z-index:70}
.hdr-scope-menu button{display:flex;width:100%;align-items:center;gap:6px;background:transparent;border:0;font-family:inherit;font-size:13px;color:#374151;padding:8px 10px;border-radius:8px;cursor:pointer;text-align:right}
.hdr-scope-menu button.active{font-weight:800;color:#16181D;background:#F3F4F6}
.hdr-scope-menu button.active::before{content:'•';color:#1C1E24}
.global-search select{width:auto;flex:0 1 150px;margin:0;padding:9px 10px;font-size:13.5px;border:1.5px solid #1C1E24;border-radius:12px;background:#fff;color:#16181D}
.hero{background:#fff;border:1px solid #E5E7EB;border-radius:16px;padding:18px 16px;margin:4px 0 16px;text-align:center;box-shadow:0 1px 2px rgba(22,24,29,.05)}
.hero h1{font-size:22px}
.eyebrow{font-size:11px;font-weight:700;color:#16181D;letter-spacing:.02em;margin:0 0 6px}
.hero-next{background:#F7F8FA;border:1px solid #E5E7EB;border-radius:12px;padding:11px 13px;margin:14px 0 0;text-align:right;line-height:1.85}
.section-head{font-size:11.5px;font-weight:700;color:#16181D;margin:20px 0 0}
.section-head + h2{margin-top:4px}
.price{font-weight:700;color:#1C1E24;font-size:15px}
.card.story{border-inline-start:4px solid #6B7280}
.quote{font-size:16px;line-height:1.85;color:#16181D}
.card.founder{background:#F7F8FA}
@media(min-width:900px){.grid.steps{grid-template-columns:repeat(3,1fr)}}
h1{font-size:21px;line-height:1.6;margin:0 0 8px;color:#16181D}
h2{font-size:16px;margin:18px 0 6px;color:#16181D}
h3{font-size:14px;margin:0 0 5px}
p{margin:6px 0}
.card{background:#fff;border:1px solid #E5E7EB;border-radius:14px;padding:13px 14px;margin:10px 0;box-shadow:0 1px 2px rgba(22,24,29,.05)}
.tag{display:inline-block;background:#F3F4F6;color:#374151;border-radius:999px;padding:2px 8px;font-size:11px;margin:2px}
.tag.purple,.tag.teal,.tag.amber,.tag.green,.tag.grey{background:#F3F4F6;color:#374151}
.tag.primary{background:#EDEEF1;color:#1C1E24}
.btn{display:inline-flex;align-items:center;justify-content:center;background:#1C1E24;color:#fff;border:0;border-radius:10px;padding:7px 14px;min-height:36px;font-family:inherit;font-size:13px;cursor:pointer}
.btn.secondary{background:#fff;color:#374151;border:1px solid #E5E7EB}
.btn.teal{background:#374151;color:#fff}
.btn.small{padding:5px 11px;font-size:12.5px;min-height:32px;border-radius:9px}
input,select,textarea{width:100%;font-family:inherit;font-size:13.5px;padding:8px 11px;border:1px solid #E5E7EB;border-radius:10px;background:#fff;margin:5px 0;color:#16181D}
label{font-size:13px;color:#4B5563}
.grid{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:600px){.grid{grid-template-columns:1fr 1fr}}
/* True vertical sidebar for panel pages */
.panel-layout{display:flex;gap:18px;align-items:flex-start;margin-top:4px}
.panel-main{flex:1;min-width:0}
.sidebar{width:232px;flex-shrink:0;display:flex;flex-direction:column;gap:3px;position:sticky;top:78px;background:#fff;border:1px solid #E5E7EB;border-radius:14px;padding:10px;box-shadow:0 1px 2px rgba(22,24,29,.05)}
.sidebar-title{display:block;font-weight:700;font-size:14px;color:#16181D;padding:6px 8px 8px;border-bottom:1px solid #E5E7EB;margin-bottom:6px}
.sidebar a{display:block;background:transparent;border:0;border-radius:9px;padding:8px 10px;font-size:13.5px;color:#374151}
.sidebar a.active{background:#EDEEF1;color:#16181D;font-weight:700;border-inline-start:3px solid #6B7280}
.sidebar-toggle{display:none;width:100%;background:#fff;border:1px solid #E5E7EB;border-radius:10px;padding:9px 12px;font-family:inherit;font-size:13.5px;font-weight:700;color:#16181D;cursor:pointer;margin-top:4px}
.sidebar-close{display:none;background:#EDEEF1;border:1px solid #E5E7EB;border-radius:9px;padding:7px 10px;font-family:inherit;font-size:13px;font-weight:700;color:#1C1E24;cursor:pointer;margin-bottom:8px}
.notice{background:#F7F8FA;border:1px solid #E5E7EB;border-radius:10px;padding:10px 12px;margin:10px 0}
.demo{background:#F7F8FA;border:1px solid #E5E7EB;border-radius:10px;padding:10px 12px;margin:10px 0}
footer{border-top:1px solid #E5E7EB;padding:16px;text-align:center;font-size:13px;color:#6B7280}
.muted{color:#6B7280;font-size:13px}
table{width:100%;border-collapse:collapse;font-size:13px}
td,th{border-bottom:1px solid #E5E7EB;padding:6px 4px;text-align:right;vertical-align:top}
img{max-width:100%}
/* Floating bottom navigation (mobile only) */
.bottom-nav{display:none}
@media(max-width:900px){
  /* Mobile top bar: brand + login only — the floating bottom nav carries the sections,
     so the pill header no longer wraps into 3-4 rows and eats the first screen. */
  html{scroll-padding-top:78px}
  header{padding-top:8px}
  .nav{flex-wrap:nowrap;justify-content:space-between}
  .nav a{display:none}
  .nav a.brand{display:flex}
  .nav a.cta{display:inline-flex}
  .nav a.hdr-scope-btn{display:inline-flex}
  .hdr-search-go{display:none}
  .hero{padding:16px 14px;margin-top:4px}
  .hero h1{font-size:20px}
  .wrap{padding-bottom:92px}
  .panel-layout{flex-direction:column}
  .panel-main{width:100%}
  .sidebar{display:none;position:fixed;top:0;bottom:0;right:0;width:280px;max-width:85vw;z-index:60;border-radius:0;overflow-y:auto;box-shadow:-8px 0 24px rgba(22,24,29,.20)}
  .panel-layout.open .sidebar{display:flex}
  .sidebar-toggle{display:block}
  .sidebar-close{display:block}
  footer{padding-bottom:92px}
  .bottom-nav{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:50;background:#fff;border:1px solid #E5E7EB;border-radius:999px;box-shadow:0 8px 24px rgba(22,24,29,.12);padding:5px;justify-content:space-around}
  .bottom-nav a{font-size:10.5px;line-height:1.5;color:#374151;padding:7px 5px;border-radius:999px;text-align:center}
  .bottom-nav a.cta{background:#1C1E24;color:#fff;padding:6px 12px}
  .nav a{font-size:12.5px}
  h1{font-size:20px}
}

/* --- Design system v1: placeholders, page leads, empty states, avatars --- */
.ph{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;max-height:120px;overflow:hidden;background:#EEF0F2;border:1px dashed #E5E7EB;border-radius:12px;color:#6B7280;text-align:center;padding:8px;margin:8px 0}
.ph-cover{max-height:160px}
.ph-mark{color:#6B7280;font-size:12px}
.ph-label{font-size:12px;color:#6B7280;font-weight:400}
.ph-img{width:100%;max-height:120px;object-fit:cover;border-radius:12px;margin:10px 0;border:1px solid #E5E7EB}
.ph-img.ph-cover{max-height:160px}
.avatar{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:#EDEEF1;color:#1C1E24;font-weight:700;font-size:15px;margin-bottom:6px}
.empty{background:#fff;border:1px dashed #E5E7EB;border-radius:12px;padding:13px;text-align:center;color:#6B7280;font-size:13.5px}
.page-lead{color:#4B5563;font-size:14.5px;line-height:1.85}

.filter-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:8px 0 12px}
.filter-row span{font-weight:700;color:#1C1E24}
.progress{height:7px;background:#E5E7EB;border-radius:999px;overflow:hidden;margin:8px 0}
.progress span{display:block;height:100%;background:#1C1E24;border-radius:999px}
.req-row{display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid #E5E7EB;padding:8px 0}
.req-row form{margin:0}
.lesson-player video,.lesson-player audio{width:100%;margin:10px 0}
.lesson-content{white-space:pre-wrap;line-height:1.95;background:#F7F8FA;border:1px solid #E5E7EB;border-radius:12px;padding:13px}

@media(max-width:480px){
  .nav a.brand small{display:none}
  .nav a.brand{font-size:15px}
  .nav a.cta{padding:6px 12px;font-size:12.5px}
  .req-row{align-items:flex-start;flex-direction:column}
}

/* --- Depth system v1 (2026-10-29 — Rayan: out of flat simplicity, subtle 3D:
   luxury + modern + fresh, still strictly monochrome charcoal; the ONLY colour
   in the system is the club logo itself, echoed as faint glows near the hero).
   Elevation, frosted-glass chrome, button depth, gentle scroll reveal and hero
   depth — PUBLIC pages get the motion; panels get depth only (shadows, glass,
   button press), no scroll motion, no tilt, no parallax. Motion is transform /
   opacity only, no libraries, and dies under prefers-reduced-motion. --- */
:root{
  --sh-rest:0 1px 2px rgba(22,24,29,.04),0 4px 12px rgba(22,24,29,.04),0 14px 28px -20px rgba(22,24,29,.12);
  --sh-lift:0 2px 4px rgba(22,24,29,.05),0 10px 22px rgba(22,24,29,.07),0 24px 44px -22px rgba(22,24,29,.17);
  --sh-chrome:0 8px 24px rgba(22,24,29,.08),0 2px 5px rgba(22,24,29,.05);
  --sh-top:inset 0 1px 0 rgba(255,255,255,.85);
}
body{overflow-x:clip}
/* Elevation: layered soft shadows + a hairline top light, so stacked blocks
   read as layers instead of one flat sheet */
.card{box-shadow:var(--sh-top),var(--sh-rest);transition:box-shadow .25s ease,transform .25s ease}
.hero{box-shadow:var(--sh-top),var(--sh-rest)}
.sidebar{box-shadow:var(--sh-top),var(--sh-rest)}
.ph-img{box-shadow:var(--sh-rest)}
.hero-next,.notice,.demo,.lesson-content{box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 1px 2px rgba(22,24,29,.04)}
footer{box-shadow:0 -14px 28px -22px rgba(22,24,29,.28)}
@media(hover:hover) and (pointer:fine){
  body.is-public .card:hover{box-shadow:var(--sh-top),var(--sh-lift);transform:translateY(-2px)}
}
/* Frosted-glass chrome: header band + pill + bottom nav. Only the background
   changes — the header-fix geometry (top:0, padding inside the header box,
   .wrap padding-top) is untouched, so first-heading gaps stay as measured. */
header{background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5)}
.nav{background:rgba(255,255,255,.68);box-shadow:var(--sh-top),var(--sh-chrome)}
.bottom-nav{background:rgba(255,255,255,.84);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);box-shadow:var(--sh-top),var(--sh-chrome)}
/* Button depth: top highlight + real shadow; a press sinks 1px (all pages) */
.btn{box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 5px 12px -6px rgba(28,30,36,.35),0 2px 4px rgba(28,30,36,.14);transition:transform .15s ease,box-shadow .15s ease}
.btn.secondary{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 3px 10px -6px rgba(22,24,29,.18)}
.btn.teal{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 5px 12px -6px rgba(55,65,81,.35),0 2px 4px rgba(55,65,81,.14)}
.btn:active{transform:translateY(1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 2px 6px -4px rgba(28,30,36,.32),0 1px 2px rgba(28,30,36,.14)}
@media(hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 8px 16px -6px rgba(28,30,36,.38),0 3px 6px rgba(28,30,36,.15)}
  .btn.secondary:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 16px -6px rgba(22,24,29,.24)}
}
/* Public pages only: a whisper of the logo's own hues at the very top of the
   page — glow behind the chrome, never a background, button or text colour */
body.is-public{background-image:radial-gradient(720px 260px at 50% -90px,rgba(110,76,165,.055),rgba(110,76,165,0) 70%),radial-gradient(560px 220px at 88% -70px,rgba(232,134,46,.05),rgba(232,134,46,0) 70%);background-repeat:no-repeat}
/* Home hero depth: the colourful club ring floats on a layered soft disc,
   with a very subtle logo-hue glow behind it */
.hero{position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(360px 190px at 84% -50px,rgba(232,134,46,.10),rgba(232,134,46,0) 70%),radial-gradient(400px 210px at 10% -70px,rgba(110,76,165,.10),rgba(110,76,165,0) 70%),radial-gradient(320px 180px at 55% 118%,rgba(46,140,122,.08),rgba(46,140,122,0) 70%)}
.hero>*{position:relative;z-index:1}
.hero-logo{position:relative;width:96px;height:96px;margin:0 auto 2px;will-change:transform}
.hero-logo .hl-disc{position:absolute;inset:4px;border-radius:50%;background:radial-gradient(circle at 32% 28%,rgba(242,179,61,.20),rgba(232,134,46,.10) 45%,rgba(110,76,165,.10) 75%,rgba(46,140,122,.08));filter:blur(10px);transform:scale(1.28)}
.hero-logo .hl-float{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;animation:heroFloat 7s ease-in-out infinite}
.hero-logo img{width:74px;height:74px;border-radius:50%;object-fit:cover;object-position:center 18%;box-shadow:0 16px 30px rgba(22,24,29,.17),0 5px 12px rgba(22,24,29,.12),0 0 0 5px rgba(255,255,255,.92),0 0 0 6px rgba(229,231,235,.9)}
@keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
/* Listing-card tilt sheen (the tilt transform itself is set by JS,
   fine pointers only; sheen position follows --mx/--my) */
.tilt{position:relative}
.tilt::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.22),rgba(255,255,255,0) 45%);opacity:0;transition:opacity .25s ease}
.tilt:hover::after{opacity:1}
/* Scroll reveal — the hidden state exists ONLY when JS has added .js-reveal
   to <html> and .reveal to below-the-fold elements; with JS off (or before
   it runs) everything is simply visible */
.js-reveal .reveal{opacity:0;transform:translateY(10px);transition:opacity .55s ease,transform .55s cubic-bezier(.22,.61,.36,1)}
.js-reveal .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .js-reveal .reveal{opacity:1 !important;transform:none !important}
  .hero-logo .hl-float{animation:none}
}

/* --- Bazar redesign v1 (2026-10-29 — Rayan approved mockup: SEE AND CHOOSE
   first, explanations LAST): compact head + big search, story-style sticky
   category circles, image-first featured carousel + services grid, compact
   needs feed with real replies and باز/حل شد status, charcoal intro banner,
   and all explanatory text moved to one quiet section at the very bottom.
   Monochrome charcoal system unchanged; depth classes (card/tilt/btn) reused. --- */
.bazar-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.bazar-head h1{margin:0}
.bazar-badge{font-size:10.5px;color:#6B7280;background:#F3F4F6;border:1px solid #E5E7EB;border-radius:999px;padding:3px 8px;white-space:nowrap}
.bazar-tag{color:#6B7280;font-size:12.5px;margin:3px 0 2px}
.bazar-search{display:flex;gap:6px;margin:10px 0 4px}
.bazar-search input{flex:1;min-width:0;margin:0;padding:9px 12px;font-size:14px;border:1.5px solid #1C1E24;border-radius:12px}
.bazar-search .btn{border-radius:12px;padding:7px 14px;white-space:nowrap}
/* Category circles: horizontally scrollable, sticky under the sticky header.
   Compact scale: header height = header padding (10+8) + pill (~45px) = ~63px
   desktop; ~61px under 900px (padding-top 8). The frosted background keeps
   scrolled content from bleeding through the row. */
.bazar-cats{position:sticky;top:64px;z-index:30;display:flex;gap:12px;overflow-x:auto;padding:10px 6px 8px;margin:4px -6px 6px;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid #E5E7EB;scrollbar-width:none}
.bazar-cats::-webkit-scrollbar{display:none}
@media(min-width:901px) and (max-width:1120px){.bazar-cats{top:104px}}
@media(max-width:900px){.bazar-cats{top:62px}}
@media(max-width:480px){.bazar-cats{top:62px}}
.bazar-cat{display:flex;flex-direction:column;align-items:center;gap:4px;flex:0 0 auto;width:58px;color:#374151}
.cat-circle{width:48px;height:48px;border-radius:50%;background:#F3F4F6;border:1px solid #E5E7EB;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#1C1E24;text-align:center;padding:2px;box-shadow:var(--sh-rest)}
.bazar-cat.active .cat-circle{background:#1C1E24;color:#fff;border-color:#1C1E24}
.cat-label{font-size:10px;line-height:1.5;text-align:center;color:#4B5563}
.bazar-cat.active .cat-label{color:#16181D;font-weight:700}
.bazar-sec-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.bazar-sec-head h2{margin:16px 0 6px}
/* Service cards: image first, compact; featured = scroll-snap carousel */
.svc-scroll{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 12px;margin:0 -2px;scrollbar-width:none}
.svc-scroll::-webkit-scrollbar{display:none}
.svc-scroll .svc-card{flex:0 0 240px;scroll-snap-align:start;margin:0}
@media(max-width:480px){.svc-scroll .svc-card{flex-basis:216px}}
.svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.svc-grid .svc-card{margin:0}
.svc-card{padding:12px;display:flex;flex-direction:column}
.svc-card .ph,.svc-card .ph-img{margin:0 0 8px}
.svc-tags{display:flex;flex-wrap:wrap;gap:2px}
.svc-card h3{font-size:14px;line-height:1.7;margin:5px 0 2px}
.svc-out{font-size:12.5px;color:#4B5563;margin:2px 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.svc-prov{font-size:12px;color:#6B7280;margin:2px 0}
.svc-rate{margin:3px 0 0}
.svc-foot{margin-top:auto;padding-top:8px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.svc-foot .price{font-size:14px}
/* Needs feed: compact rows, status chips, real replies in <details> */
.need-row{border:1px solid #E5E7EB;border-radius:12px;padding:10px 12px;margin:8px 0;background:#fff;box-shadow:var(--sh-top),var(--sh-rest)}
.need-row.is-done{opacity:.72}
.need-title{font-weight:600;font-size:13.5px}
.need-meta{font-size:11.5px;color:#6B7280;margin-top:2px}
.chip{display:inline-block;border-radius:999px;padding:0 8px;font-size:10.5px;line-height:1.8}
.chip-open{background:#EDEEF1;color:#1C1E24;font-weight:700}
.chip-done{background:#F3F4F6;color:#6B7280}
.need-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.need-acts form{margin:0}
details.need-reps{margin-top:7px}
details.need-reps summary{cursor:pointer;display:inline-block;background:#1C1E24;color:#fff;border-radius:9px;padding:4px 12px;font-size:12.5px;list-style:none;box-shadow:0 3px 8px -4px rgba(28,30,36,.35)}
details.need-reps summary::-webkit-details-marker{display:none}
.need-reps-body{margin-top:8px;border-top:1px solid #E5E7EB;padding-top:6px}
.need-rep{padding:5px 0;border-bottom:1px dashed #E5E7EB}
.need-rep p{margin:2px 0}
.bazar-toggle{font-size:12.5px;margin:5px 0}
.bazar-form{margin-top:12px}
/* Introduction banner: one charcoal block, mid-page */
.intro-banner{background:#1C1E24;color:#fff;border-radius:14px;padding:16px 14px;margin:18px 0 4px;box-shadow:var(--sh-top),var(--sh-lift)}
.intro-banner h2{color:#fff;margin:0 0 5px}
.intro-banner p{color:#D1D5DB;margin:5px 0 10px}
.btn.light{background:#fff;color:#1C1E24;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 6px 14px -6px rgba(0,0,0,.45)}
/* Explanations live at the very bottom, quiet */
.bazar-how{border-top:1px solid #E5E7EB;margin-top:22px;padding-top:4px;color:#4B5563}
.bazar-how h2{font-size:15px}
.bazar-how p{font-size:13.5px}

/* --- Super-app phase 1 (2026-10-29 — Rayan approved the Snapp-style hub,
   translated to Jamshim: architecture, not noise): slim promise line, ONE
   global search, personal strip, registry-driven services grid (max 8 tiles
   + همه خدمات), mixed «این هفته در کلاب» feed, one admin banner slot, and a
   5-item bottom nav with سالن emphasised in the centre. Monochrome charcoal
   system and the depth classes are reused; header-fix geometry untouched. --- */
.global-search{display:flex;gap:6px;margin:10px 0 12px}
.global-search input{flex:1;min-width:0;margin:0;padding:9px 12px;font-size:14px;border:1.5px solid #1C1E24;border-radius:12px}
.global-search .btn{border-radius:12px;padding:7px 14px;white-space:nowrap}
.strip h2{margin:0 0 2px;font-size:15px}
.strip p{margin:4px 0}
.strip-chips{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0 2px}
.svc-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 6px;margin:10px 0 6px}
.svc-tile{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;color:#16181D;min-width:0}
.tile-mark{width:54px;height:54px;border-radius:14px;background:#F3F4F6;border:1px solid #E5E7EB;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#1C1E24;text-align:center;padding:2px;box-shadow:var(--sh-rest);transition:transform .2s ease,box-shadow .2s ease}
@media(hover:hover) and (pointer:fine){body.is-public .svc-tile:hover .tile-mark{transform:translateY(-2px);box-shadow:var(--sh-top),var(--sh-lift)}}
.svc-tile.all .tile-mark{border-style:dashed;background:#fff}
.tile-name{font-size:11px;font-weight:700;line-height:1.5}
.tile-badge{font-size:9.5px;color:#6B7280;line-height:1.5}
.svc-tile.is-soon{opacity:.55}
.tile-mark.lg{width:44px;height:44px;border-radius:12px;flex-shrink:0}
.svc-row{display:flex;align-items:center;gap:10px}
.svc-row-main{flex:1;min-width:0}
.svc-row-main h3{margin:0}
/* Feed cards: compact rows, not posters — tight padding, small title,
   one-line-ish meta, «دیدن» as a small quiet button */
.bottom-nav a.centre{background:#1C1E24;color:#fff;font-weight:700;font-size:11px;padding:9px 16px;margin-top:-12px;box-shadow:0 8px 16px -6px rgba(28,30,36,.4)}
@media(max-width:480px){.svc-tiles{gap:10px 4px}.tile-mark{width:48px;height:48px;border-radius:14px}}

/* --- Compact scale v1 (2026-10-29 — Rayan's standing rule: NO big buttons,
   NO big elements; minimal + small sections are more attractive): the whole
   type/spacing scale above was tightened in one token pass — buttons
   7px 14px / 13px / min-height 36px, H1 21px, section titles 16px, card
   titles 14px, cards 13px 14px padding, slimmer glass header (~56–63px),
   feed cards as compact rows, bottom nav slim with a modest centre pill.
   Header-fix geometry (.wrap padding-top 22px, header top:0, scroll-padding)
   and the depth system are unchanged in kind — only softer. Full before/after
   token table: DESIGN-SYSTEM-FA.md «مقیاس فشرده». --- */

/* --- Home section rows (2026-10-29): از مکتب / از بازار / آدم‌های کلاب —
   compact scale throughout; horizontal snap-scroll rows on mobile that
   wrap into a tidy grid on desktop. --- */
.home-sec-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:22px}
.home-sec-head h2{margin:0}
.home-sec-head a{font-size:12.5px;white-space:nowrap}
.svc-scroll .hcard{flex:0 0 240px;scroll-snap-align:start;margin:0}
@media(max-width:480px){.svc-scroll .hcard{flex-basis:216px}}
.hcard{padding:12px;display:flex;flex-direction:column}
.hcard .ph,.hcard .ph-img{margin:0 0 8px}
.hcard h3{font-size:14px;line-height:1.7;margin:5px 0 2px}
.vip-free{display:inline-block;font-size:10px;font-weight:400;color:#6B7280;background:#F3F4F6;border-radius:999px;padding:1px 7px;line-height:1.7;vertical-align:middle}
.hc-tags{margin:0}
.hc-out{font-size:12.5px;color:#3F434B;margin:2px 0 8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.member-strip{display:flex;gap:16px;overflow-x:auto;padding:8px 2px 12px;scrollbar-width:none}
.member-strip::-webkit-scrollbar{display:none}
.member-item{flex:0 0 78px;text-align:center;color:inherit;text-decoration:none}
.member-item .avatar{width:48px;height:48px;font-size:18px;margin:0 auto 5px;display:flex}
.member-name{display:block;font-size:12px;font-weight:700;line-height:1.6}
.member-biz{display:block;font-size:10.5px;color:#6B7280;line-height:1.6}
@media(min-width:900px){
  .svc-scroll.home-scroll{flex-wrap:wrap;overflow-x:visible}
  .svc-scroll.home-scroll .svc-card,.svc-scroll.home-scroll .hcard{flex:1 1 215px}
  .member-strip{flex-wrap:wrap;overflow-x:visible}
}

/* --- Salon, phase 2 (2026-10-29): member chat — compact scale throughout
   (small bubbles, 13–13.5px text, mini action buttons). The composer is
   sticky and sits ABOVE the floating bottom nav on mobile (nav occupies
   roughly the bottom 74px including its raised centre pill); on desktop
   the bottom nav is hidden, so the composer rests near the viewport edge.
   Messages are .msg, never .card, so the public-page reveal script and
   card hover states never touch the chat stream. --- */
.inline-f{display:inline}
.mini-btn{background:none;border:0;padding:2px 4px;font-family:inherit;font-size:11px;color:#6B7280;cursor:pointer}
.mini-btn:hover{color:#1C1E24;text-decoration:underline}
.notice.warn{border-color:#1C1E24;background:#fff}
.nav-badge{position:absolute;top:-7px;inset-inline-start:2px;background:#fff;color:#1C1E24;border:1.5px solid #1C1E24;border-radius:999px;font-size:9.5px;font-weight:700;line-height:1.6;padding:0 5px;min-width:17px;text-align:center}
.bottom-nav a{position:relative}
.salon-room-row{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #E5E7EB;border-radius:14px;padding:10px 12px;margin:0 0 8px;color:inherit;text-decoration:none;box-shadow:var(--sh-rest)}
.salon-room-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.salon-room-title{font-size:13.5px;font-weight:700}
.salon-room-prev{font-size:11.5px;color:#6B7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.salon-room-count{font-size:11px;color:#6B7280;white-space:nowrap}
.salon-back{margin:0 0 2px;font-size:12.5px}
.salon-room-h{margin:2px 0 0}
.salon-room-meta{margin:2px 0 8px;font-size:12px}
.salon-rules{background:#F7F8FA;border:1px solid #E5E7EB;border-radius:10px;padding:8px 11px;font-size:12px;line-height:1.9;color:#374151;margin:0 0 10px}
.salon-pinned{background:#fff;border:1.5px solid #1C1E24;border-radius:12px;padding:9px 12px;margin:0 0 10px}
.salon-pinned p{margin:4px 0;font-size:13px}
.salon-msgs{display:flex;flex-direction:column;gap:10px;padding:4px 0 12px}
.msg{display:flex;gap:8px;align-items:flex-start}
.msg .avatar.sm{width:30px;height:30px;font-size:13px;margin:0;flex-shrink:0}
.msg-body{background:#F7F8FA;border:1px solid #E5E7EB;border-radius:12px;padding:7px 10px;max-width:85%;min-width:0}
.msg.mine .msg-body{background:#1C1E24;border-color:#1C1E24;color:#fff}
.msg-head{margin:0;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;font-size:12px}
.msg-biz{color:#6B7280;font-size:11px}
.msg.mine .msg-biz{color:#C9CCD4}
.msg-time{color:#9AA0AA;font-size:10.5px;margin-inline-start:auto}
.msg-text{margin:3px 0 0;font-size:13.5px;line-height:1.85;white-space:pre-wrap;word-break:break-word}
.msg-acts{margin:2px 0 0;display:flex;gap:2px}
.msg.mine .mini-btn{color:#C9CCD4}
.msg.gone{padding:2px 4px}
.msg-tomb{font-size:12px;color:#9AA0AA;font-style:normal;background:#F3F4F6;border-radius:999px;padding:2px 10px}
.salon-composer{position:sticky;bottom:14px;z-index:40;display:flex;gap:8px;align-items:flex-end;background:#fff;border:1px solid #E5E7EB;border-radius:14px;padding:8px;box-shadow:var(--sh-chrome)}
.salon-composer textarea{flex:1;border:0;resize:none;font-family:inherit;font-size:13.5px;line-height:1.8;max-height:96px;padding:4px 6px;background:transparent}
.salon-composer textarea:focus{outline:none}
.salon-closed-note{margin:10px 0}
@media(max-width:900px){.salon-composer{bottom:78px}}

/* Phase 3 (2026-10-29): service-tile images, PWA install card, admin images */
.tile-img{width:54px;height:54px;border-radius:14px;object-fit:cover;border:1px solid #E5E7EB;background:#fff;box-shadow:var(--sh-rest);transition:transform .2s ease,box-shadow .2s ease}
@media(hover:hover) and (pointer:fine){body.is-public .svc-tile:hover .tile-img{transform:translateY(-2px);box-shadow:var(--sh-top),var(--sh-lift)}}
.tile-img.lg{width:44px;height:44px;border-radius:12px;flex-shrink:0}
@media(max-width:480px){.tile-img{width:48px;height:48px}}
.install-card{border:1.5px solid #1C1E24}
.install-card[hidden]{display:none}
.img-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin:10px 0 20px}
.img-thumb{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:10px;border:1px solid #E5E7EB;background:#fff;display:block}
.img-none{display:flex;align-items:center;justify-content:center;aspect-ratio:21/9;background:#EEF0F2;border:1px dashed #E5E7EB;border-radius:10px;color:#6B7280;font-size:12px;padding:8px;text-align:center}
.img-slot form{margin-top:8px}
.img-slot input[type=file]{font-size:12px;padding:6px}
.img-slot code{font-size:11px;color:#6B7280}

/* Membership tiers (2026-10-30): compact cards, same scale as the rest */
.tier-price{font-size:19px;font-weight:800;margin:2px 0 6px}
.tier-price .muted{font-size:12px;font-weight:400}
.tier-card ul{margin:6px 0 10px;padding-inline-start:18px}
.tier-card li{margin:2px 0}
.tiers-grid{align-items:stretch}

/* --- اعضای کلاب: directory cards, public profile, filters (2026-10-30, compact scale) --- */
.avatar-img{width:36px;height:36px;border-radius:50%;object-fit:cover;display:inline-block;vertical-align:middle;background:#EDEEF1}
.avatar.lg{width:56px;height:56px;font-size:21px;margin:0}
.avatar-img.lg{width:56px;height:56px}
.member-item .avatar-img{width:48px;height:48px;margin:0 auto 5px;display:block}
.member-card .member-head{display:flex;gap:10px;align-items:flex-start}
.member-card h3{margin:0;font-size:14px}
.member-card h3 a{color:inherit;text-decoration:none}
.member-biz{margin:2px 0 0;font-size:12.5px}
.member-cat{margin:1px 0 0;font-size:11.5px;color:#6B7280}
.member-chips{margin:8px 0 2px}
.tag-link{text-decoration:none}
.member-line{margin:6px 0 0;font-size:12.5px;line-height:1.9}
.profile-head{display:flex;gap:12px;align-items:center}
.profile-head h1{margin:0}
.member-filters .filter-row label{display:inline-flex;gap:6px;align-items:center}
.member-filters select{max-width:170px}
.chk{display:flex;gap:8px;align-items:center;font-size:13px;color:#16181D;margin:6px 0}
.chk input{width:auto;margin:0}

/* --- دورهمی (Gatherings) — track sections, agenda, rules line --- */
.agenda{margin:6px 0;padding-inline-start:18px;line-height:2;font-size:13.5px}
.rules-line{font-size:12px;color:#6B7280;margin:6px 0}

/* --- خانه تصویرمحور + ردیف کوچک سطح‌ها (Image-led home, 2026-10-30) ---
   Rubika-inspired but inside the compact scale: feed rows carry a small
   square thumbnail, and the tiers at the end of home are three SMALL square
   thumbnails in ONE row — name only under each, NO prices on home; each
   links to its anchor on /pricing. The ONE intentional large visual is the
   home hero: Rayan's own artwork in the cover-home slot, rendered UNCROPPED
   at its natural aspect (the club line is baked into the image), so it uses
   .home-hero-img with height:auto — never the 21:9 ph-cover crop. */
.home-cover{margin:8px 0 2px}
.home-cover .ph,.home-cover .ph-img{margin:0}
.home-hero{margin:6px 0 4px}
.home-hero-img{width:100%;height:auto;display:block;border-radius:14px;border:1px solid #E5E7EB;box-shadow:var(--sh-rest)}
.tier-mini-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:10px 0}
.tier-mini{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;color:#16181D;min-width:0}
.tier-mini-img{width:100%;max-width:92px;aspect-ratio:1/1;object-fit:cover;border-radius:14px;border:1px solid #E5E7EB;box-shadow:var(--sh-rest);display:block}
.tier-mini .ph{margin:0;width:100%;max-width:92px;max-height:none;border-radius:14px}
.tier-mini-name{font-size:12px;font-weight:700;line-height:1.6}
.tier-mini-badge{font-size:9.5px;padding:1px 6px}
.tier-card[id]{scroll-margin-top:110px}
.tier-p-img{width:100%;height:150px;object-fit:cover;border-radius:10px;border:1px solid #E5E7EB;display:block;margin-bottom:9px}
.tier-card .ph{max-height:150px}

/* --- هدر «کلاب من» + اسلایدر هیرو + استوری‌ها (2026-10-30) ---
   JOB 1: the header auth control is ONE slim charcoal pill labelled
   «کلاب من» in both states — nowrap, never wraps, never fattens the header.
   The search input flexes (min-width:0) so brand | search | pill fit 360px. */
.nav a.hdr-club{background:#1C1E24;color:#fff;padding:6px 14px;font-size:13px;font-weight:700;line-height:1.6;white-space:nowrap;flex:0 0 auto;display:inline-flex;align-items:center;border-radius:999px}
.nav a.hdr-club:hover{background:#000}
/* JOB 2: hero slider — same frame as the old single hero (21:9, rounded,
   compact). Slides are cover-fit pinned to the bottom edge so the caption
   baked into slide 1 (cover-home) is never cropped. Dots sit in the
   bottom-left corner, clear of that centred caption line. */
.hero-slider{position:relative;margin:6px 0 4px;aspect-ratio:21/9;border-radius:14px;overflow:hidden;border:1px solid #E5E7EB;box-shadow:var(--sh-rest);background:#F8F3E7}
.hero-track{position:absolute;inset:0}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity .55s ease;pointer-events:none}
.hero-slide.active{opacity:1;pointer-events:auto}
.hero-slide img{width:100%;height:100%;object-fit:cover;object-position:50% 100%;display:block}
.hero-dots{position:absolute;left:10px;bottom:8px;display:flex;gap:5px;z-index:3}
.hero-dot{width:7px;height:7px;border-radius:99px;border:0;padding:0;background:rgba(28,30,36,.30);cursor:pointer;transition:width .25s ease,background .25s ease}
.hero-dot.active{background:#1C1E24;width:18px}
@media (prefers-reduced-motion: reduce){.hero-slide{transition:none}.hero-dot{transition:none}}
/* JOB 3: stories row — circles ~62px with a thin colourful ring in the logo
   hues; seen stories go light grey. One tiny title line under each. */
.stories-row{display:flex;gap:13px;overflow-x:auto;padding:4px 2px 6px;margin:0 0 2px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.stories-row::-webkit-scrollbar{display:none}
.story-item{display:flex;flex-direction:column;align-items:center;gap:4px;flex:0 0 auto;width:70px;color:#16181D}
.story-ring{width:62px;height:62px;border-radius:50%;padding:3px;background:conic-gradient(from 210deg,#7C3AED,#F97316,#F59E0B,#0D9488,#7C3AED);display:block}
.story-ring img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;border:2px solid #fff;background:#F7F8FA}
.story-item.seen .story-ring{background:#E5E7EB}
.story-name{font-size:11px;line-height:1.5;font-weight:500;max-width:70px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
/* Story viewer — full-screen, charcoal backdrop, segmented progress bars,
   media contained, CTA pinned at the bottom. */
.story-viewer{position:fixed;inset:0;z-index:200;background:#1C1E24;display:flex;flex-direction:column}
.story-viewer[hidden]{display:none}
.story-bars{display:flex;gap:4px;padding:12px 12px 0}
.story-bar{flex:1;height:3px;border-radius:99px;background:rgba(255,255,255,.28);overflow:hidden}
.story-bar i{display:block;height:100%;width:0;background:#fff;border-radius:99px}
.story-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px 2px;color:#fff}
.story-vtitle{font-size:13.5px;font-weight:700}
.story-x{background:transparent;border:0;color:#fff;font-size:16px;cursor:pointer;padding:4px 8px;line-height:1;font-family:inherit}
.story-stage{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;position:relative;touch-action:none;user-select:none;-webkit-user-select:none}
.story-stage img,.story-stage video{max-width:100%;max-height:100%;object-fit:contain;display:block}
.story-cta{align-self:center;margin:10px 0 22px;background:#fff;color:#1C1E24;font-weight:700;padding:9px 28px;border-radius:999px;font-size:14px;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.story-cta:hover{background:#F3F4F6}
.story-admin-thumb{width:64px;height:64px;border-radius:50%;object-fit:cover;border:1px solid #E5E7EB;display:block}

/* --- دورهمی depth redesign (2026-10-30 — Rayan approved plan): the plain
   stacked-text detail becomes layered — parallax hero + floating glass info
   card, agenda as a numbered timeline, capacity/price as a perforated
   TICKET with a seats progress bar, and a sticky action bar above the
   bottom nav. List cards gain a floating calendar date badge + the same
   seats bar. Compact scale untouched (no font growth); all motion is
   transform/opacity and the JS side already dies under reduced-motion. --- */
.ev-hero{position:relative;margin:2px 0 12px}
.ev-hero-frame{border-radius:16px;overflow:hidden;aspect-ratio:21/9;max-height:170px;box-shadow:var(--sh-top),var(--sh-rest);background:#F7F8FA}
.ev-hero-img{width:100%;height:112%;object-fit:cover;display:block;transform:translateY(-6%);will-change:transform}
.ev-hero .ph{margin:0}
.ev-glass{position:relative;z-index:2;margin:-36px 10px 0;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);border:1px solid rgba(229,231,235,.95);border-radius:14px;box-shadow:var(--sh-top),var(--sh-lift);padding:9px 12px 10px}
.ev-glass-chips{margin:0 0 3px}
.ev-glass-line{margin:2px 0;font-size:13px}
.ev-glass-line>span{color:#6B7280;font-size:11.5px;margin-inline-end:5px}
/* Agenda timeline: numbered nodes on a hairline */
.ev-timeline{list-style:none;margin:10px 0 2px;padding:0}
.ev-timeline li{position:relative;padding-inline-start:32px;padding-bottom:12px;font-size:13.5px;line-height:1.9}
.ev-timeline li:last-child{padding-bottom:2px}
.ev-timeline li::before{content:"";position:absolute;inset-inline-start:10.5px;top:26px;bottom:-2px;width:1.5px;background:#E5E7EB}
.ev-timeline li:last-child::before{display:none}
.ev-node{position:absolute;inset-inline-start:0;top:2px;width:22px;height:22px;border-radius:50%;background:#fff;border:1px solid #E5E7EB;box-shadow:var(--sh-rest);font-size:11px;font-weight:700;color:#1C1E24;display:flex;align-items:center;justify-content:center;line-height:1}
/* Ticket: perforated stub divider (dashed rule + page-coloured notches) */
.ev-ticket{box-shadow:var(--sh-top),var(--sh-lift)}
.ev-perf{position:relative;border-top:2px dashed #DFE2E7;margin:12px -15px}
.ev-perf::before,.ev-perf::after{content:"";position:absolute;top:0;transform:translateY(-50%);width:18px;height:18px;border-radius:50%;background:#fff;border:1px solid #E5E7EB}
.ev-perf::before{inset-inline-start:-10px}
.ev-perf::after{inset-inline-end:-10px}
.progress.ev-seats{height:5px;margin:7px 0 3px}
/* Sticky action bar — detail page only. Desktop: rests near the viewport
   edge; mobile: floats ABOVE the bottom nav (same 78px offset the salon
   composer uses: nav ~12px margin + ~54px tall + breathing room). */
.ev-action-bar{position:fixed;bottom:14px;left:50%;transform:translateX(-50%);width:min(728px,calc(100% - 24px));z-index:45;display:flex;align-items:center;justify-content:space-between;gap:10px;background:rgba(255,255,255,.87);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);border:1px solid #E5E7EB;border-radius:14px;box-shadow:var(--sh-top),var(--sh-chrome);padding:8px 10px}
@media(max-width:900px){.ev-action-bar{bottom:78px}}
.ev-action-bar form{margin:0}
.ev-action-bar .btn{white-space:nowrap}
.ev-bar-price{display:flex;flex-direction:column;line-height:1.5;font-size:11px;color:#6B7280}
.ev-bar-price b{font-size:14px;color:#16181D}
.ev-bar-note{font-size:12.5px;color:#374151}
.ev-bar-spacer{height:80px}
@media(max-width:900px){.ev-bar-spacer{height:92px}}
/* List cards: cover wrapper + floating calendar badge */
.ev-cover{position:relative}
.ev-cover .ph-img,.ev-cover .ph{margin:0 0 8px}
.ev-badge{position:absolute;top:8px;inset-inline-start:8px;background:#fff;border:1px solid #E5E7EB;border-radius:10px;box-shadow:var(--sh-lift);padding:3px 8px 4px;text-align:center;line-height:1.25;min-width:42px;z-index:2}
.ev-badge b{display:block;font-size:15px;color:#16181D}
.ev-badge small{display:block;font-size:9.5px;color:#6B7280}

/* --- ویترین دورهمی — home gathering spotlight (2026-10-30, Rayan): the
   guest strip becomes a showcase card — cover band + floating calendar
   badge, honest status chips (pulsing «ثبت‌نام باز است» + days-left), the
   shared seats bar, and a price/«رزرو» foot. Pick logic (pinned flag /
   fill-ratio trending / soonest) lives server-side in spotlightPick();
   compact scale untouched, pulse dies under the global reduced-motion
   rule above. --- */
.spot{padding:0;overflow:hidden}
.spot-cover{position:relative}
.spot-cover .ph-img,.spot-cover .ph{margin:0;border:0;border-radius:0;box-shadow:none}
.spot-cover .ev-badge{top:auto;bottom:-13px;inset-inline-start:14px}
.spot-body{padding:20px 14px 12px}
.spot-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 4px;flex-wrap:wrap}
.spot-label{margin:0}
.spot-chips{display:inline-flex;align-items:center;gap:5px}
.spot-chips .tag{margin:0}
.spot-open{display:inline-flex;align-items:center;gap:5px;background:#F3F4F6;color:#374151;border-radius:999px;padding:2px 8px;font-size:11px;font-weight:700;line-height:1.7}
.spot-open.spot-full{color:#6B7280;font-weight:400}
.spot-dot{width:7px;height:7px;border-radius:50%;background:#1C1E24;animation:spotPulse 1.8s ease-in-out infinite}
@keyframes spotPulse{0%,100%{box-shadow:0 0 0 0 rgba(28,30,36,.35)}55%{box-shadow:0 0 0 5px rgba(28,30,36,0)}}
.spot-body h2{margin:0 0 2px;font-size:16px}
.spot-meta{margin:2px 0;font-size:12.5px;color:#374151;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spot-out{margin:3px 0;font-size:12.5px;color:#4B5563;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.spot-seats{margin:2px 0 0;font-size:11.5px}
.spot-free{color:#16181D;font-size:14px}

/* Gathering card labels + buyer details (2026-10-30): cards carry label
   chips only (date/time/city); the full address lives in .ev-details on the
   detail page and on the buyer's ticket. */
.ev-labels{margin:4px 0 6px}
.ev-labels .tag{margin:0 0 2px 4px}
.ev-details{background:#F7F8FA;border:1px solid #E5E7EB;border-radius:10px;padding:10px 12px;margin:10px 0}
.ev-details h4{margin:0 0 6px;font-size:13px}
.ev-details p{margin:2px 0;font-size:12.5px;color:#3F434B}
.ev-maps{margin:8px 0 2px}
.ev-glass .ev-maps{margin:4px 0 0}

/* --- Phase 1 (2026-10-31): whole-card navigation (stretched link), gatherings band + featured + archive strip ---
   Stretched link: the title link's ::after covers the whole card (card is
   position:relative via .has-stretch); the ::after sits at z-index 1, above
   the card background/content, while the real CTA (.card-cta) is lifted to
   z-index 2 so «رزرو» stays its own clickable link. No nested anchors.
   The salon unread badge (.nav-badge) is positioned relative to its own
   .bottom-nav a (position:relative, generic rule above), so it renders
   correctly on محفل in its new non-centre position as well. */
.has-stretch{position:relative}
.stretch-link{color:inherit;text-decoration:none}
.stretch-link:hover{text-decoration:underline}
.stretch-link::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.has-stretch .card-cta{position:relative;z-index:2}
.has-stretch .ev-badge{pointer-events:none}
.gather-band{margin:2px 0 10px}
.gather-band .ph,.gather-band .ph-img{margin:0}
.gfeat{display:flex;gap:12px;align-items:stretch}
.gfeat-cover{flex:0 0 110px;width:110px;align-self:flex-start}
.gfeat-cover .ph,.gfeat-cover .ph-img{margin:0;width:100%}
.gfeat-main{flex:1;min-width:0;display:flex;flex-direction:column}
.gfeat-label{margin:0}
.gfeat-title{margin:2px 0;font-size:15px}
.gfeat-out{font-size:12.5px;color:#4B5563;margin:2px 0}
.gfeat .svc-foot{margin-top:auto}
.archive-strip{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;font-weight:600}
@media(max-width:480px){.gfeat-cover{flex-basis:96px;width:96px}}

/* --- Login redesign (phase 2, 2026-10-31): visual panel + floating glass
   card. Desktop: side-by-side in a centred shell, the card overlapping the
   visual a touch for depth. Mobile: the visual becomes a slim top band and
   the card rides over it (-22px + layered shadow). Compact scale and the
   charcoal palette are untouched; the only colour is the logo medallion's
   own glow. Entrance is transform/opacity ≤8px and the global
   prefers-reduced-motion rule above kills it. --- */
.login-shell{max-width:880px;margin:4px auto 0}
.login-visual{border-radius:16px;overflow:hidden;border:1px solid #E5E7EB;box-shadow:var(--sh-top),var(--sh-rest);background:#F8F3E7;animation:loginFade .5s ease both}
.login-visual-img{width:100%;display:block;object-fit:cover;aspect-ratio:21/9;max-height:155px}
.login-visual-fallback{min-height:150px;background:radial-gradient(320px 150px at 82% -40px,rgba(232,134,46,.16),rgba(232,134,46,0) 70%),radial-gradient(340px 160px at 12% -50px,rgba(110,76,165,.14),rgba(110,76,165,0) 70%),#F8F3E7}
.login-card{position:relative;z-index:2;margin:-22px 10px 0;background:rgba(255,255,255,.87);-webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);border:1px solid rgba(229,231,235,.95);border-radius:16px;box-shadow:var(--sh-top),var(--sh-lift);padding:16px 16px 12px;animation:loginRise .45s ease both}
.login-medal{width:56px;height:56px;margin:0 auto 4px;border-radius:50%;overflow:hidden;box-shadow:0 10px 22px rgba(22,24,29,.14),0 0 0 5px rgba(255,255,255,.92),0 0 26px rgba(232,134,46,.30),0 0 38px rgba(110,76,165,.20)}
.login-medal img{width:100%;height:100%;display:block;object-fit:cover;object-position:center 18%}
.login-card h1{text-align:center;font-size:19px;margin:2px 0}
.login-sub{text-align:center;color:#6B7280;font-size:13px;margin:2px 0 10px}
.login-next{text-align:center}
.login-card input:focus{outline:none;border-color:#1C1E24;box-shadow:0 0 0 3px rgba(28,30,36,.12)}
.login-btn{width:100%;margin-top:8px}
.login-foot{margin:12px 0 0;text-align:center;color:#9CA3AF;font-size:11.5px}
.login-foot b{font-weight:400;letter-spacing:.04em}
@keyframes loginRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes loginFade{from{opacity:0}to{opacity:1}}
/* Demo-code ticket chip: dashed border, the code exactly once, prominent */
.code-chip{display:flex;align-items:center;justify-content:center;gap:10px;border:1.5px dashed #C9CDD4;background:#F7F8FA;border-radius:12px;padding:8px 12px;margin:10px 0 2px;box-shadow:inset 0 1px 0 rgba(255,255,255,.75)}
.code-chip-label{font-size:12.5px;color:#6B7280}
.code-chip-digits{font-size:24px;line-height:1.5;color:#16181D;letter-spacing:.22em;font-variant-numeric:tabular-nums}
.login-demo-note{text-align:center;color:#6B7280;font-size:12px;margin:2px 0 8px}
/* Segmented OTP: JS layer over the one real input (name="code"). The boxes
   carry no name, start hidden, and JS syncs them into the real input —
   which is clipped only once JS has enhanced the form. No JS = the plain
   input, exactly as before. */
.otp-boxes{direction:ltr;display:flex;gap:8px;justify-content:center;margin:6px 0 2px}
.otp-boxes[hidden]{display:none}
.otp-box{width:46px;height:52px;margin:0;padding:6px 0;text-align:center;font-size:20px;font-weight:700;color:#16181D}
.otp-real-off{position:absolute;width:1px;height:1px;margin:0;padding:0;opacity:0;pointer-events:none}
@media(min-width:860px){
  .login-shell{display:grid;grid-template-columns:1.08fr .92fr;align-items:stretch}
  .login-visual-img{aspect-ratio:auto;height:100%;max-height:none;min-height:330px}
  .login-card{margin:0;margin-inline-start:-34px;align-self:center}
}

/* --- Panel home phase 3 (2026-10-31): identity header, «همین حالا» priority
   card, tier status card, compact quick tiles, payments chip. Depth ONLY —
   layered shadows via the shared tokens, no entrance motion, no tilt, no
   parallax (panel law). Compact scale and monochrome palette unchanged. --- */
.panel-id-head{display:flex;gap:12px;align-items:center}
.panel-id-main{flex:1;min-width:0}
.panel-id-hi{margin:0;font-size:12px;color:#6B7280}
.panel-id-name{font-size:19px;margin:0;line-height:1.6}
.panel-id-tags{margin:3px 0 0}
.panel-id-status{margin:9px 0 0;font-size:13px;border-top:1px solid #E5E7EB;padding-top:8px}
.panel-id-since{margin:2px 0 0}
.panel-id .avatar,.panel-id .avatar-img{margin:0;flex-shrink:0}
.panel-priority{border:1.5px solid #1C1E24}
.panel-priority-head{margin:0 0 4px}
.panel-priority .notice{margin:6px 0 2px}
.panel-priority .ev-details{margin:8px 0}
.panel-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:10px 0}
@media(min-width:700px){.panel-tiles{grid-template-columns:repeat(4,1fr)}}
.panel-tile{position:relative;background:#fff;border:1px solid #E5E7EB;border-radius:12px;padding:10px 11px;box-shadow:var(--sh-top),var(--sh-rest);color:#16181D;display:flex;flex-direction:column;gap:2px;min-height:56px}
.panel-tile-name{font-size:13px;font-weight:700;line-height:1.6}
.panel-tile-sub{font-size:11px;color:#6B7280;line-height:1.6}
.panel-tile-badge{position:absolute;top:8px;inset-inline-end:8px;background:#1C1E24;color:#fff;border-radius:999px;font-size:10.5px;font-weight:700;line-height:1.7;padding:0 7px}
.panel-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#1C1E24;margin-inline-start:6px;vertical-align:middle}
.pay-chip{display:inline-block;background:#1C1E24;color:#fff;font-weight:800;border-radius:999px;padding:2px 12px;font-size:14px;line-height:1.8}

/* --- Panel hub v2 (2026-10-31): merged identity+subscription card, slim
   alert strip, super-app image-tile menu, demoted next-ticket card.
   Panel law stays: depth only, no motion; compact scale. --- */
.panel-sub{margin-top:10px;border-top:1px solid #E5E7EB;padding-top:9px;font-size:13px}
.panel-sub p{margin:4px 0}
.panel-sub .sub-warn{color:#B45309;font-weight:700}
.panel-sub.warn>p:first-child b{color:#B45309}
.sub-progress{height:5px;margin:6px 0 2px}
.panel-bare{margin:9px 0 0;font-size:12.5px;background:#F7F8FA;border:1px dashed #D1D5DB;border-radius:10px;padding:7px 10px;line-height:1.9}
.panel-alert{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#1C1E24;color:#fff;border-radius:12px;padding:8px 12px;font-size:12.5px;line-height:1.8;margin:10px 0 2px;box-shadow:var(--sh-rest)}
.panel-alert .btn{background:#fff;color:#1C1E24;border-color:#fff}
.panel-menu{margin:12px 0 2px}
.svc-tile .tile-sub{font-size:10.5px;color:#6B7280;line-height:1.55}
.panel-next .ev-details{margin:8px 0}
.panel-next>h3{margin-top:2px}

/* --- Admin dashboard phase 4a (2026-10-31): stat cards, pending inbox,
   activity feed. Admin law: clarity + depth only, no motion gimmicks;
   compact scale, monochrome charcoal palette. --- */
.dash-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin:10px 0 4px}
.stat-card{margin:0}
.stat-card h3{font-size:12.5px;font-weight:600;color:#4B5563;margin:0}
.stat-num{font-size:19px;font-weight:800;color:#16181D;margin:3px 0 1px;line-height:1.6}
.stat-sub{font-size:11.5px;margin:1px 0 0}
.inbox{display:flex;flex-direction:column;gap:7px;margin:8px 0 4px}
.inbox-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;border:1px solid #E5E7EB;border-radius:12px;padding:9px 12px;color:#16181D;box-shadow:var(--sh-top),var(--sh-rest)}
.inbox-main{display:flex;flex-direction:column;gap:1px;min-width:0}
.inbox-label{font-size:13.5px;font-weight:700}
.inbox-note{font-size:11.5px;color:#6B7280}
.inbox-badge{flex-shrink:0;background:#1C1E24;color:#fff;border-radius:999px;font-size:12px;font-weight:700;line-height:1.7;padding:1px 10px;min-width:30px;text-align:center}
.inbox-row.is-zero{opacity:.55}
.inbox-row.is-zero .inbox-badge{background:#F3F4F6;color:#6B7280}
.feed-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;border-bottom:1px solid #E5E7EB;padding:7px 2px}
.feed-row:last-of-type{border-bottom:0}
.feed-main{margin:0;font-size:13.5px}
.feed-time{font-size:11.5px;white-space:nowrap}

/* --- Members CRM phase 4b (2026-10-31): filter bar, bulk composer,
   confirm panel, member-file activity. Compact, monochrome. --- */
.bulk-confirm{border:1.5px solid #1C1E24}
.member-filters .filter-row{margin-top:6px}

/* --- Panel depth layer (2026-10-31, "panel 3D" — all 7 elements approved
   by Rayan): visual depth for PANEL pages only. Every rule is scoped to
   panel-only hooks (body.is-panel shell, .panel-main, or classes that exist
   solely in panel markup: .panel-id, .pid-*, .panel-sub, .panel-menu,
   .panel-ticket/.ptick-*, .panel-install/.pinstall-*), so public pages keep
   byte-identical rendering. Depth + press feedback only — no reveal, no
   tilt, no parallax in the panel; transitions 120–180ms, transform/opacity
   only, and prefers-reduced-motion (global rule above) neutralises them. --- */

/* 1) Card depth in panel: stronger layered shadow, panel-tuned. */
body.is-panel .panel-main .card,body.is-panel .panel-main .notice{box-shadow:var(--sh-top),0 1px 2px rgba(22,24,29,.05),0 10px 22px rgba(22,24,29,.05),0 26px 44px -22px rgba(22,24,29,.20)}
body.is-panel .panel-alert{box-shadow:0 1px 2px rgba(22,24,29,.22),0 14px 28px -14px rgba(22,24,29,.45)}

/* 2) Identity card: faint cover-art watermark behind the head, avatar RING
   in logo hues by effective tier, raised MEDAL tier badge, warm letter
   avatar. Ring gradient hues = the story-ring palette. */
.panel-id{position:relative;overflow:hidden}
.panel-id-wm{position:absolute;top:-18px;inset-inline-end:-14px;width:220px;height:140px;background-size:cover;background-position:center;opacity:.05;pointer-events:none;z-index:0;-webkit-mask-image:linear-gradient(215deg,#000 25%,transparent 75%);mask-image:linear-gradient(215deg,#000 25%,transparent 75%)}
.panel-id>*{position:relative;z-index:1}
.panel-id>.panel-id-wm{position:absolute;z-index:0}
.pid-ring{display:inline-flex;border-radius:50%;padding:3px;flex-shrink:0;line-height:0}
.pid-ring.ring-vip{background:conic-gradient(from 210deg,#7C3AED,#F97316,#F59E0B,#0D9488,#7C3AED);box-shadow:0 4px 12px -4px rgba(124,58,237,.45)}
.pid-ring.ring-special{background:conic-gradient(from 210deg,#C9BEE8,#E7E1F7,#C9BEE8)}
.pid-ring.ring-normal{background:#E5E7EB}
.pid-ring .avatar,.pid-ring .avatar-img{border:2px solid #fff;box-sizing:border-box}
.pid-ring .avatar{background:#FBF1DC;color:#1C1E24}
.panel-id-name .tag{vertical-align:middle;padding:3px 11px;font-size:11.5px;font-weight:800}
.panel-id-name .tag.primary{background:linear-gradient(135deg,#33363F,#1C1E24 55%,#23252C);color:#fff;border-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.30),inset 0 -9px 12px -9px rgba(245,158,11,.55),0 6px 14px -6px rgba(28,30,36,.50),0 2px 4px rgba(28,30,36,.16)}
.panel-id-name .tag.purple{background:linear-gradient(180deg,#FFFFFF,#ECEEF2);color:#1C1E24;border:1px solid #DDE0E6;box-shadow:inset 0 1px 0 #fff,0 5px 12px -6px rgba(22,24,29,.35)}

/* 3) Subscription progress: chunky glossy bar, charcoal fill with a soft
   logo-hue tip; days number in stronger type. Renders only where the bar
   already rendered (tierSince condition unchanged in server markup). */
.panel-sub .sub-progress{height:9px;border-radius:999px;background:#E7E9EE;box-shadow:inset 0 1px 3px rgba(22,24,29,.22),inset 0 -1px 0 rgba(255,255,255,.55)}
.panel-sub .sub-progress span{border-radius:999px;background:linear-gradient(90deg,rgba(245,158,11,.55),rgba(245,158,11,0) 16px),linear-gradient(180deg,#3B3F49,#1C1E24 58%);box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.panel-sub .sub-days{font-size:16.5px;font-weight:800;color:#16181D}

/* 4) Tiles: equal-height cells, sub-labels clamped to ONE line, resting
   layered shadow on the image, soft diagonal sheen, tactile press. */
.panel-menu .svc-tile{position:relative;height:100%;transition:transform .15s ease}
.panel-menu .tile-img,.panel-menu .tile-mark{box-shadow:var(--sh-top),0 2px 4px rgba(22,24,29,.07),0 12px 22px -10px rgba(22,24,29,.28)}
.panel-menu .svc-tile::after{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:54px;height:54px;border-radius:14px;background:linear-gradient(135deg,rgba(255,255,255,.38),rgba(255,255,255,0) 55%);pointer-events:none}
@media(max-width:480px){.panel-menu .svc-tile::after{width:48px;height:48px}}
.panel-menu .svc-tile:active{transform:scale(.97)}
.panel-menu .svc-tile:active .tile-img,.panel-menu .svc-tile:active .tile-mark{box-shadow:var(--sh-rest)}
.panel-menu .tile-sub{display:block;width:100%;max-width:100%;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.panel-menu .tile-name{white-space:nowrap}

/* 5) «بلیت بعدی تو» as a real ticket: cover thumbnail in the head and the
   perforated divider (the .ev-perf language of the event detail page)
   between head and the details block. */
.ptick-head{display:flex;gap:10px;align-items:flex-start}
.ptick-cover{width:62px;height:62px;border-radius:12px;object-fit:cover;border:1px solid #E5E7EB;box-shadow:var(--sh-rest);flex-shrink:0}
.ptick-main{flex:1;min-width:0}
.ptick-main h3{margin:1px 0 2px}
.ptick-main .ev-labels{margin:2px 0}
.ptick-code{margin:2px 0 0;font-size:13px}
.panel-ticket .ptick-perf{margin:11px -14px 2px}

/* 7) Install card → slim row: logo thumbnail + title + the SAME button
   (id installRowBtn, untouched JS); the text line (id installRowText) sits
   below the row inside the same card, so the iOS instructions the existing
   JS writes into it expand there. */
.panel-install{padding:11px 12px}
.pinstall-row{display:flex;align-items:center;gap:9px}
.pinstall-logo{width:34px;height:34px;border-radius:10px;object-fit:cover;object-position:center 20%;border:1px solid #E5E7EB;box-shadow:var(--sh-rest);flex-shrink:0}
.pinstall-title{flex:1;font-size:13.5px;font-weight:700}
.pinstall-text{margin:6px 0 0;font-size:12px;color:#6B7280;line-height:1.9}

@media(prefers-reduced-motion:reduce){.panel-menu .svc-tile:active{transform:none}}

/* --- Header capsule tidy (2026-10-31 — Rayan: the «کلاب جمشیم» wordmark next
   to the logo wrapped onto two lines when the floating header row got squeezed
   on phones. Wordmark is now nowrap + flex-locked, the search field is the only
   flexible element and absorbs the squeeze; at small widths the wordmark steps
   down a touch and the row gaps tighten so everything stays on ONE row down to
   320px. Desktop rendering is unchanged. --- */
.nav a.brand{flex:0 0 auto}
.nav a.brand img{flex:0 0 auto}
.nav a.brand>span{white-space:nowrap;line-height:1}
.nav a.brand small{white-space:nowrap}
.hdr-search-in{text-overflow:ellipsis}
@media(max-width:480px){
  .nav{gap:5px}
  .nav a.brand{gap:6px;font-size:14px}
}
@media(max-width:360px){
  .nav a.brand{font-size:13.5px}
  .nav a.hdr-club{padding:6px 12px}
}
@media(max-width:340px){
  .nav a.brand{font-size:13px}
}

/* --- No-zoom on focus (2026-10-31 — Rayan: on iPhone the page zoomed in
   suddenly as soon as a form field got focus). Root cause: iOS Safari
   auto-zooms any focused input/select/textarea whose computed font-size is
   under 16px, and the compact design sets 13.5px (13–14px on the search
   fields). Fix: on small screens only, text-entry controls render at
   exactly 16px — the zoom threshold — while all other compact typography
   stays untouched. Vertical padding is trimmed 2px so field heights stay
   visually the same. Desktop rendering is byte-identical: the whole rule
   lives inside this media query. The viewport meta is NOT touched — user
   scaling stays enabled. The specific selectors below repeat the base
   ones so equal specificity + later order beats the 13–14px overrides. --- */
@media(max-width:820px){
  input,select,textarea{font-size:16px;padding-top:6px;padding-bottom:6px}
  .hdr-search-in{font-size:16px;line-height:1.4;padding-top:4px;padding-bottom:4px}
  .global-search input,.global-search select,.bazar-search input{font-size:16px}
  .salon-composer textarea{font-size:16px}
  .img-slot input[type=file]{font-size:16px}
  .otp-real{font-size:16px}
}