/* ==========================================================================
   Joyno v3: pages. Public site first, then auth, member, admin, installer.
   ========================================================================== */

.sec { padding: 72px 0 0; }
.sec--tight { padding-top: 56px; }
.sec--first { padding-top: 34px; }
@media (max-width: 680px) { .sec { padding-top: 54px; } }
.stars { display: inline-flex; gap: 2px; color: var(--sun-400); }
.stars .glyph { width: 14px; height: 14px; }
.qr { display: block; border-radius: 10px; }
.gtext--warm { background-image: linear-gradient(120deg, var(--sun-300), var(--orange-300) 50%, var(--pink-300)); }

/* ---------- hero (v4.5: یک برچسب، تیتر دوخطی، متن کوتاه، دو دکمه؛ هیچ برچسبی روی عکس نیست) ---------- */
.hero { position: relative; padding: 40px 0 24px; isolation: isolate; overflow-x: clip; }
.hero::before { content: ""; position: absolute; inset: -140px 0 0; z-index: -1; background-image: radial-gradient(var(--line-2) 1.1px, transparent 1.3px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(ellipse at 60% 30%, #000 20%, transparent 70%); mask-image: radial-gradient(ellipse at 60% 30%, #000 20%, transparent 70%); }
.hero__in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 46px; align-items: center; }
.hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.hero__k { height: 34px; padding-inline: 12px 14px; font-size: 13px; }
.hero h1 { font-size: clamp(34px, 3.9vw, 56px); font-weight: 950; line-height: 1.3; letter-spacing: -1.2px; text-wrap: balance; }
.hero__lead { font-size: 17px; color: var(--text-2); max-width: 46ch; line-height: 2; text-wrap: pretty; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: 140px 112px 140px auto; gap: 14px; }
.hb { position: relative; border-radius: var(--r-l); overflow: hidden; min-width: 0; }
.hb--photo { grid-column: 1 / 5; grid-row: 1 / 4; margin: 0; background: var(--sun-100); box-shadow: 0 30px 60px -30px rgb(24 22 45 / .45); }
.hb--photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.2s var(--ease); }
.hb--photo:hover img { transform: scale(1.07); }
.hb--stat { grid-column: 5 / 7; grid-row: 1; padding: 16px; display: flex; flex-direction: column; justify-content: center; }
.hb--stat small { font-size: 12.5px; opacity: .85; }
.hb--stat b { font-size: 42px; font-weight: 950; line-height: 1.1; }
.hb--stat span { font-size: 12px; opacity: .9; }
.hb__art { position: absolute; inset-inline-end: 10px; bottom: 10px; transform: rotate(10deg); }
.hb--rate { grid-column: 5 / 7; grid-row: 2; display: flex; align-items: center; gap: 12px; padding: 14px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-2); }
.hb--rate b { display: block; font-size: 14px; font-weight: 850; }
.hb--rate small { display: block; font-size: 11.5px; color: var(--text-3); }
.hb--feed { grid-column: 5 / 7; grid-row: 3; display: flex; flex-direction: column; justify-content: center; padding: 30px 14px 14px; background: linear-gradient(160deg, var(--pink-50), #fff 70%); border: 1px solid var(--pink-100); box-shadow: var(--sh-2); font-size: 12.5px; line-height: 1.7; overflow: visible; }
.hb--feed small { display: block; color: var(--text-3); font-size: 11px; }
.hb--feed.lf { min-width: 0; padding-top: 38px; }
.hb--feed .lf__live { top: 10px; inset-inline-start: 12px; }
.hb--feed.hb--friends { flex-direction: row; align-items: center; gap: 12px; padding: 16px; background: var(--g-lagoon); border: 0; color: #fff; }
.hb--friends small { color: rgb(255 255 255 / .85); }
.hb--friends b { display: block; font-size: 28px; font-weight: 950; line-height: 1.1; }
.hb--next { grid-column: 1 / 5; grid-row: 4; display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: linear-gradient(100deg, #fff 40%, var(--c50)); border: 1px solid var(--c100); box-shadow: var(--sh-2); color: var(--ink); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.hb--next:hover { transform: translateY(-3px); box-shadow: 0 20px 34px -20px var(--cglow); }
.hb--next b { display: block; font-size: 14.5px; font-weight: 850; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb__k { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--c700); font-weight: 750; }
.hb__k .glyph { width: 14px; height: 14px; }
.hb__row { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-3); margin-top: 4px; }
.hb__row .seats { max-width: 120px; }
.hb--next .price__now b { font-size: 16px; }
.hb--ticket { grid-column: 5 / 7; grid-row: 4; display: flex; align-items: center; gap: 10px; padding: 12px; background: var(--ink); color: #fff; box-shadow: var(--sh-2); }
.hb--ticket .qr { border-radius: 8px; flex: none; }
.hb--ticket b { display: block; font-size: 13px; }
.hb--ticket small { display: block; font-size: 11px; opacity: .72; }
@media (max-width: 1100px) {
  .hero__in { grid-template-columns: minmax(0, 1fr); gap: 34px; }
}
@media (max-width: 600px) {
  .hero { padding-top: 24px; }
  .hero h1 { letter-spacing: -.8px; }
  .hero__cta { width: 100%; }
  .hero__cta .btn { flex: 1; }
  .hero__bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 260px auto auto auto; gap: 10px; }
  .hb--photo { grid-column: 1 / -1; grid-row: 1; }
  .hb--stat { grid-column: 1; grid-row: 2; }
  .hb--rate { grid-column: 2; grid-row: 2; flex-direction: column; text-align: center; }
  .hb--feed { grid-column: 1 / -1; grid-row: 3; }
  .hb--next { grid-column: 1 / -1; grid-row: 4; }
  .hb--ticket { display: none; }
  .hb--next .price { display: none; }
}

/* ---------- proof: اعتبار زیر سربرگ ---------- */
.proof { padding: 6px 0 4px; }
.proof__in { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 12px; }
.proof__people, .proof__item { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 14px 16px; border-radius: var(--r-l); background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-1); }
.proof__item { background: linear-gradient(160deg, var(--c50), #fff 75%); border-color: var(--c100); }
.proof b { display: block; font-size: 19px; font-weight: 950; line-height: 1.3; color: var(--ink); }
.proof__item b { color: var(--c700); }
.proof small { display: block; font-size: 12px; color: var(--text-3); font-weight: 650; }
.proof .ico { flex: none; }
.proof__note { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12.5px; color: var(--text-3); }
.proof__note .glyph { flex: none; width: 15px; height: 15px; color: var(--sun-600); }
@media (max-width: 1100px) { .proof__in { grid-template-columns: repeat(2, minmax(0, 1fr)); } .proof__people { grid-column: 1 / -1; } }
@media (max-width: 520px) { .proof__in { grid-template-columns: minmax(0, 1fr); } .proof__people { flex-wrap: wrap; row-gap: 8px; } .proof__people > div:last-child { min-width: 0; flex: 1 1 140px; } }

/* ---------- categories ---------- */
.cats-band { padding-top: 34px; }
.cats { display: grid; grid-template-columns: 1.5fr repeat(5, minmax(0, 1fr)); grid-auto-rows: 132px; gap: 12px; }
.cat { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; padding: 14px; border-radius: 22px; overflow: hidden; background: linear-gradient(160deg, var(--c50), var(--c100)); border: 1px solid var(--c100); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.cat:hover { transform: translateY(-4px) rotate(-.5deg); box-shadow: 0 20px 34px -20px var(--cglow); border-color: var(--c200); }
.cat b { font-size: 14.5px; font-weight: 850; }
.cat small { font-size: 11.5px; color: var(--c800); opacity: .8; }
.cat__art { position: absolute; top: 12px; inset-inline-end: 12px; transition: transform .45s var(--bounce); }
.cat:hover .cat__art { transform: scale(1.15) rotate(-10deg); }
.cat::after { content: ""; position: absolute; width: 90px; height: 90px; border-radius: 50%; top: -30px; inset-inline-start: -30px; background: radial-gradient(circle, rgb(255 255 255 / .8), transparent 70%); }
.cat--lead { grid-row: span 2; justify-content: space-between; padding: 20px; background: var(--g-night); color: #fff; border: 0; }
.cat--lead .tag { width: max-content; }
.cat--lead b { font-size: 28px; font-weight: 950; line-height: 1.3; }
.cat--lead small { color: rgb(255 255 255 / .75); font-size: 13px; }
.cat--lead::after { display: none; }
.cat__go { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; background: rgb(255 255 255 / .16); }
@media (max-width: 1100px) { .cats { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cat--lead { grid-column: span 2; grid-row: span 1; } }
@media (max-width: 600px) { .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 118px; } }

/* ---------- events showcase ---------- */
#events .tabs { margin-bottom: 20px; }
.ev-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ev-bento > * { min-width: 0; display: flex; }
.ev-bento > * > .ev { flex: 1; }
.ev-bento__feature { grid-row: span 2; }
.ev-bento__feature .ev__cover { height: auto; min-height: 300px; flex: 1; }
.ev-bento__feature .ev__body { flex: 0 0 auto; }
@media (max-width: 1100px) { .ev-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ev-bento__feature { grid-column: 1 / -1; grid-row: auto; } .ev-bento__feature .ev__cover { height: 230px; } }
@media (max-width: 640px) { .ev-bento { grid-template-columns: minmax(0, 1fr); } }
.deal { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; align-items: center; gap: 22px; margin-top: 26px; padding: 20px 22px; border-radius: 28px; overflow: hidden; transition: transform .3s var(--ease); }
.deal:hover { transform: translateY(-3px); }
.deal__pct { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 30px; background: var(--ink); color: #fff; text-align: center; line-height: 1.1; transform: rotate(-6deg); box-shadow: 0 16px 30px -14px rgb(24 22 45 / .6); }
.deal__pct b { font-size: 32px; font-weight: 950; }
.deal__pct small { font-size: 12px; color: var(--sun-300); }
.deal__body b { display: block; font-size: 20px; font-weight: 900; margin-top: 6px; }
.deal__body { display: grid; justify-items: start; gap: 4px; }
.deal__meta { font-size: 13px; color: rgb(24 22 45 / .75); font-weight: 650; }
.deal__meta .glyph { color: var(--orange-700); }
.deal__timer { display: flex; flex-direction: column; padding: 10px 14px; border-radius: 16px; background: rgb(255 255 255 / .55); text-align: center; }
.deal__timer small { font-size: 11.5px; color: var(--text-2); }
.deal__timer b { font-size: 18px; font-weight: 900; }
.deal .price__now small, .deal .price__was { color: rgb(24 22 45 / .65); }
.deal__art { position: absolute; inset-inline-start: 48%; bottom: -46px; opacity: .2; transform: rotate(-14deg); pointer-events: none; }
@media (max-width: 1100px) { .deal { grid-template-columns: auto minmax(0, 1fr); } .deal__timer, .deal .price, .deal .btn { grid-column: span 1; } }
@media (max-width: 600px) { .deal { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; } .deal__pct { width: 80px; height: 80px; } }

/* ---------- how it works ---------- */
.how { position: relative; }
.how__in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 50px; align-items: start; }
.how__intro { position: sticky; top: 110px; }
.how__facts { display: grid; gap: 10px; margin-top: 8px; }
.how__facts li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: var(--s1); border: 1px solid var(--line); }
.how__facts b { display: block; font-size: 14px; font-weight: 850; }
.how__facts small { display: block; font-size: 12px; color: var(--text-3); }
.steps { position: relative; display: grid; gap: 18px; counter-reset: s; }
.steps::before { content: ""; position: absolute; top: 40px; bottom: 40px; inset-inline-start: 39px; border-inline-start: 2.5px dashed var(--line-2); }
.step { position: relative; display: grid; grid-template-columns: 80px minmax(0, 1fr) minmax(0, .9fr); gap: 18px; align-items: center; padding: 20px; border-radius: 28px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-2); transition: transform .3s var(--ease); }
.step:hover { transform: translateX(-6px); }
.step__ico { position: relative; z-index: 1; display: grid; place-items: center; width: 62px; height: 62px; margin-inline-start: 9px; border-radius: var(--r-l); background: linear-gradient(150deg, #fff, var(--c100)); box-shadow: inset 0 0 0 2px var(--c300), 0 14px 26px -12px var(--cglow); transform: rotate(-6deg); }
.mini-pay__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.mini-pay__steps span { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 30px; border-radius: var(--r-xs); background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: 11.5px; font-weight: 800; color: var(--text-3); }
.mini-pay__steps .glyph { width: 13px; height: 13px; }
.mini-pay__steps .is-done { background: var(--mint-50); color: var(--mint-800); box-shadow: inset 0 0 0 1px var(--mint-200); }
.mini-pay__steps .is-now { background: var(--cs); color: var(--con); box-shadow: 0 8px 16px -10px var(--cglow); }
.step__copy b { display: block; font-size: 17px; font-weight: 900; }
.step__copy p { font-size: 13.5px; color: var(--text-2); margin-top: 4px; }
.step__ui { padding: 12px; border-radius: 18px; background: var(--c50); border: 1px dashed var(--c200); }
.mini-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.mini-pick span { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 9px 0 7px; border-radius: 10px; background: #fff; border: 1px solid var(--line); font-size: 11.5px; font-weight: 700; }
.mini-pick span.is-on { background: var(--c100); border-color: var(--c300); color: var(--c800); }
.mini-pay { display: grid; gap: 10px; }
.mini-pay__t { display: inline-flex; align-items: center; gap: 4px; font-weight: 850; font-size: 13px; color: var(--pink-700); }
.mini-pay__t .glyph { width: 15px; height: 15px; }
.mini-ticket { display: flex; align-items: center; gap: 12px; }
.mini-ticket .qr { border-radius: 10px; box-shadow: var(--sh-1); }
.mini-ticket b { display: block; font-size: 13.5px; }
.mini-ticket small { display: block; font-size: 11.5px; color: var(--text-3); margin-bottom: 4px; }
@media (max-width: 1100px) { .how__in { grid-template-columns: minmax(0, 1fr); } .how__intro { position: static; } }
@media (max-width: 680px) { .step { grid-template-columns: 64px minmax(0, 1fr); } .step__ui { grid-column: 1 / -1; } .step__ico { width: 52px; height: 52px; margin: 0; } .steps::before { inset-inline-start: 46px; } }

/* ---------- app installation showcase ---------- */
.appx { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: 30px; padding: 54px; border-radius: 42px; background: var(--g-night); color: #fff; overflow: hidden; }
.appx__mesh { position: absolute; inset: 0; z-index: 0; background: radial-gradient(circle at 92% 8%, rgb(242 84 161 / .55), transparent 32%), radial-gradient(circle at 8% 100%, rgb(8 169 207 / .45), transparent 38%), radial-gradient(circle at 60% 60%, rgb(131 90 232 / .5), transparent 45%); }
.appx__grid { position: absolute; inset: 0; z-index: 0; background-image: linear-gradient(rgb(255 255 255 / .06) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .06) 1px, transparent 1px); background-size: 46px 46px; -webkit-mask-image: linear-gradient(200deg, #000, transparent 70%); mask-image: linear-gradient(200deg, #000, transparent 70%); }
.appx > * { position: relative; z-index: 1; }
.appx__copy { display: flex; flex-direction: column; gap: 20px; }
.badge--glass { background: rgb(255 255 255 / .14); color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .25); backdrop-filter: blur(8px); }
.badge--glass .glyph { color: var(--c300); }
.appx__rating { display: inline-flex; align-items: center; gap: 6px; height: 56px; padding: 0 16px; border-radius: 17px; background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .18); font-size: 13px; }
.appx__rating b { font-size: 18px; font-weight: 950; }
.appx .ink { color: var(--sun-300); }
.appx__rating .glyph { width: 17px; height: 17px; color: var(--sun-300); }
.appx__rating small { opacity: .7; }
.appx h2 { font-size: clamp(32px, 4vw, 54px); font-weight: 950; line-height: 1.22; letter-spacing: -1.2px; text-wrap: balance; }
.appx p { color: rgb(255 255 255 / .78); font-size: 15.5px; max-width: 520px; line-height: 2; }
.appx__perks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.appx__perks li { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 18px; background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .14); backdrop-filter: blur(10px); transition: background .2s, transform .3s var(--ease); }
.appx__perks li:hover { background: rgb(255 255 255 / .13); transform: translateY(-2px); }
.appx__perks li > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: var(--c400); color: var(--ink); flex: none; box-shadow: 0 10px 20px -10px var(--cglow); }
.appx__perks li > span .glyph { width: 20px; height: 20px; }
.appx__perks b { display: block; font-size: 14px; font-weight: 850; }
.appx__perks small { display: block; font-size: 12px; color: rgb(255 255 255 / .65); }
.appx__stores { display: flex; flex-wrap: wrap; gap: 10px; }
.store { position: relative; display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 16px 0 18px; border-radius: 17px; background: #0f0d1f; color: #fff; border: 1px solid rgb(255 255 255 / .22); transition: .25s var(--ease); }
.store:hover { transform: translateY(-3px); border-color: rgb(255 255 255 / .5); box-shadow: 0 14px 26px -14px rgb(0 0 0 / .8); }
.store .glyph { width: 26px; height: 26px; }
.store span { display: flex; flex-direction: column; line-height: 1.3; }
.store small { font-size: 10.5px; opacity: .7; }
.store b { font-size: 15px; font-weight: 850; }
.store.is-soon { background: rgb(255 255 255 / .06); border-style: dashed; }
.store__soon { position: absolute; top: -9px; inset-inline-start: 10px; height: 19px; padding: 0 7px; border-radius: 7px; background: var(--sun-400); color: var(--ink); font-size: 10.5px; font-weight: 800; font-style: normal; display: grid; place-items: center; }
.store.is-you, .pf-card.is-you { box-shadow: 0 0 0 2px var(--sun-300), 0 14px 30px -16px rgb(0 0 0 / .8); }
.appx__install { display: flex; flex-wrap: wrap; gap: 10px; }
.btn.is-done { background: var(--mint-500); }
.pfs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pf-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 20px; background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .14); }
.pf-card b { display: block; font-size: 14px; }
.pf-card small { display: block; font-size: 11.5px; color: rgb(255 255 255 / .62); line-height: 1.6; }
.pf-card .badge { align-self: flex-start; }
.pf-card__ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--c400); color: var(--ink); }
.pf-card__ico .glyph { width: 20px; height: 20px; }
.appx__stage { position: relative; min-height: 600px; }
.appx__halo { position: absolute; width: 440px; height: 440px; left: 50%; top: 50%; translate: -50% -50%; border-radius: 50%; background: conic-gradient(from 0deg, var(--pink-500), var(--orange-400), var(--sun-300), var(--cyan-400), var(--violet-500), var(--pink-500)); filter: blur(70px); opacity: .55; animation: spin 18s linear infinite; }
.phone { position: absolute; width: 270px; height: 560px; padding: 10px; border-radius: 46px; background: linear-gradient(145deg, #2e2a4a, #0f0d1f); box-shadow: inset 0 0 0 2px rgb(255 255 255 / .12), 0 40px 80px -30px rgb(0 0 0 / .8), 0 0 0 1px rgb(0 0 0 / .4); }
.phone--front { left: 50%; top: 20px; translate: -38% 0; rotate: -4deg; z-index: 2; }
.phone--back { left: 50%; top: 70px; translate: -110% 0; rotate: -12deg; scale: .86; z-index: 1; opacity: .96; }
.phone__notch { position: absolute; z-index: 3; top: 18px; left: 50%; translate: -50% 0; width: 92px; height: 26px; border-radius: 20px; background: #0b0a16; }
.phone__screen { position: relative; height: 100%; border-radius: 37px; overflow: hidden; background: #fff; color: var(--ink); padding: 44px 14px 76px; display: flex; flex-direction: column; gap: 10px; font-size: 11px; }
.phone__screen--ticket { padding-top: 22px; background: linear-gradient(180deg, var(--violet-50), #fff 40%); }
.ps-status { position: absolute; top: 14px; inset-inline: 22px; display: flex; justify-content: space-between; font-size: 11px; }
.ps-status .glyph { width: 13px; height: 13px; opacity: 0; }
.ps-hello { display: flex; justify-content: space-between; align-items: center; }
.ps-hello small { display: block; color: var(--text-3); font-size: 10.5px; }
.ps-hello b { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 900; }
.ps-bell { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 12px; background: var(--s2); }
.ps-bell .glyph { width: 17px; height: 17px; color: var(--violet-600); }
.ps-bell i { position: absolute; top: -4px; inset-inline-end: -4px; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--pink-500); color: #fff; font-size: 9.5px; font-style: normal; font-weight: 800; }
.ps-hero { position: relative; padding: 14px; border-radius: 20px; background: var(--g-sunset); color: #fff; overflow: hidden; }
.ps-hero::after { content: ""; position: absolute; width: 110px; height: 110px; border-radius: 50%; inset-inline-end: -36px; top: -40px; border: 16px solid rgb(255 255 255 / .18); }
.ps-hero small { display: block; opacity: .85; font-size: 10px; }
.ps-hero b { display: block; font-size: 14px; font-weight: 900; margin: 2px 0 6px; line-height: 1.5; }
.ps-hero__row { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; }
.ps-hero__row .glyph { width: 12px; height: 12px; }
.ps-count { display: inline-block; margin-top: 8px; padding: 3px 9px; border-radius: 8px; background: rgb(255 255 255 / .22); font-size: 10px; font-weight: 800; }
.ps-chips { display: flex; gap: 5px; }
.ps-chips span { padding: 4px 10px; border-radius: 9px; background: var(--s2); font-weight: 750; font-size: 10px; }
.ps-chips .is-on { background: var(--ink); color: #fff; }
.ps-ev { display: flex; align-items: center; gap: 9px; padding: 8px; border-radius: 15px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-1); }
.ps-ev__art { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--c100); flex: none; }
.ps-ev__body { flex: 1; min-width: 0; }
.ps-ev__body b { display: block; font-size: 11px; font-weight: 850; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-ev__body small { display: block; font-size: 9.5px; color: var(--text-3); }
.ps-ev__left { padding: 3px 7px; border-radius: 8px; background: var(--c100); color: var(--c800); font-size: 9.5px; font-weight: 800; white-space: nowrap; }
.ps-tabs { position: absolute; bottom: 12px; inset-inline: 12px; display: flex; justify-content: space-around; align-items: center; height: 52px; border-radius: 18px; background: var(--s1); border: 1px solid var(--line); }
.ps-tabs i { display: grid; place-items: center; color: var(--text-3); }
.ps-tabs i .glyph { width: 18px; height: 18px; }
.ps-tabs i.is-on { color: var(--violet-600); }
.ps-tabs__c { width: 42px; height: 42px; margin-top: -24px; border-radius: 15px; background: var(--g-sunset); color: #fff !important; box-shadow: 0 10px 18px -8px var(--pink-glow), 0 0 0 4px #fff; }
.pt-head { display: flex; justify-content: space-between; align-items: center; }
.pt-head span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: #fff; box-shadow: var(--sh-1); }
.pt-head .glyph { width: 15px; height: 15px; }
.pt-head b { font-size: 13px; }
.pt-ticket { margin-top: 6px; border-radius: 22px; background: #fff; box-shadow: var(--sh-3); overflow: hidden; }
.pt-ticket__top { display: flex; align-items: center; gap: 10px; padding: 14px; background: linear-gradient(135deg, var(--c100), var(--c300)); }
.pt-ticket__top b { display: block; font-size: 12.5px; line-height: 1.5; }
.pt-ticket__top small { font-size: 10px; color: var(--c900); }
.pt-ticket__qr { display: grid; place-items: center; padding: 16px; border-bottom: 2px dashed var(--line-2); position: relative; }
.pt-ticket__row { display: grid; grid-template-columns: repeat(3, 1fr); padding: 12px; text-align: center; font-size: 9.5px; color: var(--text-3); }
.pt-ticket__row b { display: block; font-size: 12px; color: var(--ink); }
.pt-ok { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px; border-radius: 14px; background: var(--good-bg); color: var(--good-text); font-weight: 800; font-size: 10.5px; }
.pt-ok .glyph { width: 15px; height: 15px; }
.appx .fw { z-index: 3; }
.fw--note { top: 250px; right: -14px; display: flex; align-items: center; gap: 10px; }
.fw__ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 13px; background: var(--c500); color: #fff; }
.fw__ico .glyph { width: 19px; height: 19px; }
.fw--rate { bottom: 110px; left: -8px; display: grid; justify-items: center; gap: 6px; max-width: 170px; text-align: center; padding: 14px 16px; }
.fw--rate small { font-size: 11.5px; line-height: 1.7; }
.fw--installs { bottom: 30px; right: 10px; display: flex; align-items: center; gap: 10px; background: var(--g-citrus); border: 0; }
.fw--installs > .glyph { width: 28px; height: 28px; }
.fw--installs b { display: block; font-size: 18px; font-weight: 950; line-height: 1.2; }
.fw--installs small { color: rgb(24 22 45 / .7); }
.appx__qr { display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; border-radius: 22px; background: #fff; color: var(--ink); width: max-content; max-width: 100%; box-shadow: 0 18px 40px -20px rgb(0 0 0 / .6); }
.appx__qr-code { padding: 6px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 2px var(--violet-100); }
.appx__qr b { display: block; font-size: 15px; font-weight: 900; }
.appx__qr small { display: block; font-size: 12px; color: var(--text-3); }
@media (max-width: 1100px) {
  .appx { grid-template-columns: minmax(0, 1fr); padding: 40px 30px; }
  .appx__stage { min-height: 560px; order: -1; }
}
@media (max-width: 640px) {
  .appx { padding: 26px 18px; border-radius: 30px; gap: 22px; }
  .appx__stage { min-height: 470px; margin-inline: -18px; overflow: hidden; }
  .phone { width: 220px; height: 456px; border-radius: 38px; }
  .phone__screen { border-radius: 30px; padding: 40px 11px 70px; gap: 8px; }
  .phone--back { display: none; }
  .phone--front { translate: -50% 0; }
  .fw--note { right: 4px; top: 20px; max-width: 220px; }
  .fw--rate { left: 8px; bottom: 80px; }
  .fw--installs { right: 8px; bottom: 10px; }
  .appx__perks, .pfs { grid-template-columns: minmax(0, 1fr); }
  .pf-card { flex-direction: row; align-items: center; }
  .pf-card > div { flex: 1; }
  .pf-card .badge { align-self: center; }
  .appx__install .btn, .store { flex: 1 1 100%; justify-content: center; }
}
.guide { width: min(440px, calc(100vw - 24px)); padding: 0; border: 0; border-radius: 26px; box-shadow: var(--sh-4); color: var(--text); }
.guide::backdrop { background: rgb(24 22 45 / .5); backdrop-filter: blur(4px); }
.guide[open] { animation: fade-up .3s var(--ease); }
.guide__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; background: var(--g-sunset); color: #fff; }
.guide__head b { font-size: 16px; font-weight: 900; }
.guide__steps { display: grid; gap: 10px; padding: 18px 20px; }
.guide__steps li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.guide__steps li > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 10px; background: var(--violet-100); color: var(--violet-700); font-weight: 900; flex: none; }
.guide__steps .glyph { display: inline-block; width: 18px; height: 18px; vertical-align: middle; color: var(--blue-600); }
.guide > p { padding: 0 20px 18px; }

/* ---------- numbers ---------- */
.numbers .card__title { margin-bottom: 14px; flex-wrap: wrap; }
.numbers .card__title .card__sub { margin-inline-start: auto; }
@media (max-width: 1080px) { .numbers > .s-5 { grid-column: span 12; } }

/* ---------- stories ---------- */
.stories { columns: 3 300px; column-gap: 20px; }
.story { position: relative; display: block; break-inside: avoid; margin: 0 0 20px; padding: 22px; border-radius: 26px; overflow: hidden; }
.story__q { position: absolute; top: -16px; inset-inline-end: 14px; font-size: 120px; font-weight: 900; line-height: 1; opacity: .12; }
.story__stars { display: flex; gap: 2px; color: var(--sun-400); }
.story__stars .glyph { width: 17px; height: 17px; }
.card--sunset .story__stars, .card--lagoon .story__stars { color: var(--sun-200); }
.story blockquote { margin: 12px 0 16px; font-size: 16px; font-weight: 650; line-height: 1.95; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.story figcaption { display: flex; align-items: center; gap: 10px; }
.story figcaption b { display: block; font-size: 14px; }
.story figcaption small { display: block; font-size: 12px; opacity: .75; }
.story__ev { display: block; margin-top: 14px; }
.story__ev .tag { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* ---------- FAQ ---------- */
.faqx { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 22px; align-items: start; }
/* v4.5: به‌جای آکاردئون، فهرست سؤال‌ها کنار یک پنل جواب؛ بدون جاوااسکریپت (رادیو + :has) */
.faqx__qs { display: grid; gap: 8px; }
.faqx__q { position: relative; display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 14px 8px 10px; border-radius: var(--r-m); background: #fff; box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; transition: background .2s, box-shadow .2s, transform .2s var(--ease); }
.faqx__q:hover { box-shadow: inset 0 0 0 1px var(--c200); transform: translateX(-3px); }
.faqx__q:active { transform: scale(.99); }
.faqx__q input { position: absolute; opacity: 0; pointer-events: none; }
.faqx__q b { flex: 1; font-size: 15px; font-weight: 850; }
.faqx__qi { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: var(--r-s); background: var(--c100); }
.faqx__go { width: 18px; height: 18px; color: var(--text-3); transition: transform .2s var(--ease), color .2s; }
.faqx__q:has(input:checked) { background: linear-gradient(100deg, var(--c50), #fff 80%); box-shadow: inset 0 0 0 2px var(--c400), 0 14px 26px -18px var(--cglow); }
.faqx__q:has(input:checked) .faqx__go { color: var(--c600); transform: translateX(-4px); }
.faqx__q:has(input:focus-visible) { outline: 3px solid var(--violet-300); outline-offset: 2px; }
.faqx__panel { position: sticky; top: 110px; display: grid; gap: 12px; }
.faqx__a { display: none; gap: 10px; padding: 26px; border-radius: var(--r-xl); background: linear-gradient(150deg, var(--c100), var(--c50) 45%, #fff); box-shadow: inset 0 0 0 1px var(--c200), 0 24px 44px -28px var(--cglow); animation: rise-in .45s var(--ease) both; }
.faqx__art { display: grid; place-items: center; width: 92px; height: 92px; border-radius: var(--r-l); background: #fff; box-shadow: var(--sh-2); rotate: -6deg; }
.faqx__a h3 { font-size: 21px; font-weight: 950; color: var(--c800); }
.faqx__a p { font-size: 15.5px; line-height: 2.1; color: var(--text-2); max-width: 60ch; }
.faqx:has(.faqx__q:nth-child(1) input:checked) .faqx__a[data-i="0"],
.faqx:has(.faqx__q:nth-child(2) input:checked) .faqx__a[data-i="1"],
.faqx:has(.faqx__q:nth-child(3) input:checked) .faqx__a[data-i="2"],
.faqx:has(.faqx__q:nth-child(4) input:checked) .faqx__a[data-i="3"],
.faqx:has(.faqx__q:nth-child(5) input:checked) .faqx__a[data-i="4"],
.faqx:has(.faqx__q:nth-child(6) input:checked) .faqx__a[data-i="5"],
.faqx:has(.faqx__q:nth-child(7) input:checked) .faqx__a[data-i="6"],
.faqx:has(.faqx__q:nth-child(8) input:checked) .faqx__a[data-i="7"] { display: grid; }
.faqx__help { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px 18px; border-radius: var(--r-l); background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.faqx__help > div:first-of-type { flex: 1 1 200px; }
.faqx__help b { display: block; font-size: 15px; font-weight: 900; }
.faqx__help small { font-size: 12.5px; color: var(--text-3); }
@media (max-width: 900px) { .faqx { grid-template-columns: minmax(0, 1fr); } .faqx__panel { position: static; } }

/* ---------- app page ---------- */
.feat-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)); gap: 18px; }
.feat > .tag { align-self: flex-start; margin-top: auto; }
.feat--lead { grid-row: span 2; justify-content: center; padding: 30px; background: linear-gradient(160deg, var(--c100), var(--c50) 50%, #fff); }
.feat--lead b { font-size: 22px; }
.feat:last-child:not(.feat--lead) { grid-column: 1 / -1; flex-direction: row; align-items: center; }
.feat:last-child:not(.feat--lead) p { flex: 1; }
.feat { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px; overflow: hidden; }
.feat b { font-size: 17px; font-weight: 900; }
.feat p { color: var(--text-2); font-size: 14px; }
.guides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.guide-card { padding: 20px; }
.guide-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.guide-card__head b { font-size: 16px; font-weight: 900; }
.guide-card__you { display: none; margin-inline-start: auto; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; color: var(--good-text); }
.guide-card__you .glyph { width: 15px; height: 15px; }
.guide-card.is-you { border-color: var(--c300); box-shadow: 0 0 0 3px var(--c100), var(--sh-2); }
.guide-card.is-you .guide-card__you { display: inline-flex; }
.guide-card ol { display: grid; gap: 10px; }
.guide-card li { display: flex; gap: 10px; font-size: 13.5px; color: var(--text-2); }
.guide-card li > span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: var(--c100); color: var(--c800); font-weight: 900; font-size: 12px; flex: none; }
.guide-card .pf-card__ico { color: #fff; background: var(--cs); }
.app-more { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; }
@media (max-width: 960px) { .feat-grid, .guides { grid-template-columns: repeat(2, minmax(0, 1fr)); } .feat--lead { grid-row: auto; grid-column: 1 / -1; } .app-more { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .feat-grid, .guides { grid-template-columns: minmax(0, 1fr); } .feat:last-child:not(.feat--lead) { flex-direction: column; align-items: stretch; } }

.numbers__sum { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* ---------- auth ---------- */
.auth__box .badge { margin-bottom: 14px; }
.auth__box > p { margin-bottom: 0; }
.forgot { font-size: 13px; }
.forgot summary { cursor: pointer; color: var(--violet-700); font-weight: 700; list-style: none; }
.forgot summary::-webkit-details-marker { display: none; }
.forgot p { margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: var(--s1); color: var(--text-2); font-size: 12.5px; max-width: 300px; }
.auth__app { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; border: 1.5px solid transparent; background: linear-gradient(#fff, #fff) padding-box, var(--g-aurora) border-box; transition: transform .25s var(--ease), box-shadow .25s; }
.auth__app:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -16px var(--violet-glow); }
.auth__app-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--violet-50); flex: none; }
.auth__app b { display: block; font-size: 14px; font-weight: 850; }
.auth__app small { display: block; font-size: 12px; color: var(--text-3); }
.auth__app > .glyph { margin-inline-start: auto; color: var(--violet-600); }
.auth__alt { margin-top: 18px; text-align: center; font-size: 13.5px; color: var(--text-2); }
.auth__perks { margin-top: 16px; }
.auth__trust { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.auth__trust span { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 12px; background: rgb(255 255 255 / .12); border: 1px solid rgb(255 255 255 / .2); font-size: 12.5px; font-weight: 700; backdrop-filter: blur(8px); }
.auth__trust .glyph { width: 15px; height: 15px; color: var(--sun-300); }
.auth__admin-form { margin: 22px 0 16px; }
.auth--signup .auth__mesh { background: radial-gradient(circle at 80% 12%, var(--sun-400), transparent 34%), radial-gradient(circle at 12% 30%, var(--pink-500), transparent 40%), radial-gradient(circle at 75% 85%, var(--mint-400), transparent 38%), radial-gradient(circle at 20% 90%, var(--blue-500), transparent 40%), var(--g-night); }
.auth--admin .auth__mesh { background: radial-gradient(circle at 85% 15%, var(--cyan-400), transparent 36%), radial-gradient(circle at 15% 70%, var(--blue-600), transparent 45%), radial-gradient(circle at 70% 90%, var(--mint-500), transparent 36%), linear-gradient(160deg, #0f1430, #1a1e4a); }
.auth--admin .auth__box h1 { color: var(--ink); }
.aw-event { top: 0; inset-inline-start: 0; width: 320px; display: grid; gap: 12px; }
.aw-event b { display: block; font-size: 15px; line-height: 1.5; }
.aw-event .dbadge { transform: scale(.9); }
.aw-event__foot .price__now b { font-size: 16px; }
.aw-cal { top: 30px; inset-inline-end: 0; width: 250px; padding: 14px; }
.aw-cal > .row b { font-size: 14px; }
.aw-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 10px; text-align: center; font-size: 11px; font-style: normal; }
.aw-cal__grid i { display: grid; place-items: center; height: 26px; border-radius: 8px; font-style: normal; color: var(--text-2); }
.aw-cal__h { color: var(--text-3) !important; font-weight: 800; }
.aw-cal__grid i.has { background: var(--c100); color: var(--c800); font-weight: 800; position: relative; }
.aw-cal__grid i.has::after { content: ""; position: absolute; bottom: 3px; width: 4px; height: 4px; border-radius: 50%; background: var(--c500); }
.aw-cal__grid i.is-today { background: var(--g-sunset); color: #fff; font-weight: 900; }
.aw-rate { bottom: 70px; inset-inline-start: 30px; text-align: center; }
.aw-rate > b { display: block; font-size: 30px; font-weight: 950; line-height: 1.1; }
.aw-note { bottom: 0; inset-inline-end: 40px; display: flex; align-items: center; gap: 10px; font-size: 13px; }
.aw-ticket { top: 270px; inset-inline-end: 210px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.aw-ticket b { font-size: 13px; }
.aw-steps { top: 0; inset-inline-start: 0; width: 300px; display: grid; gap: 12px; }
.aw-steps ol { display: grid; gap: 8px; }
.aw-steps li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 700; color: var(--text-3); }
.aw-steps li i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 10px; background: var(--s2); font-style: normal; font-weight: 900; font-size: 12px; }
.aw-steps li i .glyph { width: 15px; height: 15px; }
.aw-steps li.is-done { color: var(--good-text); }
.aw-steps li.is-done i { background: var(--mint-500); color: #fff; }
.aw-steps li.is-now { color: var(--ink); }
.aw-steps li.is-now i { background: var(--g-sunset); color: #fff; }
.aw-cloud { top: 40px; inset-inline-end: 0; width: 280px; display: flex; flex-wrap: wrap; gap: 6px; }
.aw-cloud span { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 9px 0 7px; border-radius: 10px; background: rgb(255 255 255 / .16); border: 1px solid rgb(255 255 255 / .2); font-size: 11.5px; font-weight: 700; }
.aw-cloud span.is-on { background: #fff; color: var(--c800); }
.aw-join { bottom: 60px; inset-inline-start: 20px; display: flex; align-items: center; gap: 12px; }
.aw-gift { bottom: 0; inset-inline-end: 30px; display: flex; align-items: center; gap: 10px; background: var(--g-citrus); border: 0; }
.aw-gift b { font-size: 15px; }
.aw-gift small { color: rgb(24 22 45 / .7); }
.aw-dash { top: 0; inset-inline-start: 0; width: 360px; display: grid; gap: 12px; }
.aw-live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; }
.aw-dash__bars { display: flex; align-items: flex-end; gap: 6px; height: 110px; }
.aw-dash__bars i { flex: 1; height: var(--h); border-radius: 6px 6px 2px 2px; background: linear-gradient(to top, rgb(255 255 255 / .2), rgb(255 255 255 / .75)); transform-origin: bottom; animation: rise 1s var(--ease) var(--d) both; }
.aw-dash__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.aw-dash__kpis span { height: 46px; border-radius: 12px; background: rgb(255 255 255 / .16); }
.aw-sec { top: 210px; inset-inline-end: 0; width: 290px; }
.aw-sec ul { display: grid; gap: 8px; margin-top: 10px; }
.aw-sec li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.aw-sec .glyph { width: 17px; height: 17px; color: var(--mint-500); }
.aw-ver { bottom: 10px; inset-inline-start: 40px; display: flex; align-items: center; gap: 10px; }
.aw-ver > .glyph { width: 30px; height: 30px; color: var(--mint-300); }
@media (max-width: 960px) {
  .aw-event { width: min(300px, 70%); }
  .aw-rate { bottom: 0; inset-inline-start: auto; inset-inline-end: 0; }
  .aw-note, .aw-gift, .aw-sec { display: none; }
  .aw-steps { width: min(290px, 70%); }
  .aw-join { bottom: 0; inset-inline-start: auto; inset-inline-end: 0; }
  .aw-dash { width: min(300px, 75%); }
  .aw-ver { bottom: 0; inset-inline-start: auto; inset-inline-end: 0; }
  .aw-dash__bars { height: 70px; }
}

/* ==========================================================================
   Member dashboard
   ========================================================================== */
.good-text { color: var(--good-text); }
.new-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--pink-500); box-shadow: 0 0 0 3px var(--pink-100); flex: none; }
.mini-row.is-new b { color: var(--ink); }

/* welcome hero */
.welcome { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: 26px; min-height: 290px; overflow: hidden; }
.welcome::after { content: ""; position: absolute; width: 340px; height: 340px; border-radius: 50%; inset-inline-end: -120px; bottom: -170px; border: 40px solid rgb(255 255 255 / .14); pointer-events: none; }
.welcome__copy { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 10px; max-width: 520px; }
.welcome__hi { font-size: 14px; font-weight: 800; opacity: .9; }
.welcome h1 { font-size: clamp(24px, 2.6vw, 34px); font-weight: 950; line-height: 1.35; }
.welcome p { opacity: .9; font-size: 14px; }
.welcome__count { display: inline-flex; align-items: center; gap: 8px; width: max-content; padding: 6px 12px; border-radius: 13px; background: rgb(255 255 255 / .2); font-size: 13px; backdrop-filter: blur(8px); }
.welcome__count b { font-size: 16px; font-weight: 900; }
.welcome__count .glyph { width: 17px; height: 17px; }
.welcome__chips { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 10px; }
.welcome__chips span { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 15px; background: rgb(255 255 255 / .16); border: 1px solid rgb(255 255 255 / .26); backdrop-filter: blur(10px); }
.welcome__chips b { font-size: 18px; font-weight: 950; }
.welcome__chips small { font-size: 12px; opacity: .85; }
.welcome__art { position: absolute; inset-inline-end: 26px; top: 26px; z-index: 1; filter: drop-shadow(0 20px 26px rgb(0 0 0 / .2)); }
@media (max-width: 680px) { .welcome__art { width: 90px; height: 90px; top: auto; bottom: 90px; opacity: .9; } .welcome { min-height: 0; } }

/* ticket component */
.ticket { position: relative; display: flex; flex-direction: column; height: 100%; border-radius: 26px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-2); overflow: hidden; }
.ticket__top { display: flex; flex-direction: column; gap: 10px; padding: 18px; background: radial-gradient(circle at 15% 0, rgb(255 255 255 / .7), transparent 40%), linear-gradient(140deg, var(--c100), var(--c300)); }
.ticket__title { display: block; font-size: 17px; font-weight: 900; line-height: 1.5; }
.ticket__top small { color: var(--c900); font-size: 12px; }
.ticket__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; font-weight: 700; color: var(--c900); }
.ticket__meta span { display: inline-flex; align-items: center; gap: 5px; }
.ticket__meta .glyph { width: 15px; height: 15px; }
.ticket__cut { position: relative; height: 0; border-top: 2px dashed var(--line-2); margin: 0 18px; }
.ticket__cut::before, .ticket__cut::after { content: ""; position: absolute; top: -12px; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 1px solid var(--line); }
.ticket__cut::before { right: -30px; } .ticket__cut::after { left: -30px; }
.ticket__bottom { display: flex; align-items: center; gap: 14px; padding: 16px 18px 18px; flex: 1; }
.ticket__bottom .qr { border-radius: 12px; box-shadow: 0 0 0 1px var(--line); flex: none; }
.ticket__bottom small { display: block; font-size: 11.5px; color: var(--text-3); }
.ticket__bottom b { font-size: 15px; font-weight: 900; }
.ticket--big .ticket__bottom--qr { align-items: center; gap: 22px; }
.ticket--big .kv { flex: 1; }
.next-tk .empty { height: 100%; justify-content: center; }

/* recommendations & alerts */
.recs .card__body { padding-inline: 14px; }
.recs .ev-scroll { grid-auto-columns: minmax(230px, 250px); }
.pay-alert { display: grid; gap: 12px; border-color: var(--sun-200); background: linear-gradient(var(--sun-50), #fff); }
.pay-alert b { display: block; font-weight: 850; }
.pay-alert small { display: block; font-size: 12px; color: var(--text-3); }
.pay-alert__row { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: #fff; border: 1px dashed var(--sun-300); font-size: 13px; }
.pay-alert__row [data-countdown] { color: var(--warn-text); font-weight: 900; }
.completeness { display: grid; gap: 12px; }
.completeness b { display: block; font-weight: 850; }
.completeness small { display: block; font-size: 12px; color: var(--text-3); }
.checklist { display: grid; gap: 6px; }
.checklist li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-3); }
.checklist .glyph { width: 17px; height: 17px; color: var(--line-2); }
.checklist li.is-ok { color: var(--text); }
.checklist li.is-ok .glyph { color: var(--mint-500); }
[data-countdown].is-hot { color: var(--bad) !important; }

/* events list */
.catbar { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 12px; margin-bottom: 8px; scrollbar-width: thin; }
.catbar .chip { flex: none; }
.catbar .chip .count { background: var(--s2); color: var(--text-2); }
.catbar .chip.is-on .count { background: rgb(255 255 255 / .25); color: #fff; }
.seg--icons { gap: 2px; }
.seg--icons a { display: grid; place-items: center; width: 42px; height: 38px; border-radius: 11px; color: var(--text-3); }
.seg--icons a.is-on { background: #fff; color: var(--violet-700); box-shadow: var(--sh-2); }
.seg--icons .glyph { width: 19px; height: 19px; }
.filterbar { margin-bottom: 14px; }
.filterbar__toggles { display: flex; flex-direction: column; gap: 6px; justify-content: center; }
/* ۵٫۱: در موبایل جست‌وجو همیشه پیداست و بقیه‌ی فیلترها با یک دکمه باز می‌شوند تا نتیجه‌ها زودتر دیده شوند */
.filterbar__more { display: contents; }
.filterbar__toggle { display: none; }
@media (max-width: 760px) {
  .filterbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; }
  .filterbar .field--q { grid-column: 1; }
  .filterbar__toggle { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: .1em 14px 0; border: 1px solid var(--line-2); border-radius: 13px; background: #fff; color: var(--text); font: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer; }
  .filterbar__toggle .glyph { width: 18px; height: 18px; color: var(--violet-600); }
  .filterbar__toggle[aria-expanded="true"] { background: var(--violet-50); border-color: var(--violet-200); color: var(--violet-800); }
  .filterbar__more { display: none; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: end; }
  .filterbar.is-open .filterbar__more { display: grid; animation: tab-in .35s var(--ease) both; }
  .filterbar__more .field { min-width: 0; }
  .filterbar__toggles { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 8px 16px; }
  .filterbar__more > .btn { grid-column: 1 / -1; }
}
.switch--sm .switch__ui { width: 40px; height: 24px; }
.switch--sm .switch__ui::after { width: 18px; height: 18px; }
.switch--sm input:checked + .switch__ui::after { inset-inline-start: 19px; }
.switch--sm .switch__text b { font-size: 12.5px; }
.active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.active-filters .tag .glyph { width: 12px; height: 12px; }
.ev-list { display: grid; gap: 16px; }
.loadable__sk.ev-grid, .loadable__sk.stack { display: none; }
.loadable.is-loading > .loadable__sk { display: grid; }

/* event detail */
.ehero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 30px; margin-bottom: 22px; border-radius: 32px; overflow: hidden; background: radial-gradient(circle at 10% 10%, rgb(255 255 255 / .55), transparent 35%), radial-gradient(circle at 85% 110%, var(--c500), transparent 50%), linear-gradient(135deg, var(--c100), var(--c300)); }
.ehero__pattern { position: absolute; inset: 0; background-image: radial-gradient(rgb(255 255 255 / .6) 1.3px, transparent 1.5px); background-size: 16px 16px; -webkit-mask-image: linear-gradient(240deg, #000, transparent 65%); mask-image: linear-gradient(240deg, #000, transparent 65%); }
.ehero__copy { position: relative; display: flex; flex-direction: column; gap: 12px; z-index: 1; }
.ehero .phead__crumbs { color: var(--c900); }
.ehero .badge { background: rgb(255 255 255 / .85); }
.ehero .badge--solid { background: var(--cs); }
.ev__mine--static { position: static; }
.ehero h1 { font-size: clamp(26px, 3.2vw, 42px); font-weight: 950; line-height: 1.3; letter-spacing: -.8px; }
.ehero p { font-size: 15px; color: var(--c900); max-width: 640px; }
.ehero__meta { display: flex; flex-wrap: wrap; gap: 8px; }
.ehero__meta span { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 12px; background: rgb(255 255 255 / .7); backdrop-filter: blur(8px); font-size: 13px; font-weight: 700; }
.ehero__meta .glyph { width: 16px; height: 16px; color: var(--c600); }
.ehero__art { position: relative; z-index: 1; display: grid; justify-items: center; gap: 6px; }
.ehero__art .ico { filter: drop-shadow(0 26px 26px rgb(24 22 45 / .25)); }
.ehero__art .dbadge { position: absolute; top: 0; inset-inline-start: -14px; z-index: 2; transform: rotate(6deg); }
@media (max-width: 760px) { .ehero { grid-template-columns: minmax(0, 1fr); padding: 22px; } .ehero__art { position: absolute; inset-inline-end: 10px; top: 10px; opacity: .35; } .ehero__art .ico { width: 110px; height: 110px; } .ehero__art .dbadge { display: none; } }
.edetail { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 22px; align-items: start; }
.edetail__side { position: sticky; top: 96px; }
@media (max-width: 1100px) { .edetail { grid-template-columns: minmax(0, 1fr); } .edetail__side { position: static; order: -1; } }
.prose { margin-top: 12px; color: var(--text-2); font-size: 15px; line-height: 2.05; }
.agenda { position: relative; display: grid; gap: 10px; margin-top: 16px; }
.agenda li { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px; background: var(--c50); border: 1px solid var(--c100); animation: fade-up .5s var(--ease) both; animation-delay: calc(var(--i) * .08s); }
.agenda time { display: grid; place-items: center; min-width: 64px; height: 36px; border-radius: 11px; background: var(--cs); color: var(--con); font-weight: 900; font-size: 14px; }
.agenda span { font-weight: 700; }
.people-box { display: grid; gap: 12px; margin-top: 14px; }
.people-box p { font-size: 14px; color: var(--text-2); }
.place { display: grid; gap: 8px; align-content: start; }
.place__map { position: relative; height: 130px; margin-top: 12px; border-radius: 18px; overflow: hidden; background:
  linear-gradient(90deg, transparent 47%, #fff 47%, #fff 53%, transparent 53%),
  linear-gradient(0deg, transparent 58%, #fff 58%, #fff 63%, transparent 63%),
  linear-gradient(32deg, transparent 70%, rgb(255 255 255 / .9) 70%, rgb(255 255 255 / .9) 73%, transparent 73%),
  radial-gradient(circle at 20% 30%, var(--mint-100) 0 18%, transparent 19%),
  radial-gradient(circle at 80% 75%, var(--cyan-100) 0 22%, transparent 23%), var(--s2); }
.place__pin { position: absolute; left: 50%; top: 50%; translate: -50% -80%; display: grid; place-items: center; width: 48px; height: 48px; color: var(--c500); filter: drop-shadow(0 8px 8px rgb(24 22 45 / .3)); animation: float 3s ease-in-out infinite; }
.place__pin .glyph { width: 46px; height: 46px; }
.place__lock { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-3); }
.policy { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.policy__seg { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: 16px; background: var(--c50); border: 1.5px solid var(--c100); }
.policy__seg b { font-size: 22px; font-weight: 950; color: var(--c700); }
.policy__seg small { font-size: 12px; color: var(--text-2); }
.policy__seg.is-now { border-color: var(--c400); box-shadow: 0 10px 22px -14px var(--cglow); }
.policy__now { position: absolute; top: -11px; inset-inline-end: 12px; display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 8px; border-radius: 8px; background: var(--cs); color: var(--con); font-size: 11px; font-weight: 800; }
.policy__now .glyph { width: 12px; height: 12px; }
.policy__when { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 11.5px; font-weight: 750; color: var(--c800); }
.policy__when .glyph { width: 13px; height: 13px; color: var(--c500); }
.prep__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.prep__list li { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border-radius: var(--r-m); background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); }
.prep__list li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.prep__ico { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: var(--r-s); background: var(--c100); color: var(--c700); }
.prep__ico .glyph { width: 18px; height: 18px; }
.prep__list b { display: block; font-size: 14px; font-weight: 850; }
.prep__list small { font-size: 12.5px; line-height: 1.8; color: var(--text-2); }
@media (max-width: 640px) { .prep__list { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .policy { grid-template-columns: 1fr; } }
.rate-form { display: grid; gap: 12px; margin-top: 14px; padding: 16px; border-radius: 18px; background: var(--sun-50); border: 1px dashed var(--sun-300); }
.stars-input { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.stars-input input { position: absolute; opacity: 0; pointer-events: none; }
.stars-input label { cursor: pointer; color: var(--line-2); transition: transform .15s; }
.stars-input label .glyph { width: 34px; height: 34px; }
.stars-input label:hover, .stars-input label:hover ~ label, .stars-input input:checked ~ label { color: var(--sun-400); }
.stars-input label:hover { transform: scale(1.15); }
.stars-input input:focus-visible + label { outline: 3px solid var(--violet-300); border-radius: 8px; }
.reviews { display: grid; gap: 12px; margin-top: 16px; }
.reviews li { display: flex; gap: 12px; padding: 12px; border-radius: 16px; background: var(--s1); }
.reviews b { font-size: 13.5px; margin-inline-end: 8px; }
.reviews p { font-size: 13.5px; color: var(--text-2); margin-top: 2px; }
.reviews small { font-size: 11.5px; color: var(--text-3); }

/* purchase card */
.buy { display: grid; gap: 16px; padding: 20px; border-radius: 28px; box-shadow: var(--sh-3); border-color: var(--c100); }
.buy__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.buy__save { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border-radius: 10px; background: var(--pink-50); color: var(--pink-700); font-size: 12px; font-weight: 800; }
.buy__save .glyph { width: 15px; height: 15px; }
.buy__seats { display: grid; gap: 10px; padding: 14px; border-radius: 18px; background: var(--c50); }
.buy__seats .seats { max-width: none; }
.buy__seats .seats i { width: 13px; height: 13px; border-radius: 4px; }
.buy__legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11.5px; color: var(--text-3); }
.buy__legend span { display: inline-flex; align-items: center; gap: 5px; }
.buy__legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--s3); box-shadow: inset 0 0 0 1px var(--line); }
.buy__legend i.is-on { background: var(--c500); box-shadow: none; }
.buy__legend i.is-hold { background: repeating-linear-gradient(45deg, var(--c400) 0 2px, var(--c100) 2px 4px); }
.buy__count { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-radius: 15px; background: var(--ink); color: #fff; font-size: 13px; }
.buy__count span { display: inline-flex; align-items: center; gap: 6px; opacity: .8; }
.buy__count .glyph { width: 16px; height: 16px; }
.buy__count b { font-size: 16px; font-weight: 900; }
.buy__act { display: grid; gap: 10px; }
.buy__note { font-size: 12px; color: var(--text-3); text-align: center; }
.buy__ticket { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 18px; background: var(--good-bg); border: 1px dashed var(--good-line); }
.buy__ticket b { display: block; font-size: 14px; color: var(--good-text); }
.buy__ticket small { display: block; font-size: 11.5px; color: var(--text-3); }
.buy__queue { display: grid; justify-items: center; padding: 16px; border-radius: 18px; background: var(--cyan-50); border: 1px solid var(--cyan-100); text-align: center; }
.buy__queue span { font-size: 12.5px; color: var(--text-2); }
.buy__queue b { font-size: 46px; font-weight: 950; line-height: 1.1; color: var(--cyan-700); }
.buy__queue small { color: var(--text-3); }
.buy__soon { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; background: var(--cyan-50); }
.buy__soon b { display: block; font-size: 14px; }
.buy__soon small { display: block; font-size: 12px; color: var(--text-3); }
.buy__soon [data-countdown] { font-weight: 900; color: var(--cyan-700); }
.buy__trust { display: grid; gap: 6px; padding-top: 12px; border-top: 1px dashed var(--line-2); }
.buy__trust li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); }
.buy__trust .glyph { width: 16px; height: 16px; color: var(--mint-500); }
.btn.is-done { color: #fff; }

/* order page */
.paid-hero { position: relative; display: flex; align-items: center; gap: 18px; padding: 24px; margin-bottom: 20px; border-radius: 28px; background: linear-gradient(120deg, var(--mint-500), var(--cyan-500)); color: #fff; overflow: hidden; }
.paid-hero h2 { font-size: 22px; font-weight: 950; }
.paid-hero p { opacity: .9; }
.paid-hero__ico { display: grid; place-items: center; width: 70px; height: 70px; border-radius: 22px; background: rgb(255 255 255 / .22); flex: none; }
.paid-hero__ico .glyph { width: 42px; height: 42px; }
.confetti { position: absolute; inset: 0; pointer-events: none; }
.confetti i { position: absolute; top: -12px; left: var(--x); width: 9px; height: 14px; border-radius: 3px; background: var(--c); opacity: 0; }
.paid-hero.is-celebrate .confetti i { animation: confetti 2.6s var(--ease) var(--d) 2 both; }
@keyframes confetti { 0% { opacity: 1; transform: translateY(0) rotate(0); } 100% { opacity: 0; transform: translateY(170px) rotate(540deg); } }
.order-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.order-tl { grid-column: 1 / -1; }
@media (min-width: 1100px) { .order-tl .tl { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .order-tl .tl::before { display: none; } }
.receipt .kv > div { padding-bottom: 8px; border-bottom: 1px dashed var(--line); }
.kv .is-good b, .kv .is-good span { color: var(--good-text); }
.kv .is-info b { color: var(--info-text); }
.kv__total { padding: 10px 12px !important; border: 0 !important; border-radius: 12px; background: var(--s1); }
.kv__total b { font-size: 17px; font-weight: 950; }
.checkout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 22px; align-items: start; }
.co-side { position: sticky; top: 96px; }
.co-event { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 14px; border-radius: 18px; background: linear-gradient(135deg, var(--c50), var(--c100)); }
.co-event__art { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 20px; background: #fff; flex: none; box-shadow: var(--sh-1); }
.co-event b { display: block; font-size: 16px; font-weight: 900; }
.co-event small { display: block; font-size: 12.5px; color: var(--c900); }
.paymethods { display: grid; gap: 10px; margin: 14px 0; }
.paymethod { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; border: 1.5px solid var(--line); cursor: pointer; }
.paymethod input { position: absolute; opacity: 0; }
.paymethod b { display: block; font-size: 14px; }
.paymethod small { display: block; font-size: 12px; color: var(--text-3); }
.paymethod > span:nth-of-type(2) { flex: 1; }
.paymethod__ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--c100); color: var(--c700); }
.paymethod__ico .glyph { width: 22px; height: 22px; }
.paymethod.is-on { border-color: var(--violet-400); background: var(--violet-50); box-shadow: 0 10px 22px -16px var(--violet-glow); }
.paymethod.is-off { opacity: .6; cursor: not-allowed; }
.paymethod__ok { width: 24px; height: 24px; color: var(--violet-600); }
.co-pay { display: grid; gap: 14px; padding: 20px; border-radius: 28px; box-shadow: var(--sh-3); }
.co-timer { display: grid; gap: 8px; padding: 14px; border-radius: 18px; background: var(--sun-50); border: 1px solid var(--sun-200); }
.co-timer span { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--warn-text); font-weight: 700; }
.co-timer .glyph { width: 16px; height: 16px; }
.co-timer b { font-size: 28px; font-weight: 950; letter-spacing: 1px; color: var(--ink); }
.co-amount { display: flex; align-items: baseline; gap: 8px; justify-content: center; }
.co-amount small { font-size: 13px; color: var(--text-3); }
.co-amount b { font-size: 34px; font-weight: 950; letter-spacing: -.6px; }
.co-amount span { color: var(--text-3); }
.co-fails { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; color: var(--bad-text); }
.co-fails .glyph { width: 15px; height: 15px; }
.order-fail { display: grid; gap: 20px; }
@media (max-width: 1100px) { .order-grid, .checkout { grid-template-columns: minmax(0, 1fr); } .co-side { position: static; } }

/* sandbox gateway */
.page-gateway { background: radial-gradient(circle at 15% 10%, var(--violet-100), transparent 40%), radial-gradient(circle at 90% 90%, var(--mint-100), transparent 40%), var(--s1); }
.gw { display: grid; place-items: center; min-height: 100vh; padding: 24px 16px; }
.gw__card { width: min(480px, 100%); border-radius: 30px; background: #fff; box-shadow: var(--sh-4); overflow: hidden; border: 1px solid var(--line); }
.gw__band { display: grid; gap: 16px; padding: 22px; background: var(--g-night); color: #fff; }
.gw__band > .tag { justify-self: start; }
.gw__merchant { display: flex; align-items: center; gap: 12px; }
.gw__merchant b { display: block; }
.gw__merchant small { opacity: .75; font-size: 12px; }
.gw__amount { display: flex; align-items: baseline; gap: 8px; }
.gw__amount small { opacity: .75; }
.gw__amount b { font-size: 38px; font-weight: 950; }
.gw__body { display: grid; gap: 14px; padding: 22px; }
.gw__actions { display: grid; gap: 10px; }
.gw__ok { background: var(--mint-500); color: #fff; box-shadow: 0 12px 24px -12px var(--mint-glow); }

/* my events */
.tk-list { display: grid; gap: 14px; }
.tk { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; align-items: stretch; border-radius: 24px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-1); overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s; }
.tk:hover { transform: translateY(-2px); box-shadow: var(--sh-3); }
.tk__stub { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 14px; background: linear-gradient(160deg, var(--c100), var(--c300)); border-inline-end: 2px dashed rgb(255 255 255 / .9); }
.tk__time { font-weight: 900; font-size: 15px; color: var(--c900); }
.tk__body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; min-width: 0; }
.tk__body h3 { font-size: 17px; font-weight: 900; }
.tk__body h3 a:hover { color: var(--c700); }
.tk__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--text-2); }
.tk__meta span { display: inline-flex; align-items: center; gap: 5px; }
.tk__meta .glyph { width: 15px; height: 15px; color: var(--c500); }
.tk__hold { display: inline-flex; align-items: center; gap: 6px; width: max-content; padding: 5px 10px; border-radius: 10px; background: var(--sun-50); color: var(--warn-text); font-size: 12.5px; font-weight: 700; }
.tk__hold--soft { background: var(--c50); color: var(--c800); }
.tk__hold .glyph { width: 15px; height: 15px; }
.tk__rate { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-3); }
.tk__side { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px; border-inline-start: 1.5px dashed var(--line-2); min-width: 170px; }
.tk__side .qr { border-radius: 10px; box-shadow: 0 0 0 1px var(--line); }
.tk__price { display: flex; flex-direction: column; align-items: center; line-height: 1.3; }
.tk__price small { font-size: 11px; color: var(--text-3); }
.tk__price b { font-size: 18px; font-weight: 950; }
.tk__price span { font-size: 11px; color: var(--text-3); }
.tk--muted .tk__stub { filter: saturate(.55); }
@media (max-width: 720px) {
  .tk { grid-template-columns: 90px minmax(0, 1fr); }
  .tk__side { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; border-inline-start: 0; border-top: 1.5px dashed var(--line-2); min-width: 0; }
  .tk__side .qr { display: none; }
}

/* orders */
.orders-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.orders-layout .tabs { width: auto; }
@media (max-width: 1400px) { .orders-layout { grid-template-columns: minmax(0, 1fr); } .orders-layout > aside { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } }

/* notifications */
.notes-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.ngroup { margin-bottom: 18px; }
.ngroup__h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 13px; font-weight: 850; color: var(--text-2); }
.ngroup__h i { flex: 1; height: 1px; background: var(--line); }
.ngroup__h small { display: grid; place-items: center; min-width: 22px; height: 22px; border-radius: 8px; background: var(--s2); font-size: 11px; }
.nlist { display: grid; gap: 10px; }
.note { position: relative; display: flex; gap: 14px; padding: 14px 16px; border-radius: 20px; background: #fff; border: 1px solid var(--line); transition: .2s; }
.note:hover { box-shadow: var(--sh-2); }
.note.is-new { background: linear-gradient(90deg, #fff, var(--c50)); border-color: var(--c200); }
.note.is-new::before { content: ""; position: absolute; inset-inline-start: -1px; top: 16px; bottom: 16px; width: 4px; border-radius: 0 4px 4px 0; background: var(--c500); }
.note__ico { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 16px; background: var(--c100); flex: none; }
.note__body { flex: 1; min-width: 0; }
.note__body b { font-size: 14.5px; font-weight: 850; }
.note__body time { font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
.note__body p { font-size: 13.5px; color: var(--text-2); margin: 2px 0 4px; }
.note .new-dot { display: none; }
.notes-app { display: grid; gap: 8px; justify-items: start; }
.notes-app b { font-size: 16px; }
.notes-app p { font-size: 13px; opacity: .85; }
@media (max-width: 1000px) { .notes-layout { grid-template-columns: minmax(0, 1fr); } }

/* profile */
.pcover { position: relative; display: flex; align-items: center; gap: 20px; padding: 28px; margin-bottom: 22px; border-radius: 32px; background: var(--g-aurora); color: #fff; overflow: hidden; flex-wrap: wrap; }
.pcover__pattern { position: absolute; inset: 0; background-image: radial-gradient(rgb(255 255 255 / .35) 1.3px, transparent 1.5px); background-size: 18px 18px; -webkit-mask-image: linear-gradient(200deg, #000, transparent 70%); mask-image: linear-gradient(200deg, #000, transparent 70%); }
.pcover .avatar { position: relative; box-shadow: 0 0 0 5px rgb(255 255 255 / .35); }
.pcover__who { position: relative; flex: 1; min-width: 220px; display: grid; gap: 8px; }
.pcover h1 { font-size: 28px; font-weight: 950; }
.pcover__stats { position: relative; display: flex; gap: 10px; }
.pcover__stats span { display: grid; justify-items: center; min-width: 86px; padding: 10px 12px; border-radius: 18px; background: rgb(255 255 255 / .16); border: 1px solid rgb(255 255 255 / .28); backdrop-filter: blur(10px); }
.pcover__stats b { font-size: 24px; font-weight: 950; line-height: 1.2; }
.pcover__stats small { font-size: 11.5px; opacity: .85; }
.profile-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 20px; align-items: start; }
.fieldset { border: 0; padding: 0; margin: 0; }
.fieldset legend { width: 100%; margin-bottom: 8px; }
.sec-list { display: grid; gap: 12px; margin-top: 12px; }
.sec-list li { display: flex; align-items: center; gap: 10px; }
.sec-list b { display: block; font-size: 13.5px; }
.sec-list small { display: block; font-size: 12px; color: var(--text-3); }
@media (max-width: 1100px) { .profile-layout { grid-template-columns: minmax(0, 1fr); } }
.chars { display: block; text-align: end; font-size: 11.5px; color: var(--text-3); margin-top: -2px; }
.chars.is-near { color: var(--warn-text); font-weight: 800; }

/* ==========================================================================
   Admin
   ========================================================================== */
.cyan-text { color: var(--cyan-700); }
.alerts-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin-bottom: 20px; }
.kpi-hero { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: var(--r-l); overflow: hidden; }
.kpi-hero .kicker { color: var(--sun-300); }
.kpi-hero .kicker::before { background: var(--sun-300); }
.kpi-hero__v { display: flex; align-items: baseline; gap: 8px; }
.kpi-hero__v b { font-size: clamp(34px, 3.4vw, 50px); font-weight: 950; letter-spacing: -1px; line-height: 1.1; }
.kpi-hero__v small { opacity: .7; }
.kpi-hero .delta { background: rgb(255 255 255 / .16); color: #fff; }
.kpi-hero__spark { margin-inline: -24px; }
.kpi-hero__spark .spark { width: 100%; height: 90px; }
.kpi-hero__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: auto; }
.kpi-hero__grid span { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 15px; background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .14); }
.kpi-hero__grid small { font-size: 11.5px; opacity: .7; }
.kpi-hero__grid b { font-size: 18px; font-weight: 900; }
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.kpis--rings { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ahome > .kpi-hero { grid-row: span 2; }
.ring-kpi { display: flex; align-items: center; gap: 14px; }
.ring-kpi > div b { display: block; font-weight: 850; font-size: 14px; }
.ring-kpi > div small { display: block; font-size: 12px; color: var(--text-3); }
@media (max-width: 1280px) { .kpis--rings { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1080px) { .ahome > .kpis, .ahome > .kpis--rings, .ahome > .kpi-hero { grid-column: span 12; } .kpis--rings { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ahome > .kpi-hero { grid-row: auto; } }
@media (max-width: 680px) { .kpis--rings { grid-template-columns: minmax(0, 1fr); } }
.pulse { min-height: 200px; }
.pulse__sk { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pulse__sk .sk { padding: 12px; }
.pulse__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; animation: fade-up .4s var(--ease); }
.pulse__item { display: flex; flex-direction: column; padding: 12px; border-radius: 16px; background: var(--c50); border: 1px solid var(--c100); }
.pulse__item small { font-size: 11.5px; color: var(--text-2); }
.pulse__item b { font-size: 26px; font-weight: 950; color: var(--c700); line-height: 1.3; }
.pulse__item span { font-size: 11px; color: var(--text-3); }
.pulse__at { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 11.5px; color: var(--text-3); }
.pulse__at .glyph { width: 13px; height: 13px; }
.pulse.is-loading .pulse__grid { opacity: .5; }
.ch-share { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 14px; }
.ch-share span { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 13px; background: var(--c50); text-align: center; }
.ch-share .glyph { width: 18px; height: 18px; color: var(--c600); }
.ch-share b { font-size: 14px; font-weight: 900; }
.ch-share small { font-size: 10.5px; color: var(--text-3); }
.table-wrap--flat { border: 0; box-shadow: none; border-radius: 0; margin-inline: -20px; margin-bottom: -20px; }
.table-wrap--flat .tbl th:first-child, .table-wrap--flat .tbl td:first-child { padding-inline-start: 20px; }
.table-wrap--flat .tbl th:last-child, .table-wrap--flat .tbl td:last-child { padding-inline-end: 20px; }
@media (max-width: 760px) { .table-wrap--flat { margin: 0; } }
.cap-cell { display: grid; gap: 4px; min-width: 120px; }
.cap-cell small { font-size: 11.5px; color: var(--text-3); }
.cap-cell .seats { max-width: 160px; }
.chan { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--c700, var(--text-2)); white-space: nowrap; }
.chan .glyph { width: 16px; height: 16px; }
.leader { display: grid; gap: 4px; counter-reset: l; }
.leader li { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px dashed var(--line); }
.leader li:last-child { border-bottom: 0; }
.leader b { display: block; font-size: 13.5px; }
.leader small { display: block; font-size: 11.5px; color: var(--text-3); }
.leader__n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 9px; background: var(--s2); font-weight: 900; font-size: 12px; color: var(--text-2); flex: none; }
.leader__n--1 { background: var(--g-citrus); color: var(--ink); }
.leader__n--2 { background: linear-gradient(135deg, #e7e5f0, #b9b6cc); color: var(--ink); }
.leader__n--3 { background: linear-gradient(135deg, var(--orange-200), var(--orange-400)); color: #fff; }
.ehero__tools { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 8px; }
.btn--glass-dark { background: rgb(24 22 45 / .12); color: var(--ink); border-color: rgb(24 22 45 / .12); backdrop-filter: blur(8px); }
.btn--glass-dark:hover { background: rgb(24 22 45 / .2); }
.adetail { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
@media (max-width: 1180px) { .adetail { grid-template-columns: minmax(0, 1fr); } }
.tabs--sm a { height: 34px; padding: 0 10px; font-size: 12.5px; }
.seg--mini { display: inline-flex; gap: 4px; padding: 3px; border-radius: 11px; background: var(--s2); }
.seg__btn { height: 28px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; font-size: 12px; font-weight: 800; color: var(--text-3); }
.seg__btn.is-on { background: var(--cs); color: var(--con); }
.seatmap { margin: 14px 0 10px; }
.seatmap .seats { max-width: none; gap: 5px; }
.seatmap .seats i { width: 16px; height: 16px; border-radius: 5px; }
.status-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.rating-bars { display: grid; gap: 6px; margin-top: 12px; }
.rating-bars > div { display: grid; grid-template-columns: 40px 1fr 24px; align-items: center; gap: 8px; font-size: 12.5px; }
.rating-bars span { display: inline-flex; align-items: center; gap: 2px; font-weight: 800; }
.rating-bars .glyph { width: 12px; height: 12px; color: var(--sun-400); }
.eform { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; }
.eform__preview { position: sticky; top: 96px; display: grid; gap: 14px; }
.eform__preview .ev { pointer-events: none; }
.step-n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--g-sunset); color: #fff; font-size: 14px; font-weight: 900; }
.date-row { display: grid; grid-template-columns: 1fr 1.6fr 1.2fr; gap: 8px; }
.price-calc { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: 16px; background: var(--violet-50); border: 1px dashed var(--violet-200); }
.price-calc > span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); }
.price-calc b { font-size: 22px; font-weight: 950; }
.price-calc b small { font-size: 12px; color: var(--text-3); }
.price-calc .glyph { width: 16px; height: 16px; }
.price-calc__warn { color: var(--bad-text) !important; font-weight: 800; margin-inline-start: auto; }
.opens-box { display: none; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; padding: 14px; border-radius: 16px; background: var(--cyan-50); border: 1px solid var(--cyan-100); }
.form-stack:has(input[name="opens"]:checked) .opens-box { display: grid; }
.radio-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.radio-card { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; border: 1.5px solid var(--line); cursor: pointer; transition: .2s; }
.radio-card input { position: absolute; opacity: 0; }
.radio-card b { display: block; font-size: 14px; }
.radio-card small { display: block; font-size: 12px; color: var(--text-3); }
.radio-card__ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: var(--c100); color: var(--c700); flex: none; }
.radio-card__ico .glyph { width: 20px; height: 20px; }
.radio-card:has(input:checked) { border-color: var(--c400); background: var(--c50); box-shadow: 0 10px 22px -16px var(--cglow); }
.radio-card:has(input:focus-visible) { outline: 3px solid var(--violet-300); }
.tips { display: grid; gap: 6px; margin-top: 8px; }
.tips li { display: flex; gap: 6px; color: var(--text-2); }
.tips .glyph { width: 15px; height: 15px; color: var(--cyan-600); margin-top: 4px; }
@media (max-width: 1180px) { .eform { grid-template-columns: minmax(0, 1fr); } .eform__preview { position: static; order: -1; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); } }
@media (max-width: 680px) { .eform__preview { grid-template-columns: minmax(0, 1fr); } .opens-box { grid-template-columns: minmax(0, 1fr); } }
.sumbar { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 10px 14px; margin-bottom: 14px; border-radius: 14px; background: var(--s1); border: 1px solid var(--line); font-size: 13px; color: var(--text-2); }
.sumbar span { display: inline-flex; align-items: center; gap: 6px; }
.sumbar .glyph { width: 16px; height: 16px; color: var(--violet-500); }
.aorder { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
@media (max-width: 1180px) { .aorder { grid-template-columns: minmax(0, 1fr); } }
.who--lg { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.who--lg b { display: block; font-size: 15px; }
.who--lg small { display: block; font-size: 12px; color: var(--text-3); }
.txk { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--c100); color: var(--c700); }
.txk .glyph { width: 17px; height: 17px; }
.tbl tr.is-dim td { opacity: .72; }
.acats { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
@media (max-width: 1180px) { .acats { grid-template-columns: minmax(0, 1fr); } }
.cat-cards { display: grid; gap: 12px; }
.cat-card { border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-1); overflow: hidden; }
.cat-card[open] { border-color: var(--c300); box-shadow: 0 16px 30px -20px var(--cglow); }
.cat-card summary { display: grid; grid-template-columns: auto minmax(0, 1fr) 160px auto; align-items: center; gap: 16px; padding: 16px; cursor: pointer; list-style: none; background: linear-gradient(90deg, #fff 55%, var(--c50)); }
.cat-card summary::-webkit-details-marker { display: none; }
.cat-card__art { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 22px; background: linear-gradient(145deg, var(--c50), var(--c200)); }
.cat-card__body b { display: block; font-size: 16px; font-weight: 900; }
.cat-card__body small { display: block; font-size: 12.5px; color: var(--text-3); margin-bottom: 8px; }
.cat-card__rev { display: grid; gap: 4px; }
.cat-card__rev small { font-size: 11.5px; color: var(--text-3); }
.cat-card__rev b { font-size: 17px; font-weight: 900; }
.cat-card__edit { padding: 0 16px 16px; border-top: 1px dashed var(--line-2); padding-top: 16px; }
@media (max-width: 760px) { .cat-card summary { grid-template-columns: auto minmax(0, 1fr); } .cat-card__rev, .cat-card summary .btn { grid-column: 1 / -1; } }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatches label { cursor: pointer; }
.swatches input { position: absolute; opacity: 0; }
.swatch { display: block; width: 38px; height: 38px; border-radius: 13px; background: linear-gradient(135deg, var(--c300), var(--c600)); box-shadow: inset 0 0 0 2px rgb(255 255 255 / .6); transition: transform .2s var(--bounce); }
.swatches input:checked + .swatch { transform: scale(1.12); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--c500); }
.swatches input:focus-visible + .swatch { outline: 3px solid var(--violet-300); }
.iconpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 6px; }
.iconpick label { cursor: pointer; }
.iconpick input { position: absolute; opacity: 0; }
.iconpick span { display: grid; place-items: center; height: 48px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; transition: .2s; }
.iconpick input:checked + span { border-color: var(--violet-400); background: var(--violet-50); box-shadow: 0 8px 16px -10px var(--violet-glow); }
.iconpick input:focus-visible + span { outline: 3px solid var(--violet-300); }
.new-cat { position: sticky; top: 96px; }
.ausers { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
@media (max-width: 1280px) { .ausers { grid-template-columns: minmax(0, 1fr); } }
.pcover--admin { background: var(--g-lagoon); }
.temp-pass { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px; margin-bottom: 20px; border-radius: 20px; background: var(--sun-50); border: 1.5px dashed var(--sun-300); }
.temp-pass b { display: block; font-size: 15px; }
.temp-pass p { font-size: 13px; color: var(--text-2); }
.temp-pass code { padding: 8px 14px; border-radius: 12px; background: #fff; font-size: 18px; font-weight: 800; letter-spacing: 1px; border: 1px solid var(--sun-200); }
.auser { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
@media (max-width: 1180px) { .auser { grid-template-columns: minmax(0, 1fr); } }
.acct-actions { display: grid; gap: 8px; margin-top: 12px; }
.acct-actions .inline-form { display: block; }
.aact { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 20px; align-items: start; }
@media (max-width: 1180px) { .aact { grid-template-columns: minmax(0, 1fr); } }
.log { display: grid; gap: 8px; }
.log__item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: #fff; border: 1px solid var(--line); }
.log__ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: var(--c100); color: var(--c700); flex: none; }
.log__ico .glyph { width: 19px; height: 19px; }
.log__body { flex: 1; min-width: 0; }
.log__body b { font-size: 14px; font-weight: 850; }
.log__body p { font-size: 12.5px; color: var(--text-2); }
.log__who { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); white-space: nowrap; }
.log__who time { padding: 2px 8px; border-radius: 8px; background: var(--s2); font-weight: 700; }
@media (max-width: 600px) { .log__item { flex-wrap: wrap; } .log__who { width: 100%; justify-content: flex-end; } }

/* design system */
.ds-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; padding: 30px; margin-bottom: 30px; border-radius: 32px; color: #fff; }
.ds-hero h1 { font-size: clamp(28px, 3.4vw, 44px); font-weight: 950; margin: 8px 0; }
.ds-hero p { opacity: .9; max-width: 640px; }
.ds-hero code { background: rgb(255 255 255 / .2); padding: 1px 6px; border-radius: 6px; }
.ds-toc { display: flex; flex-wrap: wrap; gap: 6px; max-width: 420px; justify-content: flex-end; }
.ds-toc a { padding: 6px 12px; border-radius: 11px; background: rgb(255 255 255 / .16); border: 1px solid rgb(255 255 255 / .28); font-size: 12.5px; font-weight: 700; }
.ds-toc a:hover { background: rgb(255 255 255 / .3); }
@media (max-width: 900px) { .ds-hero { grid-template-columns: minmax(0, 1fr); } .ds-toc { justify-content: flex-start; } }
.ds { margin-bottom: 44px; scroll-margin-top: 90px; }
.ds-fams { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-bottom: 16px; }
.ds-fam { padding: 14px; border-radius: 20px; background: #fff; border: 1px solid var(--line); }
.ds-fam__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.ds-fam__head code { font-size: 12px; color: var(--c700); }
.ds-fam__steps { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; }
.ds-fam__steps span { display: grid; place-items: end center; height: 54px; border-radius: 9px; cursor: help; outline: none; }
.ds-fam__steps span:focus { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c500); }
.ds-fam__steps i { font-style: normal; font-size: 9px; font-weight: 800; color: rgb(24 22 45 / .55); padding-bottom: 3px; }
.ds-fam__steps i.is-dark { color: rgb(255 255 255 / .85); }
.ds-grads { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.ds-grad { display: flex; flex-direction: column; justify-content: flex-end; height: 110px; padding: 14px; border-radius: 20px; color: #fff; }
.ds-grad code { font-size: 11.5px; opacity: .85; }
.ds-chips { display: flex; gap: 8px; margin-top: 12px; }
.ds-chips span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; color: #fff; font-weight: 900; }
.ds-glassbox { padding: 8px; border-radius: 16px; background: var(--g-berry); }
.ds-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.ds-cards b { font-size: 15px; }
.ds-glass { padding: 14px; border-radius: 24px; background: radial-gradient(circle at 20% 20%, var(--pink-400), transparent 50%), radial-gradient(circle at 80% 80%, var(--cyan-400), transparent 50%), var(--violet-300); }
.ds-row { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 18px; }
.ds-type p + p { margin-top: 8px; }

/* ---------- installer ---------- */
.setup { display: grid; grid-template-columns: minmax(340px, 430px) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; background: linear-gradient(180deg, var(--violet-50), #fff 420px); }
.setup__side { position: relative; display: flex; flex-direction: column; gap: 26px; padding: 32px 30px; background: var(--g-night); color: #fff; overflow: hidden; isolation: isolate; }
.setup__side > :not(.blob) { position: relative; z-index: 1; }
.setup__brand { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 950; }
.setup__brand .tag { margin-inline-start: auto; }
.setup__copy { display: grid; gap: 10px; }
.setup__copy .kicker { color: var(--sun-300); }
.setup__copy .kicker::before { background: var(--sun-300); }
.setup__copy h1 { font-size: clamp(30px, 3vw, 40px); font-weight: 950; line-height: 1.3; letter-spacing: -.6px; text-wrap: balance; }
.setup__copy h1 em { font-style: normal; background: var(--g-sunset); -webkit-background-clip: text; background-clip: text; color: transparent; }
.setup__copy p { color: rgb(255 255 255 / .74); line-height: 1.9; }
.setup__steps { display: grid; gap: 10px; counter-reset: s; }
.setup__steps li { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 18px; background: rgb(255 255 255 / .07); border: 1px solid rgb(255 255 255 / .12); }
.setup__steps b { display: block; font-size: 14.5px; font-weight: 850; }
.setup__steps small { display: block; font-size: 12px; color: rgb(255 255 255 / .62); }
.setup__n { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 13px; background: var(--cg); font-weight: 900; box-shadow: 0 10px 20px -10px var(--cglow); }
.setup__n .glyph { width: 18px; height: 18px; }
.setup__steps li.is-done .setup__n { background: var(--mint-500); }
.setup__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.setup__side .tag--glass { background: rgb(255 255 255 / .12); border: 1px solid rgb(255 255 255 / .22); color: #fff; }
.setup__php { display: flex; align-items: center; gap: 12px; margin-top: auto; padding: 14px; border-radius: 20px; background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .16); backdrop-filter: blur(10px); }
.setup__php > div { flex: 1; min-width: 0; }
.setup__php small { display: block; font-size: 12px; color: rgb(255 255 255 / .65); }
.setup__php b { display: block; font-size: 17px; font-weight: 900; text-align: start; }
.setup__php-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: #fff; flex: none; }
.setup__main { display: grid; gap: 18px; align-content: start; width: 100%; max-width: 860px; padding: clamp(20px, 4vw, 48px); }
.setup__form { display: grid; gap: 18px; }
.setup__card .card__head { padding-bottom: 4px; }
.setup__badge { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 12px; background: var(--cg); color: #fff; font-weight: 900; font-size: 15px; box-shadow: 0 8px 18px -10px var(--cglow); flex: none; }
.checks { margin-top: 10px; }
.checks li { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-top: 1px dashed var(--line-2); }
.checks li b { display: block; font-size: 14px; font-weight: 800; }
.checks li small { display: block; font-size: 12px; color: var(--text-3); }
.checks__ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--c100); color: var(--c700); flex: none; }
.checks__ico .glyph { width: 16px; height: 16px; }
.setup__form:has(input[name="driver"][value="sqlite"]:checked) .mysql-fields { display: none; }
.setup__sample { padding: 18px 20px; border-radius: var(--r-l); background: var(--c50); border: 1.5px dashed var(--c300); }
.setup__sample b { font-size: 15px; }
.setup__state { display: grid; justify-items: center; gap: 14px; padding: clamp(28px, 5vw, 56px) 24px; margin-top: 6vh; text-align: center; border-radius: var(--r-xl, 28px); background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-2); }
.setup__state h2 { font-size: 26px; font-weight: 900; }
.setup__state p { max-width: 460px; line-height: 1.9; }
.setup__win { display: flex; align-items: center; gap: 20px; padding: 28px; }
.setup__win h2 { font-size: clamp(22px, 2.4vw, 28px); font-weight: 950; margin: 4px 0; }
.setup__win p { opacity: .85; line-height: 1.8; }
.setup__win .kicker { color: #fff; }
.setup__win .kicker::before { background: #fff; }
.setup__win-ico { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 26px; background: rgb(255 255 255 / .22); border: 1px solid rgb(255 255 255 / .35); flex: none; animation: float 5s ease-in-out infinite; }
.setup__win-ico .glyph { width: 40px; height: 40px; }
.setup__code { position: relative; }
.setup__code .btn { position: absolute; top: 10px; left: 10px; z-index: 1; }
.setup__code .textarea { font-family: var(--font-mono); font-size: 12.5px; background: var(--s2, #f7f6fb); }
.setup__creds { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.cred { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 22px; background: var(--c50); border: 1px solid var(--c100); }
.cred > div { min-width: 0; display: grid; gap: 2px; }
.cred small { font-size: 12px; color: var(--text-3); }
.cred b { font-size: 15px; font-weight: 850; overflow-wrap: anywhere; text-align: start; }
.cred a { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 800; color: var(--c700); }
.cred a .glyph { width: 14px; height: 14px; }
.cred span { font-size: 13px; }
@media (max-width: 960px) {
  .setup { grid-template-columns: minmax(0, 1fr); }
  .setup__side { gap: 20px; padding: 24px 20px; }
  .setup__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .setup__steps li { grid-template-columns: 34px minmax(0, 1fr); }
  .setup__steps li > .ico { display: none; }
  .setup__php { margin-top: 0; }
  .setup__main { margin-inline: auto; }
}
@media (max-width: 560px) {
  .setup__steps small, .setup__php, .setup__chips { display: none; }
  .setup__steps li { padding: 9px 10px; gap: 10px; }
  .setup__copy h1 { font-size: 28px; }
  .setup__win { flex-direction: column; align-items: flex-start; padding: 22px; }
  .checks li { padding-inline: 16px; }
}

/* ---------- error page ---------- */
.oops { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; padding: 96px 20px 32px; overflow: hidden; isolation: isolate; text-align: center; background: #fff; }
.oops::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(var(--line-2) 1.2px, transparent 1.4px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(circle at 50% 42%, #000 0 30%, transparent 70%); mask-image: radial-gradient(circle at 50% 42%, #000 0 30%, transparent 70%); }
.oops > .blob { z-index: -1; }
.oops__brand { position: absolute; top: 22px; inset-inline-start: 24px; display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 950; }
.oops__stage { display: grid; justify-items: center; gap: 12px; max-width: 580px; }
.oops__code { position: relative; display: flex; direction: ltr; gap: 4px; margin-bottom: 4px; font-size: clamp(108px, 22vw, 196px); font-weight: 950; line-height: 1; letter-spacing: -4px; }
.oops__d { color: var(--violet-500); filter: drop-shadow(0 18px 28px var(--violet-glow)); }
.oops__d--1 { color: var(--pink-500); filter: drop-shadow(0 18px 28px var(--pink-glow)); }
.oops__d--2 { color: var(--orange-400); filter: drop-shadow(0 18px 28px var(--orange-glow)); }
.oops__d--1 { background-image: var(--g-aurora); filter: drop-shadow(0 18px 28px var(--blue-glow)); }
.oops__d--2 { background-image: var(--g-citrus); filter: drop-shadow(0 18px 28px var(--orange-glow)); }
.oops__ico { position: absolute; top: -10px; right: -66px; display: grid; place-items: center; width: 104px; height: 104px; border-radius: 32px; background: rgb(255 255 255 / .8); border: 1px solid #fff; box-shadow: var(--sh-3); backdrop-filter: blur(12px); rotate: 10deg; animation: float-r 6s ease-in-out infinite; }
.oops__ico .ico { width: 72px; height: 72px; }
.oops__stage .kicker { color: var(--c700); }
.oops__stage h1 { font-size: clamp(26px, 3.4vw, 38px); font-weight: 950; letter-spacing: -.4px; }
.oops__stage p { max-width: 460px; color: var(--text-2); line-height: 1.9; }
.oops__links { display: grid; grid-template-columns: repeat(3, minmax(0, 220px)); gap: 12px; }
.oops__link { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-1); text-align: start; transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s; }
.oops__link:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--c200); }
.oops__link > span:not(.plate) { flex: 1; min-width: 0; }
.oops__link b { display: block; font-size: 13.5px; font-weight: 850; }
.oops__link small { display: block; font-size: 11.5px; color: var(--text-3); }
.oops__link > .glyph { width: 16px; height: 16px; color: var(--c600); }
.oops__help { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; font-size: 13px; color: var(--text-3); }
.oops__help .glyph { width: 16px; height: 16px; }
.oops__help a { color: var(--violet-700); font-weight: 750; }
@media (max-width: 760px) {
  .oops__links { grid-template-columns: minmax(0, 1fr); width: 100%; max-width: 360px; }
  .oops__ico { width: 76px; height: 76px; right: -26px; top: -14px; border-radius: 24px; }
  .oops__ico .ico { width: 52px; height: 52px; }
}

/* بلیت باطل‌شده (استرداد یا لغو) */
.ticket--void .ticket__top { filter: grayscale(.9); opacity: .75; }
.ticket__void { display: grid; place-items: center; width: 150px; height: 150px; flex: none; border: 3px dashed var(--pink-400); border-radius: 22px; color: var(--pink-600); font-size: 22px; font-weight: 950; rotate: -8deg; background: var(--pink-50); }


/* ==========================================================================
   نسخه‌ی ۵: چک‌لیست راه‌اندازی (پنل مدیریت)
   ========================================================================== */
.tag--xs { height: 22px; padding: 0 8px; font-size: 11px; }
/* متن کارت هیچ‌وقت از حدود ۲۶۰ پیکسل باریک‌تر نمی‌شود؛ اگر جا نبود، برچسب‌ها و دکمه به ردیف دوم می‌روند */
.launch-strip { display: flex; align-items: center; gap: 12px 14px; flex-wrap: wrap; margin-bottom: 18px; padding: 14px 18px; border-radius: var(--r-l); background: linear-gradient(100deg, var(--mint-50), #fff 60%); box-shadow: inset 0 0 0 1px var(--mint-100), var(--sh-1); transition: transform .2s var(--ease), box-shadow .2s; }
.launch-strip.has-fail { background: linear-gradient(100deg, var(--pink-50), #fff 60%); box-shadow: inset 0 0 0 1px var(--pink-100), var(--sh-1); }
.launch-strip:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--mint-300), var(--sh-2); }
.launch-strip b { display: block; font-size: 15px; font-weight: 900; }
.launch-strip small { font-size: 12.5px; color: var(--text-3); }
.launch-strip > .ring { flex: none; }
.launch-strip > .grow { flex: 99 1 min(260px, calc(100% - 78px)); }
.launch-strip__ft { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 10px; }
.lc-top { margin-bottom: 18px; }
.lc-sum { display: grid; justify-items: center; gap: 16px; }
.lc-sum__legend { display: grid; gap: 8px; width: 100%; }
.lc-sum__legend li { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--r-s); background: var(--c50); color: var(--c800); font-size: 13.5px; font-weight: 750; }
.lc-sum__legend .glyph { width: 18px; height: 18px; color: var(--c500); }
.lc-sum__legend b { font-size: 17px; font-weight: 950; }
.lc-off { display: grid; gap: 12px; align-content: start; padding: 24px; border-radius: var(--r-xl); }
.lc-off h2 { font-size: 21px; font-weight: 950; }
.lc-off__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lc-off__item { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border-radius: var(--r-m); background: rgb(255 255 255 / .08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14); }
.lc-off__item b { display: block; font-size: 14px; font-weight: 850; }
.lc-off__item small { font-size: 12px; line-height: 1.8; opacity: .8; }
.lc-groups { columns: 2 420px; column-gap: 18px; }
.lc-group { break-inside: avoid; margin-bottom: 18px; padding: 18px; border-radius: var(--r-xl); }
.lc-group__head { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; margin-bottom: 8px; border-bottom: 1px dashed var(--line-2); }
.lc-group__head > div { flex: 1; }
.lc-group__head b { display: block; font-size: 16px; font-weight: 900; }
.lc-group__head small { font-size: 12px; color: var(--text-3); }
.lc-list { display: grid; gap: 6px; }
.lc-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px; border-radius: var(--r-m); }
.lc-item.is-fail { background: var(--pink-50); }
.lc-item.is-warn { background: var(--sun-50); }
.lc-item__st { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 10px; background: var(--c100); color: var(--c600); }
.lc-item__st .glyph { width: 18px; height: 18px; }
.lc-item__body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.lc-item__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lc-item__top b { font-size: 14px; font-weight: 850; }
.lc-item__detail { font-size: 12.5px; color: var(--text-2); overflow-wrap: anywhere; }
.lc-item__fix { display: flex; align-items: flex-start; gap: 6px; margin-top: 4px; font-size: 12.5px; line-height: 1.8; color: var(--text-2); }
.lc-item__fix .glyph { flex: none; width: 14px; height: 14px; margin-top: 5px; color: var(--violet-500); }
@media (max-width: 700px) { .lc-off__grid { grid-template-columns: minmax(0, 1fr); } }

.lc-item__fix code { padding: 1px 6px; border-radius: 6px; background: rgb(255 255 255 / .8); box-shadow: inset 0 0 0 1px var(--line); font-size: 11.5px; unicode-bidi: isolate; }