/* ==========================================================================
   کانت‌این — سیستم طراحی نهایی
   قواعد:
   • هیچ موشن hover (transform/transition motion) وجود ندارد — فقط تغییر رنگ
   • گوشه‌های گرد بین ۴ تا ۱۲ پیکسل (به‌جز عناصر pill/circle که 999px functional هستند)
   • همه‌ی padding، margin و font-size ضریب ۴ هستند
   • marker نقشه عمودی (بدون چرخش 45°)
   ========================================================================== */

/* Vazirmatn font — local files (offline, no CDN)
   To install: download Vazirmatn v33.003 from https://github.com/rastikerdar/vazirmatn/releases
   and copy the contents of `fonts/webfonts/` to `assets/fonts/webfonts/` */
@font-face { font-family: Vazirmatn; src: url('fonts/webfonts/Vazirmatn-Thin.woff2') format('woff2'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: Vazirmatn; src: url('fonts/webfonts/Vazirmatn-ExtraLight.woff2') format('woff2'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: Vazirmatn; src: url('fonts/webfonts/Vazirmatn-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: Vazirmatn; src: url('fonts/webfonts/Vazirmatn-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Vazirmatn; src: url('fonts/webfonts/Vazirmatn-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: Vazirmatn; src: url('fonts/webfonts/Vazirmatn-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: Vazirmatn; src: url('fonts/webfonts/Vazirmatn-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: Vazirmatn; src: url('fonts/webfonts/Vazirmatn-ExtraBold.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: Vazirmatn; src: url('fonts/webfonts/Vazirmatn-Black.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }

/* ---------- Design Tokens ---------- */
:root {
  /* Colors — the dark operator palette (2026-09-07).
     Not an inversion. Three rules decided every value here:
       · the canvas is the DARKEST layer and cards sit ABOVE it. In light
         a card is lighter than its ground; the reflex is to make it darker
         in dark, which digs a hole. On a dark ground elevation is
         lightness, because shadow is invisible on it.
       · the accent has two jobs and needs two values. #1FB87A is a fine
         FILL but only 3.9:1 as text on this canvas — under the readable
         floor — so text and links take --accent-text (8:1) while fills
         keep the brand green and carry dark ink on top.
       · every semantic colour was retuned for a dark ground rather than
         reused. «ودیعه بلوکه‌شده» and «لغو تورنمنت» are exactly where a
         misread is expensive. */
  --chrome: #0E1013;      /* header, tab bar — chrome reads below the canvas */
  --bg: #121417;
  --surface: #1B1E23;
  --surface-2: #22262C;
  --hero-from: #22262C;   /* the panel heroes, which used to be var(--ink) */
  --hero-to: #2E343C;
  --ink: #E8EBEF;
  --ink-2: #C3C9D1;
  --muted: #8C949F;       /* 4.9:1 on --surface */
  --muted-2: #6E7681;     /* decorative only, never body text */
  --line: #2A2F36;
  --line-strong: #3A4048;
  /* What sits ON a strong fill. In dark, `background: var(--ink)` becomes a
     LIGHT button — the standard dark-UI primary — so its text must flip too. */
  --on-ink: #121417;
  --accent: #1FB87A;
  --accent-deep: #178F5D;
  --accent-text: #4FD9A0;
  --accent-soft: #14342A;
  --accent-tint: #10231C;
  --on-accent: #06231A;
  --warn: #F0B040;
  --warn-soft: #3A2A0F;
  --rose: #F2708F;
  --rose-soft: #3A1621;
  --sky: #6FA5F5;
  --sky-soft: #16263D;
  --gold: #E0BC5C;
  --gold-soft: #332B14;

  /* Layout (multiples of 4) */
  --header-h: 72px;
  --tabbar-h: 84px;
  --container-max: 1240px;
  --content-max: 760px;
  --shell-pad-x: 20px;
  --shell-pad-x-md: 32px;
  /* Radius scale: 4, 8, 12 only (everything else is pill 999px) */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 12px;          /* cards */
  --r-pill: 999px;       /* circles, chips, badges */

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .30);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, .38);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, .46);
  --shadow-float: 0 8px 24px rgba(31, 184, 122, .30);
}

/* ---------- Reset / Base ---------- */
* { box-sizing: border-box; }
/* letter-spacing صفر در کل پروژه (override روی استایل‌های inline هر صفحه و کلاس‌های tracking) */
*, *::before, *::after { letter-spacing: 0 !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Vazirmatn', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss02", "kern";
  margin: 0;
  min-height: 100vh;
  font-size: 16px;
  line-height: 1.6;
}
.num { font-variant-numeric: tabular-nums; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }

/* ---------- Container ---------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--shell-pad-x);
}
@media (min-width: 768px) {
  .container { padding-inline: var(--shell-pad-x-md); }
}
.container-narrow {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--shell-pad-x);
}
@media (min-width: 768px) {
  .container-narrow { padding-inline: var(--shell-pad-x-md); }
}

/* ---------- Layout utilities ---------- */
/* `d-block` is used across the Blade views (Bootstrap-style name) but was
   never defined anywhere — the sublabels it should stack rendered inline. */
.d-block { display: block; }

/* ---------- Color utilities ---------- */
.bg-surface { background-color: var(--surface); }
.bg-bg { background-color: var(--bg); }
.bg-ink { background-color: var(--ink); }
.bg-accent { background-color: var(--accent); }
.bg-accent-soft { background-color: var(--accent-soft); }
.text-ink { color: var(--ink); }
.text-muted { color: var(--muted); }
.text-accent { color: var(--accent); }
.border-line { border-color: var(--line); }

/* ===========================================================================
   NAVIGATION
   =========================================================================== */
.mobile-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  height: var(--header-h);
  background: var(--bg);
  position: sticky; top: 0; z-index: 30;
}
@media (min-width: 768px) { .mobile-header { display: none; } }

.web-nav {
  display: none;
  background: var(--bg);
  position: sticky; top: 0; z-index: 30;
}
@media (min-width: 768px) { .web-nav { display: block; } }
.web-nav-inner {
  display: flex; align-items: center; gap: 36px;
  height: 80px;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--shell-pad-x-md);
}
.web-nav .brand {
  font-weight: 800;
  font-size: 24px;
  color: var(--ink);
  flex-shrink: 0;
  letter-spacing: -0.02em;
}
.web-nav .links {
  display: flex; align-items: center; gap: 4px;
  flex: 1;
}
.web-nav .links a {
  padding: 8px 16px;
  border-radius: var(--r-md);
  font-size: 14px; font-weight: 500;
  color: var(--muted);
}
.web-nav .links a.active {
  background: var(--ink);
  color: var(--on-ink);
}
.web-nav .actions {
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0;
}

/* ---------- Tabbar (mobile) — floating pill ---------- */
.tabbar {
  position: fixed;
  bottom: 16px; left: 16px; right: 16px;
  display: flex;
  background: var(--surface);
  border-radius: var(--r-pill);
  padding: 8px;
  box-shadow: var(--shadow-lg);
  z-index: 40;
  justify-content: space-around;
  align-items: center;
}
@media (min-width: 768px) { .tabbar { display: none; } }

.tabbar .tab {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  border-radius: var(--r-pill);
  color: var(--muted);
  position: relative;
  flex-shrink: 0;
}
.tabbar .tab svg { width: 24px; height: 24px; stroke-width: 2; }
.tabbar .tab.active {
  background: var(--accent-soft);
  color: var(--accent-deep);
}
.tabbar .tab.create {
  background: var(--accent);
  color: var(--on-accent);
  width: 56px; height: 56px;
  box-shadow: var(--shadow-float);
}
.tabbar .tab.create svg { width: 24px; height: 24px; stroke-width: 2.5; }

.has-tabbar { padding-bottom: calc(var(--tabbar-h) + 24px); }
@media (min-width: 768px) { .has-tabbar { padding-bottom: 0; } }

/* ---------- Avatars ---------- */
.avatar {
  display: grid; place-items: center;
  font-weight: 600; color: #fff; font-size: 12px;
  border-radius: var(--r-pill);
  background: var(--accent);
  flex-shrink: 0;
  width: 36px; height: 36px;
  overflow: hidden;
}
.av-1 { background: linear-gradient(135deg, #FFB8B8, #E84C7A);}
.av-2 { background: linear-gradient(135deg, #1FB87A, #15945F);}
.av-3 { background: linear-gradient(135deg, #4B8DEF, #2A6FE0);}
.av-4 { background: linear-gradient(135deg, #FFB76B, #F5A623);}
.av-5 { background: linear-gradient(135deg, #B888F0, #7B4FCC);}
.av-6 { background: linear-gradient(135deg, #6CC8FF, #2B8AD9);}
.av-7 { background: linear-gradient(135deg, #FF9088, #E84C5C);}
.av-8 { background: linear-gradient(135deg, #C0E060, #8FB72B);}

/* ---------- Icon buttons ---------- */
.icon-btn {
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: none;
  display: grid; place-items: center;
  color: var(--ink);
  flex-shrink: 0;
}
.icon-btn svg { width: 20px; height: 20px; stroke-width: 1.8; }
.icon-btn .badge {
  position: absolute;
  top: 8px; left: 8px;
  width: 8px; height: 8px;
  border-radius: var(--r-pill);
  background: var(--accent);
  border: 2px solid var(--surface);
}
.icon-btn-plain { background: transparent; }

/* The brand link and the header avatar are the two header controls drawn
   below 44px. They keep their size; the tap area is grown invisibly. */
@media (max-width: 767px) {
  .app-logo,
  .mobile-header .avatar { position: relative; }
  .app-logo::after,
  .mobile-header .avatar::after {
    content: ""; position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; height: 100%; min-width: 44px; min-height: 44px;
  }
}

/* ---------- App logo ---------- */
.app-logo {
  font-weight: 800;
  font-size: 24px;
  color: var(--ink);
  letter-spacing: -0.02em;
}

/* ===========================================================================
   BUTTONS
   =========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: var(--r-md);
  font-weight: 600; font-size: 14px;
  border: none; cursor: pointer;
  font-family: inherit;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; }

.btn-primary { background: var(--ink); color: var(--on-ink); }
.btn-accent { background: var(--accent); color: var(--on-accent); }
.btn-outline {
  background: transparent;
  border: 1.5px solid var(--line-strong);
  color: var(--ink);
}
.btn-ghost { background: var(--surface); color: var(--ink); }
.btn-danger-outline {
  background: transparent;
  border: 1.5px solid var(--rose-soft, #F5C7CD);
  color: var(--rose);
}
.btn-danger-outline:hover { background: var(--rose-soft, #FDF1F2); }
.btn-pill { border-radius: var(--r-pill); }
.btn-block { width: 100%; }
.btn-sm { padding: 8px 12px; font-size: 13px; }
.btn-lg { padding: 16px 24px; font-size: 16px; }

/* On a phone the compact scale leaves these under the 44px a finger needs.
   `.btn` takes the height directly — 38px to 44px is a change nobody reads as
   different. The small variants and the breadcrumb links keep their drawn size
   and grow only vertically, through an invisible ::after, so neither the rows
   they sit in nor a neighbouring control loses its own tap area. */
@media (max-width: 767px) {
  .btn:not(.btn-sm) { min-height: 44px; }

  .btn-sm,
  .crumbs a { position: relative; }
  .btn-sm::after,
  .crumbs a::after {
    content: "";
    position: absolute; top: 50%; left: 0;
    transform: translateY(-50%);
    width: 100%; height: 44px;
  }
}

/* ===========================================================================
   FORMS
   =========================================================================== */
.input {
  width: 100%;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px 16px;
  font: inherit; font-size: 14px;
  color: var(--ink);
}
.input::placeholder { color: var(--muted-2); }
.input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-tint);
}
.input-label {
  display: block; font-size: 13px; font-weight: 600;
  margin-bottom: 8px; color: var(--ink-2);
}
.input-with-icon { position: relative; }
.input-with-icon .ico {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px;
  color: var(--muted); pointer-events: none;
}
.input-with-icon .input { padding-right: 44px; }
.input-with-icon.ico-left .ico { right: auto; left: 16px; }
.input-with-icon.ico-left .input { padding-right: 16px; padding-left: 44px; }
.textarea { min-height: 120px; resize: vertical; line-height: 1.7; }

/* Safari on iOS zooms the whole page in when a focused field is under 16px,
   and leaves it zoomed — every form on a phone drifts sideways after the
   first tap. The 14px scale stays on desktop, where nothing zooms.
   `.input-prefix input` is listed separately: it sets its own 14px. */
@media (max-width: 767px) {
  .input { font-size: 16px; }

  /* The browser's default box is 13px square — too small to hit reliably on
     a phone, and too small to read as checked at a glance. */
  input[type="checkbox"],
  input[type="radio"] { width: 18px; height: 18px; flex-shrink: 0; }
}

.chip-radio {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 13px; font-weight: 500;
  color: var(--ink-2); cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  flex-shrink: 0;
  gap: 8px;
}
.chip-radio.is-active {
  background: var(--ink); color: var(--on-ink); border-color: var(--ink);
}

/* Same 44px floor the other pill controls got. `min-height` rather than an
   invisible ::after because these sit inside horizontal scrollers, whose
   height simply follows their content. */
@media (max-width: 767px) {
  .chip-radio { min-height: 44px; }
}
.chip-radio .x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  border-radius: var(--r-pill);
  color: var(--muted-2);
}
.chip-radio.is-active .x { color: rgba(18, 20, 23, .66); }

.toggle {
  width: 44px; height: 24px; border-radius: var(--r-pill);
  background: var(--line-strong);
  position: relative; cursor: pointer;
  flex-shrink: 0;
  border: none;
}
.toggle::after {
  content: ""; position: absolute;
  top: 2px; right: 2px;
  width: 20px; height: 20px; border-radius: var(--r-pill);
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.toggle.is-on { background: var(--accent); }
.toggle.is-on::after { right: auto; left: 2px; }

/* ===========================================================================
   CARDS / TILES
   =========================================================================== */
.card {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}
.card-lg { padding: 24px; }

.tile {
  background: var(--surface);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: block;
  color: inherit;
  box-shadow: var(--shadow-sm);
}
.tile-img {
  aspect-ratio: 16/10;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}
.tile-img .badge {
  position: absolute; top: 12px; right: 12px;
  background: var(--accent); color: var(--on-accent);
  font-size: 12px; padding: 4px 12px; border-radius: var(--r-pill);
  font-weight: 600;
}
.tile-img .badge.dark { background: rgba(26,29,31,.85); backdrop-filter: blur(8px); }
.tile-img .badge.warn { background: var(--warn); }
.tile-body { padding: 16px 20px; }

/* ---------- Photos ---------- */
.photo {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #FFE5C4 0%, #FFAA72 60%, #E87850 100%);
  position: relative;
}
.photo::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 40%, rgba(255,255,255,.16) 0%, transparent 40%),
    radial-gradient(circle at 70% 75%, rgba(0,0,0,.12) 0%, transparent 40%);
  pointer-events: none;
}
.photo.p-1 { background: linear-gradient(135deg, #BEEBD8, #1FB87A 70%);}
.photo.p-2 { background: linear-gradient(135deg, #C5E2FF, #4B8DEF 70%);}
.photo.p-3 { background: linear-gradient(135deg, #FFE5C4, #F5A623 70%);}
.photo.p-4 { background: linear-gradient(135deg, #FFD8CE, #E84C5C 70%);}
.photo.p-5 { background: linear-gradient(135deg, #E0CCFA, #7B4FCC 70%);}
.photo.p-6 { background: linear-gradient(135deg, #FFE9B5, #D4A93F 70%);}
.photo.p-7 { background: linear-gradient(135deg, #C8E5FF, #2A6FE0 70%);}
.photo.p-8 { background: linear-gradient(135deg, #FFCFC4, #E84C5C 70%);}
.photo.p-9 { background: linear-gradient(135deg, #D6F2D6, #6CB36C 70%);}
.photo .label {
  position: absolute; bottom: 12px; right: 12px;
  color: #fff; font-size: 12px; font-weight: 600;
  background: rgba(0,0,0,.4); padding: 4px 8px; border-radius: var(--r-pill);
  z-index: 2; backdrop-filter: blur(4px);
}

/* ===========================================================================
   TAGS / BADGES
   =========================================================================== */
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 12px;
  font-size: 12px;
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-2);
  font-weight: 500;
  border: 1px solid var(--line);
}
.tag-accent { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.tag-accent-soft { background: var(--accent-soft); color: var(--accent-deep); border-color: transparent; }
.tag-warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.tag-rose { background: var(--rose-soft); color: var(--rose); border-color: transparent; }
.tag-sky { background: var(--sky-soft); color: var(--sky); border-color: transparent; }
.tag-ink { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }

/* ---------- Stars ---------- */
.stars { display: inline-flex; gap: 4px; color: var(--gold); align-items: center; }
.stars svg { width: 12px; height: 12px; fill: currentColor; }
.stars .empty { color: var(--line-strong); }
.stars-lg svg { width: 16px; height: 16px; }

/* ---------- Misc ---------- */
.divider { height: 1px; background: var(--line); margin: 16px 0; }
.dots { display: flex; justify-content: center; gap: 4px; padding: 12px 0; }
.dots .dot {
  width: 8px; height: 8px; border-radius: var(--r-pill);
  background: var(--line-strong);
}
.dots .dot.active { background: var(--accent); width: 24px; }

.progress {
  height: 8px; border-radius: var(--r-pill);
  background: var(--line); overflow: hidden;
}
.progress > div { height: 100%; background: var(--accent); border-radius: var(--r-pill); }

.level-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 12px;
  background: var(--accent-soft); color: var(--accent-deep);
  font-size: 12px; font-weight: 700;
  border-radius: var(--r-pill);
}
.verified-tick {
  display: inline-grid; place-items: center;
  width: 16px; height: 16px; border-radius: var(--r-pill);
  background: var(--accent); color: var(--on-accent);
}
.verified-tick svg { width: 12px; height: 12px; stroke-width: 3; }

/* ---------- Stepper ---------- */
.stepper {
  display: flex; align-items: center; gap: 0;
  padding: 4px 0;
}
.stepper .step {
  width: 36px; height: 36px;
  border-radius: var(--r-pill);
  background: var(--surface);
  display: grid; place-items: center;
  font-weight: 700; font-size: 13px;
  color: var(--muted);
  flex-shrink: 0;
  border: 1.5px solid var(--line);
}
.stepper .step.done { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.stepper .step.active {
  background: var(--accent); color: var(--on-accent); border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-tint);
}
.stepper .line { flex: 1; height: 2px; background: var(--line); margin: 0 4px;}
.stepper .line.done { background: var(--accent); }

/* ---------- Map (marker is now upright, no rotation) ---------- */
.map-box {
  height: 220px;
  border-radius: var(--r-lg);
  background:
    linear-gradient(115deg, transparent 49.5%, rgba(31,184,122,.1) 49.5% 50.5%, transparent 50.5%),
    linear-gradient(45deg, transparent 49.5%, rgba(75,141,239,.08) 49.5% 50.5%, transparent 50.5%),
    radial-gradient(ellipse at 30% 40%, rgba(190,235,216,.4) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 70%, rgba(197,226,255,.4) 0%, transparent 60%),
    var(--surface-2);
  position: relative; overflow: hidden;
  border: 1px solid var(--line);
}
.map-pin {
  position: absolute; top: 50%; left: 50%;
  width: 36px; height: 48px;
  transform: translate(-50%, -100%);
  display: flex; align-items: flex-start; justify-content: center;
  filter: drop-shadow(0 4px 8px rgba(31,184,122,.4));
}
.map-pin svg { width: 36px; height: 48px; }

/* ---------- Cover ---------- */
.cover {
  height: 200px;
  background: linear-gradient(135deg, #BEEBD8, #1FB87A 70%);
  position: relative;
  border-radius: 0 0 12px 12px;
}
@media (min-width: 768px) { .cover { height: 240px; } }
.cover.c-2 { background: linear-gradient(135deg, #C5E2FF, #4B8DEF 70%);}
.cover.c-3 { background: linear-gradient(135deg, #FFE5C4, #F5A623 70%);}
.cover.c-4 { background: linear-gradient(135deg, #E0CCFA, #7B4FCC 70%);}

/* ---------- Breadcrumbs ---------- */
.crumbs {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 0;
  font-size: 12px; color: var(--muted);
}
.crumbs .sep { color: var(--muted-2); font-size: 12px; }
.crumbs .here { color: var(--ink); font-weight: 600; }

/* ---------- Banner CTA ---------- */
.banner-cta {
  background: linear-gradient(135deg, var(--hero-from), var(--hero-to));
  color: #fff;
  border-radius: var(--r-lg);
  padding: 32px 24px;
  position: relative; overflow: hidden;
}
@media (min-width: 768px) { .banner-cta { padding: 48px 40px; } }
.banner-cta::before {
  content: "";
  position: absolute; top: -40px; left: -40px;
  width: 200px; height: 200px;
  border-radius: var(--r-pill);
  background: var(--accent); opacity: .24;
  filter: blur(40px);
}
.banner-cta h3 {
  font-size: 24px; font-weight: 800; margin-bottom: 8px;
  position: relative; line-height: 1.4;
}
.banner-cta p {
  font-size: 14px; color: rgba(255,255,255,.72); line-height: 1.7;
  margin-bottom: 20px; position: relative; max-width: 560px;
}
@media (min-width: 768px) {
  .banner-cta h3 { font-size: 32px; }
  .banner-cta p { font-size: 16px; }
}

/* ===========================================================================
   GRID HELPERS
   =========================================================================== */
.grid-cards {
  display: grid; gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .grid-cards { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (min-width: 1024px) { .grid-cards { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

.grid-cards-2 {
  display: grid; gap: 12px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 1024px) { .grid-cards-2 { grid-template-columns: repeat(4, 1fr); gap: 16px; } }

.grid-2-md {
  display: grid; gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .grid-2-md { grid-template-columns: repeat(2, 1fr); } }

.detail-grid {
  display: grid; gap: 24px;
  grid-template-columns: 1fr;
}
.detail-grid > * { min-width: 0; }
@media (min-width: 1024px) {
  .detail-grid { grid-template-columns: 1fr 360px; gap: 40px; align-items: start; }
  .detail-grid > .sidebar { position: sticky; top: 96px; }
}

.section { padding-block: 32px; }
@media (min-width: 768px) { .section { padding-block: 56px; } }
.section-tight { padding-block: 20px; }

.section-title {
  font-size: 24px; font-weight: 800; line-height: 1.3;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
@media (min-width: 768px) { .section-title { font-size: 32px; } }
.section-subtitle {
  font-size: 14px; color: var(--muted); line-height: 1.7;
  margin-bottom: 24px;
}
@media (min-width: 768px) { .section-subtitle { font-size: 16px; margin-bottom: 32px; } }

/* ---------------------------------------------------------------------------
   باکس هدر مشکیِ صفحات — برای یکدست‌سازی هدر همه‌ی صفحات
   --------------------------------------------------------------------------- */
.page-hero {
  background: linear-gradient(135deg, var(--hero-from), var(--hero-to));
  color: #fff;
  border-radius: var(--r-lg);
  padding: 24px;
  position: relative; overflow: hidden;
}
.page-hero::before {
  content: ""; position: absolute; left: -60px; top: -60px;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(31,184,122,.16), transparent);
  pointer-events: none;
}
.page-hero > * { position: relative; }
/* اندازه‌ی تیتر و متن هدر — همگام با هدر بقیه‌ی صفحات (t-hero/pp-hero: 22px + 13px) */
.page-hero h1,
.page-hero .section-title {
  color: #fff;
  font-size: 22px; font-weight: 800; line-height: 1.3;
  letter-spacing: -0.02em; margin-bottom: 6px;
}
.page-hero p { color: rgba(255,255,255,.8); font-size: 13px; line-height: 1.7; }
.page-hero .text-muted { color: rgba(255,255,255,.7); }
.page-hero .border-line,
.page-hero [class*="border-t"] { border-color: rgba(255,255,255,.14); }
.page-hero .btn-ghost { background: rgba(255,255,255,.12); color: #fff; }
.page-hero .btn-ghost:hover { background: rgba(255,255,255,.22); }
.page-hero .btn-outline {
  background: transparent; color: #fff; border-color: rgba(255,255,255,.28);
}
.page-hero .btn-outline:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); }

/* ===========================================================================
   FOOTER
   =========================================================================== */
.site-footer {
  background: var(--surface);
  margin-top: 48px;
  padding: 48px 0 24px;
  border-top: 1px solid var(--line);
}
@media (min-width: 768px) { .site-footer { padding: 64px 0 32px; margin-top: 80px; } }
.site-footer .footer-grid {
  display: grid; gap: 32px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .site-footer .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; } }
.site-footer .brand {
  font-weight: 800; font-size: 24px;
  color: var(--ink); margin-bottom: 16px;
  letter-spacing: -0.02em;
}
.site-footer .lead { font-size: 14px; line-height: 1.85; margin-bottom: 16px; color: var(--muted); }
.site-footer h4 { color: var(--ink); font-size: 14px; font-weight: 700; margin-bottom: 16px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer ul li { margin-bottom: 8px; }
.site-footer ul a { color: var(--muted); font-size: 13px; }
.site-footer .socials { display: flex; gap: 8px; margin-top: 8px; }
.site-footer .socials a {
  width: 40px; height: 40px; border-radius: var(--r-md);
  background: var(--bg);
  display: grid; place-items: center;
  color: var(--muted);
}
.site-footer .socials svg { width: 16px; height: 16px; }
.site-footer .copy {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}
@media (min-width: 768px) {
  .site-footer .copy { display: flex; justify-content: space-between; }
}
@media (max-width: 767px) { .site-footer { display: none; } }

/* ===========================================================================
   PAGE-SPECIFIC
   =========================================================================== */
.scroll-x { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.scroll-x::-webkit-scrollbar { display: none; }

/* Hero marquee */
.hero-marquee {
  overflow: hidden;
  position: relative;
  direction: ltr;  /* avoid RTL flipping the translate values */
}
.hero-marquee::before, .hero-marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 60px;
  pointer-events: none; z-index: 2;
}
.hero-marquee::before { right: 0; background: linear-gradient(to left, var(--bg), transparent); }
.hero-marquee::after { left: 0; background: linear-gradient(to right, var(--bg), transparent); }
.hero-row-anim {
  display: flex; gap: 16px; width: max-content;
  animation: hero-pan 40s linear infinite;
}
.hero-row-anim.reverse { animation: hero-pan-reverse 44s linear infinite; }
.hero-row-anim:hover { animation-play-state: paused; }
.hero-row-anim > * { direction: rtl; } /* restore RTL for the cards content */
@keyframes hero-pan { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes hero-pan-reverse { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }
.hero-card {
  flex: 0 0 auto;
  width: 180px;
  border-radius: var(--r-lg);
  overflow: hidden;
  display: block;
  position: relative;
  aspect-ratio: 4/5;
  box-shadow: var(--shadow-sm);
}
@media (min-width: 768px) { .hero-card { width: 220px; } }
.hero-card .photo { height: 100%; width: 100%; }
.hero-card .meta {
  position: absolute; bottom: 0; right: 0; left: 0;
  padding: 12px;
  background: linear-gradient(to top, rgba(0,0,0,.76) 12%, transparent);
  color: #fff;
}
.hero-card .meta .ttl {
  font-size: 13px; font-weight: 700; line-height: 1.4; margin-bottom: 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.hero-card .meta .sub { font-size: 12px; opacity: .9; }
.hero-card .badge-pill {
  position: absolute; top: 12px; right: 12px;
  background: var(--accent); color: var(--on-accent);
  font-size: 12px; padding: 4px 12px; border-radius: var(--r-pill);
  font-weight: 600;
}
.hero-card .badge-pill.free { background: rgba(255,255,255,.96); color: var(--accent-deep); }

/* "SEE ALL" link */
.see-all {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .04em;
}

/* Newsletter form */
.newsletter-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  position: relative;
}
.newsletter-form .input {
  flex: 1;
  min-width: 200px;
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.16);
  color: #fff;
}
.newsletter-form .input::placeholder { color: rgba(255,255,255,.5); }

/* ===========================================================================
   CAROUSEL — touch-enabled with snap + arrow navigation
   =========================================================================== */
.carousel {
  position: relative;
}
.carousel-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track > * {
  flex: 0 0 100%;
  scroll-snap-align: start;
}
@media (min-width: 640px) {
  .carousel-track > * { flex: 0 0 calc(50% - 8px); }
}
@media (min-width: 1024px) {
  .carousel-track > * { flex: 0 0 calc((100% - 32px) / 3); }
}

.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
  gap: 12px;
}
.carousel-arrows {
  display: flex;
  gap: 8px;
}
.carousel-arrow {
  width: 44px; height: 44px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--ink);
  cursor: pointer;
}
.carousel-arrow:disabled {
  opacity: .4;
  cursor: not-allowed;
}
.carousel-arrow svg { width: 16px; height: 16px; }
.carousel-dots {
  display: flex; gap: 8px; align-items: center;
}
.carousel-dots .dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--line-strong);
  cursor: pointer;
  border: none;
  padding: 0;
}
.carousel-dots .dot.active {
  background: var(--accent);
  width: 24px;
}

/* ---------- Multi-host avatar group ---------- */
.host-stack {
  display: inline-flex;
  align-items: center;
}
.host-stack .avatar {
  margin-left: -8px;
  border: 2px solid var(--surface);
}
.host-stack .avatar:first-child { margin-left: 0; }
.host-stack-count {
  display: inline-grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--on-ink);
  font-size: 11px;
  font-weight: 700;
  margin-left: -8px;
  border: 2px solid var(--surface);
}

/* ===========================================================================
   IMAGE GALLERY (touch-enabled)
   =========================================================================== */
.gallery {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg);
  box-shadow: var(--shadow-sm);
}
.gallery-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  aspect-ratio: 16/9;
  direction: ltr;
}
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  height: 100%;
  position: relative;
}
.gallery-slide .photo {
  width: 100%;
  height: 100%;
}
.gallery-arrows {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0 16px;
  pointer-events: none;
}
.gallery-arrows button {
  pointer-events: auto;
  width: 44px; height: 44px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  border: none;
  display: grid; place-items: center;
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--shadow-md);
}
.gallery-arrows button svg { width: 18px; height: 18px; }
.gallery-counter {
  position: absolute;
  top: 16px; right: 16px;
  background: rgba(0,0,0,.6);
  color: #fff;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  backdrop-filter: blur(8px);
}
.gallery-thumbs {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.gallery-thumbs::-webkit-scrollbar { display: none; }
.gallery-thumb {
  flex: 0 0 80px;
  height: 64px;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  position: relative;
}
.gallery-thumb.active {
  border-color: var(--accent);
}
.gallery-thumb .photo { width: 100%; height: 100%; }

/* ===========================================================================
   FILTER PANEL
   =========================================================================== */
.filter-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 60;
  align-items: flex-end;
  justify-content: center;
}
.filter-overlay.is-open {
  display: flex;
}
@media (min-width: 768px) {
  .filter-overlay.is-open { align-items: center; }
}
.filter-panel {
  background: var(--surface);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  border-radius: 12px 12px 0 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .filter-panel {
    border-radius: 12px;
    max-height: 80vh;
  }
}
.filter-panel-header {
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 1;
}
.filter-panel-title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.filter-panel-close {
  width: 36px; height: 36px;
  border-radius: 999px;
  background: var(--bg);
  border: none;
  display: grid; place-items: center;
  color: var(--ink);
  cursor: pointer;
}
.filter-panel-close svg { width: 18px; height: 18px; }
.filter-panel-body {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.filter-group-title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.filter-group-title .reset {
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
}
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.filter-panel-footer {
  padding: 16px 24px;
  display: flex;
  gap: 12px;
  border-top: 1px solid var(--line);
  position: sticky;
  bottom: 0;
  background: var(--surface);
}
.filter-panel-footer .btn { flex: 1; }
.filter-panel-footer .btn-ghost { flex: 0 0 auto; }

/* Range slider visualization */
.range-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.range-row .input { flex: 1; }
.range-row .sep { color: var(--muted-2); font-size: 13px; }

/* ===========================================================================
   CATEGORIES TOP ROW (icon cards)
   =========================================================================== */
.cat-icon-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px 12px;
  background: var(--surface);
  border-radius: 12px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
}
.cat-icon-card.is-active {
  background: var(--ink);
  color: var(--on-ink);
}
.cat-icon-card .icon-wrap {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: grid; place-items: center;
}
/* The parent fill flipped to light with the palette, so its children
   flip with it — translucent BLACK, not white, and ink for the glyph. */
.cat-icon-card.is-active .icon-wrap {
  background: rgba(18, 20, 23, .12);
  color: var(--on-ink);
}
.cat-icon-card .label {
  font-size: 13px;
  font-weight: 600;
}
.cat-icon-card .count {
  font-size: 11px;
  color: var(--muted);
}
.cat-icon-card.is-active .count { color: rgba(18, 20, 23, .66); }

.cat-icon-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, 1fr);
}
@media (min-width: 640px) { .cat-icon-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .cat-icon-grid { grid-template-columns: repeat(6, 1fr); } }

/* ===========================================================================
   STICKY-BOTTOM-CTA (event detail signup bar fixed at bottom)
   =========================================================================== */
.sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: 12px 20px;
  z-index: 50;
  box-shadow: 0 -4px 16px rgba(26, 29, 31, .06);
}
/* When page also has a floating tabbar, stack sticky-cta above it on mobile */
.sticky-cta.above-tabbar {
  bottom: calc(var(--tabbar-h) + 8px);
  border-radius: 12px 12px 0 0;
  margin: 0 16px;
  left: 0; right: 0;
}
@media (min-width: 768px) {
  .sticky-cta.above-tabbar {
    bottom: 0;
    border-radius: 0;
    margin: 0;
  }
}
.sticky-cta-inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Meta block: price + capacity chip, stacked on mobile, inline on desktop */
.sticky-cta-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 1;
}
.sticky-cta-meta .amount {
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.sticky-cta-meta .unit {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}
/* Capacity "hook" chip — uses gold/warn palette to nudge action */
.sticky-cta-capacity {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--warn-soft);
  color: var(--warn);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  width: fit-content;
}
.sticky-cta-capacity svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}
/* Legacy support — keep .sticky-cta-price for any remaining usages */
.sticky-cta-price {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}
.sticky-cta-price .label {
  font-size: 12px;
  color: var(--muted);
}
.sticky-cta-price .amount {
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
}
/* Button: natural size, doesn't stretch */
.sticky-cta .btn {
  flex: 0 0 auto;
}
@media (min-width: 768px) {
  .sticky-cta {
    padding: 16px 32px;
  }
  .sticky-cta-meta {
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }
  .sticky-cta-meta .amount {
    font-size: 22px;
  }
  .sticky-cta-price .amount {
    font-size: 24px;
  }
}

/* Pad the page so content above the sticky bar is reachable */
.has-sticky-cta { padding-bottom: 96px; }
.has-sticky-cta.has-tabbar { padding-bottom: calc(96px + var(--tabbar-h) + 8px); }
@media (min-width: 768px) {
  .has-sticky-cta { padding-bottom: 104px; }
  .has-sticky-cta.has-tabbar { padding-bottom: 104px; }
}

/* ---------- Card-as-link (host card on event page) ---------- */
.card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.card-link:hover .card-link-name {
  color: var(--accent-deep);
}

/* ---------- Back button (above title) ---------- */
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin: 0 -12px 16px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.back-btn:hover {
  background: var(--surface);
  color: var(--ink);
}
.back-btn svg { width: 16px; height: 16px; }

/* ---------- Clickable tag (filter pill) ---------- */
.tag-link {
  cursor: pointer;
  text-decoration: none;
}
.tag-link:hover {
  border-color: var(--accent);
  color: var(--accent-deep);
}

/* ===========================================================================
   DROPDOWN — minimal category selector
   =========================================================================== */
.dropdown {
  position: relative;
}
.dropdown-trigger {
  width: 100%;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  text-align: right;
}
.dropdown.is-open .dropdown-trigger {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-tint);
}
.dropdown-trigger:focus {
  outline: none;
  border-color: var(--accent);
}
.dropdown-trigger .dd-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.dropdown-trigger .dd-icon svg { width: 16px; height: 16px; }
.dropdown-trigger .dd-value {
  flex: 1;
  font-weight: 600;
}
.dropdown-trigger .dd-chevron {
  width: 16px; height: 16px;
  color: var(--muted);
  flex-shrink: 0;
}
.dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: 0;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  z-index: 20;
  max-height: 320px;
  overflow-y: auto;
  padding: 4px;
}
.dropdown.is-open .dropdown-menu { display: block; }
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
}
.dropdown-item:hover { background: var(--bg); }
.dropdown-item.is-active { background: var(--accent-tint); }
.dropdown-item .dd-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.dropdown-item .dd-icon svg { width: 16px; height: 16px; }
.dropdown-item .dd-label {
  flex: 1;
  font-weight: 600;
  font-size: 13px;
}
.dropdown-item .dd-count {
  font-size: 12px;
  color: var(--muted);
}

/* ===========================================================================
   CALENDAR (Persian / Jalali, with holidays + occasions)
   =========================================================================== */
.calendar {
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 16px;
}
.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.calendar-title {
  font-weight: 700;
  font-size: 16px;
}
.calendar-nav {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--bg);
  border: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--ink);
}
.calendar-nav svg { width: 12px; height: 12px; stroke-width: 2; }
.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 8px;
}
.calendar-weekdays span {
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  padding: 4px 0;
}
.calendar-weekdays span.weekend {
  color: var(--rose);
}
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.calendar-day {
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  background: transparent;
  border: none;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}
.calendar-day:hover:not(.is-empty):not(.is-selected) {
  background: var(--bg);
}
.calendar-day.is-empty {
  cursor: default;
  pointer-events: none;
}
.calendar-day.is-holiday {
  color: var(--rose);
}
.calendar-day.is-today {
  font-weight: 800;
  border: 1.5px solid var(--accent);
}
.calendar-day.is-selected {
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  border: none;
}
.calendar-day.has-event::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 50%;
  margin-left: -2px;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--accent);
}
.calendar-day.is-holiday.has-event::after {
  background: var(--rose);
}
.calendar-day.is-selected.has-event::after {
  background: var(--on-ink);
}
.calendar-occasions {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
  display: grid;
  gap: 8px;
}
.calendar-occasion {
  display: flex;
  align-items: center;
  gap: 8px;
}
.calendar-occasion .day-num {
  font-weight: 700;
  color: var(--ink);
  min-width: 24px;
}
.calendar-occasion.holiday .day-num,
.calendar-occasion.holiday .label {
  color: var(--rose);
}

/* Date picker container */
.date-picker {
  position: relative;
}
.date-picker > .input {
  cursor: pointer;
  padding-left: 40px;
}
.date-picker > .calendar-icon {
  position: absolute;
  top: auto;
  bottom: 15px;
  left: 16px;
  pointer-events: none;
  color: var(--muted);
  width: 18px;
  height: 18px;
}
.date-picker > .calendar {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: 0;
  z-index: 10;
  box-shadow: var(--shadow-lg);
}
.date-picker.is-open > .calendar { display: block; }

/* ===========================================================================
   MODAL — full-screen modal with multi-step flow (e.g. create-group)
   =========================================================================== */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  z-index: 60;
  align-items: flex-end;
  justify-content: center;
}
.modal-overlay.is-open { display: flex; }
@media (min-width: 768px) {
  .modal-overlay.is-open { align-items: center; }
}
.modal-panel {
  background: var(--surface);
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  border-radius: 12px 12px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@media (min-width: 768px) {
  .modal-panel { border-radius: 12px; max-height: 84vh; }
}
.modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.modal-title {
  flex: 1;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}
.modal-close, .modal-back {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: var(--bg);
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--ink);
  flex-shrink: 0;
}
.modal-close svg, .modal-back svg { width: 16px; height: 16px; }
.modal-back {
  visibility: hidden;
}
.modal-overlay[data-step="2"] .modal-back,
.modal-overlay[data-step="3"] .modal-back {
  visibility: visible;
}
.modal-stepper {
  display: flex;
  align-items: center;
  padding: 16px 24px 8px;
  gap: 0;
}
.modal-stepper .step {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 12px;
  color: var(--muted);
  flex-shrink: 0;
}
.modal-stepper .step.done { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.modal-stepper .step.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 0 0 4px var(--accent-tint);
}
.modal-stepper .line { flex: 1; height: 2px; background: var(--line); margin: 0 4px; }
.modal-stepper .line.done { background: var(--accent); }

.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px 24px;
}
.modal-step { display: none; }
.modal-step.is-active { display: block; }
.modal-step h3 {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--ink);
}

.modal-footer {
  display: flex;
  gap: 8px;
  padding: 16px 24px;
  border-top: 1px solid var(--line);
}
.modal-footer .btn { flex: 1; }
.modal-footer .btn.primary { flex: 2; }

/* ---------- Avatar / Cover pickers ---------- */
.avatar-picker {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
@media (min-width: 480px) {
  .avatar-picker { grid-template-columns: repeat(8, 1fr); }
}
.avatar-option {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 999px;
  border: 3px solid transparent;
  cursor: pointer;
  padding: 0;
  position: relative;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 16px;
  color: #fff;
}
.avatar-option.is-selected {
  border-color: var(--ink);
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);
}
.avatar-option.is-selected::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: -2px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--accent);
  border: 2px solid var(--surface);
}

.cover-picker {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
@media (min-width: 480px) {
  .cover-picker { grid-template-columns: repeat(4, 1fr); }
}
.cover-option {
  height: 64px;
  border-radius: 12px;
  border: 3px solid transparent;
  cursor: pointer;
  position: relative;
  padding: 0;
  overflow: hidden;
}
.cover-option.is-selected {
  border-color: var(--accent);
}
.cover-option.is-selected::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 12px;
  background-repeat: no-repeat;
  background-position: center;
}

/* Group preview card */
.group-preview {
  background: var(--bg);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ---------- Member picker ---------- */
.member-search-bar {
  margin-bottom: 16px;
}
.member-list {
  display: grid;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
}
.member-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  border: 1.5px solid var(--line);
  background: var(--surface);
}
.member-item:hover { background: var(--bg); }
.member-item.is-selected {
  background: var(--accent-tint);
  border-color: var(--accent);
}
.member-item .name {
  flex: 1;
  font-weight: 600;
  font-size: 13px;
}
.member-item .meta {
  font-size: 12px;
  color: var(--muted);
}
.member-item .check {
  width: 20px;
  height: 20px;
  border-radius: 8px;
  border: 1.5px solid var(--line-strong);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.member-item.is-selected .check {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.member-item.is-selected .check svg { width: 12px; height: 12px; }
.member-item .check svg { display: none; }
.member-item.is-selected .check svg { display: block; }

.selected-summary {
  margin-top: 12px;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}

/* ---------- Mode switch (top of private page) ---------- */
.mode-switch {
  display: flex;
  background: var(--bg);
  border-radius: 999px;
  padding: 4px;
  gap: 4px;
  margin-bottom: 24px;
}
.mode-switch a {
  flex: 1;
  padding: 8px 16px;
  border-radius: 999px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
}
.mode-switch a.is-active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

/* ===========================================================================
   SEGMENT TOGGLE (event type: public / private)
   =========================================================================== */
.segment-toggle {
  display: flex;
  background: var(--bg);
  border-radius: 12px;
  padding: 4px;
  gap: 4px;
}
.segment-toggle .seg {
  flex: 1;
  padding: 8px 12px;
  border-radius: 8px;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}
.segment-toggle .seg.is-active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.segment-toggle .seg svg {
  width: 14px;
  height: 14px;
}

/* ===========================================================================
   AVATAR PICKER (for new group creation)
   =========================================================================== */
.avatar-picker {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
}
.avatar-picker .avatar-option {
  aspect-ratio: 1;
  border-radius: 999px;
  cursor: pointer;
  border: 3px solid transparent;
  position: relative;
  display: grid;
  place-items: center;
  font-weight: 700;
  color: #fff;
  font-size: 14px;
}
.avatar-picker .avatar-option.is-selected {
  border-color: var(--ink);
  box-shadow: 0 0 0 2px var(--surface);
}
.avatar-picker .avatar-option .check {
  position: absolute;
  bottom: -4px;
  left: -4px;
  width: 18px;
  height: 18px;
  background: var(--ink);
  border-radius: 999px;
  display: none;
  place-items: center;
  color: #fff;
}
.avatar-picker .avatar-option .check svg { width: 10px; height: 10px; stroke-width: 3; }
.avatar-picker .avatar-option.is-selected .check { display: grid; }

/* ===========================================================================
   COVER PICKER (banner gradient choices)
   =========================================================================== */
.cover-picker {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.cover-picker .cover-option {
  aspect-ratio: 5/2;
  border-radius: 8px;
  cursor: pointer;
  border: 3px solid transparent;
  position: relative;
  overflow: hidden;
}
.cover-picker .cover-option > div {
  width: 100%; height: 100%;
}
.cover-picker .cover-option.is-selected {
  border-color: var(--ink);
}
.cover-picker .cover-option .check {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 22px;
  height: 22px;
  background: var(--ink);
  border-radius: 999px;
  display: none;
  place-items: center;
  color: #fff;
  z-index: 1;
}
.cover-picker .cover-option .check svg { width: 12px; height: 12px; stroke-width: 3; }
.cover-picker .cover-option.is-selected .check { display: grid; }

/* ===========================================================================
   USER SEARCH LIST (member selection in group creation)
   =========================================================================== */
.user-list {
  max-height: 320px;
  overflow-y: auto;
  margin: 0 -8px;
  padding: 0 8px;
}
.user-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 8px;
  border-radius: 8px;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
}
.user-list-item:last-child { border-bottom: none; }
.user-list-item:hover { background: var(--bg); }
.user-list-item.is-selected { background: var(--accent-tint); }
.user-list-item .name {
  flex: 1;
  font-weight: 600;
  font-size: 14px;
  min-width: 0;
}
.user-list-item .username {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}
.user-list-item .checkbox {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1.5px solid var(--line-strong);
  display: grid;
  place-items: center;
  color: transparent;
  flex-shrink: 0;
}
.user-list-item.is-selected .checkbox {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.user-list-item .checkbox svg { width: 12px; height: 12px; stroke-width: 3; }

.selected-count-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--accent-tint);
  color: var(--accent-deep);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
}

/* ===========================================================================
   MODAL — generic centered modal (used for create-group wizard)
   =========================================================================== */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 60;
  align-items: flex-end;
  justify-content: center;
}
.modal-overlay.is-open { display: flex; }
@media (min-width: 768px) { .modal-overlay.is-open { align-items: center; } }
.modal-panel {
  background: var(--surface);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .modal-panel { border-radius: 12px; max-height: 80vh; }
}
.modal-header {
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.modal-title { font-size: 16px; font-weight: 700; }
.modal-close {
  width: 32px; height: 32px;
  border-radius: 999px;
  background: var(--bg);
  border: none;
  display: grid;
  place-items: center;
  color: var(--ink);
  cursor: pointer;
}
.modal-close svg { width: 16px; height: 16px; }
.modal-body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
}
.modal-footer {
  padding: 16px 24px;
  display: flex;
  gap: 8px;
  border-top: 1px solid var(--line);
}
.modal-footer .btn { flex: 1; }
.modal-footer .btn-ghost { flex: 0 0 auto; padding-inline: 16px; }

/* Step content panes inside modal */
.step-pane { display: none; }
.step-pane.is-active { display: block; }

/* Compact stepper inside modal */
.stepper-mini {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--line);
}
.stepper-mini .step {
  width: 28px; height: 28px;
  border-radius: 999px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.stepper-mini .step.done,
.stepper-mini .step.active {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
.stepper-mini .step.active { box-shadow: 0 0 0 4px var(--accent-tint); }
.stepper-mini .line {
  flex: 1;
  height: 2px;
  background: var(--line);
}
.stepper-mini .line.done { background: var(--accent); }
.stepper-mini .label {
  flex: 1;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}

/* ---------- Trigger button to open create-group modal ---------- */
.create-group-trigger {
  width: 100%;
  background: transparent;
  border: 1.5px dashed var(--line-strong);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font: inherit;
  color: var(--muted);
}
.create-group-trigger:hover {
  border-color: var(--accent);
  color: var(--accent-deep);
  background: var(--accent-tint);
}
.create-group-trigger .icon-wrap {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--bg);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.create-group-trigger .icon-wrap svg { width: 20px; height: 20px; stroke-width: 2.5; }
.create-group-trigger .text {
  flex: 1;
  text-align: right;
}
.create-group-trigger .text .ttl {
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
}
.create-group-trigger .text .sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

/* ===========================================================================
   HOST LIST — compact row layout on mobile
   On desktop: stays as the standard grid-cards (3 columns, full card)
   On mobile: collapses to a tight single-column list with avatar + meta + chevron
   =========================================================================== */
@media (max-width: 767px) {
  /* Convert grid-cards → vertical list inside hosts page only */
  .hosts-list {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
  }
  /* Tighten each host card */
  .hosts-list .card {
    flex-direction: row !important;
    align-items: center;
    padding: 12px !important;
    gap: 12px !important;
  }
  /* The avatar+name block at top of card → primary row */
  .hosts-list .card > div:first-child {
    flex: 1;
    min-width: 0;
    gap: 12px !important;
  }
  .hosts-list .card .avatar {
    width: 44px !important;
    height: 44px !important;
    font-size: 14px !important;
  }
  .hosts-list .card > div:first-child > div:nth-child(2) > div:first-child {
    font-size: 13px !important;
  }
  .hosts-list .card > div:first-child > div:nth-child(2) > div:nth-child(2) {
    font-size: 12px !important;
  }
  /* Hide the verbose bottom row (badges + stars + count) */
  .hosts-list .card > div:nth-child(2) {
    display: none !important;
  }
  /* Hide the bio paragraph in compact mode */
  .hosts-list .card > p {
    display: none !important;
  }
  /* Add chevron via a pseudo element on the card */
  .hosts-list .card::after {
    content: "";
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A7E84' stroke-width='2'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: center;
  }
}

/* ===========================================================================
   SORT DROPDOWN — inline, ghost-style trigger (small)
   =========================================================================== */
.sort-dropdown {
  position: relative;
}
.sort-dropdown .dropdown-trigger {
  padding: 4px 8px;
  border: none;
  background: none;
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  width: auto;
  gap: 4px;
}
.sort-dropdown.is-open .dropdown-trigger {
  background: var(--bg);
  box-shadow: none;
}
.sort-dropdown .dropdown-trigger:hover {
  background: var(--bg);
}
.sort-dropdown .dropdown-trigger .dd-value {
  flex: 0;
  white-space: nowrap;
}
.sort-dropdown .dropdown-trigger .dd-chevron {
  width: 12px;
  height: 12px;
}
.sort-dropdown .dropdown-menu {
  min-width: 180px;
  /* In RTL, dropdown opens to the left to avoid overflow */
  right: auto;
  left: 0;
}
.sort-dropdown .dropdown-item {
  padding: 8px 12px;
}

/* ===========================================================================
   GROUP PICKER (create-event-private) — unified square checkbox selector
   =========================================================================== */
.group-option {
  transition: opacity .15s;
}
/* Dim non-selected groups when any group is selected */
.group-picker.has-selection .group-option:not(.is-selected) {
  opacity: .5;
}
.group-picker.has-selection .group-option:not(.is-selected):hover {
  opacity: 1;
}

/* Square checkbox selector — same shape for selected and unselected */
.checkbox-tick {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1.5px solid var(--line-strong);
  background: var(--surface);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: transparent;
}
.checkbox-tick svg {
  width: 14px;
  height: 14px;
}
.checkbox-tick.is-checked {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

/* Minimal "create new group" trigger — pill-style ghost button */
.new-group-link {
  gap: 6px;
  padding: 8px 16px;
  font-size: 13px;
  color: var(--accent-deep);
  background: transparent;
  border: none;
}
.new-group-link svg {
  width: 16px;
  height: 16px;
  color: currentColor;
}
.new-group-link:hover {
  background: var(--accent-tint);
}

/* ===========================================================================
   FILE UPLOAD TILE (modal — replaces avatar/cover gallery picker)
   =========================================================================== */
.file-upload-tile {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-radius: 12px;
  border: 1.5px dashed var(--line-strong);
  background: var(--surface);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.file-upload-tile:hover {
  border-color: var(--accent);
  background: var(--accent-tint);
}
.file-upload-tile .upload-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--bg);
  color: var(--ink);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.file-upload-tile .upload-icon svg {
  width: 20px;
  height: 20px;
}
.file-upload-tile .upload-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.file-upload-tile .upload-text .ttl {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}
.file-upload-tile .upload-text .sub {
  font-size: 12px;
  color: var(--muted);
}

/* ===========================================================================
   DROPDOWN — simple variant (no icon, just label) — for time / age range pickers
   =========================================================================== */
.dropdown.dropdown-simple .dropdown-trigger {
  padding: 12px 16px;
  gap: 8px;
}
.dropdown.dropdown-simple .dropdown-item {
  padding: 10px 12px;
}
.dropdown.dropdown-simple .dropdown-item .dd-label {
  flex: 1;
}
.dropdown.dropdown-simple .dropdown-item .dd-sub {
  font-size: 12px;
  color: var(--muted);
}

/* ===========================================================================
   TAILWIND COMPATIBILITY — defaults normally provided by preflight
   ---------------------------------------------------------------------------
   We disabled Tailwind's preflight to avoid conflicting with existing
   project CSS. These two rules re-add only the parts utilities depend on:
     • Border reset so `border-t`, `border-2`, etc. produce visible lines
       without default-browser medium borders bleeding through.
     • Filter/backdrop-filter variable defaults so utilities like
       `blur-[40px]` and `grayscale-[50%]` actually produce a filter effect.
   Existing component CSS overrides these with higher specificity.
   =========================================================================== */
*, ::before, ::after {
  border-width: 0;
  border-style: solid;
  border-color: currentColor;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
}

/* ---------- Input with fixed prefix (social URLs) ---------- */
.input-prefix {
  display: flex; align-items: center;
  width: 100%;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.input-prefix:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-tint);
}
.input-prefix .pfx {
  flex-shrink: 0;
  padding: 12px 14px;
  font-size: 13px;
  color: var(--muted);
  background: var(--bg);
  border-left: 1px solid var(--line);
  white-space: nowrap;
  direction: ltr;
}
.input-prefix input {
  flex: 1; min-width: 0;
  border: 0; background: transparent;
  padding: 12px 14px;
  font: inherit; font-size: 14px;
  color: var(--ink);
  outline: none;
  direction: ltr; text-align: left;
}
.input-prefix input::placeholder { color: var(--muted-2); }
/* Same 16px floor as `.input`. It has to live here, after the 14px above:
   both selectors weigh the same, so only source order decides. */
@media (max-width: 767px) {
  .input-prefix input { font-size: 16px; }
}

/* ---------- Profile photos gallery (Telegram-style multi-photo) ---------- */
.pf-photos { }
.pf-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.pf-main {
  width: 84px; height: 84px; border-radius: var(--r-pill);
  display: grid; place-items: center; color: #fff; font-weight: 700;
  font-size: 28px; flex-shrink: 0; overflow: hidden;
}
.pf-main.is-empty {
  color: var(--muted-2); font-size: 22px;
  background: var(--bg); border: 2px solid var(--line);
}
.pf-head-meta { flex: 1; min-width: 0; }
.pf-head-meta .t { font-weight: 600; font-size: 16px; }
.pf-head-meta .s { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.7; }
.pf-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.pf-thumb {
  position: relative; width: 76px; height: 76px; border-radius: var(--r-md);
  display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 20px;
  overflow: visible;
}
.pf-thumb .pf-thumb-inner {
  position: absolute; inset: 0; border-radius: var(--r-md);
  display: grid; place-items: center; overflow: hidden;
}
.pf-thumb.is-main { box-shadow: 0 0 0 2.5px var(--accent); }
.pf-badge {
  position: absolute; bottom: 4px; left: 4px; z-index: 2;
  background: var(--accent); color: var(--on-accent); font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: var(--r-pill); line-height: 1.6;
}
.pf-del {
  position: absolute; top: -7px; right: -7px; z-index: 3;
  width: 22px; height: 22px; border-radius: var(--r-pill);
  background: var(--rose); color: var(--on-ink); border: 2px solid var(--surface);
  display: grid; place-items: center; cursor: pointer; padding: 0;
}
.pf-del svg { width: 11px; height: 11px; }
.pf-add {
  width: 76px; height: 76px; border-radius: var(--r-md);
  border: 2px dashed var(--line-strong); background: var(--bg);
  display: grid; place-items: center; color: var(--muted); cursor: pointer;
}
.pf-add svg { width: 22px; height: 22px; }
.pf-actions { margin-top: 16px; }

/* ---------- دکمه‌ی بازگشت به تنظیمات (کنار تیتر صفحات زیرمجموعه‌ی تنظیمات) ---------- */
.settings-back {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line);
  color: var(--ink);
  display: grid; place-items: center;
  text-decoration: none;
}
.settings-back:hover { background: var(--bg); }
.settings-back svg { width: 20px; height: 20px; }
/* نسخه‌ی روی هدرهای تیره/رنگی */
.settings-back--on-dark {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.18);
  color: #fff;
}
.settings-back--on-dark:hover { background: rgba(255,255,255,.18); }


/* ─── Host shell ────────────────────────────────────────────────────────
   The panel is a different application — its own routes, its own nav, its
   own job — and until now it did not look like one. Front and Host shipped
   byte-identical `:root` blocks and the same `.web-nav` / `.mobile-header`
   / `.tabbar` classes, so the only thing separating them was a 10px chip
   on the desktop brand, drawn in the same green the whole product uses for
   buttons. On a phone there was no signal at all.

   What differentiates is the CHROME, not the components. Cards, buttons,
   forms and tables are untouched, so the two apps stay one product family
   — the same room's furniture, a different room. The colour is `--ink`,
   already in the palette, so this introduces no new brand decision.
   ──────────────────────────────────────────────────────────────────── */

.web-nav,
.mobile-header { background: var(--chrome); }

.web-nav .brand,
.app-logo { color: #fff; }

/* --muted-2 is the decorative step and measured 3.4:1 on the chrome.
   Nav labels are read, so they take --muted (5.3:1). */
.web-nav .links a { color: var(--muted); }
.web-nav .links a:hover { color: #fff; }
.web-nav .links a.active { background: rgba(255, 255, 255, .12); color: #fff; }

/* The two chrome controls that assume a light ground and would otherwise
   render dark-on-dark: the «نمای کاربر» ghost button on desktop, and the
   same exit drawn as a plain icon button in the mobile header. The ghost
   uses an inset shadow rather than a border so its box does not change
   size against the accent button beside it. */
.web-nav .btn-ghost {
  background: transparent;
  color: rgba(255, 255, 255, .82);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
}
.web-nav .btn-ghost:hover {
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38);
}
.mobile-header .icon-btn-plain { color: var(--muted-2); }

/* The floating tab bar is chrome too, and leaving it white would have the
   phone say "panel" at the top of the screen and "public site" at the
   bottom. The create button keeps the accent: on a dark bar it becomes the
   one bold thing on the page instead of competing with nine others. */
.tabbar { background: var(--chrome); border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.tabbar .tab { color: var(--muted-2); }
.tabbar .tab.active { background: rgba(255, 255, 255, .14); color: #fff; }

/* «میزبان» stops being a chip and becomes half of a brand lockup, which is
   what it always was — a mode, not a badge. It is in the mobile header as
   well, which is the viewport that carried no signal whatsoever. */
.brand-lockup { display: inline-flex; align-items: center; gap: 9px; }
.brand-lockup .rule { width: 1px; height: 17px; background: rgba(255, 255, 255, .26); }
.brand-lockup .role {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  color: rgba(255, 255, 255, .82);
}