@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/vazirmatn/Vazirmatn-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/vazirmatn/Vazirmatn-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/vazirmatn/Vazirmatn-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/vazirmatn/Vazirmatn-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #fafafa;
  --surface: #ffffff;
  --surface-muted: #f4f4f5;
  --surface-strong: #eef0f3;
  --border: #dbdbdb;
  --text: #111111;
  --muted: #6a6d78;
  --accent: #0095f6;
  --accent-soft: rgba(0, 149, 246, 0.12);
  --danger: #ed4956;
  --shadow: 0 18px 40px rgba(17, 17, 17, 0.08);
  --radius: 20px;
  --header-height: 64px;
  --nav-height: 76px;
  --nav-float-offset: 0px;
}

:root.dark-theme {
  --bg: #09090b;
  --surface: #121215;
  --surface-muted: #18181c;
  --surface-strong: #1f2025;
  --border: #2a2b31;
  --text: #fafafa;
  --muted: #9b9dad;
  --accent: #4cb7ff;
  --accent-soft: rgba(76, 183, 255, 0.16);
  --danger: #ff6673;
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
}

/* Force readable form text in dark theme (some UAs override input colors). */
:root.dark-theme input[type="text"],
:root.dark-theme input[type="search"],
:root.dark-theme input[type="email"],
:root.dark-theme input[type="password"],
:root.dark-theme input[type="tel"],
:root.dark-theme input[type="url"],
:root.dark-theme input[type="number"],
:root.dark-theme textarea {
  color: var(--text);
  caret-color: var(--text);
}

:root.dark-theme input[type="text"]::placeholder,
:root.dark-theme input[type="search"]::placeholder,
:root.dark-theme input[type="email"]::placeholder,
:root.dark-theme input[type="password"]::placeholder,
:root.dark-theme input[type="tel"]::placeholder,
:root.dark-theme input[type="url"]::placeholder,
:root.dark-theme input[type="number"]::placeholder,
:root.dark-theme textarea::placeholder {
  color: var(--muted);
  opacity: 1;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  /* Better fullscreen behavior on mobile browsers where the URL bar expands/collapses. */
  min-height: 100svh;
  min-height: 100dvh;
  background:
    radial-gradient(900px 540px at 10% -10%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 62%),
    radial-gradient(760px 520px at 92% 8%, rgba(255, 183, 77, 0.10), transparent 58%),
    radial-gradient(920px 640px at 50% 110%, color-mix(in srgb, var(--text) 6%, transparent), transparent 62%),
    repeating-linear-gradient(
      135deg,
      color-mix(in srgb, var(--text) 2.6%, transparent) 0,
      color-mix(in srgb, var(--text) 2.6%, transparent) 1px,
      transparent 1px,
      transparent 14px
    ),
    var(--bg);
  color: var(--text);
  font-family: "Vazirmatn", Tahoma, "Segoe UI", system-ui, -apple-system, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

body.body--story {
  background: #000;
}

body.body--auth {
  direction: rtl;
}

img,
video {
  display: block;
  max-width: 100%;
}

button,
input,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

.mention {
  color: var(--accent);
  font-weight: 800;
  text-decoration: none;
}

.mention:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

summary {
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

.is-hidden {
  display: none !important;
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--header-height);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 84%, var(--accent));
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: blur(14px);
  isolation: isolate;
}

.app-header::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 55%),
    radial-gradient(circle at 80% 10%, color-mix(in srgb, var(--text) 6%, transparent), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 80%, transparent), transparent);
  opacity: 0.9;
}

.app-header__inner {
  width: min(100%, 1024px);
  height: 100%;
  margin: 0 auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}

.app-header__left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
}

.app-header__center {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-header__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.app-header__title {
  max-width: min(560px, 56vw);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -0.2px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  position: relative;
}

.app-header__title::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: -8px;
  width: min(120px, 42%);
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 92%, white 8%), transparent);
  opacity: 0.95;
  pointer-events: none;
}

.app-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.app-header--memorial {
  border-bottom-color: transparent;
}

.app-header--memorial::before {
  opacity: 0.65;
}

.brand {
  display: inline-flex;
  align-items: center;
}

.brand img,
.auth-card__brand img {
  height: 30px;
  width: auto;
}

.site-logo__img--light {
  display: inline-block !important;
}

.site-logo__img--dark {
  display: none !important;
}

:root.dark-theme .site-logo__img--light,
html.dark-theme .site-logo__img--light,
body.dark-theme .site-logo__img--light,
.dark-theme .site-logo__img--light {
  display: none !important;
}

:root.dark-theme .site-logo__img--dark,
html.dark-theme .site-logo__img--dark,
body.dark-theme .site-logo__img--dark,
.dark-theme .site-logo__img--dark {
  display: inline-block !important;
}

.app-main {
  padding: 16px 12px calc(var(--nav-height) + 42px);
}

.app-main {
  position: relative;
  isolation: isolate;
}

/* Chat page should feel like a full-height messaging surface (no outer padding). */
.app-main--chat {
  padding: 0;
}

.app-main--map {
  padding: 0 0 calc(var(--nav-height) + 12px);
}

.app-main--map::before {
  display: none;
}

body.body--memorial .app-main {
  isolation: auto;
}

body.body--memorial .app-main::before {
  display: none;
}

.app-main::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(680px 460px at 18% 12%, color-mix(in srgb, var(--accent-soft) 86%, transparent), transparent 68%),
    radial-gradient(620px 420px at 86% 16%, rgba(255, 183, 77, 0.10), transparent 62%),
    radial-gradient(860px 560px at 42% 70%, color-mix(in srgb, var(--surface) 55%, transparent), transparent 66%);
  opacity: 0.95;
}

.app-main > * {
  position: relative;
  z-index: 1;
}

.app-main--auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px 12px;
}

.page-shell {
  width: min(100%, 680px);
  margin: 0 auto;
}

.page-shell--home {
  width: min(100%, 860px);
}

@media (min-width: 1280px) {
  .page-shell--home {
    width: min(100%, 900px);
  }
}

.page-shell--wide {
  width: min(100%, 980px);
}

.page-shell--camp {
  width: min(100%, 1720px);
}

.page-shell--games {
  width: min(100%, 1440px);
}

.page-shell--map {
  width: 100%;
  max-width: none;
  margin: 0;
}

.page-shell--camp-manage {
  width: min(100%, 1920px);
}

.page-shell--fullscreen {
  width: 100%;
  max-width: none;
}

@media (min-width: 721px) {
  /* Chat uses fullscreen shell on mobile; keep desktop consistent with other pages. */
  .page-shell--fullscreen {
    width: min(100%, 980px);
    margin: 0 auto;
  }
}

.chat-shell__back svg {
  transform: scaleX(-1);
}

.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* Keep above most UI (cards/menus) but below modals. */
  z-index: 95;
  display: block;
  visibility: visible;
  padding: 0 10px env(safe-area-inset-bottom);
}

.bottom-nav__inner {
  width: min(100%, 760px);
  margin: 0 auto;
  padding: 7px 8px;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--border) 88%, var(--accent));
  border-bottom: none;
  border-radius: 18px 18px 0 0;
  box-shadow:
    0 -10px 26px rgba(0, 0, 0, 0.08),
    0 -3px 10px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(14px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 4px;
  position: relative;
  isolation: isolate;
}

.bottom-nav__item {
  --tab-accent: var(--accent);
  min-height: 50px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 2px;
  padding: 5px 4px;
  border-radius: 12px;
  color: color-mix(in srgb, var(--tab-accent) 62%, var(--muted) 38%);
  position: relative;
  z-index: 1;
  -webkit-tap-highlight-color: transparent;
}

.bottom-nav__item.is-active {
  color: var(--tab-accent);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--surface) 86%, var(--tab-accent) 14%),
      color-mix(in srgb, var(--surface-muted) 92%, var(--tab-accent) 8%)
    );
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--border) 86%, var(--tab-accent) 14%),
    0 10px 18px rgba(0, 0, 0, 0.05);
}

.bottom-nav__icon {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  position: relative;
  color: inherit;
}

.bottom-nav__label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  color: color-mix(in srgb, var(--muted) 84%, var(--text));
  opacity: 0.76;
  transform: none;
  height: auto;
  margin-top: 0;
  pointer-events: none;
}

.bottom-nav__item.is-active .bottom-nav__label {
  opacity: 1;
  color: var(--text);
}

.bottom-nav__indicator {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 0;
  width: 0;
  border-radius: 12px;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--surface) 84%, var(--indicator-accent, var(--accent)) 16%),
      color-mix(in srgb, var(--surface-muted) 92%, var(--indicator-accent, var(--accent)) 8%)
    );
  border: 1px solid color-mix(in srgb, var(--border) 86%, var(--indicator-accent, var(--accent)));
  box-shadow:
    0 10px 18px rgba(0, 0, 0, 0.06),
    0 4px 10px color-mix(in srgb, var(--indicator-accent, var(--accent)) 14%, transparent);
  transform: translateX(0);
  opacity: 0;
  z-index: 0;
  pointer-events: none;
}

.bottom-nav__item--home { --tab-accent: #0ea5e9; }
.bottom-nav__item--search { --tab-accent: #10b981; }
.bottom-nav__item--hashtags { --tab-accent: #f59e0b; }
.bottom-nav__item--online { --tab-accent: #22c55e; }
.bottom-nav__item--games { --tab-accent: #6366f1; }
.bottom-nav__item--ai { --tab-accent: #8b5cf6; }
.bottom-nav__item--add { --tab-accent: #f97316; }
.bottom-nav__item--shop { --tab-accent: #a855f7; }
.bottom-nav__item--discounts { --tab-accent: #ef4444; }
.bottom-nav__item--group-deals { --tab-accent: #ec4899; }
.bottom-nav__item--memorial { --tab-accent: #0f766e; }
.bottom-nav__item--dashboard { --tab-accent: #14b8a6; }
.bottom-nav__item--profile { --tab-accent: #64748b; }

.bottom-nav__item--online .bottom-nav__icon svg {
  transform-origin: center;
  animation: daba-online-pulse 1.6s ease-in-out infinite;
}

@keyframes daba-online-pulse {
  0%, 100% { transform: scale(1); filter: saturate(1); }
  50% { transform: scale(1.07); filter: saturate(1.2); }
}

.bottom-nav__icon--avatar {
  width: 28px;
  height: 28px;
}

.bottom-nav__item svg,
.icon-button svg,
.chip-button svg,
.comment-badge svg,
.add-sheet__icon svg,
.profile-card__details svg,
.video-frame__play svg {
  width: 22px;
  height: 22px;
}

.bottom-nav__avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid transparent;
}

.bottom-nav__item.is-active .bottom-nav__avatar {
  border-color: var(--tab-accent);
}

[hidden] {
  display: none !important;
}

.nav-badge {
  position: absolute;
  top: -7px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 10px 18px rgba(239, 68, 68, 0.28);
  border: 2px solid var(--surface);
}

.online-panel {
  overflow: hidden;
}

.online-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--border);
}

.online-panel__title-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.online-panel__title-row h1 {
  margin: 0;
  font-size: 15px;
  letter-spacing: -0.3px;
}

.online-panel__title-icon {
  width: 30px;
  height: 30px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent-soft) 70%, transparent);
  color: color-mix(in srgb, var(--accent) 75%, var(--text));
}

.online-panel__hint {
  font-size: 12px;
  white-space: nowrap;
}

.online-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 360px;
  width: 100%;
}

.online-search__input {
  flex: 1;
  min-width: 160px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 70%, var(--surface-muted));
  color: var(--text);
  outline: none;
}

.online-search__input::placeholder {
  color: var(--muted);
}

.online-search__input:focus {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.online-search__btn.icon-button--small {
  width: 38px;
  height: 38px;
  border-radius: 14px;
}

.online-more-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px 14px;
}

@media (max-width: 520px) {
  .online-panel__head {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .online-search {
    max-width: none;
  }
}

.online-empty {
  padding: 18px 14px;
  color: var(--muted);
}

.online-list {
  display: grid;
}

.online-user {
  display: grid;
  grid-template-columns: 44px 1fr 20px;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
}

.online-user:last-child {
  border-bottom: none;
}

.online-user:hover {
  background: color-mix(in srgb, var(--surface-muted) 65%, transparent);
}

.online-user__avatar {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-muted);
}

.online-user__avatar--story.story-chip__avatar {
  width: 44px;
  height: 44px;
  padding: 2px;
  border-radius: 50%;
  border: none;
  overflow: visible;
}

.online-user__avatar--story.story-chip__avatar .story-chip__image {
  border-radius: 50%;
}

.online-user__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.online-user__top {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.online-user__name {
  font-size: 13px;
  line-height: 1.2;
}

.online-user__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.16);
}

.online-user__dot--green {
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.16);
}

.online-user__dot--orange {
  background: #f97316;
  box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.18);
}

.online-user__dot--yellow {
  background: #facc15;
  box-shadow: 0 0 0 4px rgba(250, 204, 21, 0.22);
}

.online-user__dot--gray {
  background: color-mix(in srgb, var(--muted) 65%, var(--text));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--muted) 22%, transparent);
}

.online-user__meta {
  margin-top: 3px;
  font-size: 12px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.online-user__chev {
  opacity: 0.55;
  display: grid;
  place-items: center;
}

.online-infinite__status {
  padding: 10px 14px 16px;
}

.online-more-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 14px 14px;
}

.groups-panel {
  overflow: hidden;
}

.groups-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--border);
}

.groups-panel__actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.groups-panel__request-btn {
  border-radius: 999px;
  border: 0;
  color: #fff;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.26), transparent 58%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 92%, #0b1220), color-mix(in srgb, var(--accent) 68%, #39b2ff));
  box-shadow: 0 16px 30px rgba(var(--accent-rgb), 0.18);
  gap: 8px;
}

.groups-panel__request-btn:hover {
  transform: translateY(-1px);
}

.groups-panel__request-btn[disabled] {
  cursor: not-allowed;
  opacity: 0.7;
  transform: none;
  box-shadow: none;
}

.groups-panel__title-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.groups-panel__title-row h1 {
  margin: 0;
  font-size: 15px;
  letter-spacing: -0.3px;
}

.groups-panel__title-icon {
  width: 30px;
  height: 30px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent-soft) 70%, transparent);
  color: color-mix(in srgb, var(--accent) 75%, var(--text));
}

.groups-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 360px;
  width: 100%;
}

.groups-search__input {
  flex: 1;
  min-width: 160px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 70%, var(--surface-muted));
  color: var(--text);
  outline: none;
}

.groups-search__input::placeholder {
  color: var(--muted);
}

.groups-search__input:focus {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.groups-search__btn.icon-button--small {
  width: 38px;
  height: 38px;
  border-radius: 14px;
}

.groups-empty {
  padding: 18px 14px;
  color: var(--muted);
}

.groups-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 14px;
}

@media (min-width: 900px) {
  .groups-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 16px;
  }
}

@media (max-width: 520px) {
  .groups-panel__head {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .groups-search {
    max-width: none;
  }

  .groups-panel__actions {
    width: 100%;
    justify-content: space-between;
  }
}

.group-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 12px;
  padding: 18px;
  border-radius: 28px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  background:
    radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--accent-soft) 70%, transparent), transparent 44%),
    radial-gradient(circle at 92% 18%, rgba(255, 255, 255, 0.10), transparent 48%),
    color-mix(in srgb, var(--surface) 80%, var(--surface-muted));
  text-decoration: none;
  color: inherit;
  min-width: 0;
  min-height: 236px;
  overflow: hidden;
  transition: transform 140ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.group-card__privacy-mark {
  position: absolute;
  inset-inline-start: 10px;
  inset-block-start: 10px;
  width: 116px;
  height: 116px;
  display: grid;
  place-items: center;
  border-radius: 46px;
  background:
    radial-gradient(circle at 35% 30%, rgba(var(--accent-rgb), 0.16), transparent 62%),
    radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0.14), transparent 60%);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  opacity: 0.32;
  pointer-events: none;
  z-index: 0;
  transform: rotate(-10deg);
}

.group-card__privacy-mark svg {
  width: 56px;
  height: 56px;
  opacity: 0.45;
}

.group-card__privacy-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  margin-inline-start: 8px;
  font-size: 11px;
  font-weight: 900;
  background: color-mix(in srgb, var(--accent-soft) 60%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  color: color-mix(in srgb, var(--text) 86%, var(--accent));
  vertical-align: middle;
  white-space: nowrap;
}

.group-card__privacy-badge svg {
  width: 14px;
  height: 14px;
}

.group-card--private .group-card__head,
.group-card--private .group-card__bio,
.group-card--private .group-card__footer {
  position: relative;
  z-index: 1;
}

.group-card:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.06);
}

.group-card:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.group-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.group-card__avatar {
  width: 68px;
  height: 68px;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-muted);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);
  flex: 0 0 auto;
}

.group-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.group-card__head-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
}

.group-card__title {
  font-weight: 900;
  font-size: 15px;
  line-height: 1.35;
  letter-spacing: -0.2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.group-card__handle {
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.group-card__bio {
  font-size: 13px;
  line-height: 1.8;
  color: color-mix(in srgb, var(--text) 88%, var(--muted));
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 66px;
}

.group-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding-top: 8px;
  border-top: 1px dashed color-mix(in srgb, var(--border) 78%, transparent);
}

.group-card__manager {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}

.group-card__manager-avatar {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-muted);
  flex: 0 0 auto;
}

.group-card__manager-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.group-card__manager-text {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.group-card__pill {
  height: 30px;
  min-width: 56px;
  padding: 0 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 900;
  color: color-mix(in srgb, var(--accent) 75%, var(--text));
  background: color-mix(in srgb, var(--accent-soft) 70%, transparent);
  flex: 0 0 auto;
}

.group-card__pill--posts {
  background: color-mix(in srgb, var(--surface) 65%, var(--surface-muted));
  color: color-mix(in srgb, var(--text) 80%, var(--accent));
}

.group-card__pill-icon svg {
  width: 16px;
  height: 16px;
  opacity: 0.9;
}

@media (max-width: 520px) {
  .group-card {
    min-height: 220px;
  }
}

.group-profile__head {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) max-content;
  gap: 16px;
  padding: 16px;
  align-items: center;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  background:
    radial-gradient(circle at 18% 20%, color-mix(in srgb, var(--accent-soft) 55%, transparent), transparent 58%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, white 4%), var(--surface));
}

@media (max-width: 680px) {
  .group-profile__head {
    grid-template-columns: 72px 1fr;
    align-items: start;
  }

  .group-profile__actions {
    grid-column: 1 / -1;
  }
}

.group-profile__info {
  min-width: 0;
}

.group-profile__avatar {
  width: 84px;
  height: 84px;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-muted);
}

.group-profile__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.group-profile__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 12px;
}

.group-profile__title {
  margin: 0;
  font-size: 18px;
  letter-spacing: -0.4px;
  line-height: 1.25;
  font-weight: 900;
}

.group-profile__handle {
  font-size: 12.5px;
  color: var(--muted);
}

.group-profile__actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-self: end;
  justify-content: flex-end;
}

.group-profile__actions form {
  margin: 0;
}

.group-profile__actions .button {
  white-space: nowrap;
  height: 36px;
  padding: 0 12px;
  border-radius: 14px;
  font-size: 12.5px;
  font-weight: 900;
  gap: 8px;
}

.group-follow-form {
  margin: 0;
}

.group-profile__bio--wide,
.group-profile__manager-card--wide {
  grid-column: 1 / -1;
}

.group-profile__bio--wide {
  margin-top: 0;
}

.group-profile__manager-card--wide {
  margin-top: 0;
}

@media (max-width: 680px) {
  .group-profile__actions {
    justify-content: flex-start;
    align-items: center;
  }
}

.group-profile__privacy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  background: color-mix(in srgb, var(--surface) 76%, var(--surface-muted));
  color: var(--text);
}

.group-profile__privacy svg {
  width: 16px;
  height: 16px;
}

.group-profile__manager {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.user-line--compact .user-line__avatar {
  width: 32px;
  height: 32px;
  border-radius: 12px;
}

.user-line--compact .user-line__text strong {
  font-size: 12px;
}

.user-line--compact .user-line__text small {
  font-size: 11px;
}

.group-profile__bio {
  margin-top: 10px;
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 70%, var(--surface-muted));
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: 18px;
  padding: 10px 12px;
  line-height: 1.6;
}

.group-profile__stats {
  margin-top: 10px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.group-profile__manager-card {
  margin-top: 12px;
  padding: 12px;
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, var(--accent) 22%);
  background:
    radial-gradient(circle at 16% 18%, color-mix(in srgb, var(--accent-soft) 70%, transparent), transparent 52%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, white 8%), var(--surface));
  box-shadow: 0 14px 34px rgba(17, 17, 17, 0.06);
}

.group-profile__manager-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.group-profile__manager-head strong {
  font-size: 13px;
}

.group-profile__manager-head .muted {
  font-size: 12px;
}

.group-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  background: color-mix(in srgb, var(--surface) 70%, var(--surface-muted));
}

.group-stat strong {
  font-weight: 900;
}

.group-stat small {
  color: var(--muted);
}

.group-profile__posts {
  margin-top: 12px;
}

.group-posts__status {
  padding: 12px 14px 20px;
}

.group-post-list {
  display: grid;
  gap: 10px;
}

.group-post-row {
  display: flex;
  flex-direction: row-reverse;
  gap: 12px;
  align-items: stretch;
  padding: 10px 12px;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  background: color-mix(in srgb, var(--surface) 88%, var(--surface-muted));
  text-decoration: none;
  color: inherit;
  transition: transform 120ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.group-post-row:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--border) 55%, var(--accent) 45%);
  box-shadow: 0 16px 36px rgba(17, 17, 17, 0.08);
}

.group-post-row__thumb {
  position: relative;
  flex: 0 0 104px;
  width: 104px;
  height: 86px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--surface-muted);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  display: grid;
  place-items: stretch;
}

.group-post-row__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.group-post-row__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.22));
  color: #fff;
}

.group-post-row__play svg {
  width: 18px;
  height: 18px;
}

.group-post-row__text-thumb {
  width: 100%;
  height: 100%;
  display: grid;
  gap: 6px;
  padding: 10px;
  align-content: start;
}

.group-post-row__text-thumb-icon svg {
  width: 16px;
  height: 16px;
}

.group-post-row__text-thumb-body {
  font-size: 12px;
  line-height: 1.45;
  font-weight: 800;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.group-post-row__main {
  min-width: 0;
  flex: 1 1 auto;
  display: grid;
  gap: 8px;
  align-content: start;
}

.group-post-row__cap {
  font-size: 13px;
  line-height: 1.7;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.group-post-row__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.group-post-row__dot {
  opacity: 0.7;
}

.group-post-row__replies {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  background: color-mix(in srgb, var(--surface) 70%, var(--surface-muted));
  color: var(--text);
}

.group-post-row__replies svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 520px) {
  .group-post-row__thumb {
    flex-basis: 92px;
    width: 92px;
    height: 78px;
    border-radius: 16px;
  }
}

.group-shell {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: start;
}

.group-locked {
  margin-top: 12px;
  padding: 14px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border-radius: 26px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, var(--accent) 22%);
  background:
    radial-gradient(circle at 14% 18%, color-mix(in srgb, var(--accent-soft) 80%, transparent), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 90%, white 10%), var(--surface));
  box-shadow: 0 14px 34px rgba(17, 17, 17, 0.06);
}

.group-locked__icon {
  width: 42px;
  height: 42px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent-soft) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  flex: 0 0 auto;
}

.group-locked__icon svg {
  width: 20px;
  height: 20px;
}

.group-locked__body strong {
  display: block;
  font-size: 13px;
}

@media (min-width: 980px) {
  .group-shell {
    grid-template-columns: 320px 1fr;
    gap: 14px;
  }

  .group-sidebar {
    position: sticky;
    top: 96px;
  }
}

.group-sidebar {
  padding: 14px;
  border-radius: 26px;
}

.group-sidebar__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.group-members {
  margin-top: 12px;
  display: grid;
  gap: 8px;
  max-height: min(560px, calc(100dvh - 180px));
  overflow: auto;
  padding-inline-end: 4px;
}

.group-members__more-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.group-members__status {
  font-size: 12px;
}

.group-member {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  background: color-mix(in srgb, var(--surface) 82%, var(--surface-muted));
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

.group-member:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}

.group-member__avatar {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-muted);
  border: 1px solid var(--border);
}

.group-member__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.group-member__text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.group-member__text strong {
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.group-member__text small {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.group-member__badge {
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  background: color-mix(in srgb, var(--accent-soft) 70%, transparent);
  color: color-mix(in srgb, var(--accent) 80%, var(--text));
}

.group-member.is-manager {
  background:
    radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--accent-soft) 80%, transparent), transparent 60%),
    color-mix(in srgb, var(--surface) 84%, var(--surface-muted));
}

.group-main {
  min-width: 0;
}

.group-post-grid {
  gap: 14px;
}

.group-edit-panel__identity {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 2px 0 12px;
}

.group-edit-panel__identity small {
  color: var(--muted);
}

.group-edit__privacy-check {
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  background:
    radial-gradient(circle at 12% 22%, color-mix(in srgb, var(--accent-soft) 70%, transparent), transparent 58%),
    color-mix(in srgb, var(--surface) 80%, var(--surface-muted));
}

.group-edit__privacy-check span {
  font-size: 13px;
  line-height: 1.7;
  color: color-mix(in srgb, var(--text) 92%, var(--muted));
}

.group-edit__privacy-check input[type="checkbox"] {
  width: 20px;
  height: 20px;
}

.section-card,
.post-card,
.detail-card,
.profile-card,
.auth-card,
.add-sheet,
.post-preview,
.chat-shell,
.product-preview-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.discounts-hero {
  position: relative;
  overflow: hidden;
  padding: 20px;
  display: grid;
  gap: 14px;
  border-radius: 30px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, var(--accent));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 88%, white 12%), var(--surface)),
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 10%, transparent), transparent 40%);
}

.discounts-hero::before {
  content: "";
  position: absolute;
  inset: -10px -10px auto;
  height: 220px;
  border-radius: 32px;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 20%, transparent), transparent 46%),
    radial-gradient(circle at top left, color-mix(in srgb, var(--text) 6%, transparent), transparent 52%);
  pointer-events: none;
}

.discounts-hero > * {
  position: relative;
  z-index: 1;
}

.discounts-hero__headline {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.discounts-hero__icon {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--surface-muted) 80%, white 20%);
  border: 1px solid color-mix(in srgb, var(--border) 70%, var(--accent));
  color: var(--accent);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.06);
  flex: 0 0 auto;
}

.discounts-hero__copy {
  display: grid;
  gap: 6px;
  max-width: 720px;
}

.discounts-hero .section-title {
  margin-bottom: 0;
}

.discounts-hero .section-title strong {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.2px;
}

.discounts-hero .section-title span {
  font-size: 12.5px;
  line-height: 1.8;
}

/* Notifications */
.notifications-page {
  display: grid;
  gap: 14px;
}

.notifications-hero {
  padding: 18px;
}

.notifications-list {
  overflow: hidden;
}

.notifications-items {
  display: grid;
}

.notification-item {
  display: grid;
  grid-template-columns: 44px 1fr 22px;
  gap: 12px;
  padding: 14px 14px;
  border-bottom: 1px solid var(--border);
  color: inherit;
  align-items: start;
  transition: background 180ms ease;
}

.notification-item__main {
  grid-column: 2 / 4;
  display: grid;
  grid-template-columns: 1fr 22px;
  gap: 12px;
  align-items: start;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

.notification-item__avatar-link {
  display: inline-block;
  border-radius: 50%;
}

.notification-item:last-child {
  border-bottom: 0;
}

.notification-item:hover {
  background: color-mix(in srgb, var(--surface) 84%, var(--text) 16%);
}

.notification-item.is-unread {
  background: color-mix(in srgb, var(--surface) 92%, #0ea5e9 8%);
}

.notification-item__avatar img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
}

.notification-item__content {
  display: grid;
  gap: 6px;
}

.notification-item__title {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  line-height: 1.35;
}

.notification-item__title strong {
  font-weight: 900;
}

.notification-item__body {
  font-size: 12px;
}

.notification-item__time {
  font-size: 11px;
}

.push-optin {
  overflow: hidden;
}

.push-optin__inner {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background:
    radial-gradient(1200px 420px at 15% 10%, color-mix(in srgb, var(--accent-soft) 65%, transparent), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 84%, var(--surface-muted)), var(--surface));
}

.push-optin__icon {
  width: 40px;
  height: 40px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent-soft) 80%, transparent);
  color: color-mix(in srgb, var(--accent) 82%, var(--text));
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
}

.push-optin__text {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.push-optin__text strong {
  font-size: 13px;
  letter-spacing: -0.2px;
}

.push-optin__text span {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.8;
}

.push-optin__actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}

@media (max-width: 520px) {
  .push-optin__inner {
    grid-template-columns: 40px 1fr;
    grid-template-rows: auto auto;
    align-items: start;
  }

  .push-optin__actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

.notification-item__chev {
  display: grid;
  place-items: center;
  opacity: 0.7;
}

.discounts-controls {
  display: grid;
  grid-template-columns: 1fr 180px auto;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
  padding: 10px;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--border) 86%, var(--accent));
  background: color-mix(in srgb, var(--surface) 86%, white 14%);
}

.discounts-controls .search-box {
  margin: 0;
  padding: 10px 12px;
  border-radius: 18px;
}

.discounts-controls .search-box svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

.discounts-controls .field {
  gap: 6px;
}

.discounts-controls .field > span {
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
}

.discounts-controls .field select {
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 16px;
}

.discounts-controls .button {
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 16px;
}

@media (max-width: 760px) {
  .discounts-controls {
    grid-template-columns: 1fr;
  }

  .discounts-controls .button {
    width: 100%;
  }
}

.discounts-hero__chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 2px;
}

.discounts-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 14px;
}

.discount-card {
  display: grid;
  grid-template-rows: auto 1fr;
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  background: color-mix(in srgb, var(--surface) 95%, transparent);
  box-shadow: var(--shadow);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
  color: inherit;
}

.discount-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.1);
}

.discount-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--surface-muted);
}

.discount-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.discount-card__badge {
  position: absolute;
  left: 10px;
  top: 10px;
  background: color-mix(in srgb, var(--accent) 88%, white 12%);
  color: #fff;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.14);
}

.discount-card__body {
  padding: 12px 12px 14px;
  display: grid;
  gap: 8px;
}

.discount-card__title {
  font-size: 13px;
  line-height: 1.55;
}

.discount-card__provider {
  font-size: 12px;
}

.discount-card__meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--muted);
}

.discount-card__rating {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 2px;
}

.discount-stars {
  display: inline-flex;
  gap: 2px;
}

.discount-star svg {
  width: 16px;
  height: 16px;
}

.discount-detail__card {
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(260px, 380px) minmax(0, 1fr);
  gap: 20px;
}

.discount-detail__media {
  position: relative;
  background: var(--surface-muted);
}

.discount-detail__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  min-height: 260px;
}

.discount-badge {
  position: absolute;
  left: 14px;
  top: 14px;
  background: color-mix(in srgb, var(--accent) 90%, white 10%);
  color: #fff;
  padding: 10px 12px;
  border-radius: 16px;
  font-weight: 1000;
  font-size: 14px;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.18);
}

.discount-detail__body {
  padding: 18px 18px 20px 0;
}

.discount-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 12px 0 6px;
}

.discount-section {
  margin-top: 14px;
}

.discount-section h3 {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: -0.2px;
}

.discount-rich {
  line-height: 1.9;
  font-size: 13px;
}

.discount-rating {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px dashed var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-muted) 55%, transparent);
}

.discount-rating__summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.discount-rating__summary strong {
  font-size: 18px;
}

.discount-rating__stars {
  display: inline-flex;
  gap: 6px;
}

.star-button {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  display: grid;
  place-items: center;
  transition: transform 120ms ease, border-color 120ms ease, color 120ms ease;
}

.star-button svg {
  width: 22px;
  height: 22px;
}

.star-button svg path {
  fill: none;
}

.star-button.is-active {
  color: color-mix(in srgb, var(--accent) 85%, #f59e0b);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
}

.star-button.is-active svg path {
  fill: currentColor;
  stroke: currentColor;
}

.star-button:hover {
  transform: translateY(-1px);
}

@media (max-width: 860px) {
  .discounts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .discount-detail__card {
    grid-template-columns: 1fr;
  }
  .discount-detail__body {
    padding: 0 16px 16px;
  }
  .discounts-controls {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .discounts-grid {
    grid-template-columns: 1fr;
  }
}

.product-detail-card {
  display: grid;
  grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.product-page {
  gap: 20px;
}

.product-hero {
  position: relative;
}

.product-hero::before {
  content: "";
  position: absolute;
  inset: -10px 0 auto;
  height: 220px;
  border-radius: 30px;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 18%, transparent), transparent 44%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface-muted) 72%, white 28%), transparent 72%);
  pointer-events: none;
}

.product-detail-card--showcase {
  position: relative;
  z-index: 1;
  padding: 22px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, var(--accent));
  border-radius: 30px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 88%, white 12%), var(--surface)),
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 10%, transparent), transparent 36%);
  box-shadow: 0 26px 60px rgba(17, 17, 17, 0.08);
}

.product-detail-card__media {
  position: sticky;
  top: calc(var(--header-height) + 20px);
}

.product-detail-card__summary {
  min-height: 100%;
}

.product-gallery-shell {
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.08), transparent 35%),
    #050505;
  box-shadow: 0 24px 46px rgba(0, 0, 0, 0.22);
}

.product-detail-card--preview {
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  gap: 18px;
}

.product-detail-card--preview .product-detail-card__media {
  position: static;
  top: auto;
}

.product-detail-card__header {
  align-items: start;
}

.product-detail-card__header--stacked {
  display: grid;
  gap: 14px;
}

.product-detail-card__zoom {
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  display: block;
  cursor: zoom-in;
}

.product-detail-card__zoom--static {
  cursor: default;
}

.product-detail-card__zoom img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.product-summary-card {
  padding: 24px;
  display: grid;
  gap: 18px;
  border-radius: 26px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 84%, white 16%), var(--surface)),
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 8%, transparent), transparent 40%);
}

.product-summary-card__top {
  display: grid;
  gap: 16px;
}

.product-summary-card__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.product-summary-card__state,
.product-summary-card__category {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}

.product-summary-card__state.is-available {
  color: #166534;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.18);
}

.product-summary-card__state.is-unavailable {
  color: #991b1b;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.18);
}

.product-summary-card__category {
  color: var(--muted);
  background: color-mix(in srgb, var(--surface-muted) 78%, white 22%);
  border: 1px solid var(--border);
}

.product-summary-card__badge {
  width: fit-content;
}

.product-summary-card h1 {
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.4;
}

.product-summary-card p {
  font-size: 14px;
  line-height: 2;
}

.product-summary-card__price {
  padding: 16px 18px;
  border-radius: 22px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-muted) 82%, white 18%), var(--surface));
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
}

.product-specs {
  display: grid;
  gap: 12px;
  margin: 18px 0;
}

.product-specs--showcase {
  margin: 0;
}

.product-specs__item {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--surface-muted), color-mix(in srgb, var(--surface) 82%, white 18%));
}

.product-specs__item dt {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.product-specs__item dd {
  margin: 0;
  font-weight: 600;
}

.store-callout--feature {
  padding: 14px;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-muted) 82%, white 18%), transparent);
}

.product-qa-card {
  padding: 22px;
  border-radius: 26px;
}

.product-qa-card__header {
  margin-bottom: 16px;
}

.product-qa-card__empty {
  margin-top: 4px;
}

.qa-list--product {
  gap: 14px;
}

.qa-card--product {
  padding: 16px 18px;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-muted) 82%, white 18%), transparent),
    var(--surface);
}

.qa-card--product p {
  line-height: 1.95;
}

.composer-bar--product-question {
  padding: 12px 14px;
  border-radius: 22px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 88%, white 12%), var(--surface)),
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 8%, transparent), transparent 36%);
  border: 1px solid color-mix(in srgb, var(--border) 82%, var(--accent));
  box-shadow: 0 18px 34px rgba(17, 17, 17, 0.08);
}

.composer-bar--product-question input {
  min-height: 48px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-muted) 80%, white 20%);
}

.product-page {
  --product-accent: #f97316;
  --product-accent-soft: rgba(249, 115, 22, 0.12);
  --product-accent-strong: #ef4444;
  --product-gold: #fbbf24;
  gap: 24px;
}

.product-hero::before {
  inset: -18px 0 auto;
  height: 260px;
  border-radius: 36px;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--product-accent) 24%, transparent), transparent 42%),
    radial-gradient(circle at top left, color-mix(in srgb, var(--product-accent-strong) 14%, transparent), transparent 36%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface-muted) 68%, #fff3e8 32%), transparent 74%);
}

.product-detail-card--showcase {
  padding: 24px;
  border-color: color-mix(in srgb, var(--border) 76%, var(--product-accent) 24%);
  border-radius: 34px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 88%, #fff6ee 12%), var(--surface)),
    radial-gradient(circle at top right, color-mix(in srgb, var(--product-accent) 10%, transparent), transparent 34%);
  box-shadow: 0 30px 60px rgba(17, 17, 17, 0.09);
}

.product-detail-card {
  gap: 28px;
  grid-template-columns: minmax(300px, 420px) minmax(0, 1fr);
}

.product-gallery-shell {
  position: relative;
  border-radius: 30px;
  border: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.1), transparent 34%),
    linear-gradient(180deg, #17120f, #050505);
  box-shadow: 0 28px 52px rgba(0, 0, 0, 0.24);
}

.product-gallery-shell__top {
  position: absolute;
  inset: 16px 16px auto;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  pointer-events: none;
}

.product-gallery-shell__badge {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(12, 12, 12, 0.62);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  backdrop-filter: blur(12px);
}

.product-gallery-shell__badge svg {
  width: 15px;
  height: 15px;
}

.product-gallery-shell__badge--soft {
  background: rgba(249, 115, 22, 0.2);
}

.product-summary-card {
  padding: 28px;
  gap: 22px;
  border-radius: 30px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 82%, #fff8f2 18%), var(--surface)),
    radial-gradient(circle at top right, color-mix(in srgb, var(--product-accent) 9%, transparent), transparent 42%);
}

.product-store-ribbon {
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  border-radius: 22px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-muted) 78%, white 22%), transparent),
    color-mix(in srgb, var(--surface) 92%, #fff7ed 8%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.product-store-ribbon__profile {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.product-store-ribbon__avatar {
  width: 54px;
  height: 54px;
  padding: 2px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: linear-gradient(135deg, var(--product-gold), var(--product-accent), var(--product-accent-strong));
  box-shadow: 0 12px 22px rgba(249, 115, 22, 0.22);
}

.product-store-ribbon__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--surface);
}

.product-store-ribbon__text {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.product-store-ribbon__text strong {
  font-size: 15px;
}

.product-store-ribbon__text small {
  color: var(--muted);
  font-size: 12px;
}

.product-store-ribbon__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.product-store-ribbon__action {
  border: 1px solid color-mix(in srgb, var(--border) 82%, var(--product-accent) 18%);
  background: color-mix(in srgb, var(--surface-muted) 72%, white 28%);
  color: color-mix(in srgb, var(--product-accent) 80%, var(--text) 20%);
}

.product-store-ribbon__action:hover {
  background: color-mix(in srgb, var(--product-accent-soft) 60%, var(--surface) 40%);
  color: var(--product-accent);
}

.product-summary-card__eyebrow {
  gap: 10px;
}

.product-summary-card__state,
.product-summary-card__category {
  min-height: 36px;
  padding-inline: 14px;
  font-size: 12px;
}

.product-summary-card__state.is-available {
  color: #166534;
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.18);
}

.product-summary-card__category {
  background: color-mix(in srgb, #fff7ed 58%, var(--surface-muted) 42%);
  border-color: color-mix(in srgb, var(--border) 76%, var(--product-gold) 24%);
}

.product-summary-card__headline {
  display: grid;
  gap: 12px;
}

.product-summary-card__kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: color-mix(in srgb, var(--product-accent) 78%, var(--text) 22%);
  font-size: 12px;
  font-weight: 800;
}

.product-summary-card__kicker-icon {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display: inline-grid;
  place-items: center;
  background: color-mix(in srgb, var(--product-accent-soft) 78%, white 22%);
  color: var(--product-accent);
}

.product-summary-card__kicker-icon svg {
  width: 15px;
  height: 15px;
}

.product-summary-card h1 {
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.35;
  letter-spacing: -0.02em;
}

.product-summary-card p {
  color: color-mix(in srgb, var(--text) 82%, var(--muted) 18%);
  font-size: 14px;
  line-height: 2.05;
}

.product-summary-card__badge {
  padding: 8px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--product-accent-soft) 74%, white 26%), rgba(255, 255, 255, 0.78));
  color: color-mix(in srgb, var(--product-accent) 84%, var(--text) 16%);
}

.product-summary-card__price-shell {
  display: grid;
  gap: 10px;
}

.product-summary-card__price {
  margin: 0;
  padding: 18px 20px;
  border-radius: 24px;
  border-color: color-mix(in srgb, var(--border) 80%, var(--product-accent) 20%);
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff7ed 62%, var(--surface) 38%), var(--surface)),
    radial-gradient(circle at top right, color-mix(in srgb, var(--product-accent) 8%, transparent), transparent 40%);
}

.product-summary-card__price .price-row__discount {
  font-size: clamp(22px, 3vw, 30px);
  color: color-mix(in srgb, var(--product-accent) 84%, var(--text) 16%);
}

.product-summary-card__price-note {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.9;
}

.product-quick-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.product-quick-stat {
  min-width: 0;
  padding: 14px 12px;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-muted) 78%, white 22%), transparent),
    var(--surface);
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
}

.product-quick-stat svg {
  width: 18px;
  height: 18px;
  color: var(--product-accent);
}

.product-quick-stat strong {
  font-size: 14px;
  line-height: 1.7;
  word-break: break-word;
}

.product-quick-stat small {
  color: var(--muted);
  font-size: 11px;
}

.product-specs__item {
  padding: 14px 16px;
  border-radius: 18px;
  border-color: color-mix(in srgb, var(--border) 82%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-muted) 76%, white 24%), transparent),
    color-mix(in srgb, var(--surface) 94%, #fff7ed 6%);
}

.product-specs__item dt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: color-mix(in srgb, var(--product-accent) 76%, var(--text) 24%);
}

.product-specs__item dt span {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: inline-grid;
  place-items: center;
  background: color-mix(in srgb, var(--product-accent-soft) 78%, white 22%);
  color: var(--product-accent);
}

.product-specs__item dt svg {
  width: 15px;
  height: 15px;
}

.product-specs__item dd {
  line-height: 1.9;
}

.product-summary-card__actions {
  flex-wrap: wrap;
  margin-top: 2px;
}

.product-safety-note {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--border) 72%, var(--product-accent) 28%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--product-accent-soft) 44%, #fff 56%), #fff);
  color: color-mix(in srgb, var(--text) 86%, var(--product-accent) 14%);
  display: flex;
  gap: 10px;
  align-items: flex-start;
  line-height: 1.75;
  font-size: 13px;
}

.product-safety-note__icon svg {
  width: 18px;
  height: 18px;
}

.product-safety-note__text {
  min-width: 0;
}

.product-summary-action {
  min-height: 46px;
  padding-inline: 16px;
  gap: 8px;
}

.product-summary-action svg {
  width: 16px;
  height: 16px;
}

.product-contact-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.product-contact-chip {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  background: color-mix(in srgb, var(--surface-muted) 76%, white 24%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.product-contact-chip svg {
  width: 16px;
  height: 16px;
  color: var(--product-accent);
}

.product-qa-card {
  padding: 24px;
  border-radius: 28px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, #fff9f4 8%), var(--surface)),
    radial-gradient(circle at top right, color-mix(in srgb, var(--product-accent-soft) 34%, transparent), transparent 40%);
}

.product-qa-card__header {
  align-items: center;
  margin-bottom: 20px;
}

.product-qa-card__header--tight {
  margin-bottom: 10px;
}

.product-qa-card__meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.product-section-heading {
  display: flex;
  align-items: center;
  gap: 14px;
}

.product-section-heading__icon {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: inline-grid;
  place-items: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--product-accent-soft) 78%, white 22%), rgba(255, 255, 255, 0.92));
  color: var(--product-accent);
  box-shadow: 0 14px 24px rgba(249, 115, 22, 0.12);
}

.product-section-heading__icon svg {
  width: 18px;
  height: 18px;
}

.product-section-heading > div {
  display: grid;
  gap: 4px;
}

.product-section-heading > div > span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.8;
}

.product-qa-card__count {
  margin: 0;
  padding: 7px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--product-accent-soft) 68%, white 32%);
  color: var(--product-accent);
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
}

.product-qa-card__count--pending {
  background: color-mix(in srgb, rgba(245, 158, 11, 0.18) 80%, white 20%);
  color: #b45309;
}

.product-qa-card__ask-store {
  min-height: 34px;
}

.qa-card--product {
  gap: 10px;
  padding: 12px;
  border-radius: 16px;
  border-color: color-mix(in srgb, var(--border) 82%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-muted) 72%, white 28%), transparent),
    color-mix(in srgb, var(--surface) 95%, #fffaf6 5%);
}

.qa-card__head--product {
  align-items: center;
}

.qa-card__author {
  display: grid;
  gap: 2px;
}

.qa-card__author--product {
  display: flex;
  align-items: center;
  gap: 10px;
}

.qa-card__author-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  background: var(--surface-muted);
  flex: 0 0 34px;
}

.qa-card__author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.qa-card__author-meta {
  display: grid;
  gap: 1px;
}

.qa-card__author-name {
  font-weight: 700;
  color: var(--text);
}

.qa-card__author a {
  font-weight: 700;
}

.qa-card__author small {
  color: var(--muted);
  font-size: 11px;
}

.qa-card__state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.qa-card__block {
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  display: grid;
  gap: 6px;
}

.qa-card__block strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.qa-card__block strong svg {
  width: 15px;
  height: 15px;
}

.qa-card__block--question {
  background: color-mix(in srgb, var(--surface-muted) 76%, white 24%);
}

.qa-card__block--question strong {
  color: color-mix(in srgb, var(--product-accent) 82%, var(--text) 18%);
}

.qa-card__block--answer {
  background: linear-gradient(180deg, color-mix(in srgb, rgba(34, 197, 94, 0.08) 70%, var(--surface) 30%), color-mix(in srgb, var(--surface) 94%, white 6%));
}

.qa-card__block--answer strong {
  color: #166534;
}

.qa-card__block p {
  margin: 0;
  line-height: 1.8;
  font-size: 13px;
}

.product-qa-card__empty {
  padding: 28px;
  border-radius: 22px;
}

.qa-card__moderation {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.qa-card__delete-button {
  border-color: color-mix(in srgb, #ef4444 42%, var(--border) 58%);
  color: #b91c1c;
}

.qa-card__answer-form {
  display: flex;
  align-items: center;
  gap: 8px;
}

.qa-card__answer-form input {
  flex: 1;
  min-height: 36px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 0 10px;
}

@media (max-width: 760px) {
  .qa-card__answer-form {
    flex-wrap: wrap;
  }

  .qa-card__answer-form input {
    width: 100%;
  }
}

.product-question-bar {
  gap: 12px;
  padding: 14px 16px;
  border-radius: 24px;
  border-color: color-mix(in srgb, var(--border) 78%, var(--product-accent) 22%);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 90%, #fff8f2 10%), var(--surface)),
    radial-gradient(circle at top right, color-mix(in srgb, var(--product-accent-soft) 44%, transparent), transparent 38%);
  box-shadow: 0 18px 34px rgba(17, 17, 17, 0.08);
}

.product-question-bar input {
  min-height: 50px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-muted) 74%, white 26%);
}

.product-question-bar__submit {
  gap: 8px;
}

.product-question-bar__submit svg {
  width: 16px;
  height: 16px;
}

.product-question-bar__anonymous {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-inline-start: 4px;
  font-size: 12px;
  color: var(--muted);
  user-select: none;
}

.product-question-bar__anonymous input {
  margin: 0;
}

.section-card,
.detail-card,
.profile-card,
.post-preview,
.add-sheet,
.auth-card {
  padding: 16px;
}

.feed-list,
.page-block,
.composer-page {
  display: grid;
  gap: 16px;
}

.home-utility-stack {
  display: grid;
  gap: 12px;
}

.home-date-strip,
.home-market-strip {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background:
    radial-gradient(circle at top left, rgba(0, 149, 246, 0.12), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
  box-shadow:
    0 1px 0 rgba(15, 23, 42, 0.04),
    0 18px 36px rgba(15, 23, 42, 0.06);
}

.home-date-strip {
  min-height: 108px;
  padding: 16px 18px;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(220px, 0.85fr);
  align-items: center;
  gap: 16px;
  isolation: isolate;
}

.home-date-strip::before,
.home-date-strip::after {
  content: "";
  position: absolute;
  inset: auto;
  border-radius: 999px;
  pointer-events: none;
  z-index: -1;
}

.home-date-strip::before {
  width: 220px;
  height: 220px;
  top: -120px;
  inset-inline-start: -48px;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.22), transparent 68%);
}

.home-date-strip::after {
  width: 200px;
  height: 200px;
  bottom: -126px;
  inset-inline-end: -30px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.16), transparent 70%);
}

.home-date-strip__main,
.home-date-strip__hero,
.home-date-strip__meta,
.home-date-strip__clock-meta {
  display: grid;
  gap: 8px;
}

.home-date-strip__main {
  min-width: 0;
}

.home-date-strip__eyebrow {
  color: #0f766e;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.home-date-strip__title {
  font-size: 24px;
  line-height: 1.2;
  font-weight: 900;
  color: #0f172a;
  text-wrap: balance;
}

.home-date-strip__meta {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.home-date-strip__meta-item {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 11px 13px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.7));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 12px 24px rgba(15, 23, 42, 0.05);
  backdrop-filter: blur(12px);
}

.home-date-strip__meta-item span {
  color: var(--muted);
  font-size: 11px;
}

.home-date-strip__meta-item strong {
  font-size: 13px;
  line-height: 1.5;
  color: #0f172a;
}

.home-date-strip__clock-card {
  position: relative;
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 14px 12px 12px;
  border-radius: 24px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, rgba(255, 255, 255, 0.24));
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--surface) 94%, #ffffff 6%),
      color-mix(in srgb, var(--surface-muted) 88%, #f8fafc 12%)
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 18px 34px rgba(15, 23, 42, 0.08);
}

.home-date-strip__clock-card::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--border) 70%, rgba(255, 255, 255, 0.28));
  pointer-events: none;
}

.home-date-strip__analog {
  --hour-angle: 0deg;
  --minute-angle: 0deg;
  --second-angle: 0deg;
  position: relative;
  width: 108px;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.92), transparent 30%),
    radial-gradient(circle at center, rgba(148, 163, 184, 0.12), transparent 66%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(226, 232, 240, 0.58));
  border: 1px solid rgba(148, 163, 184, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -12px 24px rgba(148, 163, 184, 0.12);
}

.home-date-strip__ticks,
.home-date-strip__dial,
.home-date-strip__hand,
.home-date-strip__center-dot {
  position: absolute;
}

.home-date-strip__ticks {
  inset: 0;
}

.home-date-strip__ticks span {
  position: absolute;
  top: 7px;
  left: 50%;
  width: 2px;
  height: 10px;
  margin-left: -1px;
  border-radius: 999px;
  background: rgba(100, 116, 139, 0.42);
  transform-origin: 50% 47px;
  transform: rotate(calc(var(--tick-index) * 30deg));
}

.home-date-strip__ticks span:nth-child(3n + 1) {
  height: 14px;
  background: rgba(30, 41, 59, 0.72);
}

.home-date-strip__dial {
  font-size: 10px;
  font-weight: 800;
  color: rgba(51, 65, 85, 0.76);
}

.home-date-strip__dial--12 {
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
}

.home-date-strip__dial--3 {
  top: 50%;
  right: 11px;
  transform: translateY(-50%);
}

.home-date-strip__dial--6 {
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
}

.home-date-strip__dial--9 {
  top: 50%;
  left: 11px;
  transform: translateY(-50%);
}

.home-date-strip__hand {
  left: 50%;
  bottom: 50%;
  transform-origin: 50% 100%;
  border-radius: 999px;
}

.home-date-strip__hand--hour {
  width: 5px;
  height: 28px;
  margin-left: -2.5px;
  background: linear-gradient(180deg, #0f172a, #334155);
  transform: rotate(var(--hour-angle));
}

.home-date-strip__hand--minute {
  width: 3px;
  height: 37px;
  margin-left: -1.5px;
  background: linear-gradient(180deg, #0284c7, #38bdf8);
  transform: rotate(var(--minute-angle));
}

.home-date-strip__hand--second {
  width: 2px;
  height: 42px;
  margin-left: -1px;
  background: linear-gradient(180deg, #fb7185, #f43f5e);
  transform: rotate(var(--second-angle));
}

.home-date-strip__center-dot {
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: #0f172a;
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, 0.86),
    0 0 24px rgba(56, 189, 248, 0.18);
}

.home-date-strip__digital {
  color: #0f172a;
  font-size: 23px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.home-date-strip__clock-caption {
  color: rgba(71, 85, 105, 0.82);
  font-size: 11px;
  font-weight: 700;
}

.home-market-strip {
  padding: 12px 14px;
}

.home-market-strip__row {
  display: grid;
  gap: 12px;
}

.home-market-strip__headline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.home-market-strip__headline small {
  color: var(--muted);
  font-size: 11px;
}

.home-market-strip__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  color: #0f172a;
  font-size: 11px;
  font-weight: 800;
}

.home-market-strip__badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.14);
}

.home-market-strip__items {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.home-market-chip {
  min-width: 0;
  display: grid;
  gap: 4px;
  align-items: start;
  padding: 12px 13px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(255, 255, 255, 0.86);
  color: inherit;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.home-market-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.home-market-chip__label {
  font-size: 11px;
  color: var(--muted);
}

.home-market-chip__value {
  font-size: 17px;
  line-height: 1.25;
  font-weight: 900;
  color: #0f172a;
}

.home-market-chip__change {
  font-size: 11px;
  font-weight: 700;
}

.home-market-chip--high {
  border-color: rgba(16, 185, 129, 0.28);
}

.home-market-chip--high .home-market-chip__change {
  color: #059669;
}

.home-market-chip--low {
  border-color: rgba(239, 68, 68, 0.2);
}

.home-market-chip--low .home-market-chip__change {
  color: #dc2626;
}

.home-market-chip--flat .home-market-chip__change {
  color: #64748b;
}

:root.dark-theme .home-date-strip,
:root.dark-theme .home-market-strip {
  border-color: color-mix(in srgb, var(--border) 88%, transparent);
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--accent) 22%, transparent), transparent 30%),
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--surface) 90%, #0b1220 10%),
      color-mix(in srgb, var(--surface-muted) 92%, #111827 8%)
    );
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04),
    0 22px 42px rgba(0, 0, 0, 0.3);
}

:root.dark-theme .home-date-strip__eyebrow {
  color: color-mix(in srgb, #5eead4 76%, var(--text) 24%);
}

:root.dark-theme .home-date-strip__title,
:root.dark-theme .home-date-strip__meta-item strong,
:root.dark-theme .home-market-strip__badge,
:root.dark-theme .home-market-chip__value {
  color: var(--text);
}

:root.dark-theme .home-date-strip__meta-item {
  border-color: color-mix(in srgb, var(--border) 74%, rgba(255, 255, 255, 0.08));
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--surface) 84%, rgba(255, 255, 255, 0.04)),
      color-mix(in srgb, var(--surface-muted) 92%, rgba(255, 255, 255, 0.02))
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 12px 28px rgba(0, 0, 0, 0.18);
}

:root.dark-theme .home-date-strip__clock-card {
  border-color: color-mix(in srgb, var(--border) 68%, rgba(255, 255, 255, 0.1));
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, #0f172a 72%, var(--surface) 28%),
      color-mix(in srgb, #111827 78%, var(--surface-muted) 22%)
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 22px 40px rgba(0, 0, 0, 0.34);
}

:root.dark-theme .home-date-strip__clock-card::before {
  border-color: color-mix(in srgb, var(--border) 74%, rgba(255, 255, 255, 0.06));
}

:root.dark-theme .home-date-strip__analog {
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.08), transparent 28%),
    radial-gradient(circle at center, rgba(15, 23, 42, 0.28), transparent 66%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(148, 163, 184, 0.02));
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 -12px 30px rgba(0, 0, 0, 0.24);
}

:root.dark-theme .home-market-strip__badge {
  background: color-mix(in srgb, var(--surface-strong) 78%, transparent);
}

:root.dark-theme .home-market-chip {
  border-color: color-mix(in srgb, var(--border) 78%, transparent);
  background: color-mix(in srgb, var(--surface) 82%, rgba(255, 255, 255, 0.03));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

:root.dark-theme .home-market-chip:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 12px 28px rgba(0, 0, 0, 0.24);
}

:root.dark-theme .home-market-chip--flat .home-market-chip__change {
  color: color-mix(in srgb, var(--muted) 86%, var(--text));
}

.page-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.stories-card {
  padding: 12px 14px;
  overflow: hidden;
  margin-bottom: 10px;
}

.stories-header,
.section-title,
.detail-card__header,
.profile-card__line,
.modal-sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.stories-header strong,
.section-title strong,
.detail-card h1 {
  font-size: 15px;
  font-weight: 700;
}

.section-title {
  align-items: flex-end;
  margin-bottom: 12px;
}

.section-title span,
.stories-header__actions,
.detail-card p,
.thread-card__body p,
.post-card__footer span,
.profile-card__bio p,
.profile-card__details,
.store-callout small,
.auth-card__footer,
.chat-shell__top p,
.price-row__old {
  color: var(--muted);
}

.flash-stack {
  position: fixed;
  top: calc(var(--header-height) + 12px);
  left: 12px;
  right: 12px;
  z-index: 90;
  display: grid;
  gap: 10px;
  justify-items: center;
  pointer-events: none;
}

.body--auth .flash-stack,
.admin-body .flash-stack {
  top: 12px;
}

.flash-card {
  width: min(100%, 620px);
  pointer-events: auto;
  direction: rtl;
  text-align: right;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 10px;
  border-radius: 14px;
  border: 1px solid transparent;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.14);
  padding: 12px 14px;
  background: #fff;
  color: #111827;
  transform: translateY(0);
  opacity: 1;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.flash-card.is-leaving {
  opacity: 0;
  transform: translateY(-8px);
}

.flash-card__content {
  display: grid;
  gap: 3px;
}

.flash-card__title {
  font-size: 13px;
  font-weight: 900;
  line-height: 1.4;
}

.flash-card__message {
  font-size: 14px;
  line-height: 1.7;
}

.flash-card__close {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  padding: 0;
}

.flash-card__close:hover {
  background: rgba(0, 0, 0, 0.06);
}

.flash-card--success {
  border-color: #a7f3d0;
  background: #ecfdf5;
  color: #065f46;
}

.flash-card--error {
  border-color: #fecaca;
  background: #fef2f2;
  color: #991b1b;
}

@media (max-width: 767px) {
  .flash-stack {
    top: calc(var(--header-height) + 8px);
    left: 8px;
    right: 8px;
  }

  .flash-card {
    width: 100%;
  }
}

.section-title--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.stories-header__actions {
  display: flex;
  gap: 6px;
  margin-inline-start: auto;
}

.stories-rail-wrap {
  position: relative;
}

.stories-rail-wrap .stories-rail {
  padding-inline: 42px;
}

.stories-rail__nav {
  position: absolute;
  inset-block-start: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 14px;
  z-index: 2;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  box-shadow:
    0 1px 0 rgba(15, 23, 42, 0.05),
    0 14px 30px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(10px);
}

.stories-rail__nav--prev {
  inset-inline-start: 4px;
}

.stories-rail__nav--next {
  inset-inline-end: 4px;
}

@media (max-width: 520px) {
  .home-date-strip {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .home-date-strip__title {
    font-size: 19px;
  }

  .home-date-strip__meta {
    grid-template-columns: 1fr;
  }

  .home-date-strip__clock-card {
    grid-template-columns: auto 1fr;
    align-items: center;
    justify-items: start;
    width: 100%;
    gap: 12px;
  }

  .home-date-strip__analog {
    width: 92px;
  }

  .home-date-strip__digital {
    font-size: 20px;
  }

  .stories-rail-wrap .stories-rail {
    padding-inline: 40px;
  }

  .stories-rail__nav {
    width: 32px;
    height: 32px;
    border-radius: 12px;
  }
}

@media (max-width: 860px) {
  .home-market-strip__items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .home-date-strip__clock-card {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .home-date-strip__clock-meta {
    justify-items: center;
    text-align: center;
  }

  .home-market-strip__items {
    grid-template-columns: 1fr;
  }
}

.stories-rail {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-top: 2px;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.stories-rail::-webkit-scrollbar,
.slider-track::-webkit-scrollbar,
.chat-messages::-webkit-scrollbar {
  display: none;
}

.story-chip {
  width: 78px;
  flex: 0 0 auto;
  display: grid;
  justify-items: center;
  gap: 8px;
  font-size: 11px;
}

.story-chip__avatar {
  width: 72px;
  height: 72px;
  padding: 3px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #f9ce34, #ee2a7b, #6228d7);
  box-shadow: 0 10px 24px rgba(238, 42, 123, 0.18);
}

.story-chip.has-story .story-chip__avatar {
  background: linear-gradient(135deg, #f9ce34 0%, #ee2a7b 52%, #6228d7 100%);
}

.story-chip.is-seen .story-chip__avatar {
  /* Keep a visible ring even when stories are fully seen. */
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--border) 55%, #ffffff),
    color-mix(in srgb, var(--border) 85%, #0f172a)
  );
  box-shadow: none;
}

.story-chip__image,
.user-line__avatar,
.thread-card__avatar,
.share-user__avatar,
.store-callout__avatar,
.profile-card__avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.story-chip span {
  max-width: 72px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.post-card {
  overflow: visible;
}

.post-card__header,
.post-card__body {
  padding: 14px 16px;
}

.post-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 5;
}

.user-line {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-line--light {
  color: #fff;
}

.user-line__avatar,
.thread-card__avatar,
.share-user__avatar,
.store-callout__avatar {
  width: 42px;
  height: 42px;
}

.user-line__avatar-wrap {
  display: inline-grid;
  place-items: center;
}

.user-line__avatar-wrap--story {
  width: 42px;
  height: 42px;
  padding: 2px;
}

.user-line__avatar-wrap .user-line__avatar {
  width: 100%;
  height: 100%;
}

.user-line__text,
.thread-card__body,
.post-card__caption,
.comment-card__text,
.comment-reply,
.profile-card__bio,
.store-callout span {
  display: grid;
  gap: 4px;
}

.user-line__text strong,
.post-card__caption a,
.comment-card__text a,
.comment-reply a,
.thread-card__body strong,
.product-card__body strong,
.profile-card__line strong,
.store-callout strong {
  font-size: 14px;
  font-weight: 700;
}

.user-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.verified-badge {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  color: var(--accent) !important;
  flex: 0 0 auto;
}

.verified-badge svg {
  width: 16px;
  height: 16px;
}

.post-card__caption,
.post-card__caption span,
.comment-card__text,
.comment-card__text p,
.comment-reply,
.comment-reply span,
.thread-card__body,
.thread-card__body p,
.chat-bubble,
.chat-bubble p,
.detail-card__header,
.detail-card p,
.qa-card,
.qa-card p,
.profile-card__bio,
.profile-card__bio h1,
.profile-card__bio p,
.profile-card__details,
.profile-card__details span,
.store-callout,
.store-callout span,
.empty-state {
  direction: rtl;
  text-align: right;
}

.post-card__media,
.post-preview__media,
.product-card__media,
.slider-slide,
.story-canvas {
  background: var(--surface-strong);
}

.post-card__media {
  overflow: hidden;
}

.post-preview__media img,
.story-viewer__media,
.manage-card img,
.upload-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-card__media .single-media,
.post-card__media .slider-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #000;
}

.post-card__media .slider-slide {
  background: #000;
}

.slider-block,
.video-frame {
  position: relative;
}

.video-frame {
  background: #000;
  line-height: 0;
}

.slider-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  direction: ltr;
}

.slider-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  aspect-ratio: 1 / 1;
}

.slider-block--product .slider-slide {
  aspect-ratio: 4 / 3;
}

.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(17, 17, 17, 0.55);
  color: #fff;
  display: grid;
  place-items: center;
}

.slider-arrow--left {
  left: 12px;
}

.slider-arrow--right {
  right: 12px;
}

.slider-dots {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}

.slider-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.45);
}

.slider-dot.is-active {
  background: #fff;
}

.video-frame video {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
  background: #000;
  display: none;
}

.video-frame__overlay {
  width: 100%;
  border: none;
  background: none;
  padding: 0;
  position: relative;
  display: block;
}

.video-frame__overlay img {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center;
  background: #000;
  display: block;
}

.video-frame__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
}

.video-frame__play svg {
  width: 60px;
  height: 60px;
  padding: 14px;
  border-radius: 50%;
  background: rgba(17, 17, 17, 0.55);
}

.video-frame__error {
  position: absolute;
  inset: auto 12px 12px;
  z-index: 3;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}

.video-frame.is-playing .video-frame__overlay {
  display: none;
}

.video-frame.is-playing video {
  display: block;
}

.action-row,
.action-row__group,
.profile-card__stats,
.profile-card__details,
.comment-card__actions,
.button-row,
.step-row,
.choice-row,
.thread-card,
.store-callout,
.composer-bar,
.switch-row,
.button-stack {
  display: flex;
  align-items: center;
  gap: 10px;
}

.comment-card__actions form,
.comment-reply form {
  margin: 0;
}

.action-row {
  justify-content: space-between;
}

.action-row--compact {
  justify-content: flex-start;
}

.counter,
.post-card__footer a,
.comment-badge,
.chip-button,
.thread-card__meta span,
.product-card__store {
  font-size: 12px;
}

.post-card__caption {
  margin-top: 12px;
}

.post-card__caption span {
  line-height: 1.8;
}

.post-card__footer {
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
}

.post-card {
  position: relative;
  isolation: isolate;
  border-radius: 28px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, var(--accent) 18%);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, white 8%), var(--surface)),
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 10%, transparent), transparent 38%);
  box-shadow: 0 22px 46px rgba(17, 17, 17, 0.09);
}

.post-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 24%);
  opacity: 0.75;
  z-index: 0;
}

.post-card > * {
  position: relative;
  z-index: 1;
}

.post-card__header,
.post-card__body {
  padding: 18px;
}

.post-card__repost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px 0;
  color: var(--muted);
  font-size: 12px;
}

.post-card__repost a {
  color: inherit;
  text-decoration: none;
  font-weight: 700;
}

.post-card__repost svg {
  width: 18px;
  height: 18px;
  opacity: 0.9;
}

.post-card__header {
  padding-bottom: 16px;
}

.user-line__text {
  gap: 2px;
}

.user-line__text strong {
  font-size: 15px;
}

.user-line__text small {
  color: var(--muted);
  font-size: 12px;
}

.post-card__media {
  position: relative;
  margin: 0 12px;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  box-shadow: 0 18px 28px rgba(17, 17, 17, 0.18);
  background: #050505;
}

.post-text-card {
  display: grid;
  place-items: center;
  padding: 22px 18px;
  color: #fff;
  background:
    radial-gradient(1200px 520px at 20% 10%, rgba(var(--accent-rgb), 0.26), transparent 55%),
    radial-gradient(900px 520px at 85% 30%, rgba(255, 255, 255, 0.12), transparent 60%),
    linear-gradient(135deg, #0b1020, #111827 55%, #0b1225);
}

.post-text-card__inner {
  width: 100%;
  max-width: 38rem;
  font-size: 18px;
  line-height: 1.9;
  text-align: right;
  direction: rtl;
  text-wrap: pretty;
  white-space: pre-wrap;
}

.post-text-card__inner a {
  color: currentColor;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 44%, transparent);
  text-underline-offset: 3px;
}

.post-text-card--preview {
  border-radius: 24px;
}

.post-card__media-badges {
  position: absolute;
  inset: 14px 14px auto auto;
  z-index: 4;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.post-card__media-badge {
  width: 34px;
  height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(10, 10, 10, 0.64);
  color: #fff;
  backdrop-filter: blur(10px);
}

.post-card__media-badge svg {
  width: 18px;
  height: 18px;
}

.post-card__media-badge--count {
  position: relative;
}

.post-card__media-badge-count {
  position: absolute;
  inset-inline-end: -6px;
  inset-block-start: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: rgba(10, 10, 10, 0.92);
  font-size: 11px;
  font-weight: 800;
  display: grid;
  place-items: center;
  border: 1px solid rgba(10, 10, 10, 0.12);
}

.post-card__body {
  display: grid;
  gap: 14px;
  padding-top: 16px;
}

.post-card__body .action-row {
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  border-radius: 20px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-muted) 82%, white 18%), transparent);
}

.post-card__body .action-row__group {
  gap: 8px;
  flex-wrap: wrap;
}

.post-card__body .action-metric {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  height: 38px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-muted) 78%, white 22%);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

.post-card__body .action-metric:hover {
  border-color: color-mix(in srgb, var(--border) 55%, var(--accent));
}

.post-card__body .action-metric .icon-button {
  width: 32px;
  height: 32px;
  border-radius: 12px;
  background: transparent;
}

.post-card__body .action-metric .icon-button:hover {
  background: color-mix(in srgb, var(--accent-soft) 70%, transparent);
  transform: none;
}

.post-card__body .action-metric .counter {
  min-width: 0;
  height: auto;
  padding: 0;
  background: transparent;
  color: var(--text);
  font-weight: 900;
}

.post-card__body .action-metric .counter::after {
  content: "";
  display: none;
}

.post-card__body .icon-button {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-muted) 74%, white 26%);
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.post-card__body .icon-button:hover {
  background: var(--accent-soft);
  color: var(--accent);
  transform: translateY(-1px);
}

.counter {
  min-width: 40px;
  height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--surface-muted) 78%, white 22%);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.post-card__caption {
  margin-top: 0;
  gap: 10px;
}

.post-card__caption-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.post-card__caption a {
  font-size: 15px;
}

.post-card__caption-location {
  margin: 0;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  background: color-mix(in srgb, var(--surface-muted) 76%, white 24%);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.post-card__caption span {
  line-height: 2;
  color: color-mix(in srgb, var(--text) 86%, var(--muted) 14%);
}

.post-card__hashtags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.hashtag-link {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
}

.hashtag-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hashtag-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(var(--accent-rgb), 0.18);
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
}

.hashtag-chip--inline {
  min-height: 30px;
  padding: 0 12px;
  font-size: 0.86rem;
}

.post-card__footer {
  margin-top: 0;
  padding-top: 14px;
  align-items: center;
  border-top: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
}

.post-card__footer a {
  padding: 8px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-muted) 80%, white 20%);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}

.post-card__footer span {
  color: var(--muted);
}

.slider-arrow {
  background: rgba(10, 10, 10, 0.72);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.22);
}

.slider-dot {
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.38);
}

.slider-dot.is-active {
  width: 22px;
  border-radius: 999px;
  background: #fff;
}

.post-preview {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 16px;
}

.post-preview__media {
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}

.post-preview__body {
  display: grid;
  align-content: flex-start;
  gap: 10px;
}

.comment-group {
  display: grid;
  gap: 14px;
}

.comment-card {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  scroll-margin-top: calc(var(--header-height) + 16px);
}

.comment-reply {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: flex-start;
  gap: 10px;
  scroll-margin-top: calc(var(--header-height) + 16px);
}

.comment-reply__avatar {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  text-decoration: none;
}

.comment-reply__avatar img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-muted);
  display: block;
}

.comment-reply__bubble {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-muted) 70%, var(--surface) 30%);
  box-shadow: 0 16px 36px rgba(17, 17, 17, 0.06);
  display: grid;
  gap: 8px;
}

.comment-reply__line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.comment-reply__text {
  color: var(--text);
  line-height: 1.8;
  word-break: break-word;
}

.comment-reply__footer {
  display: flex;
  justify-content: flex-end;
}

.comment-reply__actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.comment-reply .chip-button--icon {
  width: 30px;
  height: 30px;
}

.comment-reply .chip-button--icon svg {
  width: 15px;
  height: 15px;
}

.chip-button--icon {
  width: 34px;
  height: 34px;
  padding: 0;
  justify-content: center;
}

.chip-button--icon svg {
  width: 16px;
  height: 16px;
}

.comment-card__avatar {
  width: 42px;
  height: 42px;
}

.comment-card__content {
  display: grid;
  gap: 10px;
}

.comment-card__text p,
.detail-card p,
.qa-card p {
  margin: 0;
  line-height: 1.8;
}

.comment-replies {
  display: grid;
  gap: 8px;
  padding-inline-start: 16px;
  border-inline-start: 2px solid var(--border);
}

/* Follow requests (private profiles) */
.follow-requests-card {
  overflow: hidden;
}

.follow-requests-search {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 10px 0 4px;
}

.follow-requests-list {
  display: grid;
  gap: 10px;
  padding-top: 10px;
}

.follow-request-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-muted);
}

.follow-request-item .user-line {
  min-width: 0;
  flex: 1;
}

.follow-request-item__actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.composer-bar__reply-state {
  /* Reply label bar removed from UI; keep class harmless if any old markup remains. */
  display: none;
}

.comment-badge,
.chip-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--muted);
}

.comment-badge--icon-only {
  width: 32px;
  height: 32px;
  justify-content: center;
  padding: 0;
}

.comment-badge--icon-only svg {
  width: 15px;
  height: 15px;
}

.comment-edited {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.6;
}

.comment-edited a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 800;
}

.comment-edited a:hover {
  text-decoration: underline;
}

.chip-button.is-active,
.icon-button.is-active {
  color: var(--danger);
}

.search-box,
.field input,
.field textarea,
.field select,
.share-link input,
.composer-bar input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-muted);
  color: var(--text);
}

.field select,
.admin-actions select {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(1em) calc(50% - 2px),
    calc(1em - 5px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-inline-start: 14px;
  padding-inline-end: 30px;
}

.admin-actions select,
.admin-actions input[type="number"],
.admin-actions input[type="text"] {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 6px 10px;
  background: var(--surface-muted);
  color: var(--text);
  font-size: 12px;
  min-height: 34px;
}

.search-box {
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.search-box svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: var(--muted);
}

.search-box input,
.composer-bar input {
  border: none;
  background: transparent;
  outline: none;
}

.search-box__action {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: none;
  background: transparent;
  padding: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--muted);
  flex: 0 0 auto;
  text-decoration: none;
}

.search-box__action svg {
  width: 18px;
  height: 18px;
  color: inherit;
}

.search-box__action:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 65%, transparent);
}

.search-box__action:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 2px;
}

.search-box__action--clear:hover {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger-soft) 60%, transparent);
}

.explore-grid,
.product-grid,
.post-grid,
.upload-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.explore-tile,
.post-grid__item {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 18px;
  background: var(--surface-strong);
}

.explore-tile img,
.post-grid__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.explore-tile__type,
.post-grid__overlay {
  position: absolute;
  inset-inline-end: 10px;
  inset-block-end: 10px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(17, 17, 17, 0.56);
  color: #fff;
  font-size: 11px;
}

.post-grid__overlay {
  width: 34px;
  height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
}

.search-page {
  gap: 18px;
}

.search-hero-card {
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, var(--accent) 18%);
  border-radius: 28px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, white 8%), var(--surface)),
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 12%, transparent), transparent 38%);
  box-shadow: 0 22px 40px rgba(17, 17, 17, 0.08);
}

.search-box--hero {
  min-height: 62px;
  padding-inline: 16px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface-muted) 76%, white 24%);
}

.search-box--hero input {
  font-size: 15px;
}

.search-page__summary {
  margin-top: 16px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.search-page__summary-copy {
  display: grid;
  gap: 6px;
}

.search-page__summary-copy strong {
  font-size: 18px;
  font-weight: 800;
}

.search-page__summary-copy span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.9;
}

.search-page__count {
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface) 90%);
  color: var(--accent);
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.search-section {
  display: grid;
  gap: 12px;
}

.search-results-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.search-result-card {
  overflow: hidden;
  border-radius: 26px;
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, white 8%), var(--surface));
  box-shadow: 0 18px 34px rgba(17, 17, 17, 0.08);
  display: grid;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.search-result-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 42px rgba(17, 17, 17, 0.12);
}

.search-result-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #050505;
}

.search-result-card__media::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 46%;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.55));
  pointer-events: none;
}

.search-result-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.search-result-card__text {
  width: 100%;
  height: 100%;
  display: grid;
  align-content: center;
  justify-items: stretch;
  gap: 10px;
  padding: 16px 16px 18px;
  background:
    radial-gradient(900px 420px at 20% 10%, rgba(var(--accent-rgb), 0.22), transparent 55%),
    linear-gradient(135deg, #0b1020, #111827 58%, #0b1225);
  color: #fff;
  direction: rtl;
  text-align: right;
}

.search-result-card__text-icon svg {
  width: 18px;
  height: 18px;
  opacity: 0.9;
}

.search-result-card__text-body {
  font-size: 13px;
  line-height: 1.65;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.28);
}

.search-result-card__type {
  position: absolute;
  inset-inline-end: 14px;
  inset-block-start: 14px;
  z-index: 1;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(10, 10, 10, 0.7);
  color: #fff;
  backdrop-filter: blur(10px);
}

.search-result-card__type svg {
  width: 18px;
  height: 18px;
}

.search-result-card__body {
  padding: 14px 16px 16px;
  display: grid;
  gap: 10px;
}

.search-result-card__body strong {
  font-size: 14px;
  line-height: 1.9;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.search-result-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
}

.search-result-card__meta span:last-child {
  color: var(--accent);
  font-weight: 700;
}

.search-result-card__metrics {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
}

.search-result-card__metric {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
}

.search-result-card__metric svg {
  width: 16px;
  height: 16px;
}

.search-result-card__metric.is-liked {
  color: var(--danger);
}

.add-scope {
  margin: 12px 0;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 75%, var(--surface-muted));
}

.add-steps {
  display: grid;
  gap: 12px;
}

.add-steps__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 70%, var(--surface-muted));
  font-weight: 800;
  width: max-content;
}

.add-step {
  display: grid;
  gap: 10px;
  animation: addStepIn 180ms ease both;
}

.add-step[hidden] {
  display: none;
}

@keyframes addStepIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.add-step__actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.add-kind-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.add-kind-head strong {
  font-weight: 900;
}

.add-scope__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.add-scope__head strong {
  font-weight: 800;
}

.add-scope__hint {
  display: block;
  margin-top: 10px;
  color: var(--text-muted);
  line-height: 1.7;
}

.add-scope__select {
  margin-top: 6px;
}

.add-scope-cards {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.add-scope-cards--list {
  grid-template-columns: 1fr;
}

.add-scope-card-radio {
  display: block;
  position: relative;
}

.add-scope-card-radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.add-scope-card {
  appearance: none;
  border: 1px solid var(--border);
  background:
    radial-gradient(900px 160px at 25% -10%, rgba(var(--accent-rgb), 0.10), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, #ffffff 8%), color-mix(in srgb, var(--surface) 60%, var(--surface-muted)));
  border-radius: 20px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: right;
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
  position: relative;
  overflow: hidden;
}

.add-scope-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
}

.add-scope-card.is-selected {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: 0 14px 30px rgba(var(--accent-rgb), 0.12);
}

.add-scope-card-radio input[type="radio"]:checked + .add-scope-card,
.add-scope-card-radio input[type="radio"]:checked + span.add-scope-card {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
  box-shadow: 0 14px 30px rgba(var(--accent-rgb), 0.12);
}

.add-scope-card-radio input[type="radio"]:focus-visible + span.add-scope-card {
  outline: 2px solid color-mix(in srgb, var(--accent) 65%, transparent);
  outline-offset: 2px;
}

.add-scope-card__avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  overflow: hidden;
  flex: 0 0 auto;
  background: var(--surface-muted);
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.08);
}

.add-scope-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.add-scope-card__body {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.add-scope-card__body strong {
  font-weight: 800;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.add-scope-card__body small {
  color: var(--text-muted);
}

.add-scope-card-radio input[type="radio"]:checked + span.add-scope-card::after {
  content: '';
  position: absolute;
  left: 12px;
  top: 50%;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  transform: translateY(-50%);
  background: rgba(var(--accent-rgb), 0.16);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  box-shadow: 0 10px 18px rgba(var(--accent-rgb), 0.12);
}

.add-scope-card-radio input[type="radio"]:checked + span.add-scope-card::before {
  content: '';
  position: absolute;
  left: 19px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  transform: translateY(-50%);
  background: var(--accent);
}

.add-sheet__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.add-sheet__item {
  min-height: 136px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface-muted), transparent);
  display: grid;
  align-content: space-between;
}

.add-sheet__icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent);
}

.thread-list,
.settings-list,
.manage-list,
.qa-list {
  display: grid;
  gap: 12px;
}

.thread-card-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
  position: relative;
}

.thread-card-row .thread-card {
  flex: 1;
  display: block;
  position: relative;
}

.mini-menu--thread {
  position: absolute;
  inset: auto;
  left: 10px;
  right: auto;
  top: auto;
  bottom: 10px;
  transform: none;
  z-index: 6;
}

.mini-menu--thread .mini-menu__panel {
  top: calc(100% + 2px);
  inset: auto;
  left: 0;
  right: auto;
}

.mini-menu--thread > summary {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.thread-card-row.is-menu-open {
  z-index: 20;
}

.thread-card {
  direction: rtl;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
}

.thread-card__link {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  padding: 12px;
  padding-inline-end: 44px; /* keep space for menu button */
}

.thread-card__body {
  flex: 1;
}

.thread-card__meta {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.thread-card__body {
  justify-items: start;
}

.thread-card__meta em {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-style: normal;
  display: grid;
  place-items: center;
  font-size: 11px;
}

.chat-shell {
  padding: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 0;
  direction: rtl;
  overflow: hidden;
  height: min(calc(100dvh - var(--header-height) - var(--nav-height) - 54px), 820px);
  min-height: 520px;
}

@media (max-width: 720px) {
  .chat-shell {
    height: calc(100dvh - var(--header-height) - var(--nav-height) - 54px);
    min-height: calc(100svh - var(--header-height) - var(--nav-height) - 54px);
  }
}

.app-main--chat .chat-shell {
  height: calc(100dvh - var(--header-height) - var(--nav-height));
  min-height: 0;
  border-radius: 0;
  border-left: none;
  border-right: none;
  box-shadow: none;
}

@media (max-width: 720px) {
  .app-main--chat .chat-shell {
    height: calc(100dvh - var(--header-height) - var(--nav-height));
  }
}

.chat-shell__top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(10px);
}

.chat-shell__spacer {
  flex: 1;
}

.chat-peer {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.chat-peer__text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.chat-peer__text strong {
  font-size: 13px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-peer__text .muted {
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-shell__top strong a {
  color: inherit;
  text-decoration: none;
}

.chat-shell__top p {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--muted);
}

.chat-messages {
  max-height: none;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background:
    radial-gradient(circle at 10% 0%, rgba(var(--accent-rgb), 0.10), transparent 38%),
    radial-gradient(circle at 90% 20%, rgba(var(--accent-rgb), 0.08), transparent 44%);
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

.chat-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}

.chat-row.is-me {
  align-items: flex-end;
}

.chat-row__stamp {
  font-size: 11px;
  color: var(--muted);
  padding: 2px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}

.chat-bubble {
  max-width: 78%;
  padding: 12px 14px;
  border-radius: 18px 18px 18px 6px;
  background: var(--surface-muted);
  display: grid;
  gap: 6px;
  position: relative;
}

.chat-bubble.is-me {
  margin-inline-start: auto;
  border-radius: 18px 18px 6px 18px;
  background: var(--accent-soft);
}

.chat-bubble p,
.chat-bubble span {
  margin: 0;
}

.chat-bubble span {
  font-size: 11px;
  color: var(--muted);
}

.chat-bubble__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  justify-content: flex-end;
}

.chat-bubble__menu {
  position: absolute;
  inset-inline-start: auto;
  inset-inline-end: 8px; /* left side in RTL */
  inset-block-start: auto;
  inset-block-end: 8px;
  width: 32px;
  height: 32px;
  border-radius: 14px;
  opacity: 0.0;
  transform: translateY(-2px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.chat-bubble__reply {
  position: absolute;
  inset-inline-start: auto;
  inset-inline-end: 44px; /* next to menu (RTL: to the right) */
  inset-block-start: auto;
  inset-block-end: 8px;
  width: 32px;
  height: 32px;
  border-radius: 14px;
  opacity: 0.0;
  transform: translateY(-2px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.chat-bubble.is-me .chat-bubble__menu {
  inset-inline-start: auto;
  inset-inline-end: 8px;
}

.chat-bubble.is-me .chat-bubble__reply {
  inset-inline-start: auto;
  inset-inline-end: 44px;
}

.chat-bubble:hover .chat-bubble__menu,
.chat-bubble:focus-within .chat-bubble__menu {
  opacity: 1;
  transform: translateY(0);
}

.chat-bubble:hover .chat-bubble__reply,
.chat-bubble:focus-within .chat-bubble__reply {
  opacity: 1;
  transform: translateY(0);
}

@media (hover: none) {
  .chat-bubble__menu {
    opacity: 0.9;
    transform: translateY(0);
  }
  .chat-bubble__reply {
    opacity: 0.9;
    transform: translateY(0);
  }
}

.chat-action-sheet textarea {
  width: 100%;
  border-radius: 16px;
  border: 1px solid var(--border);
  padding: 10px 12px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  color: var(--text);
  font: inherit;
  line-height: 1.7;
}

.chat-action-sheet__row {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
}

.chat-sheet-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
  background: color-mix(in srgb, var(--surface-muted) 72%, transparent);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  line-height: 1;
  flex: 1;
  min-width: 0;
  justify-content: center;
}

.chat-sheet-btn svg {
  width: 20px;
  height: 20px;
}

.chat-sheet-btn span {
  white-space: nowrap;
  font-size: 12px;
}

.chat-action-sheet__row .icon-button {
  width: 40px;
  height: 40px;
  border-radius: 16px;
  flex: 0 0 auto;
}

.chat-sheet-btn:hover {
  background: rgba(var(--accent-rgb), 0.10);
  border-color: rgba(var(--accent-rgb), 0.22);
  transform: translateY(-1px);
}

.chat-action-sheet__emojis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  padding: 6px 0 2px;
}

.chat-emoji {
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  background: color-mix(in srgb, var(--surface-muted) 72%, transparent);
  border-radius: 16px;
  font-size: 18px;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}

.chat-emoji:hover {
  transform: translateY(-1px);
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.22);
}

.chat-action-sheet__edit[hidden] {
  display: none;
}

.chat-reply-preview {
  display: grid;
  grid-template-columns: 3px 1fr;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  text-align: right;
}

.chat-reply-preview__bar {
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.6);
}

.chat-reply-preview__meta {
  display: grid;
  gap: 2px;
}

.chat-reply-preview__user {
  font-size: 11px;
  font-weight: 700;
  color: color-mix(in srgb, var(--text) 78%, var(--muted));
}

.chat-reply-preview__text {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-reactions {
  position: absolute;
  inset-block-end: -12px;
  inset-inline-start: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  box-shadow: 0 10px 26px rgba(17, 17, 17, 0.12);
}

.chat-bubble.is-me .chat-reactions {
  inset-inline-start: auto;
  inset-inline-end: 10px;
}

.chat-reaction {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--text);
}

.chat-reaction__count {
  font-size: 11px;
  color: var(--muted);
}

.chat-bubble.is-highlight {
  outline: 2px solid rgba(var(--accent-rgb), 0.35);
  box-shadow: 0 22px 60px rgba(var(--accent-rgb), 0.12);
}

.chat-ticks {
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-size: 12px;
  line-height: 1;
  color: color-mix(in srgb, var(--muted) 80%, var(--text));
  opacity: 0.8;
  user-select: none;
  transition: color 180ms ease, opacity 180ms ease;
}

.chat-ticks__icon {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  display: block;
}

.chat-ticks__icon--second {
  display: none;
  margin-left: -3px;
}

.chat-ticks.is-read {
  color: #16a34a;
  opacity: 1;
}

.chat-ticks.is-read .chat-ticks__icon--second {
  display: block;
}

.chat-bubble.is-pending {
  opacity: 0.78;
}

.chat-spinner {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--border) 60%, transparent);
  border-top-color: var(--accent);
  animation: daba-spin 0.8s linear infinite;
}

@keyframes daba-spin {
  to {
    transform: rotate(360deg);
  }
}

.chat-bubble.is-me {
  text-align: right;
}

.product-card {
  display: grid;
  gap: 10px;
}

.product-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  overflow: hidden;
}

.product-badge {
  position: absolute;
  inset-inline-start: 10px;
  inset-block-start: 10px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(17, 17, 17, 0.7);
  color: #fff;
  font-size: 11px;
}

.product-card__body {
  display: grid;
  gap: 6px;
}

.price-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.price-row__discount {
  font-weight: 700;
}

.price-row__old {
  text-decoration: line-through;
}

.price-row--detail {
  margin: 16px 0;
}

.detail-card__header {
  align-items: flex-start;
}

.store-callout {
  padding: 12px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--surface-muted);
}

.qa-card {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface-muted);
  display: grid;
  gap: 8px;
}

.qa-card__head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.profile-card__top {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 16px;
}

.profile-card__top,
.profile-card__meta,
.profile-card__stats,
.profile-card__line {
  direction: rtl;
  text-align: right;
}

.profile-card__top {
  grid-template-columns: 1fr 92px;
}

.profile-story-link {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  justify-self: end;
  overflow: hidden;
  background: color-mix(in srgb, var(--surface) 92%, var(--accent-soft) 8%);
  border: 1px solid color-mix(in srgb, var(--border) 84%, var(--accent) 16%);
}

button.profile-story-link {
  padding: 0;
  cursor: pointer;
}

.avatar-preview {
  display: grid;
  place-items: center;
  padding: 10px 6px 14px;
}

.avatar-preview__img {
  width: min(72vw, 380px);
  aspect-ratio: 1 / 1;
  border-radius: 26px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, var(--accent) 18%);
  background: var(--surface-muted);
  object-fit: cover;
  box-shadow: 0 24px 58px rgba(17, 17, 17, 0.14);
}

@media (max-width: 720px) {
  .avatar-preview__img {
    width: min(86vw, 420px);
    border-radius: 22px;
  }
}

.profile-story-link.has-story {
  padding: 4px;
  background: linear-gradient(135deg, #f9ce34, #ee2a7b, #6228d7);
  border-color: transparent;
}

.profile-card__avatar {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  object-fit: cover;
}

.profile-story-link .profile-card__avatar {
  width: 100%;
  height: 100%;
}

.profile-story-link.has-story .profile-card__avatar {
  border: 3px solid var(--surface);
}

.comment-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.profile-card__meta {
  display: grid;
  gap: 14px;
}

.profile-card__stats,
.profile-card__details {
  flex-wrap: wrap;
}

.profile-card__stats {
  justify-content: flex-end;
}

.profile-card__details span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: var(--surface-muted);
}

.map-card {
  min-height: 128px;
  padding: 16px;
  border-radius: 18px;
  border: 1px dashed var(--border);
  background:
    linear-gradient(135deg, rgba(0, 149, 246, 0.12), transparent),
    var(--surface-muted);
  display: grid;
  align-content: space-between;
}

.tab-row {
  display: flex;
  gap: 8px;
  margin-top: 20px;
}

.tab-button,
.choice-pill,
.button {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--text);
}

.tab-button,
.choice-pill {
  padding: 10px 14px;
}

.tab-button.is-active,
.choice-pill.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

.tab-panel {
  display: none;
  margin-top: 16px;
}

.tab-panel.is-active {
  display: block;
}

.profile-tabs {
  width: 100%;
  max-width: 100%;
  margin-top: 20px;
  padding: 6px;
  border: 1px solid color-mix(in srgb, var(--border) 76%, var(--accent) 24%);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 86%, var(--accent-soft) 14%);
  box-shadow: 0 12px 30px rgba(17, 17, 17, 0.06);
  gap: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.profile-tabs::-webkit-scrollbar {
  display: none;
}

.profile-tabs .tab-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 10px 14px;
  border-radius: 14px;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
  white-space: nowrap;
  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.profile-tabs .tab-button:hover {
  background: color-mix(in srgb, var(--surface) 78%, var(--accent-soft) 22%);
  color: var(--text);
}

.profile-tabs .tab-button:active {
  transform: translateY(1px);
}

.profile-tabs .tab-button:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--accent-soft) 44%, transparent),
    0 12px 24px rgba(17, 17, 17, 0.08);
}

.profile-tabs .tab-button__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.profile-tabs .tab-button__icon svg {
  width: 18px;
  height: 18px;
}

.profile-tabs .tab-button.is-active {
  background: linear-gradient(180deg, #ffffff, color-mix(in srgb, var(--surface) 82%, var(--accent-soft) 18%));
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border) 72%);
  color: var(--accent);
  box-shadow:
    0 12px 26px rgba(17, 17, 17, 0.10),
    0 10px 20px rgba(0, 149, 246, 0.10);
}

.profile-panel {
  margin-top: 22px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--border) 84%, #d3c3ad 16%);
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(249, 244, 236, 0.94));
  box-shadow: 0 18px 44px rgba(17, 17, 17, 0.06);
}

.profile-media-grid {
  gap: 14px;
}

.profile-media-card {
  border: 1px solid color-mix(in srgb, var(--border) 80%, #ccb79a 20%);
  border-radius: 24px;
  background: linear-gradient(180deg, #fffdf9, #f5ede3);
  box-shadow: 0 16px 34px rgba(17, 17, 17, 0.07);
}

.profile-media-card__text {
  position: relative;
  display: grid;
  place-items: stretch;
  align-content: center;
  min-height: 260px;
  padding: 14px 14px 52px;
  border-radius: inherit;
  overflow: hidden;
  background:
    radial-gradient(900px 420px at 20% 10%, rgba(var(--accent-rgb), 0.16), transparent 55%),
    linear-gradient(135deg, #0b1020, #111827 58%, #0b1225);
  color: #fff;
}

.profile-media-card__text-icon svg {
  width: 20px;
  height: 20px;
  opacity: 0.88;
  margin-bottom: 8px;
}

.profile-media-card__text-body {
  font-size: 13px;
  line-height: 1.7;
  text-align: right;
  direction: rtl;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.28);
}

.profile-media-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
  pointer-events: none;
}

.profile-media-card .post-grid__overlay {
  inset-block-start: 10px;
  inset-block-end: auto;
  background: rgba(17, 17, 17, 0.62);
}

.profile-media-card__meta {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: 10px 10px 9px;
  display: grid;
  gap: 7px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.62) 55%, rgba(0, 0, 0, 0.72) 100%);
  color: #fff;
}

.profile-media-card__cap {
  font-size: 12px;
  line-height: 1.35;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.50);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.profile-media-card__metrics {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.profile-media-card__metric {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(10px);
}

.profile-media-card__metric svg {
  width: 14px;
  height: 14px;
}

.profile-product-grid {
  gap: 16px;
}

.profile-product-cell {
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, #d2c0a6 18%);
  border-radius: 24px;
  background: linear-gradient(180deg, #fffdfa, #f6eee3);
  box-shadow: 0 16px 34px rgba(17, 17, 17, 0.06);
}

.profile-product-cell .product-card {
  height: 100%;
}

.profile-product-cell .product-card__media {
  border-radius: 20px;
}

.profile-category-block + .profile-category-block {
  margin-top: 26px;
}

.category-block + .category-block {
  margin-top: 20px;
}

.manage-card {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface-muted);
}

.manage-card img {
  aspect-ratio: 1 / 1;
  border-radius: 14px;
}

.manage-card__body {
  display: grid;
  gap: 10px;
}

.manage-card__body p {
  margin: 0;
  line-height: 1.7;
}

.manage-card__actions {
  display: flex;
  gap: 6px;
}

.composer-layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 20px;
  margin-top: 18px;
}

.composer-form,
.composer-preview {
  display: grid;
  gap: 14px;
}

.step-row {
  flex-wrap: wrap;
}

.step-pill {
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 12px;
  border: 1px solid var(--border);
}

.step-pill.is-active {
  background: var(--accent-soft);
  color: var(--accent);
}

.step-pill.is-done {
  border-color: var(--accent);
  color: var(--text);
}

.detail-card--composer {
  overflow: hidden;
}

.composer-stage {
  margin-top: 18px;
}

.composer-panel {
  display: none;
  gap: 18px;
}

.composer-panel.is-active {
  display: grid;
}

.composer-panel__intro {
  display: grid;
  gap: 8px;
}

.composer-panel__intro strong {
  font-size: 16px;
}

.composer-panel__intro p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.composer-panel__content {
  display: grid;
  gap: 14px;
}

.composer-panel__content--preview {
  grid-template-columns: minmax(0, 1fr);
}

.button-row--composer {
  margin-top: 20px;
  justify-content: space-between;
  flex-wrap: wrap;
}

.composer-progress {
  min-width: 120px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

.upload-thumb--wide {
  aspect-ratio: 16 / 9;
}

.field,
.switch-row {
  display: grid;
  gap: 8px;
}

.field input,
.field textarea,
.field select {
  padding: 13px 14px;
  outline: none;
  resize: vertical;
}

.field input[type="file"] {
  padding: 10px 12px;
}

.field--check {
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-muted);
}

.field--check input[type="checkbox"] {
  width: 20px;
  height: 20px;
  padding: 0;
  margin: 0;
  accent-color: var(--accent);
}

.switch-row input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--accent);
}

.file-chip {
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px dashed var(--border);
  background: var(--surface-muted);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.switch-row {
  grid-template-columns: 1fr auto;
  align-items: center;
}

.switch-button {
  width: 50px;
  height: 30px;
  border: none;
  border-radius: 999px;
  background: var(--surface-strong);
  position: relative;
}

.switch-button::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  transition: 0.2s ease;
}

.switch-button.is-active {
  background: var(--accent);
}

.switch-button.is-active::after {
  left: 24px;
}

.upload-thumb {
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
}

.story-canvas {
  aspect-ratio: 9 / 16;
  border-radius: 24px;
  overflow: hidden;
}

.button,
.icon-button {
  transition: 0.2s ease;
}

.button {
  padding: 12px 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.button--sm {
  padding: 8px 12px;
  font-size: 13px;
  border-radius: 14px;
}

.button--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.button--secondary,
.button--ghost {
  background: var(--surface-muted);
}

.button--danger {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  border-color: #b91c1c;
  color: #fff;
  box-shadow: 0 12px 24px rgba(185, 28, 28, 0.18);
}

.button--danger:hover {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  border-color: #dc2626;
  color: #fff;
}

.button--block {
  width: 100%;
}

.button-stack {
  flex-direction: column;
}

.icon-button {
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 14px;
  background: transparent;
  color: var(--text);
  display: grid;
  place-items: center;
}

.icon-button--with-label {
  width: auto;
  min-width: 40px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.icon-button__label {
  font-size: 11px;
  font-weight: 850;
  letter-spacing: -0.01em;
  color: color-mix(in srgb, currentColor 78%, var(--muted));
  white-space: nowrap;
  user-select: none;
}

.icon-button__label--short {
  display: none;
}

@media (max-width: 520px) {
  .icon-button--with-label {
    padding: 0 10px;
    gap: 7px;
  }

  .icon-button__label--full {
    display: none;
  }

  .icon-button__label--short {
    display: inline;
  }
}

/* Memorial button label behavior: desktop = full label, mobile = short label */
.icon-button--memorial.icon-button--with-label .icon-button__label {
  line-height: 1.15;
}

.icon-button--memorial.icon-button--with-label .icon-button__label--short {
  display: none;
}

@media (max-width: 767px) {
  .icon-button--memorial.icon-button--with-label {
    padding-inline: 10px;
    gap: 6px;
  }

  .icon-button--memorial.icon-button--with-label .icon-button__label {
    font-size: 10.5px;
  }

  .icon-button--memorial.icon-button--with-label .icon-button__label--full {
    display: none !important;
  }

  .icon-button--memorial.icon-button--with-label .icon-button__label--short {
    display: inline !important;
  }
}

.icon-button--small {
  width: 32px;
  height: 32px;
}

.icon-button--light {
  color: #fff;
}

.icon-button:hover,
.button:hover,
.tab-button:hover,
.choice-pill:hover,
.chip-button:hover,
.thread-card:hover,
.product-card:hover,
.explore-tile:hover,
.post-grid__item:hover,
.add-sheet__item:hover {
  transform: translateY(-1px);
}

.composer-bar {
  position: sticky;
  bottom: calc(var(--nav-height) + 18px);
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(14px);
}

.emoji-button {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
  background: color-mix(in srgb, var(--surface-muted) 78%, white 22%);
  display: inline-grid;
  place-items: center;
  font-size: 18px;
  line-height: 1;
}

.emoji-button:hover {
  transform: translateY(-1px);
}

.emoji-popover {
  position: fixed;
  z-index: 9999;
  width: min(320px, calc(100vw - 24px));
  padding: 12px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, var(--accent) 18%);
  background: color-mix(in srgb, var(--surface) 92%, white 8%);
  box-shadow: 0 26px 60px rgba(17, 17, 17, 0.18);
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
  max-height: min(360px, calc(100vh - 140px));
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.emoji-popover button {
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
  background: color-mix(in srgb, var(--surface-muted) 78%, transparent);
  border-radius: 14px;
  font-size: 18px;
  line-height: 1;
  display: grid;
  place-items: center;
}

.emoji-popover button:hover {
  background: rgba(var(--accent-rgb), 0.10);
  border-color: rgba(var(--accent-rgb), 0.22);
  transform: translateY(-1px);
}

.mention-popover {
  position: fixed;
  z-index: 9999;
  width: min(360px, calc(100vw - 16px));
  max-height: min(320px, calc(100vh - 120px));
  overflow: auto;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, var(--accent) 22%);
  background: color-mix(in srgb, var(--surface) 94%, white 6%);
  box-shadow: 0 24px 60px rgba(17, 17, 17, 0.18);
  padding: 8px;
  display: grid;
  gap: 6px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.mention-popover.is-mobile {
  max-height: min(420px, calc(100vh - 96px));
  padding: 10px;
  border-radius: 22px;
}

.mention-popover__item {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 14px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: right;
  transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
  touch-action: manipulation;
  min-height: 56px;
}

.mention-popover__item:hover,
.mention-popover__item.is-active {
  background: color-mix(in srgb, var(--accent-soft) 54%, white 46%);
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border) 78%);
}

.mention-popover__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  background: var(--surface-muted);
}

.mention-popover__body {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.mention-popover__body strong,
.mention-popover__body small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mention-popover__body strong {
  font-size: 14px;
}

.mention-popover__body small,
.mention-popover__empty {
  color: var(--muted);
  font-size: 12px;
}

.mention-popover.is-mobile .mention-popover__item {
  min-height: 62px;
  border-radius: 18px;
  padding: 12px 14px;
}

.mention-popover.is-mobile .mention-popover__avatar {
  width: 44px;
  height: 44px;
}

.mention-popover.is-mobile .mention-popover__body strong {
  font-size: 15px;
}

.mention-popover.is-mobile .mention-popover__body small {
  font-size: 13px;
}

.mention-popover__empty {
  padding: 12px;
  text-align: center;
}

.composer-bar--chat {
  position: static;
  padding: 0;
  border: none;
  background: transparent;
}

.composer-bar--chat .emoji-button {
  width: 40px;
  height: 40px;
  border-radius: 14px;
}

.composer-bar input,
.composer-bar textarea {
  padding: 0 4px;
  direction: rtl;
  text-align: right;
}

.composer-field {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}

.composer-field input,
.composer-field textarea {
  width: 100%;
  min-width: 0;
  padding-inline-start: 52px;
  padding-inline-end: 52px;
}

.composer-field__attach {
  position: absolute;
  inset-inline-start: 52px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  color: var(--text);
}

.composer-field__attach:hover {
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}

.composer-field__emoji {
  position: absolute;
  inset-inline-start: 6px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.composer-field__send {
  position: absolute;
  inset-inline-end: 6px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: var(--accent);
  color: #fff;
  border: 1px solid color-mix(in srgb, var(--accent) 72%, #000);
}

.composer-field__send svg {
  color: currentColor;
}

.composer-field__send:hover {
  background: color-mix(in srgb, var(--accent) 86%, #000 14%);
  transform: translateY(calc(-50% - 1px));
}

.chat-shell .composer-bar--chat {
  padding: 12px 14px;
  border-top: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
}

.chat-shell .composer-field--chat {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.chat-shell .composer-field--chat.has-attachment input,
.chat-shell .composer-field--chat.has-attachment textarea {
  padding-inline-start: 104px;
}

.chat-shell .composer-field--chat .composer-field__emoji,
.chat-shell .composer-field--chat .composer-field__attach,
.chat-shell .composer-field--chat .composer-field__send {
  top: auto;
  bottom: 8px;
  transform: none;
}

.chat-shell .composer-bar--chat textarea[name="body"] {
  min-height: 44px;
  max-height: 120px;
  resize: none;
  overflow: auto;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-muted) 70%, transparent);
  padding-top: 10px;
  padding-bottom: 10px;
  color: var(--text);
}

.chat-attachment-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  background: color-mix(in srgb, var(--surface-muted) 72%, transparent);
}

.chat-attachment-preview__img {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  object-fit: cover;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  flex: 0 0 auto;
}

.chat-attachment-preview__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.chat-attachment-preview__meta strong {
  font-size: 12px;
  color: var(--text);
}

.chat-attachment-preview__meta span {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-attachment-preview__remove {
  flex: 0 0 auto;
}

.chat-attachment {
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  border-radius: 16px;
  overflow: hidden;
  cursor: zoom-in;
}

.chat-attachment__img {
  display: block;
  width: 100%;
  max-width: 320px;
  max-height: 260px;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}

.chat-attachment--pending .chat-attachment__img {
  opacity: 0.92;
  filter: saturate(0.96);
}

.chat-reply-bar {
  position: absolute;
  inset-inline-start: 10px;
  inset-inline-end: 10px;
  inset-block-end: calc(100% + 8px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: 0 16px 40px rgba(17, 17, 17, 0.12);
}

.chat-reply-bar__label {
  font-size: 11px;
  font-weight: 700;
  color: color-mix(in srgb, var(--text) 78%, var(--muted));
}

.chat-reply-bar__snippet {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.chat-reply-bar__close {
  width: 34px;
  height: 34px;
  border-radius: 14px;
}

.chat-shell .composer-field--chat {
  width: 100%;
}

.auth-card {
  width: min(100%, 420px);
  padding: 28px 24px;
  display: grid;
  gap: 18px;
  text-align: right;
}

.auth-card__brand {
  display: flex;
  justify-content: center;
}

.auth-card__home,
.auth-card__caption {
  color: var(--muted);
}

.auth-card__home {
  justify-self: center;
  font-size: 13px;
}

.auth-card__caption {
  line-height: 1.9;
}

.auth-inline-ltr {
  display: inline-block;
  direction: ltr;
  unicode-bidi: isolate;
  text-align: left;
  letter-spacing: 0.04em;
}

.auth-card__footer {
  text-align: center;
}

.otp-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.otp-input {
  text-align: center;
  letter-spacing: 0.35em;
  font-size: 22px;
  font-weight: 700;
}

.otp-row input {
  width: 100%;
  height: 58px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-muted);
  color: var(--text);
  text-align: center;
  font-size: 22px;
  font-weight: 700;
}

.story-viewer {
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  display: grid;
  justify-items: center;
  align-items: stretch;
  overflow: hidden;
}

.story-viewer__frame {
  width: min(100%, 430px);
  height: 100%;
  max-height: 100%;
  min-height: 0;
  position: relative;
  background: #111;
}

.story-viewer__progress {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  height: 3px;
  display: flex;
  gap: 6px;
  background: transparent;
  z-index: 2;
}

.story-progress__seg {
  flex: 1;
  height: 100%;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  overflow: hidden;
}

.story-progress__fill {
  display: block;
  width: 0;
  height: 100%;
  background: #fff;
}

.story-viewer__top {
  position: absolute;
  top: 30px;
  left: 14px;
  right: 14px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
}

.story-viewer__top .user-line {
  flex: 1;
}

/* Pause / Play overlay (center) */
.story-pause-toggle {
  display: none !important;
}

/* Story viewer controls (prev / pause / next) */
.story-viewer__controls {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.story-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  appearance: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(15, 23, 42, 0.10);
  color: #fff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24);
  opacity: 0;
  transition: opacity 160ms ease, transform 160ms ease, background-color 160ms ease;
  text-decoration: none;
}

.story-viewer.is-controls-visible .story-control {
  opacity: 0.78;
  pointer-events: auto;
}

.story-control:hover {
  opacity: 0.96;
  background: rgba(15, 23, 42, 0.18);
}

.story-control:focus-visible {
  outline: 2px solid rgba(0, 149, 246, 0.7);
  outline-offset: 3px;
}

.story-control:active {
  transform: translateY(-50%) scale(0.98);
}

.story-control svg {
  width: 22px;
  height: 22px;
}

.story-control--prev {
  right: 12px;
}

.story-control--next {
  left: 12px;
}

.story-control--pause {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  opacity: 0;
}

.story-control--pause:active {
  transform: translate(-50%, -50%) scale(0.98);
}

.story-control__icon {
  display: grid;
  place-items: center;
}

.story-control__icon--play {
  display: none;
}

.story-control.is-paused .story-control__icon--pause {
  display: none;
}

.story-control.is-paused .story-control__icon--play {
  display: grid;
}

.story-viewers-list {
  display: grid;
  gap: 10px;
}

.story-viewer-line {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-muted);
}

.follow-list {
  display: grid;
  gap: 10px;
}

.follow-user {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-muted);
}

.likes-list {
  display: grid;
  gap: 10px;
}

.like-user {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-muted);
}

.counter--link {
  text-decoration: none;
}

.counter--link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.profile-stat--link {
  cursor: pointer;
}

.profile-stat--link:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  background: color-mix(in srgb, var(--surface) 78%, var(--accent-soft) 22%);
}

.story-sound-toggle {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(17, 17, 17, 0.28);
  backdrop-filter: blur(10px);
}

.story-sound-toggle__icon {
  width: 20px;
  height: 20px;
}

.story-sound-toggle.is-muted .story-sound-toggle__icon--on {
  display: none;
}

.story-sound-toggle.is-on .story-sound-toggle__icon--muted {
  display: none;
}

.story-sound-toggle.is-on {
  background: rgba(0, 149, 246, 0.18);
  box-shadow: 0 10px 22px rgba(0, 149, 246, 0.18);
}

.story-viewer__media {
  width: 100%;
  height: 100vh;
  object-fit: cover;
}

.story-viewer--contain .story-viewer__media:not(.story-viewer__media--video) {
  object-fit: contain;
  object-position: center;
  background: #000;
}

.story-viewer__text {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: #111827;
  color: #fff;
  z-index: 1;
}

.story-viewer__text--live {
  position: absolute;
  inset: 0;
}

.story-text-card {
  width: min(520px, 100%);
  padding: 18px 18px;
  border-radius: 22px;
  background: rgba(0, 0, 0, 0.26);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
  text-align: right;
  direction: rtl;
  line-height: 1.9;
  white-space: pre-wrap;
  text-wrap: pretty;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.26);
}

.story-text-card a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.44);
  text-underline-offset: 3px;
}

.story-viewer__media--video {
  object-fit: contain;
  object-position: center;
  background: #000;
}

.story-viewer__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.story-viewer__caption {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 72px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(17, 17, 17, 0.48);
  color: #fff;
  line-height: 1.8;
  direction: rtl;
  text-align: right;
  z-index: 2;
  display: grid;
  gap: 10px;
}

.story-viewer__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  direction: ltr;
  text-align: left;
  font-size: 12px;
}

.story-viewer__actions {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 16px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.story-viewer__metric {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(17, 17, 17, 0.58);
  color: #fff;
  backdrop-filter: blur(10px);
}

.story-viewer__metric svg {
  width: 18px;
  height: 18px;
}

.story-viewer__metric--button {
  border: none;
  text-decoration: none;
}

.story-viewer__metric--button.is-active {
  color: #ff8686;
}

[data-otp-resend-button][disabled] {
  cursor: not-allowed;
  opacity: 0.7;
}

.mini-menu--story .mini-menu__panel {
  background: rgba(17, 17, 17, 0.84);
  border-color: rgba(255, 255, 255, 0.18);
}

.mini-menu--story .icon-button {
  color: #fff;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.5);
  padding: 16px;
  padding-bottom: max(16px, calc(env(safe-area-inset-bottom) + 16px));
}

.modal-sheet {
  width: min(100%, 520px);
  padding: 16px;
  border-radius: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  display: grid;
  gap: 14px;
  grid-template-rows: auto 1fr;
  max-height: calc(100dvh - 24px);
  overflow: hidden;
}

.modal-sheet__body {
  display: grid;
  gap: 12px;
  overflow: auto;
  min-height: 0;
}

/* In modals we often render a form inside a "detail-card". Flatten it to avoid double cards. */
.modal-sheet__body .detail-card {
  border: 0;
  box-shadow: none;
  background: transparent;
  padding: 0;
}

.modal-actions {
  position: sticky;
  bottom: -1px;
  padding-top: 10px;
  background: linear-gradient(180deg, transparent, var(--surface) 34%);
}

.camp-proposal-panel {
  display: grid;
  gap: 14px;
}

.camp-proposal-panel .detail-card__header {
  margin-bottom: 0;
}

.camp-proposal-panel .detail-card__header p {
  max-width: 66ch;
}

.camp-proposal-panel__actions {
  justify-content: flex-start;
  margin-top: 4px;
}

.camp-proposal-panel__actions .button {
  min-height: 44px;
  padding-inline: 18px;
}

.camp-proposal-form {
  display: grid;
  gap: 12px;
}

.camp-proposal-form .camp-form__grid {
  gap: 12px;
}

.camp-proposal-form textarea {
  min-height: 108px;
  resize: vertical;
}

.camp-proposal-form .camp-form__checkbox {
  padding: 12px 14px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 88%, var(--accent-soft) 12%);
}

.camp-proposal-form .modal-actions {
  margin-top: 2px;
}

.rules-box {
  max-height: 140px;
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  border-radius: 16px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--surface) 72%, var(--surface-muted));
  line-height: 1.8;
  white-space: pre-wrap;
}

.rules-box--compact {
  max-height: 112px;
  font-size: 12px;
}

.group-request-modal .rules-box--compact {
  max-height: 92px;
}

.group-request-modal .field--check.group-request__privacy {
  padding: 10px 12px;
  gap: 10px;
  border-radius: 14px;
  line-height: 1.6;
  font-size: 12px;
}

.group-request-modal .field--check.group-request__privacy input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

.group-request-modal .modal-actions {
  padding-top: 6px;
}

.group-request-modal .button-row {
  gap: 10px;
  flex-wrap: wrap;
}

.group-request-modal .button-row .button {
  flex: 0 0 auto;
}

@media (max-width: 520px) {
  .group-request-modal .button-row .button {
    flex: 1 1 auto;
  }
}

.modal-backdrop--image {
  place-items: center;
  padding: 24px;
}

.is-modal-open {
  overflow: hidden;
}

.upload-progress-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 16px;
}

.upload-progress-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.upload-progress-card {
  position: relative;
  width: min(560px, calc(100% - 24px));
  border-radius: 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 16px 16px 14px;
  display: grid;
  gap: 12px;
}

.upload-progress-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.upload-progress-card__head strong {
  font-size: 14px;
  font-weight: 950;
}

.upload-progress-card__head .icon-button {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  font-size: 20px;
  line-height: 1;
}

.upload-progress-card__status {
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.9;
}

.upload-progress-bar {
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  background: color-mix(in srgb, var(--surface-muted) 80%, transparent);
}

.upload-progress-bar__fill {
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #22c55e, #0095f6);
  transition: width 120ms linear;
}

.upload-progress-modal.is-indeterminate .upload-progress-bar__fill {
  width: 40%;
  animation: upload-progress-indeterminate 900ms ease-in-out infinite;
}

@keyframes upload-progress-indeterminate {
  0% { transform: translateX(-120%); }
  50% { transform: translateX(70%); }
  100% { transform: translateX(240%); }
}

.upload-progress-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
}

.upload-progress-card__footer {
  display: flex;
  justify-content: flex-end;
}

.upload-progress-modal.is-error .upload-progress-card__status {
  color: var(--danger);
  font-weight: 800;
}

.modal-sheet--image {
  width: min(100%, 960px);
}

.image-modal {
  display: grid;
  place-items: center;
  border-radius: 22px;
  overflow: hidden;
  background: #111;
}

.image-modal--nav {
  position: relative;
}

.image-modal__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(17, 17, 17, 0.6);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: 0.2s ease;
  backdrop-filter: blur(6px);
}

.image-modal__nav svg {
  width: 20px;
  height: 20px;
}

.image-modal__nav:hover {
  background: rgba(17, 17, 17, 0.82);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-50%) scale(1.04);
}

.image-modal__nav--prev {
  inset-inline-start: 10px;
}

.image-modal__nav--next {
  inset-inline-end: 10px;
}

.image-modal img {
  display: block;
  width: 100%;
  max-height: 80vh;
  object-fit: contain;
}

@media (max-width: 860px) {
  .product-hero::before {
    height: 150px;
  }

  .product-detail-card--showcase {
    padding: 16px;
    border-radius: 24px;
  }

  .product-detail-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .product-detail-card__media {
    position: static;
  }

  .product-summary-card {
    padding: 18px;
  }

  .product-store-ribbon {
    flex-direction: column;
    align-items: stretch;
  }

  .product-store-ribbon__actions,
  .product-summary-card__actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .product-summary-action {
    flex: 1 1 220px;
  }

  .product-quick-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-specs__item {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
}

.share-users,
.share-apps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.share-user,
.share-app {
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface-muted);
  display: grid;
  justify-items: center;
  gap: 8px;
}

.share-app span {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
}

.share-app.is-whatsapp span {
  background: #25d366;
}

.share-app.is-instagram span {
  background: linear-gradient(135deg, #f9ce34, #ee2a7b, #6228d7);
}

.share-app.is-sms span {
  background: #3b82f6;
}

.share-app.is-copy span {
  background: #52525b;
}

.mini-menu {
  position: relative;
  z-index: 80;
}

.mini-menu__panel {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 8px);
  min-width: 108px;
  padding: 8px;
  display: flex;
  gap: 6px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
  z-index: 120;
}

.post-card__header {
  position: relative;
  z-index: 10;
}

.post-card__media {
  position: relative;
  z-index: 1;
}

.mini-menu__panel form {
  margin: 0;
  display: flex;
}

.mini-menu--header {
  z-index: 180;
}

.mini-menu--header .mini-menu__panel {
  min-width: min(260px, calc(100vw - 24px));
  padding: 8px;
  flex-direction: column;
  gap: 4px;
  border-radius: 18px;
  overflow: hidden;
  transform-origin: top right;
  animation: headerMenuIn 0.18s ease-out;
}

.header-dropdown__item {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-radius: 12px;
  padding: 8px 10px;
  line-height: 1.25;
  text-align: right;
}

.header-dropdown__item:hover {
  background: var(--surface-muted);
}

.header-dropdown__item.is-active {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: color-mix(in srgb, var(--accent) 78%, var(--text));
}

.header-dropdown__item-main {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.header-dropdown__item-main svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.header-dropdown__item-main span {
  font-weight: 700;
  white-space: nowrap;
}

.header-dropdown__badge {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 88%, black 12%);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@keyframes headerMenuIn {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.empty-state {
  padding: 24px;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: 18px;
  color: var(--muted);
}

.profile-locked {
  margin: 14px 0;
  padding: 12px 14px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, var(--accent) 22%);
  background:
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--accent-soft) 72%, transparent), transparent 58%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, white 8%), var(--surface));
  box-shadow: 0 12px 26px rgba(17, 17, 17, 0.05);
  color: var(--text);
}

.profile-locked__icon svg {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  opacity: 0.9;
}

.profile-locked__text {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.profile-locked__text strong {
  font-size: 13px;
  line-height: 1.25;
}

.profile-locked__text .muted {
  font-size: 12px;
  line-height: 1.6;
}

@media (max-width: 767px) {
  .app-main {
    padding-inline: 10px;
  }

  .app-header__inner {
    padding-inline: 12px;
    gap: 10px;
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .app-header__center {
    justify-content: flex-end;
  }

  .app-header__title {
    width: 100%;
    max-width: 100%;
    padding: 0;
    font-size: 14px;
    text-align: right;
  }

  .mini-menu--header .mini-menu__panel {
    position: fixed;
    top: calc(var(--header-height) - 2px);
    inset-inline-start: 10px;
    inset-inline-end: 10px;
    min-width: 0;
    max-height: calc(100dvh - var(--header-height) - 14px);
    overflow: auto;
    padding: 10px;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--border) 88%, var(--accent));
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    backdrop-filter: blur(12px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.2);
    z-index: 220;
  }

  .header-dropdown__item {
    min-height: 46px;
    padding: 10px 12px;
    border-radius: 13px;
  }

  .header-dropdown__item-main span {
    font-size: 13px;
    font-weight: 800;
  }

  .product-gallery-shell__top {
    inset: 12px 12px auto;
  }

  .product-gallery-shell__badge {
    min-height: 32px;
    padding-inline: 10px;
  }

  .product-quick-stats {
    grid-template-columns: 1fr;
  }

  .product-section-heading {
    align-items: flex-start;
  }

  .post-card__header,
  .post-card__body {
    padding: 16px;
  }

  .post-card__media {
    margin-inline: 10px;
    border-radius: 22px;
  }

  .search-page__summary {
    flex-direction: column;
    align-items: stretch;
  }

  .search-results-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .post-preview,
  .composer-layout {
    grid-template-columns: 1fr;
  }

  .profile-card__top {
    grid-template-columns: 1fr;
  }

  .post-preview__media {
    max-width: 180px;
  }

  .product-grid,
  .explore-grid,
  .post-grid,
  .upload-grid,
  .share-users,
  .share-apps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .thread-card__link {
    grid-template-columns: 42px 1fr auto;
    display: grid;
  }
}

@media (max-width: 520px) {
  .bottom-nav {
    --nav-float-offset: 0px;
    padding-inline: 6px;
  }

  .bottom-nav__inner {
    border-radius: 14px 14px 0 0;
    padding-inline: 4px;
  }

  .product-detail-card--showcase,
  .product-summary-card,
  .product-qa-card {
    border-radius: 22px;
  }

  .product-store-ribbon__profile {
    align-items: flex-start;
  }

  .product-store-ribbon__avatar {
    width: 48px;
    height: 48px;
  }

  .product-store-ribbon__actions {
    justify-content: flex-start;
  }

  .product-summary-card__price {
    padding: 16px;
  }

  .product-summary-action {
    width: 100%;
  }

  .product-contact-list {
    flex-direction: column;
  }

  .product-contact-chip {
    width: 100%;
    justify-content: flex-start;
  }

  .search-hero-card {
    padding: 14px;
    border-radius: 24px;
  }

  .search-box--hero {
    min-height: 56px;
    border-radius: 18px;
  }

  .section-card,
  .detail-card,
  .profile-card,
  .post-preview,
  .add-sheet,
  .auth-card,
  .chat-shell {
    padding: 14px;
  }

  .explore-grid,
  .product-grid,
  .post-grid {
    gap: 6px;
  }

  .post-card__body .action-row {
    padding: 10px;
  }

  .post-card__body .action-row__group {
    gap: 6px;
  }

  .post-card__footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

/* runtime overrides for unified RTL + newer UI behaviors */
body {
  direction: rtl;
}

.field input,
.field textarea,
.field select {
  text-align: right;
}

.share-link input {
  direction: ltr;
  text-align: left;
}

.product-card__media-link,
.product-card__title-link {
  display: block;
}

.product-card__store {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  font-size: 12px;
  color: var(--muted);
}

.product-card__store-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
}

.price-row__unavailable {
  color: var(--danger);
  font-weight: 700;
}

.story-viewer__progress span {
  animation: none !important;
}

.story-viewer__nav {
  display: none;
}

.story-viewer__nav--prev {
  right: 0;
  left: auto;
}

.story-viewer__nav--next {
  left: 0;
  right: auto;
}

/* profile layout fixes (desktop + mobile) */
.profile-card {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--border) 82%, var(--accent) 18%);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, white 8%), var(--surface)),
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 10%, transparent), transparent 40%);
  box-shadow: 0 26px 54px rgba(17, 17, 17, 0.10);
}

.profile-card::before {
  content: "";
  position: absolute;
  inset: -40px -40px auto;
  height: 260px;
  border-radius: 40px;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 38%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 55%),
    radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--text) 8%, transparent), transparent 60%);
  opacity: 0.75;
}

.profile-card > * {
  position: relative;
  z-index: 1;
}

.profile-card__top {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  direction: rtl;
  text-align: right;
}

.profile-card__avatar {
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: var(--surface-muted);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.14);
}

.profile-story-link .profile-card__avatar {
  border-radius: 50%;
  border: 3px solid var(--surface);
}

.profile-story-link {
  grid-column: 1;
  justify-self: end;
}

.profile-card__meta {
  grid-column: 2;
  min-width: 0;
}

.profile-card__line {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.profile-card__line strong {
  font-size: 16px;
  font-weight: 950;
  letter-spacing: -0.2px;
}

.profile-card__line .chip-button {
  gap: 8px;
}

.profile-card__line .chip-button svg {
  width: 16px;
  height: 16px;
}

.profile-card__actions .button svg {
  width: 16px;
  height: 16px;
}

.profile-card__line--top {
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.profile-card__actions--compact {
  margin-inline-start: 0;
  justify-content: flex-end;
  gap: 8px;
}

.profile-card__actions--compact .chip-button,
.chip-button--compact,
.profile-card__actions--compact .chip-button:visited {
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 999px;
  border-color: color-mix(in srgb, var(--border) 82%, var(--accent) 18%);
  background: color-mix(in srgb, var(--surface) 88%, var(--accent-soft) 12%);
  color: var(--text);
  font-size: 12px;
  line-height: 1;
}

.profile-card__actions--compact .chip-button svg {
  width: 15px;
  height: 15px;
}

.chip-button--compact svg {
  width: 15px;
  height: 15px;
}

.profile-follow-form--compact {
  margin: 0;
}

.profile-follow-form--compact .chip-button {
  cursor: pointer;
}

.profile-follow-form--compact .chip-button.is-active {
  border-color: color-mix(in srgb, var(--danger) 40%, var(--border) 60%);
  color: var(--danger);
}

.profile-card__line .button {
  margin-inline-start: auto;
}

.profile-follow-form {
  margin: 0;
  margin-inline-start: auto;
}

.profile-card__actions {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.profile-card__stats {
  justify-content: flex-start;
  gap: 14px;
}

.profile-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}

.profile-stat {
  border: 1px solid color-mix(in srgb, var(--border) 82%, var(--accent) 18%);
  background: color-mix(in srgb, var(--surface) 84%, var(--accent-soft) 16%);
  border-radius: 18px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
}

.profile-stat__icon {
  width: 34px;
  height: 34px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent-soft) 80%, white 20%);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--border) 80%, var(--accent) 20%);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.06);
  flex: 0 0 auto;
}

.profile-stat__icon svg {
  width: 18px;
  height: 18px;
}

.profile-stat__text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.profile-stat__value {
  font-size: 14px;
  font-weight: 950;
  letter-spacing: -0.2px;
}

.profile-stat__label {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-card__bio h1 {
  margin: 0;
  font-size: 34px;
  line-height: 1.35;
}

.profile-card__bio p {
  margin: 0;
}

/* keep story header nav order stable regardless of rtl direction */
.stories-header__actions {
  direction: ltr;
}

	@media (max-width: 767px) {
	  .profile-card__top {
	    grid-template-columns: 1fr;
	    gap: 14px;
	  }
	
	  .profile-story-link {
	    grid-column: auto;
	    justify-self: center;
	  }

  .profile-card__meta {
    grid-column: auto;
  }

  .profile-card__line .button {
    margin-inline-start: 0;
  }

  .profile-follow-form {
    margin-inline-start: 0;
  }

  .profile-card__actions {
    margin-inline-start: 0;
  }

  .profile-card__bio h1 {
    font-size: 28px;
  }

  .profile-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .profile-stat {
    border-radius: 16px;
    padding: 9px 10px;
    min-height: 52px;
  }

  .profile-stat__icon {
    width: 32px;
    height: 32px;
    border-radius: 13px;
  }

  .profile-stat__value {
    font-size: 13.5px;
  }
}

/* admin panel */
.admin-body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at top right, rgba(0, 149, 246, 0.1), transparent 35%), var(--bg);
}

.admin-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 228px minmax(0, 1fr);
}

.admin-sidebar {
  border-inline-start: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  padding: 12px 10px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
}

.admin-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  font-weight: 700;
}

.admin-brand img {
  height: 30px;
  width: auto;
}

.admin-nav__eyebrow {
  display: block;
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.admin-nav {
  display: grid;
  gap: 12px;
}

.admin-nav--sections {
  align-content: start;
}

.admin-nav__section {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 22px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, transparent), color-mix(in srgb, var(--surface-muted) 62%, transparent));
  box-shadow: 0 14px 30px color-mix(in srgb, #000 6%, transparent);
}

.admin-nav__section-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 2px 2px;
}

.admin-nav__section-icon {
  width: 42px;
  height: 42px;
  border-radius: 16px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
}

.admin-nav__section-icon svg {
  width: 20px;
  height: 20px;
}

.admin-nav__section-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.admin-nav__section-copy strong {
  font-size: 13px;
  line-height: 1.3;
  color: var(--text);
}

.admin-nav__section-copy small {
  color: var(--muted);
  font-size: 11px;
}

.admin-nav__section-items {
  display: grid;
  gap: 8px;
}

.admin-nav__item {
  position: relative;
  min-height: 48px;
  padding: 10px 12px;
  border-radius: 16px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 2px;
  align-items: center;
  color: var(--muted);
  border: 1px solid transparent;
  background: transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.admin-nav__icon {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--surface-muted) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  color: var(--muted);
}

.admin-nav__icon svg {
  width: 20px;
  height: 20px;
}

.admin-nav__item:hover {
  background: color-mix(in srgb, var(--surface-muted) 68%, transparent);
  border-color: color-mix(in srgb, var(--border) 70%, transparent);
}

.admin-nav__label {
  grid-column: 2;
  grid-row: 1;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}

.admin-nav__hint {
  grid-column: 2;
  grid-row: 2;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
  max-width: 100%;
  text-align: start;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-nav__item.is-active {
  color: var(--text);
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface-muted) 80%, transparent));
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
  box-shadow: var(--shadow);
}

.admin-nav__item.is-active .admin-nav__icon {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-muted));
}

.admin-nav__item.is-active::before {
  content: "";
  position: absolute;
  inset-block: 10px;
  inset-inline-start: 10px;
  width: 3px;
  border-radius: 999px;
  background: var(--accent);
}

.admin-sidebar__footer {
  display: grid;
  gap: 6px;
}

.avatar-editor {
  display: grid;
  grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  margin-bottom: 18px;
}

.avatar-editor__current {
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface-muted);
}

.avatar-editor__current img {
  width: 112px;
  height: 112px;
  border-radius: 999px;
  object-fit: cover;
  border: 4px solid var(--surface);
  box-shadow: var(--shadow);
}

.avatar-editor__current strong {
  font-size: 15px;
}

.avatar-editor__current span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.avatar-editor__workspace {
  display: grid;
  gap: 12px;
}

.avatar-editor__pick {
  width: fit-content;
}

.avatar-editor__canvas-wrap {
  width: 100%;
  max-width: 280px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #e5e7eb;
  box-shadow: var(--shadow);
}

.avatar-editor__canvas-wrap canvas {
  display: block;
  width: 100%;
  height: auto;
  cursor: grab;
  touch-action: none;
}

.avatar-editor__canvas-wrap canvas:active {
  cursor: grabbing;
}

.avatar-editor__hint {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.8;
}

.settings-panel {
  padding: 20px;
  gap: 18px;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 9%, transparent), transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, white 8%), var(--surface));
}

.settings-panel .section-title {
  align-items: start;
}

.settings-panel .section-title span {
  max-width: 34ch;
  color: var(--muted);
  line-height: 1.9;
}

.settings-panel__header {
  align-items: start;
}

.settings-panel__header span {
  max-width: 34ch;
  color: var(--muted);
  line-height: 1.9;
}

.settings-panel__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.settings-panel__grid .field:nth-child(3) {
  grid-column: 1 / -1;
}

.settings-panel .field {
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, var(--accent));
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface) 78%, var(--surface-muted));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.settings-panel .field span {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.settings-panel .field input,
.settings-panel .field textarea,
.settings-panel .field select {
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  background: color-mix(in srgb, var(--surface-muted) 78%, white 22%);
}

.settings-panel .field input:focus,
.settings-panel .field textarea:focus,
.settings-panel .field select:focus {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--border));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent);
}

.settings-panel__field--wide {
  grid-column: 1 / -1;
}

.settings-panel__actions {
  justify-content: flex-end;
}

.settings-panel__actions .button {
  min-height: 48px;
  padding-inline: 22px;
  border-radius: 16px;
  box-shadow: 0 14px 26px rgba(17, 17, 17, 0.08);
}

.settings-panel__actions .button.button--sm {
  min-height: auto;
  padding: 8px 12px;
  border-radius: 14px;
}

.settings-panel__logout {
  min-width: 180px;
  background: linear-gradient(180deg, color-mix(in srgb, #ef4444 10%, var(--surface-muted)), var(--surface-muted));
  border-color: color-mix(in srgb, #ef4444 18%, var(--border));
  color: #991b1b;
}

.settings-panel--danger .button--secondary {
  min-width: 180px;
  background: linear-gradient(180deg, color-mix(in srgb, #ef4444 10%, var(--surface-muted)), var(--surface-muted));
  border-color: color-mix(in srgb, #ef4444 18%, var(--border));
  color: #991b1b;
}

.settings-panel--danger .button--secondary.button--sm {
  min-width: auto;
}

.settings-panel--admin {
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 12%, transparent), transparent 46%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-muted) 74%, white 26%), var(--surface));
}

.settings-panel--danger {
  background:
    radial-gradient(circle at top right, rgba(239, 68, 68, 0.09), transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-muted) 84%, white 16%), var(--surface));
}

.settings-shell {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

@media (max-width: 860px) {
  .settings-shell {
    grid-template-columns: 1fr;
  }
}

.settings-nav {
  padding: 18px;
}

.settings-nav__list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.settings-nav__item {
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: center;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 16px;
  text-decoration: none;
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  background: color-mix(in srgb, var(--surface) 78%, var(--surface-muted));
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.settings-nav__item:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
}

.settings-nav__item.is-active {
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 16%, transparent), transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 90%, white 10%), var(--surface));
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}

.settings-nav__icon svg {
  width: 20px;
  height: 20px;
}

.settings-nav__label {
  font-weight: 800;
  font-size: 13px;
}

.settings-nav__footer {
  margin-top: 14px;
}

.settings-logout-btn {
  width: 100%;
  justify-content: center;
  gap: 8px;
  border-color: color-mix(in srgb, #ef4444 18%, var(--border));
  background: linear-gradient(180deg, color-mix(in srgb, #ef4444 8%, var(--surface-muted)), var(--surface-muted));
  color: #991b1b;
  box-shadow: none;
}

.settings-logout-btn:hover {
  transform: translateY(-1px);
}

.settings-logout-btn__icon svg {
  width: 18px;
  height: 18px;
}

.settings-logout-btn__label {
  font-weight: 800;
}

.settings-main {
  display: grid;
  gap: 16px;
}

.finance-shell {
  align-items: stretch;
}

.finance-nav {
  position: sticky;
  top: 84px;
}

.finance-nav .settings-nav__list {
  gap: 8px;
}

.finance-nav .settings-nav__item {
  grid-template-columns: 34px 1fr;
  min-height: 48px;
  padding: 10px 12px;
  border-radius: 14px;
}

.finance-nav .settings-nav__label {
  font-size: 12.5px;
  line-height: 1.35;
}

.finance-main {
  gap: 14px;
}

.finance-panel {
  padding: 18px;
  border-radius: 22px;
}

.finance-panel .section-title {
  gap: 4px;
}

.finance-panel .section-title strong {
  font-size: 16px;
}

.finance-panel .section-title span {
  font-size: 12px;
}

.finance-panel .profile-card__stats {
  gap: 10px;
}

.finance-panel .profile-stat {
  min-height: 74px;
  border-radius: 18px;
}

.finance-panel .admin-table th,
.finance-panel .admin-table td {
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 12.5px;
}

.finance-panel .admin-actions {
  gap: 6px;
}

.finance-panel .admin-actions .button {
  min-width: auto;
}

.finance-account-add-btn {
  padding-inline: 14px;
  gap: 6px;
  border-radius: 12px;
}

.finance-split-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.finance-balance-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  background: color-mix(in srgb, var(--surface-muted) 70%, var(--surface) 30%);
  white-space: nowrap;
}

.finance-balance-pill svg {
  width: 18px;
  height: 18px;
  color: var(--accent);
}

.finance-balance-pill strong {
  font-size: 13px;
  line-height: 1;
}

.finance-balance-pill span {
  font-size: 11px;
  color: var(--text-muted);
}

.finance-tx-list {
  display: grid;
  gap: 10px;
}

.finance-tx {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--border) 68%, transparent);
  background: color-mix(in srgb, var(--surface-muted) 72%, var(--surface) 28%);
}

.finance-tx__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.finance-tx__top strong {
  font-size: 13px;
  line-height: 1.55;
}

.finance-tx__amt {
  font-size: 12px;
  font-weight: 800;
  color: var(--accent);
  white-space: nowrap;
}

.finance-tx__amt--pos {
  color: #16a34a;
}

.finance-tx__amt--neg {
  color: #ef4444;
}

.finance-tx__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--text-muted);
  font-size: 11.5px;
}

.finance-infinite-loading {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-muted) 82%, var(--surface) 18%);
  color: var(--text-muted);
  font-size: 12px;
  text-align: center;
}

.finance-infinite-sentinel {
  height: 1px;
}

.finance-topup__preview {
  padding: 14px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, white 4%), color-mix(in srgb, var(--surface) 90%, var(--surface-muted) 10%));
}

.finance-topup__preview-head {
  display: grid;
  gap: 4px;
}

.finance-topup__preview-head strong {
  font-size: 14px;
}

.finance-topup__preview-head span {
  font-size: 12px;
  color: var(--text-muted);
}

.finance-topup__preview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.finance-topup__preview-row {
  padding: 12px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  background: color-mix(in srgb, var(--surface-muted) 70%, var(--surface) 30%);
  display: grid;
  gap: 6px;
}

.finance-topup__preview-row span {
  font-size: 11.5px;
  color: var(--text-muted);
}

.finance-topup__preview-row strong {
  font-size: 13px;
  line-height: 1.2;
}

.finance-help {
  display: grid;
  gap: 6px;
  padding: 12px 12px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-muted) 78%, var(--surface) 22%);
  color: var(--text-muted);
  font-size: 12px;
}

.finance-exchange__rates {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.finance-rate-chip {
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 12%, transparent), transparent 62%),
    color-mix(in srgb, var(--surface-muted) 66%, var(--surface) 34%);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.finance-rate-chip span {
  font-size: 12px;
  color: var(--text-muted);
}

.finance-rate-chip strong {
  font-size: 13px;
}

.finance-history-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
  margin-bottom: 16px;
}

.finance-history-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  border-radius: 18px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, white 6%), var(--surface)),
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 12%, transparent), transparent 55%);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
}

.finance-history-stat__icon {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border-radius: 14px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, white 90%);
}

.finance-history-stat__icon svg {
  width: 19px;
  height: 19px;
}

.finance-history-stat__body {
  display: grid;
  gap: 2px;
}

.finance-history-stat__body strong {
  font-size: 18px;
  line-height: 1;
}

.finance-history-stat__body span {
  font-size: 12px;
  color: var(--text-muted);
}

.finance-history-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.finance-history-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  border-radius: 22px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 97%, white 3%), color-mix(in srgb, var(--surface) 92%, var(--surface-muted) 8%));
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.06);
}

.finance-history-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.finance-history-card__head strong {
  display: block;
  font-size: 14px;
}

.finance-history-card__head span {
  font-size: 11px;
  color: var(--text-muted);
}

.finance-history-card__icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: inline-grid;
  place-items: center;
  border-radius: 14px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 11%, white 89%);
}

.finance-history-card__icon svg {
  width: 18px;
  height: 18px;
}

.finance-history-list {
  display: grid;
  gap: 10px;
}

.finance-history-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 13px;
  border: 1px solid color-mix(in srgb, var(--border) 64%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-muted) 72%, var(--surface) 28%);
}

.finance-history-item__marker {
  width: 8px;
  height: 40px;
  border-radius: 999px;
  flex: 0 0 8px;
  opacity: 0.95;
}

.finance-history-item__marker--wallet {
  background: linear-gradient(180deg, #34d399, #0ea5a4);
}

.finance-history-item__marker--cash {
  background: linear-gradient(180deg, #60a5fa, #2563eb);
}

.finance-history-item__marker--exchange {
  background: linear-gradient(180deg, #f59e0b, #f97316);
}

.finance-history-item__marker--settlement {
  background: linear-gradient(180deg, #a78bfa, #7c3aed);
}

.finance-history-item__content {
  display: grid;
  gap: 7px;
  width: 100%;
  min-width: 0;
}

.finance-history-item__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.finance-history-item__top strong {
  font-size: 13px;
  line-height: 1.5;
}

.finance-history-item__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--text-muted);
  font-size: 11.5px;
}

.finance-history-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, white 90%);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.finance-history-empty {
  min-height: 140px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-muted) 80%, var(--surface) 20%);
}

@media (max-width: 860px) {
  .finance-nav {
    position: static;
  }

  .finance-nav .settings-nav__item {
    min-height: 44px;
    padding: 9px 11px;
  }

  .finance-panel {
    padding: 15px;
    border-radius: 18px;
  }

  .finance-split-head {
    align-items: center;
  }

  .finance-topup__preview-grid {
    grid-template-columns: 1fr;
  }

  .finance-exchange__rates {
    grid-template-columns: 1fr;
  }

  .finance-history-stats,
  .finance-history-grid {
    grid-template-columns: 1fr;
  }

  .finance-history-stat,
  .finance-history-card {
    border-radius: 18px;
  }

  .finance-history-item {
    padding: 11px 12px;
  }
}

.toggle {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, var(--accent));
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-muted) 70%, white 30%);
}

.toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.toggle__ui {
  width: 46px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 75%, var(--surface-muted));
  position: relative;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.toggle__ui::after {
  content: "";
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--surface);
  position: absolute;
  top: 2px;
  right: 2px;
  transition: transform .16s ease, background .16s ease;
  box-shadow: 0 10px 18px rgba(17, 17, 17, 0.18);
}

.toggle input:checked + .toggle__ui {
  background: color-mix(in srgb, var(--accent) 22%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}

.toggle input:checked + .toggle__ui::after {
  transform: translateX(-18px);
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
}

.toggle__text strong {
  display: block;
  font-weight: 900;
}

.toggle__text small {
  display: block;
  color: var(--muted);
  line-height: 1.8;
  margin-top: 2px;
}

.wallet-balance {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, var(--accent));
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 14%, transparent), transparent 44%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, white 8%), var(--surface));
}

.wallet-balance__value {
  font-size: 18px;
  letter-spacing: -0.2px;
}

.wallet-amt {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  border: 1px solid var(--border);
}

.wallet-amt--pos {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.24);
  color: #166534;
}

.wallet-amt--neg {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.24);
  color: #991b1b;
}

.admin-note {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px dashed var(--border);
  background: var(--surface-muted);
  color: var(--muted);
  line-height: 1.9;
}

.admin-content {
  padding: 20px;
  display: grid;
  align-content: start;
  gap: 16px;
}

.admin-topbar {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.admin-topbar h1 {
  margin: 0;
  font-size: 20px;
}

.admin-topbar p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.admin-story-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.admin-media-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.admin-story-tile {
  position: relative;
  display: grid;
  gap: 8px;
}

.admin-story-tile__delete {
  position: absolute;
  inset-inline-start: 10px;
  inset-block-start: 10px;
  z-index: 3;
}

.admin-story-tile__thumb {
  position: relative;
  display: block;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  background: #050505;
  aspect-ratio: 9 / 16;
  box-shadow: 0 18px 28px rgba(17, 17, 17, 0.12);
}

.admin-media-tile__thumb {
  aspect-ratio: 1 / 1;
}

.admin-media-tile__text {
  width: 100%;
  height: 100%;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 10px;
  padding: 14px;
  direction: rtl;
  text-align: right;
  background: linear-gradient(135deg, #0b1020, #111827 58%, #0b1225);
  color: #fff;
}

.admin-media-tile__text-icon svg {
  width: 18px;
  height: 18px;
  opacity: 0.9;
}

.admin-media-tile__text-body {
  font-size: 12px;
  line-height: 1.7;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.28);
}

.admin-comment-list {
  display: grid;
  gap: 10px;
}

.admin-comment {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 10px;
  align-items: start;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
  border-radius: 18px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, white 8%), var(--surface));
  box-shadow: 0 14px 26px rgba(17, 17, 17, 0.06);
}

.admin-comment__avatar {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-muted);
  display: block;
}

.admin-comment__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.admin-comment__body {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.admin-comment__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.admin-comment__user {
  font-weight: 900;
  font-size: 12.5px;
  color: var(--text);
  text-decoration: none;
}

.admin-comment__text {
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  line-height: 1.75;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.admin-comment__meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 11px;
}

@media (max-width: 767px) {
  .admin-comment {
    grid-template-columns: 44px 1fr;
  }
  .admin-comment form {
    grid-column: 1 / -1;
    justify-self: flex-end;
  }
}

.admin-story-tile__thumb img,
.admin-story-tile__thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.admin-story-tile__badge {
  position: absolute;
  inset-inline-end: 10px;
  inset-block-start: 10px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(10, 10, 10, 0.62);
  color: #fff;
  backdrop-filter: blur(10px);
}

.admin-story-tile__badge svg {
  width: 16px;
  height: 16px;
}

.admin-story-tile__meta {
  display: grid;
  gap: 2px;
  line-height: 1.2;
}

.admin-story-tile__user {
  font-size: 12px;
  font-weight: 900;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-story-tile__time {
  font-size: 11px;
}

@media (max-width: 1024px) {
  .admin-story-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .admin-media-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .admin-story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.admin-settings-shell {
  display: grid;
  gap: 14px;
}

.admin-subnav {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.admin-subnav__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 14px;
  text-decoration: none;
  color: var(--text);
  font-weight: 800;
  border: 1px solid transparent;
  background: transparent;
}

.admin-subnav__item:hover {
  background: var(--surface-muted);
}

.admin-subnav__item.is-active {
  background: var(--surface-muted);
  border-color: var(--border);
}

.admin-settings-form {
  display: grid;
  gap: 18px;
}

.admin-finance-shell {
  display: grid;
  gap: 14px;
}

.admin-finance-hero {
  display: grid;
  gap: 14px;
}

.admin-finance-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.admin-finance-kpi {
  display: grid;
  gap: 8px;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-muted) 86%, transparent), var(--surface));
  box-shadow: var(--shadow);
}

.admin-finance-kpi strong {
  font-size: 20px;
  font-weight: 900;
}

.admin-finance-kpi span:last-child {
  color: var(--muted);
  font-size: 12px;
}

.admin-finance-kpi__icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: inline-grid;
  place-items: center;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.admin-finance-kpi__icon svg {
  width: 20px;
  height: 20px;
}

.admin-finance-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.admin-finance-panel {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.admin-finance-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.admin-finance-panel__head strong {
  font-size: 15px;
}

.admin-finance-panel__head a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 800;
  font-size: 12px;
}

.admin-finance-userlist,
.admin-finance-minilist {
  display: grid;
  gap: 10px;
}

.admin-finance-userrow,
.admin-finance-minirow {
  display: grid;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: var(--surface-muted);
}

.admin-finance-userrow {
  grid-template-columns: 48px minmax(0, 1fr) auto;
}

.admin-finance-userrow__avatar img,
.admin-finance-table-user img {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  object-fit: cover;
  display: block;
}

.admin-finance-userrow__body,
.admin-finance-userrow__meta,
.admin-finance-minirow__side {
  display: grid;
  gap: 4px;
}

.admin-finance-userrow__body a,
.admin-finance-panel strong[dir="ltr"],
.admin-finance-table-user strong[dir="ltr"] {
  text-decoration: none;
  color: var(--text);
}

.admin-finance-userrow__body small,
.admin-finance-userrow__meta small,
.admin-finance-minirow small,
.admin-finance-table-user small {
  color: var(--muted);
}

.admin-finance-userrow__meta,
.admin-finance-minirow__side {
  text-align: left;
}

.admin-finance-minirow {
  grid-template-columns: minmax(0, 1fr) auto;
}

.admin-finance-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
}

.admin-finance-toolbar {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.admin-finance-toolbar__actions {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.admin-finance-table-user {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.admin-finance-settings {
  display: grid;
  gap: 14px;
  margin-top: 12px;
}

.admin-finance-settings__hint {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 18px;
  border: 1px dashed var(--border);
  background: color-mix(in srgb, var(--surface-muted) 82%, transparent);
}

.admin-finance-settings__hint p {
  margin: 0;
  color: var(--muted);
  line-height: 1.8;
}

@media (max-width: 1024px) {
  .admin-finance-kpis,
  .admin-finance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .admin-finance-kpis,
  .admin-finance-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-finance-userrow {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .admin-finance-userrow__meta {
    grid-column: 1 / -1;
    text-align: right;
  }

  .admin-finance-minirow {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-subnav {
    overflow-x: auto;
    scrollbar-width: thin;
  }
}

.admin-memorial__topbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.admin-memorial__search {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex: 1 1 420px;
}

.admin-memorial__actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.admin-memorial__layout {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.admin-memorial__sidebar {
  display: grid;
  gap: 10px;
}

.admin-memorial__category {
  padding: 12px 12px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--surface-muted) 85%, transparent),
    transparent
  );
  box-shadow: var(--shadow);
  text-decoration: none;
  color: var(--text);
  display: grid;
  gap: 4px;
}

.admin-memorial__category-title {
  font-weight: 900;
  font-size: 14px;
}

.admin-memorial__category-meta {
  font-size: 12px;
}

.admin-memorial__category.is-active {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  outline: 2px solid color-mix(in srgb, var(--accent) 28%, transparent);
}

.admin-memorial__headline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 10px;
}

.admin-memorial__headline strong {
  font-size: 15px;
}

.admin-memorial__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
}

.admin-memorial__media-card {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto auto;
}

.admin-memorial__thumb {
  border: 0;
  padding: 0;
  background: transparent;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  cursor: pointer;
}

.admin-memorial__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.01);
  transition: transform 0.25s ease;
}

.admin-memorial__thumb:hover img {
  transform: scale(1.06);
}

.admin-memorial__media-meta {
  padding: 10px 12px 6px;
  display: grid;
  gap: 4px;
}

.admin-memorial__media-meta strong {
  font-size: 13px;
  line-height: 1.35;
}

.admin-memorial__media-meta small {
  font-size: 11px;
}

.admin-memorial__media-actions {
  padding: 0 12px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.admin-timeline-thumb {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 210px;
}

.admin-timeline-thumb__row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-timeline-thumb__preview {
  width: 82px;
  height: 54px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid var(--border);
  background: var(--surface-muted);
}

@media (max-width: 980px) {
  .admin-memorial__layout {
    grid-template-columns: 1fr;
  }

  .admin-memorial__sidebar {
    grid-auto-flow: column;
    grid-auto-columns: minmax(200px, 1fr);
    overflow: auto;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
  }

  .admin-memorial__category {
    scroll-snap-align: start;
  }
}

.admin-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.admin-settings-grid--sms,
.admin-settings-grid--advanced {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-settings-card {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-muted) 80%, transparent), transparent);
  display: grid;
  gap: 14px;
}

.admin-settings-card--full {
  grid-column: 1 / -1;
}

.admin-body .field input,
.admin-body .field textarea,
.admin-body .field select {
  padding: 10px 12px;
}

.admin-body .field input[type="file"] {
  padding: 9px 12px;
}

.admin-branding {
  display: grid;
  gap: 12px;
}

.admin-branding__previews {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.admin-branding__preview {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  padding: 12px;
  display: grid;
  justify-items: center;
  gap: 10px;
  box-shadow: var(--shadow);
}

.admin-branding__preview span {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
}

.admin-branding__preview img {
  height: 34px;
  width: 100%;
  object-fit: contain;
}

.admin-branding__preview--favicon img {
  width: 34px;
  height: 34px;
  padding: 6px;
  border-radius: 12px;
  background: var(--surface-muted);
  border: 1px solid var(--border);
}

.admin-theme {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 12px;
  align-items: start;
}

.admin-theme__fields {
  display: grid;
  gap: 10px;
}

.field--color input[type="color"] {
  width: 100%;
  height: 40px;
  padding: 0;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
}

.admin-theme__preview {
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 12px;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%), var(--bg);
}

.admin-theme__preview-card {
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  background: linear-gradient(180deg, var(--surface), var(--surface-muted));
  padding: 12px;
  box-shadow: 0 12px 24px rgba(17, 17, 17, 0.07);
  display: grid;
  gap: 10px;
}

.admin-theme__preview-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-theme__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
}

.admin-theme__chip--muted {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}

.admin-theme__preview-body {
  display: grid;
  gap: 8px;
}

.admin-theme__line {
  height: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-muted) 70%, var(--bg));
}

.admin-theme__line--short {
  width: 72%;
}

.admin-settings-actions {
  justify-content: flex-start;
}

.admin-settings-advanced {
  display: grid;
  gap: 14px;
}

.admin-settings-advanced[open] {
  padding-bottom: 16px;
}

.admin-settings-advanced__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
}

.admin-settings-advanced__summary strong,
.admin-settings-advanced__summary small {
  display: block;
}

.admin-settings-advanced__summary small {
  color: var(--muted);
  margin-top: 4px;
}

.admin-settings-advanced__body {
  display: grid;
  gap: 14px;
  margin-top: 8px;
}

.admin-settings-inline-form {
  gap: 14px;
}

.admin-page {
  display: grid;
  gap: 16px;
}

.admin-search {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.admin-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.admin-stat {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 14px;
  display: grid;
  gap: 4px;
}

.admin-stat strong {
  font-size: 22px;
  line-height: 1.2;
}

.admin-stat span {
  color: var(--muted);
  font-size: 12px;
}

.admin-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.admin-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-server .admin-stat {
  min-height: 90px;
}

.admin-server__panel .admin-list__item {
  align-items: flex-start;
}

.admin-server__panel .admin-list__item span {
  white-space: nowrap;
}

.admin-list {
  display: grid;
  gap: 8px;
}

.admin-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-muted);
}

.admin-list__item strong,
.admin-list__item small {
  display: block;
}

.admin-table-wrap {
  overflow: hidden;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
}

.admin-table th,
.admin-table td {
  padding: 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  text-align: right;
}

.admin-table th {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.admin-table td strong,
.admin-table td small {
  display: block;
}

.admin-inline-form {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.admin-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}

.admin-pager__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.admin-inline-form select {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 8px;
  background: var(--surface);
}

.admin-datetime {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 10px;
  background: var(--surface);
  color: var(--text);
  min-height: 36px;
}

.admin-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 11px;
  font-weight: 800;
  margin-top: 8px;
}

.admin-badge--featured {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  color: var(--text);
}

.admin-actions {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}

.admin-posts__list {
  display: grid;
  gap: 12px;
}

.admin-post-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

.admin-post-card:last-child {
  border-bottom: 0;
}

.admin-post-card__main {
  min-width: 0;
}

.admin-post-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-post-card__caption {
  margin: 8px 0 0;
  color: var(--text);
  line-height: 1.7;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.admin-post-card__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
}

.admin-post-card__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-slider-banner-list {
  display: grid;
  gap: 14px;
  margin-top: 12px;
}

.admin-slider-banner-card {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 90%, white 10%), var(--surface)),
    var(--surface);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

.admin-slider-banner-card__media {
  min-height: 128px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface-muted);
}

.admin-slider-banner-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.admin-slider-banner-card__body {
  min-width: 0;
  display: grid;
  gap: 10px;
  align-content: start;
}

.admin-slider-banner-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-slider-banner-card__body p {
  margin: 0;
  color: var(--text);
  line-height: 1.7;
}

.admin-slider-banner-card__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 12px;
}

.admin-users .section-title span {
  font-size: 12px;
}

.admin-users__table th,
.admin-users__table td {
  padding: 8px 10px;
  vertical-align: middle;
}

.admin-user-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.admin-user-cell__avatar {
  width: 36px;
  height: 36px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-muted);
  flex: 0 0 auto;
}

.admin-user-cell__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.admin-user-cell__text {
  min-width: 0;
}

.admin-user-cell__text strong {
  font-size: 13px;
  line-height: 1.2;
}

.admin-user-cell__text small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: color-mix(in srgb, var(--surface-muted) 78%, white 22%);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.admin-chip--legacy {
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(245, 158, 11, 0.28);
  color: color-mix(in srgb, #b45309 75%, var(--text));
}

.admin-chip--new {
  background: color-mix(in srgb, var(--surface-muted) 70%, transparent);
  border-color: color-mix(in srgb, var(--border) 75%, transparent);
  color: var(--muted);
}

.admin-chip--ok {
  background: rgba(34, 197, 94, 0.14);
  border-color: rgba(34, 197, 94, 0.28);
  color: color-mix(in srgb, #16a34a 72%, var(--text));
}

.admin-chip--info {
  background: rgba(14, 165, 233, 0.12);
  border-color: rgba(14, 165, 233, 0.24);
  color: color-mix(in srgb, #0284c7 70%, var(--text));
}

.admin-chip--muted {
  background: color-mix(in srgb, var(--surface-muted) 68%, transparent);
  border-color: color-mix(in srgb, var(--border) 80%, transparent);
  color: var(--muted);
}

.admin-chip--danger {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.24);
  color: color-mix(in srgb, #b91c1c 78%, var(--text));
}

.admin-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-muted) 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  font-size: 11px;
  font-weight: 900;
  margin-inline-end: 6px;
}

.admin-users .admin-inline-form select {
  padding: 4px 8px;
  border-radius: 10px;
}

.admin-users .admin-actions .button--sm {
  padding: 0 10px;
  height: 34px;
  border-radius: 12px;
}

.admin-users .admin-actions {
  gap: 8px;
}

.admin-group-deal-userline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 240px;
}

.admin-group-deal-userline__avatar-wrap {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-muted);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 82%, transparent);
}

.admin-group-deal-userline__avatar-wrap .user-line__avatar {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  object-fit: cover;
}

.admin-group-deal-userline__text {
  min-width: 0;
}

.admin-group-deal-userline__text strong,
.admin-group-deal-userline__text small {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.approval-list {
  display: grid;
  gap: 14px;
}

.approval-card {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-muted);
}

.approval-card__media img,
.approval-card__placeholder {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  object-fit: cover;
  border: 1px solid var(--border);
  background: var(--surface);
}

.approval-card__placeholder {
  display: grid;
  place-items: center;
  padding: 12px;
  color: var(--muted);
  text-align: center;
  line-height: 1.8;
}

.approval-card__content {
  display: grid;
  gap: 10px;
  align-content: start;
}

.approval-card__meta {
  display: grid;
  gap: 4px;
}

.approval-card__meta span,
.approval-card__content small {
  color: var(--muted);
}

.approval-card__text {
  margin: 0;
  line-height: 1.9;
}

@media (max-width: 1100px) {
  .admin-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-nav__hint {
    display: none;
  }

  .admin-nav__item {
    min-height: 44px;
    grid-template-rows: 1fr;
  }

  .admin-nav__icon {
    grid-row: 1;
  }

  .admin-nav__label {
    grid-row: 1;
    align-self: center;
  }
}

@media (max-width: 1080px) {
  .admin-shell {
    grid-template-columns: 1fr;
  }

  .admin-sidebar {
    border-inline-start: 0;
    border-bottom: 1px solid var(--border);
    grid-template-rows: auto auto auto;
  }

  .admin-nav {
    grid-template-columns: 1fr;
  }

  .admin-nav__item {
      grid-template-columns: 1fr;
      grid-template-rows: auto auto;
    justify-items: center;
    text-align: center;
    padding: 10px 8px;
  }

  .admin-nav__icon {
    grid-column: 1;
    grid-row: 1;
  }

  .admin-nav__label {
    grid-column: 1;
    grid-row: 2;
    font-size: 12px;
  }

  .admin-nav__item.is-active::before {
    inset-inline-start: auto;
    inset-inline-end: 10px;
  }

  .admin-grid-2 {
    grid-template-columns: 1fr;
  }

  .admin-settings-grid,
  .admin-settings-grid--sms,
  .admin-settings-grid--advanced {
    grid-template-columns: 1fr;
  }

  .admin-theme {
    grid-template-columns: 1fr;
  }

  .admin-branding__previews {
    grid-template-columns: 1fr;
  }

  .avatar-editor {
    grid-template-columns: 1fr;
  }

  .approval-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .admin-content {
    padding: 12px;
  }

  .admin-nav {
    grid-template-columns: 1fr;
  }

  .admin-table {
    font-size: 13px;
  }

  .admin-table th,
  .admin-table td {
    padding: 8px;
  }

  .admin-nav__section {
    padding: 10px;
    border-radius: 18px;
  }

  .admin-nav__section-head {
    gap: 10px;
  }

  .admin-nav__section-icon {
    width: 38px;
    height: 38px;
    border-radius: 14px;
  }
}

.shop-page {
  display: grid;
  gap: 24px;
}

.shop-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: 22px;
  padding: 26px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, var(--accent) 20%);
  border-radius: 34px;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 12%, transparent), transparent 36%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, white 8%), color-mix(in srgb, var(--surface) 88%, #eef7ff 12%));
  box-shadow: 0 28px 54px rgba(17, 17, 17, 0.08);
}

.shop-hero__copy {
  display: grid;
  align-content: start;
  gap: 16px;
}

.shop-hero__aside {
  display: grid;
  align-content: start;
}

.shop-hero__eyebrow {
  width: fit-content;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: color-mix(in srgb, var(--accent-soft) 70%, white 30%);
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
}

.shop-hero__eyebrow svg {
  width: 16px;
  height: 16px;
}

.shop-hero h1 {
  margin: 0;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.shop-hero p {
  margin: 0;
  color: color-mix(in srgb, var(--text) 82%, var(--muted) 18%);
  font-size: 14px;
  line-height: 2;
}

.search-box--shop {
  min-height: 62px;
  padding: 10px 12px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface-muted) 76%, white 24%);
  gap: 8px;
}

.search-box--shop input {
  font-size: 15px;
}

.search-box--shop:focus-within {
  border-color: color-mix(in srgb, var(--border) 55%, var(--accent));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-soft) 52%, transparent);
}

.shop-hero__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.shop-stat-card {
  padding: 14px 12px;
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-muted) 84%, white 16%), transparent),
    var(--surface);
  display: grid;
  gap: 6px;
}

.shop-stat-card strong {
  font-size: 22px;
  line-height: 1.1;
}

.shop-stat-card span {
  color: var(--muted);
  font-size: 12px;
}

.shop-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.shop-chip {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
  background: color-mix(in srgb, var(--surface-muted) 80%, white 20%);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.shop-chip svg {
  width: 15px;
  height: 15px;
}

.shop-spotlight {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: 30px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 88%, white 12%), var(--surface)),
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 8%, transparent), transparent 42%);
  box-shadow: 0 24px 44px rgba(17, 17, 17, 0.09);
  display: grid;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.shop-spotlight:hover {
  transform: translateY(-3px);
  box-shadow: 0 30px 52px rgba(17, 17, 17, 0.12);
}

.shop-spotlight__media {
  position: relative;
  aspect-ratio: 1.08 / 1;
  background: #050505;
}

.shop-spotlight__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shop-spotlight__badge {
  position: absolute;
  inset-inline-start: 16px;
  inset-block-start: 16px;
  z-index: 1;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 10, 0.72);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  backdrop-filter: blur(12px);
}

.shop-spotlight__body {
  padding: 20px;
  display: grid;
  gap: 12px;
}

.shop-spotlight__eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.shop-spotlight__eyebrow span {
  min-height: 32px;
  padding: 0 11px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: color-mix(in srgb, var(--surface-muted) 80%, white 20%);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.shop-spotlight__eyebrow svg {
  width: 14px;
  height: 14px;
}

.shop-spotlight__body strong {
  font-size: 20px;
  line-height: 1.7;
}

.shop-spotlight__body p {
  margin: 0;
  color: color-mix(in srgb, var(--text) 84%, var(--muted) 16%);
  font-size: 13px;
  line-height: 2;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.shop-spotlight__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.shop-spotlight__price {
  color: var(--accent);
  font-size: 22px;
  font-weight: 800;
}

.shop-spotlight__cta {
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent), #38bdf8);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.shop-collection {
  display: grid;
  gap: 16px;
}

.shop-collection__header {
  align-items: end;
}

.shop-collection__header > div {
  display: grid;
  gap: 6px;
}

.shop-collection__header span {
  color: var(--muted);
  font-size: 13px;
}

.shop-collection__count {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--accent-soft) 70%, white 30%);
  color: var(--accent);
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.product-grid--shop {
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.product-grid--shop .product-grid__cell {
  min-width: 0;
}

.shop-empty-state {
  padding: 34px 24px;
  border: 1px dashed color-mix(in srgb, var(--border) 80%, var(--accent) 20%);
  border-radius: 30px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 90%, white 10%), var(--surface)),
    radial-gradient(circle at top, color-mix(in srgb, var(--accent-soft) 42%, transparent), transparent 44%);
  display: grid;
  justify-items: center;
  gap: 14px;
  text-align: center;
}

.shop-empty-state strong {
  font-size: 18px;
}

.shop-empty-state p {
  margin: 0;
  max-width: 420px;
  color: var(--muted);
  line-height: 1.9;
}

.shop-empty-state__icon {
  width: 74px;
  height: 74px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent-soft) 76%, white 24%);
  color: var(--accent);
}

.shop-empty-state__icon svg {
  width: 28px;
  height: 28px;
}

.product-card {
  height: 100%;
  gap: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 28px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, white 8%), var(--surface)),
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent-soft) 24%, transparent), transparent 42%);
  box-shadow: 0 18px 34px rgba(17, 17, 17, 0.08);
  display: flex;
  flex-direction: column;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 42px rgba(17, 17, 17, 0.12);
}

.product-card__media-link {
  display: block;
}

.product-card__media {
  position: relative;
  aspect-ratio: 1 / 0.92;
  border-radius: 0;
  background: #050505;
}

.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-card__media::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 44%;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.58));
  pointer-events: none;
}

.product-card__media-overlay {
  position: absolute;
  inset: auto 14px 14px;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.product-badge {
  inset-inline-start: 14px;
  inset-block-start: 14px;
  z-index: 1;
  padding: 7px 12px;
  background: rgba(10, 10, 10, 0.76);
  font-size: 11px;
  font-weight: 800;
  backdrop-filter: blur(10px);
}

.product-card__status {
  min-height: 32px;
  padding: 0 11px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 10, 0.72);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  backdrop-filter: blur(10px);
}

.product-card__status.is-available {
  background: rgba(34, 197, 94, 0.2);
}

.product-card__status.is-unavailable {
  background: rgba(239, 68, 68, 0.22);
}

.product-card__status--ghost {
  background: rgba(15, 23, 42, 0.58);
}

.product-card__body {
  padding: 18px;
  display: grid;
  gap: 12px;
  flex: 1;
}

.product-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.product-card__chip {
  min-height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: color-mix(in srgb, var(--surface-muted) 80%, white 20%);
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
}

.product-card__chip svg {
  width: 14px;
  height: 14px;
}

.product-card__chip--muted {
  color: var(--muted);
}

.product-card__title-link strong {
  font-size: 16px;
  line-height: 1.9;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card__description {
  margin: 0;
  color: color-mix(in srgb, var(--text) 82%, var(--muted) 18%);
  font-size: 13px;
  line-height: 1.95;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card__price-row {
  align-items: baseline;
}

.product-card__price-row .price-row__discount {
  color: color-mix(in srgb, var(--accent) 82%, var(--text) 18%);
  font-size: 18px;
  font-weight: 800;
}

.product-card__price-row .price-row__old {
  color: var(--muted);
  font-size: 12px;
}

.product-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
}

.product-card__store {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}

.product-card__store-avatar {
  width: 44px;
  height: 44px;
  padding: 2px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  background: color-mix(in srgb, var(--surface-muted) 70%, white 30%);
}

.product-card__store-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.product-card__store-copy strong {
  font-size: 13px;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-card__store-copy small {
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-card__cta {
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent), #38bdf8);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 14px 22px rgba(0, 149, 246, 0.2);
}

.product-gallery-shell__footer {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, var(--product-accent) 20%);
  border-radius: 18px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-muted) 74%, white 26%), transparent),
    color-mix(in srgb, var(--surface) 92%, #fff7ed 8%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.product-gallery-shell__footer span,
.product-gallery-shell__footer a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
}

.product-gallery-shell__footer a {
  color: var(--product-accent);
}

.product-gallery-shell__footer svg {
  width: 15px;
  height: 15px;
}

.product-trust-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.product-trust-card {
  padding: 14px;
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-muted) 76%, white 24%), transparent),
    var(--surface);
  display: grid;
  gap: 10px;
}

.product-trust-card__icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: inline-grid;
  place-items: center;
  background: color-mix(in srgb, var(--product-accent-soft) 78%, white 22%);
  color: var(--product-accent);
}

.product-trust-card__icon svg {
  width: 18px;
  height: 18px;
}

.product-trust-card strong {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
}

.product-trust-card span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.8;
}

.product-information-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: start;
}

.product-information-card {
  padding: 24px;
  border-radius: 30px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, var(--product-accent) 22%);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 88%, #fff9f4 12%), var(--surface)),
    radial-gradient(circle at top right, color-mix(in srgb, var(--product-accent-soft) 34%, transparent), transparent 40%);
  display: grid;
  gap: 18px;
}

.product-information-card__content {
  display: grid;
  gap: 18px;
}

.product-information-card__content p {
  margin: 0;
  color: color-mix(in srgb, var(--text) 84%, var(--muted) 16%);
  line-height: 2.05;
}

.product-feature-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.product-feature-pill {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  background: color-mix(in srgb, var(--surface-muted) 78%, white 22%);
  color: color-mix(in srgb, var(--product-accent) 78%, var(--text) 22%);
  font-size: 12px;
  font-weight: 700;
}

.product-feature-pill svg {
  width: 15px;
  height: 15px;
  color: var(--product-accent);
}

@media (max-width: 1100px) {
  .shop-hero {
    grid-template-columns: 1fr;
  }

  .product-grid--shop {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-trust-strip,
  .product-information-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .shop-hero {
    padding: 18px;
    border-radius: 26px;
  }

  .shop-hero__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shop-collection__header {
    align-items: start;
  }

  .product-grid--shop {
    grid-template-columns: 1fr;
  }

  .product-card__footer {
    flex-direction: column;
    align-items: stretch;
  }

  .product-card__cta {
    width: 100%;
  }

  .product-gallery-shell__footer {
    flex-direction: column;
    align-items: start;
  }

  .product-trust-strip {
    grid-template-columns: 1fr;
  }
}

.composer-page--studio {
  --composer-accent: #0f766e;
  --composer-accent-strong: #115e59;
  --composer-accent-soft: rgba(15, 118, 110, 0.12);
  --composer-shadow: 0 28px 60px rgba(15, 23, 42, 0.12);
  display: grid;
  gap: 20px;
}

.composer-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.composer-topbar {
  padding: 18px 18px 12px;
  border-radius: 32px;
  display: grid;
  gap: 12px;
}

.composer-topbar__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.composer-topbar__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--composer-accent) 12%, white 88%);
  color: var(--composer-accent-strong);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.composer-topbar__eyebrow svg {
  width: 16px;
  height: 16px;
}

.composer-topbar__titles {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.composer-topbar__titles strong {
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.25;
}

.composer-topbar__titles p {
  margin: 0;
  color: var(--muted);
  line-height: 1.85;
}

.composer-stepper {
  display: flex;
  gap: 10px;
  overflow: auto;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
}

.composer-stepper .composer-step-card {
  width: auto;
  min-width: 122px;
  scroll-snap-align: start;
}

.composer-topbar__tips {
  border-top: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  padding-top: 10px;
}

.composer-topbar__tips summary {
  cursor: pointer;
  font-weight: 800;
  color: var(--composer-accent-strong);
  list-style: none;
}

.composer-topbar__tips summary::-webkit-details-marker {
  display: none;
}

.composer-sidebar,
.composer-builder,
.composer-live-preview {
  border: 1px solid color-mix(in srgb, var(--border) 72%, var(--composer-accent) 28%);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 88%, #f8fffd 12%), var(--surface)),
    radial-gradient(circle at top right, color-mix(in srgb, var(--composer-accent-soft) 64%, transparent), transparent 42%);
  box-shadow: var(--composer-shadow);
}

.composer-sidebar {
  position: sticky;
  top: 92px;
  display: grid;
  gap: 18px;
  padding: 22px;
  border-radius: 32px;
}

.composer-sidebar__brand {
  display: grid;
  gap: 10px;
}

.composer-sidebar__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--composer-accent) 12%, white 88%);
  color: var(--composer-accent-strong);
  font-size: 12px;
  font-weight: 800;
}

.composer-sidebar__eyebrow svg,
.composer-topbar__eyebrow svg,
.composer-live-preview__badge svg {
  width: 16px;
  height: 16px;
}

.composer-sidebar__brand strong {
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.35;
}

.composer-sidebar__brand p,
.composer-workspace__title span,
.composer-live-preview__header span {
  color: var(--muted);
  line-height: 1.9;
  margin: 0;
}

.composer-sidebar__steps,
.composer-sidebar__tips,
.composer-workspace,
.composer-studio,
.composer-builder,
.composer-panel,
.composer-panel__intro,
.composer-panel__content,
.composer-review-panel,
.composer-review-card,
.composer-live-preview {
  display: grid;
  gap: 16px;
}

.composer-step-card {
  width: 100%;
  min-height: 42px;
  padding: 6px 8px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-muted) 76%, white 24%);
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: right;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.composer-step-card__index {
  width: 22px;
  height: 22px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--composer-accent) 10%, white 90%);
  color: var(--composer-accent-strong);
  font-size: 10px;
  font-weight: 900;
  flex-shrink: 0;
}

.composer-step-card__copy {
  min-width: 0;
  display: grid;
  gap: 0;
}

.composer-step-card__copy strong {
  font-size: 11px;
  line-height: 1.3;
}

.composer-step-card__copy small {
  display: none;
}

.composer-step-card.is-active {
  transform: translateX(-1px);
  border-color: color-mix(in srgb, var(--composer-accent) 52%, var(--border) 48%);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--composer-accent) 15%, white 85%), transparent),
    color-mix(in srgb, var(--surface) 90%, #f2fffb 10%);
  box-shadow: 0 10px 20px rgba(15, 118, 110, 0.12);
}

.composer-step-card.is-done .composer-step-card__index {
  background: linear-gradient(135deg, var(--composer-accent), #14b8a6);
  color: #fff;
}

.composer-sidebar__tips {
  padding: 16px 18px;
  border-radius: 24px;
  border: 1px dashed color-mix(in srgb, var(--composer-accent) 32%, var(--border) 68%);
  background: color-mix(in srgb, var(--composer-accent-soft) 66%, white 34%);
}

.composer-sidebar__tips strong,
.composer-review-card strong,
.composer-field-card__label,
.composer-note-card strong,
.composer-toggle-card__copy strong,
.composer-workspace__title strong,
.composer-live-preview__header strong {
  font-size: 15px;
  font-weight: 800;
}

.composer-tip-list,
.composer-checklist {
  margin: 0;
  padding-right: 18px;
  display: grid;
  gap: 8px;
  color: var(--muted);
  line-height: 1.9;
}

.composer-workspace__header {
  padding: 2px 4px;
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}

.composer-workspace__title {
  display: grid;
  gap: 8px;
}

.composer-progress-badge,
.composer-live-preview__badge {
  width: fit-content;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: color-mix(in srgb, var(--composer-accent) 12%, white 88%);
  color: var(--composer-accent-strong);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.composer-studio {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.composer-studio.has-preview {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 430px);
}

.composer-builder {
  padding: 24px;
  border-radius: 34px;
}

/* Final review step: hide the empty form area and dedicate space to preview. */
.composer-studio.has-preview.is-preview-step {
  grid-template-columns: minmax(0, 1fr);
}

.composer-studio.has-preview.is-preview-step .composer-stage {
  display: block;
}

.composer-studio.has-preview.is-preview-step .composer-live-preview {
  grid-column: 1 / -1;
  width: 100%;
}

.composer-panel {
  display: none;
}

.composer-panel.is-active {
  display: grid;
}

/* Final step: keep only the live preview + publish controls (no big "final review" sidebar/copy). */
.composer-panel[data-step-kind="preview"].is-active {
  display: grid;
}

.composer-studio.has-preview.is-preview-step .composer-panel[data-step-kind="preview"].is-active .composer-panel__intro {
  display: none;
}

.composer-panel__intro {
  padding-bottom: 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}

.composer-panel__eyebrow {
  color: var(--composer-accent-strong);
  font-size: 12px;
  font-weight: 800;
}

.composer-panel__intro strong {
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.35;
}

.composer-panel__intro p {
  margin: 0;
  color: var(--muted);
  line-height: 1.95;
}

.composer-card-grid {
  display: grid;
  gap: 16px;
}

.composer-card-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.composer-field-card,
.composer-note-card,
.composer-toggle-card,
.composer-review-card {
  padding: 18px;
  border-radius: 26px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-muted) 74%, white 26%), transparent),
    var(--surface);
}

/* Hide optional guidance cards in composer flows (create-post/slide/story/product). */
.composer-page--studio .composer-note-card {
  display: none !important;
}

.composer-field-card,
.composer-note-card {
  display: grid;
  gap: 12px;
}

.composer-field-card--wide {
  grid-column: 1 / -1;
}

.composer-field-card small,
.composer-note-card,
.composer-toggle-card__copy small {
  color: var(--muted);
  line-height: 1.85;
}

.composer-field-card input,
.composer-field-card select,
.composer-field-card textarea {
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-muted) 76%, white 24%);
  min-height: 48px;
  padding: 0 14px;
  color: var(--text);
  font: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.composer-field-card textarea {
  min-height: 150px;
  padding-top: 12px;
  padding-bottom: 12px;
  resize: vertical;
}

.composer-inline-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}

.composer-inline-field {
  display: grid;
  gap: 8px;
}

.composer-inline-field span {
  font-size: 12px;
  color: var(--muted);
}

.composer-inline-field input[type="color"] {
  min-height: 46px;
  padding: 6px 10px;
}

.composer-inline-field input[type="range"] {
  min-height: 46px;
  padding: 0 0;
  background: transparent;
  border: 0;
}

@media (max-width: 560px) {
  .composer-inline-fields {
    grid-template-columns: 1fr 1fr;
  }
  .composer-inline-field:last-child {
    grid-column: 1 / -1;
  }
}

.composer-field-card input:focus,
.composer-field-card select:focus,
.composer-field-card textarea:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--composer-accent) 50%, var(--border) 50%);
  background: #fff;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--composer-accent-soft) 78%, transparent);
}

.composer-segment {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.composer-segment__item {
  display: block;
  position: relative;
}

.composer-segment__item input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.composer-segment__ui {
  min-height: 48px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  background: color-mix(in srgb, var(--surface-muted) 76%, white 24%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  font-weight: 900;
  color: color-mix(in srgb, var(--muted) 84%, var(--text));
  transition: 0.2s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.composer-segment__ui svg {
  width: 18px;
  height: 18px;
}

.composer-segment__item input:checked + .composer-segment__ui {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--composer-accent) 18%, white 82%), transparent),
    color-mix(in srgb, var(--surface) 92%, #f2fffb 8%);
  border-color: color-mix(in srgb, var(--composer-accent) 52%, var(--border) 48%);
  color: var(--composer-accent-strong);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--composer-accent-soft) 78%, transparent);
}

.composer-toggle-card {
  min-height: 110px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.composer-toggle-card__copy {
  display: grid;
  gap: 8px;
}

.composer-toggle-card input[type='checkbox'] {
  width: 58px;
  height: 32px;
  margin: 0;
  accent-color: var(--composer-accent);
}

.composer-uploader {
  position: relative;
  min-height: 210px;
  padding: 22px 18px 18px;
  border-radius: 24px;
  border: 1px dashed color-mix(in srgb, var(--composer-accent) 34%, var(--border) 66%);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--composer-accent-soft) 54%, white 46%), transparent),
    color-mix(in srgb, var(--surface) 88%, #f7fffd 12%);
  display: grid;
  gap: 10px;
  justify-items: start;
  overflow: hidden;
}

.composer-uploader__input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.composer-uploader__icon {
  width: 48px;
  height: 48px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--composer-accent), #14b8a6);
  color: #fff;
}

.composer-uploader__icon svg {
  width: 20px;
  height: 20px;
}

.composer-uploader__count {
  color: var(--composer-accent-strong);
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
}

.composer-uploader__empty {
  color: var(--muted);
  font-size: 12px;
}

.composer-file-list {
  width: 100%;
  display: grid;
  gap: 10px;
  margin-top: 4px;
}

.composer-file-list--compact .composer-file-item {
  min-height: 76px;
}

.composer-file-item {
  min-height: 88px;
  padding: 10px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  display: grid;
  grid-template-columns: 40px 64px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 10px;
}

.composer-file-item--ghost {
  opacity: 0.55;
}

.composer-file-item__handle,
.composer-file-item__remove {
  width: 40px;
  height: 40px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-muted) 78%, white 22%);
  color: var(--muted);
  display: grid;
  place-items: center;
  font: inherit;
  font-weight: 800;
}

.composer-file-item__handle {
  cursor: grab;
}

.composer-file-item__thumb {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  overflow: hidden;
  background: #08121f;
  display: grid;
  place-items: center;
}

.composer-file-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.composer-file-item__thumb-fallback {
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.composer-file-item__copy {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.composer-file-item__copy strong,
.composer-file-item__copy small {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.button-row--composer {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

/* In RTL, first-step primary action should sit on the left side. */
[data-composer][data-current-step="0"] [data-composer-actions-main] {
  justify-content: flex-end;
}

.composer-disclaimer {
  display: none;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--border) 74%, var(--accent) 26%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, #fff 90%), #fff);
  color: color-mix(in srgb, var(--text) 86%, var(--accent) 14%);
  gap: 10px;
  align-items: flex-start;
  line-height: 1.7;
  font-size: 13px;
}

[data-composer][data-current-step="0"] .composer-disclaimer {
  display: flex;
}

.composer-disclaimer__icon svg {
  width: 18px;
  height: 18px;
}

.composer-disclaimer__text {
  min-width: 0;
}

.button-row--composer .button {
  min-width: 140px;
  min-height: 50px;
  border-radius: 16px;
  font-weight: 900;
  letter-spacing: -0.2px;
  gap: 8px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

.button-row--composer .button svg {
  width: 18px;
  height: 18px;
}

.button-row--composer .button--secondary {
  background: linear-gradient(180deg, #ffffff, color-mix(in srgb, var(--surface-muted) 88%, #fff 12%));
  border-color: color-mix(in srgb, var(--border) 72%, var(--accent) 28%);
  color: color-mix(in srgb, var(--text) 86%, var(--accent) 14%);
}

.button-row--composer .button--primary {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 84%, #0ea5e9 16%), #0284c7);
  border-color: color-mix(in srgb, var(--accent) 86%, #0369a1 14%);
  color: #fff;
  box-shadow:
    0 18px 36px color-mix(in srgb, var(--accent) 34%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.composer-live-preview {
  position: sticky;
  top: 92px;
  padding: 18px;
  border-radius: 34px;
}

.composer-live-preview__header {
  padding: 4px 4px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
}

.composer-live-preview__viewport {
  min-height: 680px;
  max-height: calc(100vh - 150px);
  padding: 12px;
  border-radius: 28px;
  background:
    radial-gradient(circle at top, color-mix(in srgb, var(--composer-accent-soft) 42%, transparent), transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-muted) 78%, white 22%), var(--surface));
  overflow: auto;
}

.composer-live-preview__actions {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}

.composer-live-preview__actions .button-row--composer {
  margin-top: 0;
}

.composer-feed-preview,
.composer-story-preview,
.product-preview-card--studio {
  display: grid;
  justify-items: center;
}

.composer-preview-post-card {
  width: min(100%, 380px);
  margin: 0 auto;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 0 20px 44px rgba(15, 23, 42, 0.16);
}

.composer-preview-media {
  background: #09111d;
}

.composer-preview-file-strip {
  width: 100%;
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.composer-preview-file-chip {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: color-mix(in srgb, var(--surface-muted) 76%, white 24%);
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  font-size: 11px;
  font-weight: 700;
}

.composer-preview-file-chip strong {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--composer-accent) 12%, white 88%);
  color: var(--composer-accent-strong);
}

.composer-preview-file-chip.is-active {
  border-color: color-mix(in srgb, var(--composer-accent) 44%, var(--border) 56%);
}

.slider-dot {
  border: none;
  padding: 0;
}

.composer-story-preview__viewer {
  width: min(100%, 340px);
}

.composer-story-preview__frame {
  min-height: 640px;
  max-height: 680px;
  border-radius: 34px;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18);
}

.composer-story-preview .story-viewer__caption {
  gap: 10px;
}

.product-preview-card--studio {
  width: 100%;
}

.composer-product-preview {
  width: min(100%, 430px);
  margin: 0 auto;
  box-shadow: 0 22px 48px rgba(15, 23, 42, 0.14);
}

.product-preview-card--studio .product-detail-card__summary {
  gap: 18px;
}

.product-summary-card__state.is-inactive {
  background: color-mix(in srgb, #f59e0b 16%, white 84%);
  color: #b45309;
}

.composer-review-panel {
  align-items: start;
}

.composer-review-card {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--composer-accent-soft) 34%, white 66%), transparent),
    var(--surface);
}

@media (max-width: 1180px) {
  .composer-shell,
  .composer-studio {
    grid-template-columns: 1fr;
  }

  .composer-sidebar,
  .composer-live-preview {
    position: static;
  }

  .composer-live-preview__viewport {
    max-height: none;
    min-height: 520px;
  }
}

@media (max-width: 760px) {
  .composer-shell,
  .composer-card-grid--2 {
    grid-template-columns: 1fr;
  }

  .composer-sidebar,
  .composer-builder,
  .composer-live-preview {
    padding: 18px;
    border-radius: 26px;
  }

  .composer-step-card {
    min-height: 40px;
    border-radius: 11px;
  }

  .composer-step-card.is-active {
    transform: none;
  }

  .composer-topbar__head,
  .composer-workspace__header,
  .button-row--composer,
  .composer-toggle-card {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }

  .composer-stepper .composer-step-card {
    min-width: 116px;
  }

  .button-row--composer .button {
    width: 100%;
  }

  .composer-file-item {
    grid-template-columns: 34px 56px minmax(0, 1fr) 34px;
  }

  .composer-file-item__thumb {
    width: 56px;
    height: 56px;
  }

  .composer-live-preview__viewport {
    padding: 10px;
    min-height: 460px;
  }

  .composer-story-preview__frame {
    min-height: 560px;
  }
}

/* Camp Manage Studio */
.page-shell--camp-manage {
  width: min(100%, 2140px);
}

.camp-manage {
  width: min(100%, calc(100vw - 20px));
  max-width: 1980px;
  margin-inline: auto;
  gap: 24px;
}

.camp-manage__hero--studio,
.camp-manage__studio-topbar {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) auto;
  gap: 18px;
  padding: 24px;
}

.camp-manage__overview {
  padding: 20px;
}

.camp-manage__overview-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

.camp-manage__overview-card {
  display: grid;
  gap: 6px;
  padding: 16px 18px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, white 8%), var(--surface)),
    radial-gradient(circle at top left, color-mix(in srgb, var(--accent-soft) 40%, transparent), transparent 58%);
}

.camp-manage__overview-card strong {
  font-size: 1.2rem;
  line-height: 1;
}

.camp-manage__overview-card span {
  color: var(--text-muted);
  font-size: 0.88rem;
}

.camp-manage__catalog-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 24px;
  align-items: start;
}

.camp-manage__catalog {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(520px, 1fr));
  gap: 20px;
}

.camp-manage-card {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
  padding: 18px;
  border-radius: 30px;
}

.camp-manage-card--create,
.camp-manage-card--empty {
  grid-template-columns: 1fr;
  min-height: 220px;
  border-style: dashed;
  border-width: 2px;
}

.camp-manage-card__cover {
  min-height: 190px;
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--accent-soft) 35%, transparent), transparent 56%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-muted) 78%, white 22%), var(--surface));
}

.camp-manage-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.camp-manage-card__cover-fallback,
.camp-manage__preview-fallback {
  width: 100%;
  height: 100%;
  min-height: 190px;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 1.1rem;
  color: var(--accent);
  background:
    radial-gradient(circle at 22% 22%, color-mix(in srgb, var(--accent-soft) 50%, white 50%), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-muted) 80%, white 20%), var(--surface));
}

.camp-manage-card__body {
  display: grid;
  gap: 12px;
  align-content: start;
}

.camp-manage-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  width: fit-content;
  padding: 0 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-soft) 55%, white 45%);
  color: var(--accent);
  font-size: 0.83rem;
  font-weight: 800;
}

.camp-manage-card__title-row h2,
.camp-manage-card--create h2,
.camp-manage-card--empty h2 {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.5;
}

.camp-manage-card__chips,
.camp-manage-card__stats,
.camp-manage-card__actions,
.camp-manage__studio-actions,
.camp-manage__hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.camp-chip--soft,
.camp-manage-card__stats span {
  border-radius: 999px;
  padding: 6px 11px;
  background: color-mix(in srgb, var(--surface) 74%, var(--line) 26%);
  color: var(--text-muted);
  font-size: 0.84rem;
}

.camp-manage-card__summary,
.camp-manage__campaign-link-summary {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.9;
  font-size: 0.9rem;
}

.camp-manage-card__meta {
  display: grid;
  gap: 8px;
  color: var(--text-muted);
  font-size: 0.88rem;
}

.camp-manage-card__meta a {
  color: var(--accent);
  text-decoration: none;
}

.camp-manage__catalog-side {
  position: sticky;
  top: 86px;
  display: grid;
  gap: 14px;
  padding: 20px;
}

.camp-manage__catalog-steps {
  margin: 0;
  padding-inline-start: 0;
  padding-inline-end: 18px;
  display: grid;
  gap: 12px;
}

.camp-manage__studio-head {
  display: grid;
  gap: 10px;
  align-content: start;
}

.camp-manage__layout {
  grid-template-columns: minmax(320px, 360px) minmax(0, 1fr);
  gap: 24px;
}

.camp-manage__main {
  min-width: 0;
  gap: 20px;
}

.camp-manage__sidebar {
  padding: 20px;
}

.camp-manage__sidebar-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.camp-manage__campaign-link {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 20px;
  border: 1px solid transparent;
  background: color-mix(in srgb, var(--surface) 92%, var(--accent-soft) 8%);
  text-decoration: none;
  color: inherit;
}

.camp-manage__campaign-link.is-active,
.camp-manage__campaign-link:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--surface) 82%, var(--accent-soft) 18%);
  transform: translateY(-1px);
}

.camp-manage__summary,
.camp-manage__section {
  padding: 22px;
}

.camp-manage__editor-grid {
  grid-template-columns: minmax(0, 1.7fr) minmax(300px, 0.95fr);
}

.camp-manage__preview-card,
.camp-manage__tips {
  padding: 18px;
}

@media (max-width: 1740px) {
  .camp-manage__overview-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .camp-manage__catalog {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1400px) {
  .camp-manage__catalog-shell {
    grid-template-columns: 1fr;
  }

  .camp-manage__catalog-side {
    position: static;
  }
}

@media (max-width: 1180px) {
  .camp-manage__layout,
  .camp-manage__editor-grid,
  .camp-manage__split {
    grid-template-columns: 1fr;
  }

  .camp-manage__sidebar {
    position: static;
  }

  .camp-manage__summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .camp-manage__hero--studio,
  .camp-manage__studio-topbar,
  .camp-manage-card {
    grid-template-columns: 1fr;
  }

  .camp-manage__overview-grid,
  .camp-manage__summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .camp-manage {
    width: min(100%, calc(100vw - 12px));
  }

  .camp-manage__overview-grid,
  .camp-manage__summary-grid {
    grid-template-columns: 1fr;
  }

  .camp-manage__hero--studio,
  .camp-manage__studio-topbar,
  .camp-manage__summary,
  .camp-manage__section,
  .camp-manage__sidebar {
    padding: 16px;
  }
}

.dashboard-shell {
  display: grid;
  gap: 18px;
}

.dashboard-stage {
  position: relative;
  display: grid;
  gap: 20px;
}

.dashboard-hero {
  display: grid;
  gap: 16px;
  padding: 24px;
  border-radius: 32px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, var(--accent) 22%);
  background:
    radial-gradient(circle at top right, rgba(20, 184, 166, 0.16), transparent 34%),
    radial-gradient(circle at top left, rgba(14, 165, 233, 0.1), transparent 30%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, white 6%), var(--surface));
  box-shadow:
    0 28px 56px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.dashboard-hero__eyebrow {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
}

.dashboard-hero__eyebrow svg {
  width: 16px;
  height: 16px;
}

.dashboard-hero__content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: end;
}

.dashboard-hero h1 {
  margin: 0;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.15;
}

.dashboard-hero p {
  margin: 0;
  color: var(--muted);
  line-height: 1.9;
  max-width: 66ch;
}

.dashboard-hero__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(110px, 1fr));
  gap: 10px;
}

.dashboard-stat {
  min-width: 110px;
  padding: 14px 16px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface) 75%, white 25%);
  border: 1px solid color-mix(in srgb, var(--border) 88%, var(--accent) 12%);
  text-align: center;
}

.dashboard-stat strong {
  display: block;
  font-size: 24px;
  line-height: 1.1;
}

.dashboard-stat span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.dashboard-section {
  padding: 18px;
  border-radius: 24px;
  border: 1px solid color-mix(in srgb, var(--border) 84%, var(--accent) 16%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-muted) 72%, transparent), transparent);
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.05);
  display: grid;
  gap: 14px;
  overflow: hidden;
}

.dashboard-section::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--section-accent), transparent 70%);
  opacity: .95;
}

.dashboard-section--1 { --section-accent: #14b8a6; }
.dashboard-section--2 { --section-accent: #0ea5e9; }
.dashboard-section--3 { --section-accent: #f97316; }
.dashboard-section--4 { --section-accent: #8b5cf6; }

.dashboard-section {
  position: relative;
}

.dashboard-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.dashboard-section__eyebrow {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.dashboard-section__header strong {
  font-size: 18px;
}

.dashboard-section__count {
  min-width: 36px;
  height: 36px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--section-accent) 12%, var(--surface));
  color: var(--section-accent);
  font-size: 12px;
  font-weight: 800;
}

.dashboard-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dashboard-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--border) 86%, var(--accent) 14%);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 84%, white 16%), var(--surface)),
    radial-gradient(circle at top right, color-mix(in srgb, var(--section-accent, var(--accent)) 10%, transparent), transparent 45%);
  color: var(--text);
  text-decoration: none;
  font-weight: 800;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.dashboard-link:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--section-accent, var(--accent)) 38%, var(--border));
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
}

.dashboard-link__icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--section-accent, var(--accent)) 12%, var(--surface));
  color: var(--section-accent, var(--accent));
  flex-shrink: 0;
}

.dashboard-link__icon svg,
.dashboard-link__chevron svg {
  width: 20px;
  height: 20px;
}

.dashboard-link__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-link__chevron {
  color: var(--muted);
}

.dashboard-empty {
  padding: 28px 22px;
  text-align: center;
  color: var(--muted);
}

.dashboard-builder {
  display: grid;
  gap: 14px;
}

.dashboard-builder__toolbar,
.dashboard-builder__section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.dashboard-builder__section {
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--surface);
  display: grid;
  gap: 12px;
}

.dashboard-builder__section-body {
  display: grid;
  gap: 10px;
}

.dashboard-builder__section-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px auto;
  gap: 10px;
  align-items: end;
}

.dashboard-builder__links {
  display: grid;
  gap: 8px;
}

.dashboard-builder__link-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 150px 110px auto;
  gap: 10px;
  align-items: end;
}

.dashboard-builder .field {
  margin: 0;
}

.navigation-settings-panel {
  overflow: hidden;
}

.navigation-settings-panel .section-title {
  align-items: flex-start;
  gap: 16px;
}

.navigation-settings-panel__header-copy {
  display: grid;
  gap: 4px;
}

.navigation-settings-panel__header-copy strong {
  font-size: 18px;
}

.navigation-settings-panel__header-copy span {
  max-width: 760px;
}

.navigation-settings-panel__summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.navigation-settings-panel__summary span,
.navigation-settings-panel__note {
  border-radius: 999px;
  padding: 8px 12px;
  background: color-mix(in srgb, var(--surface-muted) 78%, transparent);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.navigation-settings-panel__note {
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.navigation-settings-panel .dashboard-builder {
  gap: 16px;
}

.navigation-settings-panel .dashboard-builder__toolbar {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-muted) 64%, transparent), transparent);
}

.navigation-settings-panel .dashboard-builder__toolbar strong {
  font-size: 14px;
}

.navigation-settings-panel .dashboard-builder__toolbar .muted {
  display: block;
  margin-top: 2px;
}

.navigation-settings-panel .dashboard-builder__links {
  gap: 12px;
}

.navigation-settings-panel .dashboard-builder__link-row {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow);
  grid-template-columns: minmax(160px, 220px) minmax(0, 1.2fr) minmax(320px, 0.95fr);
  align-items: stretch;
}

.navigation-settings-panel .navigation-item-card__footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px auto auto;
  gap: 10px;
  align-items: end;
  grid-column: auto;
}

.navigation-settings-panel .navigation-item-card__main {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, .95fr) minmax(0, 1.2fr);
  gap: 10px;
  grid-column: auto;
}

.navigation-settings-panel .field--check {
  align-self: end;
}

.navigation-settings-panel .field select,
.navigation-settings-panel .field input {
  background: var(--surface);
}

.navigation-settings-panel select,
.navigation-settings-panel option {
  font-family: Tahoma, "Segoe UI", Arial, sans-serif;
  font-feature-settings: normal;
}

.navigation-item-card__preview {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px dashed color-mix(in srgb, var(--border) 78%, transparent);
  background: color-mix(in srgb, var(--surface-muted) 64%, transparent);
  align-self: stretch;
}

.navigation-item-card__preview-icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  flex-shrink: 0;
}

.navigation-item-card__preview-icon svg {
  width: 18px;
  height: 18px;
}

.navigation-item-card__preview-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}

.navigation-settings-panel .button--ghost {
  white-space: nowrap;
}

@media (max-width: 980px) {
  .navigation-settings-panel .dashboard-builder__link-row {
    grid-template-columns: 1fr;
  }

  .navigation-settings-panel .navigation-item-card__main,
  .navigation-settings-panel .navigation-item-card__footer {
    grid-template-columns: 1fr;
  }

  .navigation-item-card__preview {
    align-self: auto;
  }

  .navigation-settings-panel__summary {
    justify-content: flex-start;
  }
}

@media (max-width: 980px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .dashboard-hero {
    padding: 18px;
    border-radius: 24px;
  }

  .dashboard-section {
    padding: 16px;
    border-radius: 20px;
  }

  .dashboard-hero__content {
    grid-template-columns: 1fr;
  }

  .dashboard-hero__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-builder__section-meta,
  .dashboard-builder__link-row {
    grid-template-columns: 1fr;
  }
}


/* Province Map */
.daba-map-page {
  padding-block: 12px 22px;
}

.daba-map-shell {
  width: min(100%, 1280px);
  margin: 0 auto;
  display: grid;
  gap: 16px;
}

.daba-map-headerbar {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: 16px;
  padding: 18px;
  border-radius: 28px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, var(--accent) 18%);
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent-soft) 24%, transparent), transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, #fff 4%), color-mix(in srgb, var(--surface-muted) 90%, #fff 10%));
  box-shadow: 0 20px 42px rgba(17, 17, 17, 0.06);
}

.daba-map-headerbar--directory {
  align-items: start;
}

.daba-map-headerbar__copy {
  display: grid;
  gap: 8px;
}

.daba-map-headerbar__eyebrow {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
}

.daba-map-headerbar__copy strong {
  font-size: 24px;
  line-height: 1.35;
}

.daba-map-headerbar__copy small {
  color: var(--muted);
  line-height: 1.9;
}

.daba-map-headerbar__tools {
  display: grid;
  gap: 12px;
  align-content: start;
}

.daba-map-headerbar__tools--stack {
  justify-items: stretch;
}

.daba-map-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.daba-map-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 92%, var(--accent-soft) 8%);
  color: inherit;
  text-decoration: none;
  font-weight: 800;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.daba-map-back-link:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  box-shadow: 0 12px 24px rgba(17, 17, 17, 0.08);
}

.daba-map-back-link svg {
  width: 16px;
  height: 16px;
}

.daba-map-breadcrumb__meta {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.daba-map-search {
  display: flex;
  gap: 10px;
}

.daba-map-search input {
  flex: 1;
  min-width: 0;
  min-height: 46px;
  padding: 0 14px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: inherit;
}

.daba-map-search input::placeholder {
  color: var(--muted);
}

.daba-map-search .button {
  white-space: nowrap;
}

.daba-map-card {
  padding: 16px;
  border-radius: 24px;
  border: 1px solid color-mix(in srgb, var(--border) 84%, var(--accent) 16%);
  background: color-mix(in srgb, var(--surface) 96%, #fff 4%);
  box-shadow: 0 18px 34px rgba(17, 17, 17, 0.05);
  display: grid;
  gap: 12px;
}

.daba-map-card--compact {
  gap: 14px;
}

.daba-map-card--results {
  position: sticky;
  top: 96px;
  align-self: start;
}

.daba-map-quicklinks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.daba-map-quicklink {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--accent-soft) 16%, transparent), transparent 42%),
    color-mix(in srgb, var(--surface) 92%, #fff 8%);
  color: inherit;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.daba-map-quicklink:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  box-shadow: 0 14px 28px rgba(17, 17, 17, 0.08);
}

.daba-map-quicklink__icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface) 86%);
  color: var(--accent);
  flex-shrink: 0;
}

.daba-map-quicklink__copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.daba-map-quicklink__copy strong {
  font-size: 14px;
  line-height: 1.5;
}

.daba-map-quicklink__copy small {
  color: var(--muted);
  line-height: 1.7;
  font-size: 11px;
}

.daba-map-quicklink__chevron {
  color: var(--accent);
}

.daba-map-workspace {
  display: grid;
  grid-template-columns: minmax(280px, 0.86fr) minmax(0, 1.14fr);
  gap: 16px;
  align-items: start;
}

.daba-map-results {
  display: grid;
  gap: 10px;
  max-height: 760px;
  overflow: auto;
  padding-inline-end: 4px;
}

.daba-map-result-card {
  appearance: none;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 94%, #fff 6%);
  border-radius: 18px;
  padding: 12px;
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 12px;
  width: 100%;
  text-align: right;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.daba-map-result-card:hover,
.daba-map-result-card.is-active {
  transform: translateY(-1px);
  border-color: var(--accent);
  box-shadow: 0 16px 28px rgba(17, 17, 17, 0.08);
}

.daba-map-result-card__media {
  width: 68px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-strong) 88%, #fff 12%);
  display: grid;
  place-items: center;
  color: var(--accent);
  font-size: 18px;
  font-weight: 900;
}

.daba-map-result-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.daba-map-result-card__body {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.daba-map-result-card__topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.daba-map-result-card__topline strong {
  font-size: 14px;
  line-height: 1.6;
}

.daba-map-result-card__id {
  flex-shrink: 0;
  padding: 4px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface) 88%);
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
}

.daba-map-result-card__meta,
.daba-map-result-card__address {
  color: var(--muted);
  line-height: 1.8;
  font-size: 12px;
}

.daba-map-stage {
  min-width: 0;
}

.daba-map-stage__canvas {
  position: relative;
  min-height: 660px;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 82%, var(--accent) 18%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, #fff 4%), color-mix(in srgb, var(--surface-muted) 90%, #fff 10%));
  box-shadow: 0 20px 40px rgba(17, 17, 17, 0.06);
}

.daba-map-canvas,
#dabaProvinceMap {
  width: 100%;
  height: 100%;
  min-height: inherit;
}

.daba-map-floating--filters {
  position: absolute;
  top: 16px;
  inset-inline-end: 16px;
  width: min(100%, 380px);
  z-index: 2;
}

.daba-map-filterbar {
  padding: 14px;
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  box-shadow: 0 16px 32px rgba(17, 17, 17, 0.08);
  display: grid;
  gap: 10px;
}

.daba-map-filterbar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.daba-map-filterbar__head strong {
  font-size: 13px;
}

.daba-map-filterbar__head span {
  color: var(--muted);
  font-size: 11px;
}

.daba-map-category-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.daba-map-category {
  appearance: none;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 94%, #fff 6%);
  color: inherit;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.daba-map-category:hover,
.daba-map-category.is-active {
  transform: translateY(-1px);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface) 88%);
}

.daba-map-stage__overlay {
  position: absolute;
  inset-inline-start: 16px;
  bottom: 16px;
  max-width: 430px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.82);
  color: #fff;
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 34px rgba(17, 17, 17, 0.16);
  display: grid;
  gap: 4px;
}

.daba-map-stage__overlay strong {
  font-size: 13px;
}

.daba-map-stage__overlay span {
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.8;
  font-size: 12px;
}

.daba-map-modal {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: grid;
  place-items: center;
  padding: 16px;
}

.daba-map-modal[hidden] {
  display: none;
}

.daba-map-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.58);
  backdrop-filter: blur(6px);
}

.daba-map-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 620px);
  border-radius: 26px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: color-mix(in srgb, var(--surface) 98%, #fff 2%);
  box-shadow: 0 30px 64px rgba(15, 23, 42, 0.24);
  padding: 18px;
}

.daba-map-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.daba-map-modal__head strong {
  display: block;
  font-size: 18px;
}

.daba-map-modal__head span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  line-height: 1.8;
}

.daba-map-submit-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.daba-map-submit-form .field {
  margin: 0;
}

.daba-map-submit-form .field input,
.daba-map-submit-form .field select,
.daba-map-submit-form .field textarea {
  width: 100%;
}

.daba-map-submit-form .settings-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 980px) {
  .daba-map-headerbar,
  .daba-map-workspace {
    grid-template-columns: 1fr;
  }

  .daba-map-card--results {
    position: static;
    top: auto;
  }

  .daba-map-quicklinks {
    grid-template-columns: 1fr;
  }

  .daba-map-stage__canvas {
    min-height: 520px;
  }

  .daba-map-floating--filters {
    position: static;
    width: auto;
    inset: auto;
    padding: 12px;
  }

  .daba-map-stage__overlay {
    position: static;
    max-width: none;
    margin: 12px;
  }
}

@media (max-width: 760px) {
  .daba-map-headerbar {
    padding: 14px;
    border-radius: 22px;
  }

  .daba-map-headerbar__copy strong {
    font-size: 20px;
  }

  .daba-map-search {
    flex-direction: column;
  }

  .daba-map-search .button {
    width: 100%;
  }

  .daba-map-stage__canvas {
    min-height: 440px;
    border-radius: 22px;
  }

  .daba-map-result-card {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .daba-map-result-card__media {
    width: 58px;
  }

  .daba-map-submit-form {
    grid-template-columns: 1fr;
  }

  .daba-map-modal__dialog {
    padding: 14px;
    border-radius: 20px;
  }
}

@media (max-width: 540px) {
  .daba-map-page {
    padding-block: 10px 18px;
  }

  .daba-map-shell {
    gap: 12px;
  }

  .daba-map-headerbar__copy small,
  .daba-map-stage__overlay span,
  .daba-map-quicklink__copy small {
    font-size: 11px;
  }

  .daba-map-back-link {
    width: 100%;
    justify-content: center;
  }
}

/* Camp Visual Layer */
.camp-carousel,
.camp-showcase,
.camp-today-head,
.camp-group-head {
  overflow: clip;
}

.camp-swiper {
  display: grid;
  gap: 14px;
}

.camp-swiper .swiper {
  width: 100%;
  overflow: visible;
}

.camp-swiper .swiper-slide {
  height: auto;
}

.camp-swiper .swiper-slide > * {
  height: 100%;
}

.camp-swiper__footer {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) 120px;
  gap: 12px;
  align-items: center;
}

.camp-swiper__pagination,
.camp-swiper__dots {
  min-height: 10px;
}

.camp-swiper__pagination.swiper-pagination-progressbar {
  position: relative;
  inset: auto;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-2) 78%, transparent);
}

.camp-swiper__pagination .swiper-pagination-progressbar-fill {
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 52%, white));
  border-radius: 999px;
}

.camp-swiper__dots .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-2) 76%, var(--text-muted) 24%);
  opacity: 1;
}

.camp-swiper__dots .swiper-pagination-bullet-active {
  width: 28px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, white));
}

.camp-swiper__nav {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 90%, var(--surface-2) 10%);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease;
}

.camp-swiper__nav:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent-soft) 18%, var(--surface) 82%);
  transform: translateY(-1px);
}

.camp-carousel .camp-card,
.camp-swiper .camp-card {
  min-height: 100%;
}

.camp-showcase__visuals,
.camp-visual-meters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.camp-meter {
  display: grid;
  gap: 10px;
  justify-items: center;
  padding: 18px 14px;
  border-radius: 28px;
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, var(--surface-2) 8%), color-mix(in srgb, var(--surface) 72%, var(--surface-2) 28%));
}

.camp-meter__visual {
  position: relative;
  width: 118px;
  height: 118px;
}

.camp-meter svg {
  width: 118px;
  height: 118px;
  transform: rotate(-90deg);
}

.camp-meter__track,
.camp-meter__fill {
  fill: none;
  stroke-width: 10;
}

.camp-meter__track {
  stroke: color-mix(in srgb, var(--surface-2) 80%, transparent);
}

.camp-meter__fill {
  transition: stroke-dashoffset 0.9s cubic-bezier(.22,1,.36,1);
  stroke-linecap: round;
}

.camp-meter--accent .camp-meter__fill {
  stroke: var(--accent);
}

.camp-meter--emerald .camp-meter__fill {
  stroke: #17b26a;
}

.camp-meter--amber .camp-meter__fill {
  stroke: #f59e0b;
}

.camp-meter__center {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 4px;
  text-align: center;
}

.camp-meter__value {
  font-size: 1.12rem;
  font-weight: 800;
  color: var(--text);
}

.camp-meter__label,
.camp-meter__hint {
  color: var(--text-muted);
  font-size: 0.84rem;
}

.camp-meter__hint {
  text-align: center;
  line-height: 1.65;
}

.camp-roadmap__timeline {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}

.camp-roadmap__timeline-segment {
  flex: var(--segment) 1 0;
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 35%, transparent), color-mix(in srgb, var(--surface-2) 82%, var(--accent-soft) 18%));
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line) 80%);
}

.camp-roadmap__timeline-segment strong {
  font-size: 0.92rem;
  color: var(--text);
}

.camp-roadmap__timeline-segment small {
  color: var(--text-muted);
}

.camp-roadmap__module {
  height: 100%;
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  border-radius: 30px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, var(--surface-2) 4%), color-mix(in srgb, var(--surface) 84%, var(--surface-2) 16%));
  padding: 16px;
}

.camp-roadmap__summary {
  align-items: start;
  gap: 14px;
}

.camp-roadmap__toggle {
  padding: 8px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-soft) 16%, var(--surface) 84%);
  color: var(--accent);
  font-weight: 700;
}

.camp-roadmap__task {
  border-radius: 22px;
  padding: 14px;
  background: color-mix(in srgb, var(--surface-2) 72%, var(--surface) 28%);
}

.camp-home-flow__card,
.camp-home-board__item,
.camp-showcase__goal,
.camp-task-panel,
.camp-submission-card,
.camp-chat__message > div,
.camp-submission {
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}

.camp-card__cover::after,
.camp-showcase__cover::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 44%;
  background: linear-gradient(180deg, transparent, rgba(15, 23, 42, 0.28));
  pointer-events: none;
}

.camp-card__cover,
.camp-showcase__cover {
  position: relative;
  overflow: hidden;
}

.camp-card__cover img,
.camp-showcase__cover img {
  transition: transform 0.45s ease;
}

.camp-card:hover .camp-card__cover img,
.camp-showcase:hover .camp-showcase__cover img {
  transform: scale(1.04);
}

.camp-daily-board__stats article,
.camp-group-head__facts span,
.camp-showcase__facts span {
  position: relative;
  overflow: hidden;
}

.camp-daily-board__stats article::before,
.camp-group-head__facts span::before,
.camp-showcase__facts span::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--accent), transparent);
}

@media (max-width: 1180px) {
  .camp-showcase__visuals,
  .camp-visual-meters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .camp-swiper__footer {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .camp-roadmap__timeline {
    flex-direction: column;
  }

  .camp-showcase__visuals,
  .camp-visual-meters {
    grid-template-columns: 1fr;
  }
}

/* Camp UX Refresh */
.page-shell--camp {
  width: min(100%, 1840px);
}

.camp-page {
  width: min(100%, calc(100vw - 20px));
  max-width: 1720px;
  margin-inline: auto;
  gap: 22px;
}

.camp-hero--storyboard {
  padding: 28px;
  align-items: start;
}

.camp-home-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(300px, 0.78fr);
  gap: 22px;
  align-items: start;
}

.camp-home-main,
.camp-home-side,
.camp-main-stack {
  display: grid;
  gap: 18px;
}

.camp-home-flow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.camp-home-flow__card,
.camp-home-board__item,
.camp-daily-board__stats article,
.camp-facts-grid article {
  display: grid;
  gap: 6px;
  padding: 16px 18px;
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(255, 255, 255, 0.86);
}

.camp-home-flow__card strong,
.camp-home-board__item strong {
  font-size: 0.96rem;
}

.camp-home-flow__card span,
.camp-home-board__item span,
.camp-daily-board__stats article span,
.camp-facts-grid article span,
.camp-form__field-note {
  color: var(--text-muted);
  line-height: 1.8;
}

.camp-home-board,
.camp-panel--soft,
.camp-daily-board,
.camp-submission-card {
  padding: 22px;
}

.camp-home-board__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.camp-card {
  border-radius: 28px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 250, 252, 0.96));
}

.camp-card__cover {
  min-height: 230px;
}

.camp-card__joined-flag {
  position: absolute;
  inset-inline-end: 14px;
  top: 14px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(15, 118, 110, 0.88);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 800;
}

.camp-card__goal {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(240, 253, 250, 0.78);
  border: 1px solid rgba(20, 184, 166, 0.16);
}

.camp-card__goal strong {
  font-size: 0.88rem;
}

.camp-card__goal span {
  color: var(--text-muted);
  line-height: 1.8;
}

.camp-card__kpis,
.camp-facts-grid,
.camp-daily-board__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.camp-card__kpis span {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.95);
  border: 1px solid rgba(148, 163, 184, 0.16);
}

.camp-card__kpis strong,
.camp-facts-grid strong,
.camp-daily-board__stats strong {
  font-size: 1rem;
}

.camp-card__kpis small,
.camp-facts-grid span,
.camp-daily-board__stats span {
  color: var(--text-muted);
  font-size: 0.82rem;
}

.camp-layout--show {
  grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.82fr);
  gap: 22px;
}

.camp-sidebar--show {
  position: sticky;
  top: 82px;
}

.camp-panel--soft {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 250, 252, 0.96));
}

.camp-rich {
  color: var(--text);
  line-height: 1.95;
}

.camp-rich :where(p, ul, ol, blockquote, pre) {
  margin-top: 0;
}

.camp-rich :where(p:last-child, ul:last-child, ol:last-child, blockquote:last-child, pre:last-child) {
  margin-bottom: 0;
}

.camp-rich a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 700;
}

.camp-roadmap--clarified {
  gap: 14px;
}

.camp-roadmap__module {
  padding: 0;
  overflow: hidden;
}

.camp-roadmap__summary {
  list-style: none;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 18px;
  cursor: pointer;
}

.camp-roadmap__summary::-webkit-details-marker {
  display: none;
}

.camp-roadmap__week-badge {
  display: grid;
  gap: 2px;
  place-items: center;
  min-height: 72px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(12, 74, 110, 0.08), rgba(20, 184, 166, 0.12));
  color: #0f766e;
  font-weight: 800;
}

.camp-roadmap__week-badge span {
  font-size: 0.76rem;
}

.camp-roadmap__week-badge strong {
  font-size: 1.3rem;
}

.camp-roadmap__headline {
  display: grid;
  gap: 6px;
}

.camp-roadmap__headline span,
.camp-roadmap__toggle,
.camp-roadmap__task-summary,
.camp-task-panel__summary {
  color: var(--text-muted);
}

.camp-roadmap__toggle {
  font-size: 0.84rem;
  font-weight: 700;
}

.camp-roadmap__module[open] .camp-roadmap__toggle {
  color: var(--accent);
}

.camp-roadmap__module-body {
  display: grid;
  gap: 14px;
  padding: 0 18px 18px;
}

.camp-roadmap__module-copy {
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(148, 163, 184, 0.14);
}

.camp-roadmap__task {
  align-items: start;
}

.camp-roadmap__task-head {
  display: grid;
  gap: 8px;
}

.camp-roadmap__task-copy {
  margin-top: 4px;
}

.camp-roadmap__steps {
  margin: 0;
  padding-inline-start: 20px;
  line-height: 1.95;
}

.camp-roadmap__steps--daily {
  margin-top: 2px;
}

.camp-resource-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.camp-resource-link {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(240, 249, 255, 0.86);
  border: 1px solid rgba(14, 165, 233, 0.16);
  color: #0369a1;
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 700;
}

.camp-resource-link--muted {
  background: rgba(248, 250, 252, 0.92);
  border-color: rgba(148, 163, 184, 0.16);
  color: var(--text-muted);
}

.camp-daily-board {
  display: grid;
  gap: 16px;
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(246, 250, 253, 0.96));
}

.camp-daily-board__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.camp-daily-board__top div {
  display: grid;
  gap: 4px;
}

.camp-daily-board__top span {
  color: var(--text-muted);
}

.camp-task-panel--daily {
  gap: 14px;
}

.camp-submission-card {
  display: grid;
  gap: 10px;
  border-radius: 18px;
  background: rgba(240, 253, 244, 0.72);
  border: 1px solid rgba(34, 197, 94, 0.14);
}

.camp-submission-card strong {
  font-size: 0.94rem;
}

.camp-group-layout--clarified {
  grid-template-columns: minmax(310px, 0.75fr) minmax(0, 1.25fr);
  gap: 22px;
}

.camp-leaderboard--rich .camp-leaderboard__stats {
  display: grid;
  justify-items: end;
  gap: 3px;
  white-space: nowrap;
}

.camp-leaderboard--rich .camp-leaderboard__stats small {
  color: var(--text-muted);
}

.camp-group-head--clarified .camp-rich {
  margin-top: 8px;
}

.camp-today-head--clarified,
.camp-group-head--clarified,
.camp-showcase--clarified {
  padding: 26px;
}

.camp-form__field-note {
  display: block;
  margin-top: -4px;
  margin-bottom: 2px;
  font-size: 0.82rem;
}

.ck.ck-editor__main > .ck-editor__editable {
  min-height: 220px;
  direction: rtl;
  text-align: right;
}

.ck.ck-content {
  font-family: inherit;
  line-height: 1.9;
}

@media (max-width: 1280px) {
  .camp-home-layout,
  .camp-layout--show,
  .camp-group-layout--clarified {
    grid-template-columns: 1fr;
  }

  .camp-sidebar--show {
    position: static;
  }
}

@media (max-width: 980px) {
  .camp-page {
    width: min(100%, calc(100vw - 16px));
  }

  .camp-hero--storyboard,
  .camp-showcase--clarified,
  .camp-today-head--clarified,
  .camp-group-head--clarified,
  .camp-panel--soft,
  .camp-daily-board {
    padding: 18px;
  }

  .camp-home-flow,
  .camp-home-board__grid,
  .camp-card__kpis,
  .camp-facts-grid,
  .camp-daily-board__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .camp-home-flow,
  .camp-home-board__grid,
  .camp-card__kpis,
  .camp-facts-grid,
  .camp-daily-board__stats,
  .camp-roadmap__summary {
    grid-template-columns: 1fr;
  }

  .camp-daily-board__top,
  .camp-showcase__actions,
  .camp-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .camp-roadmap__summary {
    gap: 12px;
  }
}

/* Camp Pages */
.page-shell--camp .camp-page:not(.camp-manage) {
  width: min(100%, calc(100vw - 24px));
  max-width: 1660px;
  margin-inline: auto;
  gap: 22px;
}

.camp-page--index,
.camp-page--show,
.camp-page--today,
.camp-page--group {
  gap: 22px;
}

.camp-hero--landing,
.camp-today-head,
.camp-showcase,
.camp-group-head {
  border-radius: 32px;
  box-shadow: 0 20px 46px rgba(15, 23, 42, 0.08);
}

.camp-hero--landing {
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  padding: 26px;
}

.camp-hero__content {
  display: grid;
  gap: 10px;
}

.camp-hero__metrics--wide {
  align-self: stretch;
  grid-template-columns: 1fr;
}

.camp-home-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: start;
}

.camp-home-main,
.camp-home-side {
  display: grid;
  gap: 22px;
}

.camp-side-panel,
.camp-panel,
.camp-catalog,
.camp-overview-strip {
  padding: 20px;
  border-radius: 28px;
}

.camp-side-steps {
  margin: 0;
  padding-inline-start: 18px;
  display: grid;
  gap: 12px;
  line-height: 1.9;
}

.camp-side-callout {
  display: grid;
  gap: 10px;
  padding: 16px 18px;
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: color-mix(in srgb, var(--surface) 90%, var(--accent-soft) 10%);
}

.camp-grid--catalog {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.camp-card {
  border-radius: 28px;
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.06);
}

.camp-card__cover {
  min-height: 240px;
}

.camp-card__body {
  padding: 20px;
  gap: 14px;
}

.camp-card__summary {
  min-height: 56px;
}

.camp-card__date {
  color: var(--text-muted);
  font-size: 0.86rem;
  line-height: 1.8;
}

.camp-card__stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.camp-card__stats span {
  padding: 10px 12px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 80%, var(--surface-2) 20%);
}

.camp-card__mentor,
.camp-showcase__mentor {
  padding: 10px 12px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 84%, var(--accent-soft) 16%);
}

.camp-showcase {
  grid-template-columns: minmax(360px, 0.92fr) minmax(0, 1.08fr);
}

.camp-showcase__cover {
  min-height: 420px;
}

.camp-showcase__body {
  padding: 28px;
}

.camp-showcase__facts span,
.camp-task-panel__meta span,
.camp-progress__meta span,
.camp-submission__meta span,
.camp-group-head__facts span,
.camp-today-head__stats span {
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(148, 163, 184, 0.18);
}

.camp-layout,
.camp-group-layout {
  grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.82fr);
  gap: 24px;
}

.camp-sidebar,
.camp-group-sidebar {
  position: sticky;
  top: 86px;
}

.camp-cohort-row,
.camp-member-row,
.camp-leaderboard__item,
.camp-overview-pill {
  border-radius: 20px;
}

.camp-roadmap {
  gap: 18px;
}

.camp-roadmap__module {
  padding: 20px;
  border-radius: 24px;
}

.camp-roadmap__tasks {
  gap: 12px;
}

.camp-roadmap__task {
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(148, 163, 184, 0.14);
}

.camp-roadmap__task-body {
  display: grid;
  gap: 8px;
}

.camp-today-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  padding: 24px;
}

.camp-today-head__actions {
  display: grid;
  gap: 12px;
  align-content: start;
  justify-items: end;
}

.camp-today-head__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.camp-today-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.camp-today-card {
  padding: 20px;
  border-radius: 28px;
  display: grid;
  gap: 16px;
}

.camp-checkin-panel {
  padding: 14px 16px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface) 88%, var(--accent-soft) 12%);
  border: 1px solid rgba(148, 163, 184, 0.16);
}

.camp-group-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  padding: 24px;
}

.camp-group-main {
  gap: 20px;
}

.camp-chat {
  max-height: 420px;
  overflow: auto;
  padding-inline-end: 4px;
}

.camp-chat__composer textarea,
.camp-submit-form textarea,
.camp-review-form input {
  border-radius: 16px;
}

.camp-submission {
  padding: 18px;
  border-radius: 22px;
}

@media (max-width: 1440px) {
  .camp-home-layout {
    grid-template-columns: 1fr;
  }

  .camp-home-side,
  .camp-sidebar,
  .camp-group-sidebar {
    position: static;
  }
}

@media (max-width: 1240px) {
  .camp-grid--catalog,
  .camp-today-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1100px) {
  .camp-layout,
  .camp-group-layout,
  .camp-showcase,
  .camp-hero--landing {
    grid-template-columns: 1fr;
  }

  .camp-today-head,
  .camp-group-head {
    grid-template-columns: 1fr;
  }

  .camp-today-head__actions {
    justify-items: start;
  }

  .camp-today-head__stats {
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .page-shell--camp .camp-page:not(.camp-manage) {
    width: min(100%, calc(100vw - 14px));
  }

  .camp-hero__metrics,
  .camp-card__stats,
  .camp-grid--catalog {
    grid-template-columns: 1fr;
  }

  .camp-hero--landing,
  .camp-today-head,
  .camp-group-head,
  .camp-showcase__body,
  .camp-side-panel,
  .camp-panel,
  .camp-catalog,
  .camp-overview-strip,
  .camp-today-card {
    padding: 16px;
  }

  .camp-card__cover {
    min-height: 200px;
  }
}

/* Memorial */
.page-shell--wide .memorial-hero__card {
  backdrop-filter: blur(10px);
}

/* If AOS CSS loads but JS doesn't, `[data-aos]` stays invisible. Force visibility on memorial pages. */
body.body--memorial [data-aos] {
  opacity: 1 !important;
  transform: none !important;
}

.memorial-hero {
  position: relative;
  z-index: 0;
  margin: 6px 0 18px;
}

.body--memorial {
  background: rgb(193, 222, 237);
}

.body--memorial .app-main {
  background: rgb(193, 222, 237);
  padding-top: 0;
}

.app-header-clouds {
  position: relative;
  height: 103px;
  background: rgb(193, 222, 237);
  pointer-events: none;
  overflow: hidden;
  filter: saturate(1.02) contrast(1.02);
  border-bottom: 0;
  margin-bottom: 0;
}

.app-header-clouds::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/memorial/bac.jpg");
  background-repeat: repeat-x;
  background-position: 0 0;
  background-size: auto 103px;
}

.app-header-clouds::before {
  opacity: 1;
  animation: appHeaderCloudsMove 60s linear infinite;
}

.dark-theme .app-header-clouds {
  opacity: 0.82;
  mix-blend-mode: screen;
}

/* Memorial: Dark Theme polish (override the light blue theme) */
:root.dark-theme body.body--memorial {
  background:
    radial-gradient(900px 620px at 16% -8%, rgba(76, 183, 255, 0.18), transparent 62%),
    radial-gradient(760px 520px at 88% 8%, rgba(255, 183, 77, 0.10), transparent 58%),
    radial-gradient(1100px 760px at 50% 110%, rgba(250, 250, 250, 0.06), transparent 66%),
    #071820;
}

:root.dark-theme body.body--memorial .app-main {
  /* Layout uses inline background-color for memorial; !important ensures dark theme wins. */
  background:
    radial-gradient(900px 620px at 16% -8%, rgba(76, 183, 255, 0.18), transparent 62%),
    radial-gradient(760px 520px at 88% 8%, rgba(255, 183, 77, 0.10), transparent 58%),
    radial-gradient(1100px 760px at 50% 110%, rgba(250, 250, 250, 0.06), transparent 66%),
    #071820 !important;
}

:root.dark-theme .app-header-clouds {
  display: none !important;
}

.memorial-hero::before {
  content: "";
  position: absolute;
  inset: -10px 0 0;
  border-radius: 34px;
  z-index: -2;
  background:
    radial-gradient(circle at 14% 30%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 46%),
    radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 56%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface-muted) 72%, white 28%), transparent 72%);
  pointer-events: none;
  filter: saturate(1.05) contrast(1.03);
  animation: memorialAurora 12s ease-in-out infinite alternate;
}

.memorial-hero::after {
  content: "";
  position: absolute;
  inset: -14px 0 0;
  border-radius: 34px;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(circle at 30% 40%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 55%),
    radial-gradient(circle at 70% 20%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 60%);
  opacity: 0.38;
  mix-blend-mode: multiply;
  animation: memorialAurora2 16s ease-in-out infinite alternate;
}

@keyframes appHeaderCloudsMove {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -1000px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-header-clouds::before {
    animation: none;
  }
}

@keyframes memorialAurora {
  from {
    transform: translateY(0) scale(1);
  }
  to {
    transform: translateY(6px) scale(1.01);
  }
}

@keyframes memorialAurora2 {
  from {
    transform: translateY(0) scale(1);
    opacity: 0.55;
  }
  to {
    transform: translateY(10px) scale(1.02);
    opacity: 0.75;
  }
}

.icon-button--memorial {
  position: relative;
  overflow: visible;
}

.icon-button--memorial::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 58%),
    radial-gradient(circle at 70% 70%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 62%);
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 200ms ease, transform 200ms ease;
  pointer-events: none;
}

.icon-button--memorial.icon-button--with-label::before {
  border-radius: 999px;
}

.icon-button--memorial:hover::before,
.icon-button--memorial.is-active::before {
  opacity: 1;
  transform: scale(1);
}

.icon-button--memorial svg {
  transform-origin: 50% 50%;
  transition: transform 200ms ease;
}

.icon-button--memorial:hover svg {
  transform: rotate(-6deg) scale(1.04);
}

.icon-button--memorial.is-active svg {
  animation: memorialIconBreath 2.6s ease-in-out infinite;
}

.icon-button--memorial.is-active::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  top: -2px;
  right: -2px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 60%),
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 70%, transparent), transparent 70%);
  filter: blur(0.1px);
  opacity: 0.85;
  animation: memorialSpark 1.9s ease-in-out infinite;
  pointer-events: none;
}

@keyframes memorialIconBreath {
  0% {
    transform: rotate(-2deg) scale(1);
  }
  50% {
    transform: rotate(5deg) scale(1.06);
  }
  100% {
    transform: rotate(-2deg) scale(1);
  }
}

@keyframes memorialSpark {
  0% {
    transform: translate(0, 0) scale(0.9);
    opacity: 0.6;
  }
  55% {
    transform: translate(-2px, 2px) scale(1.12);
    opacity: 0.95;
  }
  100% {
    transform: translate(0, 0) scale(0.9);
    opacity: 0.6;
  }
}

.memorial-hero__card {
  position: relative;
  z-index: 1;
  padding: 22px;
  border-radius: 30px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, var(--accent));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 88%, white 12%), var(--surface)),
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 10%, transparent), transparent 36%);
  box-shadow: var(--shadow);
}

.memorial-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-soft) 70%, transparent);
  color: color-mix(in srgb, var(--text) 70%, var(--accent));
  font-weight: 800;
  letter-spacing: -0.01em;
}

.memorial-hero__mark {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
}

.memorial-hero__title {
  margin: 14px 0 6px;
  font-size: 22px;
  letter-spacing: -0.02em;
}

.memorial-hero__subtitle {
  margin: 0 0 16px;
  color: var(--muted);
  line-height: 1.8;
}

.memorial-hero__menu {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.memorial-menu-item {
  --memorial-action-color: var(--accent);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  min-height: 46px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--border) 74%, var(--memorial-action-color));
  background:
    radial-gradient(circle at 25% 25%, color-mix(in srgb, var(--memorial-action-color) 10%, transparent), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, white 8%), var(--surface));
  text-decoration: none;
  color: var(--text);
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.memorial-menu-item:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--border) 55%, var(--memorial-action-color));
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
}

.memorial-menu-item__icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--memorial-action-color) 34%, white), transparent 64%),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--memorial-action-color) 16%, white 84%),
      color-mix(in srgb, var(--memorial-action-color) 10%, var(--surface) 90%)
    );
  border: 1px solid color-mix(in srgb, var(--memorial-action-color) 22%, var(--border));
  color: var(--memorial-action-color);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.08);
}

.memorial-menu-item__icon svg {
  width: 18px;
  height: 18px;
  transition: transform 180ms ease;
}

.memorial-menu-item:hover .memorial-menu-item__icon svg {
  transform: rotate(-8deg) scale(1.06);
}

.memorial-menu-item__label {
  font-weight: 900;
  letter-spacing: -0.01em;
  font-size: 13px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.memorial-hero__timeline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 14px;
}

.memorial-hero__step {
  padding: 12px 12px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-muted) 82%, white 18%);
  display: grid;
  gap: 3px;
}

.memorial-hero__step strong {
  font-size: 14px;
  letter-spacing: -0.02em;
}

.memorial-hero__step span {
  font-size: 12px;
  color: var(--muted);
}

.memorial-hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 14px;
}

.memorial-stat {
  padding: 12px 12px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  text-decoration: none;
  display: grid;
  gap: 4px;
}

.memorial-stat:hover {
  border-color: color-mix(in srgb, var(--border) 60%, var(--accent));
}

.memorial-stat__value {
  color: var(--text);
  font-weight: 900;
  font-size: 16px;
}

.memorial-stat__label {
  color: var(--muted);
  font-size: 12px;
}

.memorial-hero__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.memorial-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.memorial-action {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background:
    radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, white 6%), var(--surface));
  text-decoration: none;
  color: var(--text);
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
  --memorial-action-color: var(--accent);
}

.memorial-action:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--border) 55%, var(--accent));
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
}

.memorial-action__icon {
  width: 42px;
  height: 42px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--memorial-action-color) 30%, white), transparent 62%),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--memorial-action-color) 16%, white 84%),
      color-mix(in srgb, var(--memorial-action-color) 8%, var(--surface) 92%)
    );
  border: 1px solid color-mix(in srgb, var(--memorial-action-color) 22%, var(--border));
  color: var(--memorial-action-color);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.08);
}

.memorial-action__icon svg {
  width: 20px;
  height: 20px;
  transition: transform 180ms ease;
}

.memorial-action:hover .memorial-action__icon svg {
  transform: rotate(-8deg) scale(1.06);
}

.memorial-action__label {
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.memorial-action--gallery { --memorial-action-color: #0ea5e9; }
.memorial-action--forum { --memorial-action-color: #6366f1; }
.memorial-action--members { --memorial-action-color: #22c55e; }
.memorial-action--mobile { --memorial-action-color: #f59e0b; }
.memorial-action--delete { --memorial-action-color: #ef4444; }

.memorial-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.memorial-panel {
  padding: 18px;
}

.memorial-panel--members {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, #22c55e 20%, var(--border));
  background:
    radial-gradient(circle at 12% 10%, rgba(34, 197, 94, 0.16), transparent 46%),
    radial-gradient(circle at 92% 0%, rgba(0, 149, 246, 0.12), transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, white 8%), var(--surface));
}

.memorial-panel__title-icon {
  width: 38px;
  height: 38px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 30% 25%, rgba(34, 197, 94, 0.22), transparent 62%),
    linear-gradient(180deg, rgba(34, 197, 94, 0.14), color-mix(in srgb, var(--surface-muted) 86%, transparent));
  border: 1px solid color-mix(in srgb, #22c55e 22%, var(--border));
  color: #15803d;
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.06);
  flex: 0 0 auto;
}

.memorial-panel__title-icon svg {
  width: 18px;
  height: 18px;
}

.memorial-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.memorial-panel__head .muted {
  max-width: 62ch;
  font-size: 12.5px;
  line-height: 1.9;
}

.memorial-panel__head strong,
.memorial-panel__head h1 {
  display: block;
  font-size: 20px;
  font-weight: 950;
  letter-spacing: -0.025em;
  line-height: 1.25;
  margin-bottom: 6px;
}

.memorial-panel__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 2px;
}

.memorial-panel__title-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.memorial-panel__title-row h1 {
  margin: 0;
}

.memorial-timeline__nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.memorial-action-link {
  height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  text-decoration: none;
  border: 1px solid transparent;
  background: transparent;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -0.01em;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
}

.memorial-action-link svg {
  width: 18px;
  height: 18px;
  color: inherit;
}

.memorial-action-link:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--border) 74%, transparent);
  background: color-mix(in srgb, var(--surface-muted) 82%, transparent);
  transform: translateY(-1px);
}

.memorial-action-link:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 2px;
}

.memorial-action-link--sm {
  height: 30px;
  padding: 0 8px;
  font-size: 11px;
}

.memorial-action-link--sm svg {
  width: 17px;
  height: 17px;
}

.memorial-action-link--xs {
  height: 28px;
  padding: 0 8px;
  font-size: 10.5px;
}

.memorial-action-link--xs svg {
  width: 16px;
  height: 16px;
}

.memorial-action-link--danger {
  color: color-mix(in srgb, var(--danger) 82%, var(--muted));
}

.memorial-action-link--danger:hover {
  border-color: color-mix(in srgb, var(--danger) 26%, var(--border));
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  color: var(--danger);
}

.memorial-timeline__swiper {
  position: relative;
  padding: 10px 14px 12px;
}

/* Timeline layout: center card (~50%) with action rails on both sides */
.memorial-timeline-row {
  display: grid;
  grid-template-columns: minmax(260px, 34%) minmax(420px, 66%);
  gap: 16px;
  align-items: stretch;
}

.memorial-timeline-row > * {
  min-width: 0;
}

.memorial-action-box {
  border-radius: 26px;
  border: 1px solid color-mix(in srgb, var(--border) 70%, var(--accent));
  background:
    radial-gradient(circle at 16% 12%, rgba(var(--accent-rgb), 0.10), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 90%, white 10%), var(--surface));
  box-shadow: 0 28px 78px rgba(0, 0, 0, 0.12);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.memorial-action-grid--side {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 10px 10px 12px;
  flex: 1;
  align-content: start;
}

.memorial-action-grid--side .memorial-action {
  border-radius: 18px;
  grid-column: auto;
  padding: 8px 10px;
  gap: 8px;
  min-height: 44px;
}

.memorial-action-grid--side .memorial-action:nth-child(n + 4) { grid-column: auto; }

.memorial-action-grid--side .memorial-action__icon {
  width: 30px;
  height: 30px;
  border-radius: 12px;
}

.memorial-action-grid--side .memorial-action__icon svg {
  width: 16px;
  height: 16px;
}

.memorial-action-grid--side .memorial-action__label {
  font-size: 12px;
  line-height: 1.2;
}

.memorial-timeline-row > .memorial-timeline {
  border-radius: 26px;
  border: 1px solid color-mix(in srgb, var(--border) 70%, var(--accent));
  background:
    radial-gradient(circle at 16% 12%, rgba(var(--accent-rgb), 0.10), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 88%, white 12%), var(--surface));
  box-shadow: 0 28px 78px rgba(0, 0, 0, 0.12);
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.memorial-timeline__swiper::before {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: 34px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--border) 70%, var(--accent) 30%),
    transparent
  );
  opacity: 0.9;
  pointer-events: none;
}

.memorial-timeline__nav .icon-button {
  width: 34px;
  height: 34px;
  padding: 6px;
  border-radius: 14px;
}

.memorial-timeline__nav .icon-button svg {
  width: 18px;
  height: 18px;
}

.memorial-timeline__slide {
  width: 100%;
  height: auto;
}

.memorial-timeline__card {
  position: relative;
  padding: 14px 14px 12px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background:
    radial-gradient(circle at 16% 20%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, white 6%), var(--surface));
  min-height: 108px;
  transition: transform 280ms ease, box-shadow 280ms ease, border-color 280ms ease;
  will-change: transform;
}

.memorial-timeline__card.is-metric {
  background:
    radial-gradient(circle at 18% 22%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 62%),
    radial-gradient(circle at 90% 24%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-muted) 75%, white 25%), var(--surface));
}

.memorial-timeline__dot {
  position: absolute;
  top: 22px;
  inset-inline-start: 16px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--surface);
  border: 2px solid color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.08);
}

.memorial-timeline__thumb {
  position: absolute;
  top: 14px;
  inset-inline-start: 12px;
  width: 34px;
  height: 34px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 78%, var(--accent));
  background: var(--surface-muted);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.12);
}

.memorial-timeline__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.memorial-timeline__card.has-thumb .memorial-timeline__dot {
  display: none;
}

.memorial-timeline__date {
  font-size: 12px;
  font-weight: 900;
  color: color-mix(in srgb, var(--text) 72%, var(--accent));
  padding-inline-start: 20px;
  letter-spacing: -0.01em;
}

.memorial-timeline__card.has-thumb .memorial-timeline__date {
  padding-inline-start: 44px;
}

.memorial-timeline__title {
  margin-top: 6px;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.memorial-timeline__card.has-thumb .memorial-timeline__title,
.memorial-timeline__card.has-thumb .memorial-timeline__value,
.memorial-timeline__card.has-thumb .memorial-timeline__subtitle {
  padding-inline-start: 44px;
}

/* Timeline (image as background, richer overlay) */
.memorial-timeline__card.has-thumb {
  padding: 0;
  overflow: hidden;
  min-height: 230px;
  background: color-mix(in srgb, var(--surface-muted) 70%, var(--surface));
  border-radius: 26px;
  box-shadow:
    0 24px 66px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.memorial-timeline__card.has-thumb .memorial-timeline__dot {
  display: none;
}

.memorial-timeline__media {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--surface-muted) 75%, white 25%);
}

.memorial-timeline__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 22% 18%, rgba(var(--accent-rgb), 0.22), transparent 58%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.64) 78%, rgba(0, 0, 0, 0.78));
  pointer-events: none;
}

.memorial-timeline__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.12);
  animation: memorialTimelineBg 14s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes memorialTimelineBg {
  0% { transform: translate3d(-1.5%, -1.2%, 0) scale(1.12); }
  100% { transform: translate3d(1.5%, 1.2%, 0) scale(1.18); }
}

.memorial-timeline__overlay {
  position: relative;
  z-index: 1;
  min-height: 230px;
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
}

.memorial-timeline__overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.14), transparent 50%),
    linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.22) 68%, rgba(0, 0, 0, 0.28));
  pointer-events: none;
}

.memorial-timeline__overlay > * {
  position: relative;
  z-index: 1;
}

.memorial-timeline__chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 2px;
}

.memorial-timeline__chip {
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
}

.memorial-timeline__chip--type {
  background: rgba(var(--accent-rgb), 0.28);
  border-color: rgba(var(--accent-rgb), 0.45);
}

.memorial-timeline__card.has-thumb .memorial-timeline__title,
.memorial-timeline__card.has-thumb .memorial-timeline__value,
.memorial-timeline__card.has-thumb .memorial-timeline__subtitle,
.memorial-timeline__card.has-thumb .memorial-timeline__date {
  padding-inline-start: 0;
  color: rgba(255, 255, 255, 0.96);
  text-shadow: 0 10px 26px rgba(0, 0, 0, 0.48);
}

.memorial-timeline__card.has-thumb .memorial-timeline__subtitle {
  color: rgba(255, 255, 255, 0.84);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.memorial-timeline__slide.swiper-slide-active .memorial-timeline__card {
  transform: translateY(-3px) scale(1.02);
  border-color: color-mix(in srgb, var(--accent) 26%, var(--border));
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.16);
}

.memorial-timeline__slide.swiper-slide-active .memorial-timeline__media img {
  transform: scale(1.22);
}

.memorial-timeline__card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 20%, var(--border));
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.14);
}

.memorial-timeline__card:hover .memorial-timeline__media img {
  transform: scale(1.22);
}

@media (max-width: 520px) {
  .memorial-timeline__slide {
    width: 86vw;
  }
  .memorial-timeline__card.has-thumb,
  .memorial-timeline__overlay {
    min-height: 240px;
  }
}

@media (max-width: 980px) {
  .memorial-timeline-row {
    grid-template-columns: 1fr;
  }

  .memorial-action-grid--side {
    grid-template-columns: 1fr 1fr;
  }

  .memorial-action-grid--side .memorial-action,
  .memorial-action-grid--side .memorial-action:nth-child(n + 4) {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .memorial-timeline__card,
  .memorial-timeline__media img {
    transition: none !important;
    animation: none !important;
  }
  .memorial-timeline__slide.swiper-slide-active .memorial-timeline__card,
  .memorial-timeline__card:hover {
    transform: none !important;
  }
}

.memorial-timeline__value {
  margin-top: 4px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.memorial-timeline__subtitle {
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.7;
}

.memorial-empty {
  padding: 16px;
  border-radius: 18px;
  border: 1px dashed color-mix(in srgb, var(--border) 75%, var(--accent));
  background: color-mix(in srgb, var(--surface-muted) 72%, white 28%);
  color: var(--muted);
  line-height: 1.8;
}

.memorial-media-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.memorial-media {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-muted) 80%, transparent);
  aspect-ratio: 1 / 1;
}

.memorial-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.memorial-topic-list {
  display: grid;
  gap: 10px;
}

.memorial-topic {
  display: block;
  text-decoration: none;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}

.memorial-topic:hover {
  border-color: color-mix(in srgb, var(--border) 60%, var(--accent));
  transform: translateY(-1px);
}

.memorial-topic__title {
  font-weight: 900;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}

.memorial-topic__meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  align-items: center;
}

.memorial-topic__pill {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-muted) 76%, white 24%);
  font-size: 11px;
  font-weight: 800;
  color: color-mix(in srgb, var(--text) 72%, var(--accent));
}

.memorial-topic__excerpt {
  color: var(--muted);
  line-height: 1.8;
  font-size: 12px;
}

.memorial-search {
  position: relative;
  margin: 10px 0 14px;
}

.memorial-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin: 10px 0 14px;
}

.memorial-search input {
  width: 100%;
  padding: 12px 14px;
  padding-inline-end: 48px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}

.memorial-search__submit {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 8px;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 12px;
}

.memorial-search__submit svg {
  width: 18px;
  height: 18px;
}

.memorial-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.memorial-shot {
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-muted) 82%, transparent);
  margin: 0;
}

.memorial-shot img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
}

.memorial-shot figcaption {
  padding: 12px 12px 14px;
  display: grid;
  gap: 4px;
}

.memorial-pager {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
}

.memorial-members {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.memorial-member {
  position: relative;
  overflow: hidden;
  padding: 14px;
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--border) 86%, #22c55e 14%);
  background:
    radial-gradient(circle at 14% 12%, rgba(34, 197, 94, 0.14), transparent 56%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 95%, white 5%), var(--surface));
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: start;
  justify-items: center;
  text-align: center;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.memorial-member::after {
  content: "";
  position: absolute;
  inset-block: 10px;
  inset-inline-start: 10px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(34, 197, 94, 0.8), rgba(0, 149, 246, 0.35));
  opacity: 0.22;
  pointer-events: none;
}

.memorial-member:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--border) 55%, #22c55e 45%);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.08);
}

.memorial-member__avatar {
  display: block;
  width: 68px;
  height: 68px;
}

.memorial-member__avatar img {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid color-mix(in srgb, var(--border) 60%, var(--accent));
  background: var(--surface-muted);
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.08);
}

.memorial-member__body {
  width: 100%;
  display: grid;
  justify-items: center;
}

.memorial-member__name-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
}

.memorial-member__name {
  font-weight: 900;
  letter-spacing: -0.01em;
  min-width: 0;
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.45;
}

.memorial-member__name a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.memorial-member__badge {
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, #22c55e 18%, var(--border));
  background: color-mix(in srgb, #22c55e 10%, var(--surface));
  color: color-mix(in srgb, #15803d 86%, var(--text));
  font-size: 11px;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.memorial-member__meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
  justify-content: center;
}

.memorial-member__actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 10px;
  justify-content: center;
}

@media (max-width: 720px) {
  .memorial-members {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1120px) {
  .memorial-members {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.body--memorial .memorial-panel__head .icon-button,
.body--memorial .memorial-member__actions .icon-button,
.body--memorial .memorial-member-header__actions .icon-button {
  width: 32px;
  height: 32px;
  border-radius: 12px;
}

.body--memorial .memorial-panel__head .icon-button svg,
.body--memorial .memorial-member__actions .icon-button svg,
.body--memorial .memorial-member-header__actions .icon-button svg {
  width: 18px;
  height: 18px;
}

.memorial-topic-list--page .memorial-topic--row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.memorial-topic__author {
  display: grid;
  gap: 6px;
  justify-items: center;
}

.memorial-topic__author img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid color-mix(in srgb, var(--border) 60%, var(--accent));
  background: var(--surface-muted);
}

.memorial-topic__author-name {
  width: 64px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--muted);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.memorial-topic--row .memorial-topic__actions {
  display: flex;
  gap: 8px;
  align-items: center;
  padding-top: 4px;
}

.memorial-topic--compact {
  padding: 12px;
}

.memorial-topic--compact .memorial-topic__meta {
  margin-bottom: 0;
}

.memorial-topic--compact .memorial-topic__actions {
  color: var(--muted);
  padding-top: 8px;
}

.memorial-topic--compact .memorial-topic__actions svg {
  width: 18px;
  height: 18px;
}

.memorial-topic__title a {
  color: inherit;
  text-decoration: none;
}

.memorial-topic__title a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.memorial-topic-page {
  padding: 18px;
}

.memorial-member-page {
  padding: 18px;
}

.memorial-member-header {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 22px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-muted) 78%, white 22%);
  margin-bottom: 12px;
}

.memorial-member-header__avatar img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid color-mix(in srgb, var(--border) 60%, var(--accent));
  background: var(--surface);
}

.memorial-member-header h1 {
  font-size: 18px;
  margin: 0 0 4px;
  letter-spacing: -0.02em;
}

.memorial-member-header__meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
}

.memorial-member-header__stats {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}

.memorial-topic-header {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 22px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-muted) 78%, white 22%);
  margin-bottom: 12px;
}

.memorial-topic-header__avatar img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid color-mix(in srgb, var(--border) 60%, var(--accent));
  background: var(--surface);
}

.memorial-topic-header h1 {
  font-size: 18px;
  margin: 0 0 4px;
  letter-spacing: -0.02em;
}

.memorial-topic-header__meta {
  color: var(--muted);
  font-size: 12px;
}

.memorial-topic-header__byline {
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}

.memorial-topic-header__byline a {
  color: var(--text);
  font-weight: 800;
  text-decoration: none;
}

.memorial-topic-header__byline a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.memorial-topic-content {
  line-height: 1.9;
  color: var(--text);
  padding: 8px 6px 2px;
  white-space: normal;
  word-break: break-word;
}

.memorial-topic-content a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.memorial-topic-content p {
  margin: 0 0 12px;
}

.memorial-topic-content ul,
.memorial-topic-content ol {
  margin: 0 0 12px;
  padding-inline-start: 1.2em;
}

.memorial-topic-content blockquote {
  margin: 12px 0;
  padding: 10px 12px;
  border-inline-start: 3px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  background: color-mix(in srgb, var(--surface-muted) 70%, transparent);
  border-radius: 14px;
}

.memorial-topic-content pre,
.memorial-topic-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.memorial-topic-content pre {
  padding: 12px;
  overflow: auto;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-muted) 82%, transparent);
}

.memorial-topic-content img {
  max-width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid var(--border);
}

.memorial-posts {
  display: grid;
  gap: 12px;
}

.memorial-post {
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  border-radius: 18px;
  padding: 12px;
}

.memorial-post__head {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.memorial-post__author {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.memorial-post__avatar img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid color-mix(in srgb, var(--border) 60%, var(--accent));
  background: var(--surface-muted);
}

.memorial-post__author-meta {
  min-width: 0;
}

.memorial-post__name {
  display: inline-block;
  font-weight: 900;
  color: var(--text);
  text-decoration: none;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.memorial-post__name:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.memorial-post__time {
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
}

.memorial-post__badge {
  font-size: 12px;
  color: var(--muted);
  flex: 0 0 auto;
}

.memorial-post__title {
  font-weight: 900;
  margin: 2px 0 8px;
  letter-spacing: -0.01em;
}

.memorial-post__body {
  line-height: 1.9;
  color: var(--text);
  word-break: break-word;
}

.memorial-post__body p {
  margin: 0 0 12px;
}

.icon-button--danger {
  color: var(--danger);
}

.icon-button--danger:hover {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
}

.memorial-infinite__sentinel {
  height: 1px;
}

.memorial-infinite__status {
  padding: 10px 2px 0;
}

.comments-more-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 2px 0;
}

.pwa-install-toast {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(env(safe-area-inset-bottom) + 84px);
  z-index: 96;
  display: grid;
  justify-items: center;
  pointer-events: none;
}

.pwa-install-toast__inner {
  width: min(100%, 720px);
  background: color-mix(in srgb, var(--surface) 92%, white 8%);
  border: 1px solid color-mix(in srgb, var(--border) 84%, var(--accent));
  border-radius: 18px;
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.14),
    0 6px 16px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(14px);
  padding: 12px 12px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  pointer-events: auto;
}

.pwa-install-toast__copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.pwa-install-toast__copy strong {
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
}

.pwa-install-toast__copy span {
  font-size: 12px;
  color: color-mix(in srgb, var(--muted) 84%, var(--text));
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pwa-install-toast__actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

@media (max-width: 420px) {
  .pwa-install-toast__inner {
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (max-width: 720px) {
  .admin-post-card,
  .admin-slider-banner-card {
    grid-template-columns: 1fr;
  }

  .admin-post-card__actions {
    justify-content: flex-start;
  }
}
  .pwa-install-toast__copy span {
    white-space: normal;
  }
  .pwa-install-toast__actions {
    justify-content: flex-start;
  }
}

.forum-topic__admin {
  margin-top: 6px;
}

.memorial-topic__author-dot {
  width: 40px;
  height: 40px;
  display: inline-block;
  border-radius: 14px;
  border: 1px solid var(--border);
  background:
    radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 52%),
    color-mix(in srgb, var(--surface-muted) 76%, white 24%);
}

.memorial-group-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.memorial-group-grid--search {
  grid-template-columns: 1fr;
}

.memorial-search-hit--topic { --group-accent: #6366f1; }
.memorial-search-hit--post { --group-accent: #0ea5e9; }
.memorial-search-hit--group { --group-accent: #22c55e; }

.memorial-search-hit__snippet {
  margin-top: 6px;
  line-height: 1.9;
  font-size: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.memorial-group {
  --group-accent: var(--accent);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 14px;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  background:
    radial-gradient(circle at 18% 22%, color-mix(in srgb, var(--group-accent) 14%, transparent), transparent 58%),
    radial-gradient(circle at 92% 18%, color-mix(in srgb, var(--group-accent) 10%, transparent), transparent 56%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-muted) 62%, white 38%), var(--surface));
  text-decoration: none;
  color: var(--text);
  box-shadow:
    0 1px 0 rgba(15, 23, 42, 0.05),
    0 16px 30px rgba(15, 23, 42, 0.06);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.memorial-group-grid .memorial-group:nth-child(5n + 1) { --group-accent: #0ea5e9; }
.memorial-group-grid .memorial-group:nth-child(5n + 2) { --group-accent: #6366f1; }
.memorial-group-grid .memorial-group:nth-child(5n + 3) { --group-accent: #22c55e; }
.memorial-group-grid .memorial-group:nth-child(5n + 4) { --group-accent: #f59e0b; }
.memorial-group-grid .memorial-group:nth-child(5n + 5) { --group-accent: #ef4444; }

.memorial-group::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 20px;
  pointer-events: none;
  background:
    radial-gradient(closest-side at 30% 20%, rgba(255, 255, 255, 0.55), transparent 70%),
    radial-gradient(closest-side at 90% 20%, rgba(255, 255, 255, 0.30), transparent 74%);
  opacity: 0.45;
}

.memorial-group:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--border) 55%, var(--group-accent));
  box-shadow:
    0 1px 0 rgba(15, 23, 42, 0.05),
    0 22px 44px rgba(15, 23, 42, 0.10);
}

.memorial-group__icon {
  position: absolute;
  inset-inline-end: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  color: color-mix(in srgb, var(--group-accent) 85%, white 15%);
  opacity: 0.12;
  pointer-events: none;
}

.memorial-group__icon svg {
  width: 64px;
  height: 64px;
  transition: transform 180ms ease;
}

.memorial-group:hover .memorial-group__icon svg {
  transform: rotate(-10deg) scale(1.04);
}

.memorial-group__body {
  min-width: 0;
  display: grid;
  gap: 3px;
  position: relative;
  grid-column: 1;
}

.memorial-group__title {
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.5;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.memorial-group__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
}

.memorial-group__meta .memorial-topic__pill {
  border-color: color-mix(in srgb, var(--border) 70%, var(--group-accent));
  background: color-mix(in srgb, var(--group-accent) 10%, var(--surface-muted));
  color: color-mix(in srgb, var(--text) 72%, var(--group-accent));
}

.memorial-group__chev {
  margin-inline-start: auto;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: var(--muted);
  flex: 0 0 auto;
  position: relative;
  transition: transform 180ms ease, color 180ms ease;
  grid-column: 2;
}

.memorial-group:hover .memorial-group__chev {
  color: color-mix(in srgb, var(--text) 70%, var(--group-accent));
  transform: translateX(-2px);
}

.memorial-group__chev svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 920px) {
  .memorial-group-grid {
    grid-template-columns: 1fr;
  }

  .memorial-group__title {
    -webkit-line-clamp: 2;
  }
}

.memorial-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 4px;
}

.memorial-breadcrumb a {
  color: var(--muted);
  text-decoration: none;
}

.memorial-breadcrumb a:hover {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.memorial-breadcrumb__sep {
  opacity: 0.6;
}

.memorial-breadcrumb__current {
  color: var(--text);
  font-weight: 800;
}

.memorial-memories {
  display: grid;
  gap: 10px;
}

.memorial-memory-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.memorial-memory-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 22px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  text-decoration: none;
  color: var(--text);
  min-width: 0;
  box-shadow:
    0 1px 0 rgba(15, 23, 42, 0.05),
    0 14px 26px rgba(15, 23, 42, 0.06);
  transition: transform 220ms ease, background 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
  will-change: transform;
}

.memorial-memory-card:hover {
  border-color: color-mix(in srgb, var(--border) 58%, var(--accent));
  background: color-mix(in srgb, var(--surface) 88%, var(--accent-soft) 12%);
  transform: translateY(-3px) rotate(-0.25deg);
  box-shadow:
    0 1px 0 rgba(15, 23, 42, 0.05),
    0 18px 34px rgba(15, 23, 42, 0.10);
}

.memorial-memory-card:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 58%, transparent);
  outline-offset: 3px;
}

.memorial-memory-card__thumb {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-muted);
  aspect-ratio: 4 / 3;
}

.memorial-memory-card__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 20% 10%, rgba(255, 255, 255, 0.30), transparent 60%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.00), rgba(0, 0, 0, 0.14));
  opacity: 0.55;
  transition: opacity 260ms ease;
}

.memorial-memory-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.01);
  transition: transform 320ms cubic-bezier(0.2, 0.9, 0.2, 1), filter 320ms ease;
}

.memorial-memory-card:hover .memorial-memory-card__thumb img {
  transform: scale(1.09) rotate(0.9deg);
  filter: saturate(1.04) contrast(1.02);
}

.memorial-memory-card:hover .memorial-memory-card__thumb::after {
  opacity: 0.75;
}

@media (prefers-reduced-motion: reduce) {
  .memorial-memory-card,
  .memorial-memory-card__thumb img,
  .memorial-memory-card__thumb::after {
    transition: none !important;
  }

  .memorial-memory-card:hover {
    transform: none;
  }

  .memorial-memory-card:hover .memorial-memory-card__thumb img {
    transform: none;
    filter: none;
  }
}

.memorial-memory-card__cap {
  font-weight: 950;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.memorial-memory-card__meta {
  font-size: 12px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 980px) {
  .memorial-memory-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .memorial-memory-cards {
    grid-template-columns: 1fr;
  }
}

.memorial-memory {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  text-decoration: none;
  color: var(--text);
}

.memorial-memory:hover {
  border-color: color-mix(in srgb, var(--border) 58%, var(--accent));
  background: color-mix(in srgb, var(--surface) 88%, var(--accent-soft) 12%);
}

.memorial-memory__thumb img {
  width: 90px;
  height: 70px;
  border-radius: 16px;
  object-fit: cover;
  border: 1px solid var(--border);
  background: var(--surface-muted);
  display: block;
}

.memorial-memory__meta {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.memorial-memory__cat {
  font-weight: 900;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.memorial-memory__desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.memorial-category-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.memorial-category-card {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  text-decoration: none;
  color: var(--text);
  min-width: 0;
  transition: transform 200ms ease, border-color 200ms ease, background 200ms ease, box-shadow 200ms ease;
}

.memorial-category-card:hover {
  border-color: color-mix(in srgb, var(--border) 58%, var(--accent));
  background: color-mix(in srgb, var(--surface) 88%, var(--accent-soft) 12%);
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(15, 23, 42, 0.05),
    0 18px 34px rgba(15, 23, 42, 0.10);
}

.memorial-category-card--thumb {
  grid-template-columns: 1fr;
  align-items: start;
  gap: 10px;
  padding: 12px;
}

.memorial-category-card__thumb {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  background: color-mix(in srgb, var(--surface-muted) 82%, transparent);
  aspect-ratio: 16 / 10;
}

.memorial-category-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  transition: transform 280ms cubic-bezier(0.2, 0.9, 0.2, 1), filter 280ms ease;
}

.memorial-category-card__thumb-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: color-mix(in srgb, var(--text) 60%, var(--accent));
}

.memorial-category-card__thumb-fallback svg {
  width: 22px;
  height: 22px;
}

.memorial-category-card:hover .memorial-category-card__thumb img {
  transform: scale(1.09) rotate(0.7deg);
  filter: saturate(1.04) contrast(1.02);
}

.memorial-category-card__body {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.memorial-category-card--thumb .memorial-category-card__title {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.memorial-category-card--thumb .memorial-category-card__desc {
  -webkit-line-clamp: 2;
}

.memorial-category-card__title {
  font-weight: 950;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.memorial-category-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 12px;
  color: var(--muted);
}

.memorial-category-card__desc {
  color: var(--muted);
  line-height: 1.7;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 560px) {
  .memorial-category-card--thumb {
    grid-template-columns: 1fr;
  }

  .memorial-category-card__thumb {
    aspect-ratio: 16 / 9;
  }
}

.memorial-category-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.memorial-category-shot {
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 0;
  overflow: hidden;
  background: var(--surface);
  cursor: pointer;
}

.memorial-category-shot:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--border) 58%, var(--accent));
}

.memorial-category-shot img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}

.memorial-group-page {
  padding: 18px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 55%),
    radial-gradient(circle at 92% 18%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 56%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-muted) 68%, white 32%), var(--surface));
  box-shadow:
    0 1px 0 rgba(15, 23, 42, 0.06),
    0 22px 44px rgba(15, 23, 42, 0.06);
}

.memorial-group-page::before {
  content: "";
  position: absolute;
  inset: -120px -80px auto -80px;
  height: 260px;
  pointer-events: none;
  background:
    radial-gradient(closest-side at 20% 50%, rgba(255, 255, 255, 0.55), transparent 70%),
    radial-gradient(closest-side at 80% 40%, rgba(255, 255, 255, 0.35), transparent 75%);
  opacity: 0.7;
}

.memorial-group-page .memorial-panel__head {
  position: relative;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}

.memorial-group-lead {
  min-width: 0;
}

.memorial-group-meta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
}

.memorial-group-meta__item {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
  background: color-mix(in srgb, var(--surface) 86%, var(--accent-soft) 14%);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: -0.01em;
  color: color-mix(in srgb, var(--text) 70%, var(--accent));
}

.memorial-group-meta__dot {
  color: color-mix(in srgb, var(--muted) 70%, var(--accent));
  opacity: 0.9;
}

.memorial-group-children {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 2px 0 14px;
}

.memorial-group-card {
  display: grid;
  gap: 6px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background:
    radial-gradient(circle at 16% 16%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-muted) 72%, white 28%), var(--surface));
  text-decoration: none;
  color: var(--text);
  box-shadow:
    0 1px 0 rgba(15, 23, 42, 0.05),
    0 14px 28px rgba(15, 23, 42, 0.06);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
  will-change: transform;
}

.memorial-group-card:hover {
  border-color: color-mix(in srgb, var(--border) 58%, var(--accent));
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(15, 23, 42, 0.05),
    0 18px 34px rgba(15, 23, 42, 0.10);
}

.memorial-group-card:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 3px;
}

.memorial-group-card__title {
  font-weight: 900;
  letter-spacing: -0.01em;
}

.memorial-group-card__meta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  color: var(--muted);
}

.memorial-group-card__dot {
  opacity: 0.8;
}

.memorial-group-page .memorial-search {
  margin: 12px 0 16px;
}

.memorial-group-page .memorial-search input {
  background:
    radial-gradient(circle at 14% 0%, rgba(255, 255, 255, 0.55), transparent 56%),
    color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow:
    0 1px 0 rgba(15, 23, 42, 0.04),
    0 16px 28px rgba(15, 23, 42, 0.04);
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.memorial-group-page .memorial-search:focus-within input {
  border-color: color-mix(in srgb, var(--border) 52%, var(--accent));
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--accent-soft) 28%, transparent),
    0 16px 28px rgba(15, 23, 42, 0.06);
}

.memorial-group-page .memorial-topic {
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow:
    0 1px 0 rgba(15, 23, 42, 0.04),
    0 16px 28px rgba(15, 23, 42, 0.04);
}

.memorial-group-page .memorial-topic:hover {
  background: color-mix(in srgb, var(--surface) 88%, var(--accent-soft) 12%);
}

@media (max-width: 980px) {
  .memorial-group-children {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .memorial-group-children {
    grid-template-columns: 1fr;
  }
}

.memorial-forum-topics {
  display: grid;
  gap: 10px;
}

.forum-topic {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 140px 220px;
  gap: 12px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
}

.forum-topic__title a {
  color: var(--text);
  text-decoration: none;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.forum-topic__title a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.forum-topic__meta {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.forum-topic__stats {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
}

.forum-topic__stat {
  text-align: center;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-muted) 76%, white 24%);
  min-width: 60px;
}

.forum-topic__stat-value {
  font-weight: 900;
  font-size: 14px;
}

.forum-topic__stat-label {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

.forum-topic__last {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-muted) 76%, white 24%);
}

.forum-topic__last-avatar img {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  object-fit: cover;
  border: 1px solid var(--border);
  background: var(--surface);
}

.forum-topic__last-who {
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.forum-topic__last-when {
  margin-top: 2px;
  font-size: 12px;
}

.forum-thread__posts {
  display: grid;
  gap: 14px;
  margin-top: 10px;
}

.forum-post {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  overflow: hidden;
}

.forum-post__content {
  padding: 14px 14px 12px;
  min-width: 0;
}

.forum-post__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  margin-bottom: 8px;
}

.forum-post__starter {
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 70%, var(--accent));
  background: color-mix(in srgb, var(--accent-soft) 70%, transparent);
  color: color-mix(in srgb, var(--text) 70%, var(--accent));
  font-weight: 800;
}

.forum-post__title {
  font-weight: 900;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}

.forum-post__body {
  line-height: 1.95;
  color: var(--text);
  word-break: break-word;
}

.forum-post__aside {
  padding: 14px 14px 12px;
  background: color-mix(in srgb, var(--surface-muted) 78%, white 22%);
  border-inline-start: 1px solid var(--border);
  display: grid;
  gap: 8px;
  align-content: start;
}

.forum-post__aside-avatar img {
  width: 84px;
  height: 84px;
  border-radius: 18px;
  object-fit: cover;
  border: 2px solid color-mix(in srgb, var(--border) 60%, var(--accent));
  background: var(--surface);
}

.forum-post__aside-name a,
.forum-post__aside-name span {
  font-weight: 900;
  color: var(--text);
  text-decoration: none;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.forum-post__aside-name a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.forum-post__aside-user {
  font-size: 12px;
}

.memorial-topic-page .forum-post {
  grid-template-columns: 240px minmax(0, 1fr);
  grid-template-areas: "aside content";
}

.memorial-topic-page .forum-post__aside {
  grid-area: aside;
  border-inline-start: none;
  border-inline-end: 1px solid var(--border);
  justify-items: center;
  text-align: center;
}

.memorial-topic-page .forum-post__content {
  grid-area: content;
}

@media (max-width: 860px) {
  .memorial-grid {
    grid-template-columns: 1fr;
  }

  .memorial-media-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .memorial-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .memorial-member-header {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .memorial-member-header__actions {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .memorial-group-children {
    grid-template-columns: 1fr;
  }

  .forum-topic {
    grid-template-columns: 1fr;
  }

  .forum-topic__stats {
    justify-content: flex-start;
  }

  .forum-post {
    grid-template-columns: 1fr;
  }

  .forum-post__aside {
    border-inline-start: none;
    border-top: 1px solid var(--border);
  }

  .memorial-topic-page .forum-post {
    grid-template-columns: 1fr;
    grid-template-areas:
      "aside"
      "content";
  }

  .memorial-topic-page .forum-post__aside {
    border-top: none;
    border-bottom: 1px solid var(--border);
  }

  .memorial-category-cards {
    grid-template-columns: 1fr;
  }

  .memorial-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .memorial-hero__timeline,
  .memorial-hero__stats {
    grid-template-columns: 1fr;
  }

  .memorial-hero__menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .memorial-action-grid {
    grid-template-columns: 1fr;
  }

  .memorial-search {
    flex-direction: column;
    align-items: stretch;
  }

  .memorial-gallery {
    grid-template-columns: 1fr;
  }

  .memorial-shot img {
    height: 260px;
  }
}

@media (min-width: 780px) {
  .memorial-hero__menu {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .memorial-action-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .memorial-action {
    grid-template-columns: 1fr;
    justify-items: start;
    align-items: start;
    gap: 8px;
    padding: 14px 14px;
  }

  .memorial-action__label {
    font-size: 13px;
  }
}

.hashtags-page {
  display: grid;
  gap: 20px;
}

.hashtags-hero {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  padding: 18px;
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(245, 158, 11, 0.18), transparent 38%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 247, 237, 0.96));
  border: 1px solid rgba(245, 158, 11, 0.14);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}

.hashtags-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  color: #b45309;
  font-weight: 800;
  font-size: 13px;
}

.hashtags-hero__eyebrow svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.hashtags-hero h1 {
  margin: 0;
  font-size: clamp(1.35rem, 2.5vw, 2.05rem);
}

.hashtags-hero p {
  margin: 8px 0 0;
  max-width: 780px;
  color: var(--muted);
  line-height: 1.85;
  font-size: 14px;
}

.hashtags-hero__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.05);
  color: var(--text);
  font-weight: 800;
}

.hashtags-group-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.hashtag-group-card {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 16px 14px;
  padding-left: 56px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
}

.hashtag-group-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.hashtag-group-card__title {
  min-width: 0;
  font-size: 0.98rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hashtag-group-card__desc {
  color: var(--muted);
  line-height: 1.8;
  font-size: 13px;
}

.hashtag-group-card::before {
  content: "";
  position: absolute;
  inset: auto -40px -40px auto;
  width: 120px;
  height: 120px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.16), transparent 68%);
}

.hashtag-group-card__icon {
  width: 46px;
  height: 46px;
  display: inline-grid;
  place-items: center;
  border-radius: 16px;
  color: #d97706;
  background: rgba(245, 158, 11, 0.12);
}

.hashtag-group-card__icon svg {
  width: 24px;
  height: 24px;
}

.hashtag-group-card__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

.hashtags-hero__icon-row {
  margin: 8px 0 10px;
}

.hashtag-group-card strong {
  font-size: inherit;
}

.hashtag-group-card small {
  color: inherit;
  line-height: inherit;
  font-size: inherit;
}

.hashtag-group-card__count {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  min-width: 34px;
  padding: 0 10px;
  border-radius: 12px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.18);
  color: #92400e;
  font-weight: 900;
  font-size: 12px;
}

@media (max-width: 900px) {
  .hashtags-group-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hashtags-hero {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 640px) {
  .hashtags-group-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .hashtags-group-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Group deals */
.group-deals-page,
.group-deal-show {
  display: grid;
  gap: 14px;
}

.group-deals-hero {
  padding: 14px;
}

.group-deals-hero__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.group-deals-featured-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 0 10px;
  padding-top: 10px;
  border-top: 1px dashed color-mix(in srgb, var(--border) 65%, transparent 35%);
}

.group-deals-featured-head span {
  color: var(--muted);
  font-size: 12px;
}

.group-deals-featured-slider {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.group-deals-featured-slide {
  position: relative;
  display: block;
  min-height: 200px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface-muted);
}

.group-deals-featured-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.group-deals-featured-slide__overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 10px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.75));
  color: #fff;
  display: grid;
  gap: 8px;
}

.group-deals-featured-slide__meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
}

.group-deals-featured-slide__bar,
.group-deal-card__bar,
.group-deal-show__bar {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-muted) 70%, transparent 30%);
  overflow: hidden;
}

.group-deals-featured-slide__bar span,
.group-deal-card__bar span,
.group-deal-show__bar span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #16a34a, #22c55e);
}

.group-deals-section {
  padding: 12px;
}

.group-deals-section__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.group-deals-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.group-deal-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
  display: grid;
}

.group-deal-card--inactive {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, var(--surface-muted) 8%), color-mix(in srgb, var(--surface) 78%, var(--surface-muted) 22%));
}

.group-deal-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16/10;
  background: var(--surface-muted);
}

.group-deal-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.group-deal-card__pill {
  position: absolute;
  inset: 8px auto auto 8px;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 12px;
  color: #fff;
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(4px);
}

.group-deal-card__pill--full {
  background: rgba(180, 83, 9, 0.82);
}

.group-deal-card__pill--ended {
  background: rgba(127, 29, 29, 0.84);
}

.group-deal-card__body {
  padding: 10px;
  display: grid;
  gap: 8px;
}

.group-deal-card__title {
  font-weight: 800;
  color: inherit;
  text-decoration: none;
}

.group-deal-card__prices {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.group-deal-card__prices strong {
  font-size: 15px;
}

.group-deal-card__prices small {
  color: var(--muted);
  text-decoration: line-through;
}

.group-deal-card__meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}

.group-deal-card__cta {
  margin-top: 4px;
}

.group-deal-card__cta .button {
  width: 100%;
  justify-content: center;
  text-decoration: none;
}

.group-deal-show__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
}

.group-deal-show__media {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  min-height: 240px;
  background: var(--surface-muted);
}

.group-deal-show__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.group-deal-show__gallery {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 240px;
  overflow: hidden;
}

.group-deal-show__gallery-main {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: color-mix(in srgb, var(--surface-muted) 80%, #000 20%);
}

.group-deal-show__gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.45);
  color: #fff;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
}

.group-deal-show__gallery-nav--prev {
  inset-inline-start: 10px;
}

.group-deal-show__gallery-nav--next {
  inset-inline-end: 10px;
}

.group-deal-show__thumbs {
  position: absolute;
  inset-inline: 12px;
  inset-block-end: 12px;
  z-index: 3;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.group-deal-show__thumbs::-webkit-scrollbar {
  display: none;
}

.group-deal-show__thumb {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.22);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
}

.group-deal-show__thumb.is-active {
  border-color: #fff;
}

.group-deal-show__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.group-deal-history__list {
  display: grid;
  gap: 14px;
}

.group-deal-history__card {
  display: grid;
  grid-template-columns: minmax(120px, 160px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.group-deal-history__cover {
  display: block;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
}

.group-deal-history__cover img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.group-deal-history__body,
.group-deal-history__head,
.group-deal-history__meta,
.group-deal-history__actions,
.group-deal-receipt__card,
.group-deal-receipt__head,
.group-deal-receipt__grid {
  display: grid;
  gap: 12px;
}

.group-deal-history__head {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.group-deal-history__head h2 {
  margin: 0;
  font-size: 18px;
}

.group-deal-history__head h2 a {
  color: inherit;
  text-decoration: none;
}

.group-deal-history__status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface) 90%);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}

.group-deal-history__meta {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  color: var(--muted);
  font-size: 13px;
}

.group-deal-history__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.group-deal-history__actions .is-disabled {
  opacity: 0.55;
  pointer-events: none;
}

.group-deal-history__empty {
  display: grid;
  gap: 8px;
}

.group-deal-receipt__card {
  max-width: 760px;
  margin: 0 auto;
}

.group-deal-receipt__head {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.group-deal-receipt__head h1 {
  margin: 0;
}

.group-deal-receipt__grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.group-deal-receipt__grid > div {
  display: grid;
  gap: 6px;
  padding: 14px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 92%, var(--surface-muted) 8%);
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
}

.group-deal-receipt__grid span {
  color: var(--muted);
  font-size: 12px;
}

.group-deal-receipt__note {
  padding: 12px 14px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface) 92%);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border) 82%);
  color: var(--muted);
  line-height: 1.9;
}

@media print {
  .app-header,
  .bottom-nav,
  .group-deal-receipt__head .button {
    display: none !important;
  }

  .group-deal-receipt__card {
    box-shadow: none;
    border: 1px solid #ddd;
  }
}

.group-deal-show__countdown {
  position: absolute;
  inset: 10px auto auto 10px;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 11px;
  color: #fff;
  background: rgba(15, 23, 42, 0.82);
  backdrop-filter: blur(6px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
}

.group-deal-show__countdown::before {
  content: 'زمان پایان آفر';
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.78);
}

.group-deal-show__countdown[data-ended="1"] {
  background: rgba(127, 29, 29, 0.86);
}

.group-deal-show__countdown[data-ended="1"]::before {
  content: 'آفر تمام شد';
}

.group-deal-show__content {
  display: grid;
  gap: 10px;
}

.group-deal-show__content h1 {
  margin: 0;
  font-size: clamp(1.1rem, 1.5vw, 1.4rem);
}

.group-deal-show__prices {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.group-deal-show__prices strong {
  font-size: 1.1rem;
}

.group-deal-show__prices small {
  color: var(--muted);
  text-decoration: line-through;
}

.group-deal-show__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13px;
}

.group-deal-show__bars {
  display: grid;
  gap: 8px;
}

.group-deal-show__bar.is-qty span {
  background: linear-gradient(90deg, #0ea5e9, #38bdf8);
}

.group-deal-show__join {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 10px;
}

.group-deal-show__actions {
  display: flex;
  justify-content: stretch;
  width: 100%;
}

.group-deal-show__cancel {
  display: flex;
  justify-content: flex-start;
}

.group-deal-show form[action*="/group-deals/cancel"] {
  display: flex;
  justify-content: stretch;
  margin-top: 10px;
}

.group-deal-show__cancel .button {
  width: 100%;
  min-width: 0;
}

.group-deal-show form[action*="/group-deals/cancel"] .button {
  width: 100%;
  min-width: 0;
}

.group-deal-show__join-note {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.9;
}

.group-deal-show__join-note--warning {
  color: color-mix(in srgb, var(--danger, #b42318) 82%, var(--text) 18%);
}

.group-deal-show__policy {
  display: grid;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}

.group-deal-show .button,
.group-deal-confirm__actions .button {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: none;
  border: 1px solid color-mix(in srgb, var(--border) 82%, var(--accent) 18%);
  background: color-mix(in srgb, var(--surface) 82%, var(--surface-muted) 18%);
}

.group-deal-show .button:hover,
.group-deal-confirm__actions .button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.04);
}

.group-deal-show .button--primary,
.group-deal-confirm__actions .button--primary {
  border-color: color-mix(in srgb, var(--accent) 72%, var(--border) 28%);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--accent) 88%, white 12%),
      color-mix(in srgb, var(--accent) 76%, black 24%));
  color: #fff;
}

.group-deal-show .button--secondary,
.group-deal-show .button--ghost,
.group-deal-confirm__actions .button--secondary,
.group-deal-confirm__actions .button--ghost {
  background: color-mix(in srgb, var(--surface) 76%, var(--surface-muted) 24%);
  color: var(--text);
}

.group-deal-show__join .button--primary {
  min-width: 0;
}

.group-deal-show__join .button {
  width: 100%;
  min-width: 0;
  justify-self: stretch;
}

.group-deal-show__join .field input {
  min-height: 40px;
}

.group-deal-confirm {
  display: grid;
  gap: 14px;
}

.group-deal-confirm__hero {
  display: grid;
  gap: 6px;
  padding: 16px 18px;
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, var(--accent) 22%);
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent-soft) 44%, transparent) 0%, transparent 56%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-muted) 78%, white 22%), var(--surface));
}

.group-deal-confirm__hero strong {
  font-size: 15px;
}

.group-deal-confirm__hero span {
  color: var(--muted);
  font-size: 12px;
}

.group-deal-confirm__card,
.group-deal-confirm__meta,
.group-deal-confirm__notice {
  padding: 14px 16px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-muted) 72%, white 28%);
}

.group-deal-confirm__meta,
.group-deal-confirm__card {
  display: grid;
  gap: 10px;
}

.group-deal-confirm__line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-size: 13px;
}

.group-deal-confirm__line span {
  color: var(--muted);
}

.group-deal-confirm__line strong {
  font-size: 13px;
  text-align: left;
}

.group-deal-confirm__line.is-warn strong {
  color: #b45309;
}

.group-deal-confirm__line.is-success strong {
  color: #166534;
}

.group-deal-confirm__notice {
  display: grid;
  gap: 6px;
  background: linear-gradient(180deg, color-mix(in srgb, #fff7ed 78%, white 22%), color-mix(in srgb, var(--surface) 92%, #fff7ed 8%));
}

.group-deal-confirm__notice strong {
  font-size: 13px;
}

.group-deal-confirm__notice p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.95;
}

.group-deal-confirm__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.group-deal-confirm__actions .button {
  min-width: 138px;
}

@media (max-width: 640px) {
  .group-deal-show__actions,
  .group-deal-show__cancel {
    width: 100%;
  }

  .group-deal-show__join .button,
  .group-deal-show__join .button--primary,
  .group-deal-show__cancel .button {
    width: 100%;
    min-width: 0;
  }

  .group-deal-confirm__actions .button {
    flex: 1 1 100%;
    min-width: 0;
  }
}

.group-deal-show__desc p {
  margin: 0 0 0.75rem;
}

.group-deal-show__desc p:last-child {
  margin-bottom: 0;
}

/* Admin: group deal form clarity */
.admin-group-deal-form .toggle.is-attention {
  border: 1px solid color-mix(in srgb, #ef4444 55%, var(--border) 45%);
  border-radius: 16px;
  padding: 10px 12px;
  background: color-mix(in srgb, #ef4444 7%, var(--surface) 93%);
}

.admin-group-deal-upload-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.admin-group-deal-form input[type="file"] {
  width: 100%;
  padding: 10px 12px;
  min-height: 48px;
  border-radius: 14px;
  border: 1px dashed color-mix(in srgb, var(--border) 72%, var(--accent) 28%);
  background: color-mix(in srgb, var(--surface) 86%, var(--surface-muted) 14%);
}

.admin-group-deal-form input[type="file"]::file-selector-button {
  margin-inline-end: 12px;
  border: 0;
  border-radius: 10px;
  padding: 8px 14px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface) 88%);
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
}

.admin-group-deal-existing-wrap {
  margin-top: 14px;
}

.admin-group-deal-existing-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.admin-group-deal-existing-grid .admin-media-picker {
  display: grid;
  gap: 10px;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  background: color-mix(in srgb, var(--surface) 88%, var(--surface-muted) 12%);
  box-shadow: 0 14px 28px rgba(17, 17, 17, 0.06);
}

.admin-group-deal-existing-grid .admin-media-picker > img {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  object-fit: cover;
  display: block;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  background: var(--surface-muted);
}

.admin-media-picker__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.admin-media-picker__delete {
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, #ef4444 12%, var(--surface) 88%);
  color: #b91c1c;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.admin-media-picker__control {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

.admin-media-picker__control input[type="radio"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
  flex: 0 0 auto;
}

.admin-group-deal-queued {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.admin-group-deal-queued__section {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  background: color-mix(in srgb, var(--surface) 90%, var(--surface-muted) 10%);
}

.admin-group-deal-queued__label {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

.admin-group-deal-queued__body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
}

.admin-group-deal-queued__thumb {
  margin: 0;
  display: grid;
  gap: 8px;
}

.admin-group-deal-queued__thumb strong {
  font-size: 11px;
  color: var(--text);
}

.admin-group-deal-queued__thumb img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
}

.admin-group-deal-queued__thumb figcaption,
.admin-group-deal-queued__empty {
  font-size: 11px;
  color: var(--muted);
}

.admin-group-deal-queued__empty {
  grid-column: 1 / -1;
  padding: 12px;
  border-radius: 14px;
  border: 1px dashed var(--border);
  background: color-mix(in srgb, var(--surface) 94%, var(--surface-muted) 6%);
}

.admin-group-deal-existing__tile {
  display: grid;
  gap: 10px;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 84%, var(--surface-muted) 16%);
}

.admin-group-deal-existing__image {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--surface-muted);
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
}

.admin-group-deal-existing__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.admin-group-deal-existing__controls {
  display: grid;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}

.admin-group-deal-existing__controls > span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-group-deal-images__hint {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface) 93%);
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border) 84%);
  color: var(--muted);
  line-height: 1.8;
  font-size: 12px;
}

.admin-group-deal-image-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.admin-group-deal-image-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  background: color-mix(in srgb, var(--surface) 88%, var(--surface-muted) 12%);
}

.admin-group-deal-image-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.admin-group-deal-image-card__body {
  display: grid;
  gap: 8px;
}

.group-deal-image-modal {
  display: grid;
  gap: 14px;
}

.group-deal-image-modal__types {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}

.group-deal-image-modal__type {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.group-deal-image-modal__type input {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.group-deal-image-modal__type span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 90%, var(--surface-muted) 10%);
  color: var(--text);
  font-weight: 700;
}

.group-deal-image-modal__type input:checked + span {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border) 70%);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface) 90%);
  color: var(--text);
  box-shadow: 0 10px 24px rgba(40, 86, 255, 0.09);
}

.group-deal-image-modal__note {
  padding: 10px 12px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface) 93%);
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border) 84%);
  color: var(--muted);
  line-height: 1.8;
  font-size: 12px;
}

.group-deal-image-modal__preview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.group-deal-image-modal__thumb {
  margin: 0;
  display: grid;
  gap: 8px;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  background: color-mix(in srgb, var(--surface) 88%, var(--surface-muted) 12%);
}

.group-deal-image-modal__thumb img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  background: var(--surface-muted);
}

.group-deal-image-modal__thumb figcaption {
  font-size: 11px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.group-deal-image-modal__empty {
  grid-column: 1 / -1;
  padding: 14px;
  border-radius: 14px;
  border: 1px dashed var(--border);
  background: color-mix(in srgb, var(--surface) 92%, var(--surface-muted) 8%);
  color: var(--muted);
  text-align: center;
}

@media (max-width: 900px) {
  .group-deals-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-group-deal-upload-grid,
  .admin-group-deal-image-actions {
    grid-template-columns: 1fr;
  }

  .admin-group-deal-existing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .group-deal-image-modal__preview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .group-deal-show__hero {
      grid-template-columns: 1fr 1fr;
      align-items: stretch;
    }

  .group-deal-confirm__actions {
    justify-content: flex-start;
  }
  }

.camp-page {
  display: grid;
  gap: 18px;
}

.camp-manage {
  width: min(1860px, calc(100vw - 28px));
  max-width: 100%;
  margin-inline: auto;
  gap: 22px;
}

.camp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.camp-hero,
.camp-today-head,
.camp-manage__hero,
.camp-showcase,
.camp-group-head {
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(1200px 420px at 0% 0%, rgba(18, 122, 94, 0.14), transparent 56%),
    radial-gradient(900px 360px at 100% 0%, rgba(59, 130, 246, 0.12), transparent 52%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(250, 252, 255, 0.96));
}

.camp-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  gap: 24px;
}

.camp-hero h1,
.camp-today-head h1,
.camp-manage__hero h1,
.camp-showcase h1,
.camp-group-head h1 {
  margin: 12px 0 10px;
  font-size: clamp(1.6rem, 2.4vw, 2.4rem);
  line-height: 1.2;
}

.camp-hero p,
.camp-today-head p,
.camp-manage__hero p,
.camp-showcase p,
.camp-group-head p,
.camp-copy {
  color: var(--text-muted);
  line-height: 1.9;
}

.camp-hero__actions,
.camp-showcase__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.camp-hero__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-content: center;
}

.camp-hero__metric,
.camp-checkin-panel__week {
  padding: 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(148, 163, 184, 0.22);
}

.camp-hero__metric strong,
.camp-checkin-panel__week strong {
  display: block;
  font-size: 1.35rem;
  margin-bottom: 6px;
}

.camp-overview-strip__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.camp-overview-pill {
  display: grid;
  gap: 4px;
  padding: 16px;
  border-radius: 18px;
  background: rgba(248, 250, 252, 0.95);
  border: 1px solid rgba(148, 163, 184, 0.2);
  color: inherit;
  text-decoration: none;
}

.camp-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.camp-card {
  display: grid;
  grid-template-rows: auto 1fr;
  padding: 0;
  overflow: hidden;
}

.camp-card__cover {
  position: relative;
  display: block;
  min-height: 200px;
  background: linear-gradient(135deg, #dff7ee, #eff6ff);
}

.camp-card__cover img,
.camp-showcase__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.camp-card__cover-fallback,
.camp-showcase__fallback {
  min-height: 100%;
  display: grid;
  place-items: center;
  color: #0f766e;
}

.camp-card__cover-fallback svg,
.camp-showcase__fallback svg {
  width: 54px;
  height: 54px;
}

.camp-card__status {
  position: absolute;
  inset-inline-start: 14px;
  top: 14px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.74);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
}

.camp-card__body {
  display: grid;
  gap: 12px;
  padding: 18px;
}

.camp-card__meta-row,
.camp-showcase__eyebrow,
.camp-showcase__facts,
.camp-task-panel__meta,
.camp-progress__meta,
.camp-submission__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.camp-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.camp-card__title {
  color: inherit;
  text-decoration: none;
  font-size: 1.08rem;
  font-weight: 800;
  line-height: 1.6;
}

.camp-card__summary {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.8;
}

.camp-card__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  color: var(--text-muted);
  font-size: 0.88rem;
}

.camp-card__mentor,
.camp-showcase__mentor,
.camp-member-row,
.camp-submission__user,
.camp-chat__message,
.camp-leaderboard__item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.camp-card__mentor img,
.camp-showcase__mentor img,
.camp-member-row img,
.camp-submission__user img,
.camp-chat__message img,
.camp-leaderboard__item img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.camp-card__mentor span,
.camp-showcase__mentor span,
.camp-member-row span,
.camp-submission__user span,
.camp-leaderboard__item small {
  color: var(--text-muted);
  font-size: 0.86rem;
}

.camp-card__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: auto;
}

.camp-inline-form {
  margin: 0;
  display: inline-flex;
}

.camp-showcase {
  display: grid;
  grid-template-columns: minmax(280px, 0.95fr) minmax(0, 1.05fr);
  gap: 22px;
  padding: 0;
}

.camp-showcase__cover {
  min-height: 320px;
  background: linear-gradient(135deg, #dff7ee, #eff6ff);
}

.camp-showcase__body {
  display: grid;
  gap: 14px;
  padding: 24px;
}

.camp-showcase__goal {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(148, 163, 184, 0.18);
}

.camp-layout,
.camp-group-layout,
.camp-manage__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: 18px;
}

.camp-manage__layout {
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
  align-items: start;
  gap: 24px;
}

.camp-sidebar,
.camp-group-sidebar,
.camp-manage__sidebar {
  display: grid;
  gap: 18px;
  align-content: start;
}

.camp-manage__sidebar {
  position: sticky;
  top: 86px;
}

.camp-cohort-list,
.camp-member-list,
.camp-mini-list,
.camp-task-table {
  display: grid;
  gap: 10px;
}

.camp-cohort-row,
.camp-member-row,
.camp-task-table__row,
.camp-manage__campaign-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.88);
  border: 1px solid rgba(148, 163, 184, 0.18);
  color: inherit;
  text-decoration: none;
}

.camp-manage__campaign-link.is-active {
  border-color: rgba(15, 118, 110, 0.45);
  background: rgba(220, 252, 231, 0.8);
}

.camp-leaderboard {
  display: grid;
  gap: 10px;
}

.camp-leaderboard__item {
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.16);
  color: inherit;
  text-decoration: none;
}

.camp-leaderboard__rank {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(14, 165, 233, 0.1);
  font-weight: 800;
}

.camp-leaderboard__identity {
  display: grid;
  flex: 1;
}

.camp-leaderboard__xp {
  font-weight: 800;
  white-space: nowrap;
}

.camp-roadmap {
  display: grid;
  gap: 16px;
}

.camp-roadmap__module {
  padding: 18px;
  border-radius: 20px;
  background: rgba(248, 250, 252, 0.88);
  border: 1px solid rgba(148, 163, 184, 0.18);
}

.camp-roadmap__module-head {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.camp-roadmap__module-head span {
  color: var(--text-muted);
}

.camp-roadmap__tasks,
.camp-submissions,
.camp-chat,
.camp-today-list,
.camp-manage__main,
.camp-group-main {
  display: grid;
  gap: 14px;
}

.camp-roadmap__task,
.camp-submission,
.camp-task-panel,
.camp-checkin-panel {
  padding: 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(148, 163, 184, 0.16);
}

.camp-roadmap__task {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 14px;
}

.camp-roadmap__task-day {
  color: var(--text-muted);
  font-size: 0.86rem;
  font-weight: 800;
}

.camp-checklist {
  margin: 0;
  padding-inline-start: 18px;
  line-height: 1.9;
}

.camp-progress {
  display: grid;
  gap: 8px;
}

.camp-progress__bar {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.18);
  overflow: hidden;
}

.camp-progress__bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0f766e, #22c55e);
}

.camp-submit-form,
.camp-review-form,
.camp-chat__composer,
.camp-form {
  display: grid;
  gap: 12px;
}

.camp-submit-form textarea,
.camp-submit-form input,
.camp-review-form input,
.camp-chat__composer textarea,
.camp-form input,
.camp-form select,
.camp-form textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(255, 255, 255, 0.92);
}

.camp-submit-form__row,
.camp-form__grid,
.camp-manage__split {
  display: grid;
  gap: 12px;
}

.camp-manage__hero,
.camp-manage__summary,
.camp-manage__section {
  padding: 22px;
}

.camp-manage__main {
  gap: 18px;
}

.camp-manage__split {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.camp-form__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.camp-form label {
  display: grid;
  gap: 8px;
}

.camp-form label[data-mentor-picker] {
  position: relative;
}

.camp-form label > span {
  font-weight: 700;
}

.camp-mentor-picker__results {
  position: absolute;
  inset-inline: 0;
  top: calc(100% - 6px);
  z-index: 12;
  display: grid;
  gap: 4px;
  padding: 8px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 96%, white 4%);
  box-shadow: 0 18px 34px rgba(15, 23, 42, 0.12);
  max-height: 240px;
  overflow: auto;
}

.camp-mentor-picker__results[hidden] {
  display: none;
}

.camp-mentor-picker__option {
  width: 100%;
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  text-align: right;
  color: var(--text);
  cursor: pointer;
}

.camp-mentor-picker__option:hover,
.camp-mentor-picker__option:focus-visible {
  background: color-mix(in srgb, var(--accent-soft) 42%, white 58%);
  outline: none;
}

.camp-mentor-picker__option strong {
  font-size: 0.92rem;
  font-weight: 800;
}

.camp-mentor-picker__option span {
  color: var(--text-muted);
  font-size: 0.79rem;
  direction: ltr;
  text-align: left;
}

.camp-form__checks {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
}

.camp-form__checks label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.camp-submit-form__actions,
.camp-checkin-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.camp-submit-form__hint {
  color: var(--text-muted);
  font-size: 0.86rem;
}

.camp-chat__message {
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px dashed rgba(148, 163, 184, 0.18);
}

.camp-chat__message:last-child {
  border-bottom: 0;
}

.camp-chat__message div {
  display: grid;
  gap: 6px;
}

.camp-chat__message p,
.camp-submission p {
  margin: 0;
  line-height: 1.9;
  color: var(--text-muted);
}

.camp-chat__message small {
  color: var(--text-muted);
}

.camp-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.camp-badge {
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.12);
  color: #92400e;
  font-size: 0.82rem;
  font-weight: 700;
}

@media (max-width: 980px) {
  .camp-hero,
  .camp-showcase,
  .camp-layout,
  .camp-group-layout,
  .camp-manage__layout {
    grid-template-columns: 1fr;
  }

  .camp-showcase__cover {
    min-height: 220px;
  }
}

@media (min-width: 981px) {
  .camp-manage__layout {
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .camp-grid,
  .camp-hero__metrics,
  .camp-form__grid,
  .camp-manage__split {
    grid-template-columns: 1fr;
  }

  .camp-roadmap__task {
    grid-template-columns: 1fr;
  }

  .camp-submit-form__row,
  .camp-submit-form__actions,
  .camp-checkin-panel {
    justify-content: stretch;
  }

  .camp-card__actions,
  .camp-showcase__actions {
    flex-direction: column;
    align-items: stretch;
  }
}

.camp-group-head__facts,
.camp-today-card__head,
.camp-task-panel__title,
.camp-submission__head,
.camp-manage__campaign-top,
.camp-manage__summary-head,
.camp-manage__summary-actions,
.camp-manage__campaign-stats,
.camp-manage__entity-row,
.camp-manage__task-row,
.camp-manage__hero-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
}

.camp-group-head__facts {
  flex-wrap: wrap;
}

.camp-manage__hero {
  align-items: flex-start;
  gap: 18px;
  grid-template-columns: minmax(0, 1.5fr) auto;
}

.camp-manage__hero-copy {
  display: grid;
  gap: 8px;
}

.camp-manage__hero-actions {
  flex-wrap: wrap;
}

.camp-manage__summary {
  display: grid;
  gap: 18px;
}

.camp-manage__workspace-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.camp-manage__workspace-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 90%, var(--accent-soft) 10%);
  color: inherit;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 700;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.camp-manage__workspace-link:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--surface) 82%, var(--accent-soft) 18%);
  transform: translateY(-1px);
}

.camp-manage__workspace-link.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--surface) 76%, var(--accent-soft) 24%);
  box-shadow: 0 10px 18px rgba(15, 118, 110, 0.12);
}

.camp-manage__summary-head {
  align-items: flex-start;
}

.camp-manage__summary-head h2,
.camp-manage__campaign-top strong {
  margin: 0;
}

.camp-manage__summary-head p {
  margin: 8px 0 0;
}

.camp-manage__summary-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.camp-manage__metric {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px 16px;
  background: color-mix(in srgb, var(--surface) 86%, var(--accent-soft) 14%);
  display: grid;
  gap: 6px;
}

.camp-manage__metric strong {
  font-size: 1rem;
}

.camp-manage__metric span {
  color: var(--text-muted);
  font-size: 0.88rem;
}

.camp-manage__campaign-list {
  display: grid;
  gap: 10px;
}

.camp-manage__campaign-link {
  border-radius: 18px;
  padding: 14px;
  background: color-mix(in srgb, var(--surface) 90%, var(--accent-soft) 10%);
  border: 1px solid transparent;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.camp-manage__campaign-link:hover,
.camp-manage__campaign-link.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--surface) 82%, var(--accent-soft) 18%);
  transform: translateY(-1px);
}

.camp-manage__campaign-link > span {
  color: var(--text-muted);
  font-size: 0.88rem;
}

.camp-manage__campaign-stats {
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 8px;
}

.camp-manage__campaign-stats small {
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 70%, var(--line) 30%);
  padding: 5px 10px;
  color: var(--text-muted);
}

.camp-manage__section {
  display: grid;
  gap: 18px;
  overflow: hidden;
}

.camp-manage__section-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-soft) 38%, var(--surface) 62%);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 800;
  margin-bottom: 8px;
}

.camp-manage__editor-grid {
  display: grid;
  grid-template-columns: minmax(0, 2.05fr) minmax(340px, 0.95fr);
  gap: 24px;
}

.camp-manage__form-block {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface) 93%, var(--surface-2) 7%);
}

.camp-manage__form-block-head {
  display: grid;
  gap: 4px;
}

.camp-manage__form-block-head strong {
  font-size: 0.98rem;
}

.camp-manage__form-block-head span {
  color: var(--text-muted);
  font-size: 0.84rem;
}

.camp-manage__preview {
  display: grid;
  gap: 14px;
  align-content: start;
}

.camp-manage__preview-card,
.camp-manage__tips {
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 16px;
  background: color-mix(in srgb, var(--surface) 88%, var(--accent-soft) 12%);
  display: grid;
  gap: 10px;
}

.camp-manage__preview-image {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 18px;
  object-fit: cover;
  background: var(--surface-2);
}

.camp-manage__preview-fallback {
  min-height: 220px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 55%, transparent), color-mix(in srgb, var(--surface-2) 92%, var(--accent-soft) 8%));
  color: var(--accent);
}

.camp-manage__preview-fallback svg {
  width: 52px;
  height: 52px;
}

.camp-manage__entity-list,
.camp-manage__task-list {
  display: grid;
  gap: 10px;
}

.camp-manage__entity-row,
.camp-manage__task-row {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--surface) 92%, var(--surface-2) 8%);
  transition: border-color 0.18s ease, background 0.18s ease;
}

.camp-manage__entity-row:hover,
.camp-manage__task-row:hover,
.camp-manage__entity-row.is-active,
.camp-manage__task-row.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--surface) 82%, var(--accent-soft) 18%);
}

.camp-manage__entity-row div,
.camp-manage__task-row div {
  display: grid;
  gap: 4px;
}

.camp-manage__entity-row span,
.camp-manage__task-row span,
.camp-manage__entity-row small,
.camp-manage__task-row small {
  color: var(--text-muted);
  font-size: 0.86rem;
}

.camp-form textarea {
  resize: vertical;
}

@media (max-width: 1280px) {
  .camp-manage {
    width: min(100%, calc(100vw - 24px));
  }

  .camp-manage__summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1040px) {
  .camp-manage__layout {
    grid-template-columns: 1fr;
  }

  .camp-manage__sidebar {
    position: static;
  }

  .camp-manage__editor-grid,
  .camp-manage__split {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .camp-manage {
    width: min(100%, calc(100vw - 16px));
  }

  .camp-manage__hero,
  .camp-manage__summary,
  .camp-manage__section {
    padding: 16px;
  }

  .camp-manage__summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .camp-group-head__facts,
  .camp-today-card__head,
  .camp-task-panel__title,
  .camp-submission__head,
  .camp-manage__campaign-top,
  .camp-manage__summary-head,
  .camp-manage__summary-actions,
  .camp-manage__entity-row,
  .camp-manage__task-row,
  .camp-manage__hero-actions {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Camp Manage Studio Overrides */
.page-shell--camp-manage {
  width: min(100%, 2140px);
}

.camp-manage {
  width: min(100%, calc(100vw - 20px));
  max-width: 1980px;
}

.camp-manage__hero.camp-manage__hero--studio,
.camp-manage__studio-topbar {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) auto;
  gap: 18px;
  padding: 24px;
}

.camp-manage__overview-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

.camp-manage__catalog-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 24px;
  align-items: start;
}

.camp-manage__catalog {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(520px, 1fr));
  gap: 20px;
}

.camp-manage-card {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
  padding: 18px;
  border-radius: 30px;
}

.camp-manage-card--create,
.camp-manage-card--empty {
  grid-template-columns: 1fr;
  min-height: 220px;
  border-style: dashed;
  border-width: 2px;
}

.camp-manage__catalog-side {
  position: sticky;
  top: 86px;
}

.camp-manage__layout {
  grid-template-columns: minmax(320px, 360px) minmax(0, 1fr);
  gap: 24px;
}

.camp-manage__campaign-link {
  display: grid;
  gap: 10px;
}

.camp-journey {
  display: grid;
  gap: 14px;
  margin-top: 4px;
  padding: 18px 18px 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--line) 86%);
  border-radius: 26px;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent-soft) 62%, transparent) 0%, transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, var(--surface-2) 4%), color-mix(in srgb, var(--surface) 88%, var(--surface-2) 12%));
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.06);
}

.camp-journey__rail {
  position: relative;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--surface-2) 78%, var(--line) 22%);
}

.camp-journey__rail::before,
.camp-journey__rail::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  transform: translateY(-50%);
  border: 3px solid color-mix(in srgb, var(--surface) 86%, white 14%);
  background: var(--surface);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.1);
}

.camp-journey__rail::before {
  right: 0;
}

.camp-journey__rail::after {
  left: 0;
}

.camp-journey__rail span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #10b981 0%, var(--accent) 52%, #6366f1 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.camp-journey__stops {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 1.25fr) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}

.camp-journey__stop {
  position: relative;
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 14px 16px;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--line) 74%, transparent);
  background: color-mix(in srgb, var(--surface) 95%, var(--surface-2) 5%);
}

.camp-journey__stop small {
  color: var(--text-muted);
  font-size: 0.76rem;
}

.camp-journey__stop strong,
.camp-journey__stop span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.camp-journey__stop strong {
  color: var(--text);
  font-size: 0.97rem;
}

.camp-journey__stop span {
  color: var(--accent);
  font-size: 0.83rem;
  font-weight: 700;
}

.camp-journey__stop--focus {
  align-content: center;
  justify-items: center;
  text-align: center;
  border-color: color-mix(in srgb, var(--accent) 24%, var(--line) 76%);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, var(--accent-soft) 8%), color-mix(in srgb, var(--surface) 78%, var(--accent-soft) 22%));
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.06);
}

.camp-journey__stop--focus::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  position: absolute;
  top: -7px;
  right: calc(50% - 6px);
  background: var(--accent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent-soft) 72%, transparent);
}

.camp-journey__stop--focus strong {
  font-size: 1.08rem;
}

.camp-journey__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.camp-journey__chips span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 74%, var(--accent-soft) 26%);
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line) 84%);
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 700;
}

.camp-journey__chips span::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.75;
}

.camp-page--today .camp-progress {
  display: none;
}

.camp-manage__studio-actions,
.camp-manage__hero-actions,
.camp-manage-card__actions,
.camp-manage-card__stats,
.camp-manage-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

@media (max-width: 1740px) {
  .camp-manage__overview-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .camp-manage__catalog {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1400px) {
  .camp-manage__catalog-shell {
    grid-template-columns: 1fr;
  }

  .camp-manage__catalog-side {
    position: static;
  }
}

@media (max-width: 1180px) {
  .camp-manage__layout,
  .camp-manage__editor-grid,
  .camp-manage__split {
    grid-template-columns: 1fr;
  }

  .camp-manage__summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .camp-manage__hero.camp-manage__hero--studio,
  .camp-manage__studio-topbar,
  .camp-manage-card {
    grid-template-columns: 1fr;
  }

  .camp-manage__overview-grid,
  .camp-manage__summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .camp-journey__stops {
    grid-template-columns: 1fr;
  }

  .camp-journey__stop--focus {
    order: -1;
  }
}

@media (max-width: 640px) {
  .camp-manage {
    width: min(100%, calc(100vw - 12px));
  }

  .camp-manage__overview-grid,
  .camp-manage__summary-grid {
    grid-template-columns: 1fr;
  }

  .camp-manage__hero.camp-manage__hero--studio,
  .camp-manage__studio-topbar,
  .camp-manage__summary,
  .camp-manage__section,
  .camp-manage__sidebar {
    padding: 16px;
  }
}

/* Camp UX Polish */
.camp-quick-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.camp-quick-links__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 90%, var(--accent-soft) 10%);
  color: inherit;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 700;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.camp-quick-links__item:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--surface) 80%, var(--accent-soft) 20%);
  transform: translateY(-1px);
}

.camp-showcase--clarified {
  grid-template-columns: minmax(220px, 0.78fr) minmax(0, 1.22fr);
  gap: 18px;
  padding: 18px;
}

.camp-showcase__cover {
  min-height: 240px;
  border-radius: 22px;
  overflow: hidden;
}

.camp-showcase__body {
  gap: 12px;
  padding: 4px 2px 4px 0;
}

.camp-showcase__guide {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.camp-showcase__guide-item {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(255, 255, 255, 0.84);
}

.camp-showcase__guide-item strong {
  font-size: 0.92rem;
}

.camp-showcase__guide-item span {
  color: var(--text-muted);
  font-size: 0.84rem;
  line-height: 1.9;
}

.camp-layout--show {
  align-items: start;
}

.camp-group-head--clarified {
  gap: 16px;
}

.camp-group-layout--clarified {
  grid-template-columns: minmax(300px, 0.84fr) minmax(0, 1.16fr);
  align-items: start;
}

.camp-group-sidebar,
.camp-group-main {
  gap: 16px;
}

.camp-delivery-panel {
  display: grid;
  gap: 16px;
}

.camp-submit-form--inline,
.camp-submission-card--inline {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 20px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.78);
}

.camp-submission-card--inline {
  display: grid;
  gap: 12px;
}

.camp-submission-card--inline p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.9;
}

.camp-mentor-desk__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(240px, 0.8fr);
  gap: 16px;
}

.camp-mentor-desk__tips {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 18px;
  padding: 16px;
  background: color-mix(in srgb, var(--surface) 90%, var(--accent-soft) 10%);
  display: grid;
  gap: 10px;
  align-content: start;
}

.camp-mentor-desk__list {
  margin: 0;
  padding-inline-start: 18px;
  color: var(--text-muted);
  line-height: 1.9;
}

.camp-attachment {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}

.camp-attachment__image,
.camp-attachment__player {
  width: 100%;
  max-width: 100%;
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.04);
  overflow: hidden;
}

.camp-attachment__image {
  max-height: 360px;
  object-fit: cover;
}

.camp-attachment__player {
  min-height: 52px;
}

.camp-attachment__file {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 92%, var(--accent-soft) 8%);
  color: inherit;
  text-decoration: none;
  font-weight: 700;
}

.camp-manage__summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.camp-manage__split {
  grid-template-columns: minmax(0, 1.14fr) minmax(340px, 0.86fr);
  align-items: start;
}

.camp-manage__split > :only-child {
  grid-column: 1 / -1;
}

.camp-manage__entity-list,
.camp-manage__task-list {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.camp-manage__entity-row,
.camp-manage__task-row {
  min-height: 90px;
  align-items: flex-start;
}

.camp-manage__entity-row div,
.camp-manage__task-row div {
  width: 100%;
}

@media (max-width: 1180px) {
  .camp-showcase__guide,
  .camp-mentor-desk__grid,
  .camp-group-layout--clarified,
  .camp-manage__split {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .camp-showcase--clarified {
    grid-template-columns: 1fr;
  }

  .camp-showcase__cover {
    min-height: 210px;
  }
}

@media (max-width: 720px) {
  .camp-quick-links,
  .camp-showcase__guide {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .page-shell--camp {
    width: 100%;
  }

  .camp-page,
  .page-shell--camp .camp-page:not(.camp-manage) {
    width: min(100%, calc(100vw - 10px));
    gap: 14px;
  }

  .camp-page--index,
  .camp-page--show,
  .camp-page--today,
  .camp-page--group {
    gap: 14px;
  }

  .camp-hero--landing,
  .camp-today-head,
  .camp-group-head,
  .camp-showcase,
  .camp-panel--soft,
  .camp-daily-board,
  .camp-card,
  .camp-submission {
    border-radius: 22px;
  }

  .camp-hero--landing,
  .camp-today-head,
  .camp-group-head,
  .camp-showcase--clarified,
  .camp-panel--soft,
  .camp-daily-board,
  .camp-side-panel,
  .camp-catalog,
  .camp-overview-strip,
  .camp-today-card {
    padding: 14px;
  }

  .camp-layout--show,
  .camp-group-layout--clarified,
  .camp-home-layout,
  .camp-today-list,
  .camp-grid--catalog,
  .camp-hero--landing,
  .camp-showcase--clarified,
  .camp-today-head,
  .camp-group-head {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .camp-sidebar,
  .camp-sidebar--show,
  .camp-group-sidebar {
    position: static;
    top: auto;
  }

  .camp-showcase__cover {
    min-height: 180px;
    aspect-ratio: 16 / 10;
    border-radius: 18px;
  }

  .camp-showcase__body {
    padding: 0;
    gap: 10px;
  }

  .camp-showcase__mentor,
  .camp-member-row,
  .camp-cohort-row,
  .camp-leaderboard__item,
  .camp-submission__user {
    align-items: flex-start;
  }

  .camp-showcase__guide,
  .camp-showcase__visuals,
  .camp-visual-meters,
  .camp-mentor-desk__grid,
  .camp-manage__split {
    grid-template-columns: 1fr;
  }

  .camp-facts-grid,
  .camp-daily-board__stats,
  .camp-hero__metrics,
  .camp-card__stats,
  .camp-home-flow,
  .camp-home-board__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .camp-quick-links__item,
  .camp-attachment__file {
    width: 100%;
  }

  .camp-meter {
    padding: 14px 12px;
    border-radius: 22px;
  }

  .camp-meter__visual,
  .camp-meter svg {
    width: 92px;
    height: 92px;
  }

  .camp-roadmap__summary,
  .camp-roadmap__task {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .camp-roadmap__summary,
  .camp-roadmap__module-body {
    padding-inline: 14px;
  }

  .camp-roadmap__module-body {
    padding-bottom: 14px;
  }

  .camp-submit-form__row,
  .camp-submit-form__actions,
  .camp-checkin-panel,
  .camp-daily-board__top,
  .camp-today-head__actions,
  .camp-showcase__actions,
  .camp-hero__actions,
  .camp-card__actions,
  .camp-submission__head {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .camp-today-head__stats,
  .camp-showcase__facts,
  .camp-group-head__facts,
  .camp-task-panel__meta,
  .camp-progress__meta,
  .camp-submission__meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .camp-chat {
    max-height: none;
    overflow: visible;
  }

  .camp-card__cover {
    min-height: 180px;
  }

  .camp-card__summary {
    min-height: 0;
  }

  .camp-submission,
  .camp-submit-form--inline,
  .camp-submission-card--inline {
    padding: 14px;
  }
}

@media (max-width: 480px) {
  .camp-page,
  .page-shell--camp .camp-page:not(.camp-manage) {
    width: min(100%, calc(100vw - 6px));
    gap: 12px;
  }

  .camp-hero h1,
  .camp-today-head h1,
  .camp-showcase h1,
  .camp-group-head h1 {
    font-size: 1.35rem;
    line-height: 1.35;
  }

  .camp-showcase__cover {
    min-height: 156px;
  }

  .camp-facts-grid,
  .camp-daily-board__stats,
  .camp-hero__metrics,
  .camp-card__stats,
  .camp-home-flow,
  .camp-home-board__grid,
  .camp-today-list {
    grid-template-columns: 1fr;
  }

  .camp-hero--landing,
  .camp-today-head,
  .camp-group-head,
  .camp-showcase--clarified,
  .camp-panel--soft,
  .camp-daily-board {
    padding: 12px;
  }

  .camp-meter__visual,
  .camp-meter svg {
    width: 82px;
    height: 82px;
  }
}

/* Camp Responsive Hotfix */
.camp-main-stack,
.camp-home-main,
.camp-home-side,
.camp-sidebar,
.camp-sidebar--show,
.camp-group-main,
.camp-group-sidebar,
.camp-showcase__body,
.camp-hero__content {
  min-width: 0;
}

.camp-main-stack:empty,
.camp-sidebar--show:empty {
  display: none;
}

.camp-layout--show.camp-layout--single {
  grid-template-columns: 1fr !important;
}

.camp-showcase--clarified {
  grid-template-columns: minmax(240px, 0.62fr) minmax(0, 1.38fr);
  gap: 14px;
  padding: 14px !important;
}

.camp-showcase--compact {
  grid-template-columns: 1fr !important;
}

.camp-showcase__cover {
  min-height: 220px !important;
  max-height: 280px;
  border-radius: 18px;
}

.camp-showcase__fallback {
  min-height: 100%;
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent-soft) 28%, transparent), transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, #fff 4%), color-mix(in srgb, var(--surface-2) 88%, #fff 12%));
  border: 1px solid rgba(148, 163, 184, 0.18);
}

.camp-showcase__fallback svg {
  width: 34px;
  height: 34px;
  opacity: 0.82;
}

.camp-showcase__mini-mark {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 86%, var(--accent-soft) 14%);
  color: var(--accent);
}

.camp-showcase__mini-mark svg {
  width: 22px;
  height: 22px;
}

.camp-showcase__body {
  gap: 10px;
}

.camp-showcase__guide {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.camp-showcase__guide-item {
  padding: 12px 14px;
  border-radius: 16px;
}

.camp-showcase__guide-item strong {
  font-size: 0.88rem;
}

.camp-showcase__guide-item span {
  font-size: 0.8rem;
}

.camp-showcase__actions {
  margin-top: 6px;
}

.camp-layout--show {
  gap: 16px !important;
}

.camp-panel--soft {
  border-radius: 22px;
}

@media (max-width: 1280px) {
  .camp-showcase--clarified,
  .camp-layout--show,
  .camp-group-layout--clarified,
  .camp-home-layout,
  .camp-today-list {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .camp-sidebar,
  .camp-sidebar--show,
  .camp-group-sidebar {
    position: static !important;
    top: auto !important;
  }

  .camp-showcase--clarified {
    padding: 16px !important;
  }

  .camp-showcase__cover {
    min-height: 180px !important;
    max-height: 240px;
    aspect-ratio: 16 / 9;
    border-radius: 18px;
  }

  .camp-showcase__body {
    padding: 0 !important;
  }

  .camp-showcase__guide,
  .camp-showcase__visuals,
  .camp-visual-meters {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 900px) {
  .camp-showcase--clarified,
  .camp-hero--landing,
  .camp-today-head,
  .camp-group-head {
    padding: 14px !important;
    border-radius: 22px;
  }

  .camp-showcase__cover {
    order: 2;
    min-height: 150px !important;
    max-height: 190px;
  }

  .camp-showcase__body {
    order: 1;
    gap: 10px !important;
  }

  .camp-showcase__actions,
  .camp-hero__actions,
  .camp-daily-board__top,
  .camp-today-head__actions,
  .camp-submit-form__row,
  .camp-submit-form__actions,
  .camp-checkin-panel,
  .camp-card__actions,
  .camp-submission__head {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .camp-showcase__guide,
  .camp-showcase__visuals,
  .camp-visual-meters,
  .camp-facts-grid,
  .camp-daily-board__stats,
  .camp-hero__metrics,
  .camp-card__stats,
  .camp-home-flow,
  .camp-home-board__grid,
  .camp-roadmap__summary,
  .camp-roadmap__task,
  .camp-mentor-desk__grid {
    grid-template-columns: 1fr !important;
  }

  .camp-quick-links {
    grid-template-columns: 1fr 1fr;
  }

  .camp-quick-links__item {
    min-height: 40px;
    font-size: 0.85rem;
  }

  .camp-proposal-panel {
    gap: 12px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }

  .camp-proposal-panel .detail-card__header p {
    font-size: 0.92rem;
    line-height: 1.9;
  }

  .camp-proposal-panel__actions .button {
    width: 100%;
  }

  .camp-proposal-form {
    gap: 10px;
  }

  .camp-proposal-form textarea {
    min-height: 92px;
  }

  .camp-meter {
    border-radius: 20px;
    padding: 12px 10px;
  }

  .camp-meter__visual,
  .camp-meter svg {
    width: 88px;
    height: 88px;
  }
}

@media (max-width: 560px) {
  .camp-page,
  .page-shell--camp .camp-page:not(.camp-manage) {
    width: min(100%, calc(100vw - 8px)) !important;
    gap: 12px !important;
  }

  .camp-showcase__cover {
    min-height: 132px !important;
    max-height: 160px;
  }

  .camp-quick-links,
  .camp-today-list {
    grid-template-columns: 1fr !important;
  }

  .camp-showcase h1,
  .camp-hero h1,
  .camp-today-head h1,
  .camp-group-head h1 {
    font-size: 1.28rem !important;
    line-height: 1.35 !important;
  }

  .camp-showcase__facts,
  .camp-group-head__facts,
  .camp-task-panel__meta,
  .camp-progress__meta,
  .camp-submission__meta,
  .camp-today-head__stats {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .camp-panel--soft,
  .camp-daily-board,
  .camp-submission,
  .camp-submit-form--inline,
  .camp-submission-card--inline {
    padding: 12px !important;
  }
}

.home-section-title {
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.home-section-title > div {
  display: grid;
  gap: 6px;
}

.home-section-title span {
  color: var(--muted);
  line-height: 1.9;
}

.home-map-highlights,
.home-social-channels,
.home-feed-card {
  margin-top: 12px;
}

.home-link-strip {
  margin-top: 12px;
  overflow: hidden;
}

.home-link-strip__title {
  margin-bottom: 14px;
}

.home-strip-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(210px, 248px);
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.home-strip-rail > * {
  scroll-snap-align: start;
}

.home-strip-card {
  color: inherit;
  text-decoration: none;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, var(--accent) 22%);
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--accent) 10%, transparent), transparent 40%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, #fff 4%), color-mix(in srgb, var(--surface-muted) 92%, #fff 8%));
  box-shadow: 0 18px 34px rgba(17, 17, 17, 0.06);
  display: grid;
  gap: 10px;
  padding: 12px;
  min-height: 100%;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.home-strip-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 42px rgba(17, 17, 17, 0.1);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border) 60%);
}

.home-strip-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 15px;
  background: color-mix(in srgb, var(--surface-strong) 88%, #fff 12%);
}

.home-strip-card__media--wide {
  aspect-ratio: 16 / 8.5;
}

.home-strip-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.home-strip-card__media-fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-size: 28px;
  font-weight: 900;
  color: var(--accent);
}

.home-strip-card__badge {
  position: absolute;
  inset-inline-start: 10px;
  top: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.76);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  backdrop-filter: blur(8px);
}

.home-strip-card__badge--registration {
  background: rgba(3, 105, 161, 0.84);
}

.home-strip-card__badge--active {
  background: rgba(2, 132, 93, 0.84);
}

.home-strip-card__body {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.home-strip-card__body strong {
  font-size: 13px;
  line-height: 1.6;
}

.home-strip-card__body small {
  color: var(--muted);
  line-height: 1.65;
  font-size: 11px;
}

.home-strip-card__meta,
.home-strip-card__deal-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.home-strip-card--camp .home-strip-card__media {
  aspect-ratio: 16 / 8.8;
}

.home-strip-card--deal .home-strip-card__media {
  aspect-ratio: 16 / 8;
}

.home-quick-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.home-quick-link {
  color: inherit;
  text-decoration: none;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 16px 18px;
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, var(--accent) 22%);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 58%, transparent), transparent 52%),
    color-mix(in srgb, var(--surface) 95%, #fff 5%);
  box-shadow: 0 16px 32px rgba(17, 17, 17, 0.05);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.home-quick-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 40px rgba(17, 17, 17, 0.09);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border) 60%);
}

.home-quick-link__icon {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface) 86%);
  color: var(--accent);
}

.home-quick-link__copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.home-quick-link__copy strong {
  font-size: 14px;
}

.home-quick-link__copy small {
  color: var(--muted);
  line-height: 1.7;
}

.home-quick-link__arrow {
  color: var(--accent);
}

.home-map-highlights__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.home-map-highlight-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 28px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, var(--accent) 22%);
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--accent) 14%, transparent), transparent 38%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, #fff 6%), color-mix(in srgb, var(--surface-muted) 88%, #fff 12%));
  box-shadow: 0 20px 40px rgba(17, 17, 17, 0.07);
  color: inherit;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.home-map-highlight-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border) 58%);
  box-shadow: 0 26px 48px rgba(17, 17, 17, 0.10);
}

.home-map-highlight-card__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.home-map-highlight-card__icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface) 86%);
  color: var(--accent);
}

.home-map-highlight-card__copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.home-map-highlight-card__copy strong {
  font-size: 15px;
}

.home-map-highlight-card__copy small {
  color: var(--muted);
  line-height: 1.75;
}

.home-map-highlight-card__count {
  padding: 8px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface) 90%);
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.home-map-highlight-card__thumbs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.home-map-highlight-card__thumb {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-strong) 88%, #fff 12%);
}

.home-map-highlight-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.home-map-highlight-card__thumb-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--accent);
  font-size: 22px;
  font-weight: 800;
}

.home-map-highlight-card__list {
  display: grid;
  gap: 8px;
}

.home-map-highlight-card__place {
  display: grid;
  gap: 3px;
}

.home-map-highlight-card__place strong {
  font-size: 13px;
}

.home-map-highlight-card__place small {
  color: var(--muted);
  line-height: 1.6;
}

.home-map-highlight-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  font-weight: 700;
}

.home-map-highlight-card__cta svg {
  width: 16px;
  height: 16px;
}

.home-social-channels__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.home-social-channels__actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.home-social-channels__request {
  border-style: solid;
  border-color: color-mix(in srgb, var(--accent) 34%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, #fff 86%), color-mix(in srgb, var(--accent-soft) 72%, #fff 28%));
  color: var(--accent);
  box-shadow: 0 10px 22px rgba(14, 165, 233, 0.12);
  font-weight: 800;
  position: relative;
}

.home-social-channels__request::before {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-inline-end: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--accent);
  font-size: 14px;
  font-weight: 900;
  vertical-align: middle;
}

.home-social-channels__request:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(14, 165, 233, 0.16);
}

.social-modal {
  position: fixed;
  inset: 0;
  z-index: 6000;
  display: none;
  align-items: center;
  justify-items: center;
  padding:
    max(20px, calc(env(safe-area-inset-top, 0px) + 76px))
    18px
    max(20px, calc(env(safe-area-inset-bottom, 0px) + 92px));
  background: rgba(15, 23, 42, 0.42);
  overflow: hidden;
}

.social-modal.is-open {
  display: grid;
}

.social-modal__box {
  width: min(720px, 100%);
  max-height: calc(100dvh - 140px);
  overflow: hidden;
  border-radius: 28px;
  padding: 18px;
  background: color-mix(in srgb, var(--surface) 97%, #fff 3%);
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.24);
}

.home-channel-request-modal__box {
  width: min(640px, 100%);
}

.home-channel-request-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-height: calc(100dvh - 176px);
  overflow: auto;
  padding-inline-end: 4px;
}

.home-channel-request-form .section-title,
.home-channel-request-form .button-row,
.home-channel-request-form .field--wide {
  grid-column: 1 / -1;
}

.home-channel-request-form .field {
  min-width: 0;
}

.home-channel-request-form .field input,
.home-channel-request-form .field textarea,
.home-channel-request-form .field select {
  border-radius: 16px;
}

.home-channel-request-form .button-row {
  position: sticky;
  bottom: 0;
  padding-top: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,0.96) 22%, rgba(255,255,255,1) 100%);
}

.home-social-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, var(--accent) 22%);
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 10%, transparent), transparent 42%),
    color-mix(in srgb, var(--surface) 96%, #fff 4%);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.06);
}

.home-social-card__main {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 10px;
  color: inherit;
  text-decoration: none;
  align-items: stretch;
}

.home-social-card__media {
  display: block;
  overflow: hidden;
  border-radius: 14px;
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 58%, #fff 42%), color-mix(in srgb, var(--surface-muted) 88%, #fff 12%));
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

.home-social-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.home-social-card__media.is-empty::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 36%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface-strong) 86%, #fff 14%), color-mix(in srgb, var(--surface-muted) 90%, #fff 10%));
}

.home-social-card__copy {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
}

.home-social-card__copy strong {
  font-size: 12px;
  line-height: 1.8;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.home-social-card__copy small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.home-social-card__channel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}

.home-social-card__profile {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.home-social-card__avatar {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 13%, var(--surface) 87%);
  color: var(--accent);
  font-weight: 900;
}

.home-social-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.home-social-card__profile strong,
.home-social-card__profile small {
  display: block;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-social-card__profile strong {
  font-size: 12px;
}

.home-social-card__profile small {
  color: var(--muted);
  font-size: 10px;
}

.home-social-card__external {
  color: var(--accent);
  text-decoration: none;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.social-channel-page {
  display: grid;
  gap: 18px;
  width: min(100%, 1220px);
  margin: 0 auto;
}

.social-channel-hero,
.social-channel-directory-hero {
  display: grid;
  gap: 20px;
  padding: 24px;
  border-radius: 30px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, var(--accent) 22%);
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 14%, transparent), transparent 40%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 96%, #fff 4%), color-mix(in srgb, var(--surface-muted) 88%, #fff 12%));
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.08);
}

.social-channel-hero {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  align-items: stretch;
}

.social-channel-directory-hero {
  grid-template-columns: 1fr;
}

.social-channel-hero__main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 18px;
  min-width: 0;
}

.social-channel-hero__side {
  display: grid;
  gap: 14px;
  align-content: start;
}

.social-channel-directory-hero span,
.social-channel-hero__eyebrow {
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
}

.social-channel-hero__avatar {
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 28px;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface) 86%);
  color: var(--accent);
  font-size: 30px;
  font-weight: 900;
}

.social-channel-hero__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.social-channel-hero__copy {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.social-channel-hero h1,
.social-channel-directory-hero h1 {
  margin: 0;
  font-size: clamp(22px, 4vw, 34px);
}

.social-channel-hero p,
.social-channel-directory-hero p {
  margin: 0;
  color: var(--muted);
  line-height: 1.9;
}

.social-channel-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.social-channel-hero__meta span {
  padding: 6px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface) 90%);
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
}

.social-channel-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: stretch;
}

.social-channel-hero__actions .button {
  justify-content: center;
}

.social-channel-note,
.social-channel-disclaimer,
.home-social-channels__notice,
.social-post-show-card__notice {
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--border) 76%, var(--accent) 12%);
  background: color-mix(in srgb, var(--surface) 96%, #fff 4%);
  color: var(--muted);
  line-height: 1.95;
  font-size: 13px;
}

.social-channel-note {
  display: grid;
  gap: 8px;
  padding: 16px 18px;
}

.social-channel-note strong {
  color: var(--text);
  font-size: 14px;
}

.social-channel-note p {
  margin: 0;
  color: var(--muted);
}

.social-channel-disclaimer,
.home-social-channels__notice,
.social-post-show-card__notice {
  padding: 13px 16px;
}

.home-social-channels__notice {
  margin-top: 14px;
}

.social-channel-posts__grid,
.social-channel-directory__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.social-channel-category-sections {
  display: grid;
  gap: 20px;
  margin-top: 16px;
}

.social-channel-category-block {
  display: grid;
  gap: 6px;
}

.social-channel-category-block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 2px;
}

.social-channel-category-block__head strong {
  font-size: 15px;
}

.social-channel-category-block__head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.social-post-card {
  padding: 12px;
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  background: color-mix(in srgb, var(--surface) 96%, #fff 4%);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.05);
}

.social-post-card__link {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 14px;
  color: inherit;
  text-decoration: none;
}

.social-post-card__media {
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 16px;
  aspect-ratio: 1 / 1;
  background: color-mix(in srgb, var(--surface-strong) 86%, #fff 14%);
  color: var(--accent);
}

.social-post-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.social-post-card__media svg {
  width: 34px;
  height: 34px;
}

.social-post-card__body {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.social-post-card__body p {
  margin: 0;
  line-height: 1.9;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.social-post-card__muted,
.social-post-card__meta {
  color: var(--muted);
}

.social-post-card__file {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
}

.social-post-card__file svg {
  width: 16px;
  height: 16px;
}

.social-post-card__file span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.social-post-card__file small {
  color: var(--muted);
}

.social-channel-posts__sentinel {
  margin-top: 18px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}

.social-channel-posts__sentinel.is-loading span::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-inline-start: 8px;
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-top-color: var(--accent);
  animation: social-spin 0.75s linear infinite;
  vertical-align: middle;
}

@keyframes social-spin {
  to { transform: rotate(360deg); }
}

.social-channel-directory-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 20px;
  color: inherit;
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--border) 78%, var(--accent) 22%);
  background: color-mix(in srgb, var(--surface) 96%, #fff 4%);
}

.social-channel-directory-card__avatar {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 18px;
  background: color-mix(in srgb, var(--accent) 13%, var(--surface) 87%);
  color: var(--accent);
  font-weight: 900;
}

.social-channel-directory-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.social-channel-directory-card__copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.social-channel-directory-card__copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.social-channel-directory-card__copy small {
  color: var(--muted);
}

.social-post-show-page {
  display: grid;
  gap: 16px;
  align-content: start;
  width: min(100%, 1120px);
  margin: 0 auto;
}

.social-post-show-card {
  background: color-mix(in srgb, var(--surface) 97%, #fff 3%);
  border: 1px solid color-mix(in srgb, var(--border) 78%, var(--accent) 10%);
  border-radius: 28px;
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.06);
}

.social-post-show-card--hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
}

.social-post-show-card__channel {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.social-post-show-card__avatar {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  border-radius: 18px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface) 86%);
  color: var(--accent);
  font-weight: 900;
  text-decoration: none;
}

.social-post-show-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.social-post-show-card__channel-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.social-post-show-card__channel-copy span,
.social-post-show-card__channel-copy small {
  color: var(--muted);
  font-size: 12px;
}

.social-post-show-card__channel-copy strong {
  font-size: 18px;
  line-height: 1.5;
}

.social-post-show-card__actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.social-post-show-card--content {
  display: grid;
  gap: 14px;
  padding: 20px;
}

.social-post-show-card__headline {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.social-post-show-card__source-badge,
.social-post-show-card__headline-time {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.social-post-show-card__source-badge {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface) 88%);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}

.social-post-show-card__headline-time {
  color: var(--muted);
  background: color-mix(in srgb, var(--surface-muted) 88%, #fff 12%);
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
}

.social-post-show-card__layout {
  display: grid;
  gap: 18px;
  align-items: start;
}

.social-post-show-card__layout.has-media {
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
}

.social-post-show-card__layout.no-media {
  grid-template-columns: minmax(0, 1fr);
}

.social-post-show-card__media-wrap {
  display: grid;
  gap: 10px;
}

.social-post-show-card__content {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.social-post-show-card__media {
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  background: color-mix(in srgb, var(--surface-strong) 88%, #fff 12%);
  max-width: 100%;
}

.social-post-show-card__media img {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: min(48vh, 360px);
  object-fit: contain;
  display: block;
}

.social-post-show-card__meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.social-post-show-card__meta span {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface-muted) 88%, #fff 12%);
  max-width: 100%;
}

.social-post-show-card__text {
  font-size: 16px;
  line-height: 2.15;
  white-space: pre-line;
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 96%, #fff 4%);
  border: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
  border-radius: 18px;
  padding: 18px 20px;
}

.social-post-show-card__text--muted {
  color: var(--muted);
}

.social-post-show-card__file {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface) 92%);
  color: var(--accent);
  max-width: 100%;
}

.social-post-show-card__sid {
  color: var(--muted);
  font-size: 12px;
  direction: ltr;
  text-align: left;
  padding-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-top: 1px dashed color-mix(in srgb, var(--border) 72%, transparent);
  padding-top: 10px;
}

.social-post-show-card__notice {
  margin-top: 2px;
}

.social-post-show-card__file svg {
  width: 18px;
  height: 18px;
}

.social-post-show-card__file div {
  display: grid;
  gap: 3px;
}

.social-post-show-card__file small {
  color: var(--muted);
}

.home-post-grid {
  margin-top: 16px;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.home-post-grid .post-grid__item,
.home-post-grid .profile-media-card {
  border-radius: 20px;
}

.home-feed-card__footer {
  margin-top: 18px;
  display: flex;
  justify-content: center;
}

@media (max-width: 900px) {
  .home-post-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .home-quick-links,
  .home-map-highlights__grid,
  .home-social-channels__grid,
  .social-channel-posts__grid,
  .social-channel-directory__grid {
    grid-template-columns: 1fr;
  }

  .social-channel-hero {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .social-channel-hero__main {
    grid-template-columns: 1fr;
  }

  .social-channel-hero__avatar {
    margin: 0 auto;
  }

  .social-channel-hero__side {
    justify-items: stretch;
  }

  .social-channel-hero__meta,
  .social-channel-hero__actions {
    justify-content: center;
  }

  .home-strip-rail {
    grid-auto-columns: minmax(208px, 76vw);
  }

  .social-post-show-card--hero {
    flex-direction: column;
    align-items: stretch;
  }

  .social-post-show-card__actions {
    width: 100%;
  }

  .social-post-show-card__layout.has-media {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .home-post-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .home-quick-link {
    padding: 14px;
    border-radius: 18px;
  }

  .home-strip-card {
    padding: 11px;
    border-radius: 18px;
  }

  .home-social-card__main {
    grid-template-columns: 78px minmax(0, 1fr);
  }

  .social-post-card__link {
    grid-template-columns: 98px minmax(0, 1fr);
  }

  .social-post-show-card {
    border-radius: 22px;
  }

  .social-post-show-card--content {
    padding: 16px;
  }

  .social-post-show-card__media {
    border-radius: 18px;
  }

  .social-post-show-card__media img {
    max-height: min(42vh, 300px);
  }

  .social-post-show-card__text {
    padding: 14px;
    font-size: 14px;
    line-height: 2;
  }

  .social-modal {
    align-items: end;
    padding:
      max(12px, calc(env(safe-area-inset-top, 0px) + 64px))
      12px
      max(12px, calc(env(safe-area-inset-bottom, 0px) + 84px));
  }

  .social-modal__box {
    width: 100%;
    max-height: calc(100dvh - 112px);
    border-radius: 24px;
    padding: 16px;
  }

  .home-channel-request-modal__box {
    width: 100%;
  }

  .home-channel-request-form {
    grid-template-columns: 1fr;
    max-height: calc(100dvh - 148px);
    gap: 10px;
  }
}

.camp-request-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(14, 116, 144, 0.08);
  color: #0f766e;
  font-size: 13px;
  font-weight: 700;
}

.camp-request-inline-status {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 14px;
  background: rgba(14, 116, 144, 0.08);
  color: #0f766e;
  font-size: 13px;
  font-weight: 700;
}

.camp-request-banner {
  display: grid;
  gap: 8px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.98));
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
}

.camp-request-banner strong {
  color: #0f172a;
  font-size: 15px;
}

.camp-request-banner p {
  margin: 0;
  color: #475569;
  line-height: 1.8;
  font-size: 13px;
}

.camp-request-list {
  display: grid;
  gap: 14px;
}

.camp-request-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: #fff;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.05);
}

.camp-request-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.camp-request-card__user {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.camp-request-card__user img,
.camp-request-card__user .avatar {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  object-fit: cover;
  background: #e2e8f0;
}

.camp-request-card__user strong,
.camp-request-card__user span {
  display: block;
}

.camp-request-card__user strong {
  color: #0f172a;
  font-size: 14px;
}

.camp-request-card__user span {
  color: #64748b;
  font-size: 12px;
}

.camp-request-card__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  color: #64748b;
  font-size: 12px;
}

.camp-request-card__note {
  margin: 0;
  color: #475569;
  font-size: 13px;
  line-height: 1.9;
}

.camp-request-card__actions {
  display: grid;
  gap: 10px;
}

.camp-request-card__actions form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.camp-request-card__reject input[type="text"],
.camp-request-card__reject textarea {
  flex: 1 1 240px;
  min-height: 46px;
}

.camp-request-card__history {
  color: #64748b;
  font-size: 12px;
}

@media (max-width: 720px) {
  .camp-request-card {
    padding: 14px;
    border-radius: 18px;
  }

  .camp-request-card__head,
  .camp-request-card__actions form {
    flex-direction: column;
    align-items: stretch;
  }

  .camp-request-card__meta {
    justify-content: flex-start;
  }
}

/* Compact, cleaner cards for the bootcamp catalog page. */
.camp-block--catalog,
.camp-block--mine {
  padding: 18px;
  border-radius: 22px;
}

.camp-grid--compact {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}

.camp-card--compact {
  min-width: 0;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.045);
}

.camp-card--compact .camp-card__cover {
  min-height: 0;
  height: 132px;
  aspect-ratio: 16 / 9;
}

.camp-card--compact .camp-card__body {
  gap: 10px;
  padding: 13px;
}

.camp-card--compact .camp-card__meta-row {
  gap: 6px;
  max-height: 58px;
  overflow: hidden;
}

.camp-card--compact .camp-chip {
  padding: 4px 8px;
  font-size: 0.72rem;
}

.camp-card--compact .camp-card__status,
.camp-card--compact .camp-card__joined-flag {
  top: 10px;
  padding: 5px 8px;
  font-size: 0.7rem;
}

.camp-card--compact .camp-card__status {
  inset-inline-start: 10px;
}

.camp-card--compact .camp-card__joined-flag {
  inset-inline-end: 10px;
}

.camp-card--compact .camp-card__title {
  font-size: 0.96rem;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.camp-card--compact .camp-card__summary {
  min-height: 0;
  font-size: 0.82rem;
  line-height: 1.75;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.camp-card--compact .camp-card__goal {
  display: none;
}

.camp-card--compact .camp-card__kpis {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.camp-card--compact .camp-card__kpis span {
  padding: 7px 8px;
  border-radius: 12px;
}

.camp-card--compact .camp-card__kpis strong {
  font-size: 0.9rem;
}

.camp-card--compact .camp-card__kpis small {
  font-size: 0.72rem;
}

.camp-card--compact .camp-card__mentor {
  gap: 8px;
  padding: 8px;
  border-radius: 14px;
}

.camp-card--compact .camp-card__mentor img {
  width: 34px;
  height: 34px;
}

.camp-card--compact .camp-card__mentor strong {
  font-size: 0.84rem;
}

.camp-card--compact .camp-card__mentor span {
  font-size: 0.74rem;
}

.camp-card--compact .camp-card__actions {
  flex-wrap: wrap;
  gap: 8px;
}

.camp-card--compact .camp-card__actions form {
  display: flex;
  flex: 1 1 auto;
  margin: 0;
}

.camp-card--compact .camp-card__actions .button,
.camp-card--compact .camp-card__actions button,
.camp-card--compact .camp-request-inline-status {
  flex: 1 1 auto;
  justify-content: center;
  min-height: 36px;
  padding: 0 10px;
  border-radius: 12px;
  font-size: 12px;
}

@media (max-width: 640px) {
  .camp-block--catalog,
  .camp-block--mine {
    padding: 14px;
    border-radius: 18px;
  }

  .camp-grid--compact {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .camp-card--compact .camp-card__cover {
    height: 118px;
  }
}