:root {
  color-scheme: light;
  --font-sans: Inter, "Be Vietnam Pro", Geist, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --background: #f3f8f3;
  --foreground: #10281d;
  --foreground-soft: #1d3c30;
  --muted: #edf5ee;
  --muted-foreground: #4d6258;
  --card: #ffffff;
  --card-strong: #fffef8;
  --card-tint: rgba(255, 255, 255, 0.78);
  --border: #d9e8df;
  --border-strong: #bfd8c8;
  --primary: #147647;
  --primary-strong: #0c4f31;
  --primary-deep: #083a28;
  --primary-soft: #dff4e8;
  --secondary: #eaf7ed;
  --accent: #edae32;
  --accent-strong: #a86005;
  --accent-soft: #fff1c7;
  --sky: #e2f5fb;
  --sky-strong: #197b97;
  --teal: #0f8f83;
  --lime: #8dcc54;
  --danger: #c24132;
  --warning: #a86605;
  --success: #1f7a42;
  --shadow: 0 24px 58px rgba(15, 79, 49, 0.14);
  --shadow-soft: 0 14px 34px rgba(18, 76, 48, 0.09);
  --shadow-tight: 0 10px 22px rgba(18, 76, 48, 0.08);
  --glow-green: 0 18px 44px rgba(20, 118, 71, 0.2);
  --glow-amber: 0 14px 32px rgba(237, 174, 50, 0.2);
  --gradient-primary: linear-gradient(135deg, #0b5637 0%, #148354 48%, #0f8f83 100%);
  --gradient-accent: linear-gradient(135deg, #fff7d8 0%, #f2c564 50%, #e99a22 100%);
  --gradient-surface: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 252, 247, 0.9));
  --motion-fast: 160ms;
  --motion-medium: 320ms;
  --motion-slow: 720ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.2, 1.28, 0.32, 1);
  --radius: 12px;
  --radius-lg: 18px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  font-family: var(--font-sans);
}

@property --ring-progress {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  overflow-y: scroll;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--foreground);
  font-family: var(--font-sans);
  font-feature-settings: "kern" 1, "cv02" 1, "cv03" 1, "cv04" 1;
  background:
    linear-gradient(180deg, #fbfdf8 0%, #f4faf5 38rem, var(--background) 100%),
    var(--background);
}

#app {
  width: 100%;
  max-width: 100vw;
  min-height: 100svh;
  overflow-x: hidden;
  position: relative;
  isolation: isolate;
}

body.is-loading {
  cursor: progress;
}

body.is-loading::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--accent), var(--primary));
  background-size: 180% 100%;
  animation: loading-bar 900ms linear infinite;
}

@keyframes loading-bar {
  to {
    background-position: 180% 0;
  }
}

button,
input,
select,
textarea {
  font: inherit;
  letter-spacing: 0;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(237, 174, 50, 0.48);
  outline-offset: 3px;
}

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

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

.fa-icon {
  display: inline-grid;
  place-items: center;
  width: 1em;
  line-height: 1;
}

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

.boot-card {
  width: min(100%, 360px);
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow);
}

.brand-mark {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--primary);
  color: #fff;
  font-weight: 800;
}

.boot-card p {
  margin: 2px 0 0;
  color: var(--muted-foreground);
  font-size: 0.9rem;
}

.app-shell {
  width: 100%;
  min-height: 100vh;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  isolation: isolate;
  background:
    linear-gradient(145deg, rgba(246, 252, 246, 0.98) 0%, rgba(238, 248, 241, 0.94) 52%, rgba(245, 250, 246, 0.98) 100%);
}

.app-shell::before,
.app-shell::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.app-shell::before {
  background:
    linear-gradient(118deg, transparent 0 56%, rgba(20, 118, 71, 0.055) 56% 56.35%, transparent 56.35% 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.55), transparent 45%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, transparent 68%);
}

.app-shell::after {
  top: auto;
  height: 34svh;
  background: linear-gradient(180deg, transparent, rgba(255, 247, 216, 0.38));
}

.app-sidebar {
  display: none;
}

.app-frame {
  width: 100%;
  min-width: 0;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.app-main {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
  padding: 0 0 calc(86px + var(--safe-bottom));
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(190, 214, 199, 0.62);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(247, 252, 247, 0.78));
  backdrop-filter: blur(18px) saturate(1.14);
  animation: shell-down 360ms var(--ease-out) 80ms backwards;
}

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

.brand img {
  width: 118px;
  height: auto;
}

.brand-title {
  display: none;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-button,
.avatar-button {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(191, 216, 200, 0.82);
  border-radius: 14px;
  background: var(--gradient-surface);
  color: var(--foreground);
  box-shadow: var(--shadow-tight);
  transition:
    transform var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    background var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease,
    color var(--motion-fast) ease;
}

.avatar-button {
  border-color: rgba(20, 118, 71, 0.22);
  background: var(--gradient-primary);
  color: #fff;
  font-weight: 800;
  box-shadow: var(--glow-green);
}

.icon-button .fa-icon,
.avatar-button .fa-icon {
  width: 20px;
  height: 20px;
}

.bottom-nav {
  position: fixed;
  left: 50%;
  right: auto;
  bottom: 0;
  z-index: 40;
  width: min(100%, 480px);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  transform: translateX(-50%);
  padding: 8px 10px calc(8px + var(--safe-bottom));
  border-top: 1px solid rgba(191, 216, 200, 0.86);
  border-inline: 1px solid rgba(220, 232, 223, 0.78);
  border-radius: 20px 20px 0 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 252, 247, 0.94));
  box-shadow: 0 -18px 44px rgba(15, 79, 49, 0.14);
  backdrop-filter: blur(18px) saturate(1.12);
  animation: shell-up 420ms var(--ease-out) 120ms backwards;
}

.nav-item {
  min-width: 0;
  min-height: 54px;
  display: grid;
  place-items: center;
  gap: 2px;
  padding: 6px 4px;
  border-radius: 16px;
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 700;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.nav-item .fa-icon {
  width: 20px;
  height: 20px;
  font-size: 1.05rem;
}

.nav-item.is-active {
  background:
    linear-gradient(180deg, rgba(223, 244, 232, 0.95), rgba(255, 241, 199, 0.58));
  color: var(--primary-strong);
  box-shadow: inset 0 0 0 1px rgba(20, 118, 71, 0.12);
}

.nav-item.is-active .fa-icon {
  animation: active-tab-pop 260ms var(--ease-spring);
}

.page {
  width: 100%;
  max-width: 1120px;
  min-height: calc(100svh - 64px - 86px - var(--safe-bottom));
  margin: 0 auto;
  padding: 18px 16px;
  animation: page-in var(--motion-fast) ease-out;
}

.page:focus {
  outline: none;
}

.page[data-motion-root] {
  animation: none;
  opacity: 0;
  transform: translate3d(0, 10px, 0) scale(0.996);
  transform-origin: 50% 0;
  transition:
    opacity var(--motion-medium) var(--ease-out),
    transform var(--motion-medium) var(--ease-out);
}

.page[data-motion-root].is-mounted {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.page[data-motion-root].is-leaving {
  opacity: 0;
  transform: translate3d(0, -6px, 0) scale(0.998);
  transition-duration: 120ms;
  transition-timing-function: ease-in;
}

.page[data-motion-root] [data-motion-item] {
  opacity: 0;
  transform: translate3d(0, 14px, 0) scale(0.985);
  transform-origin: 50% 0;
  transition:
    opacity var(--motion-medium) var(--ease-out),
    transform var(--motion-medium) var(--ease-out),
    border-color var(--motion-fast) ease,
    background var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease;
  transition-delay: calc(var(--motion-order, 0) * 34ms);
  will-change: opacity, transform;
}

.page[data-motion-root].is-mounted [data-motion-item] {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.page[data-motion-root].is-leaving [data-motion-item] {
  transition-delay: 0ms;
}

.page[data-motion-root].is-motion-settled,
.page[data-motion-root].is-motion-settled [data-motion-item] {
  will-change: auto;
}

.page[data-motion-root].is-motion-settled [data-motion-item] {
  transition-delay: 0ms;
}

@keyframes page-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes shell-down {
  from {
    opacity: 0;
    transform: translate3d(0, -12px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes shell-up {
  from {
    opacity: 0;
    transform: translate3d(-50%, 18px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes sidebar-in {
  from {
    opacity: 0;
    transform: translate3d(-14px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes active-tab-pop {
  0% {
    transform: translate3d(0, 2px, 0) scale(0.9);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.page-stack {
  width: 100%;
  min-width: 0;
  display: grid;
  gap: 18px;
}

.section {
  min-width: 0;
  display: grid;
  gap: 14px;
}

.section-head {
  min-width: 0;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.section-head > div {
  min-width: 0;
}

.eyebrow {
  margin: 0 0 5px;
  color: var(--primary);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.section-title,
.page-title {
  margin: 0;
  color: var(--foreground);
  font-size: 1.2rem;
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: 0;
}

.page-title {
  font-size: clamp(1.7rem, 7vw, 3.2rem);
}

.section-copy,
.page-copy {
  margin: 6px 0 0;
  color: var(--muted-foreground);
  line-height: 1.58;
  overflow-wrap: break-word;
}

.hero {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  padding: 24px 18px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 26px;
  background:
    linear-gradient(135deg, rgba(8, 58, 40, 0.96), rgba(20, 118, 71, 0.9) 52%, rgba(15, 143, 131, 0.84)),
    url("/hanhtrinh-reference/assets/hero-bg.png") center / cover;
  color: #fff;
  box-shadow: var(--shadow);
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.hero::before {
  inset: 0;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.18) 0%, transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 54%);
  mix-blend-mode: screen;
}

.hero::after {
  inset: auto 0 0;
  height: 42%;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.18));
}

.hero > * {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.hero .eyebrow,
.hero .page-copy {
  color: rgba(255, 255, 255, 0.86);
}

.hero .page-title {
  color: #fff;
  text-shadow: 0 12px 36px rgba(0, 0, 0, 0.16);
}

.hero .card {
  border-color: rgba(255, 255, 255, 0.34);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(246, 253, 247, 0.86));
  box-shadow: 0 18px 42px rgba(3, 33, 21, 0.16);
}

.hero .card .eyebrow {
  color: var(--primary);
}

.hero .button {
  background: var(--gradient-accent);
  color: var(--primary-deep);
  box-shadow: var(--glow-amber);
}

.hero-fx-ready {
  isolation: isolate;
}

.hero-fx-ready > :not(.hero-mirror-sheen):not(.hero-star-field) {
  position: relative;
  z-index: 2;
}

.hero-mirror-sheen,
.hero-star-field {
  position: absolute;
  pointer-events: none;
}

.hero-mirror-sheen {
  inset: -45% auto -45% -58%;
  z-index: 1;
  width: 46%;
  min-width: 160px;
  transform: skewX(-18deg) translateX(0);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04) 18%, rgba(255, 255, 255, 0.32) 48%, rgba(255, 245, 196, 0.22) 54%, transparent 82%);
  filter: blur(0.2px);
  mix-blend-mode: screen;
  opacity: 0;
}

.page.is-mounted .hero-mirror-sheen {
  animation: hero-mirror-sweep 6.2s ease-in-out infinite;
  animation-delay: calc(0.7s + var(--hero-fx-order, 0) * 130ms);
}

.hero-star-field {
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

.hero-star-field i {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: #fff;
  box-shadow:
    0 0 8px rgba(255, 255, 255, 0.96),
    0 0 16px rgba(255, 225, 128, 0.68),
    0 0 24px rgba(164, 255, 208, 0.42);
  opacity: 0;
  transform: scale(0.5) rotate(0deg);
}

.hero-star-field i::before,
.hero-star-field i::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 12px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.92), transparent);
  transform: translate(-50%, -50%);
}

.hero-star-field i::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.hero-star-field i:nth-child(1) {
  top: 18%;
  left: 76%;
}

.hero-star-field i:nth-child(2) {
  top: 38%;
  left: 91%;
  width: 3px;
  height: 3px;
}

.hero-star-field i:nth-child(3) {
  top: 72%;
  left: 84%;
  width: 5px;
  height: 5px;
}

.hero-star-field i:nth-child(4) {
  top: 24%;
  left: 15%;
  width: 3px;
  height: 3px;
}

.page.is-mounted .hero-star-field i {
  animation: hero-star-twinkle 4.2s ease-in-out infinite;
  animation-delay: calc(1s + var(--hero-fx-order, 0) * 90ms);
}

.page.is-mounted .hero-star-field i:nth-child(2) {
  animation-delay: calc(2.1s + var(--hero-fx-order, 0) * 90ms);
}

.page.is-mounted .hero-star-field i:nth-child(3) {
  animation-delay: calc(3.05s + var(--hero-fx-order, 0) * 90ms);
}

.page.is-mounted .hero-star-field i:nth-child(4) {
  animation-delay: calc(1.55s + var(--hero-fx-order, 0) * 90ms);
}

@keyframes hero-mirror-sweep {
  0%, 100% {
    opacity: 0;
    transform: skewX(-18deg) translateX(0);
  }
  15% {
    opacity: 0.64;
  }
  31%, 72% {
    opacity: 0;
    transform: skewX(-18deg) translateX(360%);
  }
}

@keyframes hero-star-twinkle {
  0%, 100% {
    opacity: 0;
    transform: scale(0.46) rotate(0deg);
  }
  18% {
    opacity: 0.95;
    transform: scale(1.08) rotate(18deg);
  }
  30%, 68% {
    opacity: 0.34;
    transform: scale(0.78) rotate(32deg);
  }
}

.hero-actions,
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.home-hero-kpis {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.home-hero-kpis span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.13);
  color: #fff;
}

.home-hero-kpis .fa-icon {
  width: 13px;
  height: 13px;
  font-size: 0.72rem;
}

.home-hero-kpis strong {
  font-size: 0.8rem;
  line-height: 1;
}

.home-hero-kpis em {
  color: rgba(255, 255, 255, 0.72);
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 800;
}

.home-page .home-stack {
  gap: 16px;
}

.home-page .home-hero {
  border: 1px solid rgba(255, 255, 255, 0.42);
  background:
    linear-gradient(135deg, rgba(6, 45, 32, 0.96), rgba(12, 93, 66, 0.9) 52%, rgba(18, 132, 116, 0.84)),
    url("/hanhtrinh-reference/assets/hero-bg.png") center / cover;
  box-shadow: 0 24px 60px rgba(7, 45, 30, 0.2);
}

.home-page .home-hero .eyebrow {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.13);
  color: rgba(255, 255, 255, 0.92);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.home-page .home-hero .page-copy {
  color: rgba(255, 255, 255, 0.82);
}

.home-page .home-hero-kpis span {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.home-page .home-hero .hero-actions {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin-top: 12px;
}

.home-page .home-hero .hero-actions .button,
.home-page .home-hero .hero-actions .button-ghost {
  width: 100%;
}

.home-page .home-hero-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.home-page .home-hero-kpis span {
  min-width: 0;
  justify-content: center;
  padding-inline: 8px;
  white-space: nowrap;
}

.home-page .home-hero-kpis span:nth-child(3) {
  grid-column: 1 / -1;
  justify-self: center;
  width: auto;
  padding-inline: 12px;
}

.home-page .home-hero-kpis .fa-icon,
.home-page .home-hero-kpis strong,
.home-page .home-hero-kpis em {
  flex: 0 0 auto;
}

.home-page .home-impact-section,
.home-page .home-info-section,
.home-page .home-feature-section,
.home-page .home-leaderboard-section {
  padding: 14px;
  border: 1px solid color-mix(in oklab, var(--primary) 12%, white);
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(238, 249, 243, 0.82)),
    #fff;
  box-shadow: 0 16px 42px rgba(15, 79, 49, 0.07);
}

.home-page .home-feature-section .section-head,
.home-page .home-leaderboard-section .section-head,
.home-page .home-info-section .section-head,
.home-page .home-impact-section .section-head {
  padding-bottom: 2px;
}

.home-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.home-info-card {
  position: relative;
  min-width: 0;
  min-height: 112px;
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 12px;
  border: 1px solid rgba(210, 228, 218, 0.9);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
  color: inherit;
}

.home-info-card > span {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--primary-soft);
  color: var(--primary);
}

.home-info-card > span .fa-icon {
  width: 13px;
  height: 13px;
  font-size: 0.74rem;
}

.home-info-card strong {
  color: var(--foreground);
  font-size: 0.82rem;
  line-height: 1.18;
  font-weight: 950;
}

.home-info-card small {
  color: var(--muted-foreground);
  font-size: 0.66rem;
  line-height: 1.32;
  font-weight: 750;
}

.home-info-card > .fa-icon:last-child {
  position: absolute;
  right: 12px;
  top: 14px;
  width: 12px;
  height: 12px;
  color: var(--muted-foreground);
  font-size: 0.68rem;
}

.button,
.button-secondary,
.button-ghost {
  max-width: 100%;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  border-radius: 16px;
  border: 1px solid transparent;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  white-space: normal;
  transition:
    transform var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    background var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease,
    color var(--motion-fast) ease,
    opacity var(--motion-fast) ease;
}

.button {
  background: var(--gradient-primary);
  color: #fff;
  box-shadow: var(--glow-green);
}

.button:active,
.button-secondary:active,
.button-ghost:active,
.chip:active,
.nav-item:active {
  transform: translateY(1px);
}

.button:disabled,
.button-secondary:disabled {
  cursor: not-allowed;
  opacity: 0.66;
}

.button-secondary {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(223, 244, 232, 0.86));
  color: var(--primary-strong);
  border-color: rgba(20, 118, 71, 0.16);
  box-shadow: var(--shadow-tight);
}

.button-ghost {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(10px);
}

.card {
  min-width: 0;
  position: relative;
  border: 1px solid rgba(191, 216, 200, 0.78);
  border-radius: var(--radius-lg);
  background: var(--gradient-surface);
  box-shadow: var(--shadow-soft);
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.card-pad {
  padding: 16px;
}

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

.metric-card {
  position: relative;
  overflow: hidden;
  min-width: 0;
  min-height: 118px;
  display: grid;
  align-content: space-between;
  gap: 10px;
  padding: 15px;
  border: 1px solid rgba(191, 216, 200, 0.78);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(248, 252, 247, 0.9));
  box-shadow: var(--shadow-tight);
}

.metric-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.58), transparent 46%);
  pointer-events: none;
}

.metric-icon {
  position: relative;
  z-index: 1;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: var(--gradient-primary);
  color: #fff;
  box-shadow: var(--glow-green);
}

.metric-icon .fa-icon,
.state-icon .fa-icon,
.earning-icon .fa-icon {
  width: 20px;
  height: 20px;
  font-size: 1rem;
}

.metric-value {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 1.42rem;
  line-height: 1.05;
  font-weight: 900;
  color: var(--foreground);
}

.metric-label {
  position: relative;
  z-index: 1;
  margin: 2px 0 0;
  color: var(--muted-foreground);
  font-size: 0.78rem;
  font-weight: 700;
}

.grid-list {
  min-width: 0;
  display: grid;
  gap: 12px;
}

.event-card,
.campaign-card,
.tree-card,
.leader-card,
.timeline-item,
.badge-card {
  position: relative;
  overflow: hidden;
  min-width: 0;
  display: grid;
  gap: 12px;
  padding: 15px;
  border: 1px solid rgba(191, 216, 200, 0.78);
  border-radius: var(--radius-lg);
  background: var(--gradient-surface);
  box-shadow: var(--shadow-tight);
}

.event-card::before,
.campaign-card::before,
.tree-card::before,
.leader-card::before,
.timeline-item::before,
.badge-card::before {
  content: "";
  position: absolute;
  inset: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(20, 118, 71, 0.36), rgba(237, 174, 50, 0.26), transparent);
  opacity: 0.55;
}

.event-card h3,
.campaign-card h3,
.tree-card h3,
.leader-card h3,
.badge-card h3 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.28;
  overflow-wrap: break-word;
}

.tree-card-update {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-width: 0;
  border: 1px solid rgba(15, 118, 110, 0.1);
  border-radius: 14px;
  padding: 10px;
  color: rgba(15, 23, 42, 0.72);
  background: linear-gradient(135deg, rgba(240, 253, 244, 0.86), rgba(236, 253, 245, 0.58));
}

.tree-card-update.has-update {
  border-color: rgba(16, 185, 129, 0.2);
  color: #064e3b;
  background:
    radial-gradient(circle at 96% 12%, rgba(250, 204, 21, 0.18), transparent 34%),
    linear-gradient(135deg, rgba(209, 250, 229, 0.92), rgba(240, 253, 244, 0.74));
}

.tree-card-update.has-unread {
  border-color: rgba(237, 174, 50, 0.36);
  color: #083a28;
  background:
    radial-gradient(circle at 92% 8%, rgba(255, 255, 255, 0.92), transparent 22%),
    linear-gradient(135deg, rgba(255, 247, 216, 0.95), rgba(206, 246, 221, 0.88));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.52);
}

.tree-card-update-icon {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border-radius: 11px;
  color: #047857;
  background: rgba(255, 255, 255, 0.78);
}

.tree-card-update.has-update .tree-card-update-icon {
  color: #0f766e;
  background: linear-gradient(135deg, #ffffff, #dcfce7);
}

.tree-card-update.has-unread .tree-card-update-icon {
  color: #8a4f00;
  background: linear-gradient(135deg, #ffffff, #fff1c7);
}

.tree-update-unread-tag {
  gap: 5px;
  color: #7a4100;
  border-color: rgba(237, 174, 50, 0.34);
  background: linear-gradient(135deg, rgba(255, 247, 216, 0.96), rgba(255, 255, 255, 0.84));
}

.tree-card-update-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  align-items: center;
  font-size: 0.72rem;
  line-height: 1.2;
}

.tree-card-update-meta strong {
  color: inherit;
  font-weight: 950;
}

.tree-card-update-meta span {
  color: rgba(15, 23, 42, 0.52);
  font-weight: 800;
}

.tree-card-update p {
  margin: 3px 0 0;
  color: rgba(15, 23, 42, 0.68);
  font-size: 0.77rem;
  font-weight: 750;
  line-height: 1.32;
  overflow-wrap: anywhere;
}

.tree-card-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.tree-card-actions .button,
.tree-card-actions .button-secondary {
  width: 100%;
  min-height: 38px;
  justify-content: center;
  padding-inline: 10px;
  font-size: 0.82rem;
}

@media (max-width: 420px) {
  .tree-card-actions {
    grid-template-columns: 1fr;
  }
}

.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted-foreground);
  font-size: 0.82rem;
  font-weight: 700;
}

.tag {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid rgba(20, 118, 71, 0.14);
  background:
    linear-gradient(180deg, rgba(223, 244, 232, 0.98), rgba(255, 255, 255, 0.72));
  color: var(--primary-strong);
  font-size: 0.74rem;
  font-weight: 800;
  box-shadow: 0 7px 16px rgba(20, 118, 71, 0.08);
}

.tag.warning {
  border-color: rgba(168, 102, 5, 0.18);
  background: linear-gradient(180deg, var(--accent-soft), rgba(255, 255, 255, 0.72));
  color: var(--accent-strong);
}

.tag.sky {
  border-color: rgba(25, 123, 151, 0.18);
  background: linear-gradient(180deg, var(--sky), rgba(255, 255, 255, 0.72));
  color: var(--sky-strong);
}

.progress {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.42);
  box-shadow: inset 0 0 0 1px rgba(20, 118, 71, 0.08);
}

.progress > span {
  position: relative;
  overflow: hidden;
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), #8dcc54, var(--teal));
  box-shadow: 0 0 18px rgba(141, 204, 84, 0.42);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--motion-slow) var(--ease-out);
}

.page.is-mounted .progress > span {
  transform: scaleX(1);
}

.progress > span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.46), transparent);
  transform: translateX(-120%);
}

.page.is-mounted .progress > span::after {
  animation: progress-sheen 1.3s var(--ease-out) 420ms both;
}

@keyframes progress-sheen {
  to {
    transform: translateX(120%);
  }
}

.split-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted-foreground);
  font-size: 0.84rem;
}

.split-line > * {
  min-width: 0;
}

.filter-bar {
  display: grid;
  gap: 10px;
}

.search-field,
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  min-height: 46px;
  border: 1px solid rgba(191, 216, 200, 0.88);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 253, 248, 0.92));
  color: var(--foreground);
  padding: 0 13px;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.form-field textarea {
  min-height: 92px;
  padding-block: 12px;
  resize: vertical;
}

.search-field:focus,
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: rgba(23, 107, 58, 0.48);
  box-shadow: 0 0 0 4px rgba(23, 107, 58, 0.1);
}

.chip-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.chip-row::-webkit-scrollbar {
  display: none;
}

.chip {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(191, 216, 200, 0.86);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
  color: var(--muted-foreground);
  font-size: 0.82rem;
  font-weight: 800;
  box-shadow: var(--shadow-tight);
  transition:
    transform var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    background var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease,
    color var(--motion-fast) ease;
}

.chip.is-active {
  border-color: rgba(20, 118, 71, 0.18);
  background: var(--gradient-primary);
  color: #fff;
  box-shadow: var(--glow-green);
}

.form-grid {
  display: grid;
  gap: 12px;
}

.form-field {
  display: grid;
  gap: 6px;
}

.form-field label {
  font-size: 0.84rem;
  font-weight: 800;
}

.field-error {
  color: var(--danger);
  font-size: 0.78rem;
  font-weight: 700;
}

.status-panel,
.empty-state,
.error-state,
.success-state {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 10px;
  justify-items: start;
  padding: 16px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(191, 216, 200, 0.78);
  background: var(--gradient-surface);
  box-shadow: var(--shadow-tight);
}

.empty-state {
  background: linear-gradient(135deg, #fff, var(--secondary), var(--sky));
}

.error-state {
  border-color: rgba(194, 65, 50, 0.22);
  background: #fff7f5;
}

.success-state {
  border-color: rgba(31, 122, 66, 0.2);
  background: #f1fbf3;
}

.state-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: var(--gradient-primary);
  color: #fff;
  box-shadow: var(--glow-green);
}

.page.is-mounted .success-state .state-icon {
  animation: success-pop 520ms var(--ease-spring) 120ms backwards;
}

.page.is-mounted .empty-state .state-icon {
  animation: soft-pulse 2.4s ease-in-out 300ms infinite;
}

@keyframes success-pop {
  from {
    opacity: 0;
    transform: scale(0.55);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes soft-pulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow: var(--glow-green);
  }
  50% {
    transform: scale(1.035);
    box-shadow: 0 18px 42px rgba(20, 118, 71, 0.26);
  }
}

.skeleton {
  display: grid;
  gap: 12px;
}

.skeleton-line,
.skeleton-card {
  border-radius: 12px;
  background: linear-gradient(90deg, #edf4ee, #f8fbf7, #edf4ee);
  background-size: 220% 100%;
  animation: shimmer 1.1s infinite linear;
}

.skeleton-line {
  height: 16px;
}

.skeleton-card {
  height: 120px;
}

@keyframes shimmer {
  to {
    background-position: -220% 0;
  }
}

.map-panel {
  min-height: 360px;
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  border: 1px solid rgba(191, 216, 200, 0.82);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.28), transparent 42%),
    linear-gradient(135deg, #e4f7e9, #eefbfa 58%, #fff4d2);
  box-shadow: var(--shadow);
}

.map-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.32), transparent 45%);
  pointer-events: none;
}

.map-panel::after {
  content: none;
}

.map-pin {
  position: absolute;
  min-width: 40px;
  min-height: 40px;
  display: grid;
  place-items: center;
  border: 3px solid #fff;
  border-radius: 999px 999px 999px 4px;
  background: var(--gradient-primary);
  color: #fff;
  transform: rotate(-45deg);
  box-shadow: 0 16px 32px rgba(20, 118, 71, 0.34);
  z-index: 2;
  transition:
    transform var(--motion-fast) var(--ease-spring),
    background var(--motion-fast) ease,
    color var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease;
}

.map-pin::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: inherit;
  border: 1px solid rgba(20, 118, 71, 0.26);
  opacity: 0;
  transform: scale(0.7);
}

.page.is-mounted .map-pin {
  animation: pin-pop 460ms var(--ease-spring) backwards;
  animation-delay: calc(160ms + var(--pin-order, 0) * 70ms);
}

.page.is-mounted .map-pin.is-active::before {
  animation: pin-pulse 2.2s ease-out infinite;
}

.map-pin.is-active {
  background: var(--gradient-accent);
  color: var(--primary-deep);
  transform: rotate(-45deg) scale(1.12);
  box-shadow: var(--glow-amber);
}

.map-pin span {
  transform: rotate(45deg);
  font-size: 0.72rem;
  font-weight: 900;
}

@keyframes pin-pop {
  from {
    opacity: 0;
    transform: rotate(-45deg) translate3d(0, 10px, 0) scale(0.72);
  }
  to {
    opacity: 1;
    transform: rotate(-45deg) translate3d(0, 0, 0) scale(1);
  }
}

@keyframes pin-pulse {
  0% {
    opacity: 0.52;
    transform: scale(0.7);
  }
  70%,
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}

@keyframes map-pin-breathe {
  0%,
  100% {
    opacity: 0.62;
    transform: scale(0.82);
  }
  50% {
    opacity: 0.98;
    transform: scale(1.05);
  }
}

.map-sheet {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 252, 247, 0.86));
  backdrop-filter: blur(16px) saturate(1.1);
  box-shadow: var(--shadow-soft);
}

.map-sheet.is-updating {
  animation: sheet-pop 220ms var(--ease-out);
}

@keyframes sheet-pop {
  from {
    opacity: 0.72;
    transform: translate3d(0, 8px, 0) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.leader-podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 10px;
}

.podium-card {
  position: relative;
  overflow: hidden;
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 12px 8px;
  border: 1px solid rgba(191, 216, 200, 0.78);
  border-radius: 18px;
  background: var(--gradient-surface);
  box-shadow: var(--shadow-tight);
}

.podium-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 40%;
  background: linear-gradient(180deg, transparent, rgba(223, 244, 232, 0.76));
  pointer-events: none;
}

.podium-rank {
  position: relative;
  z-index: 1;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--gradient-accent);
  color: var(--primary-deep);
  font-weight: 900;
  box-shadow: var(--glow-amber);
}

.podium-card:nth-child(2) {
  padding-top: 22px;
  background: linear-gradient(180deg, #fff8de, #fff);
}

.leader-card {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
}

.rank-badge {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(180deg, var(--muted), #fff);
  color: var(--primary-strong);
  font-weight: 900;
  box-shadow: inset 0 0 0 1px rgba(20, 118, 71, 0.08);
}

.current-user {
  border-color: rgba(23, 107, 58, 0.35);
  background: linear-gradient(135deg, #fff, var(--primary-soft), rgba(255, 241, 199, 0.64));
}

.leaderboard-stack {
  gap: 16px;
}

.leaderboard-top-grid {
  display: grid;
  gap: 12px;
}

.leaderboard-hero-card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 16px;
  padding: 18px;
  border-radius: 24px;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.16), transparent 34%),
    linear-gradient(150deg, transparent 0 60%, rgba(255, 255, 255, 0.08) 60% 61%, transparent 61% 100%),
    var(--gradient-primary);
  color: #fff;
}

.leaderboard-hero-card::before {
  content: "\f091";
  position: absolute;
  right: -14px;
  bottom: -34px;
  font-family: "Font Awesome 7 Pro";
  font-size: 8.8rem;
  font-weight: 900;
  line-height: 1;
  color: rgba(255, 255, 255, 0.075);
  transform: rotate(-15deg);
  pointer-events: none;
}

.leaderboard-hero-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 52%);
  pointer-events: none;
}

.leaderboard-hero-copy,
.leaderboard-hero-stats {
  position: relative;
  z-index: 1;
}

.leaderboard-hero-copy {
  display: grid;
  gap: 6px;
}

.leaderboard-hero-copy > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.72rem;
  font-weight: 800;
}

.leaderboard-hero-copy .fa-icon {
  width: 13px;
  height: 13px;
  color: #ffe78a;
  font-size: 0.76rem;
}

.leaderboard-hero-copy h1 {
  margin: 0;
  color: #fff;
  font-size: 1.28rem;
  line-height: 1.15;
  font-weight: 900;
}

.leaderboard-hero-copy p {
  max-width: 32rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.76rem;
  line-height: 1.45;
}

.leaderboard-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.leaderboard-hero-stats span {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 4px;
  text-align: center;
}

.leaderboard-hero-stats .fa-icon {
  width: 14px;
  height: 14px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.78rem;
}

.leaderboard-hero-stats strong,
.leaderboard-hero-stats small {
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaderboard-hero-stats strong {
  color: #fff;
  font-size: 0.88rem;
  line-height: 1.12;
  font-weight: 900;
}

.leaderboard-hero-stats small {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.62rem;
  font-weight: 800;
}

.leaderboard-filter-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(239, 249, 242, 0.92)),
    var(--card);
}

.leaderboard-filter-block {
  display: grid;
  gap: 8px;
}

.leaderboard-filter-block > span {
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 900;
}

.leaderboard-segment-row,
.leaderboard-period-row {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding-bottom: 1px;
  scrollbar-width: none;
}

.leaderboard-segment-row::-webkit-scrollbar,
.leaderboard-period-row::-webkit-scrollbar {
  display: none;
}

.leaderboard-filter-button {
  flex: 0 0 auto;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 900;
  white-space: nowrap;
}

.leaderboard-filter-button .fa-icon {
  width: 11px;
  height: 11px;
  font-size: 0.66rem;
}

.leaderboard-filter-button.is-active {
  border-color: transparent;
  background: var(--gradient-primary);
  color: #fff;
}

.leaderboard-category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.leaderboard-category-card {
  --category-a: #16a34a;
  --category-b: #0d9488;
  min-width: 0;
  min-height: 58px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 0;
  border-radius: 16px;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.2), transparent 38%),
    linear-gradient(135deg, var(--category-a), var(--category-b));
  color: #fff;
  text-align: left;
  box-shadow: 0 10px 22px rgba(26, 68, 45, 0.08);
  opacity: 0.82;
}

.leaderboard-category-card.tone-credits {
  --category-a: #16a34a;
  --category-b: #0d9488;
}

.leaderboard-category-card.tone-trees {
  --category-a: #22c55e;
  --category-b: #84cc16;
}

.leaderboard-category-card.tone-donations {
  --category-a: #f59e0b;
  --category-b: #ef6c00;
}

.leaderboard-category-card.tone-events {
  --category-a: #0284c7;
  --category-b: #2563eb;
}

.leaderboard-category-card.is-active {
  opacity: 1;
  box-shadow: 0 12px 26px color-mix(in oklab, var(--category-a) 20%, transparent);
}

.leaderboard-category-card .fa-icon {
  width: 20px;
  height: 20px;
  font-size: 1rem;
}

.leaderboard-category-card span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.leaderboard-category-card strong,
.leaderboard-category-card small {
  overflow: hidden;
  color: currentColor;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaderboard-category-card strong {
  font-size: 0.78rem;
  line-height: 1.12;
  font-weight: 900;
}

.leaderboard-category-card small {
  opacity: 0.76;
  font-size: 0.62rem;
  font-weight: 800;
}

.leaderboard-podium-panel {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(22, 163, 74, 0.16);
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(237, 250, 242, 0.86)),
    var(--card);
}

.leaderboard-podium-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 0 28%, rgba(255, 255, 255, 0.62) 35%, transparent 46% 100%),
    linear-gradient(150deg, transparent 0 68%, rgba(255, 214, 102, 0.14) 68% 69%, transparent 69% 100%);
  opacity: 0.45;
  pointer-events: none;
}

.leaderboard-podium-head,
.leaderboard-podium-stage {
  position: relative;
  z-index: 1;
}

.leaderboard-podium-head {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.leaderboard-podium-head p,
.leaderboard-podium-head h2 {
  margin: 0;
}

.leaderboard-podium-head p {
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 800;
}

.leaderboard-podium-head h2 {
  margin-top: 2px;
  color: var(--foreground);
  font-size: 0.96rem;
  line-height: 1.18;
  font-weight: 900;
}

.leaderboard-podium-actions {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.leaderboard-podium-actions > span {
  flex: 0 0 auto;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-strong);
  font-size: 0.68rem;
  font-weight: 900;
}

.leaderboard-podium-share {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 11px;
  border: 1px solid rgba(22, 163, 74, 0.22);
  border-radius: 999px;
  background: #fff;
  color: var(--primary-strong);
  font: inherit;
  font-size: 0.7rem;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(15, 118, 76, 0.1);
  cursor: pointer;
}

.leaderboard-podium-share:disabled {
  opacity: 0.68;
  cursor: wait;
}

.leaderboard-podium-share.is-loading .fa-icon {
  animation: leaderboard-share-spin 0.9s linear infinite;
}

@keyframes leaderboard-share-spin {
  to { transform: rotate(360deg); }
}

.leaderboard-podium-head .fa-icon {
  width: 11px;
  height: 11px;
  font-size: 0.66rem;
}

.leaderboard-podium-stage {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 10px;
  min-height: 388px;
  padding: 8px 4px 0;
}

.leaderboard-podium-member {
  --podium-a: #22c55e;
  --podium-b: #0d9488;
  --podium-ring: #cbd5e1;
  --step-height: 96px;
  min-width: 0;
  display: grid;
  grid-template-rows: auto var(--step-height);
  align-content: end;
  align-items: stretch;
  text-align: center;
}

.leaderboard-podium-member.rank-1 {
  --podium-a: #fbbf24;
  --podium-b: #f59e0b;
  --podium-ring: #fcd34d;
  --step-height: 228px;
  z-index: 2;
}

.leaderboard-podium-member.rank-2 {
  --podium-a: #cbd5e1;
  --podium-b: #94a3b8;
  --podium-ring: #e2e8f0;
  --step-height: 136px;
}

.leaderboard-podium-member.rank-3 {
  --podium-a: #f0a868;
  --podium-b: #c2703c;
  --podium-ring: #f4b98a;
  --step-height: 60px;
}

.podium-person {
  min-width: 0;
  position: relative;
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 2px 4px 8px;
}

.podium-crown {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-bottom: -2px;
  color: #f59e0b;
  filter: drop-shadow(0 4px 8px rgba(245, 158, 11, 0.45));
  animation: podium-crown-bob 2.8s ease-in-out infinite;
}

.podium-crown .fa-icon {
  width: 22px;
  height: 22px;
  font-size: 1.25rem;
}

@keyframes podium-crown-bob {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-3px) rotate(3deg); }
}

.podium-avatar-wrap {
  position: relative;
  display: inline-grid;
  place-items: center;
  padding: 3px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--podium-a), var(--podium-b));
  box-shadow:
    0 0 0 3px #fff,
    0 12px 26px color-mix(in oklab, var(--podium-b) 30%, transparent);
}

.podium-avatar {
  position: relative;
  overflow: hidden;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--podium-a), var(--podium-b));
  color: #fff;
  font-size: 0.95rem;
  font-weight: 900;
}

.leaderboard-podium-member.rank-1 .podium-avatar {
  width: 70px;
  height: 70px;
  font-size: 1.1rem;
}

.podium-avatar img,
.leaderboard-row-avatar img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.podium-avatar::after {
  content: "";
  position: absolute;
  inset: -30% auto -30% -70%;
  width: 44%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.72), transparent);
  transform: rotate(18deg);
  opacity: 0;
}

.page.is-mounted .podium-avatar::after {
  animation: profile-badge-glint 3.5s ease-in-out infinite;
}

.podium-medal {
  position: absolute;
  right: -6px;
  bottom: -4px;
  z-index: 2;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--podium-a), var(--podium-b));
  color: #fff;
  box-shadow: 0 6px 14px color-mix(in oklab, var(--podium-b) 26%, transparent);
}

.podium-medal .fa-icon {
  width: 11px;
  height: 11px;
  font-size: 0.66rem;
}

.leaderboard-podium-member strong,
.leaderboard-podium-member small,
.leaderboard-podium-member em {
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaderboard-podium-member strong {
  margin-top: 3px;
  color: var(--foreground);
  font-size: 0.8rem;
  line-height: 1.16;
  font-weight: 900;
}

.leaderboard-podium-member.rank-1 strong {
  font-size: 0.9rem;
}

.leaderboard-podium-member small {
  color: var(--muted-foreground);
  font-size: 0.62rem;
  font-weight: 800;
}

.leaderboard-podium-member em {
  max-width: calc(100% - 4px);
  min-height: 23px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 9px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--podium-b) 14%, white);
  color: color-mix(in oklab, var(--podium-b) 70%, black);
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 900;
}

.podium-step {
  position: relative;
  overflow: hidden;
  height: var(--step-height);
  min-height: var(--step-height);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1px;
  border-radius: 14px 14px 6px 6px;
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--podium-a) 92%, white) 0%, var(--podium-b) 100%);
  color: #fff;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.5),
    inset 0 -8px 16px rgba(0, 0, 0, 0.14),
    0 16px 30px color-mix(in oklab, var(--podium-b) 24%, transparent);
}

.podium-step::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 38%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.32), transparent);
  pointer-events: none;
}

.podium-step::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: rgba(255, 255, 255, 0.18);
  transform: translateX(-50%);
  pointer-events: none;
}

.podium-step-rank {
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: 1.45rem;
  line-height: 1;
  font-weight: 900;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.leaderboard-podium-member.rank-1 .podium-step-rank {
  font-size: 1.85rem;
}

.podium-step-ordinal {
  position: relative;
  z-index: 1;
  margin-top: 2px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.leaderboard-list {
  display: grid;
  gap: 9px;
}

.leaderboard-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px 40px minmax(0, 1fr) minmax(76px, auto);
  align-items: center;
  gap: 9px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
}

.leaderboard-row.is-current-user {
  border-color: rgba(20, 118, 71, 0.24);
  background:
    linear-gradient(135deg, rgba(223, 244, 232, 0.72), rgba(255, 247, 216, 0.42)),
    var(--card);
}

.leaderboard-row-rank,
.leaderboard-row-avatar {
  display: grid;
  place-items: center;
  font-weight: 900;
}

.leaderboard-row-rank {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: var(--muted);
  color: var(--primary-strong);
  font-size: 0.72rem;
}

.leaderboard-row-avatar {
  overflow: hidden;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: var(--gradient-primary);
  color: #fff;
  font-size: 0.74rem;
}

.leaderboard-row-copy,
.leaderboard-row-score {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.leaderboard-row-copy strong,
.leaderboard-row-copy small,
.leaderboard-row-copy em,
.leaderboard-row-score strong,
.leaderboard-row-score small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaderboard-row-copy strong {
  color: var(--foreground);
  font-size: 0.8rem;
  line-height: 1.2;
  font-weight: 900;
}

.leaderboard-row-copy small,
.leaderboard-row-score small {
  color: var(--muted-foreground);
  font-size: 0.66rem;
  font-weight: 700;
}

.leaderboard-row-copy em {
  justify-self: start;
  max-width: 100%;
  min-height: 21px;
  display: inline-flex;
  align-items: center;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-strong);
  font-size: 0.6rem;
  font-style: normal;
  font-weight: 900;
}

.leaderboard-row-score {
  grid-column: auto;
  justify-items: end;
  padding-top: 1px;
  text-align: right;
}

.leaderboard-row-score strong {
  color: var(--foreground);
  font-size: 0.82rem;
  line-height: 1.18;
  font-weight: 900;
}

.leaderboard-row-score small {
  max-width: 116px;
}

.leaderboard-row-trend {
  grid-column: 3 / -1;
  justify-self: start;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--muted);
  color: var(--muted-foreground);
  font-size: 0.64rem;
  font-weight: 900;
}

.leaderboard-row-trend.up {
  background: color-mix(in oklab, #16a34a 10%, white);
  color: #147647;
}

.leaderboard-row-trend.down {
  background: color-mix(in oklab, #f59e0b 12%, white);
  color: #a86005;
}

.leaderboard-row-trend .fa-icon {
  width: 10px;
  height: 10px;
  font-size: 0.6rem;
}

.credit-pass {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(14px);
}

.credit-pass h2,
.credit-pass p {
  margin: 0;
  color: #fff;
}

.credit-pass h2 {
  margin-top: 2px;
  font-size: 1.18rem;
  line-height: 1.18;
}

.credit-pass p:last-child {
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.86rem;
  line-height: 1.45;
}

.credit-ring {
  --ring-size: 82px;
  --ring-progress: 0;
  width: var(--ring-size);
  height: var(--ring-size);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 999px;
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.96) 0 54%, transparent 55%),
    conic-gradient(var(--accent) calc(var(--ring-progress) * 1%), rgba(255, 255, 255, 0.22) 0);
  color: var(--primary-strong);
  font-size: 1.05rem;
  font-weight: 900;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.34),
    var(--glow-amber);
  transition: --ring-progress var(--motion-slow) var(--ease-out), transform var(--motion-medium) var(--ease-spring);
}

.page.is-mounted .credit-ring {
  --ring-progress: var(--value);
  animation: ring-pop 520ms var(--ease-spring) 120ms backwards;
}

@keyframes ring-pop {
  from {
    opacity: 0;
    transform: scale(0.82);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.achievement-card {
  min-height: 158px;
  align-content: start;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(247, 252, 247, 0.94));
}

.achievement-card.current-user {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(223, 244, 232, 0.98), rgba(255, 241, 199, 0.62));
}

.badge-topline {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.badge-emblem {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  background: var(--gradient-accent);
  color: var(--primary-deep);
  box-shadow: var(--glow-amber);
}

.badge-emblem.is-locked {
  background: linear-gradient(180deg, var(--muted), #fff);
  color: var(--muted-foreground);
  box-shadow: inset 0 0 0 1px rgba(99, 117, 107, 0.14);
}

.badge-emblem .fa-icon {
  width: 22px;
  height: 22px;
  font-size: 1.08rem;
}

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

.level-card {
  position: relative;
  overflow: hidden;
  min-width: 0;
  min-height: 112px;
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 6px;
  padding: 12px 8px;
  border: 1px solid rgba(191, 216, 200, 0.78);
  border-radius: 18px;
  background: var(--gradient-surface);
  text-align: center;
  box-shadow: var(--shadow-tight);
}

.level-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.54), transparent 48%);
  pointer-events: none;
}

.level-card.is-current {
  border-color: rgba(23, 107, 58, 0.46);
  background: linear-gradient(180deg, #fff, var(--primary-soft), rgba(255, 241, 199, 0.58));
  box-shadow: var(--glow-green);
}

.level-card.is-locked {
  color: var(--muted-foreground);
  background: rgba(238, 245, 238, 0.72);
}

.level-code {
  position: relative;
  z-index: 1;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  border: 1px solid rgba(23, 107, 58, 0.16);
  background: var(--gradient-primary);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 900;
  box-shadow: var(--glow-green);
}

.level-card.is-locked .level-code {
  border-color: rgba(99, 117, 107, 0.18);
  background: var(--muted);
  color: var(--muted-foreground);
}

.level-card strong {
  position: relative;
  z-index: 1;
  font-size: 0.84rem;
  line-height: 1.22;
}

.level-card small {
  position: relative;
  z-index: 1;
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 800;
}

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

.earning-card {
  position: relative;
  overflow: hidden;
  min-width: 0;
  min-height: 58px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(191, 216, 200, 0.78);
  border-radius: 18px;
  background: var(--gradient-surface);
  box-shadow: var(--shadow-tight);
}

.earning-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--accent), var(--primary), var(--teal));
  opacity: 0.72;
}

.earning-icon {
  position: relative;
  z-index: 1;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: var(--gradient-primary);
  color: #fff;
  box-shadow: var(--glow-green);
}

.earning-card span:nth-child(2) {
  position: relative;
  z-index: 1;
  min-width: 0;
  color: var(--foreground);
  font-size: 0.94rem;
  font-weight: 800;
}

.earning-card strong {
  position: relative;
  z-index: 1;
  justify-self: end;
  padding: 6px 9px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent-soft), #fff);
  color: var(--accent-strong);
  font-size: 0.74rem;
  line-height: 1.15;
  text-align: right;
}

.toast-root {
  position: fixed;
  z-index: 90;
  left: 12px;
  right: 12px;
  bottom: calc(88px + var(--safe-bottom));
  display: grid;
  gap: 8px;
  pointer-events: none;
}

.toast {
  justify-self: center;
  width: min(100%, 420px);
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(21, 51, 38, 0.96);
  color: #fff;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translate3d(0, 10px, 0) scale(0.985);
  transition:
    opacity 220ms var(--ease-out),
    transform 220ms var(--ease-out);
}

.toast.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.toast.is-hiding {
  opacity: 0;
  transform: translate3d(0, 8px, 0) scale(0.985);
}

.toast[data-type="error"] {
  background: rgba(150, 38, 28, 0.96);
}

.toast[data-type="info"] {
  background: rgba(30, 82, 62, 0.96);
}

.desktop-only {
  display: none;
}

.image-card {
  overflow: hidden;
  gap: 0;
  padding: 0;
  border-radius: 24px;
  background: var(--gradient-surface);
  box-shadow: var(--shadow-soft);
}

.image-card-media {
  position: relative;
  min-height: 178px;
  overflow: hidden;
  display: block;
  background: linear-gradient(135deg, var(--secondary), var(--sky));
}

.image-card.compact .image-card-media {
  min-height: 148px;
}

.image-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(7, 42, 27, 0.34));
}

.image-card-media img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
}

.image-card-body {
  display: grid;
  gap: 12px;
  padding: 15px;
}

.floating-tag {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(223, 244, 232, 0.88));
  color: var(--primary-deep);
  font-size: 0.76rem;
  font-weight: 900;
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 22px rgba(15, 79, 49, 0.16);
}

.detail-hero {
  overflow: hidden;
  border: 1px solid rgba(191, 216, 200, 0.78);
  border-radius: 26px;
  background: var(--gradient-surface);
  box-shadow: var(--shadow);
}

.detail-hero-media {
  position: relative;
  min-height: 250px;
  background: linear-gradient(135deg, var(--secondary), var(--sky));
}

.detail-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(10, 45, 27, 0.5));
}

.detail-hero-media img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
}

.back-pill {
  position: absolute;
  z-index: 1;
  top: 12px;
  left: 12px;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  background: rgba(255, 255, 255, 0.9);
  color: var(--primary-strong);
  font-size: 0.82rem;
  font-weight: 900;
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-tight);
}

.detail-hero-content {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.detail-facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.detail-facts > div {
  display: grid;
  gap: 2px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(191, 216, 200, 0.5);
  background: linear-gradient(180deg, var(--secondary), rgba(255, 255, 255, 0.72));
}

.detail-facts span {
  color: var(--muted-foreground);
  font-size: 0.82rem;
  font-weight: 700;
}

.detail-cta {
  width: 100%;
}

.event-detail-action-panel {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid rgba(191, 216, 200, 0.78);
  border-radius: 18px;
  background:
    radial-gradient(circle at 94% 8%, rgba(251, 191, 36, 0.1), transparent 28%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(241, 249, 244, 0.9));
}

.event-detail-action-panel > span {
  color: var(--primary-strong);
  font-size: 0.72rem;
  font-weight: 900;
}

.event-detail-action-panel > strong {
  color: var(--foreground);
  font-size: 0.8rem;
  line-height: 1.35;
  font-weight: 800;
}

.event-detail-checkin-hint {
  display: block;
  padding: 9px 10px;
  border-radius: 14px;
  background: rgba(23, 107, 58, 0.08);
  color: var(--foreground-soft);
  font-size: 0.72rem;
  line-height: 1.38;
  font-weight: 800;
}

.event-detail-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.event-detail-action-row .detail-cta,
.event-detail-action-row .button-secondary {
  flex: 1 1 160px;
  min-height: 42px;
}

.event-result-card {
  overflow: hidden;
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(191, 216, 200, 0.78);
  border-radius: 22px;
  background:
    radial-gradient(circle at 92% 8%, rgba(250, 204, 21, 0.14), transparent 28%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(235, 248, 241, 0.92));
  box-shadow: var(--shadow-tight);
}

.event-result-card-head {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.event-result-card-head > span {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: linear-gradient(135deg, #064e3b, #0ea5e9);
  color: #fff;
  box-shadow: 0 12px 26px rgba(14, 116, 144, 0.18);
}

.event-result-gallery {
  display: grid;
  gap: 10px;
}

.event-result-gallery figure {
  overflow: hidden;
  margin: 0;
  border: 1px solid rgba(191, 216, 200, 0.72);
  border-radius: 18px;
  background: #fff;
}

.event-result-gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: block;
  object-fit: cover;
}

.event-result-gallery figcaption {
  padding: 9px 10px;
  color: var(--foreground-soft);
  font-size: 0.72rem;
  line-height: 1.35;
  font-weight: 800;
}

.event-result-documents {
  display: grid;
  gap: 8px;
}

.event-result-documents a {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(191, 216, 200, 0.78);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.84);
  color: var(--foreground);
  text-decoration: none;
}

.event-result-documents a > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: rgba(14, 165, 233, 0.1);
  color: #036083;
}

.event-result-documents strong,
.event-result-documents small {
  overflow: hidden;
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event-result-documents strong {
  font-size: 0.78rem;
  font-weight: 900;
}

.event-result-documents small {
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 750;
}

.detail-body-grid {
  grid-template-columns: 1fr;
}

.rich-content p {
  margin: 10px 0 0;
  color: var(--muted-foreground);
  line-height: 1.7;
}

.check-list {
  display: grid;
  gap: 9px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.check-list li {
  position: relative;
  padding-left: 28px;
  color: var(--muted-foreground);
  line-height: 1.55;
}

.check-list li::before {
  content: "";
  position: absolute;
  top: 0.35em;
  left: 0;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--primary);
  box-shadow: inset 0 0 0 5px var(--primary-soft);
}

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

.agenda-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--card);
}

.agenda-item span {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--warning);
  font-weight: 900;
}

.related-event-grid {
  grid-template-columns: minmax(0, 1fr);
}

.planting-card-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.planting-card-metrics span {
  min-width: 0;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  border-radius: 12px;
  background: color-mix(in oklab, var(--primary) 7%, white);
  color: var(--primary-strong);
  font-size: 0.68rem;
  font-weight: 800;
}

.planting-card-metrics .fa-icon {
  width: 12px;
  height: 12px;
  font-size: 0.66rem;
}

.planting-card-cta {
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.16), transparent 35%),
    linear-gradient(150deg, transparent 0 62%, rgba(255, 255, 255, 0.09) 62% 63%, transparent 63% 100%),
    var(--gradient-primary);
}

.planting-stack,
.planting-detail-stack {
  gap: 14px;
}

.planting-hero-card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 24px;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.15), transparent 34%),
    linear-gradient(150deg, transparent 0 61%, rgba(255, 255, 255, 0.08) 61% 62%, transparent 62% 100%),
    var(--gradient-primary);
  color: #fff;
}

.planting-hero-card::before {
  content: "\f1bb";
  position: absolute;
  right: -20px;
  bottom: -44px;
  font-family: "Font Awesome 7 Pro";
  font-size: 9.4rem;
  font-weight: 900;
  line-height: 1;
  color: rgba(255, 255, 255, 0.07);
  transform: rotate(-12deg);
  pointer-events: none;
}

.planting-hero-copy,
.planting-hero-stats {
  position: relative;
  z-index: 1;
}

.planting-hero-copy {
  display: grid;
  gap: 7px;
}

.planting-hero-copy > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.72rem;
  font-weight: 800;
}

.planting-hero-copy h1,
.planting-hero-copy p {
  margin: 0;
}

.planting-hero-copy h1 {
  max-width: 24rem;
  color: #fff;
  font-size: 1.2rem;
  line-height: 1.15;
  font-weight: 900;
}

.planting-hero-copy p {
  max-width: 28rem;
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.75rem;
  line-height: 1.46;
  font-weight: 700;
}

.planting-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.planting-hero-stat {
  min-width: 0;
  min-height: 64px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 3px;
  padding: 8px 5px;
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.11);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.11);
  text-align: center;
}

.planting-hero-stat .fa-icon {
  width: 16px;
  height: 16px;
  color: #fff1c7;
  font-size: 0.86rem;
}

.planting-hero-stat strong,
.planting-hero-stat small {
  overflow: hidden;
  max-width: 100%;
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.planting-hero-stat strong {
  color: #fff;
  font-size: 0.86rem;
  line-height: 1.1;
  font-weight: 900;
}

.planting-hero-stat small {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.61rem;
  line-height: 1.2;
  font-weight: 800;
}

.planting-filter-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(217, 232, 223, 0.86);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.82);
}

.planting-filter-form {
  display: grid;
  gap: 10px;
}

.planting-project-grid {
  grid-template-columns: minmax(0, 1fr);
}

.planting-detail-hero {
  overflow: hidden;
  display: grid;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--card);
}

.planting-detail-media {
  position: relative;
  min-height: 210px;
  background: var(--secondary);
}

.planting-detail-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 34%, rgba(7, 42, 27, 0.5));
  pointer-events: none;
}

.planting-detail-media img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
}

.planting-detail-copy {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.planting-detail-progress {
  display: grid;
  gap: 7px;
  padding: 11px;
  border-radius: 16px;
  background: color-mix(in oklab, var(--primary) 7%, white);
}

.planting-detail-progress p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 700;
}

.planting-detail-cta {
  width: 100%;
}

.planting-detail-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.planting-detail-stat {
  min-width: 0;
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 17px;
  background:
    radial-gradient(circle at 90% 12%, rgba(237, 174, 50, 0.13), transparent 30%),
    linear-gradient(135deg, rgba(223, 244, 232, 0.78), rgba(255, 255, 255, 0.96));
}

.planting-detail-stat span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--gradient-primary);
  color: #fff;
}

.planting-detail-stat .fa-icon {
  width: 15px;
  height: 15px;
  font-size: 0.82rem;
}

.planting-detail-stat strong,
.planting-detail-stat small {
  overflow: hidden;
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.planting-detail-stat strong {
  color: var(--foreground);
  font-size: 0.92rem;
  font-weight: 900;
}

.planting-detail-stat small {
  color: var(--muted-foreground);
  font-size: 0.66rem;
  font-weight: 800;
}

.planting-slot-dot {
  width: 100%;
  aspect-ratio: 1;
  display: inline-block;
  border-radius: 999px;
  background: #cfded4;
  box-shadow: inset 0 0 0 1px rgba(15, 79, 49, 0.08);
}

.planting-slot-dot.available {
  background: linear-gradient(135deg, #d4e2d8, #edf4ee);
}

.planting-slot-dot.funded {
  background: linear-gradient(135deg, #f59e0b, #fde68a);
  box-shadow: 0 5px 10px rgba(245, 158, 11, 0.16);
}

.planting-slot-dot.planted {
  background: linear-gradient(135deg, #16a34a, #0d9488);
  box-shadow: 0 5px 10px rgba(22, 163, 74, 0.18);
}

.planting-real-map-panel {
  overflow: hidden;
  position: relative;
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(10, 74, 45, 0.16);
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(240, 249, 244, 0.92)),
    var(--card);
  box-shadow: 0 18px 44px rgba(26, 68, 45, 0.09);
}

.planting-real-map-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(135deg, rgba(12, 112, 72, 0.045) 0 1px, transparent 1px 24px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), transparent 46%);
  pointer-events: none;
}

.planting-real-map-head {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 10px;
}

.planting-map-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.planting-real-map-head strong,
.planting-real-map-head span,
.planting-map-calculation {
  display: block;
}

.planting-real-map-head strong {
  color: var(--foreground);
  font-size: 0.9rem;
  line-height: 1.25;
  font-weight: 900;
}

.planting-real-map-head span {
  margin-top: 3px;
  color: var(--muted-foreground);
  font-size: 0.72rem;
  line-height: 1.42;
  font-weight: 700;
}

.planting-map-calculation {
  margin-top: 7px;
  width: fit-content;
  max-width: 100%;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-strong);
  font-size: 0.65rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1.25;
}

.planting-real-map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.planting-real-map-legend span {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.82);
  color: var(--muted-foreground);
  font-size: 0.65rem;
  font-weight: 800;
  box-shadow: 0 7px 16px rgba(26, 68, 45, 0.05);
}

.planting-legend-tree {
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(135deg, #d4e2d8, #edf4ee);
  color: #6f8175;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.72),
    0 5px 10px rgba(26, 68, 45, 0.06);
}

.planting-legend-tree .fa-icon {
  width: 12px;
  height: 12px;
  font-size: 0.68rem;
}

.planting-legend-tree.funded {
  background: linear-gradient(135deg, #f59e0b, #fde68a);
  color: #7a4d0b;
  box-shadow: 0 6px 12px rgba(245, 158, 11, 0.18);
}

.planting-legend-tree.planted {
  background: linear-gradient(135deg, #16a34a, #0d9488);
  color: #fff;
  box-shadow: 0 6px 12px rgba(22, 163, 74, 0.2);
}

.planting-legend-tree.mine {
  background:
    radial-gradient(circle at 72% 24%, rgba(255, 255, 255, 0.74), transparent 20%),
    linear-gradient(135deg, #facc15, #19c98a);
  color: #0d4f31;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.92),
    0 0 0 4px rgba(250, 204, 21, 0.22),
    0 9px 18px rgba(250, 204, 21, 0.3);
}

.planting-legend-tree.mine .fa-icon {
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.55));
}

.planting-real-map-stage {
  position: relative;
  z-index: 1;
  min-height: 420px;
  overflow: hidden;
  border: 8px solid #073820;
  border-radius: 22px;
  background: #cadfd7;
  box-shadow:
    0 18px 42px rgba(7, 42, 27, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.planting-real-map-stage::before {
  z-index: 399;
  background:
    linear-gradient(180deg, rgba(5, 39, 25, 0.08), transparent 18%, transparent 78%, rgba(5, 39, 25, 0.12)),
    repeating-linear-gradient(120deg, rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 52px);
  opacity: 0.24;
}

.planting-real-map-stage .leaflet-control-zoom {
  overflow: hidden;
  border: 0;
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(7, 42, 27, 0.18);
}

.planting-real-map-stage .leaflet-control-zoom a {
  width: 36px;
  height: 36px;
  border: 0;
  background: rgba(255, 255, 255, 0.92);
  color: #0c4f31;
  font: 850 18px/36px Geist, Inter, sans-serif;
}

.planting-real-map-stage .leaflet-control-attribution {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
  color: var(--muted-foreground);
  font-size: 0.58rem;
  backdrop-filter: blur(10px);
}

.planting-map-loading {
  position: absolute;
  inset: 90px 22px 58px;
  z-index: 2;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(235, 249, 239, 0.9)),
    var(--secondary);
  color: var(--primary-strong);
  text-align: center;
}

.planting-map-loading span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: var(--gradient-primary);
  color: #fff;
}

.planting-map-loading strong {
  font-size: 0.88rem;
}

.planting-map-loading small {
  max-width: 18rem;
  color: var(--muted-foreground);
  font-size: 0.7rem;
  line-height: 1.4;
}

.planting-map-help {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  color: var(--muted-foreground);
  font-size: 0.68rem;
  line-height: 1.35;
  font-weight: 800;
}

.planting-map-help > span {
  min-width: 0;
}

.planting-map-help em {
  padding: 4px 7px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-strong);
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.planting-tree-canvas {
  pointer-events: none;
  opacity: 1;
  transform-origin: 0 0;
  transition:
    opacity 170ms ease,
    filter 170ms ease;
  will-change: transform, opacity;
}

.leaflet-zoom-anim .planting-tree-canvas {
  transition:
    transform 260ms cubic-bezier(0, 0, 0.25, 1),
    opacity 170ms ease,
    filter 170ms ease;
}

.planting-tree-canvas.is-zooming {
  opacity: 0.3;
  filter: saturate(0.82) blur(0.35px);
}

.planting-tree-canvas.is-live-zooming {
  transition:
    opacity 120ms ease,
    filter 120ms ease !important;
}

.planting-tree-sheet {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 62px;
  z-index: 410;
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(244, 250, 247, 0.92));
  box-shadow: 0 20px 48px rgba(7, 42, 27, 0.2);
  backdrop-filter: blur(18px) saturate(1.12);
}

.planting-tree-sheet.is-hidden {
  display: none;
}

.planting-tree-sheet-head {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 8px;
}

.planting-tree-sheet-head strong,
.planting-tree-sheet-head small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.planting-tree-sheet-head strong {
  color: var(--foreground);
  font-size: 0.82rem;
  font-weight: 900;
}

.planting-tree-sheet-head small {
  color: var(--muted-foreground);
  font-size: 0.66rem;
  font-weight: 800;
}

.planting-tree-sheet-close {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(20, 118, 71, 0.12);
  border-radius: 999px;
  background: rgba(241, 248, 244, 0.94);
  color: var(--primary-strong);
}

.planting-tree-owner-badge {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: fit-content;
  max-width: 100%;
  padding: 0 10px;
  border: 1px solid rgba(250, 204, 21, 0.42);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(255, 250, 226, 0.98), rgba(236, 253, 245, 0.92));
  color: #0d4f31;
  font-size: 0.68rem;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(250, 204, 21, 0.14);
}

.planting-tree-owner-badge .fa-icon {
  width: 11px;
  height: 11px;
  color: #0d8f5a;
  font-size: 0.64rem;
}

.planting-tree-sheet-body {
  display: grid;
  gap: 7px;
}

.planting-tree-sheet-body span {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--foreground-soft);
  font-size: 0.7rem;
  font-weight: 800;
}

.planting-tree-sheet-body .fa-icon {
  width: 12px;
  height: 12px;
  color: var(--primary-strong);
  font-size: 0.66rem;
}

.planting-tree-greenid-link {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  padding: 0 14px;
  border: 1px solid rgba(13, 127, 80, 0.2);
  border-radius: 999px;
  background: linear-gradient(135deg, #0f6f49, #15a36d);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 12px 24px rgba(12, 105, 69, 0.2);
}

.planting-tree-greenid-link:hover,
.planting-tree-greenid-link:focus-visible {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 16px 30px rgba(12, 105, 69, 0.25);
}

.planting-tree-greenid-link .fa-icon {
  width: 13px;
  height: 13px;
  color: currentColor;
  font-size: 0.72rem;
}

.planting-detail-info-grid {
  grid-template-columns: minmax(0, 1fr);
}

.planting-sponsor-section {
  scroll-margin-top: 16px;
}

.planting-partner-section {
  scroll-margin-top: 16px;
}

.planting-partner-grid {
  display: grid;
  gap: 10px;
}

.planting-partner-card {
  overflow: hidden;
  position: relative;
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(13, 79, 49, 0.12);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(236, 253, 245, 0.94)),
    var(--card);
  box-shadow: 0 16px 36px rgba(7, 42, 27, 0.08);
}

.planting-partner-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 94% 8%, rgba(250, 204, 21, 0.17), transparent 24%),
    linear-gradient(120deg, rgba(16, 185, 129, 0.08), transparent 48%);
  pointer-events: none;
}

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

.planting-partner-card-head {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
}

.planting-partner-logo {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(13, 79, 49, 0.96), rgba(20, 135, 84, 0.92)),
    var(--primary);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 12px 22px rgba(13, 79, 49, 0.18);
}

.planting-partner-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.planting-partner-logo strong {
  font-size: 0.86rem;
  font-weight: 950;
  letter-spacing: 0;
}

.planting-partner-status {
  width: fit-content;
  max-width: 100%;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
  color: var(--primary-strong);
  font-size: 0.63rem;
  font-weight: 900;
}

.planting-partner-status .fa-icon {
  width: 10px;
  height: 10px;
  color: #d89513;
  font-size: 0.6rem;
}

.planting-partner-card h3 {
  margin: 8px 0 4px;
  color: var(--foreground);
  font-size: 0.98rem;
  line-height: 1.18;
  font-weight: 950;
}

.planting-partner-card p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.72rem;
  line-height: 1.45;
  font-weight: 750;
}

.planting-partner-rule {
  display: grid;
  gap: 6px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 0 0 1px rgba(13, 79, 49, 0.07);
}

.planting-partner-rule span,
.planting-partner-foot span {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 850;
}

.planting-partner-rule strong {
  color: var(--foreground);
  font-size: 0.78rem;
  line-height: 1.35;
  font-weight: 950;
}

.planting-partner-progress {
  display: grid;
  gap: 7px;
}

.planting-partner-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.planting-partner-metrics span {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 9px 8px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.64);
  color: var(--muted-foreground);
  box-shadow: inset 0 0 0 1px rgba(13, 79, 49, 0.06);
}

.planting-partner-metrics .fa-icon {
  width: 13px;
  height: 13px;
  color: var(--primary-strong);
  font-size: 0.72rem;
}

.planting-partner-metrics strong,
.planting-partner-metrics small {
  overflow: hidden;
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.planting-partner-metrics strong {
  color: var(--foreground);
  font-size: 0.86rem;
  font-weight: 950;
}

.planting-partner-metrics small {
  color: var(--muted-foreground);
  font-size: 0.6rem;
  font-weight: 850;
}

.planting-partner-reports,
.planting-partner-report-empty {
  border: 1px solid rgba(13, 79, 49, 0.09);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}

.planting-partner-reports {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.planting-partner-reports-head,
.planting-partner-report-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.planting-partner-reports-head span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--primary-strong);
  font-size: 0.68rem;
  font-weight: 950;
}

.planting-partner-reports-head strong {
  color: var(--muted-foreground);
  font-size: 0.66rem;
  font-weight: 900;
  white-space: nowrap;
}

.planting-partner-report-list {
  display: grid;
  gap: 6px;
}

.planting-partner-report-row {
  min-height: 42px;
  padding: 8px 9px;
  border-radius: 12px;
  background: rgba(236, 253, 245, 0.74);
  color: inherit;
  text-decoration: none;
}

.planting-partner-report-row span {
  min-width: 0;
}

.planting-partner-report-row strong,
.planting-partner-report-row small {
  overflow: hidden;
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.planting-partner-report-row strong {
  color: var(--foreground);
  font-size: 0.72rem;
  font-weight: 950;
}

.planting-partner-report-row small {
  color: var(--muted-foreground);
  font-size: 0.6rem;
  font-weight: 800;
}

.planting-partner-report-row em {
  color: var(--primary-strong);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 950;
  white-space: nowrap;
}

.planting-partner-report-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  color: var(--muted-foreground);
  font-size: 0.67rem;
  font-weight: 850;
}

.planting-partner-report-empty .fa-icon {
  color: var(--primary);
}

.planting-partner-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.planting-partner-foot > span {
  flex: 1 1 180px;
  line-height: 1.35;
}

.planting-partner-link,
.planting-partner-claim-pill {
  min-height: 34px;
  padding-inline: 10px;
  font-size: 0.68rem;
}

.planting-partner-claim-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-strong);
  font-weight: 950;
  white-space: nowrap;
}

.planting-partner-claim-form,
.planting-partner-claim-state {
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid rgba(13, 79, 49, 0.09);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
}

.planting-partner-claim-form label {
  display: grid;
  gap: 6px;
}

.planting-partner-claim-form label > span {
  color: var(--foreground);
  font-size: 0.66rem;
  font-weight: 950;
}

.planting-partner-claim-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
}

.planting-partner-claim-row input {
  min-height: 42px;
  min-width: 0;
  border: 1px solid rgba(13, 79, 49, 0.14);
  border-radius: 13px;
  background: #fff;
  color: var(--foreground);
  font-weight: 850;
}

.planting-partner-claim-row .button {
  min-height: 42px;
  padding-inline: 12px;
  border-radius: 13px;
  font-size: 0.72rem;
  white-space: nowrap;
}

.planting-partner-claim-state {
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 850;
}

.planting-sponsor-form {
  display: grid;
  gap: 12px;
}

.planting-preset-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.planting-total-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 16px;
  background: color-mix(in oklab, var(--primary) 7%, white);
}

.planting-total-card span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 800;
}

.planting-total-card strong {
  color: var(--primary-strong);
  font-size: 0.92rem;
  font-weight: 900;
}

.planting-payment-card {
  display: grid;
  gap: 12px;
}

.my-trees-stack {
  gap: 14px;
}

.my-trees-hero-card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 24px;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.15), transparent 34%),
    linear-gradient(150deg, transparent 0 61%, rgba(255, 255, 255, 0.08) 61% 62%, transparent 62% 100%),
    var(--gradient-primary);
  color: #fff;
}

.my-trees-hero-card::before {
  content: "\f4d8";
  position: absolute;
  right: -20px;
  bottom: -42px;
  font-family: "Font Awesome 7 Pro";
  font-size: 8.8rem;
  font-weight: 900;
  line-height: 1;
  color: rgba(255, 255, 255, 0.07);
  transform: rotate(-12deg);
  pointer-events: none;
}

.my-trees-hero-copy,
.my-trees-hero-stats {
  position: relative;
  z-index: 1;
}

.my-trees-hero-copy {
  display: grid;
  gap: 7px;
}

.my-trees-hero-copy > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.72rem;
  font-weight: 800;
}

.my-trees-hero-copy h1,
.my-trees-hero-copy p {
  margin: 0;
}

.my-trees-hero-copy h1 {
  max-width: 24rem;
  color: #fff;
  font-size: 1.2rem;
  line-height: 1.15;
  font-weight: 900;
}

.my-trees-hero-copy p {
  max-width: 28rem;
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.75rem;
  line-height: 1.46;
  font-weight: 700;
}

.my-trees-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.my-trees-hero-stat {
  min-width: 0;
  min-height: 64px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 3px;
  padding: 8px 5px;
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.11);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.11);
  text-align: center;
}

.my-trees-hero-stat .fa-icon {
  width: 16px;
  height: 16px;
  color: #fff1c7;
  font-size: 0.86rem;
}

.my-trees-hero-stat strong,
.my-trees-hero-stat small {
  overflow: hidden;
  max-width: 100%;
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-trees-hero-stat strong {
  color: #fff;
  font-size: 0.86rem;
  line-height: 1.1;
  font-weight: 900;
}

.my-trees-hero-stat small {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.61rem;
  line-height: 1.2;
  font-weight: 800;
}

.my-tree-batch-list {
  display: grid;
  gap: 10px;
}

.my-tree-batch-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background:
    radial-gradient(circle at 96% 12%, rgba(237, 174, 50, 0.12), transparent 30%),
    linear-gradient(135deg, rgba(223, 244, 232, 0.72), rgba(255, 255, 255, 0.96));
}

.my-contributions-hero-card {
  padding: 20px;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0.18), transparent 32%),
    linear-gradient(150deg, transparent 0 61%, rgba(255, 255, 255, 0.08) 61% 62%, transparent 62% 100%),
    radial-gradient(circle at 90% 10%, rgba(251, 191, 36, 0.25), transparent 25%),
    linear-gradient(145deg, #0f1e36 0%, #124e5c 48%, #0f6b45 100%);
  box-shadow: 0 26px 58px rgba(15, 46, 74, 0.24);
}

.my-contributions-hero-card::before {
  content: "\f4c0";
}

.my-contributions-hero-main {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(104px, 128px);
  align-items: center;
  gap: 14px;
}

.my-contributions-hero-copy h1 {
  max-width: 25rem;
  font-size: 1.32rem;
}

.my-contributions-hero-copy p {
  max-width: 31rem;
}

.my-contributions-rankline {
  display: grid;
  gap: 5px;
  max-width: 28rem;
  margin-top: 2px;
}

.my-contributions-rankline strong,
.my-contributions-rankline small {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.my-contributions-rankline strong {
  width: fit-content;
  min-height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  color: #fff7d6;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.74rem;
  font-weight: 900;
}

.my-contributions-rankline strong .fa-icon {
  color: #fde68a;
}

.my-contributions-rankline small {
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.7rem;
  line-height: 1.4;
  font-weight: 700;
}

.my-contributions-medallion {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 120px;
  display: grid;
  place-items: center;
  justify-self: end;
  align-content: center;
  gap: 2px;
  padding: 16px;
  border-radius: 32px;
  overflow: hidden;
  color: #083121;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(223, 244, 232, 0.92)),
    #fff;
  border: 1px solid rgba(255, 255, 255, 0.56);
  box-shadow:
    inset 0 0 0 1px rgba(20, 118, 71, 0.08),
    0 24px 48px rgba(4, 34, 22, 0.2);
}

.my-contributions-medallion::before {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: -1;
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(15, 143, 93, 0.13), transparent 48%),
    radial-gradient(circle at 72% 18%, rgba(251, 191, 36, 0.24), transparent 34%);
}

.my-contributions-medallion::after {
  content: "";
  position: absolute;
  inset: -40% 30% auto -30%;
  height: 58px;
  transform: rotate(-22deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.76), transparent);
  animation: contributionShine 4.6s ease-in-out infinite;
}

.my-contributions-medallion span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, #0f8f5d, #0b5f42);
  box-shadow: 0 16px 30px rgba(15, 143, 93, 0.22);
}

.my-contributions-medallion strong {
  color: #063b28;
  font-size: 1.8rem;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0;
}

.my-contributions-medallion small {
  color: #436454;
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.my-contributions-ribbon {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
}

.my-contributions-ribbon span {
  min-width: 0;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.72rem;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-contributions-ribbon .fa-icon {
  width: 12px;
  height: 12px;
  color: #fff1c7;
}

.my-contributions-achievement-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.my-achievement-card {
  position: relative;
  min-width: 0;
  min-height: 118px;
  overflow: hidden;
  display: grid;
  align-content: space-between;
  gap: 10px;
  padding: 13px;
  border-radius: 22px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.36);
  box-shadow: 0 18px 38px rgba(20, 63, 45, 0.12);
  isolation: isolate;
}

.my-achievement-card::before,
.my-achievement-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.my-achievement-card::before {
  inset: 0;
  z-index: -2;
  background: linear-gradient(140deg, #0c6b45, #0f8f83);
}

.my-achievement-card::after {
  right: -10px;
  bottom: -18px;
  z-index: -1;
  font-family: "Font Awesome 7 Pro";
  font-size: 5.4rem;
  font-weight: 900;
  line-height: 1;
  color: rgba(255, 255, 255, 0.12);
  transform: rotate(-10deg);
}

.my-achievement-card.tone-forest::after {
  content: "\f4d8";
}

.my-achievement-card.tone-region::before {
  background: linear-gradient(140deg, #075985, #0f8f83);
}

.my-achievement-card.tone-region::after {
  content: "\f5a0";
}

.my-achievement-card.tone-giving::before {
  background: linear-gradient(140deg, #9a5215, #e59b23);
}

.my-achievement-card.tone-giving::after {
  content: "\f4c0";
}

.my-achievement-card.tone-program::before {
  background: linear-gradient(140deg, #165a7a, #5b7f2b);
}

.my-achievement-card.tone-program::after {
  content: "\f890";
}

.my-achievement-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #fff8df;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.my-achievement-card p,
.my-achievement-card strong,
.my-achievement-card small {
  position: relative;
  overflow: hidden;
  display: block;
  max-width: 100%;
  margin: 0;
  text-overflow: ellipsis;
}

.my-achievement-card p {
  color: rgba(255, 255, 255, 0.73);
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
}

.my-achievement-card strong {
  margin-top: 4px;
  color: #fff;
  font-size: 1rem;
  line-height: 1.12;
  font-weight: 900;
  letter-spacing: 0;
}

.my-achievement-card small {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.67rem;
  line-height: 1.32;
  font-weight: 700;
}

.my-contributions-impact-grid {
  display: grid;
  gap: 12px;
}

.my-impact-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  padding: 15px;
  border-radius: 24px;
  border: 1px solid rgba(191, 216, 200, 0.76);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(239, 249, 244, 0.92)),
    #fff;
  box-shadow: 0 18px 42px rgba(20, 63, 45, 0.09);
}

.my-impact-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 94% 8%, rgba(15, 143, 93, 0.12), transparent 32%);
}

.my-impact-card.tone-donations::before {
  background: radial-gradient(circle at 94% 8%, rgba(251, 191, 36, 0.17), transparent 34%);
}

.my-impact-card > * {
  position: relative;
}

.my-impact-card-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, #0f8f5d, #0b5f42);
  box-shadow: 0 18px 34px rgba(15, 143, 93, 0.18);
}

.my-impact-card.tone-donations .my-impact-card-icon {
  background: linear-gradient(135deg, #f59e0b, #dc5f21);
  box-shadow: 0 18px 34px rgba(220, 95, 33, 0.17);
}

.my-impact-card p,
.my-impact-card h2,
.my-impact-card > div:not(.my-impact-card-foot):not(.my-impact-progress) > span,
.my-impact-card em {
  margin: 0;
}

.my-impact-card p {
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.my-impact-card h2 {
  margin-top: 3px;
  color: var(--foreground);
  font-size: 1.16rem;
  line-height: 1.12;
  font-weight: 900;
}

.my-impact-card > div:not(.my-impact-card-foot):not(.my-impact-progress) > span {
  display: block;
  margin-top: 4px;
  color: var(--muted-foreground);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.38;
}

.my-impact-progress {
  grid-column: 1 / -1;
  display: grid;
  gap: 7px;
  padding: 11px;
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(191, 216, 200, 0.68);
}

.my-impact-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted-foreground);
  font-size: 0.7rem;
  font-weight: 800;
}

.my-impact-progress-head strong {
  color: var(--primary-strong);
  font-size: 0.74rem;
  font-weight: 900;
}

.my-impact-progress-track {
  position: relative;
  height: 8px;
  overflow: visible;
  border-radius: 999px;
  background: rgba(20, 118, 71, 0.1);
}

.my-impact-progress-track i {
  position: relative;
  overflow: hidden;
  display: block;
  height: 100%;
  min-width: 10px;
  border-radius: inherit;
  background: linear-gradient(90deg, #0f8f5d, #f2c564, #0f8f83);
  background-size: 190% 100%;
  box-shadow: 0 0 18px rgba(15, 143, 93, 0.24);
}

.my-impact-progress-track i::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-125%);
  background: linear-gradient(90deg, transparent, rgba(255, 231, 138, 0.78), rgba(255, 255, 255, 0.95), transparent);
}

.page.is-mounted .my-impact-progress-track i {
  animation: impact-progress-glow 2.8s ease-in-out infinite;
}

.page.is-mounted .my-impact-progress-track i::after {
  animation: impact-progress-sheen-loop 2.15s ease-in-out infinite;
}

.my-impact-card.tone-donations .my-impact-progress-track i {
  background: linear-gradient(90deg, #dc5f21, #f2c564, #0f8f83);
  background-size: 190% 100%;
}

.impact-progress-leaf {
  position: absolute;
  top: 50%;
  left: calc(var(--impact-progress, 0) * 1%);
  z-index: 2;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--primary-strong);
  background: rgba(255, 255, 255, 0.95);
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.34),
    0 8px 18px rgba(15, 79, 49, 0.18),
    0 0 18px rgba(255, 231, 138, 0.42);
  transform: translate(-50%, -50%) scale(0.9);
  pointer-events: none;
}

.impact-progress-leaf .fa-icon {
  width: 10px;
  height: 10px;
  font-size: 0.62rem;
}

.my-impact-card.tone-donations .impact-progress-leaf {
  color: #9a4f0e;
}

.impact-progress-spark {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 3;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: radial-gradient(circle, #fff 0 30%, #ffe78a 31% 56%, rgba(184, 255, 213, 0.96) 57% 100%);
  box-shadow:
    -9px 0 12px rgba(255, 231, 138, 0.18),
    0 0 10px rgba(255, 255, 255, 0.94),
    0 0 18px rgba(255, 231, 138, 0.78),
    0 0 26px rgba(184, 255, 213, 0.58);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.45);
  pointer-events: none;
}

.my-impact-card.tone-donations .impact-progress-spark {
  background: radial-gradient(circle, #fff 0 30%, #ffd166 31% 56%, rgba(255, 186, 116, 0.96) 57% 100%);
  box-shadow:
    -9px 0 12px rgba(255, 209, 102, 0.2),
    0 0 10px rgba(255, 255, 255, 0.94),
    0 0 18px rgba(255, 209, 102, 0.78),
    0 0 26px rgba(15, 143, 131, 0.38);
}

.page.is-mounted .impact-progress-leaf {
  animation: impact-leaf-pop 780ms var(--ease-spring) 480ms both, impact-leaf-float 2.7s ease-in-out 1.2s infinite;
}

.page.is-mounted .impact-progress-spark {
  animation: impact-spark-run 2.85s ease-in-out infinite;
}

.page.is-mounted .impact-progress-spark.spark-one {
  animation-delay: 0.55s;
}

.page.is-mounted .impact-progress-spark.spark-two {
  width: 6px;
  height: 6px;
  animation-delay: 1.45s;
}

.page.is-mounted .impact-progress-spark.spark-three {
  width: 5px;
  height: 5px;
  animation-delay: 2.12s;
}

@keyframes impact-progress-sheen-loop {
  0% {
    transform: translateX(-125%);
  }
  54%,
  100% {
    transform: translateX(125%);
  }
}

@keyframes impact-progress-glow {
  0%,
  100% {
    background-position: 0% 0;
  }
  50% {
    background-position: 100% 0;
  }
}

@keyframes impact-spark-run {
  0% {
    left: 0%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.42);
  }
  12%,
  72% {
    opacity: 0.94;
  }
  86%,
  100% {
    left: calc(var(--impact-progress, 0) * 1%);
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes impact-leaf-pop {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.62);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.9);
  }
}

@keyframes impact-leaf-float {
  0%, 100% {
    transform: translate(-50%, -50%) scale(0.9);
  }
  50% {
    transform: translate(-50%, -58%) scale(1.02);
  }
}

.my-impact-card-foot {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 11px;
  border-top: 1px solid rgba(191, 216, 200, 0.72);
}

.my-impact-card-foot em {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 800;
}

.my-impact-card-foot a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--primary-strong);
  font-size: 0.74rem;
  font-weight: 900;
}

@keyframes contributionShine {
  0%, 68%, 100% {
    transform: translateX(-40%) rotate(-22deg);
    opacity: 0;
  }
  78% {
    opacity: 0.9;
  }
  88% {
    transform: translateX(210%) rotate(-22deg);
    opacity: 0;
  }
}

@media (max-width: 360px) {
  .my-contributions-hero-main {
    grid-template-columns: 1fr;
  }

  .my-contributions-medallion {
    width: min(140px, 52vw);
    justify-self: start;
  }
}

.my-contributions-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 5px;
  border: 1px solid rgba(217, 232, 223, 0.9);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.72);
}

.my-contributions-tab {
  min-width: 0;
  min-height: 50px;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 800;
}

.my-contributions-tab .fa-icon {
  width: 14px;
  height: 14px;
  font-size: 0.74rem;
}

.my-contributions-tab span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-contributions-tab strong {
  min-width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(20, 118, 71, 0.08);
  color: var(--primary-strong);
  font-size: 0.66rem;
}

.my-contributions-tab.is-active {
  background: linear-gradient(135deg, #0f6b45, #155e75);
  color: #fff;
  box-shadow: 0 8px 18px rgba(16, 94, 117, 0.16);
}

.my-contributions-tab.is-active strong {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.my-contributions-actions {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.my-contributions-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 12px;
}

.contribution-share-button {
  min-height: 40px;
  padding: 0 14px;
  border-color: rgba(255, 255, 255, 0.34);
  color: #0d3b2a;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(223, 244, 232, 0.94));
  box-shadow: 0 16px 34px rgba(4, 34, 22, 0.18);
}

.contribution-share-button .fa-icon {
  color: #0f8f5d;
}

.achievement-share-modal {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: none;
  align-items: center;
  justify-items: center;
  padding: max(16px, env(safe-area-inset-top)) 12px max(16px, env(safe-area-inset-bottom));
}

.achievement-share-modal.is-open {
  display: grid;
}

.achievement-share-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(3, 22, 16, 0.62);
  backdrop-filter: blur(12px);
}

.achievement-share-sheet {
  position: relative;
  width: min(100%, 470px);
  max-height: min(88dvh, 780px);
  overflow: auto;
  display: grid;
  gap: 12px;
  padding: 15px;
  border-radius: 26px;
  border: 1px solid rgba(219, 255, 235, 0.62);
  background:
    linear-gradient(180deg, rgba(247, 255, 250, 0.98), rgba(235, 249, 241, 0.96)),
    #fff;
  box-shadow: 0 30px 88px rgba(5, 34, 22, 0.34);
}

.achievement-share-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(15, 118, 110, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.84);
  color: var(--foreground);
}

.achievement-share-head {
  display: grid;
  gap: 7px;
  padding-right: 40px;
}

.achievement-share-head span,
.achievement-share-public-copy > span,
.achievement-share-public-cta span {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--primary-strong);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.achievement-share-head h2 {
  margin: 0;
  color: var(--foreground);
  font-size: 1.22rem;
  line-height: 1.12;
  font-weight: 900;
}

.achievement-share-head p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.78rem;
  line-height: 1.44;
  font-weight: 700;
}

.achievement-share-types {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 5px;
  border-radius: 17px;
  background: rgba(15, 118, 110, 0.07);
  border: 1px solid rgba(15, 118, 110, 0.1);
}

.achievement-share-type {
  min-width: 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 900;
}

.achievement-share-type.is-active {
  color: #fff;
  background: linear-gradient(135deg, #0f6b45, #155e75);
  box-shadow: 0 12px 26px rgba(15, 107, 69, 0.16);
}

.achievement-share-preview {
  min-height: 230px;
}

.achievement-share-card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 14px;
  padding: 15px;
  border-radius: 23px;
  color: #fff;
  background:
    linear-gradient(125deg, rgba(255, 255, 255, 0.16), transparent 31%),
    radial-gradient(circle at 92% 10%, rgba(251, 191, 36, 0.22), transparent 25%),
    linear-gradient(145deg, #0f1e36, #124e5c 52%, #0f6b45);
  box-shadow: 0 22px 54px rgba(15, 46, 74, 0.2);
}

.achievement-share-card::after {
  content: "\f890";
  position: absolute;
  right: -8px;
  bottom: -22px;
  font-family: "Font Awesome 7 Pro";
  font-size: 6rem;
  font-weight: 900;
  line-height: 1;
  color: rgba(255, 255, 255, 0.09);
}

.achievement-share-card.tone-trees::after {
  content: "\f4d8";
}

.achievement-share-card.tone-donations::after {
  content: "\f4c0";
}

.achievement-share-card-head,
.achievement-share-card-body,
.achievement-share-metrics,
.achievement-share-highlights {
  position: relative;
  z-index: 1;
}

.achievement-share-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.achievement-share-avatar {
  overflow: hidden;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #063b28;
  background: rgba(255, 255, 255, 0.94);
  font-size: 0.86rem;
  font-weight: 900;
}

.achievement-share-avatar img,
.achievement-share-public-member > strong img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.achievement-share-card-head strong,
.achievement-share-card-head small {
  display: block;
}

.achievement-share-card-head strong {
  color: #fff;
  font-size: 0.88rem;
  font-weight: 900;
}

.achievement-share-card-head small {
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.7rem;
  font-weight: 800;
}

.achievement-share-card-body {
  display: grid;
  gap: 8px;
}

.achievement-share-main-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #fff8df;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.achievement-share-card-body h3,
.achievement-share-card-body p {
  margin: 0;
}

.achievement-share-card-body h3 {
  color: #fff;
  font-size: 1.12rem;
  line-height: 1.16;
  font-weight: 900;
}

.achievement-share-card-body p {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.78rem;
  line-height: 1.44;
  font-weight: 700;
}

.achievement-share-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.achievement-share-metric {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.achievement-share-metric .fa-icon {
  color: #fff1c7;
}

.achievement-share-metric strong {
  color: #fff;
  font-size: 0.98rem;
  line-height: 1.08;
  font-weight: 900;
}

.achievement-share-metric small {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.66rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.achievement-share-highlights {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.achievement-share-highlights li {
  display: flex;
  gap: 7px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.72rem;
  line-height: 1.38;
  font-weight: 700;
}

.achievement-share-result {
  display: grid;
  gap: 8px;
  padding: 11px;
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(15, 118, 110, 0.1);
}

.achievement-share-result label {
  display: grid;
  gap: 6px;
}

.achievement-share-result label span,
.achievement-share-result a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--primary-strong);
  font-size: 0.73rem;
  font-weight: 900;
}

.achievement-share-result input {
  width: 100%;
  min-height: 42px;
  padding: 0 11px;
  border: 1px solid rgba(15, 118, 110, 0.14);
  border-radius: 13px;
  background: #fff;
  color: var(--foreground);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
}

.achievement-share-result small {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 800;
}

.achievement-share-history-panel {
  display: grid;
  gap: 9px;
  padding: 11px;
  border-radius: 17px;
  background: rgba(15, 118, 110, 0.055);
  border: 1px solid rgba(15, 118, 110, 0.1);
}

.achievement-share-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.achievement-share-history-head strong,
.achievement-share-history-head small {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.achievement-share-history-head strong {
  color: var(--foreground);
  font-size: 0.78rem;
  font-weight: 900;
}

.achievement-share-history-head small {
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 800;
  white-space: nowrap;
}

.achievement-share-history-list {
  display: grid;
  gap: 7px;
}

.achievement-share-history-item {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 9px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(15, 118, 110, 0.1);
}

.achievement-share-history-item.is-revoked {
  opacity: 0.72;
}

.achievement-share-history-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(135deg, #0f6b45, #155e75);
}

.achievement-share-history-item.is-revoked .achievement-share-history-icon {
  color: #0f3c3a;
  background: rgba(15, 118, 110, 0.12);
}

.achievement-share-history-item div {
  min-width: 0;
}

.achievement-share-history-item strong,
.achievement-share-history-item small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.achievement-share-history-item strong {
  color: var(--foreground);
  font-size: 0.76rem;
  font-weight: 900;
}

.achievement-share-history-item small {
  margin-top: 2px;
  color: var(--muted-foreground);
  font-size: 0.66rem;
  font-weight: 800;
}

.achievement-share-history-item em {
  padding: 5px 8px;
  border-radius: 999px;
  color: #0f5132;
  background: rgba(16, 185, 129, 0.12);
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.achievement-share-history-item.is-revoked em {
  color: #64748b;
  background: rgba(100, 116, 139, 0.12);
}

.achievement-share-history-actions {
  grid-column: 2 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 7px;
}

.achievement-share-history-actions a,
.achievement-share-history-actions button {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  border: 0;
  border-radius: 11px;
  background: rgba(15, 118, 110, 0.1);
  color: var(--primary-strong);
  font-size: 0.67rem;
  font-weight: 900;
  text-decoration: none;
}

.achievement-share-history-actions button {
  color: #b42318;
  background: rgba(244, 63, 94, 0.1);
}

.achievement-share-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

@media (min-width: 560px) {
  .achievement-share-actions {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }
}

.achievement-share-public {
  display: grid;
  gap: 14px;
}

.achievement-share-public-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 18px;
  padding: 20px;
  border-radius: 26px;
  color: #fff;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0.18), transparent 32%),
    radial-gradient(circle at 90% 8%, rgba(251, 191, 36, 0.22), transparent 25%),
    linear-gradient(145deg, #0f1e36 0%, #124e5c 48%, #0f6b45 100%);
  box-shadow: 0 26px 58px rgba(15, 46, 74, 0.22);
}

.achievement-share-public-hero::after {
  content: "\f890";
  position: absolute;
  right: -12px;
  bottom: -28px;
  font-family: "Font Awesome 7 Pro";
  font-size: 8rem;
  font-weight: 900;
  line-height: 1;
  color: rgba(255, 255, 255, 0.08);
}

.achievement-share-public-hero.tone-trees::after {
  content: "\f4d8";
}

.achievement-share-public-hero.tone-donations::after {
  content: "\f4c0";
}

.achievement-share-public-copy,
.achievement-share-public-avatar-wrap,
.achievement-share-public-medal {
  position: relative;
  z-index: 1;
}

.achievement-share-public-avatar-wrap {
  display: grid;
  justify-items: start;
  gap: 9px;
}

.achievement-share-public-avatar {
  overflow: hidden;
  width: 104px;
  height: 104px;
  display: grid;
  place-items: center;
  border-radius: 30px;
  color: #073823;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(225, 247, 235, 0.94));
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 22px 46px rgba(4, 34, 22, 0.24);
  font-size: 1.5rem;
  font-weight: 950;
}

.achievement-share-public-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.achievement-share-public-avatar-wrap small {
  display: inline-flex;
  max-width: 180px;
  padding: 7px 10px;
  border-radius: 999px;
  color: #fff7dc;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.72rem;
  font-weight: 900;
}

.achievement-share-public-copy {
  display: grid;
  gap: 11px;
}

.achievement-share-public-copy > span,
.achievement-share-public-cta span {
  color: #fff1c7;
}

.achievement-share-public-copy h1 {
  max-width: 44rem;
  margin: 0;
  color: #fff;
  font-size: 1.66rem;
  line-height: 1.04;
  font-weight: 900;
}

.achievement-share-public-copy p {
  max-width: 34rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.82rem;
  line-height: 1.5;
  font-weight: 700;
}

.achievement-share-public-proofline {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  width: fit-content;
  max-width: 100%;
  padding: 9px 11px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.11);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.achievement-share-public-proofline strong,
.achievement-share-public-proofline small {
  color: inherit;
  font-size: 0.72rem;
  line-height: 1.2;
  font-weight: 900;
}

.achievement-share-public-proofline strong {
  color: #fff4c8;
}

.achievement-share-public-member {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  padding: 9px 11px 9px 9px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.achievement-share-public-member > strong {
  overflow: hidden;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #063b28;
  background: rgba(255, 255, 255, 0.94);
  font-size: 0.78rem;
  font-weight: 900;
}

.achievement-share-public-member span,
.achievement-share-public-member small {
  display: block;
}

.achievement-share-public-member span {
  color: #fff;
  font-size: 0.84rem;
  font-weight: 900;
}

.achievement-share-public-member small {
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.68rem;
  font-weight: 800;
}

.achievement-share-public-medal {
  width: min(168px, 54vw);
  min-height: 150px;
  display: grid;
  place-items: center;
  justify-self: start;
  align-content: center;
  gap: 8px;
  padding: 16px;
  border-radius: 30px;
  color: #063b28;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(223, 244, 232, 0.92));
  box-shadow: 0 24px 48px rgba(4, 34, 22, 0.18);
}

.achievement-share-public-medal .fa-icon {
  color: #0f8f5d;
  font-size: 2.15rem;
}

.achievement-share-public-medal strong {
  color: #063b28;
  font-size: 0.82rem;
  line-height: 1.22;
  font-weight: 900;
  text-align: center;
}

.achievement-share-public-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.achievement-share-public-metric {
  position: relative;
  overflow: hidden;
  min-height: 118px;
  display: grid;
  align-content: space-between;
  gap: 8px;
  padding: 13px;
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(140deg, #0c6b45, #0f8f83);
  box-shadow: 0 18px 38px rgba(20, 63, 45, 0.12);
}

.achievement-share-public-metric.tone-giving {
  background: linear-gradient(140deg, #9a5215, #e59b23);
}

.achievement-share-public-metric.tone-region {
  background: linear-gradient(140deg, #075985, #0f8f83);
}

.achievement-share-public-metric.tone-credits {
  background: linear-gradient(140deg, #165a7a, #5b7f2b);
}

.achievement-share-public-metric span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #fff8df;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.achievement-share-public-metric strong,
.achievement-share-public-metric small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.achievement-share-public-metric strong {
  color: #fff;
  font-size: 1.04rem;
  line-height: 1.12;
  font-weight: 900;
}

.achievement-share-public-metric small {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.7rem;
  font-weight: 800;
  white-space: nowrap;
}

.achievement-share-public-panel,
.achievement-share-public-cta {
  padding: 14px;
  border-radius: 22px;
  border: 1px solid rgba(191, 216, 200, 0.76);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(239, 249, 244, 0.92)),
    #fff;
  box-shadow: 0 18px 42px rgba(20, 63, 45, 0.08);
}

.achievement-share-public-highlights {
  display: grid;
  gap: 8px;
}

.achievement-share-public-highlights p {
  margin: 0;
  display: flex;
  gap: 8px;
  color: var(--muted-foreground);
  font-size: 0.78rem;
  line-height: 1.44;
  font-weight: 800;
}

.achievement-share-public-data-panel {
  display: grid;
  gap: 12px;
}

.achievement-share-public-table-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.achievement-share-public-table-head span {
  flex: 0 0 auto;
  padding: 8px 10px;
  border-radius: 999px;
  color: #0c5f43;
  background: rgba(20, 184, 166, 0.1);
  border: 1px solid rgba(15, 118, 110, 0.12);
  font-size: 0.72rem;
  font-weight: 950;
}

.achievement-share-public-table-wrap {
  overflow-x: auto;
  border-radius: 16px;
  border: 1px solid rgba(15, 118, 110, 0.1);
  background: rgba(255, 255, 255, 0.76);
}

.achievement-share-public-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
}

.achievement-share-public-table th,
.achievement-share-public-table td {
  padding: 11px 12px;
  border-bottom: 1px solid rgba(15, 118, 110, 0.08);
  text-align: left;
  vertical-align: middle;
}

.achievement-share-public-table th {
  color: #416154;
  background: rgba(240, 253, 244, 0.86);
  font-size: 0.68rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0;
}

.achievement-share-public-table tr:last-child td {
  border-bottom: 0;
}

.achievement-share-public-table td {
  color: #17382b;
  font-size: 0.78rem;
  font-weight: 850;
}

.achievement-share-public-table td strong,
.achievement-share-public-table td small,
.achievement-share-public-table td a {
  display: block;
  color: inherit;
}

.achievement-share-public-table td small {
  margin-top: 3px;
  color: #6b8076;
  font-size: 0.68rem;
  font-weight: 800;
}

.achievement-share-public-status {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 6px 9px;
  border-radius: 999px;
  color: #0f6b45;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.16);
  font-size: 0.68rem;
  line-height: 1.15;
  font-weight: 950;
  white-space: nowrap;
}

.achievement-share-public-status.giving {
  color: #8a4b0f;
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.18);
}

.achievement-share-public-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.achievement-share-public-row-actions a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 9px;
  border-radius: 999px;
  color: #0f6b45;
  background: rgba(15, 118, 110, 0.08);
  border: 1px solid rgba(15, 118, 110, 0.12);
  font-size: 0.68rem;
  font-weight: 950;
  text-decoration: none;
  white-space: nowrap;
}

.achievement-share-public-cta {
  display: grid;
  gap: 12px;
  color: #fff;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0.12), transparent 32%),
    linear-gradient(145deg, #10362f, #0f6b45);
  border-color: rgba(255, 255, 255, 0.16);
}

.achievement-share-public-cta p {
  margin: 6px 0 0;
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.78rem;
  line-height: 1.44;
  font-weight: 700;
}

.achievement-share-public-cta .button {
  width: 100%;
  color: #0d3b2a;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(223, 244, 232, 0.94));
  box-shadow: none;
}

.achievement-share-public-foot {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.72rem;
  line-height: 1.4;
  font-weight: 800;
  text-align: center;
}

@media (min-width: 760px) {
  .achievement-share-public-hero {
    grid-template-columns: 132px minmax(0, 1fr) 190px;
    align-items: center;
  }

  .achievement-share-public-avatar {
    width: 132px;
    height: 132px;
    border-radius: 36px;
    font-size: 1.85rem;
  }

  .achievement-share-public-copy h1 {
    font-size: 2.35rem;
  }

  .achievement-share-public-medal {
    justify-self: end;
  }

  .achievement-share-public-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .achievement-share-public-cta {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .achievement-share-public-cta .button {
    width: auto;
  }
}

.my-tree-filter-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  padding: 10px;
  border: 1px solid rgba(15, 118, 110, 0.1);
  border-radius: 18px;
  background:
    radial-gradient(circle at 96% 0%, rgba(20, 184, 166, 0.12), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(240, 253, 244, 0.78));
}

.my-tree-search-field,
.my-tree-filter-select {
  min-width: 0;
  display: grid;
  align-items: center;
  border: 1px solid rgba(15, 118, 110, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
}

.my-tree-search-field {
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  color: #0f766e;
}

.my-tree-search-field input,
.my-tree-filter-select select {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--foreground);
  background: transparent;
  font: inherit;
  font-weight: 800;
}

.my-tree-search-field input::placeholder {
  color: rgba(71, 85, 105, 0.58);
}

.my-tree-filter-select {
  grid-template-columns: minmax(82px, 0.38fr) minmax(0, 1fr);
  min-height: 44px;
  overflow: hidden;
}

.my-tree-filter-select span {
  height: 100%;
  display: grid;
  place-items: center start;
  padding: 0 10px;
  color: rgba(15, 23, 42, 0.58);
  background: rgba(15, 118, 110, 0.06);
  font-size: 0.72rem;
  font-weight: 900;
}

.my-tree-filter-select select {
  min-height: 44px;
  padding: 0 10px;
  font-size: 0.8rem;
}

.my-tree-filter-panel > p {
  margin: 0;
  color: rgba(15, 23, 42, 0.62);
  font-size: 0.75rem;
  font-weight: 800;
}

@media (min-width: 768px) {
  .my-tree-filter-panel {
    grid-template-columns: minmax(240px, 1fr) minmax(148px, 0.34fr) minmax(148px, 0.34fr) auto auto;
    align-items: center;
  }

  .my-tree-filter-panel > p {
    grid-column: 1 / -1;
  }
}

@media (min-width: 768px) {
  .my-contribution-filter-panel {
    grid-template-columns: minmax(260px, 1fr) minmax(150px, 0.28fr) minmax(150px, 0.28fr) auto auto;
  }
}

.my-contribution-load-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 4px 0 2px;
}

.my-contribution-load-more span {
  color: rgba(31, 62, 50, 0.68);
  font-size: 0.85rem;
  font-weight: 800;
}

.my-contribution-card {
  position: relative;
  align-items: start;
  grid-template-columns: 42px minmax(0, 1fr);
  overflow: hidden;
}

.my-contribution-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, #0f8f5d, #f59e0b);
}

.my-contribution-card.is-donations {
  background:
    radial-gradient(circle at 96% 12%, rgba(251, 191, 36, 0.13), transparent 30%),
    linear-gradient(135deg, rgba(236, 248, 244, 0.78), rgba(255, 255, 255, 0.96));
}

.my-contribution-card.is-trees .my-contribution-icon {
  background: linear-gradient(135deg, #0f8f5d, #0b5f42);
}

.my-contribution-card.is-donations .my-contribution-icon {
  background: linear-gradient(135deg, #edae32, #c56f17);
}

.my-contribution-card.is-pending .my-contribution-icon {
  background: linear-gradient(135deg, #f59e0b, #ea580c);
}

.my-contribution-card.is-closed .my-contribution-icon {
  background: linear-gradient(135deg, #94a3b8, #64748b);
}

:is(
  .my-contribution-card.is-trees .my-contribution-icon,
  .my-achievement-card.tone-forest .my-achievement-icon,
  .planting-legend-tree.planted,
  .planting-legend-tree.mine,
  .tree-slot-status-dot.planted
) {
  position: relative;
  overflow: hidden;
}

:is(
  .my-contribution-card.is-trees .my-contribution-icon,
  .my-achievement-card.tone-forest .my-achievement-icon,
  .planting-legend-tree.planted,
  .planting-legend-tree.mine,
  .tree-slot-status-dot.planted
)::after {
  content: "";
  position: absolute;
  inset: -44%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.96) 0 6%, rgba(255, 235, 153, 0.58) 7% 12%, transparent 18%);
  opacity: 0;
  transform: translate(-34%, 30%) scale(0.55);
  pointer-events: none;
}

:is(
  .my-contribution-card.is-trees .my-contribution-icon,
  .my-achievement-card.tone-forest .my-achievement-icon,
  .planting-legend-tree.planted,
  .planting-legend-tree.mine,
  .tree-slot-status-dot.planted
) .fa-icon {
  position: relative;
  z-index: 1;
  transform-origin: center bottom;
}

.page.is-mounted :is(
  .my-contribution-card.is-trees.is-paid .my-contribution-icon .fa-icon,
  .my-achievement-card.tone-forest .my-achievement-icon .fa-icon,
  .planting-legend-tree.planted .fa-icon,
  .planting-legend-tree.mine .fa-icon,
  .tree-slot-status-dot.planted .fa-icon
) {
  animation: tree-icon-lift 2.8s ease-in-out infinite;
}

.page.is-mounted :is(
  .my-contribution-card.is-trees .my-contribution-icon,
  .my-achievement-card.tone-forest .my-achievement-icon,
  .planting-legend-tree.planted,
  .planting-legend-tree.mine,
  .tree-slot-status-dot.planted
)::after {
  animation: tree-icon-spark 3.4s ease-in-out infinite;
}

@keyframes tree-icon-lift {
  0%, 100% {
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0));
  }
  42% {
    transform: translateY(-1px) scale(1.08);
    filter: drop-shadow(0 4px 8px rgba(190, 255, 218, 0.42));
  }
  64% {
    transform: translateY(0) scale(0.98);
  }
}

@keyframes tree-icon-spark {
  0%, 52%, 100% {
    opacity: 0;
    transform: translate(-34%, 30%) scale(0.55);
  }
  62% {
    opacity: 0.88;
    transform: translate(18%, -18%) scale(0.96);
  }
  72% {
    opacity: 0;
    transform: translate(46%, -42%) scale(0.62);
  }
}

.my-contribution-card.is-pending::before {
  background: linear-gradient(180deg, #f59e0b, #f97316);
}

.my-contribution-card.is-closed::before {
  background: linear-gradient(180deg, #94a3b8, #64748b);
}

.my-contribution-card > * {
  position: relative;
}

.my-contribution-main {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.my-contribution-title-row {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.my-contribution-title-row strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-contribution-title-row .payment-status-pill {
  flex: 0 0 auto;
}

.my-contribution-main small,
.my-contribution-main em {
  overflow: hidden;
  display: block;
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-contribution-main em .fa-icon {
  width: 11px;
  height: 11px;
  color: var(--primary);
}

.my-contribution-score {
  grid-column: 2;
  justify-self: start;
  text-align: left;
}

.my-contribution-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-left: 52px;
}

.my-contribution-actions .button-secondary,
.my-contribution-actions .button-ghost {
  min-width: 98px;
  min-height: 34px;
  flex: 1 1 auto;
  color: var(--primary-strong);
}

.my-contribution-actions .button-ghost {
  background: rgba(255, 255, 255, 0.72);
  border-color: var(--border);
  box-shadow: none;
}

.my-contribution-actions .button-ghost.danger {
  color: #991b1b;
  border-color: rgba(248, 113, 113, 0.32);
  background: rgba(254, 242, 242, 0.82);
}

.my-tree-batch-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: var(--gradient-primary);
  color: #fff;
}

.my-tree-batch-card strong,
.my-tree-batch-card small {
  overflow: hidden;
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-tree-batch-card strong {
  color: var(--foreground);
  font-size: 0.82rem;
  line-height: 1.25;
  font-weight: 900;
}

.my-tree-batch-card small {
  margin-top: 2px;
  color: var(--muted-foreground);
  font-size: 0.66rem;
  font-weight: 700;
}

.my-tree-batch-score {
  justify-self: end;
  text-align: right;
}

.my-contribution-card .my-contribution-main small,
.my-contribution-card .my-contribution-main em {
  margin-top: 0;
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.35;
}

.my-contribution-card .my-contribution-score {
  grid-column: 2;
  justify-self: start;
  text-align: left;
}

.campaign-detail-stack {
  gap: 14px;
}

.campaign-detail-hero {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--card);
}

.campaign-detail-media {
  position: relative;
  min-height: 210px;
  background: var(--secondary);
}

.campaign-detail-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 36%, rgba(7, 42, 27, 0.48));
  pointer-events: none;
}

.campaign-detail-media img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
}

.campaign-detail-copy {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.campaign-detail-progress {
  display: grid;
  gap: 7px;
  padding: 11px;
  border-radius: 16px;
  background: color-mix(in oklab, var(--primary) 7%, white);
}

.campaign-detail-progress p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 700;
}

.campaign-detail-hero-cta {
  width: 100%;
}

.campaign-detail-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.campaign-detail-stat {
  min-width: 0;
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 17px;
  background:
    radial-gradient(circle at 90% 12%, rgba(237, 174, 50, 0.14), transparent 30%),
    linear-gradient(135deg, rgba(223, 244, 232, 0.76), rgba(255, 255, 255, 0.96));
}

.campaign-detail-stat span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--gradient-primary);
  color: #fff;
}

.campaign-detail-stat .fa-icon {
  width: 15px;
  height: 15px;
  font-size: 0.82rem;
}

.campaign-detail-stat strong,
.campaign-detail-stat small {
  overflow: hidden;
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-detail-stat strong {
  color: var(--foreground);
  font-size: 0.92rem;
  font-weight: 900;
}

.campaign-detail-stat small {
  color: var(--muted-foreground);
  font-size: 0.66rem;
  font-weight: 800;
}

.campaign-detail-main-grid {
  grid-template-columns: minmax(0, 1fr);
}

.campaign-manager-article {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--card);
}

.campaign-manager-article-media {
  min-height: 190px;
  background: var(--secondary);
}

.campaign-manager-article-media img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
}

.campaign-manager-article-body {
  display: grid;
  gap: 12px;
  padding: 15px;
}

.campaign-manager-article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.campaign-manager-article-meta span {
  min-height: 25px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-strong);
  font-size: 0.66rem;
  font-weight: 800;
}

.campaign-manager-article-meta .fa-icon {
  width: 11px;
  height: 11px;
  font-size: 0.64rem;
}

.campaign-manager-article h2,
.campaign-manager-article h3,
.campaign-manager-article p {
  margin: 0;
}

.campaign-manager-article h2 {
  color: var(--foreground);
  font-size: 1rem;
  line-height: 1.25;
  font-weight: 900;
}

.campaign-manager-article-body > p {
  color: var(--foreground-soft);
  font-size: 0.78rem;
  line-height: 1.5;
  font-weight: 700;
}

.campaign-manager-sections {
  display: grid;
  gap: 10px;
}

.campaign-manager-sections section {
  display: grid;
  gap: 5px;
  padding: 10px;
  border-radius: 16px;
  background: color-mix(in oklab, var(--primary) 5%, white);
}

.campaign-manager-sections h3 {
  color: var(--foreground);
  font-size: 0.82rem;
  line-height: 1.25;
  font-weight: 900;
}

.campaign-manager-sections p {
  color: var(--muted-foreground);
  font-size: 0.74rem;
  line-height: 1.5;
}

.campaign-detail-panel,
.campaign-detail-form-panel {
  min-width: 0;
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--card);
}

.donation-account-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(20, 118, 71, 0.14);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(236, 253, 245, 0.96), rgba(255, 255, 255, 0.96)),
    var(--card);
}

.donation-account-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--gradient-primary);
  color: #fff;
}

.donation-account-icon .fa-icon {
  width: 15px;
  height: 15px;
  font-size: 0.8rem;
}

.donation-account-card div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.donation-account-card small,
.donation-account-card em {
  overflow: hidden;
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-style: normal;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.donation-account-card strong {
  overflow: hidden;
  color: var(--foreground);
  font-size: 0.82rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.donation-account-link {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 10px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-strong);
  font-size: 0.68rem;
  font-weight: 900;
  white-space: nowrap;
}

.campaign-detail-panel p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.78rem;
  line-height: 1.5;
}

.campaign-detail-list {
  display: grid;
  gap: 8px;
}

.campaign-detail-list span {
  min-width: 0;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 14px;
  background: color-mix(in oklab, var(--primary) 5%, white);
}

.campaign-detail-list span > .fa-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--primary-soft);
  color: var(--primary-strong);
  font-size: 0.76rem;
}

.campaign-detail-list em {
  color: var(--foreground-soft);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1.35;
}

.campaign-amount-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.campaign-amount-button {
  min-width: 0;
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--secondary);
  color: var(--foreground);
  font-size: 0.72rem;
  font-weight: 900;
}

.campaign-amount-button.is-active {
  border-color: transparent;
  background: var(--gradient-primary);
  color: #fff;
  box-shadow: 0 10px 22px rgba(13, 117, 78, 0.18);
}

.campaign-related-grid {
  grid-template-columns: minmax(0, 1fr);
}

.premium-panel {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.18);
  min-height: 220px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.premium-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, rgba(7, 42, 27, 0.2));
  pointer-events: none;
}

.premium-panel img {
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
  opacity: 0.88;
}

.premium-panel-caption {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--foreground);
  backdrop-filter: blur(12px);
  z-index: 1;
  box-shadow: var(--shadow-tight);
}

.premium-panel-caption strong {
  font-size: 1.05rem;
}

.profile-plate {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.profile-avatar {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: var(--gradient-primary);
  color: #fff;
  font-size: 1.15rem;
  font-weight: 900;
  box-shadow: var(--glow-green);
}

.profile-plate .metric-value {
  font-size: 1.05rem;
  line-height: 1.18;
}

.quick-action-card {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(234, 247, 237, 0.88), rgba(255, 241, 199, 0.46)),
    var(--card);
}

.quick-action-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, var(--primary), var(--accent));
}

.quick-action-card h3,
.quick-action-card p {
  position: relative;
}

.qr-card {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  padding: 12px;
  border-radius: 20px;
  border: 1px solid rgba(191, 216, 200, 0.68);
  background: linear-gradient(135deg, var(--secondary), #fff, var(--accent-soft));
  box-shadow: var(--shadow-tight);
}

.fake-qr {
  width: 116px;
  height: 116px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 12px;
  border-radius: 18px;
  background:
    linear-gradient(90deg, var(--foreground) 8px, transparent 8px) 0 0 / 18px 18px,
    linear-gradient(var(--foreground) 8px, transparent 8px) 0 0 / 18px 18px,
    #fff;
  border: 8px solid #fff;
  box-shadow: inset 0 0 0 1px var(--border), 0 14px 26px rgba(21, 51, 38, 0.12);
}

.qr-image {
  width: 116px;
  height: 116px;
  display: block;
  object-fit: contain;
  border-radius: 18px;
  background: #fff;
  border: 8px solid #fff;
  box-shadow: inset 0 0 0 1px var(--border), 0 14px 26px rgba(21, 51, 38, 0.12);
}

.fake-qr span {
  border: 7px solid var(--foreground);
  border-radius: 6px;
  background: #fff;
}

body.has-modal-open {
  overflow: hidden;
}

.event-attendance-modal {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: grid;
  align-items: end;
  justify-items: center;
  padding: 12px;
}

.event-attendance-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 20, 14, 0.58);
  backdrop-filter: blur(10px);
}

.event-attendance-sheet {
  position: relative;
  width: min(100%, 430px);
  max-height: min(92dvh, 760px);
  overflow: auto;
  padding: 16px;
  border-radius: 26px 26px 18px 18px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background:
    linear-gradient(180deg, rgba(248, 255, 249, 0.98), rgba(236, 247, 239, 0.96)),
    var(--card);
  box-shadow: 0 30px 80px rgba(5, 34, 22, 0.34);
}

.event-attendance-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(23, 107, 58, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--foreground);
}

.event-attendance-head {
  padding-right: 34px;
}

.event-attendance-head > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(23, 107, 58, 0.1);
  color: var(--primary-strong);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.event-attendance-head h2 {
  margin: 10px 0 5px;
  color: var(--foreground);
  font-size: 1.15rem;
  line-height: 1.16;
}

.event-attendance-head p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.78rem;
  line-height: 1.45;
  font-weight: 700;
}

.event-attendance-body {
  margin-top: 14px;
}

.event-attendance-qr-card {
  display: grid;
  gap: 12px;
}

.event-attendance-event {
  display: grid;
  gap: 3px;
  padding: 12px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(9, 84, 57, 0.1), rgba(255, 255, 255, 0.72));
}

.event-attendance-event strong {
  color: var(--foreground);
  font-size: 0.9rem;
  line-height: 1.25;
}

.event-attendance-event span {
  color: var(--muted-foreground);
  font-size: 0.73rem;
  font-weight: 800;
}

.event-attendance-qr-frame {
  position: relative;
  width: min(100%, 300px);
  margin-inline: auto;
  display: grid;
  place-items: center;
  padding: 12px;
  border-radius: 24px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(23, 107, 58, 0.12), 0 18px 42px rgba(7, 45, 30, 0.16);
  overflow: hidden;
}

.event-attendance-qr-frame img {
  width: 100%;
  aspect-ratio: 1;
  display: block;
  object-fit: contain;
}

.event-attendance-scan-line {
  position: absolute;
  inset: 14px;
  border-radius: 18px;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0 42%, rgba(54, 211, 153, 0.36) 48%, transparent 54% 100%);
  animation: attendanceScanLine 2.4s linear infinite;
}

.event-attendance-code,
.event-attendance-countdown {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(23, 107, 58, 0.12);
}

.event-attendance-code span,
.event-attendance-countdown span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 800;
}

.event-attendance-code strong {
  color: var(--primary-strong);
  font-size: 1.3rem;
  letter-spacing: 0.08em;
}

.event-attendance-countdown strong {
  color: var(--accent-strong);
  font-size: 1rem;
}

.event-attendance-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.event-attendance-info-grid span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px;
  border-radius: 14px;
  background: rgba(23, 107, 58, 0.08);
}

.event-attendance-info-grid strong {
  color: var(--muted-foreground);
  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
}

.event-attendance-info-grid small {
  overflow: hidden;
  color: var(--foreground);
  font-size: 0.72rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event-attendance-raw {
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px dashed rgba(23, 107, 58, 0.22);
  background: rgba(255, 255, 255, 0.58);
}

.event-attendance-raw summary {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--primary-strong);
  font-size: 0.72rem;
  font-weight: 900;
}

.event-attendance-raw textarea {
  width: 100%;
  margin-top: 8px;
  resize: vertical;
  border: 0;
  background: transparent;
  color: var(--foreground-soft);
  font-size: 0.68rem;
}

.event-attendance-done {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 24px 16px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(23, 107, 58, 0.12), rgba(255, 255, 255, 0.76));
  text-align: center;
}

.event-attendance-done > span {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: var(--gradient-primary);
  color: #fff;
  font-size: 1.2rem;
}

.event-attendance-done strong {
  color: var(--foreground);
  font-size: 0.95rem;
}

.event-attendance-done small {
  color: var(--muted-foreground);
  font-size: 0.75rem;
  font-weight: 800;
}

.event-checkin-page {
  display: grid;
  min-height: min(76dvh, 680px);
  align-items: center;
}

.event-checkin-flow {
  display: grid;
  justify-items: center;
}

.event-checkin-flow .loading-state,
.event-checkin-flow .error-state {
  width: min(100%, 560px);
  padding: 24px 18px;
  border-radius: 26px;
  border: 1px solid rgba(23, 107, 58, 0.14);
  background:
    radial-gradient(circle at 16% 8%, rgba(253, 224, 71, 0.16), transparent 30%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(234, 249, 240, 0.9));
  box-shadow: 0 24px 58px rgba(4, 40, 27, 0.16);
}

.event-checkin-result {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 12px;
  overflow: hidden;
  padding: 24px 18px;
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background:
    radial-gradient(circle at 16% 8%, rgba(253, 224, 71, 0.22), transparent 30%),
    linear-gradient(135deg, #063527, #0f766e 58%, #16a34a);
  color: #fff;
  text-align: center;
  box-shadow: 0 24px 58px rgba(4, 40, 27, 0.24);
}

.event-checkin-result.is-error {
  background:
    radial-gradient(circle at 16% 8%, rgba(254, 202, 202, 0.2), transparent 30%),
    linear-gradient(135deg, #3b0a12, #9f1239 56%, #ef4444);
}

.event-checkin-result > span {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.event-checkin-result h1 {
  max-width: 560px;
  margin: 0;
  color: #fff;
  font-size: clamp(1.28rem, 4vw, 2rem);
  line-height: 1.12;
}

.event-checkin-result p {
  max-width: 560px;
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.84rem;
  line-height: 1.5;
  font-weight: 750;
}

.event-checkin-summary {
  width: min(100%, 520px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.event-checkin-summary span {
  display: grid;
  gap: 3px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.12);
}

.event-checkin-summary strong {
  color: #fff;
  font-size: 0.86rem;
  line-height: 1.16;
}

.event-checkin-summary small {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.66rem;
  font-weight: 800;
}

.event-checkin-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

html[data-route-page="eventCheckInDisplay"] {
  overflow: hidden;
  scrollbar-gutter: auto;
  background: #02150f;
}

body[data-route-page="eventCheckInDisplay"] {
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  background: #02150f;
}

body[data-route-page="eventCheckInDisplay"] #app,
body[data-route-page="eventCheckInDisplay"] .app-shell,
body[data-route-page="eventCheckInDisplay"] .app-frame,
body[data-route-page="eventCheckInDisplay"] .app-main {
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
}

body[data-route-page="eventCheckInDisplay"] .app-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) !important;
  background: #02150f;
}

body[data-route-page="eventCheckInDisplay"] .app-shell::before,
body[data-route-page="eventCheckInDisplay"] .app-shell::after,
body[data-route-page="eventCheckInDisplay"] .app-sidebar,
body[data-route-page="eventCheckInDisplay"] .topbar,
body[data-route-page="eventCheckInDisplay"] .bottom-nav {
  display: none !important;
}

body[data-route-page="eventCheckInDisplay"] .app-frame {
  grid-column: 1 !important;
  grid-template-rows: minmax(0, 1fr);
}

body[data-route-page="eventCheckInDisplay"] .app-main {
  padding: 0 !important;
}

body[data-route-page="eventCheckInDisplay"] .event-checkin-display-page {
  width: 100vw !important;
  max-width: none !important;
  min-height: 100dvh !important;
  height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  animation: none !important;
}

.event-checkin-display-page,
.staff-qr-display,
.staff-qr-display > div {
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
}

@keyframes attendanceScanLine {
  0% {
    transform: translateY(-45%);
    opacity: 0;
  }
  14%, 86% {
    opacity: 1;
  }
  100% {
    transform: translateY(45%);
    opacity: 0;
  }
}

@keyframes displayProgressSheen {
  from {
    transform: translateX(-110%);
  }
  to {
    transform: translateX(110%);
  }
}

.staff-qr-display {
  position: relative;
  display: block;
  isolation: isolate;
  color: #f7fff8;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 42%, rgba(32, 201, 151, 0.18), transparent 28%),
    radial-gradient(circle at 13% 12%, rgba(180, 255, 215, 0.1), transparent 24%),
    linear-gradient(112deg, #02120d 0%, #042216 44%, #063f2c 100%);
}

.staff-qr-display::before,
.staff-qr-display::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.staff-qr-display > div {
  position: relative;
  z-index: 1;
}

.staff-qr-display::before {
  inset: 0;
  width: auto;
  min-width: 0;
  aspect-ratio: auto;
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 90px 90px;
  opacity: 0.16;
  filter: none;
  mask-image: linear-gradient(115deg, transparent 0%, #000 18%, #000 76%, transparent 100%);
}

.staff-qr-display::after {
  right: auto;
  bottom: auto;
  inset: 0;
  width: auto;
  min-width: 0;
  aspect-ratio: auto;
  border-radius: 0;
  background:
    radial-gradient(ellipse at 71% 58%, rgba(250, 204, 21, 0.14), transparent 18%),
    radial-gradient(ellipse at 48% 92%, rgba(34, 197, 94, 0.16), transparent 30%);
  opacity: 0.9;
  filter: blur(8px);
}

.checkin-kiosk {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  color: #f7fff8;
}

.checkin-kiosk::before {
  content: "";
  position: absolute;
  inset: 8% 47% auto auto;
  z-index: -1;
  width: min(42vw, 620px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56, 189, 150, 0.26), transparent 62%);
  filter: blur(7px);
  opacity: 0.88;
}

.checkin-kiosk::after {
  content: "";
  position: absolute;
  right: 3vw;
  bottom: -17vh;
  z-index: -1;
  width: min(58vw, 760px);
  height: 28vh;
  border-radius: 999px;
  background: rgba(232, 196, 84, 0.1);
  filter: blur(28px);
}

.checkin-kiosk-top {
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 2vw, 28px);
  padding: clamp(18px, 2.4vw, 32px) clamp(22px, 2.8vw, 44px) 0;
}

.checkin-kiosk-brand,
.checkin-kiosk-live-pill {
  min-width: 0;
  display: inline-flex;
  align-items: center;
}

.checkin-kiosk-brand {
  gap: 14px;
}

.checkin-kiosk-brand > span {
  width: clamp(48px, 4.8vw, 66px);
  height: clamp(48px, 4.8vw, 66px);
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 38%),
    linear-gradient(145deg, #34d399, #0f766e);
  color: #fff;
  box-shadow: none;
  font-weight: 950;
  letter-spacing: 0;
}

.checkin-kiosk-brand strong {
  display: block;
  color: #fff;
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 1.05;
}

.checkin-kiosk-brand small,
.checkin-kiosk-live-pill small {
  display: block;
  color: rgba(220, 252, 231, 0.66);
  font-size: clamp(0.66rem, 0.9vw, 0.8rem);
  font-weight: 850;
}

.checkin-kiosk-live-pill {
  gap: 10px;
  padding: clamp(8px, 1vw, 12px) 0 clamp(8px, 1vw, 12px) clamp(13px, 1.5vw, 18px);
  border: 0;
  border-left: 2px solid rgba(134, 239, 172, 0.65);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.checkin-kiosk-live-pill > span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #86efac;
  box-shadow: 0 0 0 7px rgba(134, 239, 172, 0.12);
}

.checkin-kiosk-live-pill strong {
  display: block;
  color: #dcfce7;
  font-size: clamp(0.72rem, 0.95vw, 0.86rem);
  line-height: 1.05;
}

.checkin-kiosk-stage {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(330px, 0.92fr) minmax(420px, 1.03fr) minmax(160px, 0.34fr);
  gap: clamp(18px, 2.2vw, 34px);
  align-items: stretch;
  padding: clamp(16px, 2.2vw, 28px) clamp(22px, 2.8vw, 44px) clamp(20px, 2.6vw, 36px);
}

.checkin-kiosk-event {
  min-width: 0;
  min-height: 0;
  align-self: stretch;
  display: grid;
  align-content: stretch;
  gap: clamp(12px, 1.5vw, 18px);
  padding: clamp(18px, 2.4vw, 34px) clamp(20px, 2.7vw, 38px);
  border: 0;
  border-left: 3px solid rgba(156, 245, 190, 0.72);
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.025) 72%, transparent),
    rgba(8, 44, 31, 0.36);
  box-shadow: none;
  backdrop-filter: none;
}

.checkin-kiosk-event-head {
  min-height: 0;
}

.checkin-kiosk-event-head p {
  margin: 0 0 12px;
  color: #9cf5be;
  font-size: clamp(0.66rem, 0.88vw, 0.78rem);
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.checkin-kiosk-event-head h1 {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: #fff;
  font-size: clamp(2.05rem, 4.25vw, 5.15rem);
  line-height: 0.98;
  letter-spacing: 0;
  text-wrap: balance;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.checkin-kiosk-event-meta {
  display: grid;
  gap: 8px;
}

.checkin-kiosk-event-meta span {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: rgba(240, 253, 244, 0.76);
  font-size: clamp(0.75rem, 1vw, 0.92rem);
  font-weight: 850;
}

.checkin-kiosk-event-meta .fa-icon {
  color: #bbf7d0;
}

.checkin-kiosk-progress,
.checkin-kiosk-mode {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.checkin-kiosk-progress {
  display: grid;
  gap: 12px;
  align-self: end;
  padding: clamp(14px, 1.6vw, 20px) 0 0;
  border-top: 1px solid rgba(240, 253, 244, 0.16);
}

.checkin-kiosk-progress strong {
  color: #fff;
  font-size: clamp(1rem, 1.35vw, 1.22rem);
}

.checkin-kiosk-progress small,
.checkin-kiosk-mode small {
  color: rgba(240, 253, 244, 0.66);
  font-size: clamp(0.62rem, 0.82vw, 0.76rem);
  font-weight: 800;
}

.checkin-kiosk-progress > span {
  overflow: hidden;
  height: clamp(10px, 1.15vw, 14px);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.12);
}

.checkin-kiosk-progress i {
  position: relative;
  display: block;
  width: var(--attendance-progress, 0%);
  height: 100%;
  border-radius: 0;
  background: linear-gradient(90deg, #34d399, #2dd4bf, #facc15);
}

.checkin-kiosk-progress i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.76), transparent);
  animation: displayProgressSheen 2.6s linear infinite;
}

.checkin-kiosk-mode {
  display: grid;
  grid-template-columns: clamp(38px, 3.4vw, 48px) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: clamp(14px, 1.6vw, 18px) 0 0;
  border-top: 1px solid rgba(240, 253, 244, 0.14);
}

.checkin-kiosk-mode > span {
  width: clamp(38px, 3.4vw, 48px);
  height: clamp(38px, 3.4vw, 48px);
  display: grid;
  place-items: center;
  border-radius: 0;
  background: rgba(52, 211, 153, 0.14);
  color: #fde68a;
}

.checkin-kiosk-mode strong {
  display: block;
  color: #fff;
  font-size: clamp(0.88rem, 1.12vw, 1.02rem);
}

.checkin-kiosk-qr-zone {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  place-items: center;
  align-content: center;
  gap: clamp(10px, 1.4vw, 16px);
}

.checkin-kiosk-qr-title {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 5px;
  text-align: center;
}

.checkin-kiosk-qr-title strong {
  color: #fffbe9;
  font-size: clamp(1.8rem, 4vw, 4.8rem);
  line-height: 0.92;
  font-weight: 950;
  letter-spacing: 0;
  text-shadow: 0 22px 60px rgba(0, 0, 0, 0.3);
}

.checkin-kiosk-qr-title small {
  color: rgba(240, 253, 244, 0.72);
  font-size: clamp(0.68rem, 0.96vw, 0.86rem);
  font-weight: 900;
}

.checkin-kiosk-qr-title small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 2px 0 5px;
  border: 0;
  border-bottom: 1px solid rgba(187, 247, 208, 0.24);
  border-radius: 0;
  background: transparent;
  color: rgba(240, 253, 244, 0.78);
  box-shadow: none;
}

.checkin-kiosk-qr-orbit {
  --qr-progress: 360deg;
  position: relative;
  width: min(66dvh, 43vw, 680px);
  max-width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  margin-top: clamp(14px, 1.7dvh, 22px);
  z-index: 1;
}

.checkin-kiosk-qr-orbit::before {
  content: "";
  position: absolute;
  inset: -2.5%;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.055);
  box-shadow:
    0 0 0 1px rgba(187, 247, 208, 0.14),
    0 30px 80px rgba(0, 0, 0, 0.26),
    0 0 80px rgba(34, 197, 94, 0.15);
}

.checkin-kiosk-qr-ring {
  position: absolute;
  inset: -3.4%;
  z-index: 0;
  border-radius: 0;
  background:
    conic-gradient(from -90deg, #facc15 var(--qr-progress), rgba(255, 255, 255, 0.16) 0);
  padding: 2px;
  pointer-events: none;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.checkin-kiosk-qr-card {
  position: relative;
  z-index: 1;
  width: 92%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  margin: 0;
  padding: clamp(18px, 2.2vw, 32px);
  border-radius: 0;
  background: #fbfffb;
  box-shadow:
    inset 0 0 0 1px rgba(6, 78, 59, 0.05),
    0 18px 42px rgba(0, 0, 0, 0.16);
}

.checkin-kiosk-qr-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.checkin-kiosk-stats {
  min-width: 0;
  min-height: 0;
  display: grid;
  gap: clamp(10px, 1.2vw, 14px);
  align-content: center;
}

.checkin-kiosk-stat {
  min-width: 0;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 6px;
  min-height: clamp(96px, 15dvh, 150px);
  padding: clamp(10px, 1.3vw, 18px);
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035)),
    linear-gradient(90deg, rgba(250, 204, 21, 0.11), transparent 70%);
  box-shadow: inset 0 2px 0 rgba(250, 204, 21, 0.38);
  backdrop-filter: none;
}

.checkin-kiosk-stat > span {
  color: #fde68a;
  font-size: clamp(1rem, 1.45vw, 1.32rem);
}

.checkin-kiosk-stat strong {
  color: #fff;
  font-size: clamp(1.7rem, 3vw, 3.25rem);
  line-height: 0.92;
}

.checkin-kiosk-stat small {
  color: rgba(240, 253, 244, 0.66);
  font-size: clamp(0.6rem, 0.82vw, 0.76rem);
  font-weight: 900;
  text-align: center;
}

.checkin-kiosk-waiting,
.checkin-kiosk-state {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 12px;
  min-height: 100%;
  color: #f7fff8;
  text-align: center;
}

.checkin-kiosk-state {
  width: 100%;
  height: 100dvh;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 35%, rgba(52, 211, 153, 0.2), transparent 34%),
    linear-gradient(132deg, #02120d, #063f2c);
}

.checkin-kiosk-waiting > span,
.checkin-kiosk-state > span {
  width: clamp(62px, 8dvh, 86px);
  height: clamp(62px, 8dvh, 86px);
  display: grid;
  place-items: center;
  border: 1px solid rgba(187, 247, 208, 0.2);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.1);
  color: #fde68a;
  font-size: clamp(1.4rem, 3vw, 2rem);
}

.checkin-kiosk-waiting strong,
.checkin-kiosk-state strong {
  color: #fff;
  font-size: clamp(1.2rem, 2.2vw, 2rem);
}

.checkin-kiosk-waiting small,
.checkin-kiosk-state p {
  max-width: 48ch;
  margin: 0;
  color: rgba(240, 253, 244, 0.72);
  font-weight: 750;
  line-height: 1.45;
}

.checkin-kiosk-retry {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  border: 1px solid rgba(187, 247, 208, 0.28);
  border-radius: 999px;
  background: #dcfce7;
  color: #064e3b;
  font-weight: 900;
}

@media (max-width: 980px) {
  .checkin-kiosk-stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 10px;
    padding: 10px;
  }

  .checkin-kiosk-event {
    order: 2;
    gap: 8px;
    padding: 14px;
    border-radius: 0;
  }

  .checkin-kiosk-event-head h1 {
    font-size: clamp(1.35rem, 7vw, 2.4rem);
    -webkit-line-clamp: 2;
  }

  .checkin-kiosk-event-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .checkin-kiosk-progress,
  .checkin-kiosk-mode {
    display: none;
  }

  .checkin-kiosk-qr-zone {
    order: 1;
    gap: 8px;
  }

  .checkin-kiosk-qr-title strong {
    font-size: clamp(1.25rem, 7vw, 2rem);
  }

  .checkin-kiosk-qr-orbit {
    width: min(45dvh, 78vw, 390px);
  }

  .checkin-kiosk-stats {
    order: 3;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  .checkin-kiosk-stat {
    min-height: 64px;
    gap: 3px;
    padding: 7px 4px;
    border-radius: 0;
  }

  .checkin-kiosk-stat strong {
    font-size: clamp(1rem, 5vw, 1.45rem);
  }

  .checkin-kiosk-stat small {
    font-size: 0.52rem;
  }
}

@media (max-width: 640px) {
  .checkin-kiosk-top {
    padding: 10px 10px 0;
  }

  .checkin-kiosk-brand > span {
    width: 42px;
    height: 42px;
    border-radius: 9px;
  }

  .checkin-kiosk-brand small {
    display: none;
  }

  .checkin-kiosk-live-pill {
    padding: 8px 10px;
  }

  .checkin-kiosk-live-pill small {
    display: none;
  }

  .checkin-kiosk-event-meta {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) and (max-height: 700px) {
  .checkin-kiosk-top {
    padding-top: 8px;
  }

  .checkin-kiosk-brand {
    gap: 10px;
  }

  .checkin-kiosk-brand > span {
    width: 40px;
    height: 40px;
  }

  .checkin-kiosk-brand strong {
    font-size: 0.94rem;
  }

  .checkin-kiosk-stage {
    grid-template-rows: auto auto auto;
    gap: 8px;
    padding: 8px 10px 10px;
  }

  .checkin-kiosk-qr-title {
    gap: 2px;
  }

  .checkin-kiosk-qr-title strong {
    font-size: clamp(1.38rem, 7vw, 1.72rem);
  }

  .checkin-kiosk-qr-title small {
    font-size: 0.6rem;
  }

  .checkin-kiosk-qr-orbit {
    width: min(39dvh, 78vw, 292px);
    margin-top: 6px;
  }

  .checkin-kiosk-qr-card {
    padding: 13px;
    border-radius: 0;
  }

  .checkin-kiosk-event {
    gap: 4px;
    padding: 10px 14px;
    border-radius: 0;
  }

  .checkin-kiosk-event-head p {
    margin-bottom: 5px;
    font-size: 0.58rem;
  }

  .checkin-kiosk-event-head h1 {
    font-size: clamp(1.08rem, 6.2vw, 1.48rem);
    line-height: 1.02;
    -webkit-line-clamp: 2;
  }

  .checkin-kiosk-event-meta {
    display: none;
  }

  .checkin-kiosk-stats {
    gap: 5px;
  }

  .checkin-kiosk-stat {
    min-height: 58px;
    padding: 6px 3px;
  }
}

@media (max-height: 720px) and (min-width: 981px) {
  .checkin-kiosk-top {
    padding-top: 12px;
  }

  .checkin-kiosk-stage {
    padding-block: 12px;
  }

  .checkin-kiosk-event {
    padding: 18px;
  }

  .checkin-kiosk-event-head h1 {
    font-size: clamp(1.7rem, 3.4vw, 3.7rem);
  }

  .checkin-kiosk-mode {
    display: none;
  }

  .checkin-kiosk-stat {
    min-height: 84px;
  }

  .checkin-kiosk-qr-orbit {
    width: min(58dvh, 39vw, 520px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .checkin-kiosk-progress i::after {
    animation: none;
  }
}

.copy-line {
  margin-top: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 9px 10px;
  border: 1px dashed rgba(23, 107, 58, 0.38);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--primary-strong);
  font-size: 0.78rem;
  font-weight: 800;
}

.planting-checkout-view {
  --checkout-dark: #0d3c2b;
  --checkout-ink: #062418;
  --checkout-gold: #ffd166;
}

.donation-checkout-view {
  --checkout-dark: #16325f;
  --checkout-ink: #101b33;
  --checkout-gold: #fbbf24;
}

.planting-checkout-hero {
  position: relative;
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 24px;
  overflow: hidden;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 32%),
    radial-gradient(circle at 88% 18%, rgba(255, 214, 102, 0.24), transparent 28%),
    linear-gradient(145deg, #0a3d2c 0%, #12683f 58%, #0b4f35 100%);
  box-shadow: 0 22px 46px rgba(13, 76, 49, 0.24);
}

.donation-checkout-hero {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.15), transparent 30%),
    radial-gradient(circle at 88% 16%, rgba(255, 209, 102, 0.26), transparent 28%),
    radial-gradient(circle at 8% 92%, rgba(79, 209, 197, 0.18), transparent 26%),
    linear-gradient(145deg, #0f2c4f 0%, #126a60 58%, #0b4f35 100%);
}

.planting-checkout-hero .back-pill {
  position: static;
  width: fit-content;
  margin: -8px 0 0 -8px;
  color: #0f4f34;
  background: rgba(255, 255, 255, 0.92);
}

.planting-checkout-hero .eyebrow,
.planting-checkout-hero .page-title,
.planting-checkout-hero .page-copy,
.planting-checkout-hero .split-line {
  color: #fff;
}

.planting-checkout-hero .page-title {
  font-size: 1.05rem;
  line-height: 1.25;
}

.planting-checkout-progress {
  padding: 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.planting-payment-lock {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 14px;
  border-radius: 22px;
  border: 1px solid rgba(244, 183, 64, 0.42);
  background:
    linear-gradient(135deg, rgba(255, 250, 230, 0.98), rgba(255, 255, 255, 0.94)),
    #fff;
  box-shadow: 0 14px 34px rgba(92, 70, 19, 0.1);
}

.planting-payment-lock > span:first-child {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #8a5300;
  background: linear-gradient(135deg, #ffe8a3, #ffbf47);
}

.planting-payment-lock p {
  margin: 4px 0 0;
  color: #4b3520;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.45;
}

.planting-payment-lock p b {
  color: #8a4b00;
  font-weight: 900;
}

.planting-payment-lock .button-secondary {
  grid-column: 1 / -1;
}

.planting-checkout-layout {
  display: grid;
  gap: 14px;
}

.planting-checkout-main,
.planting-checkout-side {
  display: grid;
  gap: 14px;
  align-content: start;
}

.planting-checkout-section {
  margin: 0;
}

.planting-checkout-form {
  display: grid;
  gap: 14px;
}

.planting-checkout-total {
  margin-top: 0;
}

.state-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  font-weight: 800;
  font-size: 0.84rem;
}

.state-inline.warning {
  color: #7a4b00;
  background: rgba(255, 229, 166, 0.64);
}

.planting-payment-panel {
  position: relative;
  display: grid;
  gap: 18px;
  padding: 6px;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(157, 219, 185, 0.34);
  color: #fff;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.13), transparent 30%),
    radial-gradient(circle at 92% 6%, rgba(255, 209, 102, 0.22), transparent 24%),
    linear-gradient(145deg, #062418 0%, #0a3c2a 54%, #0f6b45 100%);
  box-shadow: 0 26px 60px rgba(6, 45, 28, 0.3);
}

.donation-payment-panel {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.13), transparent 30%),
    radial-gradient(circle at 92% 6%, rgba(251, 191, 36, 0.22), transparent 24%),
    linear-gradient(145deg, #0f1e36 0%, #124e5c 50%, #0f6b45 100%);
}

.donation-payment-panel.is-paid-receipt {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 34%),
    radial-gradient(circle at 88% 8%, rgba(251, 191, 36, 0.2), transparent 24%),
    linear-gradient(145deg, #10213a 0%, #12655c 58%, #12905f 100%);
}

.planting-payment-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 34px 34px;
  opacity: 0.34;
}

.planting-payment-panel > * {
  position: relative;
}

.planting-payment-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.planting-payment-panel h2 {
  margin: 8px 0 4px;
  font-size: 1rem;
  line-height: 1.2;
  color: #fff;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.planting-payment-panel p {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255, 255, 255, 0.84);
  font-size: 0.78rem;
  font-weight: 800;
}

.planting-payment-panel p strong {
  color: var(--checkout-gold);
  font-weight: 900;
}

.payment-status-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 900;
  color: #064e3b;
  background: rgba(218, 255, 233, 0.94);
}

.payment-status-pill.pending {
  color: #5a3600;
  background: linear-gradient(135deg, #fff1bd, #ffd166);
}

.payment-status-pill.paid,
.payment-status-pill.manually_verified {
  color: #064e3b;
  background: rgba(174, 239, 204, 0.92);
}

.payment-status-pill.cancelled,
.payment-status-pill.expired,
.payment-status-pill.failed {
  color: #7f1d1d;
  background: rgba(254, 226, 226, 0.92);
}

.payment-countdown {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border-radius: 999px;
  color: #083121;
  background: linear-gradient(135deg, #fff6d6, #ffd166);
  font-size: 0.78rem;
  font-weight: 900;
  box-shadow: 0 18px 34px rgba(255, 209, 102, 0.18);
}

.payment-countdown.is-expired {
  color: #fff;
  background: linear-gradient(135deg, #8a1f1f, #dc2626);
}

.payment-qr-stage {
  display: grid;
  gap: 16px;
}

.payment-qr-box {
  position: relative;
  display: grid;
  place-items: center;
  padding: 4px;
  border-radius: 26px;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(235, 250, 241, 0.98)),
    #fff;
  border: 1px solid rgba(255, 255, 255, 0.62);
  box-shadow:
    inset 0 0 0 1px rgba(18, 89, 56, 0.08),
    0 24px 48px rgba(0, 0, 0, 0.22);
}

.payment-qr-box .qr-image.qr-image-large,
.payment-qr-box .fake-qr.qr-image-large {
  width: min(100%, 300px);
  height: auto;
  aspect-ratio: 1;
  border-radius: 26px;
  border-width: 8px;
  object-fit: contain;
  transition: filter var(--motion-medium) ease, opacity var(--motion-medium) ease;
  box-shadow: 0 18px 38px rgba(4, 34, 22, 0.18);
}

.payment-qr-box.is-expired .qr-image-large {
  opacity: 0.28;
  filter: grayscale(1) contrast(0.72) brightness(0.9);
}

.payment-qr-expired-overlay {
  position: absolute;
  inset: 4px;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 14px;
  border-radius: 24px;
  color: #fff;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(127, 29, 29, 0.72), rgba(6, 36, 24, 0.68));
  backdrop-filter: blur(2px);
  transition: opacity var(--motion-medium) ease;
}

.payment-qr-box.is-expired .payment-qr-expired-overlay {
  opacity: 1;
}

.payment-qr-expired-overlay span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  color: #fff;
  background: rgba(127, 29, 29, 0.92);
  box-shadow: 0 18px 34px rgba(6, 24, 16, 0.24);
  font-size: 0.82rem;
  font-weight: 900;
}

.payment-transfer-card {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 16px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 18px 38px rgba(4, 34, 22, 0.14);
}

.planting-payment-panel.is-qr-expired .payment-transfer-card {
  display: none;
}

.payment-transfer-card span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #176b3a;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.payment-transfer-card strong {
  color: var(--checkout-ink);
  font-size: 0.92rem;
  font-weight: 900;
}

.payment-transfer-card p {
  margin: -2px 0 2px;
  color: #375b47;
  font-weight: 800;
}

.payment-transfer-card .copy-line {
  margin-top: 0;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  color: #063b28;
  background: linear-gradient(135deg, #f4fff8, #fffdf4);
  border-color: rgba(23, 107, 58, 0.34);
  font-size: 0.78rem;
  line-height: 1.35;
}

.planting-payment-panel.is-paid-receipt {
  padding: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 34%),
    radial-gradient(circle at 88% 8%, rgba(255, 209, 102, 0.2), transparent 24%),
    linear-gradient(145deg, #063321 0%, #0a5136 62%, #128154 100%);
}

.payment-success-hero {
  display: flex;
  align-items: center;
  gap: 14px;
}

.payment-success-icon {
  width: 54px;
  height: 54px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 18px;
  color: #063321;
  background: linear-gradient(135deg, #ecfff2, #a7f3d0);
  box-shadow: 0 18px 36px rgba(6, 36, 24, 0.22);
}

.payment-success-icon .fa-icon {
  width: 22px;
  height: 22px;
}

.payment-receipt-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.payment-receipt-grid > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 13px;
  border-radius: 18px;
  color: #073522;
  background: rgba(255, 255, 255, 0.93);
  border: 1px solid rgba(255, 255, 255, 0.48);
}

.payment-receipt-grid small {
  color: #47705c;
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.payment-receipt-grid strong {
  color: #073522;
  font-size: 0.9rem;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.payment-success-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 12px 14px;
  border-radius: 18px;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.82rem;
  font-weight: 800;
}

.payment-celebration {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  overflow: hidden;
  contain: layout paint;
}

.payment-celebration-piece {
  position: absolute;
  top: -24px;
  left: var(--x);
  width: var(--size);
  height: calc(var(--size) * 1.55);
  border-radius: 72% 18% 68% 24%;
  opacity: 0;
  background: linear-gradient(135deg, #a7f3d0 0%, #22c55e 62%, #0f7a4a 100%);
  transform: translate3d(0, -24px, 0) rotate(0deg);
  animation: paymentCelebrationFall var(--duration) cubic-bezier(0.17, 0.74, 0.32, 1) var(--delay) forwards;
  box-shadow: 0 6px 16px rgba(15, 79, 52, 0.18);
}

.payment-celebration--donation .payment-celebration-piece {
  background: linear-gradient(135deg, #fde68a 0%, #fb923c 58%, #ef4444 100%);
  box-shadow: 0 6px 16px rgba(180, 83, 9, 0.18);
}

.payment-celebration-piece.piece-1 {
  border-radius: 999px 999px 18px 999px;
  background: linear-gradient(135deg, #fff7ad 0%, #facc15 54%, #16a34a 100%);
}

.payment-celebration-piece.piece-2 {
  height: var(--size);
  border-radius: 999px;
  background: linear-gradient(135deg, #ecfeff 0%, #22d3ee 46%, #14b8a6 100%);
}

.payment-celebration-piece.piece-3 {
  width: calc(var(--size) * 1.4);
  height: calc(var(--size) * 0.62);
  border-radius: 999px 18px 999px 18px;
  background: linear-gradient(135deg, #fef3c7 0%, #f59e0b 56%, #84cc16 100%);
}

.payment-celebration-burst {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.8);
  transform: translate(-50%, -50%) scale(0.4);
  animation: paymentCelebrationBurst 780ms ease-out forwards;
  box-shadow:
    0 0 0 0 rgba(167, 243, 208, 0.46),
    0 0 44px rgba(255, 255, 255, 0.36);
}

@keyframes paymentCelebrationFall {
  0% {
    opacity: 0;
    transform: translate3d(0, -24px, 0) rotate(0deg) scale(0.82);
  }
  12% {
    opacity: 1;
  }
  78% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--drift), 108vh, 0) rotate(var(--spin)) scale(1);
  }
}

@keyframes paymentCelebrationBurst {
  0% {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(0.35);
    box-shadow:
      0 0 0 0 rgba(167, 243, 208, 0.48),
      0 0 18px rgba(255, 255, 255, 0.3);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(9);
    box-shadow:
      0 0 0 18px rgba(167, 243, 208, 0),
      0 0 80px rgba(255, 255, 255, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .payment-celebration {
    display: none;
  }
}

@media (max-width: 380px) {
  .payment-receipt-grid {
    grid-template-columns: 1fr;
  }
}

.planting-checkout-summary,
.planting-payment-history {
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(240, 250, 244, 0.94)),
    var(--card);
  border-color: rgba(191, 216, 200, 0.66);
}

.payment-history-list {
  display: grid;
  gap: 8px;
}

.payment-history-item {
  display: grid;
  gap: 7px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(191, 216, 200, 0.76);
  background: rgba(255, 255, 255, 0.88);
  color: var(--checkout-ink);
  text-decoration: none;
}

.payment-history-item.is-active {
  border-color: rgba(20, 118, 71, 0.6);
  background:
    linear-gradient(135deg, rgba(231, 249, 238, 0.98), rgba(255, 250, 224, 0.84)),
    #fff;
  box-shadow: 0 14px 30px rgba(18, 76, 48, 0.11);
}

.payment-history-item strong {
  color: #063b28;
  font-size: 0.82rem;
  font-weight: 900;
}

.payment-history-item small {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #2d513f;
  font-size: 0.76rem;
  font-weight: 800;
}

.payment-history-item small b {
  color: #0b6d44;
  font-weight: 900;
}

.payment-history-item em {
  color: #5d7468;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 800;
}

.planting-checkout-teaser {
  display: grid;
  gap: 14px;
  align-items: center;
}

body[data-route-page="plantingCheckout"] .bottom-nav {
  display: none;
}

body[data-route-page="donationCheckout"] .bottom-nav {
  display: none;
}

@media (min-width: 1180px) {
  .planting-checkout-view {
    max-width: 1440px !important;
  }

  .payment-qr-box .qr-image.qr-image-large,
  .payment-qr-box .fake-qr.qr-image-large {
    width: min(100%, 520px);
  }
}

@media (hover: hover) and (pointer: fine) {
  .button:hover,
  .button-secondary:hover,
  .button-ghost:hover,
  .icon-button:hover,
  .avatar-button:hover,
  .chip:hover,
  .back-pill:hover {
    transform: translateY(-1px);
  }

  .button:hover,
  .avatar-button:hover {
    box-shadow: 0 20px 46px rgba(20, 118, 71, 0.24);
  }

  .button-secondary:hover,
  .icon-button:hover,
  .chip:hover {
    border-color: rgba(20, 118, 71, 0.26);
    box-shadow: 0 14px 30px rgba(18, 76, 48, 0.12);
  }

  .nav-item:hover {
    color: var(--primary-strong);
    background: rgba(223, 244, 232, 0.58);
    transform: translateY(-1px);
  }

  .image-card-media img {
    transition: transform var(--motion-slow) var(--ease-out), filter var(--motion-medium) ease;
  }

  .image-card:hover .image-card-media img,
  .premium-panel:hover img {
    transform: scale(1.035);
    filter: saturate(1.05);
  }

  .earning-card:hover,
  .event-card:hover,
  .campaign-card:hover,
  .tree-card:hover,
  .leader-card:hover,
  .badge-card:hover,
  .level-card:hover,
  .podium-card:hover {
    border-color: rgba(20, 118, 71, 0.24);
    box-shadow: 0 18px 38px rgba(18, 76, 48, 0.13);
  }

  .map-pin:hover {
    transform: rotate(-45deg) scale(1.08);
  }

  .map-pin.is-active:hover {
    transform: rotate(-45deg) scale(1.16);
  }

  .join-soft-button:hover,
  .activity-card-cta:hover,
  .my-event-cta:hover {
    background:
      linear-gradient(115deg, rgba(255, 255, 255, 0.2), transparent 35%),
      linear-gradient(150deg, transparent 0 62%, rgba(255, 255, 255, 0.11) 62% 63%, transparent 63% 100%),
      var(--gradient-primary);
    box-shadow: 0 12px 26px rgba(13, 117, 78, 0.24);
    transform: translateY(-1px);
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 480px) {
  .planting-checkout-main .planting-checkout-section {
    margin-inline: -12px;
  }

  .section-head {
    align-items: start;
    flex-direction: column;
  }

  .section-head .button,
  .section-head .button-secondary,
  .section-head .button-ghost,
  .hero-actions .button,
  .hero-actions .button-ghost {
    width: 100%;
  }

  .credit-pass {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }

  .qr-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .earning-card {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .earning-card strong {
    grid-column: 2;
    justify-self: start;
  }
}

@media (min-width: 768px) {
  .app-main {
    padding-bottom: 28px;
  }

  .planting-checkout-layout {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .planting-checkout-hero {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.42fr);
    align-items: end;
    padding: 24px;
  }

  .planting-checkout-hero .back-pill {
    grid-column: 1 / -1;
    margin: -12px 0 0 -12px;
  }

  .planting-payment-lock {
    grid-template-columns: 44px minmax(0, 1fr) auto;
  }

  .planting-payment-lock .button-secondary {
    grid-column: auto;
  }

  .planting-checkout-teaser {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .payment-qr-box {
    padding: 16px;
  }

  .bottom-nav {
    display: none;
  }

  .topbar {
    min-height: 72px;
    padding-inline: 28px;
  }

  .brand-title {
    display: grid;
    font-size: 0.82rem;
    color: var(--muted-foreground);
    font-weight: 700;
  }

  .page {
    min-height: calc(100svh - 72px);
    padding: 24px 28px 36px;
  }

  .hero {
    grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.65fr);
    align-items: end;
    padding: 32px;
  }

  .metric-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .grid-list.two-up,
  .form-grid.two-up {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-list.three-up {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .image-card {
    min-height: 100%;
  }

  .image-card-media {
    min-height: 210px;
  }

  .detail-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.82fr);
  }

  .detail-hero-media {
    min-height: 100%;
  }

  .detail-hero-content {
    align-content: center;
    padding: 30px;
  }

  .detail-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .detail-body-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  }

  .event-result-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .event-result-documents {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .filter-bar {
    grid-template-columns: minmax(240px, 0.7fr) minmax(0, 1fr);
    align-items: center;
  }

  .toast-root {
    left: auto;
    right: 20px;
    bottom: 20px;
    width: 420px;
  }
}

@media (min-width: 1100px) {
  .app-shell {
    grid-template-columns: 248px minmax(0, 1fr);
  }

  .app-sidebar {
    position: sticky;
    top: 0;
    z-index: 2;
    height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 20px;
    padding: 22px 18px;
    border-right: 1px solid rgba(191, 216, 200, 0.7);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(244, 251, 245, 0.72));
    backdrop-filter: blur(20px) saturate(1.12);
    box-shadow: 18px 0 46px rgba(15, 79, 49, 0.06);
    animation: sidebar-in 420ms var(--ease-out) 100ms backwards;
  }

  .topbar {
    display: none;
  }

  .side-nav {
    display: grid;
    align-content: start;
    gap: 6px;
  }

  .side-nav .nav-item {
    grid-template-columns: 22px 1fr;
    justify-items: start;
    min-height: 46px;
    padding: 0 12px;
    font-size: 0.9rem;
    border-radius: 15px;
  }

  .app-main {
    margin: 0;
    width: 100%;
  }

  .page {
    max-width: 1180px;
    min-height: 100svh;
    padding: 30px 36px 44px;
  }

  .desktop-only {
    display: block;
  }
}

/* Compact app-style redesign, aligned with xanhvietnam-onhercules-reference. */
:root {
  --background: oklch(98.5% 0.004 145);
  --foreground: oklch(15.5% 0.024 155);
  --foreground-soft: oklch(25.5% 0.038 155);
  --muted: oklch(95% 0.018 145);
  --muted-foreground: oklch(42% 0.03 155);
  --card: #ffffff;
  --card-strong: #ffffff;
  --card-tint: rgba(255, 255, 255, 0.92);
  --border: oklch(90% 0.02 145);
  --border-strong: oklch(84% 0.032 145);
  --primary: oklch(42% 0.14 152);
  --primary-strong: oklch(34% 0.12 152);
  --primary-deep: oklch(26% 0.1 155);
  --primary-soft: oklch(94% 0.04 150);
  --secondary: oklch(93% 0.035 145);
  --accent: oklch(76.9% 0.188 70.08);
  --accent-soft: oklch(96.2% 0.059 95.617);
  --sky: oklch(95.1% 0.026 236.824);
  --shadow: 0 12px 30px rgba(26, 68, 45, 0.08);
  --shadow-soft: 0 6px 18px rgba(26, 68, 45, 0.06);
  --shadow-tight: 0 2px 10px rgba(26, 68, 45, 0.05);
  --glow-green: none;
  --glow-amber: none;
  --gradient-primary: linear-gradient(135deg, oklch(42% 0.14 152), oklch(35% 0.12 165));
  --gradient-accent: linear-gradient(135deg, oklch(98.7% 0.022 95.277), oklch(82.8% 0.189 84.429));
  --gradient-surface: #ffffff;
  --radius: 10px;
  --radius-lg: 16px;
}

html,
body {
  background: oklch(93.5% 0.018 145);
}

body {
  font-size: 14px;
  line-height: 1.45;
}

.app-shell {
  width: min(100dvw, 448px);
  max-width: 100%;
  min-height: 100svh;
  overflow-x: hidden;
  margin: 0 auto;
  grid-template-columns: minmax(0, 1fr) !important;
  background: var(--background);
  box-shadow: 0 0 0 1px rgba(26, 68, 45, 0.05);
}

.app-shell::before,
.app-shell::after,
.card::before,
.event-card::before,
.campaign-card::before,
.tree-card::before,
.leader-card::before,
.timeline-item::before,
.badge-card::before,
.metric-card::after,
.level-card::before,
.map-panel::before,
.hero::before,
.hero::after {
  content: none;
}

.app-sidebar {
  display: none !important;
}

.app-frame {
  width: 100%;
  max-width: 100%;
  min-height: 100svh;
  grid-template-rows: minmax(0, 1fr);
}

.app-main {
  padding-bottom: calc(68px + var(--safe-bottom));
}

.topbar {
  display: none !important;
  min-height: 56px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--background) 94%, white);
  box-shadow: none;
}

.topbar-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.topbar-copy p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.72rem;
  line-height: 1.2;
}

.topbar-copy strong {
  overflow: hidden;
  color: var(--foreground);
  font-size: 0.92rem;
  line-height: 1.2;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-actions {
  gap: 8px;
}

.level-pill {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  border-radius: 999px;
  background: oklch(95% 0.052 163.051);
  color: oklch(43.2% 0.095 166.913);
  font-size: 0.72rem;
  font-weight: 800;
}

.level-pill .fa-icon {
  font-size: 0.7rem;
}

.level-pill.is-hidden {
  display: none;
}

.icon-button,
.avatar-button {
  min-width: 36px;
  min-height: 36px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--foreground);
  box-shadow: none;
}

.notification-button {
  position: relative;
}

.notification-badge {
  position: absolute;
  top: 3px;
  right: 1px;
  min-width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  padding: 0 4px;
  border-radius: 999px;
  border: 2px solid var(--background);
  background: linear-gradient(135deg, #ef4444, #f59e0b);
  color: #fff;
  font-size: 0.58rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(194, 65, 50, 0.22);
}

.notification-badge.is-hidden {
  display: none;
}

.notification-button.has-unread .fa-icon {
  color: var(--primary);
  animation: notification-bell-pulse 1.8s ease-in-out infinite;
}

@keyframes notification-bell-pulse {
  0%, 100% { transform: rotate(0deg); }
  12% { transform: rotate(-10deg); }
  24% { transform: rotate(9deg); }
  36% { transform: rotate(-5deg); }
  48% { transform: rotate(3deg); }
  60% { transform: rotate(0deg); }
}

.notifications-page {
  max-width: 1160px;
}

.notifications-stack {
  gap: 14px;
}

.notifications-hero-card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 18px;
  padding: 18px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 14% 12%, rgba(255, 255, 255, 0.22), transparent 28%),
    radial-gradient(circle at 88% 18%, rgba(250, 204, 21, 0.28), transparent 24%),
    linear-gradient(135deg, #064e3b 0%, #047857 50%, #0f766e 100%);
  color: #fff;
  box-shadow: 0 24px 54px rgba(6, 78, 59, 0.2);
}

.notifications-hero-card::after {
  content: "";
  position: absolute;
  inset: auto -14% -42% 34%;
  height: 170px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  transform: rotate(-9deg);
}

.notifications-hero-copy,
.notifications-hero-summary {
  position: relative;
  z-index: 1;
}

.notifications-hero-copy span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.94);
  font-size: 0.78rem;
  font-weight: 800;
}

.notifications-hero-copy h1 {
  max-width: 720px;
  margin: 12px 0 0;
  color: #fff;
  font-size: clamp(1.55rem, 6vw, 2.7rem);
  line-height: 1.08;
  letter-spacing: 0;
}

.notifications-hero-copy p {
  max-width: 620px;
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.55;
}

.notifications-hero-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.notifications-hero-metric {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px);
}

.notifications-hero-metric span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.16);
  color: #fef3c7;
}

.notifications-hero-metric strong {
  color: #fff;
  font-size: 1.35rem;
  line-height: 1;
}

.notifications-hero-metric small {
  color: rgba(255, 255, 255, 0.74);
  font-weight: 700;
}

.notifications-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.notifications-summary-card {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 6px 9px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(20, 118, 71, 0.12);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(240, 253, 244, 0.76));
  color: var(--foreground);
  text-align: left;
  box-shadow: 0 14px 28px rgba(6, 78, 59, 0.08);
}

.notifications-summary-card.is-active {
  border-color: rgba(20, 118, 71, 0.32);
  background: linear-gradient(135deg, rgba(223, 244, 232, 0.98), rgba(255, 241, 199, 0.68));
}

.notifications-summary-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  grid-row: span 2;
  border-radius: 14px;
  background: linear-gradient(135deg, #0f766e, #16a34a);
  color: #fff;
}

.notifications-summary-card strong {
  min-width: 0;
  font-size: 0.92rem;
}

.notifications-summary-card em {
  color: var(--primary-strong);
  font-style: normal;
  font-weight: 900;
}

.notifications-summary-card small {
  grid-column: 2 / -1;
  color: var(--muted-foreground);
  line-height: 1.35;
}

.notifications-push-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(20, 118, 71, 0.14);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(6, 78, 59, 0.055), rgba(250, 204, 21, 0.075)),
    rgba(255, 255, 255, 0.9);
  box-shadow: 0 14px 30px rgba(6, 78, 59, 0.07);
}

.notifications-push-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, #064e3b, #16a34a);
  color: #fff;
}

.notifications-push-card > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.notifications-push-card strong {
  color: var(--foreground);
  font-size: 0.92rem;
  line-height: 1.25;
}

.notifications-push-card p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.78rem;
  line-height: 1.4;
}

.notifications-push-button {
  min-height: 40px;
  white-space: nowrap;
}

.notifications-preferences-card {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(20, 118, 71, 0.14);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(236, 253, 245, 0.78)),
    rgba(255, 255, 255, 0.9);
  box-shadow: 0 14px 30px rgba(6, 78, 59, 0.07);
}

.notifications-preferences-head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.notifications-preferences-head > span,
.notifications-preference-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: linear-gradient(135deg, #064e3b, #0f766e);
  color: #fff;
}

.notifications-preferences-head strong,
.notifications-preference-copy strong {
  display: block;
  color: var(--foreground);
  font-size: 0.9rem;
  line-height: 1.25;
}

.notifications-preferences-head p,
.notifications-preference-copy small {
  display: block;
  margin: 3px 0 0;
  color: var(--muted-foreground);
  font-size: 0.77rem;
  line-height: 1.4;
}

.notifications-preferences-list {
  display: grid;
  gap: 8px;
}

.notifications-preference-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(20, 118, 71, 0.11);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
}

.notifications-preference-copy {
  min-width: 0;
}

.notifications-device-card {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(20, 118, 71, 0.14);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(240, 253, 244, 0.82)),
    rgba(255, 255, 255, 0.92);
  box-shadow: 0 14px 30px rgba(6, 78, 59, 0.07);
}

.notifications-device-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.notifications-device-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
  color: var(--primary-strong);
  font-size: 0.75rem;
  font-weight: 900;
}

.notifications-device-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(64px, 1fr));
  gap: 7px;
}

.notifications-device-metric {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 8px 9px;
  border: 1px solid rgba(20, 118, 71, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
}

.notifications-device-metric span {
  color: var(--primary);
  font-size: 0.82rem;
}

.notifications-device-metric strong {
  color: var(--foreground);
  font-size: 1rem;
  line-height: 1;
}

.notifications-device-metric small {
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 800;
}

.notifications-device-error,
.notifications-device-empty {
  min-width: 0;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px dashed rgba(20, 118, 71, 0.18);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.7);
}

.notifications-device-error > .fa-icon,
.notifications-device-empty > span {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, #0f766e, #16a34a);
  color: #fff;
}

.notifications-device-error > .fa-icon {
  background: linear-gradient(135deg, #d97706, #f97316);
}

.notifications-device-error strong,
.notifications-device-empty strong {
  display: block;
  color: var(--foreground);
  font-size: 0.9rem;
}

.notifications-device-error p,
.notifications-device-empty p {
  margin: 3px 0 0;
  color: var(--muted-foreground);
  font-size: 0.78rem;
  line-height: 1.4;
}

.notifications-device-list {
  display: grid;
  gap: 8px;
}

.notifications-device-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 4px;
  border: 1px solid rgba(15, 118, 110, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.68);
}

.notifications-device-tab {
  min-width: 0;
  min-height: 38px;
  display: grid;
  place-items: center;
  gap: 1px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--muted-foreground);
  font: inherit;
  cursor: pointer;
}

.notifications-device-tab span {
  font-size: 0.72rem;
  font-weight: 850;
}

.notifications-device-tab strong {
  color: var(--foreground);
  font-size: 0.84rem;
  line-height: 1;
}

.notifications-device-tab.is-active {
  background: linear-gradient(135deg, rgba(15, 118, 110, 0.98), rgba(22, 163, 74, 0.92));
  color: #fff;
  box-shadow: 0 8px 16px rgba(15, 118, 110, 0.16);
}

.notifications-device-tab.is-active strong {
  color: #fff;
}

.notifications-device-item {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(20, 118, 71, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
}

.notifications-device-item.is-revoked {
  opacity: 0.78;
}

.notifications-device-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: linear-gradient(135deg, #0f766e, #16a34a);
  color: #fff;
}

.notifications-device-icon.platform-android {
  background: linear-gradient(135deg, #15803d, #84cc16);
}

.notifications-device-icon.platform-ios {
  background: linear-gradient(135deg, #334155, #0f766e);
}

.notifications-device-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.notifications-device-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.notifications-device-row strong {
  min-width: 0;
  color: var(--foreground);
  font-size: 0.9rem;
  line-height: 1.25;
}

.notifications-device-pill,
.notifications-device-muted {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(220, 252, 231, 0.9);
  color: #166534;
  font-size: 0.7rem;
  font-weight: 900;
}

.notifications-device-item.is-revoked .notifications-device-pill,
.notifications-device-muted {
  background: rgba(226, 232, 240, 0.88);
  color: #64748b;
}

.notifications-device-copy p,
.notifications-device-copy small {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.75rem;
  line-height: 1.35;
}

.notifications-device-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.notifications-device-meta span {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
  border: 1px solid rgba(15, 118, 110, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #0f766e;
  font-size: 0.67rem;
  font-weight: 850;
}

.notifications-device-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.notifications-device-flags span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(240, 253, 244, 0.78);
  color: var(--primary-strong);
  font-size: 0.68rem;
  font-weight: 800;
}

.notifications-device-actions {
  display: flex;
  gap: 7px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.notification-device-test,
.notification-device-revoke {
  min-height: 38px;
  white-space: nowrap;
}

.notification-device-test {
  box-shadow: 0 10px 18px rgba(15, 118, 110, 0.16);
}

.switch-input {
  appearance: none;
  width: 46px;
  height: 26px;
  position: relative;
  border: 1px solid rgba(15, 118, 110, 0.22);
  border-radius: 999px;
  background: rgba(100, 116, 139, 0.18);
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.switch-input::after {
  content: "";
  width: 20px;
  height: 20px;
  position: absolute;
  top: 2px;
  left: 2px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.2);
  transition: transform 180ms ease;
}

.switch-input:checked {
  border-color: rgba(20, 184, 166, 0.45);
  background: linear-gradient(135deg, #0f766e, #16a34a);
  box-shadow: 0 8px 18px rgba(20, 184, 166, 0.18);
}

.switch-input:checked::after {
  transform: translateX(20px);
}

.switch-input:disabled {
  cursor: wait;
  opacity: 0.7;
}

.notifications-panel {
  padding: 14px;
  border: 1px solid rgba(20, 118, 71, 0.12);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 18px 38px rgba(6, 78, 59, 0.08);
}

.notifications-panel-head {
  align-items: center;
}

.notifications-panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.notifications-tabs {
  display: inline-grid;
  grid-template-columns: repeat(3, minmax(0, auto));
  gap: 5px;
  padding: 4px;
  border: 1px solid rgba(20, 118, 71, 0.12);
  border-radius: 999px;
  background: rgba(240, 253, 244, 0.7);
}

.notifications-tab {
  min-width: 0;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 6px 10px 6px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted-foreground);
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.notifications-tab.is-active {
  background: #fff;
  color: var(--primary-strong);
  box-shadow: 0 8px 16px rgba(6, 78, 59, 0.08);
}

.notifications-tab-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notifications-tab-count {
  min-width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(15, 118, 110, 0.1);
  color: inherit;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.notifications-tab.is-active .notifications-tab-count {
  background: rgba(20, 118, 71, 0.12);
  color: var(--primary-strong);
}

.notifications-mark-all {
  min-height: 44px;
}

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

.notification-card {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(20, 118, 71, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 24px rgba(6, 78, 59, 0.06);
}

.notification-card.is-unread {
  border-color: rgba(20, 118, 71, 0.24);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(240, 253, 244, 0.9));
}

.notification-accent {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, #0f766e, #16a34a);
  color: #fff;
  box-shadow: 0 14px 26px rgba(15, 118, 110, 0.18);
}

.notification-tone-donation_paid,
.notification-tone-payment_expired {
  background: linear-gradient(135deg, #f97316, #f43f5e);
}

.notification-tone-tree_sponsored {
  background: linear-gradient(135deg, #15803d, #84cc16);
}

.notification-tone-event_reminder {
  background: linear-gradient(135deg, #2563eb, #06b6d4);
}

.notification-tone-admin_notice {
  background: linear-gradient(135deg, #4f46e5, #0f766e);
}

.notification-tone-badge_earned {
  background: linear-gradient(135deg, #d97706, #facc15);
}

.notification-card-body {
  min-width: 0;
  display: grid;
  gap: 9px;
}

.notification-card-head,
.notification-card-meta,
.notification-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.notification-card-head {
  justify-content: space-between;
}

.notification-card-meta {
  min-width: 0;
  color: var(--muted-foreground);
  font-size: 0.78rem;
  font-weight: 700;
}

.notification-type-pill,
.notification-unread-flag,
.notification-read-flag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 900;
}

.notification-type-pill {
  background: rgba(223, 244, 232, 0.9);
  color: var(--primary-strong);
}

.notification-unread-flag {
  background: #fff1c7;
  color: #92400e;
}

.notification-read-flag {
  background: rgba(237, 245, 238, 0.9);
  color: var(--muted-foreground);
}

.notification-card-copy h3 {
  margin: 0;
  color: var(--foreground);
  font-size: 1rem;
  line-height: 1.25;
}

.notification-card-copy p {
  margin: 5px 0 0;
  color: var(--muted-foreground);
  line-height: 1.48;
}

.notification-card-actions {
  justify-content: flex-start;
}

.notification-open-button,
.notification-read-button {
  min-height: 40px;
  padding: 9px 12px;
}

.notifications-page {
  max-width: 720px;
}

.notifications-stack {
  gap: 0;
}

.notifications-inbox-panel {
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.1);
}

.notifications-inbox-panel .notifications-panel-head {
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  background: linear-gradient(180deg, #fff, #f8fafc);
}

.notifications-mini-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
  color: var(--primary-strong);
  font-size: 0.78rem;
  font-weight: 900;
}

.notifications-inbox-panel .section-title {
  margin: 0;
  font-size: clamp(1.35rem, 4vw, 1.85rem);
  line-height: 1.16;
}

.notifications-inbox-panel .section-copy {
  max-width: 520px;
  margin-top: 5px;
  font-size: 0.9rem;
}

.notifications-inbox-panel .notifications-panel-actions {
  align-items: center;
  justify-content: flex-start;
}

.notifications-inbox-panel .notifications-tabs {
  border-radius: 999px;
  background: #f1f5f9;
}

.notifications-inbox-panel .notifications-tab {
  min-height: 34px;
  border-radius: 999px;
}

.notifications-inbox-panel .notifications-tab.is-active {
  color: #052e16;
  background: #fff;
}

.notifications-settings-button,
.notifications-mark-all {
  min-height: 38px;
  border-radius: 999px;
  white-space: nowrap;
}

.notifications-inbox-panel .notifications-list {
  gap: 0;
}

.notifications-inbox-panel .notification-card {
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  padding: 12px 16px;
  border: 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

.notifications-inbox-panel .notification-card:last-child {
  border-bottom: 0;
}

.notifications-inbox-panel .notification-card.is-unread {
  background: #f0fdf4;
}

.notifications-inbox-panel .notification-accent {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  box-shadow: none;
}

.notifications-inbox-panel .notification-card-body {
  gap: 5px;
}

.notifications-inbox-panel .notification-card-head {
  align-items: flex-start;
}

.notifications-inbox-panel .notification-card-meta {
  gap: 6px;
  font-size: 0.74rem;
}

.notifications-inbox-panel .notification-type-pill,
.notifications-inbox-panel .notification-read-flag {
  display: none;
}

.notifications-inbox-panel .notification-unread-flag {
  min-height: 18px;
  padding: 2px 7px;
  font-size: 0.66rem;
}

.notifications-inbox-panel .notification-card-copy h3 {
  font-size: 0.96rem;
}

.notifications-inbox-panel .notification-card-copy p {
  margin-top: 3px;
  font-size: 0.86rem;
  line-height: 1.45;
}

.notifications-inbox-panel .notification-card-actions {
  margin-top: 4px;
}

.notifications-inbox-panel .notification-open-button,
.notifications-inbox-panel .notification-read-button {
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
}

.notifications-inbox-panel .pagination {
  padding: 12px 16px 16px;
}

.notifications-settings-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  place-items: center;
  padding: 18px;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(8px);
}

.notifications-settings-modal[data-open="true"] {
  display: grid;
}

.notifications-settings-dialog {
  width: min(100%, 520px);
  max-height: min(720px, calc(100vh - 36px));
  overflow: auto;
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.24);
}

.notifications-settings-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.notifications-settings-head span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--primary-strong);
  font-size: 0.75rem;
  font-weight: 900;
}

.notifications-settings-head strong {
  display: block;
  margin-top: 4px;
  color: var(--foreground);
  font-size: 1.08rem;
  line-height: 1.25;
}

.notifications-settings-head p {
  margin: 4px 0 0;
  color: var(--muted-foreground);
  font-size: 0.84rem;
  line-height: 1.42;
}

.notifications-settings-close {
  border-radius: 999px;
}

.notifications-settings-dialog .notifications-preferences-list {
  display: grid;
  gap: 0;
}

.notifications-settings-dialog .notifications-preference-row {
  padding: 11px 0;
  border: 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 0;
  background: transparent;
}

.notifications-settings-dialog .notifications-preference-row:last-child {
  border-bottom: 0;
}

@media (min-width: 860px) {
  .notifications-hero-card {
    grid-template-columns: minmax(0, 1.5fr) minmax(300px, 0.68fr);
    align-items: end;
    padding: 24px;
  }

  .notifications-panel {
    padding: 18px;
  }
}

@media (max-width: 760px) {
  .notifications-summary-grid,
  .notifications-hero-summary {
    grid-template-columns: 1fr;
  }

  .notifications-panel-head,
  .notifications-panel-actions,
  .notifications-tabs,
  .notifications-mark-all {
    width: 100%;
  }

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

  .notifications-push-card {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .notifications-device-head {
    grid-template-columns: 1fr;
  }

  .notifications-device-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .notifications-device-item {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .notifications-device-icon {
    width: 40px;
    height: 40px;
    border-radius: 14px;
  }

  .notifications-device-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr;
  }

  .notification-device-test,
  .notification-device-revoke {
    width: 100%;
    justify-content: center;
  }

  .notifications-push-button {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: center;
  }

  .notifications-tab {
    min-height: 34px;
    gap: 5px;
    padding: 5px 6px;
    font-size: 0.74rem;
  }

  .notifications-tab-count {
    min-width: 20px;
    height: 20px;
    padding-inline: 6px;
    font-size: 0.68rem;
  }

  .notification-card {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;
  }

  .notification-accent {
    width: 40px;
    height: 40px;
    border-radius: 14px;
  }

  .notification-card-actions .button,
  .notification-card-actions .button-secondary {
    width: 100%;
    justify-content: center;
  }
}

.bottom-nav {
  width: min(100dvw, 448px);
  gap: 0;
  padding: 5px 8px calc(5px + var(--safe-bottom));
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: none;
}

.nav-item {
  min-height: 48px;
  gap: 2px;
  padding: 5px 2px;
  border-radius: 12px;
  font-size: 0.66rem;
  font-weight: 700;
  background: transparent;
}

.nav-item .fa-icon {
  width: 18px;
  height: 18px;
  font-size: 0.95rem;
}

.nav-item.is-active {
  background: transparent;
  color: var(--primary);
  box-shadow: none;
}

.page {
  width: 100%;
  max-width: 448px !important;
  min-height: calc(100svh - 68px - var(--safe-bottom));
  padding: 14px 16px 18px !important;
}

.page-stack {
  gap: 16px;
}

.section {
  gap: 10px;
}

.notifications-inbox-panel.notifications-panel {
  padding: 0;
}

.notifications-inbox-panel .notification-card-actions .button,
.notifications-inbox-panel .notification-card-actions .button-secondary {
  width: auto;
  justify-content: center;
}

@media (max-width: 760px) {
  .notifications-inbox-panel .notifications-panel-head {
    width: auto;
  }

  .notifications-inbox-panel .notifications-panel-actions {
    width: 100%;
  }

  .notifications-inbox-panel .notifications-mark-all,
  .notifications-inbox-panel .notifications-settings-button {
    width: auto;
  }
}

.section-head {
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  gap: 8px;
}

.section-head > div {
  flex: 1 1 auto;
  min-width: 0;
}

.section-head .section-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eyebrow {
  margin: 0 0 3px;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
}

.section-title,
.page-title {
  font-size: 0.98rem;
  line-height: 1.25;
  font-weight: 800;
}

.page-title {
  font-size: clamp(1.45rem, 8vw, 1.9rem);
}

.section-copy,
.page-copy,
.rich-content p {
  margin-top: 4px;
  font-size: 0.78rem;
  line-height: 1.45;
}

.hero {
  gap: 14px;
  padding: 18px;
  border: 0;
  border-radius: 24px;
  background: var(--gradient-primary);
  box-shadow: none;
}

.hero .page-copy,
.hero .eyebrow {
  color: rgba(255, 255, 255, 0.76);
}

.hero .page-title {
  text-shadow: none;
}

.hero .card,
.credit-pass {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}

.button,
.button-secondary,
.button-ghost {
  min-height: 40px;
  gap: 7px;
  padding: 0 13px;
  border-radius: 12px;
  font-size: 0.8rem;
  box-shadow: none;
}

.button-secondary {
  background: var(--card);
  border-color: var(--border);
}

.card,
.event-card,
.campaign-card,
.tree-card,
.leader-card,
.timeline-item,
.badge-card,
.podium-card,
.level-card,
.earning-card,
.status-panel,
.empty-state,
.error-state,
.success-state {
  border-color: var(--border);
  border-radius: 16px;
  background: var(--card);
  box-shadow: none;
}

.card-pad,
.event-card,
.campaign-card,
.tree-card,
.leader-card,
.timeline-item,
.badge-card {
  padding: 12px;
}

.metric-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px;
}

.metric-card {
  min-height: 86px;
  gap: 8px;
  padding: 12px;
  border-radius: 16px;
  box-shadow: none;
}

.metric-icon,
.state-icon,
.earning-icon,
.badge-emblem,
.profile-avatar {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  box-shadow: none;
}

.metric-icon .fa-icon,
.state-icon .fa-icon,
.earning-icon .fa-icon,
.badge-emblem .fa-icon {
  width: 16px;
  height: 16px;
  font-size: 0.86rem;
}

.metric-value {
  font-size: 1.08rem;
}

.metric-label {
  font-size: 0.72rem;
}

.grid-list {
  gap: 10px;
}

.grid-list.two-up,
.grid-list.three-up,
.form-grid.two-up,
.detail-hero,
.detail-body-grid {
  grid-template-columns: minmax(0, 1fr) !important;
}

.image-card-media {
  min-height: 132px;
}

.image-card.compact .image-card-media {
  min-height: 120px;
}

.image-card-body {
  gap: 9px;
  padding: 12px;
}

.event-card h3,
.campaign-card h3,
.tree-card h3,
.leader-card h3,
.badge-card h3 {
  font-size: 0.88rem;
  line-height: 1.3;
}

.meta-row {
  gap: 6px;
  font-size: 0.72rem;
}

.tag,
.floating-tag {
  min-height: 22px;
  padding: 0 8px;
  border: 0;
  font-size: 0.64rem;
  box-shadow: none;
}

.progress {
  height: 6px;
  background: rgba(14, 75, 46, 0.08);
}

.split-line {
  font-size: 0.72rem;
}

.filter-bar,
.form-grid,
.earning-list,
.agenda-list,
.compact-list {
  gap: 10px;
}

.search-field,
.form-field input,
.form-field select,
.form-field textarea {
  min-height: 42px;
  border-radius: 12px;
  padding: 0 12px;
  font-size: 0.82rem;
  background: var(--card);
}

.chip-row {
  gap: 7px;
}

.chip {
  min-height: 32px;
  padding: 0 10px;
  font-size: 0.75rem;
  box-shadow: none;
}

.level-grid {
  gap: 8px;
}

.level-card {
  min-height: 92px;
  padding: 10px 6px;
}

.level-code,
.rank-badge,
.podium-rank {
  width: 34px;
  height: 34px;
  border-radius: 12px;
}

.leader-card,
.earning-card {
  min-height: 54px;
  gap: 10px;
}

.earning-card {
  grid-template-columns: 36px minmax(0, 1fr) auto;
  padding: 9px 10px;
}

.earning-card strong {
  font-size: 0.68rem;
}

.leader-podium {
  gap: 8px;
}

.podium-card {
  padding: 10px 6px;
}

.map-panel {
  min-height: 420px;
  border-radius: 20px;
  box-shadow: none;
}

.map-sheet {
  left: 10px;
  right: 10px;
  bottom: 10px;
  padding: 12px;
  border-radius: 16px;
  box-shadow: none;
}

.map-pin {
  min-width: 36px;
  min-height: 36px;
  box-shadow: 0 10px 20px rgba(20, 118, 71, 0.24);
}

.detail-hero,
.detail-hero-media {
  border-radius: 18px;
}

.detail-hero-media {
  min-height: 180px;
}

.detail-hero-content {
  gap: 10px;
  padding: 14px;
}

.detail-facts {
  gap: 8px;
}

.detail-facts > div,
.agenda-item {
  padding: 10px;
  border-radius: 14px;
}

.qr-card {
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
  border-radius: 16px;
}

.fake-qr {
  width: 92px;
  height: 92px;
  border-width: 6px;
}

.qr-image {
  width: 92px;
  height: 92px;
  border-width: 6px;
}

.toast-root {
  left: 12px;
  right: 12px;
  bottom: calc(70px + var(--safe-bottom));
  width: auto;
}

.toast {
  width: min(100%, 390px);
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 0.82rem;
}

.inline-link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--primary);
  font-size: 0.76rem;
  font-weight: 800;
  white-space: nowrap;
}

.inline-link .fa-icon {
  width: 11px;
  height: 11px;
  font-size: 0.68rem;
}

.dashboard-stack {
  gap: 18px;
}

.dashboard-credit-card {
  position: relative;
  overflow: hidden;
  padding: 20px;
  border-radius: 24px;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.16), transparent 34%),
    linear-gradient(150deg, transparent 0 60%, rgba(255, 255, 255, 0.09) 60% 61%, transparent 61% 100%),
    var(--gradient-primary);
  color: #fff;
}

.dashboard-credit-card::before {
  content: "\f06c";
  position: absolute;
  top: -16px;
  right: -8px;
  font-family: "Font Awesome 7 Pro";
  font-size: 8.5rem;
  font-weight: 900;
  line-height: 1;
  color: rgba(255, 255, 255, 0.075);
  transform: rotate(-18deg);
  pointer-events: none;
}

.dashboard-credit-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0 10%, rgba(255, 255, 255, 0.08) 10% 10.5%, transparent 10.5% 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 48%);
  pointer-events: none;
}

.dashboard-card-content {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 16px;
}

.dashboard-credit-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.dashboard-credit-head p,
.dashboard-progress-block p {
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.72rem;
}

.dashboard-credit-head strong {
  display: block;
  margin-top: 2px;
  color: #fff;
  font-size: 1.9rem;
  line-height: 1;
  font-weight: 900;
}

.dashboard-credit-head > span {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 46%;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
}

.dashboard-credit-head .fa-icon {
  width: 13px;
  height: 13px;
}

.dashboard-progress-block {
  display: grid;
  gap: 7px;
}

.level-progress-track {
  position: relative;
  padding-block: 5px;
}

.level-progress-track .progress {
  height: 8px;
}

.dashboard-progress-block .split-line,
.dashboard-progress-block .split-line strong {
  color: rgba(255, 255, 255, 0.86);
}

.dashboard-progress-block .progress {
  background: rgba(255, 255, 255, 0.18);
}

.dashboard-progress-block .progress > span {
  background: linear-gradient(90deg, #ffffff, #d8ffe9, #ffffff);
  background-size: 180% 100%;
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.22);
  animation: progress-glow 2.4s ease-in-out infinite;
}

.dashboard-progress-block .progress > span::after {
  background: linear-gradient(90deg, transparent, rgba(255, 231, 138, 0.82), rgba(255, 255, 255, 0.95), transparent);
  animation: progress-sheen-loop 2.1s ease-in-out infinite;
}

.level-progress-leaf {
  position: absolute;
  top: 50%;
  left: calc(var(--level-progress) * 1%);
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--primary-strong);
  box-shadow: 0 6px 16px rgba(6, 54, 35, 0.18);
  transform: translate(-50%, -50%) scale(0.92);
}

.page.is-mounted .level-progress-leaf {
  animation: level-leaf-pop 780ms var(--ease-spring) 540ms both, level-leaf-float 2.6s ease-in-out 1.4s infinite;
}

.level-progress-leaf .fa-icon {
  width: 11px;
  height: 11px;
  font-size: 0.7rem;
}

.progress-spark {
  position: absolute;
  top: 50%;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: radial-gradient(circle, #fff 0 32%, #ffe78a 33% 55%, rgba(184, 255, 213, 0.95) 56% 100%);
  box-shadow:
    -10px 0 12px rgba(255, 231, 138, 0.2),
    0 0 10px rgba(255, 255, 255, 1),
    0 0 20px rgba(255, 231, 138, 0.82),
    0 0 28px rgba(184, 255, 213, 0.62);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5);
  pointer-events: none;
}

.page.is-mounted .progress-spark {
  animation: progress-spark-run 2.8s ease-in-out infinite;
}

.page.is-mounted .spark-one {
  animation-delay: 0.7s;
}

.page.is-mounted .spark-two {
  width: 7px;
  height: 7px;
  animation-delay: 1.55s;
}

.page.is-mounted .spark-three {
  width: 5px;
  height: 5px;
  animation-delay: 2.2s;
}

@keyframes progress-spark-run {
  0% {
    left: 0%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
  }
  12%,
  72% {
    opacity: 0.9;
  }
  86%,
  100% {
    left: calc(var(--level-progress) * 1%);
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes progress-sheen-loop {
  0% {
    transform: translateX(-120%);
  }
  52%,
  100% {
    transform: translateX(120%);
  }
}

@keyframes progress-glow {
  0%,
  100% {
    background-position: 0% 0;
  }
  50% {
    background-position: 100% 0;
  }
}

@keyframes level-leaf-pop {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.58);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.92);
  }
}

@keyframes level-leaf-float {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(0.92);
  }
  50% {
    transform: translate(-50%, -62%) scale(1);
  }
}

.dashboard-mini-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.dashboard-mini-stats div {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 4px;
  text-align: center;
}

.dashboard-mini-stats .fa-icon {
  width: 14px;
  height: 14px;
  color: rgba(255, 255, 255, 0.74);
}

.dashboard-mini-stats strong {
  color: #fff;
  font-size: 1.05rem;
  line-height: 1.1;
}

.dashboard-mini-stats span {
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.62rem;
}

.quick-action-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.quick-action-tile {
  min-width: 0;
  min-height: 76px;
  display: grid;
  place-items: center;
  align-content: center;
  justify-items: center;
  gap: 6px;
  padding: 10px;
  border: 0;
  border-radius: 16px;
  color: #fff;
  box-shadow: 0 10px 24px rgba(26, 68, 45, 0.08);
}

.quick-action-tile span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
}

.quick-action-tile .fa-icon {
  width: 18px;
  height: 18px;
  font-size: 1rem;
}

.quick-action-tile strong {
  max-width: 100%;
  color: currentColor;
  font-size: 0.72rem;
  line-height: 1.12;
  text-align: center;
}

.quick-action-tile.action-event {
  background: linear-gradient(135deg, #16a34a, #0d9488);
}

.quick-action-tile.action-donate {
  background: linear-gradient(135deg, #f59e0b, #ef6c00);
}

.quick-action-tile.action-map {
  background: linear-gradient(135deg, #0284c7, #2563eb);
}

.quick-action-tile.action-credit {
  background: linear-gradient(135deg, #7c3aed, #db2777);
}

.quick-action-tile.action-admin {
  background: linear-gradient(135deg, #14532d, #0f766e);
}

.suggested-event-card {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
}

.suggested-event-card img {
  width: 100%;
  height: 128px;
  object-fit: cover;
}

.suggested-event-card > div {
  display: grid;
  gap: 8px;
  padding: 12px;
}

.suggested-event-card h3 {
  margin: 0;
  color: var(--foreground);
  font-size: 0.9rem;
  line-height: 1.3;
}

.suggested-event-card .button,
.join-soft-button {
  width: 100%;
  min-height: 34px;
  margin-top: 2px;
  font-size: 0.76rem;
}

.join-soft-button {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 999px;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.16), transparent 35%),
    linear-gradient(150deg, transparent 0 62%, rgba(255, 255, 255, 0.09) 62% 63%, transparent 63% 100%),
    var(--gradient-primary);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 10px 22px rgba(13, 117, 78, 0.2);
  transition:
    transform var(--motion-fast) ease,
    background var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease;
}

.join-soft-button::before {
  content: "\f06c";
  position: absolute;
  top: -13px;
  right: 18px;
  font-family: "Font Awesome 7 Pro";
  font-size: 3.4rem;
  font-weight: 900;
  line-height: 1;
  color: rgba(255, 255, 255, 0.075);
  transform: rotate(-18deg);
  pointer-events: none;
}

.join-soft-button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 48%);
  pointer-events: none;
}

.join-soft-button > * {
  position: relative;
  z-index: 1;
}

.join-soft-button .join-icon {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}

.join-soft-button .join-icon .fa-icon {
  width: 12px;
  height: 12px;
  font-size: 0.72rem;
}

.join-soft-button .fa-icon {
  width: 11px;
  height: 11px;
  font-size: 0.68rem;
}

.compact-row {
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
}

.compact-row-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in oklab, var(--primary) 10%, white);
  color: var(--primary);
}

.compact-row h3 {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.25;
}

.compact-row .section-copy {
  overflow: hidden;
  margin: 2px 0 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-stack {
  gap: 16px;
}

.profile-hero-card {
  position: relative;
  overflow: hidden;
  padding: 18px;
  border-radius: 24px;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.16), transparent 34%),
    linear-gradient(150deg, transparent 0 60%, rgba(255, 255, 255, 0.08) 60% 61%, transparent 61% 100%),
    var(--gradient-primary);
  color: #fff;
}

.profile-hero-card::before {
  content: "\f4d8";
  position: absolute;
  right: -16px;
  bottom: -36px;
  font-family: "Font Awesome 7 Pro";
  font-size: 8.6rem;
  font-weight: 900;
  line-height: 1;
  color: rgba(255, 255, 255, 0.07);
  transform: rotate(-16deg);
  pointer-events: none;
}

.profile-hero-top {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 12px;
}

.profile-avatar-xl {
  width: 58px;
  height: 58px;
  padding: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 1.08rem;
  font-weight: 900;
}

.profile-avatar-xl.is-clickable {
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.profile-avatar-xl.is-clickable:hover,
.profile-avatar-xl.is-clickable:focus-visible {
  border-color: rgba(255, 255, 255, 0.72);
  box-shadow: 0 10px 24px rgba(3, 32, 20, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  outline: none;
  transform: translateY(-1px);
}

.profile-avatar-xl img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-avatar-xl.is-edit {
  width: 72px;
  height: 72px;
  border-color: rgba(20, 118, 71, 0.18);
  background: rgba(255, 255, 255, 0.92);
  color: var(--primary);
  border-radius: 22px;
}

.profile-avatar-xl.is-edit:not(.has-image) {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(59, 130, 246, 0.12));
}

.profile-hero-top p,
.profile-hero-top h1,
.profile-hero-top span {
  overflow: hidden;
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-hero-top p {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.7rem;
  font-weight: 800;
}

.profile-hero-top h1 {
  margin-top: 2px;
  color: #fff;
  font-size: 1.12rem;
  line-height: 1.18;
  font-weight: 900;
}

.profile-hero-top span {
  display: block;
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.7rem;
}

.profile-icon-action {
  border: 0;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.profile-icon-action .fa-icon {
  width: 13px;
  height: 13px;
  font-size: 0.76rem;
}

.profile-hero-meta {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin-top: 14px;
  padding-bottom: 1px;
  scrollbar-width: none;
}

.profile-hero-meta::-webkit-scrollbar {
  display: none;
}

.profile-hero-meta span {
  flex: 0 0 auto;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.68rem;
  font-weight: 800;
}

.profile-hero-meta .fa-icon {
  width: 11px;
  height: 11px;
  font-size: 0.68rem;
}

.profile-stat-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.profile-stat-cell {
  --profile-stat: var(--primary);
  --profile-stat-alt: var(--primary-strong);
  min-width: 0;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  min-height: 92px;
  padding: 12px 8px 11px;
  border: 0;
  border-radius: 16px;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.2), transparent 36%),
    linear-gradient(150deg, transparent 0 62%, rgba(255, 255, 255, 0.09) 62% 63%, transparent 63% 100%),
    linear-gradient(135deg, var(--profile-stat), var(--profile-stat-alt));
  color: #fff;
  text-align: center;
}

.profile-stat-cell::before {
  content: "\f06c";
  position: absolute;
  right: -10px;
  bottom: -18px;
  font-family: "Font Awesome 7 Pro";
  font-size: 4.8rem;
  font-weight: 900;
  line-height: 1;
  color: rgba(255, 255, 255, 0.08);
  transform: rotate(-18deg);
  pointer-events: none;
}

.profile-stat-cell::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 10px;
  height: 1px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  pointer-events: none;
}

.profile-stat-cell.green {
  --profile-stat: #16a34a;
  --profile-stat-alt: #0d9488;
}

.profile-stat-cell.teal {
  --profile-stat: #0d9488;
  --profile-stat-alt: #0284c7;
}

.profile-stat-cell.amber {
  --profile-stat: #f59e0b;
  --profile-stat-alt: #ef6c00;
}

.profile-stat-cell.sky {
  --profile-stat: #0284c7;
  --profile-stat-alt: #2563eb;
}

.profile-stat-cell span {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.92);
}

.profile-stat-cell .fa-icon {
  width: 18px;
  height: 18px;
  font-size: 1rem;
}

.profile-stat-cell strong {
  position: relative;
  z-index: 1;
  max-width: 100%;
  overflow: hidden;
  color: #fff;
  font-size: 1.03rem;
  line-height: 1.1;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-stat-cell small {
  position: relative;
  z-index: 1;
  max-width: 100%;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.66rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-badge-summary {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(22, 163, 74, 0.14);
  border-radius: 20px;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.96), rgba(237, 250, 242, 0.82)),
    var(--card);
}

.profile-inline-warning {
  min-height: 38px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 9px 11px;
  border: 1px solid rgba(245, 158, 11, 0.22);
  border-radius: 14px;
  background: rgba(255, 251, 235, 0.78);
  color: #7c4a03;
  font-size: 0.68rem;
  line-height: 1.35;
  font-weight: 850;
}

.profile-inline-warning .fa-icon {
  width: 13px;
  height: 13px;
  color: #d97706;
  font-size: 0.72rem;
}

.profile-badge-summary::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 0 26%, rgba(255, 255, 255, 0.72) 34%, transparent 44% 100%),
    linear-gradient(150deg, transparent 0 68%, rgba(255, 214, 102, 0.16) 68% 69%, transparent 69% 100%);
  opacity: 0.5;
  pointer-events: none;
}

.profile-badge-head,
.profile-badge-grid,
.profile-badge-footer,
.profile-badge-empty {
  position: relative;
  z-index: 1;
}

.profile-badge-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.profile-badge-head p,
.profile-badge-head h2 {
  margin: 0;
}

.profile-badge-head p {
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 800;
}

.profile-badge-head h2 {
  margin-top: 2px;
  color: var(--foreground);
  font-size: 0.94rem;
  line-height: 1.18;
  font-weight: 900;
}

.profile-badge-head a {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(22, 163, 74, 0.1);
  color: var(--primary-strong);
  font-size: 0.68rem;
  font-weight: 900;
  white-space: nowrap;
}

.profile-badge-head a .fa-icon {
  width: 10px;
  height: 10px;
  font-size: 0.62rem;
}

.profile-badge-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
}

.profile-badge-token {
  --badge-a: #16a34a;
  --badge-b: #0d9488;
  --badge-bg: linear-gradient(135deg, #e7f8ed, #f8fffb);
  --badge-border: rgba(22, 163, 74, 0.18);
  position: relative;
  overflow: hidden;
  min-width: 0;
  min-height: 42px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid var(--badge-border);
  border-radius: 16px;
  background: var(--badge-bg);
  color: var(--foreground);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.profile-badge-token.is-earned {
  border-color: var(--badge-border);
  background: var(--badge-bg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 8px 18px rgba(15, 79, 49, 0.08);
}

.profile-badge-token.is-earned::before {
  content: "";
  position: absolute;
  top: -26%;
  bottom: -26%;
  left: -60%;
  width: 48%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.78), transparent);
  transform: rotate(18deg);
  opacity: 0;
}

.page.is-mounted .profile-badge-token.is-earned::before {
  animation: profile-badge-glint 3.4s ease-in-out infinite;
  animation-delay: calc(var(--badge-order, 0) * 160ms);
}

.profile-badge-token.is-locked {
  border-color: rgba(148, 163, 184, 0.22);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.7), rgba(241, 245, 249, 0.7)),
    var(--muted);
  box-shadow: none;
}

.profile-badge-token.tone-sprout {
  --badge-a: #22c55e;
  --badge-b: #84cc16;
  --badge-bg: linear-gradient(135deg, #dcfce7 0%, #fef9c3 100%);
  --badge-border: rgba(34, 197, 94, 0.26);
}

.profile-badge-token.tone-forest {
  --badge-a: #147647;
  --badge-b: #16a34a;
  --badge-bg: linear-gradient(135deg, #dff8e8 0%, #ecfdf5 52%, #fff7d6 100%);
  --badge-border: rgba(20, 118, 71, 0.24);
}

.profile-badge-token.tone-river {
  --badge-a: #0284c7;
  --badge-b: #14b8a6;
  --badge-bg: linear-gradient(135deg, #dff8ff 0%, #ccfbf1 100%);
  --badge-border: rgba(2, 132, 199, 0.22);
}

.profile-badge-token.tone-violet {
  --badge-a: #7c3aed;
  --badge-b: #db2777;
  --badge-bg: linear-gradient(135deg, #ede9fe 0%, #fce7f3 100%);
  --badge-border: rgba(124, 58, 237, 0.2);
}

.profile-badge-token.tone-sky {
  --badge-a: #2563eb;
  --badge-b: #06b6d4;
  --badge-bg: linear-gradient(135deg, #dbeafe 0%, #cffafe 100%);
  --badge-border: rgba(37, 99, 235, 0.2);
}

.profile-badge-token.tone-gold {
  --badge-a: #f59e0b;
  --badge-b: #ef6c00;
  --badge-bg: linear-gradient(135deg, #fff7d6 0%, #fed7aa 100%);
  --badge-border: rgba(245, 158, 11, 0.24);
}

.profile-badge-token .credit-art {
  position: relative;
  z-index: 1;
  width: clamp(29px, 72%, 35px);
  height: clamp(29px, 72%, 35px);
  filter: drop-shadow(0 7px 10px rgba(15, 79, 49, 0.1));
}

.profile-badge-token.is-locked .credit-art {
  opacity: 0.46;
  filter: grayscale(0.72);
}

.profile-session-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(20, 118, 71, 0.12);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(239, 252, 245, 0.84)),
    var(--card);
  box-shadow: 0 12px 28px rgba(15, 79, 49, 0.06);
}

.profile-session-list {
  display: grid;
  gap: 9px;
}

.profile-session-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.76);
}

.profile-session-row.is-current {
  border-color: rgba(22, 163, 74, 0.18);
  background: linear-gradient(135deg, rgba(220, 252, 231, 0.74), rgba(236, 253, 245, 0.88));
}

.profile-session-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(20, 118, 71, 0.1), rgba(13, 148, 136, 0.12));
  color: var(--primary-strong);
}

.profile-session-icon .fa-icon {
  width: 15px;
  height: 15px;
}

.profile-session-row strong,
.profile-session-row small,
.profile-session-row em {
  display: block;
  min-width: 0;
}

.profile-session-row strong {
  color: var(--foreground);
  font-size: 0.86rem;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-session-row small {
  margin-top: 2px;
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 800;
}

.profile-session-row em {
  margin-top: 2px;
  color: rgba(58, 91, 73, 0.74);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 700;
}

.profile-session-badge,
.profile-session-revoke {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 900;
  white-space: nowrap;
}

.profile-session-badge {
  background: rgba(22, 163, 74, 0.12);
  color: var(--primary-strong);
}

.profile-session-revoke {
  background: rgba(239, 68, 68, 0.1);
  color: #b91c1c;
  cursor: pointer;
}

.profile-session-revoke:disabled {
  cursor: wait;
  opacity: 0.72;
}

.profile-session-empty {
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(241, 245, 249, 0.72);
  color: var(--muted-foreground);
  font-size: 0.8rem;
  font-weight: 800;
}

.profile-phone-current,
.profile-phone-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 14px;
  font-size: 0.78rem;
  font-weight: 850;
}

.profile-phone-current {
  border: 1px solid rgba(20, 118, 71, 0.12);
  background: linear-gradient(135deg, rgba(236, 253, 245, 0.9), rgba(240, 249, 255, 0.7));
  color: var(--foreground);
}

.profile-phone-current span,
.profile-phone-notice .fa-icon {
  flex: 0 0 auto;
  color: var(--primary-strong);
}

.profile-phone-current small,
.profile-phone-current strong {
  display: block;
}

.profile-phone-current small {
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 800;
}

.profile-phone-current strong {
  margin-top: 1px;
  color: var(--foreground);
  font-size: 0.88rem;
  font-weight: 950;
}

.profile-phone-notice {
  border: 1px solid rgba(22, 163, 74, 0.16);
  background: rgba(220, 252, 231, 0.72);
  color: var(--primary-strong);
}

.badge-spark {
  position: absolute;
  z-index: 2;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #fff7b2;
  box-shadow:
    0 0 0 2px rgba(255, 247, 178, 0.24),
    0 0 14px rgba(255, 255, 255, 0.86);
  opacity: 0;
  pointer-events: none;
}

.badge-spark.spark-one {
  top: 9px;
  right: 10px;
}

.badge-spark.spark-two {
  left: 9px;
  bottom: 10px;
  width: 4px;
  height: 4px;
  background: #a7f3d0;
}

.page.is-mounted .profile-badge-token.is-earned .badge-spark {
  animation: profile-badge-twinkle 2.2s ease-in-out infinite;
  animation-delay: calc(var(--badge-order, 0) * 180ms);
}

.page.is-mounted .profile-badge-token.is-earned .spark-two {
  animation-delay: calc(720ms + var(--badge-order, 0) * 150ms);
}

.profile-badge-footer {
  display: grid;
  gap: 3px;
  padding-top: 2px;
}

.profile-badge-footer span,
.profile-badge-footer em {
  overflow: hidden;
  font-size: 0.68rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-badge-footer span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--foreground);
  font-weight: 800;
}

.profile-badge-footer span .fa-icon {
  width: 11px;
  height: 11px;
  color: #f59e0b;
  font-size: 0.68rem;
}

.profile-badge-footer em {
  color: var(--muted-foreground);
  font-style: normal;
  font-weight: 800;
}

.profile-badge-empty {
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted-foreground);
  font-size: 0.76rem;
  font-weight: 800;
}

.profile-badge-empty .fa-icon {
  color: var(--primary);
}

@keyframes profile-badge-glint {
  0%,
  22% {
    left: -60%;
    opacity: 0;
  }
  34% {
    opacity: 0.74;
  }
  52%,
  100% {
    left: 124%;
    opacity: 0;
  }
}

@keyframes profile-badge-twinkle {
  0%,
  100% {
    opacity: 0;
    transform: scale(0.55);
  }
  42% {
    opacity: 0.95;
    transform: scale(1.18);
  }
  58% {
    opacity: 0.42;
    transform: scale(0.84);
  }
}

.profile-action-list {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
}

.profile-action-row {
  border: 0;
  width: 100%;
  text-align: left;
  min-width: 0;
  min-height: 58px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 12px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: transparent;
  color: inherit;
}

.profile-action-row + .profile-action-row {
  border-top: 1px solid var(--border);
}

.profile-action-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: color-mix(in oklab, var(--primary) 10%, white);
  color: var(--primary);
}

.profile-action-icon .fa-icon {
  width: 15px;
  height: 15px;
  font-size: 0.82rem;
}

.profile-action-row span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.profile-action-row strong,
.profile-action-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-action-row strong {
  color: var(--foreground);
  font-size: 0.78rem;
  line-height: 1.25;
}

.profile-action-row small {
  color: var(--muted-foreground);
  font-size: 0.68rem;
}

.profile-action-row > .fa-icon {
  width: 11px;
  height: 11px;
  color: var(--muted-foreground);
  font-size: 0.68rem;
}

.profile-action-row.is-danger .profile-action-icon {
  background: color-mix(in oklab, var(--danger) 10%, white);
  color: var(--danger);
}

.profile-action-row.is-danger strong {
  color: var(--danger);
}

.profile-action-row[href="/admin"] .profile-action-icon {
  background: linear-gradient(135deg, #14532d, #0f766e);
  color: #fff;
}

.profile-info-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(239, 249, 242, 0.9)),
    var(--card);
}

.admin-stack {
  gap: 14px;
}

.admin-hero-card,
.admin-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(16, 67, 43, 0.08);
}

.admin-hero-card {
  isolation: isolate;
  min-height: 164px;
  display: grid;
  align-content: space-between;
  gap: 18px;
  padding: 18px;
  background:
    radial-gradient(circle at 88% 8%, rgba(250, 204, 21, 0.28), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent 42%),
    linear-gradient(135deg, #052f23, #0f6b4d 58%, #12a16d);
  color: #fff;
  box-shadow: 0 24px 60px rgba(5, 47, 35, 0.2);
}

.admin-hero-card::before,
.admin-hero-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.admin-hero-card::before {
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.17), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 56%);
}

.admin-hero-card::after {
  right: 18px;
  bottom: -36px;
  z-index: -1;
  width: 150px;
  height: 150px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  box-shadow:
    -54px -26px 0 rgba(255, 255, 255, 0.045),
    -98px 20px 0 rgba(250, 204, 21, 0.08);
}

.admin-hero-copy {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.admin-hero-card .eyebrow {
  width: fit-content;
  margin: 0;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.93);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.admin-hero-card h1 {
  max-width: 720px;
  margin: 0;
  color: #fff;
  font-size: 1.34rem;
  line-height: 1.08;
  letter-spacing: 0;
}

.admin-hero-card p:not(.eyebrow) {
  max-width: 680px;
  margin: 0;
  color: rgba(255, 255, 255, 0.84);
  font-size: 0.78rem;
  line-height: 1.45;
}

.admin-hero-status {
  min-width: 0;
  display: grid;
  gap: 10px;
  justify-items: start;
}

.admin-hero-status > span {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
}

.admin-hero-mini-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-hero-mini-stats strong {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.13);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 900;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.admin-hero-mini-stats em {
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 800;
}

@media (min-width: 768px) {
  .admin-overview-hero {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.42fr);
    align-items: end;
  }

  .admin-hero-status {
    justify-self: end;
    justify-items: end;
  }

  .admin-hero-mini-stats {
    justify-content: flex-end;
  }
}

.admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.admin-stat-card {
  min-width: 0;
  min-height: 104px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 7px;
  padding: 14px 10px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(20, 163, 111, 0.1), transparent),
    #fff;
  text-align: center;
}

.admin-stat-card span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(135deg, #0f766e, #22c55e);
  color: #fff;
}

.admin-stat-card strong {
  color: var(--foreground);
  font-size: 1.18rem;
  line-height: 1;
}

.admin-stat-card small {
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 700;
}

.admin-credential-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.admin-credential-card {
  min-width: 0;
  min-height: 110px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 7px;
  padding: 14px 10px;
  border: 1px solid color-mix(in oklab, var(--primary) 14%, white);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(15, 118, 110, 0.1), transparent 52%),
    #fff;
  text-align: center;
}

.admin-credential-card.tone-success {
  border-color: color-mix(in oklab, #16a34a 22%, white);
  background:
    linear-gradient(135deg, rgba(22, 163, 74, 0.11), transparent 52%),
    #fff;
}

.admin-credential-card.tone-warning {
  border-color: color-mix(in oklab, #f59e0b 26%, white);
  background:
    linear-gradient(135deg, rgba(245, 158, 11, 0.12), transparent 52%),
    #fff;
}

.admin-credential-card.tone-danger {
  border-color: color-mix(in oklab, var(--danger) 22%, white);
  background:
    linear-gradient(135deg, rgba(220, 38, 38, 0.1), transparent 52%),
    #fff;
}

.admin-credential-card.tone-muted {
  border-color: color-mix(in oklab, var(--muted-foreground) 14%, white);
  background:
    linear-gradient(135deg, rgba(100, 116, 139, 0.08), transparent 52%),
    #fff;
}

.admin-credential-card > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, #064e3b, #0f766e 58%, #22c55e);
  color: #fff;
  box-shadow: 0 10px 20px rgba(15, 118, 110, 0.14);
}

.admin-credential-card.tone-success > span {
  background: linear-gradient(135deg, #047857, #16a34a);
}

.admin-credential-card.tone-warning > span {
  background: linear-gradient(135deg, #92400e, #f59e0b);
}

.admin-credential-card.tone-danger > span {
  background: linear-gradient(135deg, #991b1b, #dc2626);
}

.admin-credential-card.tone-muted > span {
  background: linear-gradient(135deg, #475569, #94a3b8);
}

.admin-credential-card small {
  color: var(--muted-foreground);
  font-size: 0.64rem;
  font-weight: 900;
}

.admin-credential-card strong {
  max-width: 100%;
  overflow: hidden;
  color: var(--foreground);
  font-size: 0.78rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: normal;
}

.admin-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-color: var(--border);
}

.admin-integration-list,
.admin-module-grid {
  display: grid;
  gap: 10px;
}

.admin-integration-row,
.admin-module-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: #fff;
}

.admin-integration-row > span,
.admin-module-card > span {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: color-mix(in oklab, var(--primary) 10%, white);
  color: var(--primary);
}

.admin-module-card.is-ready > span {
  background: linear-gradient(135deg, #16a34a, #0d9488);
  color: #fff;
}

.admin-module-card.is-partial > span {
  background: linear-gradient(135deg, #f59e0b, #0ea5e9);
  color: #fff;
}

.admin-integration-row div,
.admin-module-card div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.admin-integration-row strong,
.admin-module-card strong {
  overflow: hidden;
  color: var(--foreground);
  font-size: 0.78rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-integration-row small,
.admin-module-card small {
  overflow: hidden;
  color: var(--muted-foreground);
  font-size: 0.68rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-module-card small {
  display: -webkit-box;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.admin-integration-row em,
.admin-module-card em {
  padding: 5px 8px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--muted) 70%, white);
  color: var(--muted-foreground);
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.admin-integration-row em.is-active,
.admin-module-card.is-ready em {
  background: color-mix(in oklab, var(--primary) 12%, white);
  color: var(--primary);
}

.admin-module-card.is-partial em {
  background: color-mix(in oklab, #f59e0b 16%, white);
  color: #b45309;
}

.admin-module-link,
.admin-hero-link {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #0f766e, #16a34a);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}

.admin-module-link.muted {
  background: color-mix(in oklab, var(--primary) 9%, white);
  color: var(--primary);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--primary) 14%, white);
}

.admin-hero-link {
  justify-self: start;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.admin-operations-stack {
  gap: 12px;
}

.admin-operations-hero {
  background:
    radial-gradient(circle at 86% 10%, rgba(14, 165, 233, 0.26), transparent 30%),
    radial-gradient(circle at 12% 18%, rgba(34, 197, 94, 0.22), transparent 32%),
    linear-gradient(135deg, #031d18, #064e3b 58%, #0f766e);
}

.ops-state-chip {
  text-transform: none;
}

.ops-state-chip.state-ready,
.admin-ops-kpi.state-ready span,
.admin-ops-block.state-ready .admin-ops-block-head > span,
.admin-ops-requirement.is-ready > span {
  background: linear-gradient(135deg, #047857, #22c55e);
  color: #fff;
}

.ops-state-chip.state-warning,
.ops-state-chip.state-watch,
.admin-ops-kpi.state-warning span,
.admin-ops-kpi.state-watch span,
.admin-ops-block.state-warning .admin-ops-block-head > span,
.admin-ops-block.state-watch .admin-ops-block-head > span {
  background: linear-gradient(135deg, #f59e0b, #0ea5e9);
  color: #fff;
}

.ops-state-chip.state-critical,
.admin-ops-kpi.state-critical span,
.admin-ops-block.state-critical .admin-ops-block-head > span,
.admin-ops-requirement.is-pending > span {
  background: linear-gradient(135deg, #be123c, #f97316);
  color: #fff;
}

.admin-ops-overview {
  gap: 14px;
}

.admin-ops-overview-head {
  display: grid;
  gap: 10px;
}

.admin-ops-overview-head p:not(.eyebrow) {
  margin: 4px 0 0;
  color: var(--muted-foreground);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.45;
}

.admin-ops-kpi-grid,
.admin-ops-grid,
.admin-ops-requirement-list,
.admin-ops-alert-list {
  display: grid;
  gap: 10px;
}

.admin-ops-kpi-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-ops-kpi {
  min-width: 0;
  min-height: 100px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 7px;
  padding: 13px 10px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(15, 118, 110, 0.08), transparent 54%),
    #fff;
  text-align: center;
}

.admin-ops-kpi span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 13px;
}

.admin-ops-kpi strong {
  max-width: 100%;
  overflow: hidden;
  color: var(--foreground);
  font-size: 0.96rem;
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-ops-kpi small {
  color: var(--muted-foreground);
  font-size: 0.64rem;
  font-weight: 900;
}

.admin-ops-block {
  align-content: start;
}

.admin-ops-block-head,
.admin-ops-requirement,
.admin-ops-alert {
  min-width: 0;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.admin-ops-block-head > span,
.admin-ops-requirement > span,
.admin-ops-alert > span {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 14px;
}

.admin-ops-block-head div,
.admin-ops-requirement div,
.admin-ops-alert div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.admin-ops-block-head strong,
.admin-ops-requirement strong,
.admin-ops-alert strong {
  overflow: hidden;
  color: var(--foreground);
  font-size: 0.8rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-ops-block-head small,
.admin-ops-requirement small,
.admin-ops-alert small {
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.35;
}

.admin-ops-block dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.admin-ops-block dl > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--border);
}

.admin-ops-block dt,
.admin-ops-block dd {
  margin: 0;
  font-size: 0.7rem;
  line-height: 1.3;
}

.admin-ops-block dt {
  color: var(--muted-foreground);
  font-weight: 800;
}

.admin-ops-block dd {
  min-width: 0;
  overflow: hidden;
  color: var(--foreground);
  font-weight: 900;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-ops-block dl > div.is-long {
  display: grid;
  gap: 5px;
}

.admin-ops-block dl > div.is-long dd {
  overflow-wrap: anywhere;
  text-align: left;
  white-space: normal;
}

.admin-ops-warning-list {
  display: grid;
  gap: 7px;
}

.admin-ops-warning-list span,
.admin-ops-alert {
  padding: 10px;
  border: 1px solid color-mix(in oklab, #f59e0b 24%, white);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), transparent 64%), #fff;
  color: #92400e;
  font-size: 0.68rem;
  font-weight: 800;
}

.admin-ops-alert {
  grid-template-columns: 34px minmax(0, 1fr) auto;
}

.admin-ops-alert > span {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: linear-gradient(135deg, #f59e0b, #0ea5e9);
  color: #fff;
}

.admin-ops-alert.level-critical {
  border-color: color-mix(in oklab, var(--danger) 24%, white);
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.1), transparent 64%), #fff;
}

.admin-ops-alert.level-critical > span {
  background: linear-gradient(135deg, #be123c, #f97316);
}

.admin-ops-alert em {
  color: var(--foreground);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 900;
}

.admin-ops-requirement {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: #fff;
}

.admin-ops-evidence {
  gap: 12px;
}

.admin-ops-evidence-head {
  display: grid;
  gap: 10px;
}

.admin-ops-evidence-head p:not(.eyebrow) {
  margin: 4px 0 0;
  color: var(--muted-foreground);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.45;
}

.admin-ops-evidence-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.admin-ops-evidence-stats strong {
  min-width: 0;
  display: grid;
  place-items: center;
  gap: 6px;
  padding: 12px 8px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background:
    linear-gradient(135deg, rgba(15, 118, 110, 0.07), transparent 58%),
    #fff;
  text-align: center;
}

.admin-ops-evidence-stats svg {
  width: 18px;
  height: 18px;
  color: var(--primary);
}

.admin-ops-evidence-stats span {
  color: var(--foreground);
  font-size: 1.05rem;
  line-height: 1;
  font-weight: 950;
}

.admin-ops-evidence-stats em {
  color: var(--muted-foreground);
  font-size: 0.64rem;
  font-style: normal;
  font-weight: 900;
}

.admin-ops-evidence-plan {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid color-mix(in oklab, var(--primary) 17%, white);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(5, 150, 105, 0.08), transparent 58%),
    color-mix(in oklab, var(--primary) 4%, white);
}

.admin-ops-evidence-plan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-ops-evidence-plan-head strong,
.admin-ops-evidence-plan-head span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 950;
}

.admin-ops-evidence-plan-head strong {
  color: var(--foreground);
}

.admin-ops-evidence-plan-head strong svg {
  width: 16px;
  height: 16px;
  color: var(--primary);
}

.admin-ops-evidence-plan-head span {
  padding: 0 10px;
  color: #065f46;
  background: rgba(220, 252, 231, 0.86);
}

.admin-ops-evidence-plan-list {
  display: grid;
  gap: 9px;
}

.admin-ops-evidence-action {
  min-width: 0;
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(15, 118, 110, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.86);
}

.admin-ops-evidence-action-title {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.admin-ops-evidence-action-title > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(135deg, #047857, #0f766e);
  font-size: 0.66rem;
  font-weight: 950;
}

.admin-ops-evidence-action-title div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.admin-ops-evidence-action-title strong {
  color: var(--foreground);
  font-size: 0.78rem;
  line-height: 1.25;
  font-weight: 950;
}

.admin-ops-evidence-action-title small {
  color: var(--muted-foreground);
  font-size: 0.67rem;
  line-height: 1.38;
  font-weight: 740;
}

.admin-ops-evidence-command-set {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.admin-ops-evidence-command-set label {
  color: #0f766e;
  font-size: 0.62rem;
  font-weight: 950;
  text-transform: uppercase;
}

.admin-ops-evidence-command-set code {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  padding: 9px 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 11px;
  color: #0f172a;
  background: rgba(248, 250, 252, 0.94);
  font-size: 0.66rem;
  line-height: 1.45;
  white-space: nowrap;
}

.admin-ops-evidence-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.admin-ops-evidence-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 0 8px;
  border: 1px solid rgba(15, 118, 110, 0.12);
  border-radius: 999px;
  color: var(--muted-foreground);
  background: rgba(255, 255, 255, 0.76);
  font-size: 0.62rem;
  font-weight: 880;
}

.admin-ops-evidence-meta svg {
  width: 13px;
  height: 13px;
  color: var(--primary);
}

.admin-ops-evidence-list {
  display: grid;
  gap: 8px;
}

.admin-ops-evidence-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
}

.admin-ops-evidence-row div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.admin-ops-evidence-row strong {
  overflow: hidden;
  color: var(--foreground);
  font-size: 0.75rem;
  font-weight: 950;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-ops-evidence-row small {
  color: var(--muted-foreground);
  font-size: 0.67rem;
  font-weight: 730;
  line-height: 1.4;
}

.admin-ops-evidence-row > span {
  padding: 6px 8px;
  border-radius: 999px;
  background: color-mix(in oklab, #f59e0b 12%, white);
  color: #92400e;
  font-size: 0.62rem;
  font-weight: 950;
  white-space: nowrap;
}

.admin-ops-evidence-row.is-verified > span {
  background: color-mix(in oklab, #22c55e 14%, white);
  color: #047857;
}

.admin-ops-evidence-row.is-deferred > span {
  background: color-mix(in oklab, #64748b 12%, white);
  color: #475569;
}

.admin-ops-runbook {
  gap: 12px;
}

.admin-ops-runbook-doc {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid color-mix(in oklab, var(--primary) 18%, white);
  border-radius: 12px;
  background: color-mix(in oklab, var(--primary) 7%, white);
  color: var(--foreground);
  font-size: 0.7rem;
  font-weight: 900;
}

.admin-ops-command-group,
.admin-ops-command-grid {
  display: grid;
  gap: 10px;
}

.admin-ops-command-group > strong {
  color: var(--foreground);
  font-size: 0.76rem;
  font-weight: 950;
}

.admin-ops-command-group code,
.admin-ops-command-grid code {
  display: block;
  overflow-x: auto;
  padding: 10px 11px;
  border: 1px solid color-mix(in oklab, var(--primary) 16%, white);
  border-radius: 12px;
  background: #061f1b;
  color: #d1fae5;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.55;
  white-space: nowrap;
}

.admin-ops-command-grid article {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background:
    linear-gradient(135deg, rgba(15, 118, 110, 0.07), transparent 56%),
    #fff;
}

.admin-ops-command-grid article > strong {
  color: var(--foreground);
  font-size: 0.76rem;
  font-weight: 950;
}

.admin-ops-command-grid article > small {
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 750;
  line-height: 1.45;
}

.admin-users-stack {
  gap: 12px;
}

.admin-subnav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 2px 1px 4px;
  scrollbar-width: none;
}

.admin-subnav::-webkit-scrollbar {
  display: none;
}

.admin-subnav a {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 7px;
  padding: 8px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 900;
}

.admin-subnav a.is-active {
  border-color: color-mix(in oklab, var(--primary) 24%, white);
  background: linear-gradient(135deg, #0f766e, #16a34a);
  color: #fff;
  box-shadow: 0 12px 24px rgba(15, 118, 110, 0.16);
}

.admin-users-hero {
  min-height: 150px;
}

.admin-users-panel {
  gap: 14px;
}

.admin-users-filter {
  display: grid;
  gap: 10px;
}

.admin-users-search {
  min-height: 44px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(20, 163, 111, 0.07), transparent),
    #fff;
  color: var(--muted-foreground);
}

.admin-users-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--foreground);
  font: inherit;
  font-size: 0.8rem;
}

.admin-users-filter-grid {
  display: grid;
  gap: 8px;
}

.admin-users-filter-grid.single {
  grid-template-columns: minmax(0, 1fr);
}

.admin-users-filter-grid > label {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.admin-users-filter-grid > label > span {
  color: var(--muted-foreground);
  font-size: 0.66rem;
  font-weight: 800;
}

.admin-users-filter-grid > label > input,
.admin-users-filter-grid > label > select {
  min-height: 42px;
  width: 100%;
  min-width: 0;
  border: 1px solid color-mix(in oklab, var(--border) 88%, #0f766e);
  border-radius: 13px;
  background:
    linear-gradient(135deg, rgba(20, 163, 111, 0.045), transparent 52%),
    #fff;
  color: var(--foreground);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 800;
  outline: 0;
  padding: 0 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.admin-notification-form {
  display: grid;
  gap: 12px;
}

.admin-notification-layout {
  display: grid;
  gap: 12px;
}

.admin-notification-fields {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.admin-notification-body-field,
.admin-notification-custom-users {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.admin-notification-body-field > span,
.admin-notification-custom-users > span {
  color: var(--muted-foreground);
  font-size: 0.66rem;
  font-weight: 800;
}

.admin-notification-body-field textarea,
.admin-notification-custom-users textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid color-mix(in oklab, var(--border) 88%, #0f766e);
  border-radius: 13px;
  background:
    linear-gradient(135deg, rgba(20, 163, 111, 0.045), transparent 52%),
    #fff;
  color: var(--foreground);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.45;
  outline: 0;
  padding: 10px;
  resize: vertical;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.admin-notification-custom-users.is-hidden {
  display: none;
}

.admin-notification-submit {
  min-height: 44px;
  width: 100%;
}

.admin-notification-preview {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-content: start;
  padding: 14px;
  border: 1px solid color-mix(in oklab, var(--primary) 16%, white);
  border-radius: 16px;
  background:
    radial-gradient(circle at 96% 10%, rgba(250, 204, 21, 0.18), transparent 30%),
    linear-gradient(135deg, rgba(6, 78, 59, 0.96), rgba(15, 118, 110, 0.92));
  color: #fff;
  box-shadow: 0 16px 34px rgba(6, 78, 59, 0.14);
}

.admin-notification-preview-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.admin-notification-preview div {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.admin-notification-preview small,
.admin-notification-preview em {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 800;
}

.admin-notification-preview strong {
  color: #fff;
  font-size: 0.92rem;
  line-height: 1.2;
}

.admin-notification-preview p {
  margin: 0;
  color: rgba(255, 255, 255, 0.84);
  font-size: 0.74rem;
  line-height: 1.45;
}

.admin-notification-list {
  display: grid;
  gap: 10px;
}

.admin-notification-batch {
  min-width: 0;
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(20, 163, 111, 0.055), transparent 54%),
    #fff;
}

.admin-notification-batch.status-failed {
  border-color: color-mix(in oklab, var(--danger) 24%, white);
  background:
    linear-gradient(135deg, rgba(220, 38, 38, 0.055), transparent 54%),
    #fff;
}

.admin-notification-batch-main {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.admin-notification-batch-main > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: linear-gradient(135deg, #0f766e, #16a34a);
  color: #fff;
}

.admin-notification-batch.status-failed .admin-notification-batch-main > span {
  background: linear-gradient(135deg, #991b1b, #ef4444);
}

.admin-notification-batch-main div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.admin-notification-batch-main strong {
  overflow: hidden;
  color: var(--foreground);
  font-size: 0.82rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-notification-batch-main small {
  overflow: hidden;
  color: var(--muted-foreground);
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-notification-batch-main em {
  padding: 5px 8px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--primary) 10%, white);
  color: var(--primary);
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.admin-notification-batch.status-failed .admin-notification-batch-main em {
  background: color-mix(in oklab, var(--danger) 10%, white);
  color: var(--danger);
}

.admin-notification-batch > p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.74rem;
  line-height: 1.45;
}

.admin-notification-progress {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in oklab, var(--muted) 72%, white);
}

.admin-notification-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0f766e, #22c55e, #facc15);
}

.admin-notification-batch-meta,
.admin-notification-batch-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.admin-notification-batch-meta span,
.admin-notification-batch-foot span {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--muted) 68%, white);
  color: var(--muted-foreground);
  font-size: 0.64rem;
  font-weight: 850;
}

.admin-notification-delivery {
  display: grid;
  gap: 12px;
}

.admin-notification-delivery-head {
  align-items: start;
}

.admin-notification-health {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border-radius: 999px;
  background: color-mix(in oklab, #16a34a 12%, white);
  color: #047857;
  font-size: 0.68rem;
  font-weight: 950;
  white-space: nowrap;
}

.admin-notification-health.state-critical {
  background: color-mix(in oklab, var(--danger) 13%, white);
  color: var(--danger);
}

.admin-notification-health.state-warning,
.admin-notification-health.state-watch {
  background: color-mix(in oklab, #f59e0b 15%, white);
  color: #92400e;
}

.admin-notification-health.state-processing {
  background: color-mix(in oklab, #0ea5e9 12%, white);
  color: #0369a1;
}

.admin-notification-delivery-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.admin-notification-delivery-stats span {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 10px;
  border: 1px solid color-mix(in oklab, var(--border) 80%, transparent);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(15, 118, 110, 0.07), rgba(250, 204, 21, 0.055));
  color: var(--foreground);
  font-size: 0.7rem;
  font-weight: 900;
  text-align: center;
}

.admin-notification-delivery-stats span {
  flex-wrap: wrap;
}

.admin-notification-delivery-stats strong {
  color: var(--foreground);
  font-size: 0.82rem;
}

.admin-notification-delivery-stats small {
  color: var(--muted-foreground);
  font-size: 0.62rem;
  font-weight: 850;
}

.admin-notification-monitor-alerts {
  display: grid;
  gap: 8px;
}

.admin-notification-monitor-alerts span {
  min-width: 0;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid color-mix(in oklab, #f59e0b 24%, var(--border));
  border-radius: 12px;
  background: color-mix(in oklab, #f59e0b 8%, white);
  color: #92400e;
}

.admin-notification-monitor-alerts span.level-critical {
  border-color: color-mix(in oklab, var(--danger) 28%, var(--border));
  background: color-mix(in oklab, var(--danger) 8%, white);
  color: var(--danger);
}

.admin-notification-monitor-alerts span.level-watch {
  border-color: color-mix(in oklab, #0ea5e9 22%, var(--border));
  background: color-mix(in oklab, #0ea5e9 7%, white);
  color: #0369a1;
}

.admin-notification-monitor-alerts strong {
  overflow: hidden;
  color: currentColor;
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-notification-monitor-alerts small {
  min-width: 28px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: currentColor;
  font-size: 0.64rem;
  font-weight: 950;
}

.admin-notification-window-stats {
  display: grid;
  gap: 5px;
  padding: 10px 12px;
  border: 1px solid color-mix(in oklab, var(--primary) 16%, var(--border));
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(15, 118, 110, 0.075), rgba(14, 165, 233, 0.055));
}

.admin-notification-window-stats span,
.admin-notification-window-stats em {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted-foreground);
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 850;
}

.admin-notification-window-stats strong {
  color: var(--foreground);
  font-size: 0.9rem;
  font-weight: 950;
}

.admin-notification-provider-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.admin-notification-provider-stats span {
  min-width: 0;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 2px 8px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid color-mix(in oklab, var(--border) 80%, transparent);
  border-radius: 13px;
  background: color-mix(in oklab, var(--muted) 64%, white);
}

.admin-notification-provider-stats span > .fa-icon {
  grid-row: span 2;
  color: var(--primary);
}

.admin-notification-provider-stats strong {
  overflow: hidden;
  color: var(--foreground);
  font-size: 0.7rem;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-notification-provider-stats small {
  color: var(--muted-foreground);
  font-size: 0.62rem;
  font-weight: 850;
}

.admin-notification-delivery-filter .admin-users-filter-grid {
  grid-template-columns: minmax(0, 1fr);
}

.admin-notification-delivery-list {
  display: grid;
  gap: 8px;
}

.admin-notification-delivery-item {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  padding: 10px;
  border: 1px solid color-mix(in oklab, var(--danger) 15%, var(--border));
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.045), rgba(15, 118, 110, 0.035));
}

.admin-notification-delivery-item.status-sent {
  border-color: color-mix(in oklab, #16a34a 18%, var(--border));
  background: linear-gradient(135deg, rgba(22, 163, 74, 0.055), rgba(15, 118, 110, 0.035));
}

.admin-notification-delivery-item.status-queued,
.admin-notification-delivery-item.status-sending {
  border-color: color-mix(in oklab, #0ea5e9 18%, var(--border));
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.055), rgba(15, 118, 110, 0.035));
}

.admin-notification-delivery-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(135deg, #991b1b, #ef4444);
  color: #fff;
}

.admin-notification-delivery-item.status-sent .admin-notification-delivery-icon {
  background: linear-gradient(135deg, #047857, #22c55e);
}

.admin-notification-delivery-item.status-queued .admin-notification-delivery-icon,
.admin-notification-delivery-item.status-sending .admin-notification-delivery-icon {
  background: linear-gradient(135deg, #0369a1, #38bdf8);
}

.admin-notification-delivery-item > div {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.admin-notification-delivery-item strong {
  overflow: hidden;
  color: var(--foreground);
  font-size: 0.78rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-notification-delivery-item p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.7rem;
  line-height: 1.4;
}

.admin-notification-delivery-item > em {
  padding: 5px 8px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--danger) 10%, white);
  color: var(--danger);
  font-size: 0.6rem;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.admin-notification-delivery-item.status-sent > em {
  background: color-mix(in oklab, #16a34a 10%, white);
  color: #047857;
}

.admin-notification-delivery-item.status-queued > em,
.admin-notification-delivery-item.status-sending > em {
  background: color-mix(in oklab, #0ea5e9 10%, white);
  color: #0369a1;
}

.admin-users-filter-grid > label > input::placeholder {
  color: color-mix(in oklab, var(--muted-foreground) 72%, white);
}

.admin-users-filter-grid > label:focus-within > span {
  color: var(--primary);
}

.admin-users-filter-grid > label > input:focus,
.admin-users-filter-grid > label > select:focus {
  border-color: color-mix(in oklab, var(--primary) 46%, white);
  box-shadow:
    0 0 0 3px color-mix(in oklab, var(--primary) 10%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.76);
}

.admin-users-filter-grid > button {
  min-height: 42px;
  width: 100%;
  align-self: end;
}

.admin-filter-form {
  min-width: 0;
  display: grid;
  gap: 9px;
  margin: 12px 0 14px;
  padding: 11px;
  border: 1px solid color-mix(in oklab, var(--primary) 13%, white);
  border-radius: 18px;
  background:
    radial-gradient(circle at 98% 0%, rgba(52, 211, 153, 0.13), transparent 34%),
    linear-gradient(135deg, rgba(236, 253, 245, 0.88), rgba(255, 255, 255, 0.96) 52%, rgba(240, 253, 250, 0.9));
  box-shadow: 0 14px 34px rgba(6, 78, 59, 0.07);
}

.admin-filter-form label {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.admin-filter-form label > span {
  overflow: hidden;
  color: var(--muted-foreground);
  font-size: 0.64rem;
  font-weight: 900;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-filter-form input,
.admin-filter-form select {
  width: 100%;
  min-width: 0;
  min-height: 41px;
  border: 1px solid color-mix(in oklab, var(--border) 84%, var(--primary));
  border-radius: 13px;
  outline: 0;
  background:
    linear-gradient(135deg, rgba(20, 163, 111, 0.05), transparent 58%),
    rgba(255, 255, 255, 0.95);
  color: var(--foreground);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74);
}

.admin-filter-form input {
  padding: 0 11px;
}

.admin-filter-form select {
  padding: 0 32px 0 11px;
}

.admin-filter-form input::placeholder {
  color: color-mix(in oklab, var(--muted-foreground) 68%, white);
}

.admin-filter-form label:focus-within > span {
  color: var(--primary);
}

.admin-filter-form input:focus,
.admin-filter-form select:focus {
  border-color: color-mix(in oklab, var(--primary) 48%, white);
  box-shadow:
    0 0 0 3px color-mix(in oklab, var(--primary) 10%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.admin-filter-form > button {
  min-height: 41px;
  width: 100%;
  align-self: end;
  justify-content: center;
}

.admin-users-select {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.admin-users-select span {
  color: var(--muted-foreground);
  font-size: 0.66rem;
  font-weight: 800;
}

.admin-users-select select {
  min-height: 42px;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: #fff;
  color: var(--foreground);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 800;
  padding: 0 10px;
}

.admin-users-submit {
  min-height: 42px;
}

.admin-users-list,
.admin-organizations-list {
  display: grid;
  gap: 10px;
}

.admin-user-card {
  min-width: 0;
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(15, 118, 110, 0.06), transparent 48%),
    #fff;
}

.admin-organization-card {
  min-width: 0;
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid color-mix(in oklab, var(--border) 88%, #0f766e);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(15, 118, 110, 0.08), transparent 50%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 253, 250, 0.96));
}

.admin-user-main {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.admin-user-avatar {
  overflow: hidden;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent),
    linear-gradient(135deg, #064e3b, #0f766e 58%, #22c55e);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 900;
  box-shadow: 0 10px 20px rgba(15, 118, 110, 0.16);
}

.admin-user-avatar img,
.admin-organization-avatar img,
.admin-leaderboard-avatar img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.admin-user-avatar.has-image,
.admin-organization-avatar.has-image,
.admin-leaderboard-avatar.has-image,
.sidebar-avatar.has-image,
.leaderboard-row-avatar.has-image,
.podium-avatar.has-image,
.achievement-share-avatar.has-image,
.achievement-share-public-member > strong.has-image {
  background: #eef8f1;
}

.admin-organization-avatar {
  overflow: hidden;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.22), transparent),
    linear-gradient(135deg, #0f172a, #0f766e 54%, #84cc16);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 950;
  box-shadow: 0 12px 22px rgba(15, 118, 110, 0.18);
}

.admin-user-avatar.small {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  font-size: 0.68rem;
}

.admin-user-main div,
.admin-organization-main div,
.admin-user-table-account span {
  min-width: 0;
}

.admin-user-main strong,
.admin-organization-main strong,
.admin-user-table-account strong {
  display: block;
  overflow: hidden;
  color: var(--foreground);
  font-size: 0.84rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-user-main small,
.admin-organization-main small,
.admin-user-table-account small {
  display: block;
  overflow: hidden;
  color: var(--muted-foreground);
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-user-contact {
  display: grid;
  gap: 6px;
  color: var(--muted-foreground);
  font-size: 0.7rem;
}

.admin-organization-main {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.admin-organization-meta {
  display: grid;
  gap: 6px;
  color: var(--muted-foreground);
  font-size: 0.7rem;
}

.admin-user-contact span,
.admin-organization-meta span {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-user-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-user-actions {
  display: grid;
  gap: 8px;
}

.admin-user-manage-button {
  width: 100%;
  justify-content: center;
  min-height: 40px;
  border-color: color-mix(in oklab, var(--primary) 22%, var(--border));
  background:
    linear-gradient(135deg, rgba(15, 118, 110, 0.1), rgba(34, 197, 94, 0.06)),
    #fff;
  color: var(--primary-strong);
  font-weight: 950;
}

.admin-user-manage-button.compact {
  min-height: 34px;
  padding: 7px 10px;
  font-size: 0.68rem;
}

.admin-user-dialog {
  width: min(760px, calc(100vw - 22px));
  max-height: min(88dvh, 780px);
  gap: 13px;
  padding: 14px;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(15, 118, 110, 0.1), transparent 46%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 253, 249, 0.98));
}

.admin-user-dialog-head {
  grid-template-columns: 46px minmax(0, 1fr) auto;
  padding-bottom: 2px;
}

.admin-user-dialog-head > .admin-user-avatar {
  width: 46px;
  height: 46px;
  border-radius: 15px;
}

.admin-user-dialog-body {
  gap: 10px;
}

.admin-user-dialog-section {
  display: grid;
  gap: 11px;
  padding: 12px;
  border: 1px solid color-mix(in oklab, var(--border) 86%, #0f766e);
  border-radius: 15px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(240, 253, 244, 0.92));
}

.admin-user-dialog-section.muted {
  background: rgba(248, 250, 252, 0.86);
}

.admin-user-dialog-section-head {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}

.admin-user-dialog-section-head > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: linear-gradient(135deg, #064e3b, #0f766e 58%, #22c55e);
  color: #fff;
  box-shadow: 0 10px 22px rgba(15, 118, 110, 0.14);
}

.admin-user-dialog-section-head strong,
.admin-user-dialog-section-head small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-user-dialog-section-head strong {
  color: var(--foreground);
  font-size: 0.86rem;
  font-weight: 950;
}

.admin-user-dialog-section-head small {
  margin-top: 2px;
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 760;
  line-height: 1.35;
}

.admin-user-form-grid {
  display: grid;
  gap: 9px;
}

.admin-user-form-grid.two {
  grid-template-columns: minmax(0, 1fr);
}

.admin-user-form-grid label,
.admin-user-form-field {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.admin-user-form-grid span,
.admin-user-form-field span {
  color: var(--muted-foreground);
  font-size: 0.66rem;
  font-weight: 900;
}

.admin-user-form-grid input,
.admin-user-form-grid select,
.admin-user-form-field input,
.admin-user-form-field select {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  border: 1px solid color-mix(in oklab, var(--border) 88%, #0f766e);
  border-radius: 12px;
  background: #fff;
  color: var(--foreground);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 800;
  outline: 0;
  padding: 0 11px;
}

.admin-user-form-grid input:focus,
.admin-user-form-grid select:focus,
.admin-user-form-field input:focus {
  border-color: color-mix(in oklab, var(--primary) 52%, var(--border));
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.11);
}

.admin-user-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.admin-user-dialog-actions .button,
.admin-user-dialog-actions .button-secondary {
  min-height: 40px;
}

.admin-user-security-form {
  display: grid;
  gap: 10px;
  padding-top: 2px;
}

.admin-user-security-form.compact {
  padding-top: 9px;
  border-top: 1px dashed color-mix(in oklab, var(--border) 86%, #0f766e);
}

.admin-user-security-form.danger {
  border-top-color: color-mix(in oklab, var(--danger) 36%, var(--border));
}

.admin-delete-confirm {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  color: color-mix(in oklab, var(--danger) 78%, #3b1d14);
  font-size: 0.7rem;
  font-weight: 820;
  line-height: 1.35;
}

.admin-delete-confirm input {
  margin-top: 2px;
}

.admin-account-summary.flat {
  padding: 0;
}

.admin-user-admin-role-panel {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid color-mix(in oklab, var(--border) 88%, #0f766e);
  border-radius: 13px;
  background:
    linear-gradient(135deg, rgba(15, 118, 110, 0.08), rgba(34, 197, 94, 0.04)),
    rgba(255, 255, 255, 0.9);
}

.admin-user-admin-role-panel[hidden] {
  display: none;
}

.admin-user-admin-role-head {
  display: grid;
  gap: 2px;
}

.admin-user-admin-role-head strong {
  color: var(--foreground);
  font-size: 0.78rem;
  font-weight: 950;
}

.admin-user-admin-role-head small {
  color: var(--muted-foreground);
  font-size: 0.66rem;
  font-weight: 760;
}

@media (min-width: 720px) {
  .admin-user-form-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.admin-organization-tags,
.admin-organization-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-organization-note {
  margin: 0;
  padding: 9px 10px;
  border-radius: 13px;
  background: rgba(15, 118, 110, 0.07);
  color: var(--muted-foreground);
  font-size: 0.7rem;
  font-weight: 750;
  line-height: 1.45;
}

.admin-organization-members-dialog {
  width: min(760px, calc(100vw - 24px));
}

.admin-organization-owner-dialog {
  width: min(560px, calc(100vw - 24px));
}

.admin-organization-dialog {
  width: min(560px, calc(100vw - 24px));
  max-height: min(88dvh, 680px);
  gap: 12px;
  padding: 14px;
  border: 1px solid color-mix(in oklab, var(--primary) 18%, white);
  border-radius: 20px;
  background:
    radial-gradient(circle at 100% 0%, rgba(34, 197, 94, 0.12), transparent 32%),
    linear-gradient(145deg, rgba(236, 253, 245, 0.96), rgba(255, 255, 255, 0.98) 52%, rgba(240, 253, 250, 0.94));
  box-shadow: 0 30px 86px rgba(6, 78, 59, 0.28);
}

.admin-organization-dialog .admin-gamification-dialog-head {
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 4px 2px 10px;
  border-bottom: 1px solid color-mix(in oklab, var(--border) 82%, #0f766e);
}

.admin-organization-dialog .admin-gamification-dialog-head > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, #064e3b, #0f766e 58%, #22c55e);
  color: #fff;
  box-shadow: 0 12px 24px rgba(15, 118, 110, 0.18);
}

.admin-organization-dialog .admin-gamification-dialog-head strong,
.admin-organization-dialog .admin-gamification-dialog-head small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-organization-dialog .admin-gamification-dialog-head strong {
  color: var(--foreground);
  font-size: 0.92rem;
  font-weight: 950;
}

.admin-organization-dialog .admin-gamification-dialog-head small {
  margin-top: 2px;
  color: var(--muted-foreground);
  font-size: 0.7rem;
  font-weight: 780;
}

.admin-organization-dialog .admin-gamification-dialog-head > button[data-action-close] {
  width: 34px;
  height: 34px;
  border: 1px solid color-mix(in oklab, var(--border) 82%, #0f766e);
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.9);
  color: var(--muted-foreground);
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.admin-organization-dialog .admin-gamification-dialog-head > button[data-action-close]:hover,
.admin-organization-dialog .admin-gamification-dialog-head > button[data-action-close]:focus-visible {
  border-color: color-mix(in oklab, var(--primary) 46%, white);
  background: color-mix(in oklab, var(--primary) 9%, white);
  color: var(--primary-strong);
  outline: 0;
  transform: translateY(-1px);
}

.admin-organization-dialog .admin-gamification-dialog-body {
  gap: 12px;
}

.admin-organization-status-form {
  display: grid;
  gap: 12px;
  padding: 2px;
}

.admin-organization-status-form .admin-field-grid.compact {
  display: grid;
  gap: 10px;
}

.admin-organization-status-form .admin-users-select,
.admin-organization-status-form .admin-reason-field {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.admin-organization-status-form .admin-users-select > span,
.admin-organization-status-form .admin-reason-field > span {
  color: var(--muted-foreground);
  font-size: 0.66rem;
  font-weight: 900;
}

.admin-organization-status-form .admin-users-select > select,
.admin-organization-status-form .admin-reason-field > input,
.admin-organization-status-form .admin-reason-field > textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid color-mix(in oklab, var(--border) 86%, #0f766e);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(20, 163, 111, 0.045), transparent 52%),
    rgba(255, 255, 255, 0.96);
  color: var(--foreground);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 800;
  outline: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74);
}

.admin-organization-status-form .admin-users-select > select,
.admin-organization-status-form .admin-reason-field > input {
  min-height: 42px;
  padding: 0 11px;
}

.admin-organization-status-form .admin-reason-field > textarea {
  min-height: 92px;
  padding: 10px 11px;
  resize: vertical;
  line-height: 1.45;
}

.admin-organization-status-form .admin-reason-field > input::placeholder,
.admin-organization-status-form .admin-reason-field > textarea::placeholder {
  color: color-mix(in oklab, var(--muted-foreground) 68%, white);
  font-weight: 760;
}

.admin-organization-status-form .admin-users-select:focus-within > span,
.admin-organization-status-form .admin-reason-field:focus-within > span {
  color: var(--primary);
}

.admin-organization-status-form .admin-users-select > select:focus,
.admin-organization-status-form .admin-reason-field > input:focus,
.admin-organization-status-form .admin-reason-field > textarea:focus {
  border-color: color-mix(in oklab, var(--primary) 54%, white);
  box-shadow:
    0 0 0 3px color-mix(in oklab, var(--primary) 10%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.admin-organization-status-form .admin-form-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 2px;
}

.admin-organization-status-form .admin-form-actions .button {
  min-height: 40px;
  padding-inline: 14px;
}

.admin-org-owner-transfer-form {
  padding: 12px;
  border: 1px solid color-mix(in oklab, var(--primary) 16%, white);
  border-radius: 15px;
  background:
    linear-gradient(135deg, rgba(15, 118, 110, 0.08), transparent 48%),
    rgba(255, 255, 255, 0.96);
}

:is(.admin-org-owner-transfer-form, .admin-org-member-add-form, .admin-org-member-edit-form, .admin-org-member-delete-form) {
  min-width: 0;
  display: grid;
  gap: 10px;
}

:is(.admin-org-owner-transfer-form, .admin-org-member-add-form, .admin-org-member-edit-form, .admin-org-member-delete-form) .admin-field-grid.compact {
  display: grid;
  gap: 9px;
}

:is(.admin-org-owner-transfer-form, .admin-org-member-add-form, .admin-org-member-edit-form, .admin-org-member-delete-form) .admin-users-select,
:is(.admin-org-owner-transfer-form, .admin-org-member-add-form, .admin-org-member-edit-form, .admin-org-member-delete-form) .admin-reason-field {
  min-width: 0;
  display: grid;
  gap: 6px;
}

:is(.admin-org-owner-transfer-form, .admin-org-member-add-form, .admin-org-member-edit-form, .admin-org-member-delete-form) .admin-users-select > span,
:is(.admin-org-owner-transfer-form, .admin-org-member-add-form, .admin-org-member-edit-form, .admin-org-member-delete-form) .admin-reason-field > span {
  color: var(--muted-foreground);
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1.28;
}

:is(.admin-org-owner-transfer-form, .admin-org-member-add-form, .admin-org-member-edit-form, .admin-org-member-delete-form) .admin-users-select > select,
:is(.admin-org-owner-transfer-form, .admin-org-member-add-form, .admin-org-member-edit-form, .admin-org-member-delete-form) .admin-reason-field > input,
:is(.admin-org-owner-transfer-form, .admin-org-member-add-form, .admin-org-member-edit-form, .admin-org-member-delete-form) .admin-reason-field > textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid color-mix(in oklab, var(--border) 86%, #0f766e);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(20, 163, 111, 0.045), transparent 52%),
    rgba(255, 255, 255, 0.96);
  color: var(--foreground);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 800;
  outline: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74);
}

:is(.admin-org-owner-transfer-form, .admin-org-member-add-form, .admin-org-member-edit-form, .admin-org-member-delete-form) .admin-users-select > select,
:is(.admin-org-owner-transfer-form, .admin-org-member-add-form, .admin-org-member-edit-form, .admin-org-member-delete-form) .admin-reason-field > input {
  min-height: 42px;
  padding: 0 11px;
}

:is(.admin-org-owner-transfer-form, .admin-org-member-add-form, .admin-org-member-edit-form, .admin-org-member-delete-form) .admin-reason-field > textarea {
  min-height: 88px;
  padding: 10px 11px;
  resize: vertical;
  line-height: 1.45;
}

:is(.admin-org-owner-transfer-form, .admin-org-member-add-form, .admin-org-member-edit-form, .admin-org-member-delete-form) .admin-reason-field > input::placeholder,
:is(.admin-org-owner-transfer-form, .admin-org-member-add-form, .admin-org-member-edit-form, .admin-org-member-delete-form) .admin-reason-field > textarea::placeholder {
  color: color-mix(in oklab, var(--muted-foreground) 68%, white);
  font-weight: 760;
}

:is(.admin-org-owner-transfer-form, .admin-org-member-add-form, .admin-org-member-edit-form, .admin-org-member-delete-form) .admin-users-select:focus-within > span,
:is(.admin-org-owner-transfer-form, .admin-org-member-add-form, .admin-org-member-edit-form, .admin-org-member-delete-form) .admin-reason-field:focus-within > span {
  color: var(--primary);
}

:is(.admin-org-owner-transfer-form, .admin-org-member-add-form, .admin-org-member-edit-form, .admin-org-member-delete-form) .admin-users-select > select:focus,
:is(.admin-org-owner-transfer-form, .admin-org-member-add-form, .admin-org-member-edit-form, .admin-org-member-delete-form) .admin-reason-field > input:focus,
:is(.admin-org-owner-transfer-form, .admin-org-member-add-form, .admin-org-member-edit-form, .admin-org-member-delete-form) .admin-reason-field > textarea:focus {
  border-color: color-mix(in oklab, var(--primary) 54%, white);
  box-shadow:
    0 0 0 3px color-mix(in oklab, var(--primary) 10%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

:is(.admin-org-owner-transfer-form, .admin-org-member-add-form, .admin-org-member-edit-form, .admin-org-member-delete-form) .admin-form-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 2px;
}

:is(.admin-org-owner-transfer-form, .admin-org-member-add-form, .admin-org-member-edit-form, .admin-org-member-delete-form) .admin-form-actions .button,
:is(.admin-org-owner-transfer-form, .admin-org-member-add-form, .admin-org-member-edit-form, .admin-org-member-delete-form) .admin-form-actions .button-secondary {
  min-height: 40px;
  padding-inline: 14px;
}

@media (min-width: 680px) {
  :is(.admin-org-member-add-form, .admin-org-member-edit-form) .admin-field-grid.compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.admin-org-owner-current,
.admin-org-owner-transfer-form {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.admin-org-owner-current {
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  padding: 11px;
  border: 1px solid color-mix(in oklab, #d97706 20%, white);
  border-radius: 15px;
  background:
    linear-gradient(135deg, rgba(245, 158, 11, 0.1), transparent 48%),
    #fff;
}

.admin-org-owner-current > div {
  min-width: 0;
}

.admin-org-owner-current strong,
.admin-org-owner-current small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-org-owner-current strong {
  color: var(--foreground);
  font-size: 0.84rem;
  font-weight: 930;
}

.admin-org-owner-current small {
  color: var(--muted-foreground);
  font-size: 0.68rem;
}

.admin-org-owner-current .admin-org-member-pill {
  grid-column: 1 / -1;
  width: max-content;
}

.admin-org-member-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.admin-org-member-add-form,
.admin-org-member-card,
.admin-org-member-details {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.admin-org-member-add-form {
  padding: 12px;
  border: 1px solid color-mix(in oklab, var(--primary) 16%, white);
  border-radius: 15px;
  background:
    linear-gradient(135deg, rgba(15, 118, 110, 0.08), transparent 48%),
    #fff;
}

.admin-org-member-add-form > div:first-child {
  display: grid;
  gap: 3px;
}

.admin-org-member-add-form > div:first-child strong {
  color: var(--foreground);
  font-size: 0.86rem;
}

.admin-org-member-list {
  display: grid;
  gap: 9px;
}

.admin-org-member-card {
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background:
    linear-gradient(135deg, rgba(22, 163, 74, 0.06), transparent 50%),
    #fff;
}

.admin-org-member-card.is-locked {
  border-color: color-mix(in oklab, #b68a12 22%, white);
  background:
    linear-gradient(135deg, rgba(234, 179, 8, 0.08), transparent 48%),
    #fff;
}

.admin-org-member-head {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}

.admin-org-member-head > div {
  min-width: 0;
}

.admin-org-member-head strong,
.admin-org-member-head small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-org-member-head strong {
  color: var(--foreground);
  font-size: 0.82rem;
  font-weight: 930;
}

.admin-org-member-head small,
.admin-org-member-meta {
  color: var(--muted-foreground);
  font-size: 0.68rem;
}

.admin-org-member-pills {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-org-member-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid color-mix(in oklab, var(--border) 80%, white);
  border-radius: 999px;
  background: #fff;
  color: var(--muted-foreground);
  font-size: 0.64rem;
  font-weight: 900;
}

.admin-org-member-pill.tone-primary,
.admin-org-member-pill.tone-success {
  border-color: color-mix(in oklab, #0f766e 26%, white);
  background: color-mix(in oklab, #10b981 10%, white);
  color: #0f6a4f;
}

.admin-org-member-pill.tone-gold,
.admin-org-member-pill.tone-warning {
  border-color: color-mix(in oklab, #d97706 24%, white);
  background: color-mix(in oklab, #f59e0b 10%, white);
  color: #8a5608;
}

.admin-org-member-pill.tone-danger {
  border-color: color-mix(in oklab, var(--danger) 24%, white);
  background: color-mix(in oklab, var(--danger) 8%, white);
  color: var(--danger);
}

.admin-org-member-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.admin-org-member-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.admin-org-member-details {
  padding-top: 2px;
}

.admin-org-member-details summary {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--primary);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 900;
}

.admin-org-member-edit-form,
.admin-org-member-delete-form {
  padding: 10px;
  border: 1px dashed color-mix(in oklab, var(--primary) 18%, white);
  border-radius: 13px;
  background: color-mix(in oklab, #f0fdf4 58%, white);
}

.admin-system-config-form,
.admin-system-config-groups,
.admin-system-config-fields {
  display: grid;
  gap: 12px;
}

.admin-system-config-group {
  min-width: 0;
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid color-mix(in oklab, var(--border) 86%, #0f766e);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(15, 118, 110, 0.08), transparent 44%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 252, 249, 0.96));
}

.admin-system-config-group > header {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.admin-system-config-group > header > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(135deg, #0f172a, #0f766e);
  color: #fff;
  box-shadow: 0 12px 22px rgba(15, 118, 110, 0.16);
}

.admin-system-config-group header div {
  min-width: 0;
}

.admin-system-config-group header strong {
  display: block;
  color: var(--foreground);
  font-size: 0.86rem;
  font-weight: 950;
  line-height: 1.2;
}

.admin-system-config-group header small {
  display: block;
  margin-top: 3px;
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 750;
  line-height: 1.35;
}

.admin-system-config-group header em {
  padding: 7px 9px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--primary) 10%, white);
  color: var(--primary);
  font-size: 0.64rem;
  font-style: normal;
  font-weight: 950;
  white-space: nowrap;
}

.admin-system-setting-field {
  min-width: 0;
  display: grid;
  gap: 9px;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
}

.admin-system-setting-field.has-error {
  border-color: color-mix(in oklab, var(--danger) 42%, white);
  background: color-mix(in oklab, var(--danger) 5%, white);
}

.admin-system-setting-head {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.admin-system-setting-head div:first-child {
  min-width: 0;
}

.admin-system-setting-head strong {
  display: block;
  color: var(--foreground);
  font-size: 0.78rem;
  font-weight: 950;
  line-height: 1.25;
}

.admin-system-setting-head small {
  display: block;
  margin-top: 3px;
  color: var(--muted-foreground);
  font-size: 0.66rem;
  font-weight: 740;
  line-height: 1.4;
}

.admin-system-setting-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-system-setting-field input:not([type="checkbox"]),
.admin-system-setting-field textarea,
.admin-system-config-reason input {
  width: 100%;
  min-height: 40px;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  color: var(--foreground);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 760;
  line-height: 1.45;
  padding: 9px 10px;
  outline: none;
}

.admin-system-setting-field textarea {
  min-height: 80px;
  resize: vertical;
}

.admin-system-setting-field input:focus,
.admin-system-setting-field textarea:focus,
.admin-system-config-reason input:focus {
  border-color: color-mix(in oklab, var(--primary) 46%, white);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 12%, transparent);
}

.admin-system-toggle {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  padding: 6px 10px 6px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
}

.admin-system-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.admin-system-toggle span {
  width: 42px;
  height: 24px;
  position: relative;
  border-radius: 999px;
  background: color-mix(in oklab, var(--muted-foreground) 20%, white);
  transition: background 0.18s ease;
}

.admin-system-toggle span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 9px rgba(15, 23, 42, 0.16);
  transition: transform 0.18s ease;
}

.admin-system-toggle input:checked + span {
  background: linear-gradient(135deg, #0f766e, #16a34a);
}

.admin-system-toggle input:checked + span::after {
  transform: translateX(18px);
}

.admin-system-toggle strong {
  color: var(--foreground);
  font-size: 0.72rem;
  font-weight: 900;
  white-space: nowrap;
}

.admin-system-setting-rule,
.admin-field-error,
.admin-system-config-reason small {
  color: var(--muted-foreground);
  font-size: 0.63rem;
  font-weight: 780;
  line-height: 1.35;
}

.admin-field-error,
.admin-system-config-reason small {
  min-height: 0;
  color: var(--danger);
}

.admin-system-config-reason {
  display: grid;
  gap: 6px;
}

.admin-public-pages-layout {
  display: grid;
  gap: 14px;
}

.admin-public-page-picker,
.admin-public-page-editor,
.admin-public-page-form {
  min-width: 0;
}

.admin-public-page-list {
  display: grid;
  gap: 9px;
}

.admin-public-page-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 10px;
  border: 1px solid color-mix(in oklab, var(--border) 88%, transparent);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.admin-public-page-card:hover,
.admin-public-page-card.is-active {
  border-color: color-mix(in oklab, var(--primary) 34%, var(--border));
  background:
    linear-gradient(135deg, rgba(15, 118, 110, 0.09), rgba(22, 163, 74, 0.045)),
    rgba(255, 255, 255, 0.95);
}

.admin-public-page-card.is-active {
  transform: translateY(-1px);
}

.admin-public-page-card > span:first-child {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, #064e3b, #0f766e);
  color: #fff;
}

.admin-public-page-card > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.admin-public-page-card strong,
.admin-public-page-form-head h2 {
  overflow: hidden;
  color: var(--foreground);
  text-overflow: ellipsis;
}

.admin-public-page-card strong {
  font-size: 0.78rem;
  font-weight: 950;
  white-space: nowrap;
}

.admin-public-page-card small {
  overflow: hidden;
  color: var(--muted-foreground);
  font-size: 0.64rem;
  font-weight: 720;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-public-page-card em {
  grid-column: 2 / -1;
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--muted) 72%, white);
  color: var(--muted-foreground);
  font-size: 0.58rem;
  font-style: normal;
  font-weight: 950;
}

.admin-public-page-form {
  display: grid;
  gap: 14px;
}

.admin-public-page-form-head {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.admin-public-page-form-head > div {
  min-width: 0;
}

.admin-public-page-form-head .button-secondary {
  width: fit-content;
}

.admin-public-page-form-grid,
.admin-public-page-editor-grid {
  display: grid;
  gap: 10px;
}

.admin-form-field {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.admin-form-field > span,
.admin-reason-field > span {
  color: var(--foreground);
  font-size: 0.68rem;
  font-weight: 950;
}

.admin-form-field input,
.admin-form-field select,
.admin-form-field textarea,
.admin-public-page-reason input {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 10px 11px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  color: var(--foreground);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 760;
  line-height: 1.45;
  outline: none;
}

.admin-form-field textarea {
  resize: vertical;
}

.admin-form-field input:focus,
.admin-form-field select:focus,
.admin-form-field textarea:focus,
.admin-public-page-reason input:focus,
.admin-public-page-json-block textarea:focus {
  border-color: color-mix(in oklab, var(--primary) 46%, white);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 12%, transparent);
}

.admin-form-field [aria-invalid="true"],
.admin-public-page-json-block textarea[aria-invalid="true"],
.admin-public-page-reason input[aria-invalid="true"] {
  border-color: color-mix(in oklab, var(--danger) 48%, white);
  background: color-mix(in oklab, var(--danger) 4%, white);
}

.admin-public-page-json-block {
  min-width: 0;
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--border) 86%, transparent);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(15, 118, 110, 0.055), transparent 52%),
    rgba(255, 255, 255, 0.88);
}

.admin-public-page-json-block summary {
  min-height: 48px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  cursor: pointer;
  list-style: none;
}

.admin-public-page-json-block summary::-webkit-details-marker {
  display: none;
}

.admin-public-page-json-block summary > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: color-mix(in oklab, var(--primary) 12%, white);
  color: var(--primary);
}

.admin-public-page-json-block summary strong {
  overflow: hidden;
  color: var(--foreground);
  font-size: 0.75rem;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-public-page-json-block summary small {
  padding: 4px 8px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--muted) 70%, white);
  color: var(--muted-foreground);
  font-size: 0.58rem;
  font-weight: 950;
}

.admin-public-page-json-block textarea {
  width: calc(100% - 20px);
  min-height: 150px;
  margin: 0 10px 10px;
  padding: 10px;
  border: 1px solid color-mix(in oklab, var(--border) 88%, transparent);
  border-radius: 12px;
  background: #fff;
  color: #0f172a;
  font: 760 0.68rem/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  resize: vertical;
  outline: none;
}

.admin-public-page-json-block .admin-field-error {
  display: block;
  padding: 0 10px 10px;
}

.admin-public-page-preview {
  min-width: 0;
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(6, 78, 59, 0.94), rgba(15, 118, 110, 0.92)),
    var(--primary);
  color: #fff;
}

.admin-public-page-preview h3,
.admin-public-page-preview p {
  margin: 0;
}

.admin-public-page-preview h3 {
  color: #fff;
  font-size: clamp(1rem, 4vw, 1.35rem);
  font-weight: 950;
  line-height: 1.12;
}

.admin-public-page-preview p {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.45;
}

.admin-public-page-preview .eyebrow {
  color: rgba(255, 255, 255, 0.68);
}

.admin-public-page-preview-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.admin-public-page-preview-metrics span {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.13);
  color: #fff;
  font-size: 0.64rem;
  font-weight: 900;
}

.admin-public-page-reason {
  display: grid;
  gap: 6px;
}

.admin-user-tag,
.admin-user-status,
.admin-org-status {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 8px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--muted) 72%, white);
  color: var(--muted-foreground);
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.admin-user-status.status-active,
.admin-user-tag.tone-success,
.admin-org-status.tone-success {
  background: color-mix(in oklab, #16a34a 13%, white);
  color: #0f7a3b;
}

.admin-user-status.status-pending,
.admin-org-status.tone-warning {
  background: color-mix(in oklab, #f59e0b 15%, white);
  color: #9a5d00;
}

.admin-user-status.status-suspended,
.admin-org-status.tone-danger {
  background: color-mix(in oklab, var(--danger) 12%, white);
  color: var(--danger);
}

.admin-org-status.tone-muted {
  background: color-mix(in oklab, var(--muted) 76%, white);
  color: var(--muted-foreground);
}

.admin-user-tag.tone-role {
  background: color-mix(in oklab, #0f766e 11%, white);
  color: #0f766e;
}

.admin-user-tag.tone-type {
  background: color-mix(in oklab, #2563eb 10%, white);
  color: #1d4ed8;
}

.admin-user-tag.tone-muted {
  background: color-mix(in oklab, var(--muted) 76%, white);
  color: var(--muted-foreground);
}

.admin-user-tag.tone-warning {
  background: color-mix(in oklab, #f59e0b 14%, white);
  color: #9a5d00;
}

.admin-user-tag.tone-danger {
  background: color-mix(in oklab, var(--danger) 12%, white);
  color: var(--danger);
}

.admin-user-tag.tone-super {
  background: linear-gradient(135deg, #14532d, #0f766e);
  color: #fff;
}

.admin-role-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-access-editor,
.admin-account-editor,
.admin-security-editor {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.76);
}

.admin-account-editor {
  border-color: color-mix(in oklab, #2563eb 18%, var(--border));
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.06), transparent 54%),
    rgba(255, 255, 255, 0.84);
}

.admin-security-editor {
  border-color: color-mix(in oklab, #0f766e 20%, var(--border));
  background:
    linear-gradient(135deg, rgba(15, 118, 110, 0.06), transparent 54%),
    rgba(255, 255, 255, 0.82);
}

.admin-access-editor summary,
.admin-account-editor summary,
.admin-security-editor summary {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  color: var(--foreground);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 900;
  list-style: none;
}

.admin-access-editor summary::-webkit-details-marker,
.admin-account-editor summary::-webkit-details-marker,
.admin-security-editor summary::-webkit-details-marker {
  display: none;
}

.admin-access-editor form,
.admin-account-editor form,
.admin-security-editor form {
  display: grid;
  gap: 10px;
  padding: 0 10px 10px;
}

.admin-account-summary {
  min-width: 0;
  display: grid;
  gap: 8px;
  padding-top: 2px;
}

.admin-account-summary > div:first-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.admin-account-summary strong,
.admin-account-summary small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-account-summary strong {
  color: var(--foreground);
  font-size: 0.76rem;
  font-weight: 950;
}

.admin-account-summary small {
  color: var(--muted-foreground);
  font-size: 0.65rem;
  font-weight: 760;
}

.admin-account-roles {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-access-grid {
  display: grid;
  gap: 8px;
}

.admin-access-grid label,
.admin-access-reason {
  display: grid;
  gap: 5px;
}

.admin-access-grid span,
.admin-access-reason span {
  color: var(--muted-foreground);
  font-size: 0.64rem;
  font-weight: 900;
}

.admin-access-grid select,
.admin-access-reason input,
.admin-access-reason textarea {
  width: 100%;
  min-height: 40px;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  color: var(--foreground);
  font: inherit;
  font-size: 0.72rem;
  padding: 9px 10px;
}

.admin-access-reason textarea {
  min-height: 40px;
  resize: vertical;
}

.admin-account-editor.compact,
.admin-security-editor.compact {
  min-width: 170px;
  border-radius: 12px;
}

.admin-account-editor.compact summary,
.admin-security-editor.compact summary {
  min-height: 34px;
  padding: 7px 9px;
  font-size: 0.68rem;
}

.admin-account-editor.compact form,
.admin-security-editor.compact form {
  padding: 0 8px 8px;
}

.admin-account-editor.compact .admin-account-summary strong {
  font-size: 0.7rem;
}

.admin-account-editor.compact .admin-account-summary small {
  font-size: 0.61rem;
}

.admin-account-save {
  min-height: 38px;
}

.admin-security-revoke {
  width: 100%;
  justify-content: center;
  color: var(--danger);
}

.admin-muted-text {
  color: var(--muted-foreground);
  font-size: 0.66rem;
  font-weight: 800;
}

.admin-access-role-list {
  display: grid;
  gap: 7px;
}

.admin-access-role-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
}

.admin-access-role-option input {
  margin-top: 2px;
}

.admin-access-role-option span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.admin-access-role-option strong {
  color: var(--foreground);
  font-size: 0.72rem;
}

.admin-access-role-option small {
  color: var(--muted-foreground);
  font-size: 0.64rem;
  line-height: 1.35;
}

.admin-access-save {
  min-height: 38px;
}

.admin-inline-warning,
.admin-inline-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 11px;
  border: 1px solid color-mix(in oklab, #f59e0b 26%, white);
  border-radius: 13px;
  background: color-mix(in oklab, #f59e0b 10%, white);
  color: #925500;
  font-size: 0.72rem;
  font-weight: 800;
}

.admin-inline-note {
  border-color: color-mix(in oklab, var(--primary) 18%, white);
  background: color-mix(in oklab, var(--primary) 8%, white);
  color: var(--primary);
}

.admin-geometry-policy {
  display: flex;
  align-items: flex-start;
  width: 100%;
  line-height: 1.45;
}

.admin-inline-note a {
  color: inherit;
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.admin-inline-note.compact {
  font-size: 0.66rem;
  padding: 8px 9px;
}

.admin-inline-note.tone-success {
  border-color: color-mix(in oklab, #16a34a 18%, white);
  background: color-mix(in oklab, #16a34a 9%, white);
  color: #0f7a3b;
}

.admin-inline-note.tone-warning {
  border-color: color-mix(in oklab, #f59e0b 26%, white);
  background: color-mix(in oklab, #f59e0b 10%, white);
  color: #925500;
}

.admin-inline-note.tone-danger {
  border-color: color-mix(in oklab, var(--danger) 22%, white);
  background: color-mix(in oklab, var(--danger) 9%, white);
  color: var(--danger);
}

.admin-inline-note.tone-muted {
  border-color: color-mix(in oklab, var(--muted-foreground) 14%, white);
  background: color-mix(in oklab, var(--muted) 78%, white);
  color: var(--muted-foreground);
}

.admin-users-table-wrap,
.admin-organizations-table-wrap {
  display: none;
}

.admin-admin-list,
.admin-role-grid,
.admin-permission-list,
.admin-audit-list {
  display: grid;
  gap: 10px;
}

.admin-admin-card,
.admin-role-card,
.admin-permission-row,
.admin-audit-row {
  min-width: 0;
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(15, 118, 110, 0.06), transparent 48%),
    #fff;
}

.admin-role-card.is-super {
  border-color: color-mix(in oklab, #0f766e 30%, white);
  background:
    linear-gradient(135deg, rgba(15, 118, 110, 0.12), transparent 48%),
    #fff;
}

.admin-role-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-role-card-actions {
  display: flex;
  justify-content: flex-start;
}

.admin-role-head,
.admin-audit-main {
  min-width: 0;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.admin-role-head > span,
.admin-audit-main > span {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, #0f766e, #16a34a);
  color: #fff;
}

.admin-role-head div,
.admin-audit-main div,
.admin-permission-row div {
  min-width: 0;
}

.admin-role-head strong,
.admin-audit-main strong,
.admin-permission-row strong {
  display: block;
  overflow: hidden;
  color: var(--foreground);
  font-size: 0.8rem;
  line-height: 1.24;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-role-head small,
.admin-audit-main small,
.admin-permission-row small {
  display: block;
  color: var(--muted-foreground);
  font-size: 0.66rem;
  line-height: 1.35;
}

.admin-permission-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-permission-chip-row span,
.admin-permission-row > span {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 8px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--primary) 10%, white);
  color: var(--primary);
  font-size: 0.6rem;
  font-weight: 900;
}

.admin-permission-row {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

.admin-role-editor {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid color-mix(in oklab, var(--primary) 16%, white);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(15, 118, 110, 0.07), transparent 52%),
    #fff;
}

.admin-role-form-stack {
  gap: 12px;
}

.admin-role-form-panel {
  gap: 14px;
}

.admin-role-editor-grid {
  display: grid;
  gap: 8px;
}

.admin-role-editor-grid label {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.admin-role-editor-grid span {
  color: var(--muted-foreground);
  font-size: 0.64rem;
  font-weight: 900;
}

.admin-role-editor-grid input,
.admin-role-editor-grid select,
.admin-role-editor-grid textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  color: var(--foreground);
  font: inherit;
  font-size: 0.74rem;
  padding: 9px 10px;
}

.admin-date-range-field {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.admin-date-range-field > span {
  color: var(--muted-foreground);
  font-size: 0.64rem;
  font-weight: 900;
}

.admin-date-range-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.admin-date-range-row label {
  gap: 4px;
}

.admin-date-range-row small {
  color: color-mix(in oklab, var(--muted-foreground) 82%, white);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0;
}

.admin-planting-list {
  display: grid;
  gap: 12px;
}

.admin-planting-card {
  overflow: hidden;
  display: grid;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #fff;
}

.admin-planting-partner-list {
  display: grid;
  gap: 12px;
}

.admin-planting-partner-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  border: 1px solid color-mix(in oklab, var(--primary) 13%, white);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(13, 148, 136, 0.06), transparent 52%),
    #fff;
}

.admin-planting-partner-logo {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 16px;
  background: linear-gradient(135deg, #064e3b, #0f766e);
  color: #fff;
  box-shadow: 0 12px 24px rgba(6, 78, 59, 0.14);
}

.admin-planting-partner-logo.is-large {
  width: 76px;
  height: 76px;
}

.admin-planting-partner-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-planting-partner-logo strong {
  font-size: 0.82rem;
  font-weight: 950;
}

.admin-planting-partner-body {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.admin-planting-partner-body p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.68rem;
  line-height: 1.42;
}

.admin-planting-partner-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  color: var(--muted-foreground);
  font-size: 0.64rem;
  font-weight: 850;
}

.admin-planting-partner-meta > span:not(.admin-status-pill) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.admin-planting-partner-form,
.admin-partner-claim-manager {
  display: grid;
  gap: 14px;
}

.admin-planting-partner-form {
  display: grid;
  gap: 24px;
}

.admin-planting-partner-form-stack {
  gap: 16px;
}

.admin-planting-partner-hero {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
}

.admin-planting-partner-hero .admin-hero-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-planting-partner-editor {
  padding: 0;
  border: none;
  background: transparent;
}

.admin-planting-partner-summary {
  grid-template-columns: 76px minmax(0, 1fr);
}

.admin-cover-preview.is-logo {
  min-height: 72px;
}

.admin-cover-preview.is-logo img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 16px;
}

.admin-partner-code-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  border: 1px solid color-mix(in oklab, var(--primary) 12%, white);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.86);
}

.admin-partner-code-form label {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.admin-partner-code-form label > span {
  color: var(--foreground);
  font-size: 0.64rem;
  font-weight: 950;
}

.admin-partner-code-form input {
  width: 100%;
  min-height: 40px;
  border: 1px solid color-mix(in oklab, var(--primary) 14%, white);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--foreground);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 760;
  outline: 0;
  padding: 9px 10px;
}

.admin-partner-code-form input:focus {
  border-color: color-mix(in oklab, #0ea5e9 42%, var(--primary));
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12);
}

.admin-partner-code-form .button-secondary {
  align-self: end;
  justify-content: center;
  min-height: 40px;
}

.admin-status-pill.is-success {
  color: #047857;
  border-color: rgba(16, 185, 129, 0.2);
  background: rgba(236, 253, 245, 0.9);
}

.admin-status-pill.is-muted {
  color: #667085;
  border-color: rgba(102, 112, 133, 0.16);
  background: rgba(248, 250, 252, 0.9);
}

.admin-status-pill.is-primary {
  color: #075985;
  border-color: rgba(14, 165, 233, 0.18);
  background: rgba(240, 249, 255, 0.94);
}

.admin-status-pill.is-danger {
  color: #b42318;
  border-color: rgba(248, 113, 113, 0.22);
  background: rgba(254, 242, 242, 0.94);
}

.admin-partner-code-filter {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) minmax(132px, 0.7fr) minmax(104px, 0.5fr) auto;
  gap: 9px;
  align-items: end;
  padding: 10px;
  border: 1px solid rgba(6, 78, 59, 0.1);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(6, 78, 59, 0.045), rgba(20, 184, 166, 0.035)),
    rgba(255, 255, 255, 0.82);
}

.admin-partner-code-filter label {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.admin-partner-code-filter label > span {
  color: var(--muted-foreground);
  font-size: 0.62rem;
  font-weight: 950;
}

.admin-partner-code-filter input,
.admin-partner-code-filter select,
.admin-partner-claim-dialog input {
  width: 100%;
  min-height: 40px;
  border: 1px solid color-mix(in oklab, var(--primary) 14%, white);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--foreground);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 760;
  outline: 0;
  padding: 9px 10px;
}

.admin-partner-code-filter input:focus,
.admin-partner-code-filter select:focus,
.admin-partner-claim-dialog input:focus {
  border-color: color-mix(in oklab, #0ea5e9 42%, var(--primary));
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12);
}

.admin-generated-codes {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(217, 119, 6, 0.18);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 251, 235, 0.96), rgba(236, 253, 245, 0.9));
}

.admin-generated-codes-head {
  display: grid;
  gap: 3px;
}

.admin-generated-codes-head strong {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #744210;
  font-size: 0.82rem;
}

.admin-generated-codes-head small {
  color: var(--muted-foreground);
  font-size: 0.64rem;
  font-weight: 850;
}

.admin-generated-code-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
}

.admin-generated-code-grid code {
  display: grid;
  gap: 4px;
  padding: 9px;
  border: 1px solid rgba(146, 64, 14, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.82);
  color: #064e3b;
}

.admin-generated-code-grid code b {
  font-size: 0.78rem;
  letter-spacing: 0.03em;
}

.admin-generated-code-grid code span {
  color: var(--muted-foreground);
  font-family: var(--font-sans);
  font-size: 0.58rem;
  font-weight: 850;
}

.admin-partner-code-table {
  display: grid;
  gap: 10px;
}

.admin-partner-code-table .admin-tree-slots-head {
  align-items: center;
}

.admin-code-action {
  min-height: 32px;
  padding: 6px 9px;
  color: #b42318;
  border-color: rgba(248, 113, 113, 0.2);
  background: rgba(254, 242, 242, 0.82);
}

.admin-partner-code-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 2px 0;
  color: var(--muted-foreground);
  font-size: 0.66rem;
  font-weight: 900;
}

.admin-partner-code-pager > div {
  display: flex;
  gap: 7px;
}

.admin-table-scroll .admin-partner-code-pager {
  min-width: 820px;
  padding: 10px;
  border-top: 1px solid color-mix(in oklab, var(--border) 82%, white);
  background: color-mix(in oklab, var(--muted) 24%, white);
}

.admin-pager-prev-icon {
  display: inline-grid;
  transform: rotate(180deg);
}

.admin-partner-claim-dialog {
  width: min(520px, 100%);
}

@media (max-width: 560px) {
  .admin-planting-partner-card {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 10px;
  }

  .admin-planting-partner-logo {
    width: 48px;
    height: 48px;
    border-radius: 14px;
  }

  .admin-partner-code-form {
    grid-template-columns: 1fr;
  }

  .admin-partner-code-filter {
    grid-template-columns: 1fr;
  }

  .planting-partner-claim-row {
    grid-template-columns: 1fr;
  }
}

.admin-planting-cover {
  min-height: 128px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 10px;
  background:
    linear-gradient(180deg, rgba(6, 78, 59, 0.08), rgba(6, 78, 59, 0.44)),
    center / cover no-repeat;
}

.admin-planting-cover span {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: #0f6b4d;
  font-size: 0.62rem;
  font-weight: 900;
}

.admin-planting-body {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.admin-planting-title {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
}

.admin-planting-title-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.admin-planting-title div {
  min-width: 0;
}

.admin-planting-title strong {
  display: block;
  overflow: hidden;
  color: var(--foreground);
  font-size: 0.86rem;
  line-height: 1.22;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-planting-title small,
.admin-planting-body p {
  color: var(--muted-foreground);
  font-size: 0.68rem;
  line-height: 1.42;
}

.admin-planting-body p {
  margin: 0;
}

.admin-planting-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.admin-planting-metrics span {
  min-width: 0;
  min-height: 62px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 9px;
  border: 1px solid color-mix(in oklab, var(--primary) 12%, white);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(15, 118, 110, 0.07), transparent),
    #fff;
}

.admin-planting-metrics .fa-icon {
  color: var(--primary);
}

.admin-planting-metrics strong {
  overflow: hidden;
  color: var(--foreground);
  font-size: 0.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-planting-metrics small {
  color: var(--muted-foreground);
  font-size: 0.6rem;
  font-weight: 900;
}

.admin-planting-progress {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in oklab, var(--muted) 70%, white);
}

.admin-planting-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #16a34a, #facc15);
}

.admin-planting-edit-summary {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid color-mix(in oklab, var(--primary) 16%, white);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(6, 78, 59, 0.09), transparent 58%),
    rgba(255, 255, 255, 0.94);
}

.admin-planting-edit-cover {
  width: 76px;
  aspect-ratio: 1;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(6, 78, 59, 0.08), rgba(6, 78, 59, 0.34)),
    center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.admin-planting-edit-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.admin-status-pill {
  width: fit-content;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--primary) 10%, white);
  color: var(--primary-strong);
  font-size: 0.62rem;
  font-weight: 900;
}

.admin-planting-edit-copy strong {
  overflow: hidden;
  color: var(--foreground);
  font-size: 0.95rem;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-planting-edit-copy small {
  overflow: hidden;
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-planting-edit-kpis {
  grid-column: 1 / -1;
}

.admin-edit-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  padding: 7px;
  border: 1px solid color-mix(in oklab, var(--primary) 12%, white);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
}

.admin-edit-tabs button {
  min-width: 0;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 9px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--muted-foreground);
  font: inherit;
  font-size: 0.66rem;
  font-weight: 900;
  cursor: pointer;
}

.admin-edit-tabs button.is-active {
  border-color: color-mix(in oklab, var(--primary) 22%, white);
  background:
    linear-gradient(135deg, rgba(6, 78, 59, 0.11), rgba(20, 184, 166, 0.06)),
    #fff;
  color: var(--primary-strong);
  box-shadow: 0 10px 22px rgba(6, 78, 59, 0.08);
}

.admin-tab-panel {
  display: none;
  min-width: 0;
}

.admin-tab-panel.is-active {
  display: grid;
  gap: 14px;
}

.admin-planting-edit-main,
.admin-planting-ops-grid {
  display: grid;
  gap: 14px;
}

.admin-edit-section {
  min-width: 0;
  display: grid;
  gap: 12px;
  padding: 13px;
  border: 1px solid color-mix(in oklab, var(--primary) 13%, white);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(15, 118, 110, 0.06), transparent 54%),
    rgba(255, 255, 255, 0.95);
}

.admin-edit-section-head {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
}

.admin-edit-section-head > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, #064e3b, #0f766e);
  color: #fff;
  box-shadow: 0 12px 24px rgba(6, 78, 59, 0.14);
}

.admin-edit-section-head div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.admin-edit-section-head h2 {
  margin: 0;
  color: var(--foreground);
  font-size: 0.88rem;
  line-height: 1.2;
}

.admin-edit-section-head p:not(.eyebrow) {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.42;
}

.admin-field-grid {
  gap: 9px;
}

.admin-terrain-field small {
  color: var(--muted-foreground);
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1.42;
}

.admin-planting-map-editor.admin-edit-section {
  padding: 13px;
  background:
    linear-gradient(145deg, rgba(6, 78, 59, 0.08), transparent 58%),
    rgba(255, 255, 255, 0.96);
}

.admin-map-clear-button {
  width: 100%;
  justify-content: center;
}

.admin-polygon-toolbar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  padding: 9px;
  border: 1px solid color-mix(in oklab, var(--primary) 14%, white);
  border-radius: 15px;
  background:
    linear-gradient(135deg, rgba(6, 78, 59, 0.07), rgba(20, 184, 166, 0.05)),
    rgba(255, 255, 255, 0.88);
}

.admin-polygon-toolbar .button-secondary {
  min-width: 0;
  min-height: 38px;
  justify-content: center;
  gap: 6px;
  padding-inline: 9px;
  font-size: 0.66rem;
  white-space: nowrap;
}

.admin-polygon-toolbar .button-secondary .fa-icon {
  flex: 0 0 auto;
}

.admin-polygon-toolbar .button-secondary span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-polygon-toolbar small {
  grid-column: 1 / -1;
  margin: 1px 0 0;
  color: var(--muted-foreground);
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1.36;
}

.admin-polygon-import-input {
  display: none !important;
}

@media (min-width: 760px) {
  .admin-polygon-toolbar {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.admin-map-coordinate-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-polygon-json-field {
  min-width: 0;
  border: 1px solid color-mix(in oklab, var(--primary) 12%, white);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(6, 78, 59, 0.045), rgba(15, 118, 110, 0.035)),
    rgba(255, 255, 255, 0.82);
}

.admin-polygon-json-field summary {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  color: var(--foreground);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.admin-polygon-json-field summary::-webkit-details-marker {
  display: none;
}

.admin-polygon-json-field summary span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.admin-polygon-json-field summary strong {
  color: var(--foreground);
  font-size: 0.74rem;
  font-weight: 900;
}

.admin-polygon-json-field summary small {
  color: var(--muted-foreground);
  font-size: 0.62rem;
  font-weight: 800;
}

.admin-polygon-json-field summary .fa-icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(6, 78, 59, 0.08);
  color: var(--primary-strong);
  transition: transform 160ms ease, background 160ms ease;
}

.admin-polygon-json-field[open] summary .fa-icon {
  transform: rotate(90deg);
  background: rgba(6, 78, 59, 0.13);
}

.admin-polygon-json-body {
  display: grid;
  gap: 5px;
  padding: 0 10px 10px;
}

.admin-planting-save-section {
  border-color: color-mix(in oklab, var(--primary) 18%, white);
  background:
    linear-gradient(135deg, rgba(6, 78, 59, 0.08), rgba(250, 204, 21, 0.06)),
    rgba(255, 255, 255, 0.96);
}

.admin-planting-save-section > div {
  display: grid;
  gap: 4px;
}

.admin-planting-save-section strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--foreground);
  font-size: 0.84rem;
}

.admin-planting-save-section p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.4;
}

.admin-planting-save-section input,
.admin-donation-save-section input {
  width: 100%;
  min-height: 40px;
  border: 1px solid color-mix(in oklab, var(--primary) 16%, white);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--foreground);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 750;
  outline: 0;
  padding: 9px 10px;
}

.admin-planting-save-section input:focus,
.admin-donation-save-section input:focus {
  border-color: color-mix(in oklab, #0ea5e9 42%, var(--primary));
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12);
}

.admin-planting-form-grid,
.admin-planting-form,
.admin-planting-form-main,
.admin-planting-map-editor {
  display: grid;
  gap: 14px;
}

.admin-planting-form-grid {
  align-items: start;
}

.admin-role-editor-grid .span-2 {
  grid-column: 1 / -1;
}

.admin-planting-map-editor {
  min-width: 0;
  padding: 12px;
  border: 1px solid color-mix(in oklab, var(--primary) 16%, white);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(15, 118, 110, 0.08), transparent 52%),
    #fff;
}

.admin-planting-map-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.admin-planting-map-head strong {
  color: var(--foreground);
  font-size: 0.82rem;
}

.admin-planting-map-stage {
  position: relative;
  min-height: 320px;
  overflow: hidden;
  border: 7px solid #073820;
  border-radius: 20px;
  background: #0b3d2b;
  box-shadow:
    0 18px 40px rgba(7, 42, 27, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.admin-planting-map-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 399;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5, 39, 25, 0.06), transparent 18%, transparent 78%, rgba(5, 39, 25, 0.1)),
    repeating-linear-gradient(120deg, rgba(255, 255, 255, 0.024) 0 1px, transparent 1px 52px);
  opacity: 0.22;
}

.admin-planting-map-stage .leaflet-control-zoom {
  overflow: hidden;
  border: 0;
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(7, 42, 27, 0.18);
}

.admin-planting-map-stage .leaflet-control-zoom a {
  width: 36px;
  height: 36px;
  border: 0;
  background: rgba(255, 255, 255, 0.92);
  color: #0c4f31;
  font: 850 18px/36px Geist, Inter, sans-serif;
}

.admin-planting-map-stage .leaflet-control-attribution {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
  color: var(--muted-foreground);
  font-size: 0.58rem;
  backdrop-filter: blur(10px);
}

.admin-tree-layout-canvas {
  pointer-events: none;
  mix-blend-mode: normal;
}

.admin-tree-layout-control {
  display: grid;
  gap: 10px;
  padding: 11px;
  border: 1px solid color-mix(in oklab, var(--primary) 16%, white);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(6, 78, 59, 0.08), rgba(250, 204, 21, 0.08)),
    rgba(255, 255, 255, 0.94);
}

.admin-tree-layout-control-head {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
}

.admin-tree-layout-control-head > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(135deg, #064e3b, #0f766e);
  color: #fff;
}

.admin-tree-layout-control-head strong,
.admin-tree-layout-control-head small {
  min-width: 0;
  display: block;
}

.admin-tree-layout-control-head strong {
  color: var(--foreground);
  font-size: 0.78rem;
  line-height: 1.18;
}

.admin-tree-layout-control-head small,
.admin-tree-layout-control p {
  color: var(--muted-foreground);
  font-size: 0.64rem;
  font-weight: 800;
  line-height: 1.38;
}

.admin-tree-layout-control output {
  min-width: 54px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #fef3c7;
  color: #7a4d0b;
  font-size: 0.75rem;
  font-weight: 900;
}

.admin-tree-layout-control label {
  display: grid;
  gap: 7px;
}

.admin-tree-layout-control input[type="range"] {
  width: 100%;
  accent-color: #0f766e;
}

.admin-tree-layout-control p {
  margin: 0;
}

.admin-map-rotation-handle {
  display: grid;
  place-items: center;
}

.admin-map-rotation-handle span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.96);
  border-radius: 999px;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.9), transparent 24%),
    linear-gradient(135deg, #facc15, #22c55e);
  color: #073820;
  box-shadow:
    0 10px 24px rgba(7, 42, 27, 0.24),
    0 0 0 5px rgba(250, 204, 21, 0.2);
}

.admin-map-rotation-handle .fa-icon {
  width: 15px;
  height: 15px;
  font-size: 0.82rem;
}

.admin-file-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
}

.admin-file-input-row .button-secondary {
  min-height: 38px;
  white-space: nowrap;
}

.admin-file-input-row .button-secondary.ghost {
  width: 38px;
  padding: 0;
  color: #ef4444;
  background: rgba(254, 242, 242, 0.9);
  border-color: rgba(248, 113, 113, 0.2);
  box-shadow: none;
}

.admin-cover-preview {
  min-height: 78px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px dashed color-mix(in oklab, var(--primary) 18%, white);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(20, 184, 166, 0.08), transparent 60%),
    rgba(255, 255, 255, 0.78);
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 800;
}

.admin-cover-preview img {
  width: 100%;
  height: 120px;
  object-fit: cover;
}

.admin-carbon-estimator {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid color-mix(in oklab, var(--primary) 15%, white);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(6, 78, 59, 0.08), transparent 58%),
    rgba(255, 255, 255, 0.9);
}

.admin-carbon-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.admin-carbon-head div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.admin-carbon-head span,
.admin-carbon-grid label > span {
  color: var(--muted-foreground);
  font-size: 0.66rem;
  font-weight: 900;
}

.admin-carbon-head strong {
  color: var(--primary-strong);
  font-size: 1.12rem;
  line-height: 1;
}

.admin-carbon-head small {
  max-width: 58%;
  color: var(--muted-foreground);
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1.4;
  text-align: right;
}

.admin-carbon-grid {
  display: grid;
  gap: 8px;
}

.admin-carbon-grid label {
  display: grid;
  gap: 6px;
}

.admin-carbon-grid select {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  color: var(--foreground);
  font: inherit;
  font-size: 0.74rem;
  padding: 9px 10px;
}

.admin-carbon-estimator p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.45;
}

.admin-carbon-method {
  padding: 10px;
  border: 1px solid rgba(6, 78, 59, 0.1);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(6, 78, 59, 0.06), rgba(250, 204, 21, 0.07)),
    rgba(255, 255, 255, 0.74);
}

.admin-carbon-method summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 34px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.admin-carbon-method summary::-webkit-details-marker {
  display: none;
}

.admin-carbon-method summary span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.admin-carbon-method summary strong {
  color: var(--foreground);
  font-size: 0.74rem;
  font-weight: 900;
}

.admin-carbon-method summary small {
  color: var(--muted-foreground);
  font-size: 0.62rem;
  font-weight: 800;
}

.admin-carbon-method summary .fa-icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(6, 78, 59, 0.08);
  color: var(--primary-strong);
  transition: transform 160ms ease, background 160ms ease;
}

.admin-carbon-method[open] summary .fa-icon {
  transform: rotate(90deg);
  background: rgba(6, 78, 59, 0.13);
}

.admin-carbon-method-body {
  display: grid;
  gap: 9px;
  margin-top: 10px;
}

.admin-carbon-method code {
  display: block;
  overflow-x: auto;
  padding: 9px 10px;
  border-radius: 12px;
  background: #073820;
  color: #eaffef;
  font-size: 0.66rem;
  line-height: 1.45;
  white-space: nowrap;
}

.admin-carbon-method ul {
  margin: 0;
  padding-left: 17px;
  display: grid;
  gap: 5px;
  color: var(--muted-foreground);
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1.42;
}

.admin-carbon-method li::marker {
  color: var(--primary);
}

.admin-carbon-method .admin-carbon-source {
  margin: 0;
  padding: 9px 10px;
  border-radius: 12px;
  background: rgba(6, 78, 59, 0.07);
  color: var(--muted-foreground);
  font-size: 0.64rem;
  font-weight: 800;
  line-height: 1.45;
}

.admin-carbon-source a {
  color: var(--primary-strong);
  font-weight: 900;
  text-decoration: none;
}

.admin-carbon-source a:hover {
  text-decoration: underline;
}

.admin-carbon-profile-table {
  display: grid;
  gap: 7px;
}

.admin-carbon-profile-table span {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 8px 9px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.78);
}

.admin-carbon-profile-table b,
.admin-carbon-profile-table em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-carbon-profile-table b {
  color: var(--foreground);
  font-size: 0.67rem;
}

.admin-carbon-profile-table em {
  color: var(--muted-foreground);
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}

.admin-planting-progress-update {
  display: grid;
  gap: 12px;
  padding: 13px;
  border: 1px solid color-mix(in oklab, var(--primary) 16%, white);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(20, 184, 166, 0.09), transparent 58%),
    rgba(255, 255, 255, 0.92);
}

.admin-planting-progress-update > div:first-child {
  display: grid;
  gap: 5px;
}

.admin-planting-progress-update strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--foreground);
  font-size: 0.84rem;
}

.admin-planting-progress-update p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1.45;
}

.admin-planting-progress-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 8px;
}

.admin-planting-progress-form {
  display: grid;
  gap: 9px;
}

.admin-planting-progress-form label {
  display: grid;
  gap: 6px;
}

.admin-planting-progress-form label > span {
  color: var(--muted-foreground);
  font-size: 0.66rem;
  font-weight: 900;
}

.admin-planting-progress-form input {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  color: var(--foreground);
  font: inherit;
  font-size: 0.74rem;
  padding: 9px 10px;
}

.admin-tree-slots-panel {
  display: grid;
  gap: 12px;
  padding: 13px;
  border: 1px solid color-mix(in oklab, var(--primary) 14%, white);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(15, 118, 110, 0.08), transparent 54%),
    rgba(255, 255, 255, 0.94);
}

.admin-tree-slots-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.admin-tree-slots-head > div {
  display: grid;
  gap: 5px;
}

.admin-tree-slots-head strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--foreground);
  font-size: 0.86rem;
}

.admin-tree-slots-actions {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.admin-tree-slots-actions .button-secondary {
  min-height: 34px;
  padding-inline: 10px;
  white-space: nowrap;
}

.admin-tree-slots-head p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1.45;
}

.admin-tree-slot-filter {
  display: grid;
  gap: 9px;
}

.admin-tree-slot-filter label {
  display: grid;
  gap: 6px;
}

.admin-tree-slot-filter label > span {
  color: var(--muted-foreground);
  font-size: 0.66rem;
  font-weight: 900;
}

.admin-tree-slot-filter input,
.admin-tree-slot-filter select {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  color: var(--foreground);
  font: inherit;
  font-size: 0.74rem;
  padding: 9px 10px;
}

.admin-tree-slot-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.admin-tree-slot-tabs button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--muted-foreground);
  font: inherit;
  font-size: 0.68rem;
  font-weight: 900;
}

.admin-tree-slot-tabs button.is-active {
  border-color: color-mix(in oklab, var(--primary) 45%, white);
  background: linear-gradient(135deg, rgba(15, 118, 110, 0.14), rgba(20, 184, 166, 0.08));
  color: var(--primary-strong);
}

.admin-tree-slot-summary-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-tree-slot-body {
  display: grid;
  gap: 10px;
}

.admin-tree-slot-body[data-loading="true"] {
  opacity: 0.72;
}

.admin-tree-slot-table-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
}

.admin-tree-slot-table-tools label {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.admin-tree-slot-table-tools label > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted-foreground);
  font-size: 0.64rem;
  font-weight: 900;
}

.admin-tree-slot-table-tools input {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--foreground);
  font: inherit;
  font-size: 0.72rem;
  padding: 8px 10px;
}

.admin-tree-slot-table-tools small {
  color: var(--muted-foreground);
  font-size: 0.64rem;
  font-weight: 900;
  white-space: nowrap;
}

.admin-table-scroll,
.admin-tree-slot-table-wrap {
  overflow-x: auto;
  border: 1px solid color-mix(in oklab, var(--primary) 10%, white);
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 14px 36px rgba(15, 79, 49, 0.05);
}

.admin-table-scroll {
  width: 100%;
  min-width: 0;
  -webkit-overflow-scrolling: touch;
}

.admin-table-scroll > table {
  min-width: 820px;
}

.admin-tree-slot-table {
  width: 100%;
  min-width: 880px;
  border-collapse: collapse;
  color: var(--foreground);
  font-size: 0.72rem;
}

.admin-tree-slot-table th,
.admin-tree-slot-table td {
  padding: 9px 10px;
  border-bottom: 1px solid color-mix(in oklab, var(--border) 82%, white);
  text-align: left;
  vertical-align: middle;
}

.admin-tree-slot-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background:
    linear-gradient(135deg, rgba(15, 118, 110, 0.07), rgba(255, 255, 255, 0.95)),
    #fff;
  color: var(--muted-foreground);
  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-tree-slot-sort {
  width: 100%;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-size: inherit;
  font-weight: inherit;
  padding: 0;
  text-align: left;
  text-transform: inherit;
}

.admin-tree-slot-sort span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-tree-slot-sort .fa-icon {
  flex: 0 0 auto;
  color: color-mix(in oklab, var(--muted-foreground) 72%, white);
  font-size: 0.62rem;
  transition: color 160ms ease, transform 160ms ease;
}

.admin-tree-slot-sort.is-active {
  color: var(--primary-strong);
}

.admin-tree-slot-sort.is-active .fa-icon,
.admin-tree-slot-sort:hover .fa-icon {
  color: var(--primary);
}

.admin-tree-slot-table tbody tr:nth-child(even) {
  background: color-mix(in oklab, var(--muted) 34%, white);
}

.admin-tree-slot-table tbody tr:hover {
  background: color-mix(in oklab, var(--primary) 6%, white);
}

.admin-tree-slot-table tbody tr:last-child td {
  border-bottom: 0;
}

.admin-tree-slot-code {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}

.admin-tree-slot-code > div {
  min-width: 0;
}

.admin-tree-slot-code strong {
  overflow: hidden;
  color: var(--foreground);
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-tree-slot-code small {
  color: var(--muted-foreground);
  font-size: 0.62rem;
  font-weight: 800;
}

.tree-slot-status-dot {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(135deg, #eef5f0, #fff);
  color: #6b7d70;
  font-size: 0.74rem;
}

.tree-slot-status-dot.funded {
  background: linear-gradient(135deg, #fff1cc, #fffaf0);
  color: #b7791f;
}

.tree-slot-status-dot.planted {
  background: linear-gradient(135deg, #dff8ea, #f7fffb);
  color: #0f8c5a;
}

.admin-tree-slot-status {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #eef5f0;
  color: #5f7467;
  font-size: 0.6rem;
  font-weight: 900;
}

.admin-tree-slot-status.funded {
  background: #fff4dc;
  color: #9a5e10;
}

.admin-tree-slot-status.planted {
  background: #e3f8ed;
  color: #0b754d;
}

.admin-tree-slot-muted,
.admin-tree-slot-coordinate {
  color: var(--muted-foreground);
}

.admin-tree-slot-coordinate {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.admin-tree-slot-update-cell {
  min-width: 150px;
  display: grid;
  gap: 3px;
}

.admin-tree-slot-update-cell span {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(14, 165, 233, 0.1));
  color: var(--primary-strong);
  font-size: 0.6rem;
  font-weight: 950;
}

.admin-tree-slot-update-cell strong {
  color: var(--foreground);
  font-size: 0.7rem;
  font-weight: 950;
}

.admin-tree-slot-update-cell small {
  max-width: 210px;
  overflow: hidden;
  color: var(--muted-foreground);
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-tree-slot-row-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-tree-slot-row-actions .button-secondary {
  min-height: 31px;
  padding: 6px 8px;
  font-size: 0.64rem;
}

.admin-tree-slot-pagination,
.admin-tree-slot-pagination-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 900;
}

.admin-tree-slot-pagination-note {
  justify-content: center;
  margin: 0;
}

.admin-file-dashboard {
  display: grid;
  gap: 14px;
}

.admin-file-workspace {
  display: grid;
  gap: 14px;
}

.admin-file-sidebar,
.admin-file-main {
  min-width: 0;
  display: grid;
  gap: 12px;
}

.admin-file-sidebar {
  align-content: start;
  padding: 12px;
  border: 1px solid color-mix(in oklab, var(--primary) 14%, white);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(6, 78, 59, 0.08), transparent 56%),
    rgba(255, 255, 255, 0.94);
}

.admin-file-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.admin-file-sidebar-head h2 {
  margin: 2px 0 0;
  color: var(--foreground);
  font-size: 0.94rem;
}

.admin-file-sidebar-head > span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(135deg, #064e3b, #0f766e);
  color: #fff;
}

.admin-folder-tree {
  max-height: 360px;
  overflow: auto;
  display: grid;
  gap: 6px;
  padding-right: 2px;
}

.admin-folder-branch {
  display: grid;
  gap: 6px;
  padding-left: calc(var(--folder-depth, 0) * 12px);
}

.admin-folder-node {
  min-width: 0;
  min-height: 38px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.62);
  color: var(--foreground);
  text-decoration: none;
}

.admin-folder-node span {
  min-width: 0;
  overflow: hidden;
  font-size: 0.74rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-folder-node small {
  min-width: 22px;
  min-height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in oklab, var(--primary) 10%, white);
  color: var(--primary-strong);
  font-size: 0.62rem;
  font-weight: 900;
}

.admin-folder-node.active {
  border-color: color-mix(in oklab, var(--primary) 24%, white);
  background: linear-gradient(135deg, rgba(15, 118, 110, 0.14), rgba(22, 163, 74, 0.08));
  color: var(--primary-strong);
}

.admin-folder-empty,
.admin-file-warning {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px;
  border-radius: 14px;
  background: color-mix(in oklab, var(--muted) 60%, white);
  color: var(--muted-foreground);
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1.4;
}

.admin-file-warning {
  align-items: flex-start;
  background: color-mix(in oklab, var(--danger) 9%, white);
  color: color-mix(in oklab, var(--danger) 82%, #3b1d14);
}

.admin-folder-create,
.admin-folder-tools {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid color-mix(in oklab, var(--primary) 12%, white);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.72);
}

.admin-folder-create label,
.admin-folder-tools div {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.admin-folder-create span,
.admin-folder-tools small {
  color: var(--muted-foreground);
  font-size: 0.64rem;
  font-weight: 900;
  line-height: 1.35;
}

.admin-folder-tools strong {
  overflow: hidden;
  color: var(--foreground);
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-folder-tool-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.admin-folder-create input,
.admin-file-action-body input,
.admin-file-action-body select,
.admin-file-action-body textarea {
  width: 100%;
  min-height: 39px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 9px 10px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--foreground);
  font: inherit;
  font-size: 0.74rem;
}

.admin-file-action-body textarea {
  min-height: 88px;
  resize: vertical;
}

.button-secondary.danger,
.button.danger {
  background: color-mix(in oklab, var(--danger) 10%, white);
  color: var(--danger);
  box-shadow: none;
}

.button.danger {
  background: linear-gradient(135deg, #991b1b, #dc2626);
  color: #fff;
  box-shadow: 0 12px 28px rgba(153, 27, 27, 0.18);
}

.admin-file-upload-panel {
  min-width: 0;
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid color-mix(in oklab, var(--primary) 16%, white);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(16, 185, 129, 0.1), transparent 46%),
    var(--card);
}

.admin-file-upload-panel h2,
.admin-file-upload-panel p {
  margin: 0;
}

.admin-file-upload-panel h2 {
  color: var(--foreground);
  font-size: 1rem;
  line-height: 1.25;
}

.admin-file-upload-panel p {
  color: var(--muted-foreground);
  font-size: 0.74rem;
  line-height: 1.45;
}

.admin-file-upload-panel label {
  display: grid;
  gap: 6px;
}

.admin-file-upload-panel label > span {
  color: var(--muted-foreground);
  font-size: 0.66rem;
  font-weight: 900;
}

.admin-file-upload-panel input:not([type="file"]) {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--border);
  border-radius: 13px;
  padding: 9px 11px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--foreground);
  font: inherit;
  font-size: 0.76rem;
}

.admin-file-picker {
  cursor: pointer;
}

.admin-file-picker input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.admin-file-picker span {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #0f766e, #16a34a);
  color: #fff;
  box-shadow: 0 14px 28px rgba(6, 78, 59, 0.16);
}

body.modal-open {
  overflow: hidden;
}

.admin-file-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 14px;
  background: rgba(5, 46, 22, 0.48);
  backdrop-filter: blur(10px);
}

.admin-file-action-modal {
  position: fixed;
  inset: 0;
  z-index: 1010;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 14px;
  background: rgba(5, 46, 22, 0.46);
  backdrop-filter: blur(10px);
}

.admin-file-modal[data-open="true"] {
  display: flex;
}

.admin-file-action-modal[data-open="true"] {
  display: flex;
}

.rfm-modal {
  position: fixed;
  inset: 0;
  z-index: 1020;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background:
    radial-gradient(circle at 18% 12%, rgba(52, 211, 153, 0.22), transparent 30%),
    rgba(2, 44, 34, 0.58);
  backdrop-filter: blur(12px);
}

.rfm-modal[data-open="true"] {
  display: flex;
}

.rfm-dialog {
  width: min(1080px, 100%);
  height: min(88vh, 780px);
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 12px;
  padding: 13px;
  border: 1px solid rgba(187, 247, 208, 0.48);
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(236, 253, 245, 0.96), rgba(255, 255, 255, 0.98) 46%, rgba(240, 253, 250, 0.95)),
    #fff;
  box-shadow: 0 34px 96px rgba(6, 78, 59, 0.32);
}

.rfm-header,
.rfm-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.rfm-header h2 {
  margin: 2px 0 0;
  color: var(--foreground);
  font-size: 1.02rem;
  line-height: 1.15;
}

.rfm-toolbar {
  flex-wrap: wrap;
}

.rfm-search {
  min-width: min(100%, 320px);
  flex: 1;
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid rgba(20, 118, 71, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.rfm-search .fa-icon {
  color: var(--primary-strong);
}

.rfm-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--foreground);
  font: inherit;
  font-size: 0.75rem;
}

.rfm-upload {
  min-height: 40px;
  cursor: pointer;
}

.rfm-upload input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.rfm-upload span {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #047857, #22c55e);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 900;
  box-shadow: 0 16px 32px rgba(6, 95, 70, 0.2);
}

.rfm-body {
  min-height: 0;
  display: grid;
  gap: 10px;
}

.rfm-folders,
.rfm-main {
  min-height: 0;
  overflow: auto;
  border: 1px solid rgba(20, 118, 71, 0.13);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.rfm-folders {
  max-height: 176px;
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 8px;
}

.rfm-main {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 9px;
  padding: 9px;
}

.rfm-state {
  min-height: 26px;
  display: flex;
  align-items: center;
  color: var(--muted-foreground);
  font-size: 0.7rem;
  font-weight: 900;
}

.rfm-grid {
  min-height: 0;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 9px;
  padding-right: 2px;
}

.rfm-folder-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 4px 5px;
}

.rfm-folder-head span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.rfm-folder-head strong {
  color: var(--foreground);
  font-size: 0.72rem;
}

.rfm-folder-head small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted-foreground);
  font-size: 0.62rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rfm-mini-button,
.rfm-more {
  width: 30px;
  min-width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(20, 118, 71, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--primary-strong);
  cursor: pointer;
}

.rfm-folder-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px;
  border-radius: 13px;
}

.rfm-folder,
.rfm-folder-empty {
  min-width: 0;
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px 7px calc(8px + var(--rfm-depth, 0) * 12px);
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--muted-foreground);
  font-size: 0.7rem;
  font-weight: 900;
}

.rfm-folder {
  width: 100%;
  background: transparent;
  cursor: pointer;
}

.rfm-folder span {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rfm-folder small {
  color: inherit;
  font-size: 0.62rem;
}

.rfm-folder.active {
  border-color: rgba(20, 184, 166, 0.2);
  background: linear-gradient(135deg, rgba(236, 253, 245, 0.98), rgba(220, 252, 231, 0.82));
  color: var(--primary-strong);
}

.rfm-folder-row.active .rfm-folder {
  border-color: rgba(20, 184, 166, 0.2);
  background: linear-gradient(135deg, rgba(236, 253, 245, 0.98), rgba(220, 252, 231, 0.82));
  color: var(--primary-strong);
}

.rfm-folder-row.active .rfm-more {
  border-color: rgba(20, 184, 166, 0.2);
  background: rgba(220, 252, 231, 0.82);
}

.rfm-file {
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, auto) auto;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(20, 118, 71, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 26px rgba(6, 78, 59, 0.08);
}

.rfm-folder-tile {
  min-width: 0;
  min-height: 112px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(20, 118, 71, 0.14);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(236, 253, 245, 0.96), rgba(255, 255, 255, 0.92)),
    #fff;
  box-shadow: 0 10px 26px rgba(6, 78, 59, 0.07);
}

.rfm-folder-tile.is-parent {
  min-height: 84px;
  border-style: dashed;
  background: rgba(255, 255, 255, 0.72);
}

.rfm-folder-tile-main {
  min-width: 0;
  display: grid;
  gap: 10px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.rfm-folder-tile-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: linear-gradient(135deg, #047857, #22c55e);
  color: #fff;
  box-shadow: 0 14px 28px rgba(6, 95, 70, 0.16);
}

.rfm-folder-tile.is-parent .rfm-folder-tile-icon {
  width: 38px;
  height: 38px;
  border-radius: 13px;
  background: linear-gradient(135deg, #ecfdf5, #ccfbf1);
  color: #047857;
  box-shadow: none;
  transform: rotate(180deg);
}

.rfm-folder-tile strong,
.rfm-folder-tile small {
  min-width: 0;
  overflow: hidden;
  display: block;
  text-overflow: ellipsis;
}

.rfm-folder-tile strong {
  color: var(--foreground);
  font-size: 0.76rem;
  white-space: nowrap;
}

.rfm-folder-tile small {
  margin-top: 3px;
  color: var(--muted-foreground);
  font-size: 0.64rem;
  font-weight: 800;
  line-height: 1.35;
}

.rfm-file-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: block;
  border: 0;
  border-radius: 13px;
  background: color-mix(in oklab, var(--muted) 62%, white);
  cursor: pointer;
}

.rfm-file-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform var(--motion-medium) ease;
}

.rfm-file-thumb:active img {
  transform: scale(1.03);
}

.rfm-file-info {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.rfm-file-info strong,
.rfm-file-info small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rfm-file-info strong {
  color: var(--foreground);
  font-size: 0.72rem;
}

.rfm-file-info small {
  color: var(--muted-foreground);
  font-size: 0.64rem;
  font-weight: 800;
}

.rfm-file-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 7px;
}

.rfm-file-actions .button-secondary {
  min-height: 34px;
  padding: 0 10px;
  border-radius: 12px;
  font-size: 0.68rem;
}

.rfm-file-actions .button-secondary:last-child {
  width: 34px;
  padding: 0;
}

.rfm-context-menu {
  position: fixed;
  z-index: 1040;
  width: min(230px, calc(100vw - 20px));
  overflow: hidden;
  display: grid;
  gap: 2px;
  padding: 6px;
  border: 1px solid rgba(20, 118, 71, 0.14);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 22px 54px rgba(6, 78, 59, 0.22);
  backdrop-filter: blur(12px);
}

.rfm-context-menu button {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 10px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--foreground);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 900;
  text-align: left;
  cursor: pointer;
}

.rfm-context-menu button:active,
.rfm-context-menu button:hover {
  background: rgba(220, 252, 231, 0.78);
}

.rfm-context-menu button.danger {
  color: #b91c1c;
}

.rfm-action-modal {
  position: fixed;
  inset: 0;
  z-index: 1030;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: rgba(5, 46, 22, 0.34);
  backdrop-filter: blur(8px);
}

.rfm-action-modal[data-open="true"] {
  display: flex;
}

.rfm-action-dialog {
  width: min(440px, 100%);
  max-height: min(86vh, 680px);
  overflow: auto;
  display: grid;
  gap: 12px;
  padding: 13px;
  border: 1px solid rgba(187, 247, 208, 0.5);
  border-radius: 19px;
  background: #fff;
  box-shadow: 0 26px 72px rgba(6, 78, 59, 0.26);
}

.rfm-action-head,
.rfm-action-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.rfm-action-head h3 {
  margin: 2px 0 0;
  color: var(--foreground);
  font-size: 0.98rem;
}

.rfm-action-body {
  display: grid;
  gap: 10px;
}

.rfm-action-body label {
  display: grid;
  gap: 6px;
}

.rfm-action-body label > span {
  color: var(--muted-foreground);
  font-size: 0.66rem;
  font-weight: 900;
}

.rfm-action-body input,
.rfm-action-body select,
.rfm-action-body textarea {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  color: var(--foreground);
  font: inherit;
  font-size: 0.74rem;
  padding: 9px 10px;
}

.rfm-action-body textarea {
  min-height: 76px;
  resize: vertical;
}

.rfm-action-footer {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.rfm-warning,
.rfm-action-error {
  display: flex;
  gap: 8px;
  padding: 10px;
  border-radius: 13px;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.45;
}

.rfm-warning {
  border: 1px solid rgba(245, 158, 11, 0.22);
  background: rgba(255, 251, 235, 0.86);
  color: #92400e;
}

.rfm-action-error {
  border: 1px solid rgba(248, 113, 113, 0.22);
  background: rgba(254, 242, 242, 0.86);
  color: #b91c1c;
}

.rfm-skeleton {
  min-height: 148px;
  border-radius: 16px;
  background: linear-gradient(90deg, rgba(220, 252, 231, 0.78), rgba(255, 255, 255, 0.96), rgba(220, 252, 231, 0.78));
  background-size: 220% 100%;
  animation: shimmer 1.15s linear infinite;
}

.rfm-empty {
  grid-column: 1 / -1;
  min-height: 170px;
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 18px;
  border: 1px dashed rgba(20, 118, 71, 0.16);
  border-radius: 16px;
  color: var(--muted-foreground);
  font-size: 0.76rem;
  font-weight: 900;
  text-align: center;
}

.rfm-empty.is-error {
  color: #b91c1c;
  background: rgba(254, 242, 242, 0.7);
}

.admin-file-page-dialog {
  width: 100%;
  height: min(82dvh, 820px);
  min-height: 620px;
  box-shadow: 0 24px 72px rgba(6, 78, 59, 0.18);
}

.admin-file-page-head small {
  display: block;
  margin-top: 4px;
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 900;
}

.admin-file-head-actions {
  display: flex;
  justify-content: flex-end;
}

.admin-file-page-toolbar {
  align-items: stretch;
}

.admin-file-page-filter {
  flex: 1 1 min(100%, 520px);
  display: flex;
  align-items: stretch;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-file-page-filter .rfm-search {
  flex: 1 1 260px;
  min-width: min(100%, 260px);
}

.admin-file-page-filter .button-secondary,
.admin-file-page-toolbar > .button-secondary {
  min-height: 40px;
  border-radius: 999px;
  font-size: 0.72rem;
}

.admin-file-type-pill {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid rgba(20, 118, 71, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
}

.admin-file-type-pill span {
  color: var(--muted-foreground);
  font-size: 0.64rem;
  font-weight: 900;
}

.admin-file-type-pill select {
  min-width: 112px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--foreground);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 900;
}

.admin-file-upload-inline {
  display: flex;
  margin: 0;
}

.admin-file-page-main {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.admin-file-page-footer {
  display: flex;
  justify-content: flex-end;
}

.admin-file-page-footer:empty {
  display: none;
}

.admin-file-page-footer .admin-users-pagination {
  margin: 0;
}

.admin-file-page-folders .admin-folder-tree {
  max-height: none;
  gap: 4px;
  padding-right: 0;
}

.admin-file-page-folders .admin-folder-branch {
  gap: 4px;
  padding-left: 0;
}

.admin-file-page-folders .admin-folder-node {
  text-decoration: none;
}

.admin-file-page-grid .rfm-folder-tile-main {
  text-decoration: none;
}

.admin-file-page-card .rfm-file-thumb {
  display: grid;
  place-items: center;
}

.admin-file-page-card .rfm-file-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-file-page-card .admin-file-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  gap: 6px;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(236, 253, 245, 0.9), rgba(204, 251, 241, 0.72)),
    #ecfdf5;
  color: var(--primary-strong);
}

.admin-file-page-card .admin-file-thumb-placeholder .fa-icon {
  font-size: 1.35rem;
}

.admin-file-page-card .admin-file-thumb-placeholder small {
  color: inherit;
  font-size: 0.66rem;
  font-weight: 900;
}

.admin-file-page-card .rfm-file-info small + small {
  color: color-mix(in oklab, var(--muted-foreground) 78%, white);
}

.admin-file-dialog {
  width: min(980px, 100%);
  max-height: min(86vh, 760px);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  border: 1px solid color-mix(in oklab, var(--primary) 18%, white);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(20, 184, 166, 0.1), transparent 50%),
    #fff;
  box-shadow: 0 28px 80px rgba(6, 78, 59, 0.24);
}

.admin-file-action-dialog {
  width: min(560px, 100%);
  max-height: min(88vh, 740px);
  overflow: auto;
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid color-mix(in oklab, var(--primary) 18%, white);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(20, 184, 166, 0.1), transparent 50%),
    #fff;
  box-shadow: 0 28px 80px rgba(6, 78, 59, 0.24);
}

.admin-file-head,
.admin-file-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.admin-file-head h2 {
  margin: 2px 0 0;
  color: var(--foreground);
  font-size: 1.02rem;
}

.admin-file-action-body {
  display: grid;
  gap: 10px;
}

.admin-file-action-body label {
  display: grid;
  gap: 6px;
}

.admin-file-action-body label > span {
  color: var(--muted-foreground);
  font-size: 0.66rem;
  font-weight: 900;
}

.admin-file-action-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.admin-file-preview-dialog {
  width: min(760px, 100%);
}

.admin-file-preview-stage {
  min-height: 220px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(6, 78, 59, 0.08), transparent),
    color-mix(in oklab, var(--muted) 58%, white);
}

.admin-file-preview-stage img {
  width: 100%;
  max-height: min(54vh, 460px);
  object-fit: contain;
}

.admin-file-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.admin-file-meta-grid span {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 9px;
  border: 1px solid color-mix(in oklab, var(--primary) 12%, white);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.78);
}

.admin-file-meta-grid strong,
.admin-file-meta-grid small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-file-meta-grid strong {
  color: var(--muted-foreground);
  font-size: 0.62rem;
  font-weight: 900;
}

.admin-file-meta-grid small {
  color: var(--foreground);
  font-size: 0.72rem;
  font-weight: 900;
}

.admin-file-toolbar {
  align-items: end;
}

.admin-file-toolbar label {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.admin-file-toolbar label:first-child {
  flex: 1;
}

.admin-file-toolbar span,
.admin-file-toolbar label > span {
  color: var(--muted-foreground);
  font-size: 0.64rem;
  font-weight: 900;
}

.admin-file-toolbar input[type="search"] {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 9px 10px;
  font: inherit;
  font-size: 0.74rem;
}

.admin-file-upload {
  min-height: 38px;
  align-self: end;
  cursor: pointer;
}

.admin-file-upload input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.admin-file-upload span {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 13px;
  border-radius: 999px;
  background: linear-gradient(135deg, #0f766e, #16a34a);
  color: #fff;
  box-shadow: 0 12px 26px rgba(6, 78, 59, 0.18);
}

.admin-file-state {
  min-height: 28px;
  display: flex;
  align-items: center;
  color: var(--muted-foreground);
  font-size: 0.7rem;
  font-weight: 800;
}

.admin-file-modal-browser {
  min-height: 0;
  overflow: hidden;
  display: grid;
  gap: 10px;
}

.admin-file-modal-tree {
  min-height: 0;
  max-height: 180px;
  overflow: auto;
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid color-mix(in oklab, var(--primary) 12%, white);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.7);
}

.admin-file-modal-tree-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 2px 4px;
}

.admin-file-modal-tree-head strong {
  color: var(--foreground);
  font-size: 0.72rem;
}

.admin-file-modal-tree-head small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted-foreground);
  font-size: 0.62rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-file-grid {
  min-height: 0;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding-right: 2px;
}

.admin-file-card {
  min-width: 0;
  display: grid;
  gap: 8px;
  padding: 8px;
  border: 1px solid color-mix(in oklab, var(--primary) 12%, white);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--foreground);
  text-align: left;
  cursor: pointer;
}

.admin-file-card:hover {
  border-color: color-mix(in oklab, var(--primary) 30%, white);
  box-shadow: 0 16px 34px rgba(6, 78, 59, 0.13);
}

.admin-file-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 11px;
  object-fit: cover;
  background: color-mix(in oklab, var(--muted) 65%, white);
}

.admin-file-card span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.admin-file-card strong,
.admin-file-card small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-file-card strong {
  font-size: 0.72rem;
  font-weight: 900;
}

.admin-file-card small {
  color: var(--muted-foreground);
  font-size: 0.62rem;
}

.admin-file-grid-page {
  overflow: visible;
  padding-right: 0;
}

.admin-file-page-card {
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(20, 184, 166, 0.08), transparent 54%),
    rgba(255, 255, 255, 0.94);
  cursor: default;
}

.admin-file-page-card img,
.admin-file-thumb-placeholder {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  object-fit: cover;
  background: color-mix(in oklab, var(--muted) 65%, white);
}

.admin-file-thumb-placeholder {
  display: grid;
  place-items: center;
  color: var(--primary-strong);
}

.admin-file-thumb-placeholder .fa-icon {
  width: 28px;
  height: 28px;
  font-size: 1.45rem;
}

.admin-file-thumb-placeholder small {
  margin-top: -22px;
  color: var(--muted-foreground);
  font-size: 0.66rem;
  font-weight: 900;
}

.admin-file-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.admin-file-actions .button-secondary {
  min-height: 34px;
  gap: 6px;
  padding: 0 9px;
  font-size: 0.66rem;
  white-space: nowrap;
}

.admin-polygon-preview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid color-mix(in oklab, var(--primary) 16%, white);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(6, 78, 59, 0.08), transparent 58%),
    rgba(255, 255, 255, 0.9);
}

.admin-polygon-preview-card {
  min-width: 0;
  min-height: 66px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 9px;
  border: 1px solid color-mix(in oklab, var(--primary) 12%, white);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.86);
}

.admin-polygon-preview-card .fa-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(135deg, #ecfdf5, #ccfbf1);
  color: #047857;
  font-size: 0.78rem;
}

.admin-polygon-preview-card span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.admin-polygon-preview-card small {
  color: var(--muted-foreground);
  font-size: 0.56rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.admin-polygon-preview-card strong {
  min-width: 0;
  overflow: hidden;
  color: var(--foreground);
  font-size: 0.76rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-polygon-preview p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.66rem;
  line-height: 1.38;
}

.admin-polygon-preview.is-ready {
  border-color: color-mix(in oklab, var(--primary) 26%, white);
  background:
    linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(250, 204, 21, 0.08)),
    rgba(255, 255, 255, 0.92);
}

.admin-planting-address-search {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid color-mix(in oklab, var(--primary) 14%, white);
  border-radius: 15px;
  background:
    linear-gradient(135deg, rgba(20, 184, 166, 0.08), transparent 60%),
    rgba(255, 255, 255, 0.86);
}

.admin-planting-address-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.admin-planting-address-row .button-secondary {
  min-height: 36px;
  padding-inline: 12px;
  white-space: nowrap;
}

.admin-address-results {
  display: grid;
  gap: 6px;
}

.admin-address-results.is-empty {
  display: none;
}

.admin-address-results p {
  margin: 0;
  padding: 8px 9px;
  border: 1px dashed color-mix(in oklab, var(--primary) 16%, white);
  border-radius: 12px;
  color: var(--muted-foreground);
  font-size: 0.68rem;
  line-height: 1.4;
  background: rgba(255, 255, 255, 0.7);
}

.admin-address-results button {
  min-width: 0;
  width: 100%;
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border: 1px solid color-mix(in oklab, var(--primary) 14%, white);
  border-radius: 13px;
  background: #fff;
  color: var(--foreground);
  text-align: left;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.admin-address-results button:hover {
  border-color: color-mix(in oklab, var(--primary) 32%, white);
  box-shadow: 0 12px 26px rgba(6, 78, 59, 0.11);
  transform: translateY(-1px);
}

.admin-address-results strong,
.admin-address-results small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-address-results strong {
  color: var(--foreground);
  font-size: 0.74rem;
  font-weight: 900;
}

.admin-address-results small {
  color: var(--muted-foreground);
  font-size: 0.62rem;
  line-height: 1.35;
}

.admin-planting-map-editor label,
.admin-planting-footer label {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.admin-planting-map-editor label span,
.admin-planting-footer label span {
  color: var(--muted-foreground);
  font-size: 0.64rem;
  font-weight: 900;
}

.admin-planting-map-editor input,
.admin-planting-map-editor textarea,
.admin-planting-footer input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  color: var(--foreground);
  font: inherit;
  font-size: 0.72rem;
  padding: 9px 10px;
}

@media (max-width: 430px) {
  .admin-file-input-row,
  .admin-file-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .rfm-dialog {
    height: min(92vh, 760px);
    border-radius: 18px;
  }

  .rfm-header,
  .rfm-toolbar {
    align-items: stretch;
  }

  .rfm-toolbar,
  .rfm-file-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .rfm-upload span,
  .rfm-toolbar .button-secondary,
  .rfm-file-actions .button-secondary,
  .rfm-file-actions .button-secondary:last-child {
    width: 100%;
  }

  .admin-carbon-head {
    display: grid;
  }

  .admin-carbon-head small {
    max-width: none;
    text-align: left;
  }

  .admin-file-input-row .button-secondary,
  .admin-file-upload span {
    width: 100%;
  }

  .admin-polygon-preview {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-tree-slot-table-tools {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .admin-tree-slot-table-tools small {
    white-space: normal;
  }

  .admin-date-range-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-planting-address-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-planting-address-row .button-secondary {
    width: 100%;
  }
}

.admin-check-row {
  min-height: 42px;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: #fff;
}

.admin-check-row input {
  width: 18px;
  height: 18px;
  padding: 0;
  accent-color: var(--primary);
}

.admin-planting-footer,
.admin-planting-regenerate {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
}

.admin-planting-regenerate strong {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--foreground);
  font-size: 0.82rem;
}

.admin-planting-regenerate summary {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--foreground);
  font-size: 0.78rem;
  font-weight: 900;
  cursor: pointer;
  list-style: none;
}

.admin-planting-regenerate summary::-webkit-details-marker {
  display: none;
}

.admin-planting-regenerate summary::after {
  content: "+";
  margin-left: auto;
  color: var(--muted-foreground);
  font-size: 0.92rem;
  font-weight: 900;
}

.admin-planting-regenerate[open] summary::after {
  content: "-";
}

.admin-regenerate-body {
  display: grid;
  gap: 10px;
  padding-top: 4px;
}

.admin-planting-regenerate p {
  margin: 4px 0 0;
  color: var(--muted-foreground);
  font-size: 0.68rem;
  line-height: 1.4;
}

.admin-map-vertex {
  cursor: grab;
}

.admin-map-vertex:active {
  cursor: grabbing;
}

.admin-map-vertex span {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 999px;
  background: linear-gradient(135deg, #16a34a, #0f766e);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(6, 78, 59, 0.28);
}

.admin-map-vertex.is-selected span {
  border-color: #fef9c3;
  background: linear-gradient(135deg, #f59e0b, #16a34a);
  color: #073820;
  box-shadow:
    0 10px 22px rgba(6, 78, 59, 0.3),
    0 0 0 5px rgba(250, 204, 21, 0.2);
}

.admin-role-permission-picker {
  display: grid;
  gap: 7px;
}

.admin-role-action-row {
  display: grid;
  gap: 8px;
}

.admin-role-delete {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in oklab, var(--danger) 10%, white);
  color: var(--danger);
  font-size: 0.74rem;
  font-weight: 900;
}

.admin-role-delete[data-armed="true"] {
  background: linear-gradient(135deg, #991b1b, #dc2626);
  color: #fff;
}

.admin-credential-form {
  gap: 12px;
}

.admin-zbs-field-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}

.admin-zbs-field-grid input {
  min-height: 40px;
}

.admin-zbs-field-grid small {
  min-height: 16px;
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.25;
}

.admin-credential-switch {
  min-height: 74px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background:
    linear-gradient(135deg, rgba(20, 163, 111, 0.07), transparent),
    #fff;
}

.admin-credential-switch input {
  min-width: 18px;
  width: 18px;
  height: 18px;
  border: 0;
  padding: 0;
  background: transparent;
  accent-color: var(--primary);
}

.admin-credential-switch span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.admin-credential-switch strong {
  color: var(--foreground);
  font-size: 0.76rem;
  line-height: 1.2;
}

.admin-credential-switch small {
  color: var(--muted-foreground);
  font-size: 0.66rem;
  line-height: 1.35;
}

.admin-event-attendance-settings {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(23, 107, 58, 0.12);
  border-radius: 20px;
  background:
    radial-gradient(circle at 12% 0%, rgba(187, 247, 208, 0.32), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(240, 249, 244, 0.78));
}

.admin-event-attendance-settings-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-event-attendance-settings-head > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, #0f8a4f, #19b873);
  color: #fff;
  box-shadow: 0 14px 28px rgba(15, 138, 79, 0.18);
}

.admin-event-attendance-settings-head strong {
  display: block;
  color: var(--foreground);
  font-size: 0.9rem;
  line-height: 1.2;
}

.admin-event-attendance-settings-head small {
  display: block;
  color: var(--muted-foreground);
  font-size: 0.72rem;
  line-height: 1.35;
  font-weight: 700;
}

.admin-field-grid.compact {
  gap: 10px;
}

.admin-field-grid label.is-disabled {
  opacity: 0.58;
}

.admin-payment-settings-form {
  display: grid;
  gap: 12px;
}

.admin-mbbank-panel,
.admin-mbbank-settings-form {
  display: grid;
  gap: 12px;
}

.admin-provider-inline-grid {
  display: contents;
}

.admin-provider-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

[data-reconciliation-panel][hidden] {
  display: none !important;
}

.admin-collapse-panel {
  padding: 0;
  overflow: hidden;
}

.admin-collapse-summary {
  min-height: 72px;
  padding: 14px;
  cursor: pointer;
  list-style: none;
}

.admin-collapse-summary::-webkit-details-marker {
  display: none;
}

.admin-collapse-summary::after {
  content: "+";
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in oklab, var(--primary) 9%, white);
  color: var(--primary);
  font-size: 1rem;
  font-weight: 900;
}

.admin-collapse-panel[open] .admin-collapse-summary::after {
  content: "-";
}

.admin-collapse-panel > :not(summary) {
  margin: 0 14px 14px;
}

.admin-config-details {
  min-width: 0;
  border: 1px solid color-mix(in oklab, var(--primary) 12%, white);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(20, 184, 166, 0.05), transparent 58%),
    #fff;
  overflow: hidden;
}

.admin-config-details summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  color: var(--foreground);
  font-size: 0.74rem;
  font-weight: 900;
  cursor: pointer;
}

.admin-config-details summary::marker {
  color: var(--primary);
}

.admin-config-details > .admin-role-editor-grid,
.admin-config-details > .admin-mbbank-login-box {
  padding: 0 12px 12px;
}

.admin-mbbank-status-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-mbbank-login-box {
  display: grid;
  gap: 10px;
}

.admin-mbbank-login-result {
  display: grid;
  gap: 8px;
}

.admin-mbbank-captcha {
  width: min(260px, 100%);
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  padding: 8px;
}

.admin-mbbank-inline-form {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid color-mix(in oklab, var(--border) 80%, white);
  border-radius: 13px;
  background: color-mix(in oklab, var(--muted) 58%, white);
}

.admin-mbbank-inline-form label {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.admin-mbbank-inline-form label span {
  color: var(--muted-foreground);
  font-size: 0.64rem;
  font-weight: 900;
}

.admin-mbbank-inline-form input {
  min-width: 0;
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0 10px;
  font: inherit;
  font-size: 0.72rem;
}

.admin-payment-bank-grid {
  grid-template-columns: minmax(0, 1fr);
}

.admin-payment-card-list,
.admin-banktx-list {
  display: grid;
  gap: 10px;
}

.admin-payment-card,
.admin-banktx-card {
  min-width: 0;
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(15, 118, 110, 0.06), transparent 54%),
    #fff;
}

.admin-banktx-card.status-unmatched,
.admin-banktx-card.status-failed,
.admin-banktx-card.status-new {
  border-color: color-mix(in oklab, #f59e0b 22%, white);
  background:
    linear-gradient(135deg, rgba(245, 158, 11, 0.08), transparent 54%),
    #fff;
}

.admin-banktx-card.status-processing {
  border-color: color-mix(in oklab, #2563eb 18%, white);
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.08), transparent 54%),
    #fff;
}

.admin-banktx-failure-note {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  color: #991b1b;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.35;
}

.admin-banktx-failure-note.block {
  display: flex;
  padding: 8px 10px;
  border: 1px solid color-mix(in oklab, #ef4444 20%, white);
  border-radius: 12px;
  background: color-mix(in oklab, #fee2e2 64%, white);
}

.admin-banktx-failure-note .fa,
.admin-banktx-failure-note svg {
  flex: 0 0 auto;
}

.admin-payment-main {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.admin-payment-main > span:first-child {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent),
    linear-gradient(135deg, #064e3b, #0f766e 58%, #22c55e);
  color: #fff;
  box-shadow: 0 10px 20px rgba(15, 118, 110, 0.15);
}

.admin-payment-main div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.admin-payment-main strong,
.admin-payment-main small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-payment-main strong {
  color: var(--foreground);
  font-size: 0.8rem;
  line-height: 1.2;
}

.admin-payment-main small {
  color: var(--muted-foreground);
  font-size: 0.66rem;
}

.admin-payment-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.admin-payment-meta span {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 5px 8px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--muted) 70%, white);
  color: var(--muted-foreground);
  font-size: 0.64rem;
  font-weight: 800;
}

.admin-banktx-table-wrap {
  display: none;
}

.admin-banktx-mobile-list {
  display: grid;
  gap: 8px;
}

.admin-banktx-row {
  cursor: pointer;
}

.admin-banktx-row:hover,
.admin-banktx-row:focus {
  background: color-mix(in oklab, var(--primary) 6%, white);
  outline: none;
}

.admin-banktx-row.status-new,
.admin-banktx-row.status-unmatched,
.admin-banktx-row.status-failed {
  box-shadow: inset 3px 0 0 #f59e0b;
}

.admin-banktx-row.status-processing {
  box-shadow: inset 3px 0 0 #2563eb;
}

.admin-banktx-mobile-row {
  width: 100%;
  min-width: 0;
  display: grid;
  gap: 7px;
  border: 1px solid color-mix(in oklab, #f59e0b 18%, white);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(245, 158, 11, 0.08), transparent 54%),
    #fff;
  padding: 11px;
  text-align: left;
}

.admin-banktx-mobile-row.status-processing {
  border-color: color-mix(in oklab, #2563eb 18%, white);
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.08), transparent 54%),
    #fff;
}

.admin-banktx-mobile-row span {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.admin-banktx-mobile-row strong {
  color: var(--foreground);
  font-size: 0.82rem;
}

.admin-banktx-mobile-row small,
.admin-banktx-mobile-row em {
  min-width: 0;
  overflow: hidden;
  color: var(--muted-foreground);
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-bank-match-dialog {
  width: min(820px, 100%);
}

.admin-bank-match-summary {
  min-width: 0;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 12px;
  border: 1px solid color-mix(in oklab, var(--primary) 14%, white);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(20, 184, 166, 0.08), transparent 60%),
    #fff;
}

.admin-bank-match-summary > span {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, #064e3b, #0f766e 58%, #22c55e);
  color: #fff;
}

.admin-bank-match-summary div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.admin-bank-match-summary strong {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  color: var(--foreground);
  font-size: 1.02rem;
  line-height: 1;
}

.admin-bank-match-summary small,
.admin-bank-match-summary p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.68rem;
  line-height: 1.35;
}

.admin-bank-match-summary p {
  overflow-wrap: anywhere;
}

.admin-bank-match-tools {
  display: grid;
  gap: 9px;
}

.admin-bank-match-selected {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border: 1px solid color-mix(in oklab, var(--primary) 14%, white);
  border-radius: 12px;
  background: color-mix(in oklab, var(--primary) 6%, white);
  color: var(--muted-foreground);
  font-size: 0.7rem;
  font-weight: 800;
}

.admin-bank-match-results {
  min-height: 110px;
}

.admin-bank-match-payment-table {
  display: grid;
  gap: 7px;
}

.admin-bank-match-payment-table button {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(140px, 0.42fr);
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: #fff;
  padding: 10px;
  text-align: left;
}

.admin-bank-match-payment-table button:hover {
  border-color: color-mix(in oklab, var(--primary) 28%, white);
  background: color-mix(in oklab, var(--primary) 5%, white);
}

.admin-bank-match-payment-table span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.admin-bank-match-payment-table strong,
.admin-bank-match-payment-table small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-bank-match-payment-table strong {
  color: var(--foreground);
  font-size: 0.74rem;
}

.admin-bank-match-payment-table small {
  color: var(--muted-foreground);
  font-size: 0.64rem;
}

.admin-banktx-actions {
  display: grid;
  gap: 9px;
  padding-top: 2px;
}

.admin-banktx-actions label {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.admin-banktx-actions label > span {
  color: var(--muted-foreground);
  font-size: 0.64rem;
  font-weight: 900;
}

.admin-banktx-actions input {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  color: var(--foreground);
  font: inherit;
  font-size: 0.72rem;
  padding: 0 10px;
}

.admin-payment-candidates {
  display: grid;
  gap: 7px;
}

.admin-payment-candidate {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 9px;
  border: 1px solid color-mix(in oklab, var(--primary) 15%, white);
  border-radius: 13px;
  background: color-mix(in oklab, var(--primary) 5%, white);
}

.admin-payment-candidate span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.admin-payment-candidate strong,
.admin-payment-candidate small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-payment-candidate strong {
  color: var(--foreground);
  font-size: 0.72rem;
}

.admin-payment-candidate small {
  color: var(--muted-foreground);
  font-size: 0.62rem;
}

.admin-banktx-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-banktx-processing-footer {
  justify-content: flex-end;
}

.button-secondary.danger {
  border-color: color-mix(in oklab, var(--danger) 22%, white);
  background: color-mix(in oklab, var(--danger) 9%, white);
  color: var(--danger);
}

.admin-audit-row.status-denied {
  border-color: color-mix(in oklab, var(--danger) 18%, white);
}

.admin-audit-row.status-failed {
  border-color: color-mix(in oklab, #f59e0b 24%, white);
}

.admin-audit-meta {
  display: grid;
  gap: 5px;
  color: var(--muted-foreground);
  font-size: 0.68rem;
}

.admin-audit-meta span {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-audit-details {
  border-top: 1px solid var(--border);
  padding-top: 8px;
}

.admin-audit-details summary {
  color: var(--foreground);
  cursor: pointer;
  font-size: 0.68rem;
  font-weight: 900;
}

.admin-audit-details p,
.admin-audit-details small {
  display: block;
  margin: 6px 0 0;
  color: var(--muted-foreground);
  font-size: 0.66rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.admin-pagination,
.admin-users-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 2px;
}

.admin-pagination span:not(.button-secondary),
.admin-users-pagination span:not(.button-secondary) {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 800;
}

.admin-pagination .is-disabled,
.admin-users-pagination .is-disabled {
  opacity: 0.48;
  pointer-events: none;
}

@media (min-width: 900px) {
  .admin-users-list,
  .admin-organizations-list {
    display: none;
  }

  .admin-org-member-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .admin-org-member-head {
    grid-template-columns: 34px minmax(0, 1fr) auto;
  }

  .admin-org-member-pills {
    grid-column: auto;
    justify-content: flex-end;
  }

  .admin-system-config-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-system-setting-field.type-text,
  .admin-system-setting-field.type-json {
    grid-column: span 2;
  }

  .admin-public-pages-layout {
    grid-template-columns: minmax(260px, 0.36fr) minmax(0, 1fr);
    align-items: start;
  }

  .admin-public-page-picker {
    position: sticky;
    top: 90px;
  }

  .admin-public-page-form-head,
  .admin-public-page-form-grid {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  .admin-public-page-form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-public-page-editor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-public-page-json-block:nth-child(3) {
    grid-column: span 2;
  }

  .admin-payment-card-list {
    display: none;
  }

  .admin-banktx-mobile-list {
    display: none;
  }

  .admin-users-table-wrap {
    display: block;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #fff;
  }

  .admin-users-table {
    width: 100%;
    min-width: 1120px;
    border-collapse: collapse;
  }

  .admin-organizations-table {
    min-width: 980px;
  }

  .admin-banktx-table {
    min-width: 760px;
  }

  .admin-users-table th,
  .admin-users-table td {
    padding: 12px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: middle;
  }

  .admin-users-table th {
    background:
      linear-gradient(135deg, rgba(20, 163, 111, 0.08), transparent),
      #fbfefc;
    color: var(--muted-foreground);
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  .admin-users-table td {
    color: var(--foreground);
    font-size: 0.76rem;
  }

  .admin-users-table tr:last-child td {
    border-bottom: 0;
  }

  .admin-users-table td > strong,
  .admin-users-table td > small {
    display: block;
  }

  .admin-users-table td > small,
  .admin-users-table small {
    color: var(--muted-foreground);
    font-size: 0.68rem;
  }

  .admin-user-table-account {
    min-width: 0;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
  }
}

.profile-form-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.profile-form-head .section-copy {
  margin-top: 3px;
}

.profile-edit-button {
  min-height: 34px;
  flex: 0 0 auto;
  padding-inline: 10px;
  font-size: 0.72rem;
}

.profile-info-grid {
  display: grid;
  gap: 8px;
}

.profile-info-item {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 10px;
  border: 1px solid rgba(217, 232, 223, 0.8);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.72);
}

.profile-info-item > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in oklab, var(--primary) 10%, white);
  color: var(--primary);
}

.profile-info-item small,
.profile-info-item strong {
  overflow: hidden;
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-info-item small {
  color: var(--muted-foreground);
  font-size: 0.66rem;
  line-height: 1.2;
  font-weight: 800;
}

.profile-info-item strong {
  margin-top: 2px;
  color: var(--foreground);
  font-size: 0.78rem;
  line-height: 1.24;
  font-weight: 900;
}

.profile-edit-panel {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(20, 118, 71, 0.16);
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(223, 244, 232, 0.42)),
    var(--card);
}

.profile-edit-panel[hidden] {
  display: none;
}

.profile-edit-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.profile-edit-head h3,
.profile-edit-head p {
  margin: 0;
}

.profile-edit-head h3 {
  color: var(--foreground);
  font-size: 0.88rem;
  line-height: 1.25;
  font-weight: 900;
}

.profile-edit-head p {
  margin-top: 3px;
  color: var(--muted-foreground);
  font-size: 0.7rem;
  line-height: 1.38;
}

.profile-edit-close {
  border: 0;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in oklab, var(--foreground) 6%, white);
  color: var(--muted-foreground);
}

.profile-form {
  gap: 10px;
}

.profile-avatar-editor {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(20, 118, 71, 0.14);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.75);
}

.profile-avatar-upload {
  display: grid;
  gap: 6px;
}

.profile-avatar-upload span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--foreground);
  font-size: 0.76rem;
  font-weight: 900;
}

.profile-avatar-upload input[type='file'] {
  width: 100%;
  min-width: 0;
  font: inherit;
  font-size: 0.72rem;
}

.profile-avatar-upload small {
  color: var(--muted-foreground);
  font-size: 0.66rem;
  line-height: 1.35;
  font-weight: 760;
}

.profile-avatar-change {
  min-height: 38px;
  width: fit-content;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(20, 118, 71, 0.18);
  border-radius: 12px;
  background: #fff;
  color: var(--primary-strong);
  font-size: 0.74rem;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(20, 118, 71, 0.08);
}

.profile-avatar-change:active,
.profile-avatar-zoom-step:active,
.profile-avatar-view-close:active,
.profile-avatar-crop-close:active {
  transform: translateY(1px);
}

body.has-profile-avatar-viewer,
body.has-profile-avatar-cropper {
  overflow: hidden;
}

.profile-avatar-view-modal {
  position: fixed;
  inset: 0;
  z-index: 1190;
  display: grid;
  place-items: center;
  padding: 18px;
}

.profile-avatar-view-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 18%, rgba(34, 197, 94, 0.16), transparent 32%),
    rgba(4, 24, 16, 0.76);
  backdrop-filter: blur(12px);
}

.profile-avatar-view-dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 430px);
  max-height: min(760px, calc(100dvh - 28px));
  overflow: auto;
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 26px;
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.98), rgba(239, 249, 242, 0.96)),
    #fff;
  box-shadow: 0 30px 90px rgba(0, 41, 24, 0.34);
}

.profile-avatar-view-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, 0.08);
  color: var(--foreground);
}

.profile-avatar-view-frame {
  width: min(72vw, 292px);
  aspect-ratio: 1;
  overflow: hidden;
  display: grid;
  place-items: center;
  margin-top: 10px;
  border: 1px solid rgba(20, 118, 71, 0.18);
  border-radius: 34px;
  background:
    radial-gradient(circle at 30% 18%, rgba(250, 204, 21, 0.22), transparent 32%),
    linear-gradient(135deg, #064e3b, #0f766e 58%, #16a34a);
  color: #fff;
  font-size: clamp(2.6rem, 14vw, 4rem);
  font-weight: 950;
  box-shadow: 0 22px 52px rgba(6, 78, 59, 0.2);
}

.profile-avatar-view-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-avatar-view-frame span {
  color: #fff;
  letter-spacing: 0;
}

.profile-avatar-view-copy {
  display: grid;
  gap: 3px;
  text-align: center;
}

.profile-avatar-view-copy p,
.profile-avatar-view-copy h2 {
  margin: 0;
}

.profile-avatar-view-copy p {
  color: var(--primary-strong);
  font-size: 0.72rem;
  font-weight: 900;
}

.profile-avatar-view-copy h2 {
  color: var(--foreground);
  font-size: 1.04rem;
  line-height: 1.2;
  font-weight: 950;
}

.profile-avatar-view-actions {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: center;
}

.profile-avatar-crop-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 18px;
}

.profile-avatar-crop-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 24, 16, 0.72);
  backdrop-filter: blur(10px);
}

.profile-avatar-crop-dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 470px);
  max-height: min(760px, calc(100dvh - 28px));
  overflow: auto;
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(242, 250, 245, 0.96));
  box-shadow: 0 30px 90px rgba(0, 41, 24, 0.32);
}

.profile-avatar-crop-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.profile-avatar-crop-head p,
.profile-avatar-crop-head h2 {
  margin: 0;
}

.profile-avatar-crop-head p {
  color: var(--primary-strong);
  font-size: 0.72rem;
  font-weight: 900;
}

.profile-avatar-crop-head h2 {
  margin-top: 2px;
  color: var(--foreground);
  font-size: 1.05rem;
  line-height: 1.15;
  font-weight: 950;
}

.profile-avatar-crop-close {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, 0.07);
  color: var(--foreground);
}

.profile-avatar-crop-body {
  display: grid;
  gap: 12px;
}

.profile-avatar-crop-stage {
  position: relative;
  width: min(100%, 340px);
  aspect-ratio: 1;
  margin-inline: auto;
  overflow: hidden;
  border-radius: 26px;
  background:
    linear-gradient(45deg, rgba(20, 118, 71, 0.09) 25%, transparent 25% 75%, rgba(20, 118, 71, 0.09) 75%),
    linear-gradient(45deg, rgba(20, 118, 71, 0.09) 25%, transparent 25% 75%, rgba(20, 118, 71, 0.09) 75%);
  background-color: #e9f6ee;
  background-position: 0 0, 12px 12px;
  background-size: 24px 24px;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.profile-avatar-crop-stage.is-dragging {
  cursor: grabbing;
}

.profile-avatar-crop-stage img {
  position: absolute;
  transform: translate(-50%, -50%);
  max-width: none;
  max-height: none;
  pointer-events: none;
  user-select: none;
}

.profile-avatar-crop-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, transparent 0 42%, rgba(3, 21, 13, 0.34) 43% 100%);
}

.profile-avatar-crop-frame {
  position: absolute;
  inset: 8%;
  z-index: 3;
  border: 2px solid rgba(255, 255, 255, 0.96);
  border-radius: 999px;
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(20, 118, 71, 0.28), 0 18px 46px rgba(0, 35, 20, 0.2);
}

.profile-avatar-crop-frame::before,
.profile-avatar-crop-frame::after {
  content: "";
  position: absolute;
  inset: 33.333% 0 auto;
  height: 1px;
  background: rgba(255, 255, 255, 0.44);
}

.profile-avatar-crop-frame::after {
  inset: auto 0 33.333%;
}

.profile-avatar-crop-controls {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  gap: 10px;
  align-items: center;
}

.profile-avatar-zoom-step {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(20, 118, 71, 0.16);
  border-radius: 13px;
  background: #fff;
  color: var(--primary-strong);
}

.profile-avatar-zoom-range {
  display: grid;
  gap: 7px;
}

.profile-avatar-zoom-range span {
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 850;
}

.profile-avatar-zoom-range input {
  width: 100%;
  accent-color: var(--primary);
}

.profile-avatar-crop-error {
  margin: 0;
  padding: 9px 11px;
  border: 1px solid rgba(220, 38, 38, 0.18);
  border-radius: 13px;
  background: rgba(254, 226, 226, 0.8);
  color: #991b1b;
  font-size: 0.72rem;
  font-weight: 850;
}

.profile-avatar-crop-actions {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: center;
}

.profile-edit-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.profile-save-button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 13px;
  background: var(--gradient-primary);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 900;
}

.profile-save-button .fa-icon {
  width: 12px;
  height: 12px;
  font-size: 0.72rem;
}

.credits-stack {
  gap: 16px;
}

.credits-hero-card {
  position: relative;
  overflow: hidden;
  padding: 18px;
  border-radius: 24px;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.16), transparent 34%),
    linear-gradient(150deg, transparent 0 60%, rgba(255, 255, 255, 0.08) 60% 61%, transparent 61% 100%),
    var(--gradient-primary);
  color: #fff;
}

.credits-hero-card::before {
  content: "\f4d8";
  position: absolute;
  top: -22px;
  right: -12px;
  font-family: "Font Awesome 7 Pro";
  font-size: 8.4rem;
  font-weight: 900;
  line-height: 1;
  color: rgba(255, 255, 255, 0.075);
  transform: rotate(-18deg);
  pointer-events: none;
}

.credits-hero-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 52%);
  pointer-events: none;
}

.credits-hero-content {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 16px;
}

.credits-hero-top {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.credits-hero-top p {
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.72rem;
  font-weight: 800;
}

.credits-hero-top strong {
  display: block;
  margin-top: 2px;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  font-weight: 900;
}

.credits-hero-top > span {
  flex: 0 0 auto;
  max-width: 44%;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1.2;
}

.credits-hero-top .fa-icon {
  width: 12px;
  height: 12px;
  font-size: 0.72rem;
}

.credits-progress-block {
  display: grid;
  gap: 7px;
}

.credits-progress-block .split-line,
.credits-progress-block .split-line strong {
  color: rgba(255, 255, 255, 0.86);
}

.credits-progress-track {
  position: relative;
  padding-block: 5px;
}

.credits-progress-block .progress {
  height: 8px;
  background: rgba(255, 255, 255, 0.18);
}

.credits-progress-block .progress > span {
  background: linear-gradient(90deg, #ffffff, #d8ffe9, #ffffff);
  background-size: 180% 100%;
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.22);
  animation: progress-glow 2.4s ease-in-out infinite;
}

.credits-progress-block .progress > span::after {
  background: linear-gradient(90deg, transparent, rgba(255, 231, 138, 0.82), rgba(255, 255, 255, 0.95), transparent);
  animation: progress-sheen-loop 2.1s ease-in-out infinite;
}

.credits-hero-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.credits-hero-actions a {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 800;
}

.credits-hero-actions .fa-icon {
  width: 12px;
  height: 12px;
  font-size: 0.72rem;
}

.section-head.compact {
  align-items: center;
}

.credit-journey-card {
  position: relative;
  overflow: hidden;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(239, 249, 242, 0.92)),
    var(--card);
}

.credit-journey-card::before {
  content: "\f4d8";
  position: absolute;
  top: 28px;
  right: -16px;
  font-family: "Font Awesome 7 Pro";
  font-size: 8rem;
  font-weight: 900;
  line-height: 1;
  color: rgba(20, 118, 71, 0.055);
  transform: rotate(-18deg);
  pointer-events: none;
}

.credit-journey-head {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.credit-journey-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: var(--gradient-accent);
  color: var(--primary-deep);
}

.credit-journey-mark .fa-icon {
  width: 17px;
  height: 17px;
  font-size: 0.92rem;
}

.credit-journey-head p,
.credit-journey-head strong,
.credit-journey-head small {
  display: block;
  overflow: hidden;
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.credit-journey-head p {
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 800;
}

.credit-journey-head strong {
  margin-top: 1px;
  color: var(--foreground);
  font-size: 0.98rem;
  line-height: 1.16;
  font-weight: 900;
}

.credit-journey-head small {
  margin-top: 3px;
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 700;
}

.credit-journey-head em {
  min-width: 42px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-strong);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 900;
}

.credit-journey-stage {
  position: relative;
  z-index: 1;
  margin-top: 14px;
}

.credit-journey-rail {
  position: absolute;
  left: 22px;
  top: 22px;
  bottom: 22px;
  width: 7px;
  border-radius: 999px;
  background: rgba(20, 118, 71, 0.09);
}

.credit-journey-rail::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(var(--journey-progress) * 1%);
  border-radius: inherit;
  background: linear-gradient(180deg, #fff7d8, var(--accent), var(--primary), #d8ffe9);
  background-size: 100% 180%;
  box-shadow:
    0 0 16px rgba(20, 118, 71, 0.22),
    0 0 22px rgba(237, 174, 50, 0.18);
}

.page.is-mounted .credit-journey-rail::after {
  animation: journey-rail-glow 2.4s ease-in-out infinite;
}

.journey-rail-marker {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: calc(var(--journey-progress) * 1%);
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--gradient-accent);
  color: var(--primary-deep);
  box-shadow: 0 8px 18px rgba(237, 174, 50, 0.26);
  transform: translate(-50%, -50%) scale(0.92);
}

.page.is-mounted .journey-rail-marker {
  animation: journey-marker-pop 700ms var(--ease-spring) 420ms both, journey-marker-float 2.6s ease-in-out 1.3s infinite;
}

.journey-rail-marker .fa-icon {
  width: 10px;
  height: 10px;
  font-size: 0.64rem;
}

.journey-rail-spark {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 0;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: radial-gradient(circle, #fff 0 32%, #ffe78a 33% 55%, rgba(184, 255, 213, 0.95) 56% 100%);
  box-shadow:
    0 -10px 12px rgba(255, 231, 138, 0.18),
    0 0 10px rgba(255, 255, 255, 1),
    0 0 18px rgba(255, 231, 138, 0.78),
    0 0 26px rgba(184, 255, 213, 0.58);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5);
  pointer-events: none;
}

.page.is-mounted .journey-rail-spark {
  animation: journey-spark-run 2.8s ease-in-out infinite;
}

.page.is-mounted .journey-rail-spark.spark-one {
  animation-delay: 0.7s;
}

.page.is-mounted .journey-rail-spark.spark-two {
  width: 6px;
  height: 6px;
  animation-delay: 1.55s;
}

.page.is-mounted .journey-rail-spark.spark-three {
  width: 5px;
  height: 5px;
  animation-delay: 2.2s;
}

.credit-journey-nodes {
  position: relative;
  display: grid;
  gap: 12px;
}

.credit-journey-node {
  --node-start: color-mix(in oklab, var(--node-color, #16a34a) 16%, white);
  --node-end: color-mix(in oklab, var(--node-color, #16a34a) 4%, white);
  min-width: 0;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.credit-node-orb {
  position: relative;
  z-index: 1;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border: 4px solid #fff;
  border-radius: 18px;
  background: var(--gradient-primary);
  color: #fff;
  box-shadow: 0 10px 22px rgba(20, 118, 71, 0.14);
}

.credit-journey-node.is-unlocked .credit-node-orb {
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.7), transparent 28%),
    linear-gradient(135deg, var(--node-color), color-mix(in oklab, var(--node-color) 72%, #0f8f83));
  color: #fff;
  box-shadow: 0 12px 24px var(--node-glow);
}

.credit-journey-node.is-unlocked .credit-node-orb small {
  background: var(--node-color);
}

.credit-journey-node.tone-sprout {
  --node-color: #16a34a;
  --node-glow: rgba(22, 163, 74, 0.14);
}

.credit-journey-node.tone-leaf {
  --node-color: #0d9488;
  --node-glow: rgba(13, 148, 136, 0.14);
}

.credit-journey-node.tone-tree {
  --node-color: #0284c7;
  --node-glow: rgba(2, 132, 199, 0.14);
}

.credit-journey-node.tone-star {
  --node-color: #d97706;
  --node-glow: rgba(217, 119, 6, 0.16);
}

.credit-journey-node.tone-forest {
  --node-color: #6d5bd0;
  --node-glow: rgba(109, 91, 208, 0.14);
}

.credit-journey-node.tone-gold {
  --node-color: #b45309;
  --node-glow: rgba(180, 83, 9, 0.14);
}

.credit-journey-node.is-current .credit-node-orb {
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.78), transparent 28%),
    var(--gradient-accent);
  color: var(--primary-deep);
  box-shadow: 0 12px 26px rgba(237, 174, 50, 0.26);
  transform: scale(1.06);
}

.credit-journey-node.is-locked .credit-node-orb {
  background: #edf5ee;
  color: var(--muted-foreground);
  box-shadow: none;
}

.credit-node-orb .fa-icon {
  width: 17px;
  height: 17px;
  font-size: 0.92rem;
}

.credit-node-orb small {
  position: absolute;
  right: -5px;
  bottom: -5px;
  min-width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--primary-deep);
  color: #fff;
  font-size: 0.58rem;
  font-weight: 900;
}

.credit-node-achievement {
  position: absolute;
  right: -7px;
  top: -7px;
  z-index: 2;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 8px 16px rgba(15, 79, 49, 0.16);
}

.credit-node-achievement .credit-achievement-icon {
  width: 18px;
  height: 18px;
}

.credit-journey-node.is-current .credit-node-orb small {
  background: var(--accent-strong);
}

.credit-journey-node.is-locked .credit-node-orb small {
  background: #cfded4;
  color: var(--muted-foreground);
}

.credit-node-copy {
  min-width: 0;
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 4px;
  padding: 10px 11px;
  border: 1px solid rgba(217, 232, 223, 0.86);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
}

.credit-journey-node.is-unlocked .credit-node-copy {
  border-color: color-mix(in oklab, var(--node-color) 24%, white);
  background:
    radial-gradient(circle at 92% 20%, color-mix(in oklab, var(--node-color) 18%, transparent), transparent 34%),
    linear-gradient(135deg, var(--node-start), var(--node-end) 54%, rgba(255, 255, 255, 0.96)),
    #fff;
  box-shadow: 0 10px 24px var(--node-glow);
}

.credit-journey-node.is-current .credit-node-copy {
  border-color: rgba(237, 174, 50, 0.34);
  background:
    radial-gradient(circle at 92% 20%, rgba(245, 158, 11, 0.18), transparent 34%),
    linear-gradient(135deg, rgba(255, 247, 216, 0.96), rgba(223, 244, 232, 0.82)),
    #fff;
  box-shadow: 0 10px 24px rgba(237, 174, 50, 0.1);
}

.credit-journey-node.is-unlocked .credit-node-copy::before,
.credit-journey-node.is-current .credit-node-copy::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, transparent 0 64%, rgba(255, 255, 255, 0.38) 64% 65%, transparent 65% 100%),
    radial-gradient(circle at 10% 92%, rgba(255, 255, 255, 0.48), transparent 28%);
  pointer-events: none;
}

.credit-journey-node.is-locked .credit-node-copy {
  background: rgba(246, 250, 247, 0.72);
}

.credit-node-copy > span {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.credit-node-copy strong,
.credit-node-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.credit-node-copy strong {
  min-width: 0;
  flex: 1 1 auto;
  color: var(--foreground);
  font-size: 0.8rem;
  line-height: 1.2;
}

.credit-node-copy em {
  flex: 0 0 auto;
  max-width: 42%;
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--muted);
  color: var(--muted-foreground);
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.credit-journey-node.is-current .credit-node-copy em {
  background: var(--primary);
  color: #fff;
}

.credit-journey-node.is-unlocked .credit-node-copy em {
  background: color-mix(in oklab, var(--node-color) 12%, white);
  color: var(--node-color);
}

.credit-node-copy small {
  position: relative;
  z-index: 1;
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 800;
}

.credit-node-status-pill {
  gap: 5px;
}

.credit-journey-node.is-unlocked .credit-node-status-pill,
.credit-journey-node.is-current .credit-node-status-pill {
  max-width: 50%;
}

.credit-node-status-pill .credit-achievement-icon {
  width: 15px;
  height: 15px;
}

.credit-node-status-pill span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@keyframes journey-spark-run {
  0% {
    top: 0%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
  }
  12%,
  72% {
    opacity: 0.9;
  }
  86%,
  100% {
    top: calc(var(--journey-progress) * 1%);
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes journey-rail-glow {
  0%,
  100% {
    background-position: 0 0;
  }
  50% {
    background-position: 0 100%;
  }
}

@keyframes journey-marker-pop {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.58);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.92);
  }
}

@keyframes journey-marker-float {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(0.92);
  }
  50% {
    transform: translate(-50%, -62%) scale(1);
  }
}

.credits-stat-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid rgba(217, 232, 223, 0.9);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
}

.credit-stat-cell {
  --stat-main: var(--primary);
  --stat-alt: var(--primary-strong);
  min-width: 0;
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 70px;
  padding: 12px;
  background:
    linear-gradient(135deg, color-mix(in oklab, var(--stat-main) 10%, white), color-mix(in oklab, var(--stat-alt) 5%, white) 58%, rgba(255, 255, 255, 0.96)),
    #fff;
  color: var(--foreground);
}

.credit-stat-cell:nth-child(2n) {
  border-left: 1px solid rgba(217, 232, 223, 0.78);
}

.credit-stat-cell:nth-child(n + 3) {
  border-top: 1px solid rgba(217, 232, 223, 0.78);
}

.credit-stat-cell::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--stat-main), var(--stat-alt));
  opacity: 0.72;
}

.credit-stat-cell.green {
  --stat-main: #16a34a;
  --stat-alt: #0d9488;
}

.credit-stat-cell.teal {
  --stat-main: #0d9488;
  --stat-alt: #0284c7;
}

.credit-stat-cell.sky {
  --stat-main: #0284c7;
  --stat-alt: #2563eb;
}

.credit-stat-cell.amber {
  --stat-main: #f59e0b;
  --stat-alt: #ef6c00;
}

.credit-stat-icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.credit-stat-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: grid;
  gap: 3px;
}

.credit-stat-cell strong {
  overflow: hidden;
  color: var(--foreground);
  font-size: 1.02rem;
  line-height: 1.1;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.credit-stat-cell small {
  overflow: hidden;
  color: var(--muted-foreground);
  font-size: 0.65rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.credit-badge-list,
.credit-transaction-list,
.credit-action-list {
  display: grid;
  gap: 9px;
}

.credit-badge-card,
.credit-transaction-card,
.credit-action-card {
  min-width: 0;
  position: relative;
  overflow: hidden;
  display: grid;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
}

.credit-badge-card {
  --badge-main: var(--primary);
  --badge-alt: var(--primary-strong);
  --badge-soft: color-mix(in oklab, var(--badge-main) 12%, white);
  grid-template-columns: 46px minmax(0, 1fr) auto;
  min-height: 66px;
}

.credit-badge-card.is-earned {
  border-color: color-mix(in oklab, var(--badge-main) 24%, white);
  background:
    radial-gradient(circle at 92% 12%, color-mix(in oklab, var(--badge-alt) 18%, transparent), transparent 30%),
    linear-gradient(135deg, var(--badge-soft), rgba(255, 255, 255, 0.96) 55%, color-mix(in oklab, var(--badge-alt) 8%, white)),
    var(--card);
  box-shadow: 0 10px 24px color-mix(in oklab, var(--badge-main) 12%, transparent);
}

.credit-badge-card.is-earned::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, transparent 0 66%, rgba(255, 255, 255, 0.46) 66% 67%, transparent 67% 100%),
    radial-gradient(circle at 12% 96%, rgba(255, 255, 255, 0.56), transparent 28%);
  pointer-events: none;
}

.credit-badge-card.badge-sprout {
  --badge-main: #16a34a;
  --badge-alt: #0d9488;
}

.credit-badge-card.badge-forest {
  --badge-main: #147647;
  --badge-alt: #0c4f31;
}

.credit-badge-card.badge-river {
  --badge-main: #0284c7;
  --badge-alt: #0d9488;
}

.credit-badge-card.badge-violet {
  --badge-main: #7c3aed;
  --badge-alt: #db2777;
}

.credit-badge-card.badge-sky {
  --badge-main: #2563eb;
  --badge-alt: #06b6d4;
}

.credit-badge-card.badge-gold {
  --badge-main: #f59e0b;
  --badge-alt: #d97706;
}

.credit-badge-emblem,
.credit-transaction-icon,
.credit-action-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--gradient-primary);
  color: #fff;
}

.credit-badge-card.is-locked .credit-badge-emblem {
  background: var(--muted);
  color: var(--muted-foreground);
}

.credit-badge-emblem {
  position: relative;
  z-index: 1;
  width: 46px;
  height: 46px;
  border-radius: 0;
  background: transparent;
  color: inherit;
}

.credit-badge-card.is-locked .credit-badge-emblem {
  background: transparent;
  color: inherit;
}

.credit-badge-card.is-earned .credit-badge-emblem {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.78), transparent 30%),
    linear-gradient(135deg, var(--badge-main), var(--badge-alt));
  box-shadow: 0 10px 20px color-mix(in oklab, var(--badge-main) 18%, transparent);
}

.credit-badge-card.is-earned .credit-badge-emblem .credit-art {
  width: 34px;
  height: 34px;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.12));
}

.credit-badge-emblem .fa-icon,
.credit-transaction-icon .fa-icon,
.credit-action-icon .fa-icon {
  width: 16px;
  height: 16px;
  font-size: 0.86rem;
}

.credit-art {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  filter: drop-shadow(0 6px 10px rgba(15, 79, 49, 0.08));
}

.credit-badge-emblem .credit-art {
  width: 44px;
  height: 44px;
}

.credit-art.is-muted {
  opacity: 0.54;
  filter: grayscale(0.78);
}

.credit-achievement-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  filter: drop-shadow(0 4px 8px rgba(15, 79, 49, 0.12));
}

.credit-badge-card span:nth-child(2),
.credit-transaction-card span:nth-child(2),
.credit-action-card span:nth-child(2) {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}

.credit-badge-card strong,
.credit-badge-card small,
.credit-transaction-card strong,
.credit-transaction-card small,
.credit-action-card strong,
.credit-action-card small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.credit-badge-card strong,
.credit-transaction-card strong,
.credit-action-card strong {
  color: var(--foreground);
  font-size: 0.78rem;
  line-height: 1.25;
}

.credit-badge-card small,
.credit-transaction-card small,
.credit-action-card small {
  color: var(--muted-foreground);
  font-size: 0.68rem;
  line-height: 1.25;
}

.credit-badge-card em,
.credit-transaction-card em {
  justify-self: end;
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 900;
  white-space: nowrap;
}

.credit-badge-card em {
  position: relative;
  z-index: 1;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-strong);
}

.credit-badge-status {
  gap: 5px;
  padding: 0 7px 0 5px !important;
  background: rgba(255, 255, 255, 0.72) !important;
  color: var(--badge-alt) !important;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--badge-main) 18%, white);
}

.credit-badge-status .credit-achievement-icon {
  width: 17px;
  height: 17px;
}

.credit-badge-status span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.credit-badge-card.is-locked em {
  background: var(--muted);
  color: var(--muted-foreground);
}

.credit-transaction-card,
.credit-action-card {
  grid-template-columns: 40px minmax(0, 1fr) auto;
}

.credit-transaction-card em {
  color: var(--primary);
}

.credit-transaction-icon.donation_paid {
  background: linear-gradient(135deg, #f59e0b, #ef6c00);
}

.credit-transaction-icon.event_joined {
  background: linear-gradient(135deg, #0284c7, #2563eb);
}

.credit-transaction-icon.badge_earned {
  background: linear-gradient(135deg, #7c3aed, #db2777);
}

.credit-action-card > .fa-icon {
  width: 11px;
  height: 11px;
  color: var(--muted-foreground);
  font-size: 0.68rem;
}

.activities-stack {
  gap: 14px;
}

.activity-filter-panel {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 13px;
  padding: 16px;
  border: 0;
  border-radius: 24px;
  background:
    radial-gradient(circle at 88% 12%, rgba(255, 226, 133, 0.16), transparent 30%),
    linear-gradient(120deg, rgba(255, 255, 255, 0.14), transparent 34%),
    linear-gradient(150deg, transparent 0 61%, rgba(255, 255, 255, 0.08) 61% 62%, transparent 62% 100%),
    var(--gradient-primary);
  color: #fff;
}

.activity-filter-panel::before {
  content: "\f4d8";
  position: absolute;
  right: -20px;
  bottom: -44px;
  font-family: "Font Awesome 7 Pro";
  font-size: 9rem;
  font-weight: 900;
  line-height: 1;
  color: rgba(255, 255, 255, 0.07);
  transform: rotate(-16deg);
  pointer-events: none;
}

.activity-filter-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.activity-filter-head > div {
  min-width: 0;
}

.activity-filter-head p {
  margin: 0 0 2px;
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.72rem;
  font-weight: 800;
}

.activity-filter-head h1 {
  margin: 0;
  max-width: 19rem;
  color: #fff;
  font-size: 1.24rem;
  line-height: 1.14;
  font-weight: 900;
}

.activity-filter-head small {
  display: block;
  max-width: 21rem;
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.74rem;
  line-height: 1.44;
  font-weight: 700;
}

.activity-filter-head > span {
  flex: 0 0 auto;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 900;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.13);
}

.activity-filter-head > span .fa-icon {
  width: 12px;
  height: 12px;
  color: #fff1c7;
  font-size: 0.7rem;
}

.activity-hero-stats {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.activity-hero-stat {
  min-width: 0;
  min-height: 64px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 3px;
  padding: 8px 5px;
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.11);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.11);
  text-align: center;
}

.activity-hero-stat .fa-icon {
  width: 16px;
  height: 16px;
  color: #fff1c7;
  font-size: 0.86rem;
}

.activity-hero-stat strong,
.activity-hero-stat small {
  overflow: hidden;
  max-width: 100%;
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activity-hero-stat strong {
  color: #fff;
  font-size: 0.9rem;
  line-height: 1.1;
  font-weight: 900;
}

.activity-hero-stat small {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.62rem;
  line-height: 1.2;
  font-weight: 800;
}

.activity-filter-form {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  padding: 10px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.13);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.11);
}

.activity-search-field {
  min-height: 40px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--muted-foreground);
}

.activity-search-field .fa-icon {
  width: 15px;
  height: 15px;
  font-size: 0.8rem;
}

.activity-search-field input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--foreground);
  font: inherit;
  font-size: 0.8rem;
}

.activity-chip-row {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding-bottom: 1px;
  scrollbar-width: none;
}

.activity-chip-row::-webkit-scrollbar {
  display: none;
}

.activity-chip {
  flex: 0 0 auto;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.13);
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.72rem;
  font-weight: 800;
  transition:
    transform var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    background var(--motion-fast) ease,
    color var(--motion-fast) ease;
}

.activity-chip .fa-icon {
  width: 12px;
  height: 12px;
  font-size: 0.68rem;
}

.activity-chip.is-active {
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.94);
  color: var(--primary-strong);
  box-shadow: 0 8px 18px rgba(7, 57, 37, 0.16);
}

.activity-chip-row.compact .activity-chip {
  min-height: 28px;
  font-size: 0.68rem;
}

.activity-list {
  display: grid;
  gap: 12px;
}

.public-list-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(191, 216, 200, 0.82);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--muted-foreground);
  font-size: 0.78rem;
  font-weight: 800;
  box-shadow: var(--shadow-tight);
}

.public-list-pagination > div {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.public-list-pagination .button-secondary {
  min-height: 34px;
  padding-inline: 12px;
  border-radius: 999px;
  font-size: 0.76rem;
}

.public-list-pagination .button-secondary:disabled {
  opacity: 0.48;
  cursor: not-allowed;
  transform: none;
}

@media (max-width: 380px) {
  .public-list-pagination {
    align-items: stretch;
    flex-direction: column;
  }

  .public-list-pagination > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.activity-card {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--card);
}

.activity-card-media {
  position: relative;
  display: block;
  min-height: 136px;
  overflow: hidden;
  background: var(--secondary);
}

.activity-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 38%, rgba(7, 42, 27, 0.42));
  pointer-events: none;
}

.activity-card-media img {
  width: 100%;
  height: 136px;
  object-fit: cover;
}

.activity-card-badges {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.activity-type,
.activity-status {
  min-height: 23px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  color: #fff;
  font-size: 0.64rem;
  font-weight: 900;
  backdrop-filter: blur(10px);
}

.activity-type {
  background: rgba(12, 112, 72, 0.9);
}

.activity-type.volunteer {
  background: rgba(20, 104, 184, 0.9);
}

.activity-type.planting {
  background: rgba(12, 112, 72, 0.92);
}

.activity-type.donation {
  background: rgba(196, 89, 22, 0.92);
}

.activity-type.planting_project {
  background: rgba(15, 79, 49, 0.92);
}

.activity-type.waste_collection {
  background: rgba(2, 132, 199, 0.9);
}

.activity-type.education {
  background: rgba(124, 58, 237, 0.9);
}

.activity-status {
  background: rgba(255, 255, 255, 0.88);
  color: var(--primary-deep);
}

.activity-status.ongoing {
  background: rgba(255, 231, 138, 0.9);
  color: #6a4200;
}

.activity-status.open {
  background: rgba(196, 255, 218, 0.92);
  color: #07583a;
}

.activity-status.upcoming {
  background: rgba(255, 231, 138, 0.9);
  color: #6a4200;
}

.activity-card-body {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.activity-card-body h2 {
  margin: 0;
  color: var(--foreground);
  font-size: 0.95rem;
  line-height: 1.28;
  font-weight: 900;
}

.activity-card-body > p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.76rem;
  line-height: 1.42;
}

.activity-meta-grid {
  display: grid;
  gap: 7px;
}

.activity-meta-grid span {
  min-width: 0;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 700;
}

.activity-meta-grid .fa-icon {
  width: 13px;
  height: 13px;
  color: var(--primary);
  font-size: 0.7rem;
}

.activity-meta-grid em {
  overflow: hidden;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activity-progress {
  display: grid;
  gap: 5px;
  padding: 9px 10px;
  border-radius: 14px;
  background: color-mix(in oklab, var(--primary) 6%, white);
}

.activity-progress .progress {
  height: 6px;
  background: rgba(12, 112, 72, 0.1);
}

.activity-card-cta {
  position: relative;
  overflow: hidden;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 999px;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.16), transparent 35%),
    linear-gradient(150deg, transparent 0 62%, rgba(255, 255, 255, 0.09) 62% 63%, transparent 63% 100%),
    var(--gradient-primary);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 800;
  box-shadow: 0 10px 22px rgba(13, 117, 78, 0.2);
  transition:
    transform var(--motion-fast) ease,
    background var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease;
}

.activity-card-cta::before {
  content: "\f06c";
  position: absolute;
  top: -13px;
  right: 18px;
  font-family: "Font Awesome 7 Pro";
  font-size: 3.4rem;
  font-weight: 900;
  line-height: 1;
  color: rgba(255, 255, 255, 0.075);
  transform: rotate(-18deg);
  pointer-events: none;
}

.activity-card-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 48%);
  pointer-events: none;
}

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

.activity-card-cta .join-icon {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}

.activity-card-cta .join-icon .fa-icon {
  width: 12px;
  height: 12px;
  font-size: 0.72rem;
}

.activity-card-cta .fa-icon {
  width: 11px;
  height: 11px;
  font-size: 0.68rem;
}

.activity-card-cta.planting {
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.16), transparent 35%),
    linear-gradient(135deg, #0f8f5d, #0b5f42);
}

.activity-card-cta.donation {
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.16), transparent 35%),
    linear-gradient(135deg, #f59e0b, #dc5f21);
  box-shadow: 0 10px 22px rgba(220, 95, 33, 0.18);
}

.my-donations-stack {
  gap: 14px;
}

.my-donations-hero-card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 24px;
  color: #fff;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.15), transparent 34%),
    radial-gradient(circle at 86% 14%, rgba(251, 191, 36, 0.24), transparent 28%),
    linear-gradient(145deg, #0f1e36 0%, #124e5c 52%, #0f6b45 100%);
  box-shadow: 0 22px 46px rgba(16, 50, 95, 0.18);
}

.my-donations-hero-card::before {
  content: "\f4c0";
  position: absolute;
  right: -22px;
  bottom: -42px;
  font-family: "Font Awesome 7 Pro";
  font-size: 8.8rem;
  font-weight: 900;
  line-height: 1;
  color: rgba(255, 255, 255, 0.07);
  transform: rotate(-12deg);
  pointer-events: none;
}

.my-donations-hero-copy,
.my-donations-hero-stats {
  position: relative;
  z-index: 1;
}

.my-donations-hero-copy {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.my-donations-hero-copy > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.72rem;
  font-weight: 800;
}

.my-donations-hero-copy > span .fa-icon {
  width: 13px;
  height: 13px;
  color: #fff1c7;
}

.my-donations-hero-copy h1,
.my-donations-hero-copy p {
  margin: 0;
}

.my-donations-hero-copy h1 {
  max-width: 25rem;
  color: #fff;
  font-size: 1.2rem;
  line-height: 1.15;
  font-weight: 900;
}

.my-donations-hero-copy p {
  max-width: 28rem;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.75rem;
  line-height: 1.45;
  font-weight: 700;
}

.my-donations-hero-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.my-donations-hero-stat {
  min-width: 0;
  min-height: 64px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 3px;
  padding: 8px 5px;
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.11);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.11);
  text-align: center;
}

.my-donations-hero-stat .fa-icon {
  width: 16px;
  height: 16px;
  color: #fff1c7;
  font-size: 0.86rem;
}

.my-donations-hero-stat strong,
.my-donations-hero-stat small {
  overflow: hidden;
  max-width: 100%;
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-donations-hero-stat strong {
  color: #fff;
  font-size: 0.86rem;
  line-height: 1.1;
  font-weight: 900;
}

.my-donations-hero-stat small {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.61rem;
  line-height: 1.2;
  font-weight: 800;
}

.my-donations-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 5px;
  border: 1px solid rgba(217, 232, 223, 0.9);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.72);
}

.my-donations-tab {
  min-width: 0;
  min-height: 48px;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 800;
}

.my-donations-tab .fa-icon {
  width: 14px;
  height: 14px;
  font-size: 0.74rem;
}

.my-donations-tab span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-donations-tab strong {
  min-width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(20, 118, 71, 0.08);
  color: var(--primary-strong);
  font-size: 0.66rem;
}

.my-donations-tab.is-active {
  background: linear-gradient(135deg, #0f6b45, #155e75);
  color: #fff;
  box-shadow: 0 8px 18px rgba(16, 94, 117, 0.16);
}

.my-donations-tab.is-active strong {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.my-donations-list {
  display: grid;
  gap: 12px;
}

.my-donation-card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(191, 216, 200, 0.8);
  border-radius: 20px;
  background:
    radial-gradient(circle at 94% 8%, rgba(251, 191, 36, 0.1), transparent 30%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(241, 249, 244, 0.92));
  box-shadow: 0 14px 34px rgba(20, 63, 45, 0.08);
}

.my-donation-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, #0f8f5d, #f59e0b);
}

.my-donation-card.is-pending::before {
  background: linear-gradient(180deg, #f59e0b, #f97316);
}

.my-donation-card.is-closed::before {
  background: linear-gradient(180deg, #94a3b8, #64748b);
}

.my-donation-card-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.my-donation-card-head > strong {
  color: #0f5138;
  font-size: 0.98rem;
  font-weight: 900;
  white-space: nowrap;
}

.my-donation-card-main {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.my-donation-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(135deg, #0f6b45, #155e75);
}

.my-donation-card.is-pending .my-donation-icon {
  background: linear-gradient(135deg, #f59e0b, #ea580c);
}

.my-donation-card.is-closed .my-donation-icon {
  background: linear-gradient(135deg, #64748b, #334155);
}

.my-donation-card-main h3,
.my-donation-card-main p {
  margin: 0;
}

.my-donation-card-main h3 {
  color: var(--foreground);
  font-size: 0.95rem;
  line-height: 1.25;
  font-weight: 900;
}

.my-donation-card-main p {
  margin-top: 3px;
  color: var(--muted-foreground);
  font-size: 0.74rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.my-donation-meta-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.my-donation-meta-grid span {
  min-width: 0;
  display: grid;
  grid-template-columns: 16px minmax(0, 0.72fr) minmax(0, 1.28fr);
  align-items: center;
  gap: 7px;
  padding: 9px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.7);
}

.my-donation-meta-grid .fa-icon {
  width: 13px;
  height: 13px;
  color: var(--primary);
  font-size: 0.7rem;
}

.my-donation-meta-grid em,
.my-donation-meta-grid strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-donation-meta-grid em {
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 800;
}

.my-donation-meta-grid strong {
  color: var(--foreground-soft);
  font-size: 0.72rem;
  font-weight: 900;
  text-align: right;
}

.my-donation-actions {
  justify-content: flex-start;
}

.my-donation-actions .button-secondary,
.my-donation-actions .button-ghost {
  flex: 1 1 auto;
  min-width: 112px;
  color: var(--primary-strong);
}

.my-donation-actions .button-ghost {
  background: rgba(255, 255, 255, 0.72);
  border-color: var(--border);
  box-shadow: none;
}

.my-donation-actions .button-ghost.danger {
  color: #991b1b;
  border-color: rgba(248, 113, 113, 0.32);
  background: rgba(254, 242, 242, 0.82);
}

.my-events-stack {
  gap: 14px;
}

.my-events-hero-card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 24px;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.15), transparent 34%),
    linear-gradient(150deg, transparent 0 61%, rgba(255, 255, 255, 0.08) 61% 62%, transparent 62% 100%),
    var(--gradient-primary);
  color: #fff;
}

.my-events-hero-card::before {
  content: "\f274";
  position: absolute;
  right: -18px;
  bottom: -42px;
  font-family: "Font Awesome 7 Pro";
  font-size: 8.8rem;
  font-weight: 900;
  line-height: 1;
  color: rgba(255, 255, 255, 0.07);
  transform: rotate(-14deg);
  pointer-events: none;
}

.my-events-hero-copy,
.my-events-hero-stats {
  position: relative;
  z-index: 1;
}

.my-events-hero-copy {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.my-events-hero-copy > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.72rem;
  font-weight: 800;
}

.my-events-hero-copy > span .fa-icon {
  width: 13px;
  height: 13px;
  color: #fff1c7;
}

.my-events-hero-copy h1,
.my-events-hero-copy p {
  margin: 0;
}

.my-events-hero-copy h1 {
  max-width: 22rem;
  color: #fff;
  font-size: 1.2rem;
  line-height: 1.15;
  font-weight: 900;
}

.my-events-hero-copy p {
  max-width: 24rem;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.75rem;
  line-height: 1.45;
  font-weight: 700;
}

.my-events-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.my-events-hero-stat {
  min-width: 0;
  min-height: 64px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 3px;
  padding: 8px 5px;
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.11);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.11);
  text-align: center;
}

.my-events-hero-stat .fa-icon {
  width: 16px;
  height: 16px;
  color: #fff1c7;
  font-size: 0.86rem;
}

.my-events-hero-stat strong,
.my-events-hero-stat small {
  overflow: hidden;
  max-width: 100%;
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-events-hero-stat strong {
  color: #fff;
  font-size: 0.9rem;
  line-height: 1.1;
  font-weight: 900;
}

.my-events-hero-stat small {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.62rem;
  line-height: 1.2;
  font-weight: 800;
}

.my-events-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 5px;
  border: 1px solid rgba(217, 232, 223, 0.9);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.72);
}

.my-events-tab {
  min-width: 0;
  min-height: 50px;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 800;
  transition:
    transform var(--motion-fast) ease,
    background var(--motion-fast) ease,
    color var(--motion-fast) ease;
}

.my-events-tab .fa-icon {
  width: 14px;
  height: 14px;
  font-size: 0.74rem;
}

.my-events-tab span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-events-tab strong {
  min-width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(20, 118, 71, 0.08);
  color: var(--primary-strong);
  font-size: 0.66rem;
}

.my-events-tab.is-active {
  background: var(--gradient-primary);
  color: #fff;
  box-shadow: 0 8px 18px rgba(13, 117, 78, 0.16);
}

.my-events-tab.is-active strong {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.my-events-list {
  display: grid;
  gap: 12px;
}

.my-event-card {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--card);
}

.my-event-media {
  position: relative;
  display: block;
  min-height: 132px;
  overflow: hidden;
  background: var(--secondary);
}

.my-event-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 34%, rgba(7, 42, 27, 0.46));
  pointer-events: none;
}

.my-event-media img {
  width: 100%;
  height: 132px;
  object-fit: cover;
}

.my-event-floating-status {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 1;
  min-height: 25px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--primary-deep);
  font-size: 0.66rem;
  font-weight: 900;
  backdrop-filter: blur(10px);
}

.my-event-floating-status .fa-icon {
  width: 11px;
  height: 11px;
  font-size: 0.64rem;
}

.my-event-body {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.my-event-meta-line {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.my-event-type,
.my-event-code {
  min-height: 23px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font-size: 0.63rem;
  font-weight: 900;
  white-space: nowrap;
}

.my-event-type {
  padding: 0 8px;
  background: var(--primary-soft);
  color: var(--primary-strong);
}

.my-event-code {
  max-width: 44%;
  overflow: hidden;
  padding: 0 7px;
  background: var(--muted);
  color: var(--muted-foreground);
  text-overflow: ellipsis;
}

.my-event-body h2 {
  margin: 0;
  color: var(--foreground);
  font-size: 0.95rem;
  line-height: 1.28;
  font-weight: 900;
}

.my-event-facts {
  display: grid;
  gap: 7px;
}

.my-event-facts span {
  min-width: 0;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 700;
}

.my-event-facts .fa-icon {
  width: 13px;
  height: 13px;
  color: var(--primary);
  font-size: 0.7rem;
}

.my-event-facts em {
  overflow: hidden;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-event-status-panel {
  min-width: 0;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 10px;
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(223, 244, 232, 0.68), rgba(255, 255, 255, 0.9));
}

.my-event-status-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--gradient-primary);
  color: #fff;
}

.my-event-status-icon .fa-icon {
  width: 15px;
  height: 15px;
  font-size: 0.82rem;
}

.my-event-status-panel span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.my-event-status-panel strong,
.my-event-status-panel small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-event-status-panel strong {
  color: var(--foreground);
  font-size: 0.76rem;
  line-height: 1.24;
}

.my-event-status-panel small {
  color: var(--muted-foreground);
  font-size: 0.67rem;
  line-height: 1.3;
}

.my-event-status-panel em {
  max-width: 84px;
  color: var(--primary-strong);
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1.18;
  text-align: right;
}

.my-event-progress,
.my-event-result {
  display: grid;
  gap: 5px;
  padding: 9px 10px;
  border-radius: 14px;
  background: color-mix(in oklab, var(--primary) 6%, white);
}

.my-event-progress .progress {
  height: 6px;
  background: rgba(12, 112, 72, 0.1);
}

.my-event-result {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.my-event-result span,
.my-event-result strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-event-result span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted-foreground);
  font-size: 0.7rem;
  font-weight: 800;
}

.my-event-result span .fa-icon {
  width: 13px;
  height: 13px;
  color: var(--accent-strong);
}

.my-event-result strong {
  color: var(--primary-strong);
  font-size: 0.78rem;
  font-weight: 900;
}

.my-event-cta {
  position: relative;
  overflow: hidden;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 999px;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.16), transparent 35%),
    linear-gradient(150deg, transparent 0 62%, rgba(255, 255, 255, 0.09) 62% 63%, transparent 63% 100%),
    var(--gradient-primary);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 800;
  box-shadow: 0 10px 22px rgba(13, 117, 78, 0.2);
  transition:
    transform var(--motion-fast) ease,
    background var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease;
}

.my-event-cta::before {
  content: "\f06c";
  position: absolute;
  top: -13px;
  right: 18px;
  font-family: "Font Awesome 7 Pro";
  font-size: 3.4rem;
  font-weight: 900;
  line-height: 1;
  color: rgba(255, 255, 255, 0.075);
  transform: rotate(-18deg);
  pointer-events: none;
}

.my-event-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 48%);
  pointer-events: none;
}

.my-event-cta > * {
  position: relative;
  z-index: 1;
}

.my-event-cta .join-icon {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}

.my-event-cta .join-icon .fa-icon {
  width: 12px;
  height: 12px;
  font-size: 0.72rem;
}

.my-event-cta .fa-icon {
  width: 11px;
  height: 11px;
  font-size: 0.68rem;
}

.my-event-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.my-event-actions .my-event-cta {
  width: 100%;
}

.my-event-cta.is-secondary {
  background:
    linear-gradient(115deg, rgba(15, 118, 110, 0.07), transparent 35%),
    rgba(255, 255, 255, 0.86);
  color: var(--primary-strong);
  box-shadow: inset 0 0 0 1px rgba(191, 216, 200, 0.9);
}

.my-event-cta.is-secondary .join-icon {
  background: color-mix(in oklab, var(--primary) 12%, white);
  color: var(--primary-strong);
}

.my-event-secondary {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(191, 216, 200, 0.88);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--primary-strong);
  font-size: 0.74rem;
  font-weight: 900;
}

.my-event-secondary.danger {
  border-color: rgba(248, 113, 113, 0.34);
  background: rgba(254, 242, 242, 0.82);
  color: #991b1b;
}

.my-event-secondary .fa-icon {
  width: 12px;
  height: 12px;
  font-size: 0.7rem;
}

@media (min-width: 520px) {
  .my-event-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .my-event-actions .my-event-secondary {
    grid-column: 1 / -1;
  }
}

.map-stack {
  gap: 14px;
}

.map-hero-card {
  overflow: hidden;
  position: relative;
  display: grid;
  gap: 14px;
  padding: 17px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 22px;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.13), transparent 34%),
    linear-gradient(160deg, rgba(237, 174, 50, 0.18), transparent 28%),
    linear-gradient(145deg, #063720, #0b5b37 58%, #0e7a50);
  color: #fff;
  box-shadow: 0 20px 54px rgba(7, 42, 27, 0.16);
}

.map-hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.055) 0 1px, transparent 1px 18px),
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
  opacity: 0.6;
  pointer-events: none;
}

.map-hero-card::after {
  content: "\f5a0";
  position: absolute;
  right: -16px;
  bottom: -44px;
  font-family: "Font Awesome 7 Pro";
  font-size: 8.6rem;
  font-weight: 900;
  line-height: 1;
  color: rgba(255, 255, 255, 0.08);
  transform: rotate(-10deg);
  pointer-events: none;
}

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

.map-hero-card p,
.map-hero-card span {
  margin: 0;
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.74rem;
  line-height: 1.45;
}

.map-hero-card h1 {
  margin: 2px 0 0;
  max-width: 18rem;
  color: #fff;
  font-size: 1.12rem;
  line-height: 1.2;
}

.map-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.map-hero-stats div {
  display: grid;
  justify-items: center;
  gap: 4px;
  min-width: 0;
  min-height: 62px;
  align-content: center;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  text-align: center;
}

.map-hero-stats .fa-icon {
  width: 14px;
  height: 14px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.76rem;
}

.map-hero-stats strong {
  color: #fff;
  font-size: 0.94rem;
  line-height: 1.1;
}

.map-hero-stats span {
  font-size: 0.62rem;
}

.vn-map-shell {
  position: relative;
  display: grid;
  gap: 10px;
}

.vn-map-shell.is-map-refreshing .map-toolbar {
  box-shadow:
    0 12px 30px rgba(26, 68, 45, 0.08),
    inset 0 -2px 0 rgba(46, 204, 113, 0.18);
}

.vn-map-shell.is-map-refreshing .leaflet-stage {
  filter: saturate(1.08) contrast(1.03);
}

.map-toolbar {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border: 1px solid rgba(217, 232, 223, 0.86);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 12px 30px rgba(26, 68, 45, 0.08);
  backdrop-filter: blur(16px) saturate(1.05);
}

.map-filter-row {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding-bottom: 1px;
  scrollbar-width: none;
}

.map-filter-row::-webkit-scrollbar {
  display: none;
}

.map-filter-chip,
.map-fit-button,
.map-fullscreen-button {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 900;
  white-space: nowrap;
  transition:
    transform var(--motion-fast) ease,
    background var(--motion-fast) ease,
    color var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease;
}

.map-filter-chip {
  flex: 0 0 auto;
  padding: 0 10px;
}

.map-filter-chip .fa-icon,
.map-fit-button .fa-icon,
.map-fullscreen-button .fa-icon {
  width: 12px;
  height: 12px;
  font-size: 0.68rem;
}

.map-filter-chip.is-active {
  border-color: transparent;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.18), transparent 34%),
    var(--gradient-primary);
  color: #fff;
  box-shadow: 0 9px 18px rgba(13, 117, 78, 0.18);
}

.map-fit-button,
.map-fullscreen-button {
  padding: 0 9px;
  background: rgba(20, 118, 71, 0.08);
  color: var(--primary-strong);
}

.map-fullscreen-button {
  border: 1px solid rgba(20, 118, 71, 0.12);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(241, 248, 244, 0.84));
  box-shadow: 0 8px 18px rgba(26, 68, 45, 0.08);
}

body.has-map-fullscreen {
  overflow: hidden;
}

.vn-map-shell.is-map-fullscreen,
.planting-real-map-panel.is-map-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999;
  width: 100dvw;
  height: 100dvh;
  display: grid;
  gap: 10px;
  padding: calc(12px + env(safe-area-inset-top, 0px)) calc(12px + env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) calc(12px + env(safe-area-inset-left, 0px));
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), transparent 36%),
    linear-gradient(135deg, #052817, #083d27 54%, #0a5638);
}

.vn-map-shell.is-map-fullscreen {
  grid-template-rows: auto minmax(0, 1fr);
}

.planting-real-map-panel.is-map-fullscreen {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.vn-map-shell.is-map-fullscreen .map-toolbar {
  background: rgba(255, 255, 255, 0.86);
}

.vn-map-shell.is-map-fullscreen .vn-map-panel,
.planting-real-map-panel.is-map-fullscreen .planting-real-map-stage {
  min-height: 0;
  height: 100%;
}

.vn-map-shell.is-map-fullscreen .leaflet-stage {
  min-height: 0;
}

.planting-real-map-panel.is-map-fullscreen .planting-tree-sheet {
  position: fixed;
  left: calc(12px + env(safe-area-inset-left, 0px));
  right: calc(12px + env(safe-area-inset-right, 0px));
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  z-index: 10050;
  max-width: 560px;
  margin-inline: auto;
  transform: translateZ(0);
}

.planting-real-map-panel.is-map-fullscreen .planting-map-help {
  position: relative;
  z-index: 30;
}

.vn-map-panel {
  position: relative;
  overflow: hidden;
  min-height: 540px;
  padding: 8px;
  border: 1px solid rgba(10, 74, 45, 0.18);
  border-radius: 26px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.22), transparent 36%),
    linear-gradient(135deg, #062f1d, #0b5737 56%, #0f6f49);
  box-shadow:
    0 24px 70px rgba(7, 42, 27, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.vn-map-panel::before,
.planting-real-map-stage::before,
.leaflet-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.vn-map-panel::before {
  inset: 8px;
  border-radius: 21px;
  background:
    linear-gradient(180deg, rgba(2, 32, 20, 0.14), transparent 24%, transparent 72%, rgba(2, 32, 20, 0.22)),
    radial-gradient(ellipse at 50% 8%, rgba(255, 255, 255, 0.18), transparent 44%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.leaflet-stage::before {
  z-index: 401;
  background:
    linear-gradient(180deg, rgba(5, 39, 25, 0.08), transparent 18%, transparent 80%, rgba(5, 39, 25, 0.11)),
    repeating-linear-gradient(120deg, rgba(255, 255, 255, 0.026) 0 1px, transparent 1px 54px);
  opacity: 0.22;
}

.leaflet-stage {
  position: absolute;
  inset: 8px;
  z-index: 1;
  min-height: 540px;
  overflow: hidden;
  border-radius: 21px;
  background: #cadfd7;
  filter: saturate(1.04) contrast(1.02);
}

.leaflet-stage .leaflet-control-zoom {
  overflow: hidden;
  border: 0;
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(7, 42, 27, 0.18);
}

.leaflet-stage .leaflet-control-zoom a {
  width: 36px;
  height: 36px;
  border: 0;
  background: rgba(255, 255, 255, 0.92);
  color: #0c4f31;
  font: 850 18px/36px Geist, Inter, sans-serif;
}

.leaflet-stage .leaflet-control-attribution {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
  color: var(--muted-foreground);
  font-size: 0.58rem;
  backdrop-filter: blur(10px);
}

.map-loading {
  position: absolute;
  inset: 8px;
  z-index: 5;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 22px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(235, 249, 239, 0.9)),
    var(--secondary);
  color: var(--primary-strong);
  text-align: center;
}

.map-loading span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: var(--gradient-primary);
  color: #fff;
}

.map-loading strong {
  font-size: 0.88rem;
}

.map-loading small {
  color: var(--muted-foreground);
  line-height: 1.4;
}

.leaflet-event-marker {
  background: transparent;
  border: 0;
}

.map-event-pin,
.map-location-pin {
  position: relative;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 999px;
  background: var(--gradient-primary);
  color: #fff;
  box-shadow:
    0 16px 32px rgba(7, 42, 27, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.map-event-pin::after,
.map-location-pin::after {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  box-shadow: 0 0 0 6px rgba(20, 118, 71, 0.12);
  opacity: 0.9;
}

.map-event-pin.is-active::after,
.map-location-pin.is-active::after {
  animation: pin-pulse 2.2s ease-out infinite;
}

.map-event-pin .fa-icon,
.map-location-pin .fa-icon {
  width: 16px;
  height: 16px;
  font-size: 0.85rem;
}

.map-pin-core {
  position: relative;
  z-index: 2;
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
}

.map-pin-ring {
  position: absolute;
  inset: -16px;
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.32) 0 10%, rgba(255, 255, 255, 0.12) 11% 27%, transparent 28%);
  opacity: 0.8;
  transform: scale(0.92);
  animation: map-pin-breathe 2.8s ease-in-out infinite;
}

.map-pin-count {
  position: absolute;
  right: -7px;
  top: -7px;
  z-index: 3;
  min-width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  padding-inline: 5px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--gradient-accent);
  color: var(--primary-deep);
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(26, 68, 45, 0.18);
}

.map-event-pin.waste_collection,
.map-location-pin.waste_collection {
  background: linear-gradient(135deg, #0284c7, #0d9488);
}

.map-event-pin.planting_project,
.map-location-pin.planting,
.map-location-pin.planting_project {
  background: linear-gradient(135deg, #0c4f31, #16a34a);
}

.map-event-pin.education,
.map-location-pin.education {
  background: linear-gradient(135deg, #7c3aed, #db2777);
}

.map-location-pin.activity {
  background: linear-gradient(135deg, #0f766e, #14b8a6);
}

.map-event-pin.is-active,
.map-location-pin.is-active {
  background: var(--gradient-accent);
  color: var(--primary-deep);
  transform: translateY(-2px) scale(1.08);
  box-shadow:
    0 18px 38px rgba(237, 174, 50, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

.map-event-sheet {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 410;
  display: grid;
  gap: 10px;
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(244, 250, 247, 0.92));
  backdrop-filter: blur(18px) saturate(1.12);
  box-shadow: 0 20px 48px rgba(7, 42, 27, 0.2);
}

.map-event-sheet.is-hidden {
  display: none;
}

.map-event-sheet.is-updating {
  animation: sheet-pop 220ms var(--ease-out);
}

.map-sheet-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 8px;
}

.map-sheet-top {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.map-sheet-close {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(20, 118, 71, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--primary-strong);
  box-shadow: 0 8px 18px rgba(26, 68, 45, 0.08);
}

.map-sheet-close .fa-icon {
  width: 11px;
  height: 11px;
  font-size: 0.72rem;
}

.map-event-sheet > strong {
  color: var(--foreground);
  font-size: 0.94rem;
  line-height: 1.26;
}

.map-sheet-metrics {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding-bottom: 1px;
  scrollbar-width: none;
}

.map-sheet-metrics::-webkit-scrollbar {
  display: none;
}

.map-sheet-metrics span {
  flex: 0 0 auto;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(223, 244, 232, 0.96), rgba(255, 255, 255, 0.92));
  color: var(--primary-strong);
  font-size: 0.68rem;
  font-weight: 800;
}

.map-sheet-metrics .fa-icon {
  width: 11px;
  height: 11px;
  font-size: 0.62rem;
}

.map-sheet-items {
  display: grid;
  gap: 8px;
  max-height: 310px;
  overflow-y: auto;
  padding-right: 2px;
}

.map-sheet-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  padding: 9px;
  border: 1px solid rgba(217, 232, 223, 0.82);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(247, 252, 249, 0.94));
  box-shadow: 0 8px 20px rgba(26, 68, 45, 0.06);
}

.map-sheet-item.planting {
  border-color: rgba(22, 163, 74, 0.18);
  background: linear-gradient(135deg, rgba(239, 253, 244, 0.98), rgba(255, 255, 255, 0.95));
}

.map-sheet-item.waste_collection {
  border-color: rgba(2, 132, 199, 0.18);
  background: linear-gradient(135deg, rgba(239, 249, 255, 0.98), rgba(255, 255, 255, 0.95));
}

.map-sheet-item.education {
  border-color: rgba(124, 58, 237, 0.16);
  background: linear-gradient(135deg, rgba(245, 243, 255, 0.98), rgba(255, 255, 255, 0.95));
}

.map-sheet-item-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--gradient-primary);
  color: #fff;
}

.map-sheet-item.planting .map-sheet-item-icon {
  background: linear-gradient(135deg, #0c4f31, #16a34a);
}

.map-sheet-item.waste_collection .map-sheet-item-icon {
  background: linear-gradient(135deg, #0284c7, #0d9488);
}

.map-sheet-item.education .map-sheet-item-icon {
  background: linear-gradient(135deg, #7c3aed, #db2777);
}

.map-sheet-item-icon .fa-icon {
  width: 13px;
  height: 13px;
  font-size: 0.72rem;
}

.map-sheet-item-body {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.map-sheet-item-top {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.map-sheet-item-top span,
.map-sheet-item-top em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.6rem;
  font-style: normal;
  font-weight: 900;
}

.map-sheet-item-top span {
  color: var(--primary-strong);
}

.map-sheet-item-top em {
  color: var(--muted-foreground);
}

.map-sheet-item-body strong,
.map-sheet-item-body small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-sheet-item-body strong {
  color: var(--foreground);
  font-size: 0.76rem;
  line-height: 1.25;
}

.map-sheet-item-body small {
  color: var(--muted-foreground);
  font-size: 0.66rem;
}

.map-sheet-item-progress {
  display: grid;
  gap: 4px;
}

.map-sheet-item-progress .split-line {
  font-size: 0.62rem;
}

.map-sheet-item-progress .progress-track {
  height: 5px;
}

.map-sheet-item-cta {
  min-height: 30px;
  width: fit-content;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding-inline: 10px;
  border-radius: 999px;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.16), transparent 34%),
    var(--gradient-primary);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 900;
}

.map-sheet-item-cta .fa-icon {
  width: 10px;
  height: 10px;
  font-size: 0.62rem;
}

.map-sheet-cta {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 13px;
  background: var(--gradient-primary);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 900;
}

.map-sheet-cta .fa-icon {
  width: 11px;
  height: 11px;
  font-size: 0.68rem;
}

.map-location-list {
  display: grid;
  gap: 9px;
}

.map-location-card {
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto 14px;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(217, 232, 223, 0.92);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 252, 250, 0.94));
  color: var(--foreground);
  text-align: left;
  box-shadow: 0 10px 24px rgba(26, 68, 45, 0.06);
  transition:
    transform var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease;
}

.map-location-card[hidden] {
  display: none;
}

.map-location-card.is-active {
  border-color: color-mix(in oklab, var(--primary) 24%, white);
  background:
    linear-gradient(145deg, rgba(237, 174, 50, 0.15), rgba(255, 255, 255, 0.96)),
    color-mix(in oklab, var(--primary) 6%, white);
  box-shadow: 0 14px 30px rgba(13, 117, 78, 0.12);
}

.map-location-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--gradient-primary);
  color: #fff;
}

.map-location-icon.waste_collection {
  background: linear-gradient(135deg, #0284c7, #0d9488);
}

.map-location-icon.planting {
  background: linear-gradient(135deg, #0c4f31, #16a34a);
}

.map-location-icon.activity {
  background: linear-gradient(135deg, #0f766e, #14b8a6);
}

.map-location-icon.education {
  background: linear-gradient(135deg, #7c3aed, #db2777);
}

.map-location-card strong,
.map-location-card small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-location-card strong {
  font-size: 0.8rem;
  line-height: 1.25;
}

.map-location-card small {
  margin-top: 2px;
  color: var(--muted-foreground);
  font-size: 0.7rem;
}

.map-location-card em {
  padding: 4px 7px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-strong);
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.map-location-card > .fa-icon {
  width: 11px;
  height: 11px;
  color: var(--muted-foreground);
  font-size: 0.66rem;
}

.knowledge-stack,
.article-detail-stack {
  gap: 16px;
}

.knowledge-hero-card,
.article-detail-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 24px;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.16), transparent 34%),
    linear-gradient(150deg, transparent 0 60%, rgba(255, 255, 255, 0.08) 60% 61%, transparent 61% 100%),
    var(--gradient-primary);
  color: #fff;
}

.knowledge-hero-card::before {
  content: "\f02d";
  position: absolute;
  right: -18px;
  bottom: -34px;
  font-family: "Font Awesome 7 Pro";
  font-size: 8.6rem;
  font-weight: 900;
  line-height: 1;
  color: rgba(255, 255, 255, 0.075);
  transform: rotate(-14deg);
  pointer-events: none;
}

.knowledge-hero-copy,
.knowledge-feature-card {
  position: relative;
  z-index: 1;
}

.knowledge-hero-copy {
  display: grid;
  gap: 6px;
}

.knowledge-hero-copy > span,
.article-category-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.72rem;
  font-weight: 800;
}

.article-preview-pill {
  width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(253, 224, 71, 0.45);
  border-radius: 999px;
  background: rgba(253, 224, 71, 0.14);
  color: #fef3c7;
  font-size: 0.72rem;
  font-weight: 900;
}

.knowledge-hero-copy .fa-icon,
.article-preview-pill .fa-icon,
.article-category-pill .fa-icon {
  width: 13px;
  height: 13px;
  color: #ffe78a;
  font-size: 0.76rem;
}

.knowledge-hero-copy h1,
.article-detail-copy h1 {
  margin: 0;
  color: #fff;
  font-size: 1.28rem;
  line-height: 1.16;
  font-weight: 900;
}

.knowledge-hero-copy p,
.article-detail-copy p {
  margin: 0;
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.76rem;
  line-height: 1.46;
}

.knowledge-feature-card {
  overflow: hidden;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: end;
  gap: 10px;
  min-height: 104px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.12);
}

.knowledge-feature-card img {
  width: 92px;
  height: 86px;
  object-fit: cover;
  border-radius: 14px;
}

.knowledge-feature-card span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.knowledge-feature-card em,
.knowledge-feature-card strong {
  overflow: hidden;
  color: #fff;
  text-overflow: ellipsis;
}

.knowledge-feature-card em {
  font-size: 0.64rem;
  font-style: normal;
  font-weight: 800;
  opacity: 0.74;
  white-space: nowrap;
}

.knowledge-feature-card strong {
  display: -webkit-box;
  font-size: 0.82rem;
  line-height: 1.24;
  font-weight: 900;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.knowledge-filter-panel {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(239, 249, 242, 0.92)),
    var(--card);
}

.knowledge-search-form {
  display: grid;
  gap: 10px;
}

.knowledge-search-field {
  min-width: 0;
  min-height: 42px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
}

.knowledge-search-field .fa-icon {
  width: 13px;
  height: 13px;
  color: var(--primary);
  font-size: 0.74rem;
}

.knowledge-search-field input {
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--foreground);
  font-size: 0.78rem;
}

.knowledge-chip-row {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding-bottom: 1px;
  scrollbar-width: none;
}

.knowledge-chip-row::-webkit-scrollbar {
  display: none;
}

.knowledge-chip {
  flex: 0 0 auto;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 900;
  white-space: nowrap;
}

.knowledge-chip .fa-icon {
  width: 11px;
  height: 11px;
  font-size: 0.66rem;
}

.knowledge-chip.is-active {
  border-color: transparent;
  background: var(--gradient-primary);
  color: #fff;
}

.knowledge-list,
.article-related-list {
  display: grid;
  gap: 10px;
}

.knowledge-card {
  overflow: hidden;
  min-width: 0;
  display: grid;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--card);
}

.knowledge-card-media {
  position: relative;
  overflow: hidden;
  min-height: 132px;
}

.knowledge-card-media img {
  width: 100%;
  height: 132px;
  object-fit: cover;
}

.knowledge-card-media span {
  position: absolute;
  left: 10px;
  bottom: 10px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--primary-strong);
  font-size: 0.66rem;
  font-weight: 900;
}

.knowledge-card-body {
  display: grid;
  gap: 8px;
  padding: 12px;
}

.knowledge-meta-row,
.article-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.knowledge-meta-row span,
.article-detail-meta span {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted-foreground);
  font-size: 0.66rem;
  font-weight: 800;
}

.knowledge-meta-row .fa-icon,
.article-detail-meta .fa-icon {
  width: 11px;
  height: 11px;
  color: var(--primary);
  font-size: 0.62rem;
}

.knowledge-meta-row em,
.article-detail-meta em {
  font-style: normal;
}

.knowledge-card h2 {
  margin: 0;
  color: var(--foreground);
  font-size: 0.9rem;
  line-height: 1.26;
  font-weight: 900;
}

.knowledge-card-body p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.72rem;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.knowledge-tag-row,
.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.knowledge-tag-row span,
.article-tags span {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-strong);
  font-size: 0.62rem;
  font-weight: 800;
}

.public-info-stack {
  gap: 14px;
}

.public-info-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 24px;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.16), transparent 32%),
    linear-gradient(150deg, transparent 0 62%, rgba(255, 255, 255, 0.08) 62% 63%, transparent 63% 100%),
    var(--gradient-primary);
  color: #fff;
}

.public-info-hero::before {
  content: "\f4d8";
  position: absolute;
  right: -20px;
  bottom: -36px;
  font-family: "Font Awesome 7 Pro";
  font-size: 8.4rem;
  font-weight: 900;
  line-height: 1;
  color: rgba(255, 255, 255, 0.07);
  transform: rotate(-12deg);
  pointer-events: none;
}

.public-info-contact .public-info-hero::before {
  content: "\f095";
}

.public-info-faq .public-info-hero::before {
  content: "\f0eb";
}

.public-info-policy .public-info-hero::before {
  content: "\f3ed";
}

.public-info-hero-copy,
.public-info-hero-panel {
  position: relative;
  z-index: 1;
}

.public-info-hero-copy {
  display: grid;
  gap: 8px;
}

.public-info-hero-copy > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.72rem;
  font-weight: 900;
}

.public-info-hero-copy > span .fa-icon {
  width: 13px;
  height: 13px;
  color: #ffe78a;
  font-size: 0.76rem;
}

.public-info-hero-copy h1 {
  max-width: 760px;
  margin: 0;
  color: #fff;
  font-size: 1.32rem;
  line-height: 1.15;
  font-weight: 950;
}

.public-info-hero-copy p {
  max-width: 680px;
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.78rem;
  line-height: 1.5;
}

.public-info-hero-actions,
.public-info-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.public-info-hero-actions .button,
.public-info-hero-actions .button-secondary,
.public-info-cta-actions .button-secondary {
  min-height: 38px;
}

.public-info-hero-panel {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.12);
}

.public-info-hero-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.16);
  color: #ffe78a;
}

.public-info-hero-mark .fa-icon {
  width: 18px;
  height: 18px;
  font-size: 1rem;
}

.public-info-hero-panel strong {
  color: #fff;
  font-size: 0.9rem;
  line-height: 1.24;
  font-weight: 950;
}

.public-info-hero-panel p {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.72rem;
  line-height: 1.46;
}

.public-info-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.public-info-metric {
  min-width: 0;
  min-height: 104px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 6px;
  padding: 12px 8px;
  border: 1px solid rgba(199, 221, 209, 0.84);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(236, 249, 242, 0.86)),
    var(--card);
  text-align: center;
}

.public-info-metric span,
.public-info-channel-card > span,
.public-info-check-list .fa-icon {
  display: grid;
  place-items: center;
  color: var(--primary);
}

.public-info-metric span {
  width: 34px;
  height: 34px;
  border-radius: 14px;
  background: var(--primary-soft);
}

.public-info-metric span .fa-icon {
  width: 14px;
  height: 14px;
  font-size: 0.82rem;
}

.public-info-metric strong {
  overflow-wrap: anywhere;
  color: var(--foreground);
  font-size: 0.88rem;
  line-height: 1.14;
  font-weight: 950;
}

.public-info-metric small {
  color: var(--muted-foreground);
  font-size: 0.66rem;
  line-height: 1.25;
  font-weight: 800;
}

.public-info-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(241, 249, 244, 0.9)),
    var(--card);
}

.public-info-channel-grid,
.public-info-section-grid {
  display: grid;
  gap: 10px;
}

.public-info-channel-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(211, 228, 218, 0.86);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.74);
}

.public-info-channel-card > span {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  background: var(--primary-soft);
}

.public-info-channel-card h2,
.public-info-section-card h2,
.public-info-cta h2 {
  margin: 0;
  color: var(--foreground);
  font-size: 0.96rem;
  line-height: 1.22;
  font-weight: 950;
}

.public-info-channel-card p,
.public-info-channel-card strong {
  display: block;
  margin: 4px 0 0;
}

.public-info-channel-card p {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  line-height: 1.42;
}

.public-info-channel-card strong {
  overflow-wrap: anywhere;
  color: var(--primary-strong);
  font-size: 0.78rem;
  line-height: 1.26;
  font-weight: 950;
}

.public-info-support-panel {
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid color-mix(in oklab, var(--primary) 15%, white);
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0%, rgba(250, 204, 21, 0.13), transparent 30%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(235, 250, 242, 0.94));
  box-shadow: 0 16px 38px rgba(6, 78, 59, 0.08);
}

.public-support-copy {
  display: grid;
  gap: 8px;
}

.public-support-copy .section-copy {
  font-size: 0.76rem;
  line-height: 1.48;
}

.public-support-topic-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.public-support-topic-preview span {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border: 1px solid rgba(20, 163, 111, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  color: #07553d;
  font-size: 0.66rem;
  font-weight: 900;
}

.public-support-form {
  display: grid;
  gap: 10px;
}

.public-support-form .form-field {
  gap: 5px;
}

.public-support-form .form-field > span {
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 900;
}

.public-support-form input,
.public-support-form select,
.public-support-form textarea {
  min-height: 43px;
  border-color: rgba(13, 73, 55, 0.14);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(20, 163, 111, 0.045), transparent 52%),
    #fff;
  font-size: 0.78rem;
  font-weight: 800;
}

.public-support-form textarea {
  min-height: 118px;
  line-height: 1.45;
  resize: vertical;
}

.public-support-notice {
  display: none;
  padding: 10px 11px;
  border-radius: 14px;
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1.38;
}

.public-support-notice[data-type="success"],
.public-support-notice[data-type="error"] {
  display: block;
}

.public-support-notice[data-type="success"] {
  border: 1px solid rgba(22, 163, 74, 0.16);
  background: rgba(220, 252, 231, 0.72);
  color: #047857;
}

.public-support-notice[data-type="error"] {
  border: 1px solid rgba(239, 68, 68, 0.16);
  background: rgba(254, 226, 226, 0.72);
  color: #b42318;
}

.public-support-actions {
  display: grid;
  gap: 7px;
}

.public-support-actions .button {
  min-height: 44px;
}

.public-support-actions small {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 800;
}

.support-stack {
  gap: 14px;
}

.support-hero-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  overflow: hidden;
  position: relative;
  border-radius: 24px;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(34, 197, 94, 0.26), transparent 42%),
    linear-gradient(145deg, #083927 0%, #0a5d43 58%, #0f7a58 100%);
  box-shadow: 0 22px 48px rgba(8, 57, 39, 0.22);
}

.support-hero-card::after {
  content: "";
  position: absolute;
  inset: auto -18% -34% 44%;
  height: 130px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.18), transparent 68%);
  pointer-events: none;
}

.support-hero-copy {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 1;
}

.support-hero-icon {
  width: 48px;
  height: 48px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.12);
  color: #d9f99d;
}

.support-hero-copy p,
.support-hero-copy h1,
.support-hero-copy span {
  margin: 0;
}

.support-hero-copy p {
  color: rgba(220, 252, 231, 0.86);
  font-size: 0.68rem;
  font-weight: 950;
  text-transform: uppercase;
}

.support-hero-copy h1 {
  margin-top: 2px;
  color: #fff;
  font-size: 1.34rem;
  line-height: 1.08;
  font-weight: 950;
}

.support-hero-copy span {
  display: block;
  margin-top: 5px;
  color: rgba(240, 253, 244, 0.82);
  font-size: 0.76rem;
  line-height: 1.38;
  font-weight: 750;
}

.support-hero-action {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 42px;
  background: #ecfccb;
  color: #064e3b;
  box-shadow: 0 12px 28px rgba(4, 120, 87, 0.22);
}

.support-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.support-summary-card {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 11px 9px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(236, 253, 245, 0.84));
  box-shadow: 0 12px 26px rgba(15, 118, 110, 0.07);
}

.support-summary-card span {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 10px;
}

.support-summary-card strong,
.support-summary-card small {
  display: block;
}

.support-summary-card strong {
  color: var(--foreground);
  font-size: 1rem;
  line-height: 1;
  font-weight: 950;
}

.support-summary-card small {
  color: var(--muted-foreground);
  font-size: 0.64rem;
  line-height: 1.22;
  font-weight: 900;
}

.support-summary-card.tone-green span {
  background: rgba(220, 252, 231, 0.8);
  color: #047857;
}

.support-summary-card.tone-amber span {
  background: rgba(254, 243, 199, 0.86);
  color: #b45309;
}

.support-summary-card.tone-sky span {
  background: rgba(224, 242, 254, 0.86);
  color: #0369a1;
}

.support-layout {
  display: grid;
  gap: 12px;
}

.support-list-panel,
.support-detail-card,
.support-detail-empty {
  border: 1px solid rgba(211, 228, 218, 0.86);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 16px 34px rgba(8, 57, 39, 0.06);
}

.support-list-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.support-filter {
  display: grid;
  gap: 8px;
}

.support-search {
  min-width: 0;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  border: 1px solid rgba(13, 73, 55, 0.12);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.94);
  color: var(--muted-foreground);
}

.support-search input,
.support-filter select,
.support-reply-form textarea {
  width: 100%;
  border: 1px solid rgba(13, 73, 55, 0.12);
  border-radius: 14px;
  background: #fff;
  color: var(--foreground);
  font-size: 0.78rem;
  font-weight: 800;
}

.support-search input {
  min-height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
}

.support-filter select {
  min-height: 42px;
  padding: 0 11px;
}

.support-ticket-list {
  display: grid;
  gap: 8px;
}

.support-ticket-card {
  display: grid;
  gap: 8px;
  padding: 11px;
  border: 1px solid rgba(20, 83, 45, 0.1);
  border-radius: 18px;
  background: rgba(248, 250, 252, 0.78);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.support-ticket-card.is-active,
.support-ticket-card:hover {
  border-color: rgba(20, 163, 111, 0.28);
  background: linear-gradient(135deg, rgba(236, 253, 245, 0.96), rgba(255, 255, 255, 0.92));
  transform: translateY(-1px);
}

.support-ticket-head {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
}

.support-ticket-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(20, 163, 111, 0.14), rgba(14, 165, 233, 0.12));
  color: #047857;
}

.support-ticket-head strong,
.support-ticket-head small {
  display: block;
}

.support-ticket-head strong {
  overflow: hidden;
  color: var(--foreground);
  font-size: 0.82rem;
  line-height: 1.26;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.support-ticket-head small,
.support-ticket-card p,
.support-ticket-meta {
  color: var(--muted-foreground);
  font-size: 0.68rem;
  line-height: 1.35;
  font-weight: 800;
}

.support-ticket-card p {
  margin: 0;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.support-ticket-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.support-status-tag {
  min-height: 25px;
  display: inline-flex;
  align-items: center;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 0.64rem;
  font-weight: 950;
}

.support-status-tag.tone-warning {
  background: rgba(254, 243, 199, 0.78);
  color: #92400e;
}

.support-status-tag.tone-sky {
  background: rgba(224, 242, 254, 0.8);
  color: #0369a1;
}

.support-status-tag.tone-success {
  background: rgba(220, 252, 231, 0.82);
  color: #047857;
}

.support-status-tag.tone-muted {
  background: rgba(226, 232, 240, 0.72);
  color: #475569;
}

.support-detail-card,
.support-detail-empty {
  padding: 14px;
}

.support-detail-empty {
  min-height: 260px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  text-align: center;
}

.support-detail-empty span {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: rgba(220, 252, 231, 0.78);
  color: #047857;
}

.support-detail-empty h2,
.support-detail-empty p {
  margin: 0;
}

.support-detail-empty h2 {
  color: var(--foreground);
  font-size: 1rem;
  font-weight: 950;
}

.support-detail-empty p {
  max-width: 420px;
  color: var(--muted-foreground);
  font-size: 0.76rem;
  line-height: 1.48;
  font-weight: 750;
}

.support-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.support-detail-head p,
.support-detail-head h2 {
  margin: 0;
}

.support-detail-head p {
  color: var(--primary-strong);
  font-size: 0.68rem;
  font-weight: 950;
  text-transform: uppercase;
}

.support-detail-head h2 {
  margin-top: 3px;
  color: var(--foreground);
  font-size: 1.08rem;
  line-height: 1.18;
  font-weight: 950;
}

.support-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.support-detail-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(241, 245, 249, 0.9);
  color: var(--muted-foreground);
  font-size: 0.66rem;
  font-weight: 850;
}

.support-original-message {
  display: grid;
  gap: 5px;
  margin-top: 12px;
  padding: 11px;
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.9);
}

.support-original-message small {
  color: var(--muted-foreground);
  font-size: 0.66rem;
  font-weight: 950;
}

.support-original-message p,
.support-reply p {
  margin: 0;
  color: var(--foreground);
  font-size: 0.78rem;
  line-height: 1.48;
  font-weight: 760;
}

.support-thread {
  display: grid;
  gap: 9px;
  margin-top: 14px;
}

.support-thread-title {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--foreground);
  font-size: 0.78rem;
  font-weight: 950;
}

.support-thread-title span {
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 850;
}

.support-thread-empty {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(236, 253, 245, 0.62);
  color: #047857;
  font-size: 0.72rem;
  font-weight: 850;
}

.support-reply {
  display: grid;
  gap: 7px;
  padding: 11px;
  border: 1px solid rgba(13, 73, 55, 0.08);
  border-radius: 16px;
}

.support-reply.is-team {
  background: linear-gradient(135deg, rgba(236, 253, 245, 0.9), rgba(240, 249, 255, 0.76));
}

.support-reply.is-mine {
  margin-left: 18px;
  background: rgba(255, 255, 255, 0.94);
}

.support-reply-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.7rem;
}

.support-reply-head strong {
  color: var(--foreground);
  font-weight: 950;
}

.support-reply-head small {
  color: var(--muted-foreground);
  font-weight: 800;
}

.support-reply-files {
  display: grid;
  gap: 6px;
}

.support-reply-files a {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--primary-strong);
  text-decoration: none;
  font-size: 0.68rem;
  font-weight: 900;
}

.support-reply-files small {
  margin-left: auto;
  color: var(--muted-foreground);
}

.support-reply-form {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(211, 228, 218, 0.76);
}

.support-reply-form .form-field {
  gap: 5px;
}

.support-reply-form .form-field > span {
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 950;
}

.support-reply-form textarea {
  min-height: 116px;
  padding: 10px 11px;
  resize: vertical;
}

.support-file-field {
  display: grid;
  gap: 5px;
}

.support-file-field > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 950;
}

.support-file-field input[type="file"] {
  width: 100%;
  padding: 9px 10px;
  border: 1px dashed rgba(13, 73, 55, 0.16);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.95);
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 800;
}

.support-file-field small {
  color: var(--muted-foreground);
  font-size: 0.64rem;
  line-height: 1.42;
  font-weight: 750;
}

.support-file-list {
  display: grid;
  gap: 6px;
}

.support-file-list:empty {
  display: none;
}

.support-file-list span {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 5px 7px;
  align-items: center;
  padding: 8px 9px;
  border-radius: 12px;
  background: rgba(241, 245, 249, 0.9);
}

.support-file-list strong,
.support-file-list small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.support-file-list strong {
  color: var(--foreground);
  font-size: 0.68rem;
  font-weight: 900;
}

.support-file-list small {
  color: var(--muted-foreground);
  font-size: 0.62rem;
  font-weight: 800;
}

.support-reply-actions {
  display: flex;
  justify-content: flex-end;
}

.support-empty-list {
  min-height: 220px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 20px 12px;
  color: var(--muted-foreground);
  text-align: center;
}

.support-empty-list > svg {
  color: var(--primary-strong);
}

.support-empty-list strong {
  color: var(--foreground);
  font-size: 0.88rem;
  font-weight: 950;
}

.support-empty-list p {
  margin: 0;
  max-width: 320px;
  font-size: 0.74rem;
  line-height: 1.45;
  font-weight: 780;
}

.public-info-faq-list {
  display: grid;
  gap: 8px;
}

.public-info-faq {
  overflow: hidden;
  border: 1px solid rgba(211, 228, 218, 0.86);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
}

.public-info-faq summary {
  min-height: 46px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  cursor: pointer;
  list-style: none;
}

.public-info-faq summary::-webkit-details-marker {
  display: none;
}

.public-info-faq summary > span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--primary-soft);
  color: var(--primary);
}

.public-info-faq summary strong {
  min-width: 0;
  color: var(--foreground);
  font-size: 0.78rem;
  line-height: 1.28;
  font-weight: 950;
}

.public-info-faq summary > .fa-icon:last-child {
  width: 13px;
  height: 13px;
  color: var(--muted-foreground);
  transform: rotate(90deg);
  transition: transform 160ms ease;
}

.public-info-faq[open] summary > .fa-icon:last-child {
  transform: rotate(270deg);
}

.public-info-faq p {
  margin: 0;
  padding: 0 12px 12px 49px;
  color: var(--muted-foreground);
  font-size: 0.74rem;
  line-height: 1.48;
}

.public-info-section-card {
  align-content: start;
}

.public-info-section-card .section-copy {
  font-size: 0.76rem;
  line-height: 1.5;
}

.public-info-check-list {
  display: grid;
  gap: 8px;
  padding: 0;
  margin: 2px 0 0;
  list-style: none;
}

.public-info-check-list li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 7px;
  color: var(--muted-foreground);
  font-size: 0.73rem;
  line-height: 1.42;
}

.public-info-check-list .fa-icon {
  width: 15px;
  height: 15px;
  margin-top: 2px;
  color: #12a46b;
  font-size: 0.82rem;
}

.public-info-cta {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 22px;
  background:
    linear-gradient(125deg, rgba(0, 65, 45, 0.95), rgba(11, 115, 76, 0.94)),
    var(--primary-strong);
  color: #fff;
}

.public-info-cta p {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.76rem;
  line-height: 1.46;
}

.public-info-cta small {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.66rem;
  font-weight: 800;
}

.public-info-cta .eyebrow,
.public-info-cta h2 {
  color: #fff;
}

.transparency-stack {
  gap: 14px;
}

.transparency-hero-card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 24px;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.14), transparent 34%),
    linear-gradient(150deg, transparent 0 62%, rgba(255, 255, 255, 0.08) 62% 63%, transparent 63% 100%),
    var(--gradient-primary);
  color: #fff;
}

.transparency-hero-card::before {
  content: "\f1c0";
  position: absolute;
  right: -18px;
  bottom: -34px;
  font-family: "Font Awesome 7 Pro";
  font-size: 8.4rem;
  font-weight: 900;
  line-height: 1;
  color: rgba(255, 255, 255, 0.075);
  transform: rotate(-12deg);
  pointer-events: none;
}

.transparency-hero-copy,
.transparency-hero-stats {
  position: relative;
  z-index: 1;
}

.transparency-hero-copy {
  display: grid;
  gap: 7px;
}

.transparency-hero-copy > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.72rem;
  font-weight: 900;
}

.transparency-hero-copy .fa-icon {
  width: 13px;
  height: 13px;
  color: #ffe78a;
  font-size: 0.76rem;
}

.transparency-hero-copy h1 {
  max-width: 560px;
  margin: 0;
  color: #fff;
  font-size: 1.28rem;
  line-height: 1.14;
  font-weight: 900;
}

.transparency-hero-copy p {
  max-width: 560px;
  margin: 0;
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.76rem;
  line-height: 1.48;
}

.transparency-hero-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.transparency-hero-stats article {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.11);
}

.transparency-hero-stats .fa-icon {
  width: 14px;
  height: 14px;
  color: #ffe78a;
  font-size: 0.78rem;
}

.transparency-hero-stats strong {
  overflow: hidden;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.transparency-hero-stats span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.64rem;
  font-weight: 800;
}

.transparency-filter-panel,
.transparency-list-panel,
.transparency-detail-card {
  border: 1px solid var(--border);
  background: var(--card);
}

.transparency-filter-panel {
  padding: 12px;
  border-radius: 20px;
}

.transparency-filter-form {
  display: grid;
  gap: 10px;
}

.transparency-filter-form label {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.transparency-filter-form label > span {
  color: var(--muted-foreground);
  font-size: 0.66rem;
  font-weight: 900;
}

.transparency-search-field {
  min-height: 42px;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
}

.transparency-search-field .fa-icon {
  width: 13px;
  height: 13px;
  color: var(--primary);
  font-size: 0.74rem;
}

.transparency-filter-form input {
  min-width: 0;
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  color: var(--foreground);
  font: inherit;
  font-size: 0.78rem;
}

.transparency-search-field input {
  min-height: 0;
  border: 0;
  outline: 0;
  background: transparent;
}

.transparency-layout {
  display: grid;
  gap: 12px;
}

.transparency-detail-card {
  overflow: hidden;
  border-radius: 22px;
}

.transparency-detail-cover {
  position: relative;
  min-height: 168px;
  background: var(--primary-soft);
}

.transparency-detail-cover img {
  width: 100%;
  height: 178px;
  object-fit: cover;
}

.transparency-detail-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 58, 40, 0.06), rgba(8, 58, 40, 0.48));
  pointer-events: none;
}

.transparency-detail-cover > span {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 1;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--primary-strong);
  font-size: 0.68rem;
  font-weight: 900;
}

.transparency-detail-cover .fa-icon {
  width: 11px;
  height: 11px;
  font-size: 0.62rem;
}

.transparency-detail-body {
  display: grid;
  gap: 14px;
  padding: 14px;
}

.transparency-report-heading {
  display: grid;
  gap: 6px;
}

.transparency-report-heading h2 {
  margin: 0;
  color: var(--foreground);
  font-size: 1.08rem;
  line-height: 1.2;
  font-weight: 950;
}

.transparency-report-heading p:not(.eyebrow) {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.78rem;
  line-height: 1.5;
}

.transparency-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 4px;
}

.transparency-money-strip {
  display: grid;
  gap: 8px;
}

.transparency-money-strip span {
  min-width: 0;
  display: grid;
  grid-template-columns: 24px minmax(0, 0.5fr) minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 10px;
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(5, 150, 105, 0.1), rgba(255, 255, 255, 0.86));
}

.transparency-money-strip .fa-icon {
  width: 14px;
  height: 14px;
  color: var(--primary);
  font-size: 0.78rem;
}

.transparency-money-strip small {
  color: var(--muted-foreground);
  font-size: 0.66rem;
  font-weight: 900;
}

.transparency-money-strip strong {
  overflow: hidden;
  color: var(--foreground);
  font-size: 0.84rem;
  font-weight: 950;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.transparency-prose {
  padding: 12px;
  border-radius: 16px;
  background: rgba(5, 150, 105, 0.055);
}

.transparency-item-grid {
  display: grid;
  gap: 10px;
}

.transparency-item-group {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(239, 249, 242, 0.7));
}

.transparency-item-group header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.transparency-item-group header span {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
}

.transparency-item-group.tone-expense header span {
  background: rgba(245, 158, 11, 0.14);
  color: #b45309;
}

.transparency-item-group header .fa-icon {
  width: 12px;
  height: 12px;
  font-size: 0.68rem;
}

.transparency-item-group header strong {
  color: var(--foreground);
  font-size: 0.84rem;
  font-weight: 950;
}

.transparency-item-list {
  display: grid;
  gap: 8px;
}

.transparency-item-row {
  display: grid;
  gap: 8px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
}

.transparency-item-row div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.transparency-item-row strong {
  color: var(--foreground);
  font-size: 0.78rem;
  font-weight: 900;
}

.transparency-item-row span,
.transparency-item-row p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.66rem;
  line-height: 1.4;
}

.transparency-item-row em {
  color: var(--primary-strong);
  font-size: 0.82rem;
  font-style: normal;
  font-weight: 950;
}

.transparency-attachments {
  display: grid;
  gap: 10px;
}

.transparency-attachments h3 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--foreground);
  font-size: 0.9rem;
  font-weight: 950;
}

.transparency-attachments h3 .fa-icon {
  width: 13px;
  height: 13px;
  color: var(--primary);
  font-size: 0.72rem;
}

.transparency-attachments > div {
  display: grid;
  gap: 8px;
}

.transparency-attachments a {
  min-width: 0;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(5, 150, 105, 0.07);
}

.transparency-attachments a > .fa-icon {
  width: 12px;
  height: 12px;
  color: var(--primary);
  font-size: 0.68rem;
}

.transparency-attachments a span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.transparency-attachments a strong {
  overflow: hidden;
  color: var(--foreground);
  font-size: 0.76rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.transparency-attachments a small {
  color: var(--muted-foreground);
  font-size: 0.64rem;
  font-weight: 700;
}

.transparency-list-panel {
  display: grid;
  gap: 12px;
  padding: 12px;
  border-radius: 20px;
}

.transparency-report-list {
  display: grid;
  gap: 8px;
}

.transparency-report-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
}

.transparency-report-card.is-selected {
  border-color: rgba(5, 150, 105, 0.24);
  background: linear-gradient(145deg, rgba(5, 150, 105, 0.12), rgba(255, 255, 255, 0.9));
}

.transparency-report-card > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
}

.transparency-report-card .fa-icon {
  width: 13px;
  height: 13px;
  font-size: 0.72rem;
}

.transparency-report-card div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.transparency-report-card strong,
.transparency-report-card small,
.transparency-report-card em {
  overflow: hidden;
  text-overflow: ellipsis;
}

.transparency-report-card strong {
  color: var(--foreground);
  font-size: 0.78rem;
  font-weight: 950;
  white-space: nowrap;
}

.transparency-report-card small,
.transparency-report-card em {
  color: var(--muted-foreground);
  font-size: 0.64rem;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.transparency-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.transparency-pagination > span:not(.button-secondary) {
  color: var(--muted-foreground);
  font-size: 0.7rem;
  font-weight: 900;
}

.article-detail-hero {
  padding: 0;
  background: var(--card);
  color: var(--foreground);
}

.article-detail-media {
  position: relative;
  overflow: hidden;
  min-height: 210px;
  border-radius: 24px 24px 0 0;
}

.article-detail-media img {
  width: 100%;
  height: 210px;
  object-fit: cover;
}

.article-detail-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 58, 40, 0.08), rgba(8, 58, 40, 0.46));
  pointer-events: none;
}

.article-detail-copy {
  display: grid;
  gap: 9px;
  padding: 14px;
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 24px 24px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(239, 249, 242, 0.92)),
    var(--card);
}

.article-category-pill {
  justify-self: start;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-strong);
}

.article-category-pill .fa-icon {
  color: var(--primary);
}

.article-detail-copy h1 {
  color: var(--foreground);
}

.article-detail-copy p {
  color: var(--muted-foreground);
}

.article-content-grid {
  display: grid;
  gap: 12px;
}

.article-body-card,
.article-insight-card {
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--card);
}

.article-body-card section {
  display: grid;
  gap: 7px;
}

.article-body-card h2,
.article-insight-card h2 {
  margin: 0;
  color: var(--foreground);
  font-size: 0.96rem;
  line-height: 1.24;
  font-weight: 900;
}

.article-body-card p {
  margin: 0;
  color: var(--foreground-soft);
  font-size: 0.78rem;
  line-height: 1.62;
}

.rich-prose {
  color: var(--foreground-soft);
  font-size: 0.8rem;
  line-height: 1.72;
}

.rich-prose > *:first-child {
  margin-top: 0;
}

.rich-prose > *:last-child {
  margin-bottom: 0;
}

.rich-prose h1,
.rich-prose h2,
.rich-prose h3,
.rich-prose h4 {
  margin: 1.1em 0 0.45em;
  color: var(--foreground);
  line-height: 1.25;
  font-weight: 900;
}

.rich-prose h1 {
  font-size: 1.18rem;
}

.rich-prose h2 {
  font-size: 1.02rem;
}

.rich-prose h3 {
  font-size: 0.92rem;
}

.rich-prose p,
.rich-prose ul,
.rich-prose ol,
.rich-prose blockquote,
.rich-prose figure,
.rich-prose table {
  margin: 0.75em 0;
}

.rich-prose ul,
.rich-prose ol {
  padding-left: 1.15rem;
}

.rich-prose li + li {
  margin-top: 0.34em;
}

.rich-prose a {
  color: var(--primary-strong);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.rich-prose figure {
  overflow: hidden;
  border-radius: 16px;
  background: rgba(5, 150, 105, 0.06);
}

.rich-prose img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.rich-prose figcaption {
  padding: 8px 10px;
  color: var(--muted-foreground);
  font-size: 0.68rem;
  text-align: center;
}

.rich-prose blockquote {
  padding: 10px 12px;
  border-left: 3px solid var(--primary);
  border-radius: 0 12px 12px 0;
  background: var(--primary-soft);
  color: var(--primary-strong);
  font-weight: 800;
}

.rich-prose table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 12px;
  font-size: 0.74rem;
}

.rich-prose th,
.rich-prose td {
  padding: 8px;
  border: 1px solid var(--border);
  text-align: left;
}

.rich-prose th {
  background: rgba(5, 150, 105, 0.08);
  color: var(--primary-strong);
}

.article-insight-card {
  align-content: start;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(223, 244, 232, 0.58)),
    var(--card);
}

.article-insight-card p {
  margin: 0 0 2px;
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 800;
}

.article-insight-card ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.article-insight-card li {
  position: relative;
  padding-left: 20px;
  color: var(--foreground-soft);
  font-size: 0.74rem;
  line-height: 1.45;
  font-weight: 700;
}

.article-insight-card li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.56em;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--gradient-primary);
}

.article-toc {
  display: grid;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.article-toc p {
  margin: 0;
  color: var(--foreground);
  font-size: 0.74rem;
  font-weight: 900;
}

.article-toc ol {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 1.05rem;
}

.article-toc li {
  padding-left: 2px;
  color: var(--muted-foreground);
  font-size: 0.72rem;
  line-height: 1.38;
}

.article-toc li::before {
  display: none;
}

.article-related-card {
  min-width: 0;
  min-height: 66px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 12px;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
}

.article-related-card img {
  width: 58px;
  height: 50px;
  object-fit: cover;
  border-radius: 12px;
}

.article-related-card span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.article-related-card em,
.article-related-card strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.article-related-card em {
  color: var(--muted-foreground);
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 800;
}

.article-related-card strong {
  color: var(--foreground);
  font-size: 0.76rem;
  font-weight: 900;
}

.article-related-card > .fa-icon {
  width: 11px;
  height: 11px;
  color: var(--muted-foreground);
  font-size: 0.66rem;
}

.login-pill {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--gradient-primary);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 900;
}

.login-pill .fa-icon {
  width: 14px;
  height: 14px;
  font-size: 0.78rem;
}

.sidebar-footer-card {
  display: grid;
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
}

.sidebar-auth-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.sidebar-auth-actions .button,
.sidebar-auth-actions .button-secondary,
.sidebar-logout {
  width: 100%;
  min-height: 38px;
  justify-content: center;
  font-size: 0.76rem;
}

.sidebar-user-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.sidebar-avatar {
  overflow: hidden;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--gradient-primary);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 900;
  box-shadow: 0 12px 24px rgba(20, 118, 71, 0.16);
}

.sidebar-avatar img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.sidebar-user-card strong,
.sidebar-user-card small {
  overflow: hidden;
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-user-card strong {
  color: var(--foreground);
  font-size: 0.8rem;
  line-height: 1.2;
  font-weight: 900;
}

.sidebar-user-card small {
  margin-top: 2px;
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 700;
}

.sidebar-logout {
  margin-top: 2px;
}

.auth-page {
  min-height: calc(100svh - 56px - 68px - var(--safe-bottom));
}

.onboarding-page .app-main {
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 217, 102, 0.14), transparent 30%),
    linear-gradient(180deg, rgba(8, 48, 34, 0.04), rgba(255, 255, 255, 0));
}

.onboarding-page-stack {
  gap: 14px;
}

.onboarding-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 18px;
  padding: 20px;
  border-radius: 0;
  background:
    radial-gradient(circle at 82% 12%, rgba(255, 228, 143, 0.18), transparent 30%),
    linear-gradient(135deg, #062d20 0%, #0d5d42 54%, #128474 100%);
  color: #fff;
  box-shadow: 0 24px 70px rgba(8, 48, 34, 0.18);
}

.onboarding-hero::after {
  content: "";
  position: absolute;
  right: -50px;
  bottom: -70px;
  width: 210px;
  height: 210px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.05);
}

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

.onboarding-hero .eyebrow {
  width: fit-content;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
}

.onboarding-hero .page-title {
  max-width: 680px;
  color: #fff;
}

.onboarding-hero .page-copy {
  max-width: 660px;
  color: rgba(255, 255, 255, 0.82);
}

.onboarding-actions .button-secondary,
.onboarding-actions .button-ghost,
.onboarding-final-cta .button-secondary {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.onboarding-feature-card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(14px);
}

.onboarding-feature-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #d6f8a6, #50d3a2);
  color: #073b29;
}

.onboarding-feature-icon .fa-icon {
  width: 21px;
  height: 21px;
  font-size: 1.12rem;
}

.onboarding-feature-card p,
.onboarding-feature-card h2,
.onboarding-feature-card span {
  margin: 0;
}

.onboarding-feature-card p {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
}

.onboarding-feature-card h2 {
  margin-top: 3px;
  color: #fff;
  font-size: clamp(1rem, 4.6vw, 1.24rem);
  line-height: 1.18;
}

.onboarding-feature-card span {
  display: block;
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.78rem;
  font-weight: 800;
}

.onboarding-slide-grid {
  display: grid;
  gap: 12px;
}

.onboarding-slide-card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid rgba(15, 94, 61, 0.12);
  background: #fff;
  box-shadow: 0 16px 42px rgba(9, 47, 33, 0.08);
}

.onboarding-slide-card::after {
  content: "";
  position: absolute;
  inset: auto -18px -34px auto;
  width: 92px;
  height: 92px;
  border-radius: 999px;
  background: var(--onboarding-accent, rgba(40, 179, 122, 0.12));
}

.onboarding-slide-card.tone-map {
  --onboarding-accent: rgba(59, 130, 246, 0.14);
}

.onboarding-slide-card.tone-event {
  --onboarding-accent: rgba(251, 191, 36, 0.18);
}

.onboarding-slide-card.tone-trust {
  --onboarding-accent: rgba(20, 184, 166, 0.14);
}

.onboarding-slide-top,
.onboarding-slide-foot {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.onboarding-slide-top span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #0f6b49, #20b486);
  color: #fff;
}

.onboarding-slide-top em {
  color: rgba(15, 94, 61, 0.22);
  font-style: normal;
  font-size: 1.2rem;
  font-weight: 1000;
}

.onboarding-slide-card h2,
.onboarding-slide-card p,
.onboarding-slide-card a {
  position: relative;
  z-index: 1;
}

.onboarding-slide-card h2 {
  margin: 0;
  color: #123528;
  font-size: 1.02rem;
  line-height: 1.22;
}

.onboarding-slide-card p {
  margin: 0;
  color: #5b7067;
  font-size: 0.86rem;
  line-height: 1.55;
}

.onboarding-slide-foot {
  align-items: flex-start;
  justify-content: flex-start;
}

.onboarding-slide-foot strong {
  color: #0f6b49;
  font-size: 0.9rem;
}

.onboarding-slide-foot small {
  color: #6b7f75;
  font-size: 0.76rem;
  font-weight: 800;
}

.onboarding-slide-card a {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #0f6b49;
  font-size: 0.82rem;
  font-weight: 900;
}

.onboarding-principles {
  display: grid;
  gap: 10px;
}

.onboarding-principles article {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 10px;
  padding: 13px;
  border: 1px solid rgba(15, 94, 61, 0.1);
  background: rgba(255, 255, 255, 0.82);
}

.onboarding-principles span {
  grid-row: span 2;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  background: #e8f8ef;
  color: #0f6b49;
}

.onboarding-principles strong {
  color: #123528;
  font-size: 0.88rem;
}

.onboarding-principles p {
  margin: 0;
  color: #687a72;
  font-size: 0.8rem;
  line-height: 1.45;
}

.onboarding-final-cta {
  display: grid;
  gap: 12px;
  padding: 16px;
  background: linear-gradient(135deg, #0c4f39, #138066);
  color: #fff;
}

.onboarding-final-cta h2 {
  margin: 0;
  color: #fff;
  font-size: 1.02rem;
  line-height: 1.25;
}

.onboarding-final-cta .eyebrow {
  color: rgba(255, 255, 255, 0.78);
}

.auth-layout {
  display: grid;
  gap: 14px;
}

.auth-hero-card,
.auth-form-panel {
  position: relative;
  overflow: hidden;
  display: grid;
  border: 1px solid rgba(217, 232, 223, 0.86);
  border-radius: 24px;
  background: var(--card);
}

.auth-hero-card {
  gap: 18px;
  padding: 18px;
  border: 0;
  background:
    radial-gradient(circle at 86% 12%, rgba(255, 226, 133, 0.2), transparent 30%),
    linear-gradient(135deg, #083a28 0%, #0f6740 56%, #0f8f83 100%);
  color: #fff;
}

.auth-hero-card::after {
  content: "";
  position: absolute;
  right: -34px;
  bottom: -42px;
  width: 150px;
  height: 150px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
}

.auth-brand-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}

.auth-brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.14);
  color: #e9ffef;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.auth-brand-row p,
.auth-brand-row strong,
.auth-hero-copy h2,
.auth-hero-copy p {
  margin: 0;
}

.auth-brand-row p {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.7rem;
  font-weight: 800;
}

.auth-brand-row strong {
  font-size: 0.9rem;
  line-height: 1.18;
  font-weight: 900;
}

.auth-hero-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 7px;
}

.auth-hero-copy .eyebrow {
  color: rgba(255, 255, 255, 0.66);
}

.auth-hero-copy h2 {
  max-width: 22rem;
  color: #fff;
  font-size: 1.48rem;
  line-height: 1.12;
  font-weight: 900;
}

.auth-hero-copy p {
  max-width: 24rem;
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.78rem;
  line-height: 1.5;
}

.auth-benefit-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
}

.auth-benefit-pill {
  min-width: 0;
  min-height: 54px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.11);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.auth-benefit-pill > .fa-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff1c7;
  font-size: 0.92rem;
}

.auth-benefit-pill strong,
.auth-benefit-pill small {
  display: block;
}

.auth-benefit-pill strong {
  color: #fff;
  font-size: 0.76rem;
  line-height: 1.18;
  font-weight: 900;
}

.auth-benefit-pill small {
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.65rem;
  line-height: 1.25;
  font-weight: 700;
}

.auth-form-panel {
  gap: 14px;
  padding: 16px;
}

.auth-form-head {
  display: grid;
  gap: 5px;
}

.auth-form-head h1,
.auth-form-head p {
  margin: 0;
}

.auth-form-head h1 {
  color: var(--foreground);
  font-size: 1.16rem;
  line-height: 1.2;
  font-weight: 900;
}

.auth-form-head p {
  color: var(--muted-foreground);
  font-size: 0.78rem;
  line-height: 1.48;
}

.auth-form {
  gap: 12px;
}

.auth-label-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.auth-label-line a,
.auth-switch a {
  color: var(--primary);
  font-size: 0.76rem;
  font-weight: 900;
}

.auth-submit-button {
  width: 100%;
  min-height: 44px;
}

.auth-form-note {
  margin: -4px 0 0;
  color: var(--muted-foreground);
  font-size: 0.72rem;
  line-height: 1.38;
  text-align: center;
}

.auth-switch {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.78rem;
  line-height: 1.4;
  text-align: center;
}

.auth-inline-state {
  min-height: 46px;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border-radius: 16px;
  font-size: 0.76rem;
  font-weight: 800;
}

.auth-otp-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(191, 216, 200, 0.84);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(223, 244, 232, 0.5)),
    var(--card);
}

.auth-otp-card.is-verified {
  border-color: rgba(20, 118, 71, 0.28);
  background:
    linear-gradient(145deg, rgba(223, 244, 232, 0.98), rgba(255, 255, 255, 0.92)),
    var(--card);
}

.auth-otp-head {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.auth-otp-head > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--gradient-primary);
  color: #fff;
  box-shadow: 0 10px 22px rgba(20, 118, 71, 0.16);
}

.auth-otp-head strong,
.auth-otp-head p,
.auth-otp-head small {
  margin: 0;
}

.auth-otp-head strong {
  display: block;
  color: var(--foreground);
  font-size: 0.82rem;
  line-height: 1.24;
  font-weight: 900;
}

.auth-otp-head p {
  margin-top: 3px;
  color: var(--muted-foreground);
  font-size: 0.72rem;
  line-height: 1.4;
}

.auth-otp-head small {
  display: inline-flex;
  margin-top: 7px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255, 241, 199, 0.78);
  color: var(--accent-strong);
  font-size: 0.68rem;
  font-weight: 800;
}

.auth-otp-actions {
  display: grid;
  gap: 8px;
}

.auth-otp-send {
  width: 100%;
}

.auth-otp-verify {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.auth-otp-verify input {
  width: 100%;
  min-height: 40px;
  border: 1px solid rgba(191, 216, 200, 0.88);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.92);
  padding: 0 12px;
  color: var(--foreground);
  font-weight: 900;
  letter-spacing: 0.08em;
}

.auth-otp-verify input:focus {
  border-color: rgba(23, 107, 58, 0.48);
  box-shadow: 0 0 0 4px rgba(23, 107, 58, 0.1);
  outline: none;
}

.auth-otp-verify .button-secondary {
  min-width: 106px;
}

/* Responsive expansion: mobile styles above remain the source of truth. */
@media (min-width: 768px) {
  body {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.5), transparent 34rem),
      oklch(93.5% 0.018 145);
  }

  .app-shell {
    width: min(calc(100dvw - 32px), 920px);
    max-width: 920px;
    min-height: 100svh;
    border-inline: 1px solid rgba(26, 68, 45, 0.06);
    box-shadow: 0 18px 58px rgba(26, 68, 45, 0.08);
  }

  .app-frame {
    grid-template-rows: auto minmax(0, 1fr);
  }

  .topbar {
    display: flex !important;
    min-height: 64px;
    padding: 12px 22px;
  }

  .topbar-copy p {
    font-size: 0.76rem;
  }

  .topbar-copy strong {
    font-size: 1.02rem;
  }

  .bottom-nav {
    width: min(calc(100dvw - 32px), 920px);
  }

  .app-main {
    padding-bottom: calc(72px + var(--safe-bottom));
  }

  .page {
    max-width: 920px !important;
    min-height: calc(100svh - 64px - 72px - var(--safe-bottom));
    padding: 22px 24px 28px !important;
  }

  .page-stack {
    gap: 20px;
  }

  .section {
    gap: 12px;
  }

  .section-title,
  .page-title {
    font-size: 1.08rem;
  }

  .dashboard-page .dashboard-stack {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(278px, 0.92fr);
    align-items: start;
    gap: 18px;
  }

  .dashboard-page .dashboard-credit-card {
    grid-column: 1;
    grid-row: 1;
  }

  .dashboard-page .dashboard-stack > .section:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
  }

  .dashboard-page .dashboard-stack > .section:nth-child(3) {
    grid-column: 1;
    grid-row: 2;
  }

  .dashboard-page .dashboard-stack > .section:nth-child(4) {
    grid-column: 2;
    grid-row: 2;
  }

  .dashboard-page .quick-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-page .quick-action-tile {
    min-height: 92px;
  }

  .dashboard-page .suggested-event-card img {
    height: 154px;
  }

  .dashboard-page .compact-list {
    display: grid;
    gap: 10px;
  }

  .dashboard-page .compact-row {
    grid-template-columns: 36px minmax(0, 1fr);
    align-content: start;
  }

  .dashboard-page .compact-row .tag {
    grid-column: 2;
    justify-self: start;
  }

  .activities-page .activity-filter-form {
    grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.1fr);
    align-items: center;
  }

  .activities-page .activity-search-field {
    grid-row: span 2;
    min-height: 76px;
  }

  .activities-page .activity-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .activities-page .activity-card {
    display: grid;
    grid-template-rows: auto 1fr;
  }

  .activities-page .activity-card-body {
    align-content: start;
  }

  .my-events-page .my-events-hero-card {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.72fr);
    align-items: end;
  }

  .my-events-page .my-events-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .my-events-page .my-event-card {
    display: grid;
    grid-template-rows: auto 1fr;
  }

  .my-events-page .my-event-body {
    align-content: start;
  }

  .map-page .vn-map-panel,
  .map-page .leaflet-stage {
    min-height: 620px;
  }

  .map-page .map-hero-card {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.78fr);
    align-items: end;
  }

  .map-page .map-hero-card h1 {
    max-width: 26rem;
  }

  .map-page .map-location-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .credits-page .credits-stack {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 18px;
  }

  .credits-page .credits-hero-card,
  .credits-page .credits-stack > .section:nth-child(2),
  .credits-page .credits-stack > .section:nth-child(3),
  .credits-page .credits-stack > .section:nth-child(4),
  .credits-page .credits-stack > .section:nth-child(5),
  .credits-page .credits-stack > .section:nth-child(6) {
    grid-column: 1;
  }

  .credits-page .credits-stat-panel {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .credits-page .credit-stat-cell:nth-child(n) {
    border-top: 0;
  }

  .credits-page .credit-stat-cell + .credit-stat-cell {
    border-left: 1px solid rgba(217, 232, 223, 0.78);
  }

  .credits-page .credit-badge-list {
    gap: 10px;
  }

  .credits-page .credit-transaction-list,
  .credits-page .credit-action-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-page .profile-stack {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.84fr);
    align-items: start;
    gap: 18px;
  }

  .profile-page .profile-hero-card {
    grid-column: 1 / -1;
  }

  .profile-page .profile-stack > .section:nth-child(2),
  .profile-page .profile-stack > .section:nth-child(4) {
    grid-column: 1;
  }

  .profile-page .profile-stack > .section:nth-child(3),
  .profile-page .profile-stack > .section:nth-child(5) {
    grid-column: 2;
  }

  .profile-page .profile-stat-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-page .profile-badge-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .leaderboard-page .leaderboard-top-grid {
    grid-template-columns: minmax(0, 0.92fr) minmax(330px, 0.78fr);
    align-items: stretch;
    gap: 16px;
  }

  .leaderboard-page .leaderboard-hero-card,
  .leaderboard-page .leaderboard-filter-panel {
    grid-column: 1;
  }

  .leaderboard-page .leaderboard-podium-panel {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .leaderboard-page .leaderboard-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .leaderboard-page .leaderboard-podium-stage {
    min-height: 100%;
  }

  .leaderboard-page .leaderboard-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .knowledge-page .knowledge-hero-card {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.72fr);
    align-items: end;
  }

  .knowledge-page .knowledge-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .knowledge-page .knowledge-card {
    grid-template-rows: auto 1fr;
  }

  .public-info-page .public-info-hero {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.48fr);
    align-items: end;
  }

  .public-info-page .public-info-channel-grid,
  .public-info-page .public-info-section-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .transparency-page .transparency-hero-card {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.76fr);
    align-items: end;
  }

  .transparency-page .transparency-hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .transparency-page .transparency-filter-form {
    grid-template-columns: minmax(240px, 1fr) repeat(2, minmax(150px, 0.5fr)) auto;
    align-items: end;
  }

  .transparency-page .transparency-item-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .transparency-page .transparency-money-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .transparency-page .transparency-item-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  .article-detail-page .article-detail-hero {
    grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1fr);
    align-items: stretch;
    padding: 0;
  }

  .article-detail-page .article-detail-media {
    min-height: 100%;
    border-radius: 24px 0 0 24px;
  }

  .article-detail-page .article-detail-media img {
    height: 100%;
    min-height: 320px;
  }

  .article-detail-page .article-detail-copy {
    align-content: center;
    border-top: 1px solid var(--border);
    border-left: 0;
    border-radius: 0 24px 24px 0;
  }

  .article-detail-page .article-content-grid {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.42fr);
    align-items: start;
  }

  .event-detail-page .related-event-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch;
  }

  .home-page .home-hero .hero-actions {
    width: auto;
    display: flex;
    gap: 10px;
    margin-top: 14px;
  }

  .home-page .home-hero .hero-actions .button,
  .home-page .home-hero .hero-actions .button-ghost {
    width: auto;
  }

  .home-page .home-hero-kpis {
    display: flex;
    gap: 8px;
  }

  .home-page .home-hero-kpis span:nth-child(3) {
    grid-column: auto;
  }

  .campaign-detail-page .campaign-detail-hero {
    display: grid;
    grid-template-columns: minmax(300px, 0.78fr) minmax(0, 1fr);
    align-items: stretch;
  }

  .campaign-detail-page .campaign-detail-media {
    min-height: 100%;
  }

  .campaign-detail-page .campaign-detail-copy {
    align-content: center;
    padding: 24px;
  }

  .campaign-detail-page .campaign-detail-stats,
  .campaign-detail-page .campaign-detail-main-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .campaign-detail-page .campaign-manager-article {
    display: grid;
    grid-template-columns: minmax(260px, 0.58fr) minmax(0, 1fr);
  }

  .campaign-detail-page .campaign-manager-article-media {
    min-height: 100%;
  }

  .campaign-detail-page .campaign-related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .grid-list.two-up,
  .grid-list.three-up {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .leader-podium {
    max-width: 620px;
    margin-inline: auto;
  }
}

@media (min-width: 1024px) {
  .app-shell {
    width: min(calc(100dvw - 40px), 1040px);
    max-width: 1040px;
  }

  .bottom-nav {
    width: min(calc(100dvw - 40px), 1040px);
  }

  .page {
    max-width: 1040px !important;
    padding-inline: 28px !important;
  }

  .activities-page .activity-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .map-page .map-stack {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
    gap: 18px;
  }

  .map-page .map-hero-card,
  .map-page .vn-map-shell {
    grid-column: 1;
  }

  .map-page .map-stack > .section:nth-child(3) {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .map-page .map-location-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .map-page .vn-map-panel,
  .map-page .leaflet-stage {
    min-height: 680px;
  }

  .credits-page .credit-badge-list,
  .credits-page .credit-transaction-list,
  .credits-page .credit-action-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .planting-checkout-layout {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.38fr);
    align-items: start;
  }
}

@media (min-width: 1100px) {
  .app-shell {
    --desktop-sidebar-width: 236px;
    width: 100%;
    max-width: none;
    margin: 0;
    border-inline: 0;
    grid-template-columns: var(--desktop-sidebar-width) minmax(0, 1fr) !important;
  }

  .app-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 20;
    width: var(--desktop-sidebar-width);
    height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: grid !important;
    grid-template-rows: auto 1fr auto;
    gap: 18px;
    padding: 20px 16px;
    border-right: 1px solid rgba(217, 232, 223, 0.92);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(246, 252, 247, 0.9));
  }

  .app-frame {
    grid-column: 2;
  }

  .app-sidebar .brand {
    display: grid;
    justify-items: start;
    gap: 8px;
    padding: 2px 4px 14px;
    border-bottom: 1px solid var(--border);
  }

  .app-sidebar .brand img {
    width: 142px;
  }

  .app-sidebar .brand-title {
    display: block;
    color: var(--muted-foreground);
    font-size: 0.72rem;
    line-height: 1.35;
    font-weight: 800;
  }

  .side-nav {
    display: grid;
    align-content: start;
    gap: 6px;
  }

  .side-nav .nav-item {
    min-height: 42px;
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    justify-items: start;
    gap: 9px;
    padding: 0 11px;
    border-radius: 13px;
    font-size: 0.78rem;
    color: var(--muted-foreground);
  }

  .side-nav .nav-item .fa-icon {
    width: 16px;
    height: 16px;
    font-size: 0.86rem;
  }

  .side-nav .nav-item.is-active {
    background: var(--primary-soft);
    color: var(--primary-strong);
  }

  .app-sidebar .card {
    padding: 13px;
    border-radius: 16px;
    box-shadow: none;
  }

  .topbar,
  .bottom-nav {
    display: none !important;
  }

  .app-main {
    padding-bottom: 0;
  }

  .page {
    max-width: 100% !important;
    min-height: 100svh;
    padding: 28px clamp(28px, 3vw, 56px) !important;
  }

  :is(
    .home-page,
    .dashboard-page,
    .activities-page,
    .planting-page,
    .planting-detail-page,
    .planting-checkout-view,
    .donate-page,
    .map-page,
    .my-events-page,
    .my-donations-page,
    .my-trees-page,
    .credits-page,
    .profile-page,
    .leaderboard-page,
    .knowledge-page,
    .campaign-detail-page,
    .article-detail-page,
    .event-detail-page
  ) {
    max-width: 1280px !important;
    margin-inline: auto;
  }

  :is(
    .home-page,
    .dashboard-page,
    .activities-page,
    .planting-page,
    .planting-detail-page,
    .planting-checkout-view,
    .donate-page,
    .map-page,
    .my-events-page,
    .my-donations-page,
    .my-trees-page,
    .credits-page,
    .profile-page,
    .leaderboard-page,
    .knowledge-page,
    .campaign-detail-page,
    .article-detail-page,
    .event-detail-page
  ) .page-stack {
    gap: 18px;
  }

  :is(
    .home-page,
    .dashboard-page,
    .activities-page,
    .planting-page,
    .planting-detail-page,
    .planting-checkout-view,
    .donate-page,
    .map-page,
    .my-events-page,
    .my-donations-page,
    .my-trees-page,
    .credits-page,
    .profile-page,
    .leaderboard-page,
    .knowledge-page,
    .campaign-detail-page,
    .article-detail-page,
    .event-detail-page
  ) .section {
    gap: 12px;
  }

  .activities-page .activity-filter-form {
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  }

  .activities-page .activity-list {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    align-items: start;
    justify-content: start;
    justify-items: stretch;
  }

  .activities-page .activity-card {
    width: 100%;
    max-width: 360px;
  }

  .activities-page .activity-card-media,
  .activities-page .activity-card-media img {
    min-height: 128px;
    height: 128px;
  }

  .activities-page .activity-card-body > p {
    display: -webkit-box;
    min-height: 2.8em;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .my-events-page .my-events-list {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    align-items: start;
    justify-content: start;
    justify-items: stretch;
  }

  .my-events-page .my-event-card {
    width: 100%;
    max-width: 390px;
  }

  .my-events-page .my-event-media,
  .my-events-page .my-event-media img {
    min-height: 128px;
    height: 128px;
  }

  .my-events-page .my-events-hero-card {
    min-height: 214px;
  }

  .my-donations-page .my-donations-hero-card {
    min-height: 214px;
  }

  .my-donations-page .my-donations-hero-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .my-donations-page .my-donations-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .my-donations-page .my-donations-list {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    align-items: start;
    justify-content: start;
  }

  .my-donations-page .my-donation-card {
    width: 100%;
    max-width: 430px;
  }

  .my-donations-page .my-donation-meta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .my-trees-page .my-tree-batch-list,
  .my-trees-page .my-tree-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    align-items: start;
  }

  .my-trees-page .my-trees-hero-card {
    min-height: 214px;
  }

  .my-contributions-page .my-contributions-hero-main {
    grid-template-columns: minmax(0, 1fr) 176px;
    align-items: center;
  }

  .my-contributions-page .my-contributions-medallion {
    width: 176px;
    min-height: 152px;
    justify-self: end;
  }

  .my-contributions-page .my-contributions-achievement-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .my-contributions-page .my-contributions-ribbon {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
  }

  .my-contributions-page .my-contributions-impact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  .my-contributions-page .my-impact-card {
    min-height: 238px;
  }

  .my-contributions-page .my-contribution-card {
    max-width: none;
  }

  .dashboard-page .suggested-event-card img {
    height: 144px;
  }

  .credits-page .credits-stack {
    grid-template-columns: minmax(0, 0.95fr) minmax(330px, 0.62fr);
    align-items: stretch;
  }

  .credits-page .credits-hero-card {
    grid-column: 1;
    grid-row: 1;
    min-height: 218px;
  }

  .credits-page .credits-stack > .section:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
  }

  .credits-page .credits-stack > .section:nth-child(3) {
    grid-column: 2;
    grid-row: 1;
    display: grid;
    align-self: stretch;
  }

  .credits-page .credits-stack > .section:nth-child(4) {
    grid-column: 2;
    grid-row: 2;
  }

  .credits-page .credits-stack > .section:nth-child(5) {
    grid-column: 1;
    grid-row: 3;
  }

  .credits-page .credits-stack > .section:nth-child(6) {
    grid-column: 2;
    grid-row: 3;
  }

  .credits-page .credits-stat-panel {
    height: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .credits-page .credit-stat-cell {
    min-height: 0;
  }

  .credits-page .credit-stat-cell:nth-child(n) {
    border-top: 0;
    border-left: 0;
  }

  .credits-page .credit-stat-cell:nth-child(2n) {
    border-left: 1px solid rgba(217, 232, 223, 0.78);
  }

  .credits-page .credit-stat-cell:nth-child(n + 3) {
    border-top: 1px solid rgba(217, 232, 223, 0.78);
  }

  .credits-page .credit-badge-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .credits-page .credit-transaction-list,
  .credits-page .credit-action-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-page .home-stack {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(318px, 0.38fr);
    align-items: start;
    gap: 18px;
  }

  .home-page .home-hero {
    min-height: 270px;
    grid-column: 1;
    grid-row: 1;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.43fr);
    align-items: end;
    gap: 22px;
    padding: 22px 24px;
    border-radius: 20px;
    box-shadow: 0 22px 54px rgba(7, 45, 30, 0.16);
  }

  .home-page .home-hero .page-title {
    max-width: 38rem;
    font-size: 1.55rem;
    line-height: 1.18;
  }

  .home-page .home-hero .page-copy {
    max-width: 40rem;
  }

  .home-page .home-hero .premium-panel {
    min-height: 190px;
    border-radius: 18px;
  }

  .home-page .home-hero .premium-panel img {
    min-height: 190px;
  }

  .home-page .home-hero .premium-panel-caption {
    left: 10px;
    right: 10px;
    bottom: 10px;
    padding: 10px;
    border-radius: 14px;
  }

  .home-page .home-impact-section {
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    padding: 16px;
    border-radius: 20px;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(235, 248, 241, 0.88)),
      #fff;
  }

  .home-page .home-impact-section .section-head {
    align-items: start;
  }

  .home-page .home-impact-section .section-title {
    white-space: normal;
  }

  .home-page .home-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px;
  }

  .home-page .home-metric-grid .metric-card {
    min-height: 96px;
    padding: 12px;
    border-radius: 16px;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(247, 252, 249, 0.92)),
      #fff;
    box-shadow: 0 12px 28px rgba(15, 79, 49, 0.055);
  }

  .home-page .home-metric-grid .metric-icon {
    width: 34px;
    height: 34px;
    border-radius: 11px;
  }

  .home-page .home-metric-grid .metric-value {
    font-size: 1rem;
  }

  .home-page .home-metric-grid .metric-label {
    font-size: 0.68rem;
    line-height: 1.25;
  }

  .home-page .home-feature-section,
  .home-page .home-info-section,
  .home-page .home-leaderboard-section {
    grid-column: 1 / -1;
  }

  .home-page .home-info-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .home-page .home-feature-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    align-items: start;
    justify-items: start;
  }

  .home-page .home-feature-grid > * {
    width: 100%;
    max-width: none;
    min-height: 100%;
  }

  .home-page .home-event-grid .event-card,
  .home-page .home-planting-grid .planting-card,
  .home-page .home-campaign-grid .campaign-card {
    min-height: 100%;
  }

  .home-page .home-event-grid .image-card-media,
  .home-page .home-planting-grid .image-card-media,
  .home-page .home-campaign-grid .image-card-media {
    min-height: 156px;
    max-height: 156px;
  }

  .home-page .home-event-grid .image-card-media img,
  .home-page .home-planting-grid .image-card-media img,
  .home-page .home-campaign-grid .image-card-media img {
    height: 156px;
  }

  .planting-page .planting-stack {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(320px, 0.46fr);
    align-items: start;
    gap: 18px;
  }

  .planting-page .planting-hero-card,
  .planting-page .section {
    grid-column: 1;
  }

  .planting-page .planting-filter-panel {
    position: sticky;
    top: 28px;
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .planting-page .planting-project-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    align-items: start;
    justify-items: start;
  }

  .planting-page .planting-project-grid > * {
    width: 100%;
    max-width: 360px;
  }

  .planting-page .planting-project-grid .image-card-media {
    min-height: 156px;
    max-height: 156px;
  }

  .planting-page .planting-project-grid .image-card-media img {
    height: 156px;
  }

  .planting-detail-page .planting-detail-stack {
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(340px, 0.48fr);
    align-items: start;
    gap: 18px;
  }

  .planting-detail-page .planting-detail-hero,
  .planting-detail-page .planting-map-section,
  .planting-detail-page .planting-detail-info-section,
  .planting-detail-page .planting-partner-section,
  .planting-detail-page .planting-related-section {
    grid-column: 1;
  }

  .planting-detail-page .planting-detail-stats-section,
  .planting-detail-page .planting-sponsor-section {
    grid-column: 2;
  }

  .planting-detail-page .planting-detail-stats-section {
    grid-row: 1;
  }

  .planting-detail-page .planting-sponsor-section {
    position: sticky;
    top: 28px;
    grid-row: 2 / span 2;
  }

  .planting-detail-page .planting-detail-hero {
    grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1fr);
  }

  .planting-detail-page .planting-detail-media {
    min-height: 320px;
  }

  .planting-detail-page .planting-detail-stats,
  .planting-detail-page .planting-detail-info-grid,
  .planting-detail-page .planting-partner-grid,
  .planting-detail-page .planting-related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .donate-page .donate-campaign-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    align-items: start;
    justify-items: start;
  }

  .donate-page .donate-campaign-grid > * {
    width: 100%;
    max-width: 360px;
    min-height: 100%;
  }

  .donate-page .donate-campaign-grid .campaign-card {
    min-height: 100%;
  }

  .donate-page .donate-campaign-grid .image-card-media {
    min-height: 156px;
    max-height: 156px;
  }

  .donate-page .donate-campaign-grid .image-card-media img {
    height: 156px;
  }

  .map-page .map-stack {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
  }

  .leaderboard-page .leaderboard-top-grid {
    grid-template-columns: minmax(0, 0.92fr) minmax(390px, 0.68fr);
  }

  .leaderboard-page .leaderboard-hero-card {
    align-content: space-between;
    min-height: 214px;
  }

  .leaderboard-page .leaderboard-category-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .leaderboard-page .leaderboard-category-card {
    min-height: 66px;
  }

  .leaderboard-page .leaderboard-row {
    grid-template-columns: 40px 44px minmax(0, 1fr) minmax(152px, 0.64fr) auto;
    gap: 10px;
  }

  .leaderboard-page .leaderboard-row-rank {
    width: 40px;
    height: 40px;
  }

  .leaderboard-page .leaderboard-row-avatar {
    width: 44px;
    height: 44px;
  }

  .leaderboard-page .leaderboard-row-score {
    grid-column: auto;
    justify-items: end;
    text-align: right;
  }

  .leaderboard-page .leaderboard-row-trend {
    grid-column: auto;
    justify-self: end;
  }

  .knowledge-page .knowledge-stack {
    grid-template-columns: minmax(0, 0.82fr) minmax(320px, 0.44fr);
    align-items: start;
    gap: 18px;
  }

  .knowledge-page .knowledge-hero-card,
  .knowledge-page .knowledge-list-section {
    grid-column: 1;
  }

  .knowledge-page .knowledge-filter-panel {
    position: sticky;
    top: 28px;
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .knowledge-page .knowledge-list {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }

  .transparency-page .transparency-stack {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .transparency-page .transparency-layout {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.38fr);
    align-items: start;
    gap: 14px;
  }

  .transparency-page .transparency-list-panel {
    position: sticky;
    top: 28px;
  }

  .knowledge-page .knowledge-chip-row {
    flex-wrap: wrap;
    overflow: visible;
    padding-bottom: 0;
  }

  .public-info-page .public-info-stack:has(.public-info-channel-grid),
  .public-info-page .public-info-stack:has(.public-info-faq-list) {
    grid-template-columns: minmax(0, 0.82fr) minmax(320px, 0.44fr);
    align-items: start;
    gap: 18px;
  }

  .public-info-page .public-info-hero,
  .public-info-page .public-info-metric-grid,
  .public-info-page .public-info-section-grid,
  .public-info-page .public-info-cta {
    grid-column: 1;
  }

  .public-info-page .public-info-panel:has(.public-info-channel-grid),
  .public-info-page .public-info-panel:has(.public-info-faq-list) {
    position: sticky;
    top: 28px;
    grid-column: 2;
    grid-row: 1 / span 3;
  }

  .public-info-page .public-info-metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .event-detail-page .related-event-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px;
  }

  .event-detail-page .related-event-grid .event-card {
    min-height: 100%;
  }

  .event-detail-page .related-event-grid .image-card-media {
    min-height: 156px;
    max-height: 156px;
  }

  .event-detail-page .related-event-grid .image-card-media img {
    height: 156px;
  }

  .campaign-detail-page .campaign-detail-stack {
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(340px, 0.48fr);
    align-items: start;
    gap: 18px;
  }

  .campaign-detail-page .campaign-detail-hero,
  .campaign-detail-page .campaign-detail-main-grid,
  .campaign-detail-page .campaign-detail-article-section,
  .campaign-detail-page .campaign-detail-related-section {
    grid-column: 1;
  }

  .campaign-detail-page .campaign-detail-payment-section,
  .campaign-detail-page .campaign-detail-stats-section,
  .campaign-detail-page .campaign-detail-form-section {
    grid-column: 2;
  }

  .campaign-detail-page .campaign-detail-payment-section {
    grid-row: 3;
  }

  .campaign-detail-page .campaign-detail-stats-section {
    grid-row: 1;
  }

  .campaign-detail-page .campaign-detail-form-section {
    position: sticky;
    top: 28px;
    grid-row: 2;
  }

  .campaign-detail-page .campaign-detail-hero {
    grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1fr);
  }

  .campaign-detail-page .campaign-detail-media {
    min-height: 320px;
  }

  .campaign-detail-page .campaign-detail-stats,
  .campaign-detail-page .campaign-detail-main-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .campaign-detail-page .campaign-manager-article {
    grid-template-columns: minmax(260px, 0.48fr) minmax(0, 1fr);
  }

  .campaign-detail-page .campaign-related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px;
  }

  .campaign-detail-page .campaign-related-grid .campaign-card {
    min-height: 100%;
  }

  .campaign-detail-page .campaign-related-grid .image-card-media {
    min-height: 156px;
    max-height: 156px;
  }

  .campaign-detail-page .campaign-related-grid .image-card-media img {
    height: 156px;
  }
}

@media (min-width: 1440px) {
  .activities-page {
    max-width: 1280px !important;
    margin-inline: auto;
  }

  .activities-page .activities-stack {
    display: grid;
    grid-template-columns: minmax(280px, 300px) minmax(0, 1fr);
    align-items: start;
    gap: 18px;
  }

  .activities-page .activity-filter-panel {
    position: sticky;
    top: 28px;
    grid-column: 1;
    gap: 14px;
  }

  .activities-page .activity-filter-head {
    display: grid;
    gap: 10px;
  }

  .activities-page .activity-filter-head > span {
    justify-self: start;
  }

  .activities-page .activity-filter-form {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .activities-page .activity-search-field {
    grid-row: auto;
    min-height: 44px;
  }

  .activities-page .activity-chip-row {
    flex-wrap: wrap;
    overflow: visible;
    padding-bottom: 0;
  }

  .activities-page .activities-stack > .section {
    min-width: 0;
    grid-column: 2;
  }

  .activities-page .activity-list {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
  }

  .activities-page .activity-card {
    max-width: none;
  }

  .activities-page .activity-card-media,
  .activities-page .activity-card-media img {
    min-height: 122px;
    height: 122px;
  }
}

@media (min-width: 1440px) {
  .dashboard-page .dashboard-stack {
    grid-template-columns: minmax(360px, 0.85fr) minmax(260px, 0.55fr) minmax(340px, 0.72fr);
  }

  .dashboard-page .dashboard-credit-card {
    grid-column: 1;
    grid-row: 1;
  }

  .dashboard-page .dashboard-stack > .section:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
  }

  .dashboard-page .dashboard-stack > .section:nth-child(3) {
    grid-column: 1 / span 2;
    grid-row: 2;
  }

  .dashboard-page .dashboard-stack > .section:nth-child(4) {
    grid-column: 3;
    grid-row: 1 / span 2;
  }

  .dashboard-page .suggested-event-card {
    display: grid;
    grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1fr);
  }

  .dashboard-page .suggested-event-card img {
    height: 100%;
    min-height: 178px;
  }

  .credits-page .credit-badge-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .credits-page .credit-transaction-list,
  .credits-page .credit-action-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .my-events-page .my-events-list {
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  }

  .my-events-page .my-event-card {
    max-width: none;
  }

  .profile-page .profile-stack {
    grid-template-columns: minmax(0, 1.05fr) minmax(330px, 0.75fr);
  }

  .leaderboard-page .leaderboard-top-grid {
    grid-template-columns: minmax(0, 0.98fr) minmax(430px, 0.62fr);
  }

  .leaderboard-page .leaderboard-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .admin-file-workspace,
  .admin-file-dashboard {
    grid-template-columns: minmax(280px, 0.34fr) minmax(0, 1fr);
    align-items: start;
  }

  .admin-file-sidebar {
    position: sticky;
    top: 28px;
  }

  .admin-file-upload-panel {
    grid-template-columns: minmax(0, 1fr) auto minmax(180px, 0.42fr) auto;
    align-items: end;
  }

  .admin-file-grid-page {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-payment-bank-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .admin-page {
    max-width: 1360px !important;
  }

  .admin-stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .admin-credential-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .admin-module-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-ops-overview-head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  .admin-ops-kpi-grid,
  .admin-ops-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-ops-evidence-head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  .admin-ops-evidence-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .admin-ops-evidence-plan-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-ops-evidence-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-ops-command-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-planting-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-payment-bank-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-planting-edit-summary {
    grid-template-columns: 88px minmax(0, 1fr) minmax(350px, 0.86fr);
  }

  .admin-edit-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .admin-planting-edit-cover {
    width: 88px;
  }

  .admin-planting-edit-kpis {
    grid-column: auto;
  }

  .admin-field-grid {
    grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1fr);
  }

  .admin-planting-form-grid {
    grid-template-columns: minmax(0, 0.76fr) minmax(430px, 0.94fr);
    gap: 18px;
  }

  .admin-planting-map-editor {
    position: sticky;
    top: 18px;
  }

  .admin-planting-map-stage {
    min-height: 430px;
  }

  .admin-file-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-carbon-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-planting-progress-form {
    grid-template-columns: minmax(100px, 0.45fr) minmax(140px, 0.55fr) minmax(0, 1fr) auto;
    align-items: end;
  }

  .admin-tree-slot-filter {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
  }

  .admin-tree-slot-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-column: 1 / -1;
  }

  .admin-tree-slot-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .rfm-body {
    grid-template-columns: minmax(190px, 0.3fr) minmax(0, 1fr);
  }

  .rfm-folders {
    max-height: none;
  }

  .rfm-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }

  .admin-file-modal-browser {
    grid-template-columns: minmax(180px, 0.34fr) minmax(0, 1fr);
  }

  .admin-file-modal-tree {
    max-height: none;
  }

  .admin-planting-footer {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

  .admin-planting-save-section {
    grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1fr) auto;
  }

  .admin-planting-regenerate {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .admin-users-filter {
    grid-template-columns: minmax(260px, 1fr) auto;
    align-items: end;
  }

  .admin-users-filter-grid {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-notification-delivery-filter .admin-users-filter-grid {
    grid-template-columns: minmax(190px, 1.2fr) minmax(120px, 0.75fr) minmax(150px, 0.95fr) minmax(120px, 0.75fr) auto;
  }

  .admin-users-filter-grid.single {
    grid-template-columns: minmax(0, 280px);
  }

  .admin-notification-layout {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.42fr);
    align-items: start;
  }

  .admin-notification-delivery-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .admin-notification-monitor-alerts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-notification-provider-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .admin-notification-preview {
    position: sticky;
    top: 18px;
  }

  .admin-users-submit {
    min-width: 120px;
  }

  .admin-role-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-role-editor-grid {
    grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1fr);
  }

  .admin-zbs-field-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-role-permission-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-role-action-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .admin-admin-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-permission-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .auth-page {
    max-width: 920px !important;
  }

  .auth-layout {
    grid-template-columns: minmax(0, 0.92fr) minmax(340px, 0.78fr);
    align-items: stretch;
    gap: 18px;
  }

  .auth-hero-card,
  .auth-form-panel {
    min-height: 520px;
  }

  .auth-hero-card {
    align-content: space-between;
    padding: 24px;
  }

  .auth-benefit-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .auth-form-panel {
    align-content: center;
    padding: 24px;
  }
}

@media (min-width: 1100px) {
  .admin-planting-form-page {
    max-width: 1360px !important;
  }

  .admin-planting-form-grid {
    grid-template-columns: minmax(0, 0.68fr) minmax(560px, 1fr);
    gap: 20px;
  }

  .admin-planting-map-stage {
    min-height: 500px;
  }

  .admin-file-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .admin-tree-slot-filter {
    grid-template-columns: minmax(180px, 0.7fr) minmax(92px, 0.24fr) minmax(128px, 0.34fr) minmax(360px, 1.2fr) auto;
  }

  .admin-tree-slot-tabs {
    grid-column: auto;
  }

  .admin-tree-slot-summary-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .auth-page {
    max-width: 1080px !important;
    margin-inline: auto;
  }

  .auth-layout {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.62fr);
  }

  .auth-hero-copy h2 {
    font-size: 1.72rem;
  }

  .auth-benefit-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .auth-benefit-pill {
    min-height: 86px;
    align-content: start;
    grid-template-columns: minmax(0, 1fr);
  }
}

.admin-donations-stack {
  gap: 14px;
}

.admin-donation-stat-grid,
.admin-financial-stat-grid,
.admin-article-stat-grid {
  align-items: stretch;
}

.admin-donations-hero {
  background:
    radial-gradient(circle at 88% 10%, rgba(250, 204, 21, 0.24), transparent 30%),
    radial-gradient(circle at 12% 84%, rgba(45, 212, 191, 0.18), transparent 28%),
    linear-gradient(135deg, #052f23, #0c5f48 58%, #15803d);
}

.admin-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-donation-workbench {
  display: grid;
  gap: 14px;
}

.admin-donation-campaign-list {
  display: grid;
  gap: 10px;
}

.admin-donation-campaign-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(20, 163, 111, 0.07), transparent 46%),
    #fff;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.admin-donation-campaign-card.is-selected {
  border-color: color-mix(in oklab, var(--primary) 36%, white);
  box-shadow: 0 14px 30px rgba(15, 118, 110, 0.13);
}

.admin-donation-campaign-cover {
  position: relative;
  overflow: hidden;
  min-height: 124px;
  border-radius: 14px;
  background: linear-gradient(135deg, #064e3b, #0f766e 58%, #22c55e);
}

.admin-donation-campaign-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-donation-campaign-cover span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 1.4rem;
}

.admin-donation-campaign-body {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.admin-donation-campaign-title {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
}

.admin-donation-campaign-title strong,
.admin-donations-table strong,
.admin-donation-mobile-card strong {
  display: block;
  overflow: hidden;
  color: var(--foreground);
  font-size: 0.8rem;
  line-height: 1.22;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-donation-campaign-title small,
.admin-donations-table small,
.admin-donation-mobile-card small {
  display: block;
  overflow: hidden;
  color: var(--muted-foreground);
  font-size: 0.66rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-donation-campaign-body p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.7rem;
  line-height: 1.38;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.admin-donation-progress {
  overflow: hidden;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--primary) 10%, white);
}

.admin-donation-progress span {
  display: block;
  width: var(--value, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0f766e, #22c55e, #facc15);
}

.admin-donation-card-meta,
.admin-donation-campaign-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-donation-card-meta span {
  min-height: 27px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--primary) 8%, white);
  color: var(--primary);
  font-size: 0.62rem;
  font-weight: 900;
}

.admin-donation-editor {
  display: grid;
  gap: 12px;
}

.admin-donation-editor-section {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
}

.admin-donation-editor-section summary {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  color: var(--foreground);
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 900;
  list-style: none;
}

.admin-donation-editor-section summary::-webkit-details-marker {
  display: none;
}

.admin-donation-editor-section summary span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.admin-donation-editor-section > div {
  padding: 0 12px 12px;
}

.admin-donation-save-section {
  margin-top: 0;
}

.admin-financial-stack {
  gap: 14px;
}

.admin-financial-hero {
  background:
    radial-gradient(circle at 86% 12%, rgba(250, 204, 21, 0.2), transparent 30%),
    radial-gradient(circle at 12% 86%, rgba(56, 189, 248, 0.15), transparent 30%),
    linear-gradient(135deg, #042f2e, #07543f 56%, #0f766e);
}

.admin-financial-workbench,
.admin-financial-report-list,
.admin-financial-editor,
.admin-financial-item-list,
.admin-financial-attachment-list,
.admin-financial-reconciliation-list {
  display: grid;
  gap: 12px;
}

.admin-income-filter-panel {
  padding: 14px;
}

.admin-income-filter {
  align-items: end;
}

.admin-income-layout {
  display: grid;
  gap: 14px;
}

.admin-income-bars,
.admin-income-source-list {
  display: grid;
  gap: 10px;
}

.admin-income-bar-row {
  display: grid;
  grid-template-columns: minmax(82px, 0.9fr) minmax(120px, 2fr) minmax(92px, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
}

.admin-income-bar-row span,
.admin-income-bar-row small {
  color: var(--muted);
  font-size: 0.83rem;
  font-weight: 800;
}

.admin-income-bar-row strong {
  color: var(--text);
  font-size: 0.92rem;
  text-align: right;
}

.admin-income-bar-track {
  overflow: hidden;
  height: 10px;
  border-radius: 999px;
  background: #e2e8f0;
}

.admin-income-bar-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #059669, #16a34a 58%, #84cc16);
  box-shadow: 0 0 18px rgba(34, 197, 94, 0.24);
}

.admin-income-source-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.07), transparent 46%), #fff;
}

.admin-income-source-card > div {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.admin-income-source-card > div > span,
.admin-income-source-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
}

.admin-income-source-card > div > span {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  box-shadow: inset 0 0 0 1px rgba(5, 150, 105, 0.12);
}

.admin-income-source-card strong,
.admin-income-table strong,
.admin-income-table b {
  color: var(--text);
}

.admin-income-source-card small,
.admin-income-source-card em {
  color: var(--muted);
  font-size: 0.82rem;
  font-style: normal;
}

.admin-income-source-card p {
  margin: 0;
  color: #065f46;
  font-size: 1.35rem;
  font-weight: 950;
}

.admin-income-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.admin-income-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
}

.admin-income-table th,
.admin-income-table td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}

.admin-income-table th {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-income-table td {
  color: var(--text-soft);
  font-size: 0.9rem;
}

.admin-income-table code {
  display: inline-block;
  max-width: 170px;
  overflow: hidden;
  color: #0f766e;
  font-weight: 850;
  text-overflow: ellipsis;
  vertical-align: bottom;
  white-space: nowrap;
}

.admin-income-source-pill {
  padding: 5px 9px;
  font-size: 0.78rem;
  font-weight: 850;
  white-space: nowrap;
}

.admin-filter-form .span-2 {
  grid-column: 1 / -1;
}

.admin-financial-report-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 10px;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(15, 118, 110, 0.07), transparent 48%),
    #fff;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.admin-financial-report-card.is-selected {
  border-color: color-mix(in oklab, var(--primary) 36%, white);
  box-shadow: 0 14px 30px rgba(15, 118, 110, 0.12);
}

.admin-financial-report-mark {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: linear-gradient(135deg, #64748b, #94a3b8);
  color: #fff;
  box-shadow: 0 12px 22px rgba(15, 23, 42, 0.12);
}

.admin-financial-report-mark.status-published {
  background: linear-gradient(135deg, #047857, #22c55e);
}

.admin-financial-report-mark.status-approved {
  background: linear-gradient(135deg, #0f766e, #14b8a6);
}

.admin-financial-report-mark.status-pending_review {
  background: linear-gradient(135deg, #92400e, #f59e0b);
}

.admin-financial-report-mark.status-changes_requested {
  background: linear-gradient(135deg, #b91c1c, #f97316);
}

.admin-financial-report-mark.status-draft {
  background: linear-gradient(135deg, #92400e, #f59e0b);
}

.admin-financial-report-body {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.admin-financial-report-title {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
}

.admin-financial-report-title strong {
  display: block;
  overflow: hidden;
  color: var(--foreground);
  font-size: 0.82rem;
  line-height: 1.22;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-financial-report-title small {
  display: block;
  overflow: hidden;
  color: var(--muted-foreground);
  font-size: 0.66rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-financial-report-body p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.7rem;
  line-height: 1.38;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.admin-financial-money-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.admin-financial-money-grid span {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 8px;
  border: 1px solid color-mix(in oklab, var(--primary) 10%, white);
  border-radius: 12px;
  background: color-mix(in oklab, var(--primary) 5%, white);
}

.admin-financial-money-grid small {
  color: var(--muted-foreground);
  font-size: 0.58rem;
  font-weight: 900;
}

.admin-financial-money-grid strong {
  overflow: hidden;
  color: var(--foreground);
  font-size: 0.7rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-user-status.status-draft {
  background: color-mix(in oklab, #f59e0b 14%, white);
  color: #925500;
}

.admin-user-status.status-published {
  background: color-mix(in oklab, #16a34a 13%, white);
  color: #0f7a3b;
}

.admin-user-status.status-approved {
  background: color-mix(in oklab, #14b8a6 13%, white);
  color: #0f766e;
}

.admin-user-status.status-pending_review {
  background: color-mix(in oklab, #f59e0b 15%, white);
  color: #8a5608;
}

.admin-user-status.status-changes_requested {
  background: color-mix(in oklab, var(--danger) 12%, white);
  color: var(--danger);
}

.admin-user-status.status-archived {
  background: color-mix(in oklab, var(--muted) 76%, white);
  color: var(--muted-foreground);
}

.admin-financial-workflow-card {
  display: grid;
  gap: 11px;
  padding: 12px;
  border: 1px solid color-mix(in oklab, var(--primary) 18%, white);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(15, 118, 110, 0.08), transparent 50%),
    rgba(255, 255, 255, 0.94);
}

.admin-financial-workflow-card > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.admin-financial-workflow-card h3 {
  margin: 2px 0 0;
  color: var(--foreground);
  font-size: 0.9rem;
  font-weight: 950;
}

.admin-financial-workflow-meta {
  display: grid;
  gap: 7px;
}

.admin-financial-workflow-meta span,
.admin-financial-approval-note {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 9px;
  border: 1px solid color-mix(in oklab, var(--border) 88%, #0f766e);
  border-radius: 12px;
  background: #fff;
  color: var(--muted-foreground);
  font-size: 0.66rem;
  font-weight: 850;
  line-height: 1.35;
}

.admin-financial-approval-note {
  display: block;
  margin: 0;
  color: var(--foreground);
}

.admin-financial-workflow-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.admin-financial-workflow-form label {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.admin-financial-workflow-form label > span {
  color: var(--muted-foreground);
  font-size: 0.62rem;
  font-weight: 900;
}

.admin-financial-workflow-form input {
  width: 100%;
  min-height: 39px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  color: var(--foreground);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 760;
  outline: 0;
  padding: 8px 10px;
}

.admin-financial-workflow-form input:focus {
  border-color: color-mix(in oklab, var(--primary) 44%, white);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 10%, transparent);
}

.admin-financial-workflow-form > div {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-financial-revision-log {
  border-top: 1px solid color-mix(in oklab, var(--border) 78%, white);
  padding-top: 6px;
}

.admin-financial-revision-log summary {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--primary);
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 900;
}

.admin-financial-revision-log > div {
  display: grid;
  gap: 7px;
  padding-top: 7px;
}

.admin-financial-revision-log article {
  display: grid;
  gap: 3px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.78);
}

.admin-financial-revision-log strong {
  color: var(--foreground);
  font-size: 0.7rem;
  font-weight: 950;
}

.admin-financial-revision-log span,
.admin-financial-revision-log p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.64rem;
  font-weight: 760;
  line-height: 1.35;
}

.admin-financial-derived-note {
  display: grid;
  gap: 5px;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid color-mix(in oklab, #0ea5e9 17%, white);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(14, 165, 233, 0.07), rgba(15, 118, 110, 0.05)),
    rgba(255, 255, 255, 0.88);
}

.admin-financial-derived-note span,
.admin-financial-derived-note strong {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--foreground);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1.35;
}

.admin-financial-derived-note span {
  color: var(--muted-foreground);
}

.admin-financial-item-row,
.admin-financial-attachment-row,
.admin-financial-reconciliation-row {
  min-width: 0;
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid color-mix(in oklab, var(--primary) 12%, white);
  border-radius: 15px;
  background:
    linear-gradient(135deg, rgba(15, 118, 110, 0.045), transparent 58%),
    rgba(255, 255, 255, 0.9);
}

.admin-financial-source-picker {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.admin-financial-source-controls {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.admin-financial-selected-source {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border: 1px dashed color-mix(in oklab, var(--border) 78%, var(--primary));
  border-radius: 13px;
  background: color-mix(in oklab, var(--muted) 32%, white);
}

.admin-financial-selected-source.has-source {
  border-style: solid;
  border-color: color-mix(in oklab, var(--primary) 22%, white);
  background:
    linear-gradient(135deg, rgba(15, 118, 110, 0.08), rgba(14, 165, 233, 0.05)),
    #fff;
}

.admin-financial-selected-source span,
.admin-financial-selected-source strong,
.admin-financial-selected-source small,
.admin-financial-source-empty {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-financial-selected-source span,
.admin-financial-source-empty {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted-foreground);
  font-size: 0.64rem;
  font-weight: 900;
}

.admin-financial-selected-source strong {
  color: var(--foreground);
  font-size: 0.74rem;
  font-weight: 950;
}

.admin-financial-selected-source small {
  color: var(--muted-foreground);
  font-size: 0.64rem;
  font-weight: 750;
}

.admin-financial-source-results {
  display: grid;
  gap: 7px;
}

.admin-financial-source-result {
  min-width: 0;
  width: 100%;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid color-mix(in oklab, var(--border) 82%, var(--primary));
  border-radius: 13px;
  background: #fff;
  color: inherit;
  cursor: pointer;
  text-align: left;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.admin-financial-source-result:hover,
.admin-financial-source-result:focus-visible {
  border-color: color-mix(in oklab, var(--primary) 34%, white);
  box-shadow: 0 10px 22px rgba(15, 118, 110, 0.1);
  outline: 0;
  transform: translateY(-1px);
}

.admin-financial-source-result-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: linear-gradient(135deg, #0f766e, #14b8a6);
  color: #fff;
}

.admin-financial-source-result-body {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.admin-financial-source-result-body strong,
.admin-financial-source-result-body small,
.admin-financial-source-result-body em,
.admin-financial-source-result-amount {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-financial-source-result-body strong {
  color: var(--foreground);
  font-size: 0.7rem;
  font-weight: 950;
}

.admin-financial-source-result-body small {
  color: var(--muted-foreground);
  font-size: 0.62rem;
  font-weight: 760;
}

.admin-financial-source-result-body em {
  color: var(--primary);
  font-size: 0.6rem;
  font-style: normal;
  font-weight: 900;
}

.admin-financial-source-result-amount {
  grid-column: 2;
  justify-self: start;
  color: var(--foreground);
  font-size: 0.68rem;
  font-weight: 950;
}

.admin-financial-source-loading,
.admin-financial-source-empty-state {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid color-mix(in oklab, var(--border) 84%, white);
  border-radius: 12px;
  background: color-mix(in oklab, var(--muted) 24%, white);
  color: var(--muted-foreground);
  font-size: 0.66rem;
  font-weight: 850;
}

.admin-financial-item-row label,
.admin-financial-attachment-row label,
.admin-financial-reconciliation-row label,
.admin-financial-item-type {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.admin-financial-item-row label > span,
.admin-financial-attachment-row label > span,
.admin-financial-reconciliation-row label > span {
  overflow: hidden;
  color: var(--muted-foreground);
  font-size: 0.62rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-financial-item-row input,
.admin-financial-item-row select,
.admin-financial-attachment-row input,
.admin-financial-reconciliation-row input,
.admin-financial-reconciliation-row select {
  width: 100%;
  min-width: 0;
  min-height: 39px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  color: var(--foreground);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 760;
  outline: 0;
  padding: 8px 10px;
}

.admin-financial-item-row input:focus,
.admin-financial-item-row select:focus,
.admin-financial-attachment-row input:focus,
.admin-financial-reconciliation-row input:focus,
.admin-financial-reconciliation-row select:focus {
  border-color: color-mix(in oklab, var(--primary) 44%, white);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 10%, transparent);
}

.admin-financial-item-row > button,
.admin-financial-attachment-row > button,
.admin-financial-reconciliation-row > button {
  min-height: 39px;
  justify-content: center;
}

.admin-financial-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-financial-save-section input {
  width: 100%;
  min-height: 40px;
  border: 1px solid color-mix(in oklab, var(--primary) 16%, white);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--foreground);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 750;
  outline: 0;
  padding: 9px 10px;
}

.admin-financial-save-section input:focus {
  border-color: color-mix(in oklab, #0ea5e9 42%, var(--primary));
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12);
}

.admin-donations-table-wrap {
  display: none;
  overflow-x: auto;
}

.admin-donations-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 8px;
}

.admin-donations-table th {
  padding: 0 10px 3px;
  color: var(--muted-foreground);
  font-size: 0.64rem;
  font-weight: 900;
  text-align: left;
  white-space: nowrap;
}

.admin-donations-table td {
  min-width: 136px;
  padding: 10px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: #fff;
  vertical-align: top;
}

.admin-donations-table td:first-child {
  border-left: 1px solid var(--border);
  border-radius: 14px 0 0 14px;
}

.admin-donations-table td:last-child {
  border-right: 1px solid var(--border);
  border-radius: 0 14px 14px 0;
}

.admin-donations-mobile-list {
  display: grid;
  gap: 9px;
}

.admin-donation-mobile-card {
  display: grid;
  gap: 7px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background:
    linear-gradient(135deg, rgba(15, 118, 110, 0.06), transparent 52%),
    #fff;
}

.admin-donation-mobile-card > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.admin-donation-mobile-card p {
  margin: 0;
  color: var(--foreground);
  font-size: 0.74rem;
  font-weight: 900;
}

.admin-user-status.status-draft,
.admin-user-status.status-published,
.admin-user-status.status-awaiting_payment,
.admin-user-status.status-pending {
  background: color-mix(in oklab, #f59e0b 14%, white);
  color: #925500;
}

.admin-user-status.status-funding,
.admin-user-status.status-completed,
.admin-user-status.status-paid,
.admin-user-status.status-manually_verified {
  background: color-mix(in oklab, #16a34a 13%, white);
  color: #0f7a3b;
}

.admin-user-status.status-cancelled,
.admin-user-status.status-expired,
.admin-user-status.status-failed {
  background: color-mix(in oklab, var(--danger) 12%, white);
  color: var(--danger);
}

.admin-events-hero {
  background:
    radial-gradient(circle at 86% 16%, rgba(125, 211, 252, 0.2), transparent 28%),
    radial-gradient(circle at 16% 82%, rgba(34, 197, 94, 0.22), transparent 30%),
    linear-gradient(135deg, #052e2b, #0f5b50 52%, #166534);
}

.admin-event-list-workbench,
.admin-event-form-stack {
  display: grid;
  gap: 14px;
}

.admin-event-list-panel,
.admin-event-form-panel {
  min-width: 0;
}

.admin-event-list-panel .section-head {
  gap: 10px;
}

.admin-event-list-panel .section-head .button {
  min-height: 40px;
  padding-inline: 13px;
}

.admin-event-form-hero h1 {
  max-width: 760px;
}

.admin-event-form-panel {
  overflow: hidden;
}

.admin-event-editor {
  gap: 14px;
}

.admin-event-edit-tabs {
  position: sticky;
  top: 10px;
  z-index: 2;
  border-color: color-mix(in oklab, #0ea5e9 12%, white);
  background:
    linear-gradient(135deg, rgba(14, 165, 233, 0.06), rgba(34, 197, 94, 0.05)),
    rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
}

.admin-event-edit-tabs button {
  min-height: 44px;
  line-height: 1.2;
}

.admin-event-edit-tabs button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-event-tab-panel {
  min-width: 0;
}

.admin-event-edit-section {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid color-mix(in oklab, var(--primary) 13%, white);
  border-radius: 18px;
  background:
    radial-gradient(circle at 94% 8%, rgba(14, 165, 233, 0.08), transparent 26%),
    rgba(255, 255, 255, 0.86);
}

.admin-event-edit-section + .admin-event-edit-section {
  margin-top: 0;
}

.admin-event-result-section {
  background:
    radial-gradient(circle at 92% 6%, rgba(250, 204, 21, 0.1), transparent 26%),
    linear-gradient(135deg, rgba(20, 184, 166, 0.07), rgba(255, 255, 255, 0.9));
}

.admin-event-result-head {
  display: grid;
  gap: 10px;
}

.admin-event-result-head .button-secondary {
  justify-content: center;
}

.admin-event-result-media-list {
  display: grid;
  gap: 10px;
}

.admin-event-result-media-row {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid color-mix(in oklab, var(--primary) 12%, white);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.88);
}

.admin-event-result-media-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.admin-event-result-media-row-head strong {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--foreground);
  font-size: 0.76rem;
  font-weight: 900;
}

.admin-event-result-media-row-head .button-secondary {
  width: 36px;
  min-height: 36px;
  padding: 0;
  color: #ef4444;
  background: rgba(254, 242, 242, 0.9);
  border-color: rgba(248, 113, 113, 0.2);
  box-shadow: none;
}

.admin-event-result-preview {
  min-height: 120px;
}

.admin-event-result-media-fields {
  display: grid;
  gap: 9px;
}

.admin-event-result-media-fields label {
  display: grid;
  gap: 6px;
}

.admin-event-result-media-fields label > span {
  color: var(--foreground-soft);
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-event-result-media-fields input {
  width: 100%;
  min-height: 38px;
  border: 1px solid color-mix(in oklab, var(--primary) 14%, white);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--foreground);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 760;
  outline: 0;
  padding: 9px 10px;
}

.admin-event-result-media-fields input:focus {
  border-color: color-mix(in oklab, #0ea5e9 42%, var(--primary));
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.11);
}

.is-live-updated {
  animation: admin-live-pulse 720ms ease;
}

@keyframes admin-live-pulse {
  0% {
    filter: none;
    transform: translateY(0);
  }
  35% {
    filter: drop-shadow(0 0 10px rgba(34, 197, 94, 0.28));
    transform: translateY(-1px);
  }
  100% {
    filter: none;
    transform: translateY(0);
  }
}

.admin-event-card {
  background:
    linear-gradient(135deg, rgba(14, 165, 233, 0.08), transparent 42%),
    linear-gradient(145deg, rgba(34, 197, 94, 0.07), #fff 54%);
}

.admin-event-card.is-selected {
  border-color: color-mix(in oklab, #0ea5e9 34%, var(--primary));
}

.admin-event-cover {
  background: linear-gradient(135deg, #064e3b, #0e7490 55%, #22c55e);
}

.admin-event-progress span {
  background: linear-gradient(90deg, #0ea5e9, #22c55e 52%, #fde047);
}

.admin-event-location-field {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid color-mix(in oklab, var(--primary) 16%, white);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(14, 165, 233, 0.07), rgba(34, 197, 94, 0.06)),
    rgba(255, 255, 255, 0.92);
}

.admin-event-location-copy {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.admin-event-location-copy > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, #0f766e, #0ea5e9);
  color: #fff;
}

.admin-event-location-copy div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.admin-event-location-copy strong {
  color: var(--foreground);
  font-size: 0.82rem;
  font-weight: 900;
}

.admin-event-location-copy small {
  overflow: hidden;
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-event-location-field .button-secondary {
  width: 100%;
  justify-content: center;
}

.admin-event-location-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: end center;
  padding: 14px;
}

.admin-event-location-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 24, 18, 0.54);
  backdrop-filter: blur(5px);
}

.admin-event-location-dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 920px);
  max-height: min(92vh, 780px);
  overflow: auto;
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.46);
  border-radius: 22px;
  background:
    radial-gradient(circle at 88% 8%, rgba(125, 211, 252, 0.2), transparent 26%),
    linear-gradient(180deg, rgba(250, 255, 252, 0.98), rgba(239, 248, 243, 0.97));
  box-shadow: 0 28px 80px rgba(5, 46, 32, 0.28);
}

.admin-event-location-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.admin-event-location-head h2 {
  margin: 0;
  color: var(--foreground);
  font-size: 1rem;
  line-height: 1.2;
}

.admin-event-location-head small {
  display: block;
  max-width: 620px;
  color: var(--muted-foreground);
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1.42;
}

.admin-event-location-search {
  gap: 9px;
  padding: 10px;
  border-color: color-mix(in oklab, #0ea5e9 18%, white);
  background:
    linear-gradient(135deg, rgba(14, 165, 233, 0.09), rgba(34, 197, 94, 0.06)),
    rgba(255, 255, 255, 0.9);
}

.admin-event-location-search label {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.admin-event-location-search label > span {
  color: var(--foreground-soft);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.admin-event-location-search .admin-planting-address-row {
  min-height: 44px;
  padding: 4px;
  border: 1px solid color-mix(in oklab, var(--primary) 15%, white);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}

.admin-event-location-search input[type="search"] {
  width: 100%;
  min-width: 0;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--foreground);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  outline: 0;
  padding: 9px 10px;
}

.admin-event-location-search input[type="search"]::placeholder {
  color: color-mix(in oklab, var(--muted-foreground) 72%, white);
  font-weight: 700;
}

.admin-event-location-search .button-secondary {
  min-height: 36px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #0f766e, #0ea5e9);
  color: #fff;
  box-shadow: 0 10px 22px rgba(14, 116, 144, 0.18);
}

.admin-event-location-search .button-secondary:hover {
  box-shadow: 0 14px 28px rgba(14, 116, 144, 0.24);
}

.admin-event-location-search .admin-address-results {
  margin-top: 1px;
}

.admin-event-location-search .admin-address-results button {
  border-color: color-mix(in oklab, #0ea5e9 16%, white);
  background:
    linear-gradient(135deg, rgba(14, 165, 233, 0.05), rgba(255, 255, 255, 0.94)),
    #fff;
}

.admin-event-location-map {
  overflow: hidden;
  min-height: min(56vh, 480px);
  border: 1px solid color-mix(in oklab, var(--primary) 18%, white);
  border-radius: 18px;
  background: #dcefe6;
}

.admin-event-location-map .leaflet-control-zoom {
  overflow: hidden;
  border: 0;
  border-radius: 12px;
  box-shadow: 0 10px 26px rgba(6, 78, 59, 0.16);
}

.admin-event-location-map .leaflet-control-zoom a {
  border: 0;
  color: var(--primary-strong);
}

.admin-event-location-foot {
  display: grid;
  gap: 10px;
}

.admin-event-location-foot > span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  border: 1px solid color-mix(in oklab, var(--primary) 14%, white);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--primary-strong);
  font-size: 0.7rem;
  font-weight: 900;
}

.admin-event-location-foot > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.admin-event-location-foot .button,
.admin-event-location-foot .button-secondary {
  justify-content: center;
}

.admin-event-location-marker {
  display: grid;
  place-items: center;
}

.admin-event-location-marker span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50% 50% 50% 8px;
  background: linear-gradient(135deg, #0f766e, #0ea5e9);
  color: #fff;
  box-shadow: 0 14px 30px rgba(5, 46, 32, 0.32);
  transform: rotate(-45deg);
}

.admin-event-location-marker .fa-icon {
  transform: rotate(45deg);
}

.admin-event-save-section {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid color-mix(in oklab, #0f766e 18%, white);
  border-radius: 20px;
  background:
    radial-gradient(circle at 96% 4%, rgba(250, 204, 21, 0.17), transparent 28%),
    linear-gradient(135deg, rgba(5, 46, 43, 0.08), rgba(14, 165, 233, 0.06)),
    rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 44px rgba(5, 46, 32, 0.08);
}

.admin-event-save-section::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, #0f766e, #0ea5e9 54%, #facc15);
}

.admin-event-save-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.admin-event-save-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.3), transparent 34%),
    linear-gradient(135deg, #064e3b, #0ea5e9);
  color: #fff;
  box-shadow: 0 12px 26px rgba(14, 116, 144, 0.18);
}

.admin-event-save-copy > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.admin-event-save-copy strong {
  color: var(--foreground);
  font-size: 0.88rem;
  font-weight: 900;
  line-height: 1.2;
}

.admin-event-save-copy p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1.42;
}

.admin-event-save-section label {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 6px;
}

.admin-event-save-section label > span {
  color: var(--foreground-soft);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-event-save-section input,
.admin-event-save-section textarea {
  width: 100%;
  min-height: 40px;
  border: 1px solid color-mix(in oklab, var(--primary) 16%, white);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--foreground);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 750;
  outline: 0;
  padding: 9px 10px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}

.admin-event-save-section textarea {
  resize: vertical;
}

.admin-event-save-section input::placeholder,
.admin-event-save-section textarea::placeholder {
  color: color-mix(in oklab, var(--muted-foreground) 72%, white);
  font-weight: 700;
}

.admin-event-save-section input:focus,
.admin-event-save-section textarea:focus {
  border-color: color-mix(in oklab, #0ea5e9 42%, var(--primary));
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12);
}

.admin-event-save-section .button {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 44px;
  border-radius: 14px;
  justify-content: center;
  box-shadow: 0 14px 30px rgba(6, 78, 59, 0.18);
}

.admin-event-attendance-panel {
  overflow: hidden;
}

.admin-event-attendance-grid {
  display: grid;
  gap: 12px;
}

.admin-event-attendance-scanner,
.admin-event-attendance-log {
  display: grid;
  gap: 12px;
}

.admin-event-attendance-visual {
  display: grid;
  gap: 5px;
  justify-items: start;
  padding: 14px;
  border-radius: 18px;
  color: #fff;
  background:
    radial-gradient(circle at 86% 18%, rgba(255, 255, 255, 0.18), transparent 30%),
    linear-gradient(135deg, #063527, #0f766e 58%, #16a34a);
}

.admin-event-attendance-visual > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.admin-event-attendance-visual strong {
  font-size: 0.95rem;
  line-height: 1.2;
}

.admin-event-attendance-visual small {
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.72rem;
  line-height: 1.42;
  font-weight: 700;
}

.admin-event-attendance-scanner label {
  display: grid;
  gap: 6px;
}

.admin-event-attendance-scanner label > span {
  color: var(--foreground-soft);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-event-attendance-scanner textarea {
  width: 100%;
  min-height: 112px;
  resize: vertical;
}

.admin-event-camera-box {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px dashed rgba(23, 107, 58, 0.22);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.64);
}

.admin-event-camera-box video {
  width: 100%;
  max-height: 240px;
  display: block;
  border-radius: 14px;
  background: #08251a;
}

.admin-event-camera-box small {
  color: var(--muted-foreground);
  font-size: 0.7rem;
  line-height: 1.38;
  font-weight: 700;
}

.admin-event-attendance-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.admin-event-staff-qr-card {
  align-content: start;
}

.admin-event-staff-qr-stage {
  min-height: 280px;
  display: grid;
}

.admin-event-staff-qr-live {
  display: grid;
  gap: 12px;
  justify-items: center;
  padding: 14px;
  border-radius: 22px;
  border: 1px solid rgba(23, 107, 58, 0.14);
  background:
    radial-gradient(circle at 18% 12%, rgba(253, 224, 71, 0.24), transparent 32%),
    linear-gradient(180deg, rgba(248, 255, 249, 0.96), rgba(232, 246, 237, 0.94));
}

.admin-event-staff-qr-image {
  position: relative;
  width: min(100%, 280px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 12px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(5, 46, 32, 0.16);
}

.admin-event-staff-qr-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.admin-event-staff-qr-image span {
  position: absolute;
  left: 18px;
  right: 18px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(22, 163, 74, 0.82), transparent);
  box-shadow: 0 0 18px rgba(34, 197, 94, 0.42);
  animation: attendanceScanLine 2.4s linear infinite;
}

.admin-event-staff-qr-meta {
  display: grid;
  gap: 5px;
  text-align: center;
}

.admin-event-staff-qr-meta strong {
  color: var(--foreground);
  font-size: 0.95rem;
  line-height: 1.2;
}

.admin-event-staff-qr-meta small {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  line-height: 1.38;
  font-weight: 700;
}

.admin-event-staff-qr-meta em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--primary-strong);
  font-style: normal;
  font-size: 0.74rem;
  font-weight: 900;
}

.admin-event-display-link {
  width: 100%;
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(23, 107, 58, 0.13);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
}

.admin-event-display-link > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--foreground);
  font-size: 0.72rem;
  font-weight: 900;
}

.admin-event-display-link > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 7px;
}

.admin-event-display-link input {
  min-width: 0;
  border: 1px solid color-mix(in oklab, var(--primary) 14%, white);
  border-radius: 12px;
  background: #fff;
  color: var(--foreground);
  font: inherit;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 9px 10px;
}

.admin-event-display-link .button-secondary {
  min-height: 36px;
  padding-inline: 10px;
}

.admin-event-display-link small {
  color: var(--muted-foreground);
  font-size: 0.66rem;
  font-weight: 800;
}

.admin-event-attendance-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.admin-event-attendance-summary span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px;
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(23, 107, 58, 0.08), rgba(255, 255, 255, 0.9));
}

.admin-event-attendance-summary .fa-icon {
  color: var(--primary);
}

.admin-event-attendance-summary strong {
  color: var(--foreground);
  font-size: 1rem;
  font-weight: 900;
}

.admin-event-attendance-summary small {
  color: var(--muted-foreground);
  font-size: 0.66rem;
  font-weight: 800;
}

.admin-event-scan-filter {
  padding: 10px;
  border-radius: 18px;
  border: 1px solid rgba(191, 216, 200, 0.58);
  background:
    radial-gradient(circle at 96% 0%, rgba(20, 184, 166, 0.12), transparent 30%),
    rgba(255, 255, 255, 0.72);
  box-shadow: none;
}

.admin-event-scan-list {
  display: grid;
  gap: 8px;
}

.admin-event-scan-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(191, 216, 200, 0.72);
  background: rgba(255, 255, 255, 0.82);
}

.admin-event-scan-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(23, 107, 58, 0.1);
  color: var(--primary);
}

.admin-event-scan-item.is-rejected .admin-event-scan-icon,
.admin-event-scan-item.is-expired .admin-event-scan-icon,
.admin-event-scan-item.is-duplicate .admin-event-scan-icon {
  background: rgba(220, 38, 38, 0.08);
  color: var(--danger);
}

.admin-event-scan-item div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.admin-event-scan-item strong,
.admin-event-scan-item small,
.admin-event-scan-item em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-event-scan-item strong {
  color: var(--foreground);
  font-size: 0.78rem;
  font-weight: 900;
}

.admin-event-scan-item small,
.admin-event-scan-item em,
.admin-event-scan-item time {
  color: var(--muted-foreground);
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 700;
}

.admin-event-scan-item time {
  grid-column: 2;
}

.admin-event-scan-title,
.admin-event-scan-chips {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.admin-event-scan-title {
  flex-wrap: wrap;
  justify-content: flex-start;
}

.admin-event-scan-title strong {
  flex: 1 1 140px;
  min-width: 0;
}

.admin-event-scan-chips {
  flex-wrap: wrap;
}

.admin-event-scan-chip {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 4px 7px;
  border-radius: 999px;
  color: #315344;
  background: rgba(23, 107, 58, 0.08);
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-event-scan-chip .fa-icon {
  font-size: 0.62rem;
}

.admin-event-scan-chip.tone-success {
  color: #047857;
  background: rgba(16, 185, 129, 0.14);
}

.admin-event-scan-chip.tone-warning {
  color: #9a5b00;
  background: rgba(245, 158, 11, 0.15);
}

.admin-event-scan-chip.tone-danger {
  color: #b91c1c;
  background: rgba(239, 68, 68, 0.12);
}

.admin-event-scan-chip.tone-muted,
.admin-event-scan-chip.tone-neutral {
  color: var(--muted-foreground);
  background: rgba(100, 116, 139, 0.08);
}

.admin-event-participants-panel {
  overflow: hidden;
}

.admin-event-participant-head-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

.admin-event-participant-head-actions .button-secondary {
  min-height: 36px;
  padding-inline: 12px;
}

.admin-event-participants-table td {
  min-width: 150px;
}

.admin-event-participant-card {
  background:
    linear-gradient(135deg, rgba(14, 165, 233, 0.06), transparent 52%),
    #fff;
}

.admin-event-participant-filter {
  margin: 10px 0 12px;
}

.admin-event-complete-form {
  display: grid;
  gap: 12px;
}

.admin-event-participants-table input[type="checkbox"],
.admin-event-participant-card input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
}

.admin-event-complete-actions {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(191, 216, 200, 0.86);
  border-radius: 18px;
  background:
    radial-gradient(circle at 94% 8%, rgba(251, 191, 36, 0.1), transparent 28%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(241, 249, 244, 0.9));
}

.admin-event-complete-actions > div {
  display: grid;
  gap: 3px;
}

.admin-event-complete-actions strong {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--foreground);
  font-size: 0.86rem;
  font-weight: 900;
}

.admin-event-complete-actions strong .fa-icon {
  color: var(--accent-strong);
}

.admin-event-complete-actions small {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  line-height: 1.4;
  font-weight: 700;
}

.admin-event-complete-actions label {
  display: grid;
  gap: 5px;
}

.admin-event-complete-actions textarea {
  width: 100%;
}

.admin-user-status.status-ongoing,
.admin-user-status.status-registered,
.admin-user-status.status-ready,
.admin-user-status.status-checked_in,
.admin-user-status.status-in_progress {
  background: color-mix(in oklab, #0ea5e9 13%, white);
  color: #036083;
}

@media (min-width: 768px) {
  .event-attendance-modal {
    align-items: center;
  }

  .event-attendance-sheet {
    border-radius: 26px;
  }

  .admin-event-attendance-grid {
    grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.1fr);
    align-items: start;
  }

  .admin-event-attendance-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .admin-event-attendance-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-event-save-section {
    grid-template-columns: minmax(220px, 0.68fr) minmax(0, 1fr) auto;
    align-items: end;
  }

  .admin-event-save-section .button {
    width: auto;
    min-width: 136px;
  }

  .admin-event-location-field {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .admin-event-location-field .button-secondary {
    width: auto;
  }

  .admin-event-location-modal {
    place-items: center;
  }

  .admin-event-location-foot {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .admin-event-location-foot > div {
    grid-template-columns: repeat(2, auto);
  }

  .admin-event-result-head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .admin-event-result-media-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-event-result-media-fields .span-2 {
    grid-column: 1 / -1;
  }

  .admin-donation-campaign-title {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  .admin-donations-table-wrap {
    display: block;
  }

  .admin-donations-mobile-list {
    display: none;
  }
}

@media (min-width: 1180px) {
  .admin-donations-page,
  .admin-events-page {
    max-width: 1360px !important;
  }

  .admin-donation-stat-grid,
  .admin-article-stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .admin-financial-stat-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .admin-event-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .admin-donation-workbench {
    grid-template-columns: minmax(360px, 0.82fr) minmax(520px, 1.18fr);
    align-items: start;
  }

  .admin-donation-campaign-panel,
  .admin-donation-editor-panel {
    align-self: start;
  }

  .admin-donation-campaign-list {
    max-height: 980px;
    overflow: auto;
    padding-right: 2px;
  }
}

.admin-support-stack {
  gap: 18px;
}

.admin-support-hero {
  background:
    radial-gradient(circle at 86% 12%, rgba(125, 211, 252, 0.22), transparent 32%),
    linear-gradient(135deg, #052e27 0%, #07553d 55%, #0f766e 100%);
}

.admin-support-layout {
  display: grid;
  gap: 16px;
}

.admin-support-side {
  display: grid;
  gap: 16px;
  align-content: start;
}

.admin-support-filter {
  padding: 12px;
  border: 1px solid color-mix(in oklab, var(--primary) 13%, white);
  border-radius: 18px;
  background:
    radial-gradient(circle at 96% 0%, rgba(125, 211, 252, 0.12), transparent 34%),
    linear-gradient(135deg, rgba(236, 253, 245, 0.94), rgba(255, 255, 255, 0.98) 58%, rgba(240, 253, 250, 0.92));
  box-shadow: 0 14px 34px rgba(6, 78, 59, 0.07);
}

.admin-support-list {
  display: grid;
  gap: 10px;
}

.admin-support-card {
  display: grid;
  gap: 10px;
  padding: 13px;
  border: 1px solid rgba(13, 73, 55, 0.11);
  border-radius: 16px;
  background:
    radial-gradient(circle at 100% 0%, rgba(34, 197, 94, 0.08), transparent 32%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(238, 250, 242, 0.96));
}

.admin-support-card.status-open {
  border-color: rgba(245, 158, 11, 0.2);
}

.admin-support-card.status-in_progress {
  border-color: rgba(14, 165, 233, 0.2);
}

.admin-support-card.status-resolved,
.admin-support-card.status-closed {
  border-color: rgba(34, 197, 94, 0.18);
}

.admin-support-card-head {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.admin-support-topic-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, #0f766e, #22c55e);
  color: #fff;
  box-shadow: 0 12px 24px rgba(6, 78, 59, 0.13);
}

.admin-support-card-head strong,
.admin-support-card-head small {
  min-width: 0;
  overflow: hidden;
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-support-card-head strong {
  color: var(--foreground);
  font-size: 0.86rem;
  font-weight: 950;
}

.admin-support-card-head small {
  color: var(--muted-foreground);
  font-size: 0.66rem;
  font-weight: 800;
}

.admin-support-card > p {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  margin: 0;
  color: color-mix(in oklab, var(--muted-foreground) 88%, #0f766e);
  font-size: 0.72rem;
  font-weight: 760;
  line-height: 1.46;
}

.admin-support-status-tag {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--muted) 74%, white);
  color: var(--muted-foreground);
  font-size: 0.62rem;
  font-weight: 950;
  white-space: nowrap;
}

.admin-support-status-tag.tone-warning,
.admin-support-status-row.tone-warning {
  background: rgba(254, 243, 199, 0.86);
  color: #92400e;
}

.admin-support-status-tag.tone-sky,
.admin-support-status-row.tone-sky {
  background: rgba(224, 242, 254, 0.86);
  color: #0369a1;
}

.admin-support-status-tag.tone-success,
.admin-support-status-row.tone-success {
  background: rgba(220, 252, 231, 0.86);
  color: #047857;
}

.admin-support-status-tag.tone-danger,
.admin-support-status-row.tone-danger {
  background: rgba(254, 226, 226, 0.9);
  color: #b91c1c;
}

.admin-support-status-tag.tone-muted,
.admin-support-status-row.tone-muted {
  background: rgba(241, 245, 249, 0.9);
  color: #475569;
}

.admin-support-meta,
.admin-support-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.admin-support-contact-grid {
  display: grid;
  gap: 8px;
}

.admin-support-contact-grid span {
  min-width: 0;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 7px;
  padding: 9px 10px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.72);
}

.admin-support-contact-grid strong,
.admin-support-contact-grid small {
  min-width: 0;
  overflow: hidden;
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-support-contact-grid strong {
  color: var(--foreground);
  font-size: 0.72rem;
  font-weight: 950;
}

.admin-support-contact-grid small {
  grid-column: 2;
  color: var(--muted-foreground);
  font-size: 0.62rem;
  font-weight: 800;
}

.admin-support-actions .button-secondary {
  min-height: 36px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 900;
}

.admin-support-status-list,
.admin-support-topic-list,
.admin-support-workload-grid {
  display: grid;
  gap: 9px;
}

.admin-support-report-panel {
  overflow: hidden;
  background:
    radial-gradient(circle at 96% 0%, rgba(14, 165, 233, 0.12), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(236, 253, 245, 0.92));
}

.admin-support-report-hero {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.admin-support-report-hero span,
.admin-support-report-split span,
.admin-support-report-list span {
  min-width: 0;
  display: grid;
  align-items: center;
  border-radius: 14px;
}

.admin-support-report-hero span {
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 4px 8px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: inset 0 0 0 1px rgba(13, 73, 55, 0.07);
}

.admin-support-report-hero svg {
  grid-row: span 2;
}

.admin-support-report-hero strong,
.admin-support-report-split strong,
.admin-support-report-list strong,
.admin-support-report-hero small,
.admin-support-report-split small,
.admin-support-report-list small {
  min-width: 0;
  overflow: hidden;
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-support-report-hero strong {
  color: var(--foreground);
  font-size: 0.8rem;
  font-weight: 950;
}

.admin-support-report-hero small {
  color: var(--muted-foreground);
  font-size: 0.6rem;
  font-weight: 850;
}

.admin-support-report-split {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 9px;
}

.admin-support-report-split span {
  gap: 2px;
  padding: 9px;
  background: rgba(248, 250, 252, 0.82);
}

.admin-support-report-split strong {
  color: #064e3b;
  font-size: 0.72rem;
  font-weight: 950;
}

.admin-support-report-split small {
  color: var(--muted-foreground);
  font-size: 0.57rem;
  font-weight: 850;
}

.admin-support-report-list {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

.admin-support-report-list > strong {
  color: var(--muted-foreground);
  font-size: 0.66rem;
  font-weight: 950;
}

.admin-support-report-list span {
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 3px 8px;
  padding: 9px;
  background: rgba(255, 255, 255, 0.78);
}

.admin-support-report-list svg {
  grid-row: span 2;
}

.admin-support-report-list strong {
  color: var(--foreground);
  font-size: 0.7rem;
  font-weight: 950;
}

.admin-support-report-list small {
  color: var(--muted-foreground);
  font-size: 0.6rem;
  font-weight: 820;
}

.admin-support-report-hero .tone-green,
.admin-support-report-list .tone-success {
  color: #047857;
  background: rgba(220, 252, 231, 0.82);
}

.admin-support-report-hero .tone-red,
.admin-support-report-list .tone-danger {
  color: #b91c1c;
  background: rgba(254, 226, 226, 0.88);
}

.admin-support-report-hero .tone-sky {
  color: #0369a1;
  background: rgba(224, 242, 254, 0.86);
}

.admin-support-report-hero .tone-amber,
.admin-support-report-list .tone-warning {
  color: #92400e;
  background: rgba(254, 243, 199, 0.86);
}

.admin-support-report-list .tone-muted {
  color: #475569;
  background: rgba(241, 245, 249, 0.88);
}

.admin-support-status-row,
.admin-support-topic-list span,
.admin-support-workload-grid span {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
}

.admin-support-topic-list span {
  grid-template-columns: 26px minmax(0, 1fr);
}

.admin-support-workload-grid span {
  grid-template-columns: 26px minmax(0, auto) minmax(0, 1fr);
}

.admin-support-workload-grid .tone-danger {
  background: rgba(254, 226, 226, 0.9);
  color: #b91c1c;
}

.admin-support-workload-grid .tone-warning {
  background: rgba(254, 243, 199, 0.9);
  color: #92400e;
}

.admin-support-workload-grid .tone-muted {
  background: rgba(241, 245, 249, 0.9);
  color: #475569;
}

.admin-support-status-row strong,
.admin-support-topic-list strong,
.admin-support-workload-grid strong {
  min-width: 0;
  overflow: hidden;
  display: block;
  color: var(--foreground);
  font-size: 0.72rem;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-support-status-row small {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 950;
}

.admin-support-workload-grid small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-support-dialog {
  width: min(860px, calc(100vw - 24px));
  max-height: min(88dvh, 760px);
  gap: 14px;
  padding: 15px;
  border-radius: 18px;
}

.admin-support-dialog-detail,
.admin-support-update-form,
.admin-support-reply-form,
.admin-support-thread {
  display: grid;
  gap: 12px;
}

.admin-support-dialog-detail {
  padding: 12px;
  border: 1px solid rgba(13, 73, 55, 0.1);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.72);
}

.admin-support-dialog-detail > p {
  margin: 0;
  color: var(--foreground);
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.5;
}

.admin-support-dialog-meta,
.admin-support-dialog-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.admin-support-dialog-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--primary) 9%, white);
  color: #07553d;
  font-size: 0.64rem;
  font-weight: 900;
}

.admin-support-dialog-contact span {
  min-width: min(100%, 140px);
  display: grid;
  gap: 3px;
  padding: 8px 9px;
  border-radius: 12px;
  background: rgba(236, 253, 245, 0.82);
}

.admin-support-dialog-contact strong {
  color: var(--muted-foreground);
  font-size: 0.62rem;
  font-weight: 900;
}

.admin-support-dialog-contact small {
  overflow: hidden;
  color: var(--foreground);
  font-size: 0.7rem;
  font-weight: 900;
  text-overflow: ellipsis;
}

.admin-support-form-head {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.admin-support-form-head > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.14), rgba(14, 165, 233, 0.1));
  color: #047857;
}

.admin-support-form-head strong,
.admin-support-form-head small {
  min-width: 0;
  overflow: hidden;
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-support-form-head strong {
  color: var(--foreground);
  font-size: 0.82rem;
  font-weight: 950;
}

.admin-support-form-head small {
  color: var(--muted-foreground);
  font-size: 0.64rem;
  font-weight: 800;
}

.admin-support-update-form,
.admin-support-reply-form,
.admin-support-thread {
  padding: 12px;
  border: 1px solid rgba(13, 73, 55, 0.1);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.76);
}

.admin-support-reply-form {
  background:
    radial-gradient(circle at 98% 0%, rgba(34, 197, 94, 0.08), transparent 30%),
    rgba(255, 255, 255, 0.82);
}

.admin-support-thread {
  background: rgba(248, 250, 252, 0.72);
}

.admin-support-thread-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 850;
}

.admin-support-reply {
  display: grid;
  gap: 9px;
  padding: 11px;
  border: 1px solid rgba(13, 73, 55, 0.09);
  border-left: 4px solid rgba(148, 163, 184, 0.5);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.86);
}

.admin-support-reply.tone-success {
  border-left-color: #10b981;
}

.admin-support-reply-head {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.admin-support-reply-head > span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(16, 185, 129, 0.1);
  color: #047857;
}

.admin-support-reply-head strong,
.admin-support-reply-head small {
  min-width: 0;
  overflow: hidden;
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-support-reply-head strong {
  color: var(--foreground);
  font-size: 0.76rem;
  font-weight: 950;
}

.admin-support-reply-head small {
  color: var(--muted-foreground);
  font-size: 0.62rem;
  font-weight: 800;
}

.admin-support-reply p {
  margin: 0;
  color: color-mix(in oklab, var(--foreground) 88%, #065f46);
  font-size: 0.74rem;
  font-weight: 760;
  line-height: 1.5;
}

.admin-support-reply-files {
  display: grid;
  gap: 7px;
}

.admin-support-reply-files a {
  min-width: 0;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 8px 9px;
  border-radius: 12px;
  background: rgba(236, 253, 245, 0.72);
  color: #07553d;
  font-size: 0.68rem;
  font-weight: 900;
  text-decoration: none;
}

.admin-support-reply-files span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-support-reply-files small {
  color: var(--muted-foreground);
  font-size: 0.62rem;
  font-weight: 800;
}

.admin-support-attachments {
  display: grid;
  gap: 8px;
}

.admin-support-attachments-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.admin-support-attachments-head strong,
.admin-support-attachments-head small {
  color: var(--muted-foreground);
  font-size: 0.66rem;
  font-weight: 900;
}

.admin-support-attachment-row {
  display: grid;
  gap: 7px;
}

.admin-support-update-form .admin-field-grid,
.admin-support-reply-form .admin-field-grid {
  display: grid;
  gap: 10px;
}

.admin-support-update-form .admin-field-grid label,
.admin-support-reply-form .admin-field-grid label,
.admin-support-update-form .admin-reason-field,
.admin-support-reply-form .admin-reason-field {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.admin-support-update-form .admin-field-grid label > span,
.admin-support-reply-form .admin-field-grid label > span,
.admin-support-update-form .admin-reason-field > span,
.admin-support-reply-form .admin-reason-field > span {
  color: var(--muted-foreground);
  font-size: 0.64rem;
  font-weight: 900;
}

.admin-support-update-form input,
.admin-support-update-form select,
.admin-support-update-form textarea,
.admin-support-reply-form input,
.admin-support-reply-form select,
.admin-support-reply-form textarea,
.admin-support-attachment-row input {
  width: 100%;
  min-width: 0;
  border: 1px solid color-mix(in oklab, var(--border) 88%, #0f766e);
  border-radius: 13px;
  background:
    linear-gradient(135deg, rgba(20, 163, 111, 0.045), transparent 52%),
    #fff;
  color: var(--foreground);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 800;
  outline: 0;
  padding: 0 10px;
}

.admin-support-update-form input,
.admin-support-update-form select,
.admin-support-reply-form input,
.admin-support-reply-form select,
.admin-support-attachment-row input {
  min-height: 42px;
}

.admin-support-update-form textarea,
.admin-support-reply-form textarea {
  min-height: 112px;
  padding: 10px;
  line-height: 1.45;
  resize: vertical;
}

.admin-support-reply-form textarea[name="body"] {
  min-height: 132px;
}

.admin-support-attachment-row .button-secondary {
  min-height: 42px;
  border-radius: 13px;
}

.rfm-file-doc {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(15, 118, 110, 0.12), rgba(14, 165, 233, 0.1));
  color: #047857;
  font-size: 1.55rem;
}

@media (min-width: 768px) {
  .public-info-support-panel {
    grid-template-columns: minmax(0, 0.46fr) minmax(0, 1fr);
    align-items: start;
  }

  .public-support-copy {
    position: sticky;
    top: 18px;
  }

  .support-hero-card {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .support-hero-action {
    width: auto;
    min-width: 180px;
  }

  .support-filter {
    grid-template-columns: minmax(0, 1fr) 160px;
  }

  .admin-support-contact-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .admin-support-dialog-contact span {
    flex: 1 1 140px;
  }

  .admin-support-attachment-row {
    grid-template-columns: minmax(120px, 0.34fr) minmax(0, 1fr) auto;
    align-items: center;
  }
}

@media (min-width: 1024px) {
  .public-info-page .public-info-support-panel {
    grid-column: 1;
  }

  .support-layout {
    grid-template-columns: minmax(300px, 0.36fr) minmax(0, 1fr);
    align-items: start;
  }

  .support-list-panel,
  .support-detail-panel {
    position: sticky;
    top: 24px;
  }

  .support-detail-panel {
    min-width: 0;
  }

  .admin-support-layout {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.36fr);
    align-items: start;
  }

  .admin-support-side {
    position: sticky;
    top: 24px;
  }
}

.admin-leaderboard-stack,
.admin-gamification-stack {
  gap: 18px;
}

.admin-leaderboard-hero {
  background:
    radial-gradient(circle at 84% 12%, rgba(250, 204, 21, 0.2), transparent 32%),
    linear-gradient(135deg, #052e27 0%, #07553d 54%, #0f766e 100%);
}

.admin-leaderboard-layout {
  display: grid;
  gap: 16px;
}

.admin-leaderboard-side {
  display: grid;
  gap: 16px;
  align-content: start;
}

.admin-leaderboard-page .admin-users-filter {
  padding: 12px;
  border: 1px solid color-mix(in oklab, var(--primary) 13%, white);
  border-radius: 18px;
  background:
    radial-gradient(circle at 96% 0%, rgba(250, 204, 21, 0.11), transparent 34%),
    linear-gradient(135deg, rgba(236, 253, 245, 0.94), rgba(255, 255, 255, 0.98) 58%, rgba(240, 253, 250, 0.92));
  box-shadow: 0 14px 34px rgba(6, 78, 59, 0.07);
}

.admin-leaderboard-mobile-list {
  display: grid;
  gap: 10px;
}

.admin-leaderboard-row-card {
  display: grid;
  gap: 10px;
  padding: 13px;
  border: 1px solid rgba(13, 73, 55, 0.11);
  border-radius: 14px;
  background:
    radial-gradient(circle at 100% 0%, rgba(245, 158, 11, 0.08), transparent 32%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(238, 250, 242, 0.96));
}

.admin-leaderboard-member {
  min-width: 0;
  display: grid;
  grid-template-columns: auto 38px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}

.admin-leaderboard-rank {
  min-width: 38px;
  color: #0f766e;
  font-size: 0.72rem;
  font-weight: 950;
}

.admin-leaderboard-avatar {
  overflow: hidden;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, #0f766e, #22c55e);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 950;
  box-shadow: 0 12px 24px rgba(6, 78, 59, 0.13);
}

.admin-leaderboard-member strong,
.admin-leaderboard-member small,
.admin-leaderboard-score-line strong,
.admin-leaderboard-score-line span {
  min-width: 0;
  overflow: hidden;
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-leaderboard-member strong {
  color: var(--foreground);
  font-size: 0.84rem;
  font-weight: 950;
}

.admin-leaderboard-member small,
.admin-leaderboard-score-line span {
  color: var(--muted-foreground);
  font-size: 0.66rem;
  font-weight: 800;
}

.admin-leaderboard-score-line {
  display: grid;
  gap: 3px;
}

.admin-leaderboard-score-line strong {
  color: #07553d;
  font-size: 1.02rem;
  font-weight: 950;
}

.admin-leaderboard-row-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.admin-leaderboard-row-actions .button-secondary,
.admin-leaderboard-table .button-secondary,
.admin-leaderboard-moderation-item .button-secondary {
  min-height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 900;
}

.admin-leaderboard-trend {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--muted) 72%, white);
  color: var(--muted-foreground);
  font-size: 0.62rem;
  font-weight: 950;
  white-space: nowrap;
}

.admin-leaderboard-trend.up {
  background: color-mix(in oklab, #16a34a 13%, white);
  color: #047857;
}

.admin-leaderboard-trend.down {
  background: color-mix(in oklab, #ef4444 12%, white);
  color: #b42318;
}

.admin-leaderboard-risk-list,
.admin-leaderboard-moderation-list {
  display: grid;
  gap: 9px;
}

.admin-leaderboard-observability-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.admin-leaderboard-observability-grid span {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 10px;
  border: 1px solid rgba(13, 73, 55, 0.08);
  border-radius: 13px;
  background:
    linear-gradient(135deg, rgba(13, 148, 136, 0.07), transparent 60%),
    rgba(255, 255, 255, 0.82);
}

.admin-leaderboard-observability-grid strong {
  color: #07553d;
  font-size: 1rem;
  font-weight: 950;
  line-height: 1;
}

.admin-leaderboard-observability-grid small {
  color: var(--muted-foreground);
  font-size: 0.62rem;
  font-weight: 850;
  white-space: nowrap;
}

.admin-leaderboard-observability-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.admin-leaderboard-risk-item,
.admin-leaderboard-moderation-item {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(13, 73, 55, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
}

.admin-leaderboard-risk-item strong,
.admin-leaderboard-risk-item small,
.admin-leaderboard-moderation-item strong,
.admin-leaderboard-moderation-item small,
.admin-leaderboard-moderation-item p {
  min-width: 0;
  overflow: hidden;
  display: block;
  text-overflow: ellipsis;
}

.admin-leaderboard-risk-item strong,
.admin-leaderboard-moderation-item strong {
  color: var(--foreground);
  font-size: 0.78rem;
  font-weight: 950;
  white-space: nowrap;
}

.admin-leaderboard-risk-item small,
.admin-leaderboard-moderation-item small {
  color: var(--muted-foreground);
  font-size: 0.64rem;
  font-weight: 800;
  white-space: nowrap;
}

.admin-leaderboard-risk-tags,
.admin-leaderboard-moderation-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.admin-leaderboard-risk-action {
  color: color-mix(in oklab, var(--muted-foreground) 86%, #0f766e);
  font-size: 0.63rem;
  font-weight: 780;
  line-height: 1.38;
  white-space: normal !important;
}

.admin-leaderboard-moderation-item p {
  margin: 0;
  color: color-mix(in oklab, var(--muted-foreground) 88%, #0f766e);
  font-size: 0.68rem;
  font-weight: 760;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.admin-leaderboard-moderation-meta > span:last-child {
  color: var(--muted-foreground);
  font-size: 0.64rem;
  font-weight: 850;
}

.admin-leaderboard-table-wrap {
  display: none;
}

.admin-leaderboard-dialog {
  width: min(620px, calc(100vw - 24px));
  max-height: min(88dvh, 720px);
  gap: 14px;
  padding: 15px;
  border-radius: 18px;
}

.admin-leaderboard-moderation-form {
  display: grid;
  gap: 12px;
}

.admin-leaderboard-moderation-form .admin-field-grid {
  display: grid;
  gap: 10px;
}

.admin-leaderboard-moderation-form .admin-field-grid label,
.admin-leaderboard-moderation-form .admin-reason-field {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.admin-leaderboard-moderation-form .admin-field-grid label > span,
.admin-leaderboard-moderation-form .admin-reason-field > span {
  color: var(--muted-foreground);
  font-size: 0.64rem;
  font-weight: 900;
}

.admin-leaderboard-moderation-form input,
.admin-leaderboard-moderation-form select {
  min-height: 42px;
  width: 100%;
  min-width: 0;
  border: 1px solid color-mix(in oklab, var(--border) 88%, #0f766e);
  border-radius: 13px;
  background:
    linear-gradient(135deg, rgba(20, 163, 111, 0.045), transparent 52%),
    #fff;
  color: var(--foreground);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 800;
  outline: 0;
  padding: 0 10px;
}

@media (min-width: 980px) {
  .admin-leaderboard-layout {
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
    align-items: start;
  }

  .admin-leaderboard-side {
    position: sticky;
    top: 92px;
  }

  .admin-leaderboard-mobile-list {
    display: none;
  }

  .admin-leaderboard-table-wrap {
    display: block;
  }

  .admin-leaderboard-moderation-form .admin-field-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.admin-gamification-hero {
  background:
    linear-gradient(135deg, rgba(13, 91, 64, 0.96), rgba(7, 44, 41, 0.98)),
    radial-gradient(circle at 84% 16%, rgba(255, 216, 112, 0.24), transparent 34%);
}

.admin-gamification-layout {
  display: grid;
  gap: 16px;
}

.admin-gamification-adjust-panel,
.admin-gamification-ledger-panel {
  min-width: 0;
}

.admin-badge-rules-panel {
  display: grid;
  gap: 12px;
}

.admin-credit-levels-panel {
  display: grid;
  gap: 12px;
}

.admin-credit-level-grid {
  display: grid;
  gap: 10px;
}

.admin-credit-level-card {
  overflow: hidden;
  min-width: 0;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid color-mix(in oklab, var(--border) 78%, transparent);
  border-radius: 14px;
}

.admin-credit-level-card.tone-sprout {
  --badge-main: #16a34a;
  --badge-alt: #0d9488;
}

.admin-credit-level-card.tone-leaf {
  --badge-main: #22c55e;
  --badge-alt: #84cc16;
}

.admin-credit-level-card.tone-tree {
  --badge-main: #147647;
  --badge-alt: #16a34a;
}

.admin-credit-level-card.tone-star {
  --badge-main: #2563eb;
  --badge-alt: #06b6d4;
}

.admin-credit-level-card.tone-forest {
  --badge-main: #0f766e;
  --badge-alt: #0c4f31;
}

.admin-credit-level-card.tone-gold {
  --badge-main: #f59e0b;
  --badge-alt: #d97706;
}

.admin-credit-level-emblem .fa-icon {
  width: 18px;
  height: 18px;
  color: #fff;
}

.admin-credit-level-card-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.admin-credit-level-card-copy strong {
  overflow: hidden;
  color: var(--foreground);
  font-size: 0.82rem;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-credit-level-card-copy small {
  overflow: hidden;
  color: var(--muted-foreground);
  font-size: 0.66rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-credit-level-card-copy p {
  margin: 0;
  overflow: hidden;
  color: color-mix(in oklab, var(--muted-foreground) 88%, #0f766e);
  font-size: 0.68rem;
  font-weight: 760;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.admin-credit-level-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 2px;
}

.admin-credit-level-edit-button {
  min-height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 900;
}

.admin-credit-level-form {
  display: grid;
  gap: 10px;
  padding: 0;
}

.admin-credit-level-fields {
  display: grid;
  gap: 10px;
}

.admin-badge-rule-grid {
  display: grid;
  gap: 10px;
}

.admin-badge-rule-card {
  overflow: hidden;
  min-width: 0;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid color-mix(in oklab, var(--border) 78%, transparent);
  border-radius: 14px;
  background: var(--card);
}

.admin-badge-rule-card.credit-badge-card.is-earned {
  border-color: color-mix(in oklab, var(--badge-main) 24%, white);
  background:
    radial-gradient(circle at 92% 12%, color-mix(in oklab, var(--badge-alt) 18%, transparent), transparent 30%),
    linear-gradient(135deg, var(--badge-soft), rgba(255, 255, 255, 0.96) 55%, color-mix(in oklab, var(--badge-alt) 8%, white)),
    var(--card);
  box-shadow: 0 10px 24px color-mix(in oklab, var(--badge-main) 12%, transparent);
}

.admin-badge-rule-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.admin-badge-rule-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(135deg, #0f8b61, #f6c84c);
  color: #fff;
  box-shadow: 0 10px 22px rgba(13, 91, 64, 0.13);
}

.admin-badge-rule-copy strong {
  overflow: hidden;
  color: var(--foreground);
  font-size: 0.82rem;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-badge-rule-copy small {
  overflow: hidden;
  color: var(--muted-foreground);
  font-size: 0.66rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-badge-rule-copy p {
  margin: 0;
  overflow: hidden;
  color: color-mix(in oklab, var(--muted-foreground) 88%, #0f766e);
  font-size: 0.68rem;
  font-weight: 760;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.admin-badge-rule-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 2px;
}

.admin-badge-rule-state {
  justify-self: end;
  gap: 5px;
}

.admin-badge-rule-state.is-inactive {
  background: color-mix(in oklab, var(--muted) 70%, white) !important;
  color: var(--muted-foreground) !important;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--border) 78%, transparent);
}

.admin-badge-rule-actions em {
  padding: 5px 8px;
  border-radius: 999px;
  background: color-mix(in oklab, #16a34a 10%, white);
  color: #047857;
  font-size: 0.6rem;
  font-style: normal;
  font-weight: 950;
  white-space: nowrap;
}

.admin-badge-rule-actions em.is-inactive {
  background: color-mix(in oklab, var(--muted) 70%, white);
  color: var(--muted-foreground);
}

.admin-badge-rule-form {
  display: grid;
  gap: 10px;
  padding: 0;
}

.admin-badge-rule-actions .button-secondary {
  min-height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 900;
}

.admin-gamification-page .admin-users-filter {
  padding: 12px;
  border: 1px solid color-mix(in oklab, var(--primary) 13%, white);
  border-radius: 18px;
  background:
    radial-gradient(circle at 98% 0%, rgba(250, 204, 21, 0.12), transparent 34%),
    linear-gradient(135deg, rgba(236, 253, 245, 0.92), rgba(255, 255, 255, 0.96) 52%, rgba(240, 253, 250, 0.92));
  box-shadow: 0 14px 34px rgba(6, 78, 59, 0.07);
}

.admin-gamification-page .admin-users-search {
  border-color: color-mix(in oklab, var(--border) 82%, #0f766e);
  background:
    linear-gradient(135deg, rgba(20, 163, 111, 0.07), transparent 56%),
    rgba(255, 255, 255, 0.96);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76);
}

.admin-gamification-page .admin-users-search:focus-within {
  border-color: color-mix(in oklab, var(--primary) 50%, white);
  box-shadow:
    0 0 0 3px color-mix(in oklab, var(--primary) 10%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.admin-gamification-page .admin-users-filter-grid,
.admin-gamification-page .admin-credit-adjustment-form .admin-field-grid,
:is(.admin-gamification-page, .admin-gamification-modal) .admin-credit-level-fields,
:is(.admin-gamification-page, .admin-gamification-modal) .admin-badge-rule-fields {
  gap: 10px;
}

.admin-gamification-page .admin-users-filter-grid > label,
.admin-gamification-page .admin-users-select,
.admin-gamification-page .admin-credit-adjustment-form .admin-field-grid label,
:is(.admin-gamification-page, .admin-gamification-modal) .admin-credit-level-fields label,
:is(.admin-gamification-page, .admin-gamification-modal) .admin-credit-level-form > label,
:is(.admin-gamification-page, .admin-gamification-modal) .admin-badge-rule-fields label,
:is(.admin-gamification-page, .admin-gamification-modal) .admin-badge-rule-form > label,
:is(.admin-gamification-page, .admin-gamification-modal) .admin-reason-field {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.admin-gamification-page .admin-users-filter-grid > label > span,
.admin-gamification-page .admin-users-select > span,
.admin-gamification-page .admin-credit-adjustment-form .admin-field-grid label > span,
:is(.admin-gamification-page, .admin-gamification-modal) .admin-credit-level-fields label > span,
:is(.admin-gamification-page, .admin-gamification-modal) .admin-credit-level-form > label > span,
:is(.admin-gamification-page, .admin-gamification-modal) .admin-badge-rule-fields label > span,
:is(.admin-gamification-page, .admin-gamification-modal) .admin-badge-rule-form > label > span,
:is(.admin-gamification-page, .admin-gamification-modal) .admin-reason-field > span {
  color: var(--muted-foreground);
  font-size: 0.64rem;
  font-weight: 900;
}

.admin-gamification-page .admin-users-filter-grid > label > input,
.admin-gamification-page .admin-users-filter-grid > label > select,
.admin-gamification-page .admin-users-select > select,
.admin-gamification-page .admin-credit-adjustment-form .admin-field-grid input,
.admin-gamification-page .admin-credit-adjustment-form .admin-field-grid select,
:is(.admin-gamification-page, .admin-gamification-modal) .admin-credit-level-fields input,
:is(.admin-gamification-page, .admin-gamification-modal) .admin-credit-level-fields select,
:is(.admin-gamification-page, .admin-gamification-modal) .admin-credit-level-form > label > input,
:is(.admin-gamification-page, .admin-gamification-modal) .admin-badge-rule-fields input,
:is(.admin-gamification-page, .admin-gamification-modal) .admin-badge-rule-fields select,
:is(.admin-gamification-page, .admin-gamification-modal) .admin-badge-rule-form > label > input,
:is(.admin-gamification-page, .admin-gamification-modal) .admin-reason-field > input {
  min-height: 42px;
  width: 100%;
  min-width: 0;
  border: 1px solid color-mix(in oklab, var(--border) 88%, #0f766e);
  border-radius: 13px;
  background:
    linear-gradient(135deg, rgba(20, 163, 111, 0.045), transparent 52%),
    #fff;
  color: var(--foreground);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 800;
  outline: 0;
  padding: 0 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.admin-gamification-page .admin-users-filter-grid > label > input::placeholder,
.admin-gamification-page .admin-credit-adjustment-form .admin-field-grid input::placeholder,
:is(.admin-gamification-page, .admin-gamification-modal) .admin-credit-level-fields input::placeholder,
:is(.admin-gamification-page, .admin-gamification-modal) .admin-credit-level-form > label > input::placeholder,
:is(.admin-gamification-page, .admin-gamification-modal) .admin-badge-rule-fields input::placeholder,
:is(.admin-gamification-page, .admin-gamification-modal) .admin-badge-rule-form > label > input::placeholder,
:is(.admin-gamification-page, .admin-gamification-modal) .admin-reason-field > input::placeholder,
.admin-gamification-page .admin-users-search input::placeholder {
  color: color-mix(in oklab, var(--muted-foreground) 68%, white);
}

.admin-gamification-page .admin-users-filter-grid > label:focus-within > span,
.admin-gamification-page .admin-users-select:focus-within > span,
.admin-gamification-page .admin-credit-adjustment-form .admin-field-grid label:focus-within > span,
:is(.admin-gamification-page, .admin-gamification-modal) .admin-credit-level-fields label:focus-within > span,
:is(.admin-gamification-page, .admin-gamification-modal) .admin-credit-level-form > label:focus-within > span,
:is(.admin-gamification-page, .admin-gamification-modal) .admin-badge-rule-fields label:focus-within > span,
:is(.admin-gamification-page, .admin-gamification-modal) .admin-badge-rule-form > label:focus-within > span,
:is(.admin-gamification-page, .admin-gamification-modal) .admin-reason-field:focus-within > span {
  color: var(--primary);
}

.admin-gamification-page .admin-users-filter-grid > label > input:focus,
.admin-gamification-page .admin-users-filter-grid > label > select:focus,
.admin-gamification-page .admin-users-select > select:focus,
.admin-gamification-page .admin-credit-adjustment-form .admin-field-grid input:focus,
.admin-gamification-page .admin-credit-adjustment-form .admin-field-grid select:focus,
:is(.admin-gamification-page, .admin-gamification-modal) .admin-credit-level-fields input:focus,
:is(.admin-gamification-page, .admin-gamification-modal) .admin-credit-level-fields select:focus,
:is(.admin-gamification-page, .admin-gamification-modal) .admin-credit-level-form > label > input:focus,
:is(.admin-gamification-page, .admin-gamification-modal) .admin-badge-rule-fields input:focus,
:is(.admin-gamification-page, .admin-gamification-modal) .admin-badge-rule-fields select:focus,
:is(.admin-gamification-page, .admin-gamification-modal) .admin-badge-rule-form > label > input:focus,
:is(.admin-gamification-page, .admin-gamification-modal) .admin-reason-field > input:focus {
  border-color: color-mix(in oklab, var(--primary) 54%, white);
  box-shadow:
    0 0 0 3px color-mix(in oklab, var(--primary) 10%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.admin-badge-rule-fields {
  display: grid;
  gap: 10px;
}

.admin-credit-adjustment-form {
  display: grid;
  gap: 14px;
}

.admin-gamification-dialog {
  width: min(680px, calc(100vw - 24px));
  max-height: min(88dvh, 760px);
  gap: 14px;
  padding: 15px;
  border-radius: 18px;
}

.admin-gamification-dialog-head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.admin-gamification-dialog-head > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, #0f766e, #22c55e);
  color: #fff;
  box-shadow: 0 14px 30px rgba(6, 78, 59, 0.16);
}

.admin-gamification-dialog-head strong,
.admin-gamification-dialog-head small {
  min-width: 0;
  overflow: hidden;
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-gamification-dialog-head strong {
  color: var(--foreground);
  font-size: 0.98rem;
  font-weight: 950;
}

.admin-gamification-dialog-head small {
  margin-top: 2px;
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 850;
}

.admin-gamification-dialog-head > button[data-action-close] {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  display: grid;
  place-items: center;
  justify-self: end;
  border: 1px solid color-mix(in oklab, var(--border) 78%, #0f766e);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--muted-foreground);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
  cursor: pointer;
  transition:
    transform 150ms ease,
    border-color 150ms ease,
    background 150ms ease,
    color 150ms ease,
    box-shadow 150ms ease;
}

.admin-gamification-dialog-head > button[data-action-close]:hover,
.admin-gamification-dialog-head > button[data-action-close]:focus-visible {
  border-color: color-mix(in oklab, var(--primary) 34%, var(--border));
  background: linear-gradient(135deg, rgba(15, 118, 110, 0.1), rgba(34, 197, 94, 0.06)), #fff;
  color: var(--primary-strong);
  box-shadow: 0 10px 20px rgba(15, 118, 110, 0.12);
  transform: translateY(-1px);
}

.admin-gamification-dialog-head > button[data-action-close]:focus-visible {
  outline: 3px solid rgba(34, 197, 94, 0.22);
  outline-offset: 2px;
}

.admin-gamification-dialog-head > button[data-action-close] .fa-icon {
  width: 15px;
  height: 15px;
}

.admin-gamification-dialog-body,
.admin-gamification-dialog-body form {
  min-width: 0;
  display: grid;
  gap: 12px;
}

/* ===== Admin reward shop ===== */
.admin-rewards-stack {
  gap: 16px;
}

.admin-rewards-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-rewards-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted-foreground);
  font-size: 0.82rem;
  font-weight: 800;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.admin-rewards-tabs a:hover {
  border-color: color-mix(in oklab, var(--primary) 50%, var(--border));
  color: var(--primary);
}

.admin-rewards-tabs a.is-active {
  background: linear-gradient(135deg, #0f8b61, #0d5b40);
  border-color: transparent;
  color: #f8fff8;
}

.admin-rewards-tabs a .fa-icon {
  width: 15px;
  height: 15px;
}

.admin-rewards-list {
  display: grid;
  gap: 10px;
}

.admin-rewards-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(238, 250, 242, 0.96));
}

.admin-rewards-row-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(16, 122, 87, 0.1);
  color: var(--primary);
}

.admin-rewards-row-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-rewards-row-icon .fa-icon {
  width: 22px;
  height: 22px;
}

.admin-rewards-row-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.admin-rewards-row-copy strong {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.92rem;
  color: var(--foreground);
}

.admin-rewards-row-copy strong .fa-icon {
  width: 14px;
  height: 14px;
  color: #d97706;
}

.admin-rewards-row-copy small {
  color: var(--muted-foreground);
  font-size: 0.76rem;
  line-height: 1.45;
}

.admin-rewards-row .tag {
  justify-self: start;
}

.admin-rewards-row-pending {
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--muted-foreground);
  white-space: nowrap;
}

.admin-rewards-row-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.admin-rewards-row-actions .button-secondary {
  padding: 7px 11px;
  font-size: 0.76rem;
}

.admin-rewards-row-shipping {
  grid-column: 1 / -1;
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(15, 118, 110, 0.06);
  font-size: 0.78rem;
  color: var(--foreground);
}

.admin-rewards-row-shipping span {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.admin-rewards-row-shipping span .fa-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--primary);
}

@media (max-width: 640px) {
  .admin-rewards-row {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .admin-rewards-row-icon {
    width: 48px;
    height: 48px;
  }

  .admin-rewards-row .tag,
  .admin-rewards-row-pending,
  .admin-rewards-row-actions {
    grid-column: 2 / -1;
    justify-self: start;
    justify-content: flex-start;
  }
}

/* ===== Admin redemption queue (đơn đổi quà) ===== */
.admin-redemptions-filter {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.admin-redemptions-filter a {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted-foreground);
  font-size: 0.78rem;
  font-weight: 800;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.admin-redemptions-filter a:hover {
  border-color: color-mix(in oklab, var(--primary) 45%, var(--border));
  color: var(--primary);
}

.admin-redemptions-filter a.is-active {
  background: linear-gradient(135deg, #0f8b61, #0d5b40);
  border-color: transparent;
  color: #f8fff8;
}

.admin-redemptions-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.admin-redemption-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.99), rgba(238, 250, 242, 0.95));
}

.admin-redemption-card.is-pending {
  border-color: color-mix(in oklab, var(--primary) 32%, var(--border));
  box-shadow: 0 8px 26px rgba(13, 91, 64, 0.08);
}

.admin-redemption-card-head {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.admin-redemption-method {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #f8fff8;
}

.admin-redemption-method.is-physical {
  background: linear-gradient(135deg, #0f8b61, #0d5b40);
}

.admin-redemption-method.is-digital {
  background: linear-gradient(135deg, #2563eb, #1e3a8a);
}

.admin-redemption-method .fa-icon {
  width: 20px;
  height: 20px;
}

.admin-redemption-card-title {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.admin-redemption-card-title strong {
  font-size: 0.95rem;
  color: var(--foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-redemption-card-title small {
  font-size: 0.76rem;
  color: var(--muted-foreground);
}

.admin-redemption-card-head .tag {
  justify-self: end;
  white-space: nowrap;
}

.admin-redemption-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  margin: 0;
}

.admin-redemption-meta > div {
  min-width: 0;
}

.admin-redemption-meta dt {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--muted-foreground);
}

.admin-redemption-meta dt .fa-icon {
  width: 12px;
  height: 12px;
}

.admin-redemption-meta dd {
  margin: 2px 0 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--foreground);
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-redemption-meta dd.is-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.03em;
  color: #be185d;
}

.admin-redemption-delivery {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 13px;
  border: 1px solid var(--border);
}

.admin-redemption-delivery.is-physical {
  background: rgba(15, 118, 110, 0.06);
  border-color: rgba(15, 118, 110, 0.18);
}

.admin-redemption-delivery.is-digital {
  background: rgba(37, 99, 235, 0.06);
  border-color: rgba(37, 99, 235, 0.18);
}

.admin-redemption-delivery-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--foreground);
}

.admin-redemption-delivery-head .fa-icon {
  width: 14px;
  height: 14px;
}

.admin-redemption-delivery.is-physical .admin-redemption-delivery-head {
  color: #0f5b40;
}

.admin-redemption-delivery.is-digital .admin-redemption-delivery-head {
  color: #1e3a8a;
}

.admin-redemption-shipping {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.admin-redemption-shipping li,
.admin-redemption-digital-note,
.admin-redemption-handover-note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--foreground);
}

.admin-redemption-shipping li .fa-icon,
.admin-redemption-digital-note .fa-icon,
.admin-redemption-handover-note .fa-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--primary);
}

.admin-redemption-digital-note strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.03em;
  color: #1e3a8a;
}

.admin-redemption-handover-note {
  padding-top: 8px;
  border-top: 1px dashed var(--border);
  color: var(--muted-foreground);
}

.admin-redemption-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-redemption-card-actions .button,
.admin-redemption-card-actions .button-secondary {
  flex: 1 1 auto;
  justify-content: center;
}

.admin-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
}

.admin-pagination-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--foreground);
  font-size: 0.8rem;
  font-weight: 800;
  text-decoration: none;
}

.admin-pagination-link:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.admin-pagination-link.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.admin-pagination-info {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--muted-foreground);
}

@media (max-width: 480px) {
  .admin-redemptions-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-redemption-meta {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-redemption-card-actions .button,
  .admin-redemption-card-actions .button-secondary {
    flex: 1 1 100%;
  }
}

/* ===== Admin product grid (quà đổi) ===== */
.admin-product-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.admin-product-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(180deg, #fff, rgba(238, 250, 242, 0.7));
  transition: box-shadow 0.2s, border-color 0.2s;
}

.admin-product-card:hover {
  border-color: color-mix(in oklab, var(--primary) 35%, var(--border));
  box-shadow: 0 10px 28px rgba(13, 91, 64, 0.1);
}

.admin-product-card-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: rgba(15, 118, 110, 0.08);
}

.admin-product-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.admin-product-card:hover .admin-product-card-cover img {
  transform: scale(1.04);
}

.admin-product-card-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--muted-foreground);
}

.admin-product-card-placeholder .fa-icon {
  width: 40px;
  height: 40px;
  opacity: 0.4;
}

.admin-product-card-featured {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #d97706, #b45309);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 900;
}

.admin-product-card-featured .fa-icon {
  width: 12px;
  height: 12px;
}

.admin-product-card-type {
  position: absolute;
  bottom: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 900;
  backdrop-filter: blur(6px);
}

.admin-product-card-type.is-physical {
  background: rgba(15, 139, 97, 0.88);
  color: #f0fdf4;
}

.admin-product-card-type.is-digital {
  background: rgba(37, 99, 235, 0.88);
  color: #eff6ff;
}

.admin-product-card-type .fa-icon {
  width: 12px;
  height: 12px;
}

.admin-product-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px 16px;
  flex: 1;
}

.admin-product-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-product-card-pending {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 800;
  color: #d97706;
}

.admin-product-card-pending .fa-icon {
  width: 12px;
  height: 12px;
}

.admin-product-card-name {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: var(--foreground);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.admin-product-card-summary {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted-foreground);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.admin-product-card-stats {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.admin-product-card-cost {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.84rem;
  font-weight: 900;
  color: #be185d;
}

.admin-product-card-cost .fa-icon {
  width: 14px;
  height: 14px;
}

.admin-product-card-stock {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--muted-foreground);
}

.admin-product-card-stock .fa-icon {
  width: 13px;
  height: 13px;
}

.admin-product-card-stock.is-low {
  color: #d97706;
}

.admin-product-card-stock.is-out {
  color: #dc2626;
}

.admin-product-card-eligibility {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--muted-foreground);
}

.admin-product-card-eligibility .fa-icon {
  width: 13px;
  height: 13px;
  color: var(--primary);
}

.admin-product-card-foot {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
}

.admin-product-card-foot .button-secondary {
  flex: 1;
  justify-content: center;
  padding: 8px 12px;
  font-size: 0.78rem;
}

@media (max-width: 560px) {
  .admin-product-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ===== Admin reward product form (modal) ===== */
.admin-reward-form {
  min-width: 0;
  display: grid;
  gap: 12px;
}

.admin-reward-form .field {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.admin-reward-form .field > span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.admin-reward-form input,
.admin-reward-form select,
.admin-reward-form textarea {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid color-mix(in oklab, var(--border) 88%, #0f766e);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(20, 163, 111, 0.045), transparent 52%), #fff;
  color: var(--foreground);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  outline: 0;
}

.admin-reward-form textarea {
  min-height: 64px;
  resize: vertical;
  line-height: 1.5;
}

.admin-reward-form input:focus-visible,
.admin-reward-form select:focus-visible,
.admin-reward-form textarea:focus-visible {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(20, 163, 111, 0.16);
}

.admin-reward-form-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-reward-cover-field .admin-file-input-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.admin-reward-cover-field .admin-file-input-row input {
  flex: 1 1 180px;
}

.admin-reward-cover-field .admin-cover-preview {
  margin-top: 8px;
  display: grid;
  place-items: center;
  min-height: 96px;
  border: 1px dashed color-mix(in oklab, var(--border) 80%, #0f766e);
  border-radius: 12px;
  background: rgba(15, 118, 110, 0.04);
  overflow: hidden;
  color: var(--muted-foreground);
  font-size: 0.78rem;
}

.admin-reward-cover-field .admin-cover-preview img {
  width: 100%;
  max-height: 180px;
  object-fit: cover;
}

.admin-reward-checkbox {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(15, 118, 110, 0.05);
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--foreground);
  cursor: pointer;
}

.admin-reward-checkbox input {
  width: 18px;
  height: 18px;
  min-height: 0;
  accent-color: var(--primary);
}

.admin-reward-badge-list {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.admin-reward-badge-option {
  display: grid;
  grid-template-columns: 20px 28px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 2px 8px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.admin-reward-badge-option:hover {
  border-color: color-mix(in oklab, var(--primary) 45%, var(--border));
  background: rgba(15, 118, 110, 0.04);
}

.admin-reward-badge-option:has(input:checked) {
  border-color: var(--primary);
  background: rgba(15, 118, 110, 0.08);
  box-shadow: 0 0 0 2px rgba(20, 163, 111, 0.18);
}

.admin-reward-badge-option input[type="checkbox"] {
  grid-row: 1 / -1;
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 0;
  accent-color: var(--primary);
}

.admin-reward-badge-emblem {
  grid-row: 1 / -1;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 8px;
}

.admin-reward-badge-emblem .credit-art {
  width: 32px;
  height: 32px;
}

.admin-reward-badge-name {
  grid-column: 3;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-reward-badge-code {
  grid-column: 3;
  font-size: 0.68rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--muted-foreground);
}

@media (max-width: 480px) {
  .admin-reward-badge-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

.admin-reward-form-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 4px;
}

@media (max-width: 560px) {
  .admin-reward-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-reward-form-foot {
    flex-direction: column-reverse;
  }

  .admin-reward-form-foot .button,
  .admin-reward-form-foot .button-secondary {
    width: 100%;
    justify-content: center;
  }
}

.admin-credit-ledger-mobile {
  display: grid;
  gap: 10px;
}

.admin-credit-ledger-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(13, 73, 55, 0.11);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(238, 250, 242, 0.96));
}

.admin-credit-ledger-card-head {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.admin-credit-ledger-card-head > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #f8fff8;
  background: linear-gradient(135deg, #0f8b61, #0d5b40);
}

.admin-credit-ledger-card-head strong,
.admin-credit-ledger-card-head small,
.admin-credit-ledger-card p {
  display: block;
  min-width: 0;
}

.admin-credit-ledger-card-head small,
.admin-credit-ledger-card p {
  color: var(--muted);
}

.admin-credit-ledger-card-head em,
.admin-credit-points {
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.admin-credit-ledger-card-head em.is-positive,
.admin-credit-points.is-positive {
  color: #07824e;
}

.admin-credit-ledger-card-head em.is-negative,
.admin-credit-points.is-negative {
  color: #b42318;
}

.admin-credit-ledger-card-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.admin-credit-ledger-card-meta > span:last-child {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.admin-credit-ledger-table-wrap {
  display: none;
}

@media (min-width: 980px) {
  .admin-credit-level-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-credit-level-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-badge-rule-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-badge-rule-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-gamification-layout {
    grid-template-columns: minmax(320px, 0.78fr) minmax(0, 1.22fr);
    align-items: start;
  }

  .admin-gamification-adjust-panel {
    position: sticky;
    top: 92px;
  }

  .admin-credit-ledger-mobile {
    display: none;
  }

  .admin-credit-ledger-table-wrap {
    display: block;
  }
}

.admin-articles-page {
  --article-ink: #10231c;
}

.admin-articles-hero {
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.18), transparent 30%),
    linear-gradient(135deg, #064e3b 0%, #0f766e 54%, #16a34a 100%);
}

.admin-article-panel,
.admin-article-form {
  overflow: hidden;
}

.admin-article-form {
  display: grid;
  gap: 14px;
}

.admin-article-filter {
  grid-template-columns: 1fr;
}

.admin-article-filter label:first-child {
  grid-column: 1 / -1;
}

.admin-article-list {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.admin-article-card {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(15, 118, 110, 0.12);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(240, 253, 244, 0.8));
  box-shadow: 0 14px 30px rgba(6, 78, 59, 0.08);
}

.admin-article-cover {
  width: 92px;
  min-height: 92px;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(135deg, #dcfce7, #ccfbf1);
  display: grid;
  place-items: center;
  color: #047857;
}

.admin-article-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-article-body {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.admin-article-meta,
.admin-article-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  color: #527064;
  font-size: 0.82rem;
}

.admin-article-meta span,
.admin-article-foot span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.admin-article-body h3 {
  margin: 0;
  color: var(--article-ink);
  font-size: 1.02rem;
  line-height: 1.28;
}

.admin-article-body p {
  margin: 0;
  color: #3d5b50;
  line-height: 1.45;
}

.admin-article-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-article-form .admin-form-grid {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.admin-article-form .admin-form-grid label {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.admin-article-form .admin-form-grid label > span {
  color: var(--muted-foreground);
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1.2;
}

.admin-article-form .admin-form-grid input,
.admin-article-form .admin-form-grid select,
.admin-article-form .admin-form-grid textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid color-mix(in oklab, var(--primary) 14%, white);
  border-radius: 13px;
  outline: 0;
  background:
    linear-gradient(135deg, rgba(20, 184, 166, 0.045), transparent 58%),
    rgba(255, 255, 255, 0.96);
  color: var(--foreground);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.admin-article-form .admin-form-grid input,
.admin-article-form .admin-form-grid select {
  min-height: 42px;
}

.admin-article-form .admin-form-grid input {
  padding: 0 11px;
}

.admin-article-form .admin-form-grid select {
  padding: 0 32px 0 11px;
}

.admin-article-form .admin-form-grid textarea {
  min-height: 96px;
  padding: 10px 11px;
  line-height: 1.48;
  resize: vertical;
}

.admin-article-form .admin-form-grid input::placeholder,
.admin-article-form .admin-form-grid textarea::placeholder {
  color: color-mix(in oklab, var(--muted-foreground) 68%, white);
}

.admin-article-form .admin-form-grid label:focus-within > span {
  color: var(--primary);
}

.admin-article-form .admin-form-grid input:focus,
.admin-article-form .admin-form-grid select:focus,
.admin-article-form .admin-form-grid textarea:focus {
  border-color: color-mix(in oklab, var(--primary) 46%, white);
  box-shadow:
    0 0 0 3px color-mix(in oklab, var(--primary) 10%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.admin-article-form .admin-form-grid input[readonly] {
  cursor: default;
  background:
    linear-gradient(135deg, rgba(15, 118, 110, 0.055), transparent 58%),
    rgba(243, 250, 246, 0.95);
  color: color-mix(in oklab, var(--foreground) 78%, var(--muted-foreground));
}

.admin-cover-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
}

.admin-cover-picker .button-secondary {
  min-height: 42px;
  white-space: nowrap;
}

.admin-cover-picker .button-secondary.ghost {
  width: 42px;
  padding: 0;
  color: #dc2626;
  background: rgba(254, 242, 242, 0.92);
  border-color: rgba(248, 113, 113, 0.22);
  box-shadow: none;
}

.admin-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  justify-content: flex-end;
  padding-top: 2px;
}

.admin-form-actions .button,
.admin-form-actions .button-secondary {
  min-height: 42px;
}

.admin-rich-editor-field,
.admin-article-taxonomy-card {
  display: grid;
  gap: 9px;
  min-width: 0;
}

.admin-rich-editor-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.admin-rich-editor-head span,
.admin-article-taxonomy-card > span {
  color: var(--foreground);
  font-size: 0.78rem;
  font-weight: 900;
}

.admin-rich-editor-head small,
.admin-article-taxonomy-card small {
  display: block;
  margin-top: 3px;
  color: var(--muted-foreground);
  font-size: 0.68rem;
  line-height: 1.35;
}

.admin-editor-badge {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  border-radius: 999px;
  background: linear-gradient(135deg, #dcfce7, #ccfbf1);
  color: #047857 !important;
  font-size: 0.68rem !important;
  white-space: nowrap;
}

.admin-rich-editor-field .mce-tinymce,
.admin-donation-editor .mce-tinymce,
.admin-role-editor-grid .mce-tinymce {
  overflow: hidden;
  width: 100% !important;
  border: 1px solid rgba(15, 118, 110, 0.18) !important;
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(6, 78, 59, 0.08);
}

.admin-rich-editor-field .mce-top-part::before,
.admin-donation-editor .mce-top-part::before,
.admin-role-editor-grid .mce-top-part::before {
  box-shadow: none;
}

.admin-rich-editor-field .mce-panel,
.admin-donation-editor .mce-panel,
.admin-role-editor-grid .mce-panel {
  border-color: rgba(15, 118, 110, 0.12) !important;
  background: #fbfefc !important;
}

.admin-rich-editor-field .mce-btn,
.admin-donation-editor .mce-btn,
.admin-role-editor-grid .mce-btn {
  border-radius: 8px;
}

.admin-rich-editor-field .mce-edit-area,
.admin-donation-editor .mce-edit-area,
.admin-role-editor-grid .mce-edit-area {
  border-color: rgba(15, 118, 110, 0.12) !important;
}

.admin-article-main-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-article-seo-grid,
.admin-article-media-grid,
.admin-article-content-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-form-span-2 {
  grid-column: 1 / -1;
}

.admin-checkbox-line {
  align-self: end;
  min-height: 44px;
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 10px !important;
  padding: 11px 12px;
  border: 1px solid rgba(15, 118, 110, 0.14);
  border-radius: 12px;
  background: rgba(240, 253, 244, 0.72);
}

.admin-checkbox-line input {
  width: auto;
}

.admin-article-form .admin-checkbox-line input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-height: 0;
  flex: 0 0 18px;
  padding: 0;
  border-radius: 5px;
  box-shadow: none;
  accent-color: var(--primary);
}

.admin-article-form .admin-checkbox-line span {
  color: var(--foreground);
  font-size: 0.76rem;
}

.admin-article-pagination {
  margin-top: 14px;
}

.admin-article-workflow-panel {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(15, 118, 110, 0.13);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(240, 253, 244, 0.92), rgba(240, 253, 250, 0.72)),
    #fff;
}

.admin-article-workflow-head,
.admin-article-workflow-actions,
.admin-article-workflow-grid,
.admin-article-revision-row {
  display: flex;
  gap: 10px;
}

.admin-article-workflow-head {
  align-items: center;
  justify-content: space-between;
}

.admin-article-workflow-head h3,
.admin-article-revision-list h3 {
  margin: 0;
  color: var(--foreground);
  font-size: 0.94rem;
  line-height: 1.25;
}

.admin-article-workflow-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.admin-article-workflow-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-article-workflow-card {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(6, 78, 59, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
}

.admin-article-workflow-card-wide {
  grid-column: 1 / -1;
}

.admin-workflow-kicker,
.admin-article-workflow-card strong,
.admin-preview-output,
.admin-article-revision-row small {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.admin-workflow-kicker {
  color: #047857;
  font-size: 0.68rem;
  font-weight: 900;
}

.admin-article-workflow-card strong {
  color: #14392e;
  font-size: 0.84rem;
  line-height: 1.3;
}

.admin-article-workflow-card strong[data-tone="success"] {
  color: #047857;
}

.admin-article-workflow-card strong[data-tone="warning"],
.admin-article-workflow-card strong[data-tone="loading"] {
  color: #b45309;
}

.admin-article-workflow-card strong[data-tone="error"] {
  color: #dc2626;
}

.admin-article-workflow-card p,
.admin-muted-note {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.72rem;
  line-height: 1.45;
}

.admin-preview-output {
  flex-wrap: wrap;
}

.admin-preview-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: #064e3b;
  color: #fff;
  font-size: 0.76rem;
  font-weight: 900;
  text-decoration: none;
}

.admin-preview-output small {
  color: var(--muted-foreground);
  font-size: 0.68rem;
}

.admin-article-revision-list {
  display: grid;
  gap: 9px;
}

.admin-article-revision-row {
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid rgba(6, 78, 59, 0.08);
}

.admin-article-revision-row .button-secondary {
  margin-left: auto;
  min-height: 30px;
  padding: 0 10px;
  font-size: 0.72rem;
}

.admin-revision-version {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #dcfce7, #ccfbf1);
  color: #047857;
  font-size: 0.72rem;
  font-weight: 900;
}

.admin-article-revision-row > div {
  min-width: 0;
  flex: 1;
}

.admin-article-revision-row strong {
  display: block;
  color: var(--foreground);
  font-size: 0.8rem;
}

.admin-article-revision-row small {
  margin-top: 2px;
  color: var(--muted-foreground);
  font-size: 0.68rem;
}

.admin-article-revision-row p {
  margin: 5px 0 0;
  color: #3d5b50;
  font-size: 0.72rem;
  line-height: 1.35;
}

@media (min-width: 760px) {
  .admin-article-filter {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
  }

  .admin-article-filter label:first-child {
    grid-column: span 2;
  }

  .admin-article-card {
    grid-template-columns: 118px minmax(0, 1fr) auto;
    align-items: center;
  }

  .admin-article-cover {
    width: 118px;
    min-height: 104px;
  }

  .admin-article-actions {
    grid-column: auto;
    justify-content: flex-end;
    min-width: 132px;
  }
}

@media (min-width: 1180px) {
  .admin-articles-page {
    max-width: 1360px !important;
  }

  .admin-article-filter {
    grid-template-columns: minmax(220px, 1.35fr) repeat(3, minmax(124px, 0.8fr)) repeat(3, minmax(104px, 0.64fr)) auto;
  }

  .admin-article-filter label:first-child {
    grid-column: auto;
  }
}

@media (max-width: 900px) {
  .admin-article-filter,
  .admin-article-main-grid,
  .admin-article-seo-grid,
  .admin-article-media-grid,
  .admin-article-content-grid,
  .admin-article-workflow-grid {
    grid-template-columns: 1fr;
  }

  .admin-article-workflow-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-article-revision-row {
    flex-wrap: wrap;
  }

  .admin-article-revision-row .button-secondary {
    margin-left: 48px;
  }

  .admin-form-span-2 {
    grid-column: auto;
  }
}

@media (max-width: 560px) {
  .admin-cover-picker {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-cover-picker .button-secondary,
  .admin-form-actions .button,
  .admin-form-actions .button-secondary {
    width: 100%;
    justify-content: center;
  }

  .admin-cover-picker .button-secondary.ghost {
    width: 100%;
  }

  .admin-form-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
}

@media (min-width: 780px) {
  .admin-income-filter {
    grid-template-columns: repeat(4, minmax(132px, 1fr)) auto;
    align-items: end;
  }

  .admin-income-layout {
    grid-template-columns: minmax(0, 1.25fr) minmax(310px, 0.75fr);
    align-items: start;
  }

  .admin-income-layout-wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-financial-filter {
    grid-template-columns: minmax(220px, 1.3fr) repeat(5, minmax(118px, 0.75fr)) auto;
    align-items: end;
  }

  .admin-financial-filter .span-2 {
    grid-column: auto;
  }

  .admin-financial-item-row {
    grid-template-columns: minmax(108px, 0.62fr) minmax(180px, 1.1fr) minmax(120px, 0.72fr) minmax(128px, 0.8fr) minmax(120px, 0.72fr) minmax(132px, 0.8fr) 42px;
    align-items: end;
  }

  .admin-financial-item-row .span-2 {
    grid-column: 2 / -2;
  }

  .admin-financial-attachment-row {
    grid-template-columns: minmax(150px, 0.9fr) minmax(220px, 1.25fr) 42px;
    align-items: end;
  }

  .admin-financial-attachment-row .span-2 {
    grid-column: auto;
  }

  .admin-financial-attachment-row label:last-of-type {
    grid-column: 1 / -2;
  }

  .admin-financial-reconciliation-row {
    grid-template-columns: minmax(145px, 0.9fr) minmax(220px, 1.2fr) minmax(120px, 0.72fr) minmax(120px, 0.72fr) minmax(130px, 0.72fr) 42px;
    align-items: end;
  }

  .admin-financial-source-picker {
    grid-column: 1 / -1;
  }

  .admin-financial-source-controls {
    grid-template-columns: minmax(180px, 0.8fr) minmax(260px, 1.3fr) auto;
    align-items: end;
  }

  .admin-financial-source-controls .span-2 {
    grid-column: auto;
  }

  .admin-financial-source-result {
    grid-template-columns: 34px minmax(0, 1fr) minmax(110px, auto);
  }

  .admin-financial-source-result-amount {
    grid-column: auto;
    justify-self: end;
  }

  .admin-financial-reconciliation-row .span-2 {
    grid-column: span 2;
  }
}

@media (min-width: 1180px) {
  .admin-financial-page {
    max-width: 1360px !important;
  }

  .admin-financial-workbench {
    grid-template-columns: minmax(370px, 0.85fr) minmax(560px, 1.15fr);
    align-items: start;
  }

  .admin-financial-list-panel,
  .admin-financial-editor-panel {
    align-self: start;
  }

  .admin-financial-report-list {
    max-height: 980px;
    overflow: auto;
    padding-right: 2px;
  }
}

@media (max-width: 680px) {
  .admin-income-filter {
    grid-template-columns: 1fr;
  }

  .admin-income-filter .button {
    width: 100%;
    justify-content: center;
  }

  .admin-income-bar-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .admin-income-bar-track {
    grid-column: 1 / -1;
    order: 3;
  }

  .admin-income-bar-row small {
    justify-self: end;
  }

  .admin-income-table {
    min-width: 560px;
  }
}

.admin-map-location-layout {
  display: grid;
  gap: 16px;
}

.admin-map-location-list {
  display: grid;
  gap: 12px;
}

.admin-map-location-card {
  border: 1px solid rgba(16, 185, 129, 0.16);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 253, 250, 0.96));
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.07);
}

.admin-map-location-card.is-active {
  border-color: rgba(16, 185, 129, 0.45);
  box-shadow: 0 18px 42px rgba(6, 95, 70, 0.14);
}

.admin-map-location-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.admin-map-location-main strong,
.admin-map-location-source-option strong {
  display: block;
  color: #0f172a;
  font-size: 0.94rem;
  line-height: 1.25;
}

.admin-map-location-main small,
.admin-map-location-source-option small {
  display: block;
  margin-top: 3px;
  color: #64748b;
  font-size: 0.76rem;
  line-height: 1.35;
}

.admin-map-location-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, #0f766e, #22c55e);
}

.admin-map-location-icon.donation_site {
  background: linear-gradient(135deg, #be123c, #f97316);
}

.admin-map-location-icon.event_area {
  background: linear-gradient(135deg, #2563eb, #14b8a6);
}

.admin-map-location-icon.cleanup_site {
  background: linear-gradient(135deg, #0284c7, #06b6d4);
}

.admin-map-location-icon.education_site {
  background: linear-gradient(135deg, #7c3aed, #f59e0b);
}

.admin-map-location-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}

.admin-map-location-actions small {
  color: #64748b;
  font-size: 0.74rem;
}

.admin-map-location-form {
  display: grid;
  gap: 16px;
}

.admin-map-location-form .admin-field-grid {
  display: grid;
  gap: 10px;
}

.admin-map-location-form .admin-reason-field,
.admin-map-location-form .admin-field-grid > label {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.admin-map-location-form .admin-reason-field > span,
.admin-map-location-form .admin-field-grid > label > span {
  overflow: hidden;
  color: var(--muted-foreground);
  font-size: 0.64rem;
  font-weight: 950;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-map-location-form input,
.admin-map-location-form select,
.admin-map-location-form textarea {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  border: 1px solid color-mix(in oklab, var(--primary) 14%, white);
  border-radius: 13px;
  outline: 0;
  background:
    linear-gradient(135deg, rgba(20, 184, 166, 0.045), transparent 58%),
    rgba(255, 255, 255, 0.96);
  color: var(--foreground);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.admin-map-location-form input,
.admin-map-location-form select {
  padding: 0 11px;
}

.admin-map-location-form textarea {
  min-height: 92px;
  padding: 10px 11px;
  line-height: 1.48;
  resize: vertical;
}

.admin-map-location-form input::placeholder,
.admin-map-location-form textarea::placeholder {
  color: color-mix(in oklab, var(--muted-foreground) 68%, white);
}

.admin-map-location-form .admin-reason-field:focus-within > span,
.admin-map-location-form .admin-field-grid > label:focus-within > span {
  color: var(--primary);
}

.admin-map-location-form input:focus,
.admin-map-location-form select:focus,
.admin-map-location-form textarea:focus {
  border-color: color-mix(in oklab, var(--primary) 46%, white);
  box-shadow:
    0 0 0 3px color-mix(in oklab, var(--primary) 10%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.admin-map-location-form .span-2 {
  grid-column: 1 / -1;
}

.admin-toggle-field {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(15, 118, 110, 0.16);
  border-radius: 14px;
  background: rgba(240, 253, 250, 0.72);
  color: #0f172a;
  font-weight: 700;
  font-size: 0.82rem;
}

.admin-toggle-field input {
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  padding: 0;
  border-radius: 5px;
  box-shadow: none;
  accent-color: #059669;
}

.admin-map-location-coordinate {
  grid-column: 1 / -1;
}

.admin-map-location-coordinate.has-location {
  border-color: color-mix(in oklab, var(--primary) 28%, white);
  background:
    linear-gradient(135deg, rgba(15, 118, 110, 0.09), rgba(14, 165, 233, 0.06)),
    rgba(255, 255, 255, 0.96);
}

.admin-map-location-coordinate .admin-event-location-copy small {
  white-space: normal;
}

.admin-map-location-source-panel {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(15, 118, 110, 0.14);
  border-radius: 16px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(240, 253, 250, 0.76), rgba(255, 255, 255, 0.94));
}

.admin-map-location-source-group {
  display: grid;
  gap: 8px;
}

.admin-map-location-source-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #0f172a;
}

.admin-map-location-source-head strong {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.86rem;
}

.admin-map-location-source-head span {
  color: #64748b;
  font-size: 0.74rem;
  font-weight: 800;
}

.admin-map-location-source-list {
  display: grid;
  gap: 8px;
  max-height: 260px;
  overflow: auto;
  padding-right: 2px;
}

.admin-map-location-source-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
}

.admin-map-location-source-option.is-selected {
  border-color: rgba(16, 185, 129, 0.42);
  background: linear-gradient(135deg, rgba(236, 253, 245, 0.98), rgba(255, 255, 255, 0.98));
}

.admin-map-location-source-option.is-assigned {
  background: rgba(255, 251, 235, 0.82);
}

.admin-map-location-source-option input {
  width: 18px;
  height: 18px;
  accent-color: #059669;
}

@media (min-width: 1180px) {
  .admin-map-location-layout {
    grid-template-columns: minmax(360px, 0.82fr) minmax(600px, 1.18fr);
    align-items: start;
  }

  .admin-map-location-list-panel,
  .admin-map-location-form-panel {
    align-self: start;
  }

  .admin-map-location-list {
    max-height: 980px;
    overflow: auto;
    padding-right: 2px;
  }
}

.organization-page {
  color: #0f172a;
}

.organization-stack {
  gap: 18px;
}

.organization-hero-card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 16px;
  border-radius: 24px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.17), transparent 34%),
    linear-gradient(150deg, transparent 0 58%, rgba(255, 255, 255, 0.08) 58% 59%, transparent 59% 100%),
    radial-gradient(circle at 86% 14%, rgba(187, 247, 208, 0.28), transparent 32%),
    var(--gradient-primary);
  box-shadow: 0 20px 48px rgba(7, 74, 49, 0.18);
}

.organization-hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.055) 0 1px, transparent 1px 18px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 54%);
  opacity: 0.72;
  pointer-events: none;
}

.organization-hero-card::after {
  content: "";
  position: absolute;
  inset: auto -60px -72px auto;
  width: 210px;
  height: 210px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  pointer-events: none;
}

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

.organization-hero-card.empty {
  min-height: 240px;
  align-content: end;
}

.organization-hero-dashboard {
  min-height: 0;
}

.organization-hero-main {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.organization-hero-main h1,
.organization-hero-card.empty h1 {
  margin: 0;
  color: #ffffff;
  font-size: 1.55rem;
  line-height: 1.12;
}

.organization-hero-main span,
.organization-hero-card.empty span {
  display: block;
  margin-top: 6px;
  color: rgba(236, 253, 245, 0.86);
  font-size: 0.88rem;
  line-height: 1.45;
}

.organization-logo-mark,
.organization-hero-orb {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 62px;
  height: 62px;
  border-radius: 18px;
  color: #065f46;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(220, 252, 231, 0.86));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.62), 0 14px 26px rgba(6, 95, 70, 0.18);
  font-weight: 900;
}

.organization-logo-mark img,
.organization-member-avatar img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.organization-hero-orb {
  width: 76px;
  height: 76px;
  font-size: 1.5rem;
}

.organization-hero-tags,
.organization-hero-actions,
.organization-hero-foot {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.organization-hero-actions {
  justify-content: flex-start;
}

.organization-edit-open {
  min-height: 42px;
  border-color: rgba(255, 255, 255, 0.3);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(220, 252, 231, 0.9));
  color: #065f46;
  box-shadow: 0 14px 28px rgba(6, 95, 70, 0.18);
}

.organization-hero-foot {
  color: rgba(236, 253, 245, 0.84);
  font-size: 0.78rem;
  font-weight: 700;
}

.organization-hero-foot span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.organization-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 30px;
  border-radius: 999px;
  padding: 6px 10px;
  color: #064e3b;
  background: linear-gradient(135deg, #d1fae5, #a7f3d0);
  font-size: 0.75rem;
  font-weight: 900;
  white-space: nowrap;
}

.organization-pill.warning {
  color: #78350f;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
}

.organization-pill.danger,
.organization-pill.muted {
  color: #334155;
  background: linear-gradient(135deg, #e2e8f0, #f8fafc);
}

.organization-pill.role.gold {
  color: #713f12;
  background: linear-gradient(135deg, #fde68a, #fef3c7);
}

.organization-pill.role.primary {
  color: #075985;
  background: linear-gradient(135deg, #bae6fd, #dbeafe);
}

.organization-metric-grid,
.organization-workspace-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.organization-metric-grid.compact .organization-metric-tile {
  min-height: 92px;
}

.organization-metric-tile,
.organization-info-item,
.organization-step,
.organization-workspace,
.organization-member-row,
.organization-linked-card,
.organization-profile-panel {
  border: 1px solid rgba(15, 118, 110, 0.12);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
}

.organization-metric-tile {
  display: grid;
  gap: 8px;
  min-height: 118px;
  border-radius: 18px;
  padding: 14px;
}

.organization-metric-tile span,
.organization-info-item > span,
.organization-step > span,
.organization-workspace > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  color: #065f46;
  background: linear-gradient(135deg, #d1fae5, #e0f2fe);
}

.organization-metric-tile strong {
  color: #0f172a;
  font-size: 1.28rem;
  line-height: 1;
}

.organization-metric-tile small,
.organization-info-item small,
.organization-step small,
.organization-workspace small,
.organization-member-row small,
.organization-linked-card small {
  color: #64748b;
  font-size: 0.76rem;
  font-weight: 750;
  line-height: 1.35;
}

.organization-profile-panel {
  display: grid;
  gap: 13px;
  border-radius: 20px;
  padding: 16px;
}

.organization-registration-panel {
  display: grid;
  gap: 14px;
  border: 1px solid rgba(15, 118, 110, 0.12);
  border-radius: 20px;
  padding: 16px;
  background:
    linear-gradient(135deg, rgba(240, 253, 244, 0.96), rgba(240, 249, 255, 0.72)),
    rgba(255, 255, 255, 0.94);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.07);
}

.organization-registration-form {
  gap: 12px;
}

.organization-registration-form textarea {
  min-height: 112px;
}

.organization-registration-actions {
  display: grid;
  gap: 10px;
}

.organization-registration-submit {
  width: 100%;
}

.organization-profile-panel .section-head strong {
  color: #047857;
  font-size: 0.95rem;
}

.organization-profile-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.organization-info-grid {
  display: grid;
  gap: 10px;
}

.organization-info-item {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 16px;
  padding: 12px;
}

.organization-info-item strong,
.organization-step strong,
.organization-workspace strong,
.organization-member-row strong,
.organization-linked-card strong {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
  color: #0f172a;
  font-size: 0.9rem;
  line-height: 1.25;
}

.organization-missing-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.organization-missing-row span,
.organization-count-pill {
  border-radius: 999px;
  padding: 6px 10px;
  color: #475569;
  background: #f1f5f9;
  font-size: 0.72rem;
  font-weight: 850;
}

.organization-step-list,
.organization-member-list,
.organization-linked-list {
  display: grid;
  gap: 10px;
}

.organization-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border-radius: 17px;
  padding: 12px;
}

.organization-step.completed > span,
.organization-step.available > span {
  color: #ffffff;
  background: linear-gradient(135deg, #059669, #14b8a6);
}

.organization-step.failed > span,
.organization-step.locked > span {
  color: #ffffff;
  background: linear-gradient(135deg, #64748b, #94a3b8);
}

.organization-workspace {
  display: grid;
  gap: 9px;
  min-height: 128px;
  border-radius: 18px;
  padding: 14px;
  text-decoration: none;
  transition: transform 160ms ease, border-color 160ms ease;
}

.organization-workspace:not(.locked):hover {
  transform: translateY(-2px);
  border-color: rgba(16, 185, 129, 0.32);
}

.organization-workspace.locked {
  opacity: 0.74;
}

.organization-partner-panel,
.organization-status-panel {
  display: grid;
  gap: 14px;
}

.organization-partner-panel {
  overflow: hidden;
  border: 1px solid rgba(15, 118, 110, 0.12);
  border-radius: 24px;
  padding: 16px;
  background:
    radial-gradient(circle at 96% 4%, rgba(251, 191, 36, 0.13), transparent 28%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(240, 253, 244, 0.78));
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.07);
}

.organization-partner-panel.locked {
  background:
    radial-gradient(circle at 94% 4%, rgba(148, 163, 184, 0.12), transparent 28%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.9));
}

.organization-partner-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
}

.organization-partner-head .section-title {
  margin: 0;
}

.organization-partner-head p:not(.eyebrow) {
  max-width: 620px;
  margin: 5px 0 0;
  color: #64748b;
  font-size: 0.86rem;
  font-weight: 720;
  line-height: 1.5;
}

.organization-partner-summary {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 8px;
}

.organization-partner-summary span {
  display: grid;
  gap: 2px;
  min-width: 84px;
  border: 1px solid rgba(15, 118, 110, 0.1);
  border-radius: 16px;
  padding: 9px 10px;
  background: rgba(255, 255, 255, 0.72);
}

.organization-partner-summary strong {
  color: #065f46;
  font-size: 1.06rem;
  line-height: 1;
}

.organization-partner-summary small,
.organization-partner-program-stats small,
.organization-partner-empty small {
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 850;
  line-height: 1.2;
}

.organization-partner-program-grid {
  display: grid;
  gap: 10px;
}

.organization-partner-program {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(15, 118, 110, 0.12);
  border-radius: 20px;
  padding: 12px;
  color: inherit;
  background: rgba(255, 255, 255, 0.86);
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.055);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.organization-partner-program:hover {
  transform: translateY(-2px);
  border-color: rgba(16, 185, 129, 0.34);
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.08);
}

.organization-partner-program-logo,
.organization-partner-lock,
.organization-partner-empty > span {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 18px;
  color: #065f46;
  background: linear-gradient(135deg, #dcfce7, #e0f2fe);
  font-size: 0.9rem;
  font-weight: 950;
}

.organization-partner-program-logo img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.organization-partner-program-main {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.organization-partner-program-top,
.organization-partner-program-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.organization-partner-program-top {
  justify-content: space-between;
}

.organization-partner-program-top > small {
  color: #047857;
  font-size: 0.76rem;
  font-weight: 950;
}

.organization-partner-program h3 {
  margin: 0;
  color: #0f172a;
  font-size: 1rem;
  line-height: 1.25;
}

.organization-partner-program p {
  margin: 0;
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.42;
}

.organization-partner-program-stats span {
  display: grid;
  gap: 2px;
  border-radius: 13px;
  padding: 7px 9px;
  background: #f8fafc;
}

.organization-partner-program-stats strong {
  color: #0f172a;
  font-size: 0.88rem;
  line-height: 1;
}

.organization-partner-program-arrow {
  color: #0f766e;
}

.organization-partner-empty {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border: 1px dashed rgba(15, 118, 110, 0.22);
  border-radius: 18px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.7);
}

.organization-partner-empty strong {
  display: block;
  color: #0f172a;
  font-size: 0.92rem;
}

.organization-step-list.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.organization-member-row,
.organization-linked-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  border-radius: 17px;
  padding: 11px;
}

.organization-member-avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  color: #0f766e;
  background: linear-gradient(135deg, #ccfbf1, #f0fdf4);
  font-size: 0.78rem;
  font-weight: 950;
}

.organization-linked-card {
  grid-template-columns: minmax(0, 1fr) auto;
}

.organization-linked-card.is-active {
  border-color: rgba(16, 185, 129, 0.32);
  background:
    linear-gradient(135deg, rgba(236, 253, 245, 0.96), rgba(240, 249, 255, 0.78)),
    rgba(255, 255, 255, 0.96);
}

.organization-linked-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.organization-switch-button,
.button-secondary.compact {
  min-height: 32px;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 900;
}

.organization-switch-button[data-loading="true"] {
  opacity: 0.72;
}

.organization-profile-dialog {
  width: min(760px, 100%);
  max-height: min(90dvh, 820px);
  overflow: auto;
  display: grid;
  gap: 13px;
  padding: 14px;
  border: 1px solid rgba(187, 247, 208, 0.5);
  border-radius: 22px;
  background:
    radial-gradient(circle at 96% 2%, rgba(34, 197, 94, 0.12), transparent 28%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(240, 253, 244, 0.96));
  box-shadow: 0 34px 96px rgba(6, 78, 59, 0.28);
}

.organization-profile-dialog-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.organization-profile-dialog-head h2 {
  margin: 0;
  color: #0f172a;
  font-size: 1.08rem;
  line-height: 1.15;
}

.organization-profile-dialog-head span {
  display: block;
  margin-top: 3px;
  color: #64748b;
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.35;
}

.organization-profile-close {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(15, 118, 110, 0.14);
  border-radius: 999px;
  background: #fff;
  color: #0f172a;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
}

.organization-profile-close:hover,
.organization-profile-close:focus-visible {
  color: #047857;
  border-color: rgba(16, 185, 129, 0.35);
}

.organization-edit-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 10px 11px;
  border: 1px solid rgba(245, 158, 11, 0.28);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(254, 243, 199, 0.72), rgba(255, 251, 235, 0.92));
  color: #78350f;
  font-size: 0.75rem;
  font-weight: 850;
  line-height: 1.4;
}

.organization-edit-note svg {
  color: #b45309;
}

.organization-profile-form-grid {
  display: grid;
  gap: 10px;
}

.organization-profile-dialog .form-field > span {
  color: #475569;
  font-size: 0.72rem;
  font-weight: 900;
}

.organization-profile-dialog .form-field input,
.organization-profile-dialog .form-field textarea {
  min-height: 44px;
  border-color: rgba(15, 118, 110, 0.16);
  background: rgba(255, 255, 255, 0.96);
  color: #0f172a;
  font-size: 0.84rem;
  font-weight: 760;
}

.organization-profile-dialog .form-field textarea {
  min-height: 108px;
}

.organization-profile-dialog-actions {
  position: sticky;
  bottom: -14px;
  display: grid;
  gap: 9px;
  margin: 0 -14px -14px;
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(15, 118, 110, 0.1);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
}

.organization-profile-dialog-actions .button,
.organization-profile-dialog-actions .button-secondary {
  min-height: 42px;
}

/* Polished organization dashboard overrides. Keep these close to the page block so future edits do not fight global card styles. */
.organization-page {
  background:
    linear-gradient(180deg, rgba(240, 253, 244, 0.78), rgba(248, 250, 252, 0) 320px),
    #f8fafc;
}

.organization-stack {
  gap: 20px;
}

.organization-hero-dashboard {
  gap: 18px;
  border: 0;
  border-radius: 30px;
  padding: clamp(22px, 4vw, 34px);
  background:
    radial-gradient(circle at 88% 8%, rgba(190, 242, 100, 0.28), transparent 28%),
    radial-gradient(circle at 8% 92%, rgba(45, 212, 191, 0.2), transparent 30%),
    linear-gradient(135deg, #052f2b 0%, #065f46 50%, #0f766e 100%);
  box-shadow: 0 30px 80px rgba(5, 95, 70, 0.24);
}

.organization-hero-dashboard::before {
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.18), transparent 34%),
    linear-gradient(90deg, rgba(236, 253, 245, 0.08) 0 1px, transparent 1px 76px),
    linear-gradient(0deg, rgba(236, 253, 245, 0.06) 0 1px, transparent 1px 76px);
  opacity: 0.9;
}

.organization-hero-dashboard::after {
  inset: auto -68px -78px auto;
  width: 240px;
  height: 240px;
  border-color: rgba(236, 253, 245, 0.18);
}

.organization-hero-dashboard .organization-hero-main {
  align-items: flex-start;
  gap: 16px;
}

.organization-hero-dashboard .organization-logo-mark {
  width: 72px;
  height: 72px;
  border: 1px solid rgba(236, 253, 245, 0.34);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(209, 250, 229, 0.88));
  box-shadow: 0 20px 44px rgba(2, 44, 34, 0.24);
  font-size: 1.02rem;
}

.organization-hero-dashboard .eyebrow {
  color: rgba(190, 242, 100, 0.92);
  font-weight: 950;
}

.organization-hero-dashboard .organization-hero-main h1 {
  max-width: 760px;
  font-size: clamp(1.85rem, 4vw, 3.05rem);
  line-height: 1.02;
}

.organization-hero-dashboard .organization-hero-main span {
  max-width: 720px;
  margin-top: 10px;
  color: rgba(240, 253, 244, 0.86);
  font-size: clamp(0.94rem, 1.8vw, 1.08rem);
  font-weight: 720;
}

.organization-hero-dashboard .organization-hero-tags {
  gap: 10px;
}

.organization-hero-dashboard .organization-pill {
  min-height: 34px;
  border: 1px solid rgba(236, 253, 245, 0.2);
  background: rgba(236, 253, 245, 0.14);
  color: #ecfdf5;
  backdrop-filter: blur(10px);
}

.organization-hero-dashboard .organization-pill.warning,
.organization-hero-dashboard .organization-pill.role.gold {
  color: #fef3c7;
  background: rgba(254, 243, 199, 0.12);
}

.organization-hero-dashboard .organization-pill.role.primary {
  color: #dbeafe;
  background: rgba(219, 234, 254, 0.13);
}

.organization-hero-dashboard .organization-edit-open {
  min-height: 46px;
  border: 1px solid rgba(236, 253, 245, 0.28);
  border-radius: 999px;
  padding-inline: 18px;
  color: #064e3b;
  background: linear-gradient(135deg, #ffffff, #dcfce7);
  box-shadow: 0 18px 38px rgba(2, 44, 34, 0.22);
}

.organization-hero-dashboard .organization-hero-foot {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: 10px;
  color: rgba(236, 253, 245, 0.86);
}

.organization-hero-dashboard .organization-hero-foot span {
  min-height: 36px;
  border: 1px solid rgba(236, 253, 245, 0.16);
  border-radius: 999px;
  padding: 8px 12px;
  background: rgba(236, 253, 245, 0.08);
}

.organization-partner-panel {
  gap: 18px;
  border: 0;
  border-radius: 28px;
  padding: clamp(18px, 3vw, 26px);
  background:
    radial-gradient(circle at 100% 0%, rgba(20, 184, 166, 0.14), transparent 26%),
    linear-gradient(135deg, #ffffff, #f0fdf4 62%, #f0f9ff);
  box-shadow: 0 22px 58px rgba(15, 23, 42, 0.085);
}

.organization-partner-head {
  align-items: stretch;
}

.organization-partner-head .section-title {
  color: #052f2b;
  font-size: clamp(1.35rem, 2.8vw, 2.05rem);
  letter-spacing: 0;
}

.organization-partner-head p:not(.eyebrow) {
  max-width: 720px;
  color: #475569;
  font-size: 0.95rem;
}

.organization-partner-summary {
  align-self: stretch;
  grid-template-columns: repeat(3, minmax(86px, 1fr));
}

.organization-partner-summary span {
  align-content: center;
  min-width: 0;
  border: 0;
  border-radius: 20px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.1);
}

.organization-partner-summary strong {
  font-size: 1.28rem;
}

.organization-partner-program-grid {
  gap: 12px;
}

.organization-partner-program {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
  border: 1px solid rgba(15, 118, 110, 0.1);
  border-radius: 24px;
  padding: 16px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.86));
  box-shadow: 0 16px 42px rgba(15, 23, 42, 0.07);
}

.organization-partner-program:hover {
  transform: translateY(-3px);
  border-color: rgba(16, 185, 129, 0.36);
  box-shadow: 0 24px 54px rgba(15, 23, 42, 0.11);
}

.organization-partner-program-logo {
  width: 68px;
  height: 68px;
  border-radius: 22px;
  background: linear-gradient(135deg, #052f2b, #0f766e);
  color: #ecfdf5;
  box-shadow: 0 18px 38px rgba(15, 118, 110, 0.22);
}

.organization-partner-program h3 {
  color: #052f2b;
  font-size: clamp(1.04rem, 2vw, 1.22rem);
}

.organization-partner-program p {
  color: #475569;
  font-size: 0.88rem;
}

.organization-partner-program-stats span {
  min-width: 88px;
  border-radius: 16px;
  padding: 9px 10px;
  background: #f0fdf4;
}

.organization-partner-program-stats strong {
  color: #065f46;
  font-size: 1rem;
}

.organization-partner-program-arrow {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  color: #065f46;
  background: #ecfdf5;
}

.organization-profile-panel,
.organization-status-panel,
.organization-switcher-panel,
.organization-page .section:not(.organization-partner-panel):not(.organization-profile-panel):not(.organization-status-panel):not(.organization-switcher-panel) {
  border-radius: 24px;
}

.organization-profile-panel,
.organization-status-panel {
  border: 1px solid rgba(15, 118, 110, 0.1);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 16px 42px rgba(15, 23, 42, 0.06);
}

.organization-metric-tile,
.organization-info-item,
.organization-step,
.organization-member-row,
.organization-linked-card {
  border-color: rgba(15, 118, 110, 0.09);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.045);
}

@media (max-width: 700px) {
  .organization-hero-dashboard .organization-hero-foot,
  .organization-partner-head,
  .organization-partner-program {
    grid-template-columns: minmax(0, 1fr);
  }

  .organization-partner-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .organization-partner-program-logo {
    width: 58px;
    height: 58px;
  }

  .organization-partner-program-arrow {
    display: none;
  }
}

@media (max-width: 430px) {
  .organization-profile-panel .section-head {
    align-items: start;
  }

  .organization-partner-head,
  .organization-partner-program {
    grid-template-columns: minmax(0, 1fr);
  }

  .organization-partner-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  .organization-partner-summary span {
    min-width: 0;
  }

  .organization-partner-program-logo,
  .organization-partner-program-arrow {
    display: none;
  }

  .organization-partner-program-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .organization-step-list.compact {
    grid-template-columns: minmax(0, 1fr);
  }

  .organization-profile-actions {
    width: 100%;
    justify-content: space-between;
  }

  .organization-member-row {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }

  .organization-member-row .organization-pill {
    grid-column: 2;
    justify-self: start;
    margin-top: -2px;
  }

  .organization-linked-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .organization-linked-actions {
    justify-content: flex-start;
  }
}

@media (min-width: 768px) {
  .organization-metric-grid,
  .organization-workspace-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .organization-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .organization-registration-actions {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .organization-profile-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .organization-profile-dialog-actions {
    grid-template-columns: auto minmax(0, 1fr);
    justify-content: end;
  }

  .organization-profile-dialog-actions .organization-profile-save {
    justify-self: end;
    min-width: 190px;
  }
}

@media (min-width: 1100px) {
  .organization-page {
    max-width: 1180px;
  }

  .organization-stack {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(340px, 0.82fr);
    align-items: start;
  }

  .organization-hero-card,
  .organization-profile-panel,
  .organization-registration-panel {
    grid-column: 1 / -1;
  }
}

.organization-workspace-page {
  color: #0f172a;
}

.page.organization-workspace-page {
  max-width: 100%;
  padding-left: 24px;
  padding-right: 24px;
}

@media (min-width: 1600px) {
  .page.organization-workspace-page {
    padding-left: 48px;
    padding-right: 48px;
  }
}

.organization-workspace-stack {
  gap: 16px;
}

.organization-workspace-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 16px;
  border-radius: 24px;
  padding: 20px;
  color: #f8fafc;
  background:
    radial-gradient(circle at 92% 12%, rgba(110, 231, 183, 0.22), transparent 28%),
    linear-gradient(135deg, #06251d 0%, #073d31 56%, #0f766e 100%);
  box-shadow: 0 22px 48px rgba(6, 37, 29, 0.22);
}

.organization-workspace-hero::after {
  content: "";
  position: absolute;
  inset: auto -82px -96px auto;
  width: 260px;
  height: 260px;
  border: 1px solid rgba(187, 247, 208, 0.18);
  border-radius: 50%;
  pointer-events: none;
}

.organization-workspace-hero.locked {
  background:
    radial-gradient(circle at 92% 12%, rgba(226, 232, 240, 0.18), transparent 28%),
    linear-gradient(135deg, #172033 0%, #26364d 100%);
}

.organization-workspace-hero.empty {
  min-height: 280px;
  align-content: end;
}

.organization-workspace-hero-main,
.organization-workspace-hero-badges,
.organization-workspace-hero-actions {
  position: relative;
  z-index: 1;
}

.organization-workspace-hero-main {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.organization-workspace-hero-main h1,
.organization-workspace-hero.empty h1 {
  margin: 0;
  color: #ffffff;
  font-size: 1.55rem;
  line-height: 1.12;
}

.organization-workspace-hero-main p,
.organization-workspace-hero.empty p {
  margin: 6px 0 0;
  color: rgba(236, 253, 245, 0.78);
  font-size: 0.88rem;
  line-height: 1.45;
}

.organization-workspace-logo,
.organization-workspace-hero-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 62px;
  height: 62px;
  border-radius: 18px;
  color: #064e3b;
  background: linear-gradient(135deg, #dcfce7, #99f6e4);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.52), 0 14px 24px rgba(16, 185, 129, 0.22);
  font-weight: 950;
}

.organization-workspace-logo img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.organization-workspace-hero-icon {
  width: 78px;
  height: 78px;
  font-size: 1.55rem;
}

.organization-workspace-hero-badges,
.organization-workspace-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.organization-workspace-switcher {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(15, 118, 110, 0.12);
  border-radius: 18px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
}

.organization-workspace-switcher strong {
  display: block;
  color: #0f172a;
  font-size: 0.94rem;
}

.organization-workspace-switcher-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.organization-workspace-switch-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  border: 1px solid rgba(15, 118, 110, 0.12);
  border-radius: 999px;
  padding: 8px 12px;
  color: #0f172a;
  background: rgba(240, 253, 244, 0.9);
  font-size: 0.76rem;
  font-weight: 850;
}

.organization-workspace-switch-chip .fa-icon {
  color: #059669;
}

.organization-workspace-switch-chip.is-active {
  color: #064e3b;
  background: linear-gradient(135deg, #d1fae5, #a7f3d0);
}

.organization-workspace-switch-chip:disabled {
  opacity: 1;
}

.organization-workspace-primary,
.organization-workspace-secondary {
  min-height: 42px;
}

.organization-workspace-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 30px;
  border-radius: 999px;
  padding: 6px 10px;
  color: #064e3b;
  background: linear-gradient(135deg, #d1fae5, #a7f3d0);
  font-size: 0.75rem;
  font-weight: 900;
  white-space: nowrap;
}

.organization-workspace-pill.warning {
  color: #78350f;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
}

.organization-workspace-pill.gold {
  color: #713f12;
  background: linear-gradient(135deg, #fde68a, #fef3c7);
}

.organization-workspace-pill.primary {
  color: #075985;
  background: linear-gradient(135deg, #bae6fd, #dbeafe);
}

.organization-workspace-pill.danger,
.organization-workspace-pill.muted {
  color: #334155;
  background: linear-gradient(135deg, #e2e8f0, #f8fafc);
}

.organization-workspace-status {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(16, 185, 129, 0.16);
  border-radius: 18px;
  padding: 13px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
}

.organization-workspace-status > span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 13px;
  color: #ffffff;
  background: linear-gradient(135deg, #059669, #14b8a6);
}

.organization-workspace-status.locked > span {
  background: linear-gradient(135deg, #64748b, #94a3b8);
}

.organization-workspace-status strong {
  display: block;
  color: #0f172a;
  font-size: 0.92rem;
}

.organization-workspace-status small {
  display: block;
  margin-top: 2px;
  color: #64748b;
  font-size: 0.76rem;
  font-weight: 750;
  line-height: 1.35;
}

.organization-workspace-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.organization-workspace-stat {
  display: grid;
  gap: 8px;
  min-height: 112px;
  border: 1px solid rgba(15, 118, 110, 0.12);
  border-radius: 18px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
}

.organization-workspace-stat > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  color: #065f46;
  background: linear-gradient(135deg, #d1fae5, #e0f2fe);
}

.organization-workspace-stat strong {
  color: #0f172a;
  font-size: 1.32rem;
  line-height: 1;
}

.organization-workspace-stat small {
  color: #64748b;
  font-size: 0.76rem;
  font-weight: 800;
}

.organization-workspace-module-panel,
.organization-workspace-board,
.organization-workspace-source-panel {
  border: 1px solid rgba(15, 118, 110, 0.12);
  border-radius: 20px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.06);
}

.organization-workspace-module-grid {
  display: grid;
  gap: 10px;
}

.organization-workspace-module {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  border: 1px solid rgba(15, 118, 110, 0.12);
  border-radius: 16px;
  padding: 12px;
  color: #0f172a;
  background: linear-gradient(135deg, rgba(240, 253, 244, 0.96), rgba(240, 249, 255, 0.78));
  text-decoration: none;
  transition: transform 160ms ease, border-color 160ms ease;
}

.organization-workspace-module:hover {
  transform: translateY(-2px);
  border-color: rgba(16, 185, 129, 0.36);
}

.organization-workspace-module.locked {
  opacity: 0.72;
}

.organization-workspace-module > span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 13px;
  color: #065f46;
  background: linear-gradient(135deg, #d1fae5, #e0f2fe);
}

.organization-workspace-module strong,
.organization-workspace-source-head h3,
.organization-workspace-source-card h3 {
  display: block;
  margin: 0;
  color: #0f172a;
  font-size: 0.92rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.organization-workspace-module small {
  color: #64748b;
  font-size: 0.74rem;
  font-weight: 800;
}

.organization-workspace-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.organization-workspace-tabs::-webkit-scrollbar {
  display: none;
}

.organization-workspace-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 7px;
  min-height: 40px;
  border: 1px solid rgba(15, 118, 110, 0.12);
  border-radius: 999px;
  padding: 8px 12px;
  color: #475569;
  background: #f8fafc;
  font-size: 0.78rem;
  font-weight: 900;
  cursor: pointer;
}

.organization-workspace-tab.is-active {
  color: #ffffff;
  border-color: rgba(5, 150, 105, 0.1);
  background: linear-gradient(135deg, #047857, #0f766e);
  box-shadow: 0 12px 24px rgba(5, 150, 105, 0.18);
}

.organization-workspace-overview,
.organization-workspace-source-stack {
  display: grid;
  gap: 12px;
}

.organization-workspace-health-card {
  display: grid;
  gap: 14px;
  border-radius: 18px;
  padding: 16px;
  color: #f8fafc;
  background:
    radial-gradient(circle at 92% 18%, rgba(110, 231, 183, 0.2), transparent 30%),
    linear-gradient(135deg, #073d31 0%, #0f766e 100%);
}

.organization-workspace-health-card h2 {
  margin: 0;
  color: #ffffff;
  font-size: 1.25rem;
}

.organization-workspace-health-card span,
.organization-workspace-health-card .split-line {
  color: rgba(236, 253, 245, 0.78);
}

.organization-workspace-health-meter .progress {
  background: rgba(255, 255, 255, 0.18);
}

.organization-workspace-health-meter .progress span {
  background: linear-gradient(90deg, #a7f3d0, #fde68a);
}

.organization-workspace-detail-stack {
  grid-template-columns: 1fr;
}

.organization-workspace-detail-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  gap: 14px 24px;
  align-items: center;
  border-radius: 24px;
  padding: 22px 28px;
  color: #f8fafc;
  background:
    radial-gradient(circle at 94% 6%, rgba(251, 191, 36, 0.14), transparent 32%),
    linear-gradient(135deg, #05251f 0%, #073d31 58%, #0f766e 100%);
  box-shadow: 0 22px 48px rgba(6, 37, 29, 0.2);
}

.organization-workspace-detail-hero .organization-workspace-back-link {
  grid-column: 1 / -1;
  grid-row: 1;
}

.organization-workspace-detail-hero .organization-workspace-detail-main {
  grid-column: 1;
  grid-row: 2;
}

.organization-workspace-detail-hero .organization-workspace-hero-badges {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-self: end;
}

@media (max-width: 720px) {
  .organization-workspace-detail-hero {
    grid-template-columns: minmax(0, 1fr);
    padding: 18px;
  }

  .organization-workspace-detail-hero .organization-workspace-hero-badges {
    grid-column: 1;
    grid-row: 3;
    justify-self: start;
  }
}

.organization-workspace-detail-main {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.organization-workspace-detail-main h1 {
  margin: 0;
  color: #ffffff;
  font-size: 1.45rem;
  line-height: 1.12;
}

.organization-workspace-detail-main p {
  margin: 6px 0 0;
  color: rgba(236, 253, 245, 0.78);
  font-size: 0.84rem;
  line-height: 1.45;
}

.organization-workspace-back-link {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 7px;
  color: #047857;
  font-size: 0.76rem;
  font-weight: 900;
  text-decoration: none;
}

.organization-workspace-detail-hero .organization-workspace-back-link {
  color: rgba(236, 253, 245, 0.86);
}

.organization-workspace-detail-grid {
  display: grid;
  gap: 12px;
}

.organization-workspace-detail-card {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(15, 118, 110, 0.12);
  border-radius: 18px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
}

.organization-workspace-detail-card-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.organization-workspace-detail-card-head > span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 13px;
  color: #ffffff;
  background: linear-gradient(135deg, #047857, #14b8a6);
}

.organization-workspace-detail-card h2,
.organization-workspace-detail-copy h2 {
  margin: 0;
  color: #0f172a;
  font-size: 1rem;
  line-height: 1.2;
}

.organization-workspace-detail-card .split-line {
  color: #64748b;
  font-size: 0.78rem;
}

.organization-workspace-detail-note {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 13px;
  padding: 9px 10px;
  color: #065f46;
  background: #ecfdf5;
  font-size: 0.74rem;
  font-weight: 850;
  line-height: 1.28;
}

/* ===== Partner workspace 2-column layout ===== */
/* ===== Partner workspace full-width sections ===== */
.organization-workspace-partner-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.organization-workspace-partner-overview > .organization-workspace-detail-card {
  padding: 24px 26px;
  gap: 14px;
  border-radius: 22px;
  min-height: 320px;
  display: flex;
  flex-direction: column;
}

.organization-workspace-partner-overview .organization-workspace-detail-card-head {
  gap: 14px;
  margin-bottom: 4px;
}

.organization-workspace-partner-overview .organization-workspace-detail-card-head > span {
  width: 56px;
  height: 56px;
  border-radius: 16px;
}

.organization-workspace-partner-overview .organization-workspace-detail-card-head > span .fa-icon {
  width: 24px;
  height: 24px;
}

.organization-workspace-partner-overview .organization-workspace-detail-card-head h2 {
  font-size: 1.7rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.organization-workspace-partner-overview .organization-workspace-detail-card-head .eyebrow {
  font-size: 0.74rem;
  letter-spacing: 0.08em;
}

.organization-workspace-partner-overview .organization-workspace-detail-card-head small {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 0.82rem;
  font-weight: 700;
}

.organization-workspace-partner-overview .split-line {
  font-size: 0.88rem;
  padding: 6px 0;
}

.organization-workspace-partner-overview .split-line strong {
  font-size: 0.95rem;
  font-weight: 900;
}

.organization-workspace-debt-card .organization-workspace-detail-card-head h2 {
  font-size: 1.85rem !important;
  color: #b45309;
}

.organization-workspace-debt-card form {
  margin-top: auto;
}

.organization-workspace-debt-card .organization-workspace-action-submit {
  min-height: 46px;
  font-size: 0.95rem;
  font-weight: 900;
  width: 100%;
  justify-content: center;
}

.organization-workspace-partner-content {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 20px;
  align-items: start;
}

.organization-workspace-partner-lists {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.organization-workspace-content-card {
  padding: 22px 24px;
}

.organization-workspace-content-copy {
  margin: 8px 0 0;
  color: #475569;
  font-size: 0.92rem;
  line-height: 1.6;
  white-space: pre-line;
}

.organization-workspace-debt-card .organization-workspace-detail-card-head h2 {
  font-size: 1.55rem;
  color: #b45309;
  letter-spacing: -0.01em;
}

.organization-workspace-api-card {
  margin-top: 4px;
}

.organization-workspace-api-card[open] {
  padding-bottom: 22px;
}

.organization-workspace-api-card summary {
  cursor: pointer;
  list-style: none;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
}

.organization-workspace-api-card summary::-webkit-details-marker {
  display: none;
}

.organization-workspace-api-card summary > span:first-child {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, #0284c7, #0ea5e9);
}

@media (max-width: 1100px) {
  .organization-workspace-partner-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .organization-workspace-partner-content {
    grid-template-columns: minmax(0, 1fr);
  }

  .organization-workspace-partner-lists {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .organization-workspace-partner-overview {
    grid-template-columns: minmax(0, 1fr);
  }
}

.organization-workspace-partner-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(380px, 1fr);
  gap: 24px;
  align-items: start;
}

.organization-workspace-partner-main {
  display: grid;
  gap: 22px;
  min-width: 0;
}

.organization-workspace-partner-sidebar {
  display: grid;
  gap: 18px;
  position: sticky;
  top: 92px;
}

.organization-workspace-partner-sidebar .organization-workspace-action-card {
  padding: 20px 22px;
  gap: 16px;
  border-radius: 22px;
}

.organization-workspace-partner-sidebar .organization-workspace-action-card-head {
  gap: 14px;
}

.organization-workspace-partner-sidebar .organization-workspace-action-card-head > span {
  width: 52px;
  height: 52px;
  border-radius: 16px;
}

.organization-workspace-partner-sidebar .organization-workspace-action-card-head > span .fa-icon {
  width: 22px;
  height: 22px;
}

.organization-workspace-partner-sidebar .organization-workspace-action-card-head .eyebrow {
  font-size: 0.74rem;
  letter-spacing: 0.08em;
}

.organization-workspace-partner-sidebar .organization-workspace-action-card-head h2 {
  font-size: 1.18rem;
  font-weight: 900;
}

.organization-workspace-partner-sidebar .organization-workspace-action-card.debt .organization-workspace-action-card-head h2 {
  color: #b45309;
  font-size: 1.7rem;
  letter-spacing: -0.01em;
}

.organization-workspace-partner-sidebar .organization-workspace-action-card-head small {
  font-size: 0.84rem;
  line-height: 1.5;
}

.organization-workspace-partner-sidebar .organization-workspace-form-grid label {
  gap: 6px;
}

.organization-workspace-partner-sidebar .organization-workspace-form-grid label span {
  font-size: 0.78rem;
  font-weight: 850;
  color: #475569;
}

.organization-workspace-partner-sidebar .organization-workspace-form-grid input,
.organization-workspace-partner-sidebar .organization-workspace-form-grid select {
  min-height: 44px;
  font-size: 0.95rem;
  padding: 10px 12px;
}

.organization-workspace-partner-sidebar .organization-workspace-action-submit {
  min-height: 44px;
  font-size: 0.92rem;
  font-weight: 900;
  padding: 0 20px;
}

.organization-workspace-partner-sidebar .organization-workspace-form-foot {
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.organization-workspace-partner-sidebar .organization-workspace-form-foot span {
  font-size: 0.8rem;
  flex: 1 1 auto;
  min-width: 0;
}

.organization-workspace-partner-sidebar .organization-workspace-debt-meter {
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.18);
}

.organization-workspace-partner-sidebar .organization-workspace-debt-list {
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(15, 118, 110, 0.1);
}

.organization-workspace-partner-sidebar details.organization-workspace-action-card {
  border: 1px solid rgba(14, 165, 233, 0.12);
}

.organization-workspace-partner-sidebar details.organization-workspace-action-card[open] {
  border-color: rgba(14, 165, 233, 0.25);
}

.organization-workspace-partner-sidebar details.organization-workspace-action-card summary {
  cursor: pointer;
  list-style: none;
}

.organization-workspace-partner-sidebar details.organization-workspace-action-card summary::-webkit-details-marker {
  display: none;
}

.organization-workspace-api-toggle {
  margin-left: auto;
  transition: transform 0.2s;
}

.organization-workspace-api-toggle .fa-icon {
  width: 16px;
  height: 16px;
}

details.organization-workspace-action-card[open] .organization-workspace-api-toggle {
  transform: rotate(180deg);
}

@media (max-width: 1100px) {
  .organization-workspace-partner-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .organization-workspace-partner-sidebar {
    position: static;
  }
}

.organization-workspace-partner-actions {
  display: grid;
  gap: 12px;
}

.organization-workspace-action-card {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(15, 118, 110, 0.12);
  border-radius: 18px;
  padding: 14px;
  background:
    radial-gradient(circle at 96% 2%, rgba(251, 191, 36, 0.1), transparent 28%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(240, 253, 244, 0.76));
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.06);
}

.organization-workspace-action-card.api {
  background:
    radial-gradient(circle at 92% 4%, rgba(14, 165, 233, 0.12), transparent 28%),
    linear-gradient(135deg, #ffffff, #f0f9ff);
}

.organization-workspace-action-card.debt {
  background:
    radial-gradient(circle at 92% 8%, rgba(245, 158, 11, 0.12), transparent 30%),
    linear-gradient(135deg, #ffffff, #fffbeb);
}

.organization-workspace-action-card-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 11px;
}

.organization-workspace-action-card-head > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  color: #ffffff;
  background: linear-gradient(135deg, #047857, #14b8a6);
  box-shadow: 0 12px 24px rgba(5, 150, 105, 0.14);
}

.organization-workspace-action-card h2 {
  margin: 0;
  color: #0f172a;
  font-size: 1rem;
  line-height: 1.2;
}

.organization-workspace-action-card small,
.organization-workspace-form-foot span,
.organization-workspace-api-box span {
  color: #64748b;
  font-size: 0.74rem;
  font-weight: 820;
  line-height: 1.35;
}

.organization-workspace-inline-form {
  display: grid;
  gap: 10px;
}

.organization-workspace-form-grid {
  display: grid;
  gap: 9px;
}

.organization-workspace-form-grid label,
.organization-workspace-api-result label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.organization-workspace-form-grid label span,
.organization-workspace-api-result label span {
  color: #64748b;
  font-size: 0.65rem;
  font-weight: 950;
}

.organization-workspace-form-grid input {
  min-width: 0;
  min-height: 40px;
  border: 1px solid rgba(15, 118, 110, 0.14);
  border-radius: 12px;
  padding: 9px 11px;
  color: #0f172a;
  background: rgba(255, 255, 255, 0.96);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  outline: 0;
}

.organization-workspace-form-grid input:focus {
  border-color: rgba(5, 150, 105, 0.36);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.11);
}

.organization-workspace-form-grid input:disabled {
  color: #94a3b8;
  background: #f1f5f9;
}

.organization-workspace-form-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.organization-workspace-action-submit {
  min-width: 132px;
}

.organization-workspace-block-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(217, 119, 6, 0.14);
  border-radius: 14px;
  padding: 10px;
  color: #92400e;
  background: #fffbeb;
  font-size: 0.76rem;
  font-weight: 850;
}

.organization-workspace-api-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(14, 165, 233, 0.14);
  border-radius: 14px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.8);
}

.organization-workspace-api-box code,
.organization-workspace-api-result code {
  display: block;
  max-width: 100%;
  overflow: hidden;
  border-radius: 10px;
  padding: 8px 9px;
  color: #0f172a;
  background: #f8fafc;
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.organization-workspace-api-state {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.organization-workspace-debt-meter {
  display: grid;
  gap: 7px;
}

.organization-workspace-debt-list {
  display: grid;
  gap: 8px;
  border-top: 1px solid rgba(15, 118, 110, 0.1);
  padding-top: 10px;
}

.organization-workspace-debt-list > strong {
  color: #0f172a;
  font-size: 0.78rem;
  font-weight: 950;
}

.organization-workspace-debt-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(15, 118, 110, 0.1);
  border-radius: 13px;
  padding: 9px;
  background: rgba(255, 255, 255, 0.78);
}

.organization-workspace-debt-row > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.organization-workspace-debt-row b {
  color: #0f172a;
  font-size: 0.78rem;
  line-height: 1.2;
}

.organization-workspace-debt-row small {
  color: #64748b;
  font-size: 0.68rem;
}

.organization-workspace-debt-row em {
  color: #92400e;
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 950;
}

.organization-workspace-debt-row.credit em {
  color: #047857;
}

.organization-workspace-debt-actions {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.organization-workspace-debt-actions .button-secondary {
  min-height: 30px;
  padding: 6px 9px;
  font-size: 0.68rem;
}

.organization-workspace-result-code {
  display: grid;
  gap: 10px;
  border-radius: 18px;
  padding: 14px;
  color: #ffffff;
  background: linear-gradient(135deg, #05251f, #0f766e);
}

.organization-workspace-result-code span {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 1.12rem;
  font-weight: 950;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.organization-workspace-result-grid,
.organization-workspace-bank-lines {
  display: grid;
  gap: 8px;
}

.organization-workspace-result-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.organization-workspace-result-grid > div,
.organization-workspace-bank-lines > div {
  display: grid;
  gap: 4px;
  border-radius: 13px;
  padding: 10px;
  background: #f8fafc;
}

.organization-workspace-result-grid small,
.organization-workspace-bank-lines span {
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 900;
}

.organization-workspace-result-grid strong,
.organization-workspace-bank-lines strong {
  min-width: 0;
  color: #0f172a;
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.organization-workspace-api-result {
  display: grid;
  gap: 10px;
}

.organization-workspace-qr-result {
  display: grid;
  place-items: center;
  border-radius: 18px;
  padding: 14px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.1);
}

.organization-workspace-qr-result.inactive {
  opacity: 0.58;
}

.organization-workspace-qr-result img {
  width: min(320px, 88vw);
  height: auto;
  image-rendering: crisp-edges;
}

.organization-workspace-detail-copy {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
}

.organization-workspace-detail-copy p {
  margin: 0;
  max-width: 760px;
  color: #64748b;
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.45;
}

.organization-workspace-operations-panel {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(15, 118, 110, 0.12);
  border-radius: 18px;
  padding: 14px;
  background:
    radial-gradient(circle at 96% 0%, rgba(251, 191, 36, 0.12), transparent 30%),
    linear-gradient(135deg, rgba(236, 253, 245, 0.96), rgba(240, 249, 255, 0.9));
}

.organization-workspace-operations-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.organization-workspace-operations-main > span,
.organization-workspace-mini-metric > span,
.organization-workspace-operation-icon {
  display: grid;
  place-items: center;
  color: #ffffff;
  background: linear-gradient(135deg, #047857, #14b8a6);
}

.organization-workspace-operations-main > span {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  box-shadow: 0 12px 24px rgba(5, 150, 105, 0.16);
}

.organization-workspace-operations-main h3 {
  margin: 0;
  color: #0f172a;
  font-size: 1.06rem;
  line-height: 1.18;
}

.organization-workspace-operations-main small {
  display: block;
  margin-top: 3px;
  color: #64748b;
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.35;
}

.organization-workspace-operations-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.organization-workspace-mini-metric {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(15, 118, 110, 0.1);
  border-radius: 14px;
  padding: 9px;
  background: rgba(255, 255, 255, 0.76);
}

.organization-workspace-mini-metric > span {
  grid-row: span 2;
  width: 30px;
  height: 30px;
  border-radius: 10px;
}

.organization-workspace-mini-metric strong {
  color: #0f172a;
  font-size: 0.94rem;
  line-height: 1;
}

.organization-workspace-mini-metric small {
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 850;
  line-height: 1.12;
}

.organization-workspace-operations-progress .progress {
  background: rgba(15, 118, 110, 0.12);
}

.organization-workspace-source-panel {
  display: grid;
  gap: 12px;
  padding: 12px;
  box-shadow: none;
}

.organization-workspace-source-panel.compact {
  border-radius: 18px;
}

.organization-workspace-source-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.organization-workspace-source-head span {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 6px 10px;
  color: #475569;
  background: #f1f5f9;
  font-size: 0.72rem;
  font-weight: 850;
}

.organization-workspace-source-filter {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(15, 118, 110, 0.1);
  border-radius: 16px;
  padding: 10px;
  background: linear-gradient(135deg, rgba(248, 250, 252, 0.96), rgba(240, 253, 244, 0.72));
}

.organization-workspace-source-filter label {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.organization-workspace-source-filter label span {
  color: #64748b;
  font-size: 0.64rem;
  font-weight: 900;
}

.organization-workspace-source-filter input,
.organization-workspace-source-filter select {
  min-width: 0;
  min-height: 38px;
  border: 1px solid rgba(15, 118, 110, 0.14);
  border-radius: 12px;
  padding: 8px 10px;
  outline: 0;
  background: rgba(255, 255, 255, 0.96);
  color: #0f172a;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 780;
}

.organization-workspace-source-filter input:focus,
.organization-workspace-source-filter select:focus {
  border-color: rgba(5, 150, 105, 0.36);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.11);
}

.organization-workspace-source-filter .button-secondary {
  min-height: 38px;
  border-radius: 12px;
}

.organization-workspace-source-grid {
  display: grid;
  gap: 10px;
}

.organization-workspace-source-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid rgba(15, 118, 110, 0.1);
  padding-top: 10px;
}

.organization-workspace-source-pagination span {
  color: #64748b;
  font-size: 0.74rem;
  font-weight: 900;
}

.organization-workspace-source-pagination .button-secondary {
  min-height: 36px;
  border-radius: 999px;
  padding-inline: 12px;
  font-size: 0.74rem;
}

.organization-workspace-source-card {
  overflow: hidden;
  display: grid;
  border: 1px solid rgba(15, 118, 110, 0.12);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
}

.organization-workspace-source-card.operation {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: stretch;
  padding: 12px;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(14, 165, 233, 0.14)) border-box;
}

.organization-workspace-operation-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  align-self: start;
}

.organization-workspace-operation-icon.warning {
  background: linear-gradient(135deg, #d97706, #f59e0b);
}

.organization-workspace-operation-icon.success {
  background: linear-gradient(135deg, #047857, #10b981);
}

.organization-workspace-operation-icon.danger {
  background: linear-gradient(135deg, #be123c, #f97316);
}

.organization-workspace-operation-icon.muted {
  background: linear-gradient(135deg, #64748b, #94a3b8);
}

.organization-workspace-card-media {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  color: #065f46;
  background: linear-gradient(135deg, #dcfce7, #e0f2fe);
}

.organization-workspace-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.organization-workspace-card-media.placeholder {
  font-size: 1.4rem;
}

.organization-workspace-card-body {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.organization-workspace-source-card.operation .organization-workspace-card-body {
  min-width: 0;
  padding: 0 0 0 12px;
}

.organization-workspace-card-body p {
  display: -webkit-box;
  margin: 0;
  min-height: 2.7em;
  overflow: hidden;
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.35;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.organization-workspace-card-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.organization-workspace-card-stats > span {
  display: grid;
  gap: 3px;
  min-width: 0;
  border-radius: 12px;
  padding: 8px;
  color: #475569;
  background: #f8fafc;
}

.organization-workspace-card-stats .fa-icon {
  color: #0f766e;
}

.organization-workspace-card-stats strong {
  min-width: 0;
  color: #0f172a;
  font-size: 0.78rem;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.organization-workspace-card-stats small {
  color: #64748b;
  font-size: 0.64rem;
  font-weight: 850;
}

.organization-workspace-card-foot,
.organization-workspace-report-money {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #64748b;
  font-size: 0.74rem;
  font-weight: 800;
}

.organization-workspace-card-foot span,
.organization-workspace-card-foot a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.organization-workspace-card-foot a {
  flex: 0 0 auto;
  color: #047857;
  text-decoration: none;
  font-weight: 950;
}

.organization-workspace-card-actions {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.organization-workspace-dispute-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  border: 1px solid rgba(217, 119, 6, 0.18);
  border-radius: 999px;
  padding: 7px 10px;
  color: #92400e;
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
  font-size: 0.72rem;
  font-weight: 950;
  cursor: pointer;
}

.organization-workspace-dispute-button:disabled {
  cursor: wait;
  opacity: 0.62;
}

.organization-workspace-thread-button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(14, 165, 233, 0.18);
  border-radius: 999px;
  padding: 7px 11px;
  color: #075985;
  background: linear-gradient(135deg, rgba(240, 249, 255, 0.96), rgba(236, 253, 245, 0.88));
  font-size: 0.68rem;
  font-weight: 950;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(14, 165, 233, 0.08);
}

.organization-workspace-thread-button:hover {
  border-color: rgba(14, 165, 233, 0.32);
  color: #0369a1;
  box-shadow: 0 14px 28px rgba(14, 165, 233, 0.14);
}

.organization-workspace-dispute-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  border: 1px solid rgba(251, 146, 60, 0.18);
  border-radius: 13px;
  padding: 9px 10px;
  color: #92400e;
  background: linear-gradient(135deg, #fff7ed, #fffbeb);
  font-size: 0.73rem;
  font-weight: 850;
  line-height: 1.35;
}

.organization-workspace-dispute-note .fa-icon {
  margin-top: 1px;
}

.organization-workspace-report-money {
  align-items: stretch;
}

.organization-workspace-report-money span {
  flex: 1;
  border-radius: 12px;
  padding: 8px;
  color: #0f172a;
  background: #f8fafc;
}

.organization-workspace-source-card .tag.success {
  color: #065f46;
  background: #d1fae5;
}

.organization-workspace-source-card .tag.warning {
  color: #92400e;
  background: #fef3c7;
}

.organization-workspace-source-card .tag.danger {
  color: #9f1239;
  background: #ffe4e6;
}

.organization-workspace-source-card .tag.muted {
  color: #475569;
  background: #f1f5f9;
}

.organization-workspace-action-modal {
  position: fixed;
  inset: 0;
  z-index: 1010;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 14px;
  background: rgba(6, 37, 29, 0.5);
  backdrop-filter: blur(12px);
}

.organization-workspace-action-modal[data-open="true"] {
  display: flex;
}

.organization-workspace-action-dialog {
  width: min(560px, 100%);
  max-height: min(88vh, 740px);
  overflow: auto;
  display: grid;
  gap: 12px;
  border: 1px solid rgba(20, 184, 166, 0.18);
  border-radius: 22px;
  padding: 14px;
  background:
    radial-gradient(circle at 94% 8%, rgba(251, 191, 36, 0.12), transparent 30%),
    linear-gradient(135deg, #ffffff, #f8fafc);
  box-shadow: 0 28px 80px rgba(6, 37, 29, 0.24);
}

.organization-workspace-action-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.organization-workspace-action-head h2 {
  margin: 2px 0 0;
  color: #0f172a;
  font-size: 1.08rem;
  line-height: 1.2;
}

.organization-workspace-action-head span {
  display: inline-flex;
  margin-top: 5px;
  color: #64748b;
  font-size: 0.76rem;
  font-weight: 850;
}

.organization-workspace-dispute-copy {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  border-radius: 16px;
  padding: 11px;
  color: #065f46;
  background: linear-gradient(135deg, #ecfdf5, #f0fdfa);
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1.4;
}

.organization-workspace-dispute-copy p {
  margin: 0;
}

.organization-workspace-action-grid {
  display: grid;
  gap: 10px;
}

.organization-workspace-action-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.organization-workspace-action-submit {
  min-width: 150px;
}

.organization-workspace-thread-dialog {
  width: min(620px, 100%);
  gap: 12px;
}

.organization-workspace-thread-list {
  max-height: min(42vh, 340px);
  overflow: auto;
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid rgba(15, 118, 110, 0.1);
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.72);
}

.organization-workspace-thread-comment {
  display: grid;
  gap: 7px;
  padding: 11px;
  border: 1px solid rgba(15, 118, 110, 0.1);
  border-left: 4px solid #14b8a6;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
}

.organization-workspace-thread-comment.admin {
  border-left-color: #10b981;
  background: linear-gradient(135deg, rgba(236, 253, 245, 0.94), rgba(255, 255, 255, 0.92));
}

.organization-workspace-thread-comment.organization {
  border-left-color: #0ea5e9;
  background: linear-gradient(135deg, rgba(240, 249, 255, 0.94), rgba(255, 255, 255, 0.92));
}

.organization-workspace-thread-comment > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.organization-workspace-thread-comment strong,
.organization-workspace-thread-comment span {
  min-width: 0;
  overflow: hidden;
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.organization-workspace-thread-comment strong {
  color: #0f172a;
  font-size: 0.78rem;
  font-weight: 950;
}

.organization-workspace-thread-comment span {
  color: #64748b;
  font-size: 0.64rem;
  font-weight: 850;
}

.organization-workspace-thread-comment p {
  margin: 0;
  color: #0f172a;
  font-size: 0.76rem;
  font-weight: 720;
  line-height: 1.5;
  white-space: pre-wrap;
}

.organization-workspace-thread-form {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(15, 118, 110, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.86);
}

.organization-workspace-report-logo .fa-icon {
  width: 22px;
  height: 22px;
  font-size: 1.15rem;
}

.organization-workspace-report-context {
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.06);
}

.organization-workspace-report-context-grid {
  display: grid;
  gap: 8px;
}

.organization-workspace-report-context-grid:empty {
  display: none;
}

.organization-workspace-report-context .split-line {
  align-items: start;
  gap: 10px;
  border-radius: 14px;
  padding: 10px 12px;
  background: #f8fafc;
}

.organization-workspace-report-context .split-line strong {
  max-width: 100%;
  color: #0f172a;
  font-size: 0.78rem;
  text-align: right;
  overflow-wrap: anywhere;
}

.organization-workspace-report-detail-panel {
  min-width: 0;
}

.organization-workspace-report-detail-panel .transparency-detail-card {
  border-color: rgba(15, 118, 110, 0.14);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.07);
}

.organization-workspace-report-detail-panel .transparency-detail-cover {
  min-height: 190px;
}

.organization-workspace-report-detail-panel .transparency-detail-cover img {
  height: 210px;
}

@media (min-width: 720px) {
  .organization-workspace-stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .organization-workspace-operations-panel {
    grid-template-columns: minmax(0, 0.95fr) minmax(320px, 1.05fr);
    align-items: center;
  }

  .organization-workspace-operations-progress {
    grid-column: 1 / -1;
  }

  .organization-workspace-operations-metrics {
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  }

  .organization-workspace-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .organization-workspace-partner-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .organization-workspace-action-card.debt {
    grid-column: 1 / -1;
  }

  .organization-workspace-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .organization-workspace-form-grid.compact {
    grid-template-columns: minmax(0, 1fr);
  }

  .organization-workspace-module-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .organization-workspace-source-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .organization-workspace-source-filter {
    grid-template-columns: minmax(0, 1.4fr) minmax(160px, 0.7fr) auto;
    align-items: end;
  }

  .organization-workspace-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .organization-workspace-report-context-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .organization-workspace-page {
    max-width: 1180px;
  }

  .organization-workspace-stack {
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
    align-items: start;
  }

  .organization-workspace-hero,
  .organization-workspace-status,
  .organization-workspace-summary,
  .organization-workspace-board {
    grid-column: 1 / -1;
  }

  .organization-workspace-module-panel {
    grid-column: 1 / -1;
  }

  .organization-workspace-module-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .organization-workspace-source-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .organization-workspace-partner-actions {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(320px, 0.9fr);
  }

  .organization-workspace-action-card.debt {
    grid-column: auto;
  }

  .organization-workspace-report-stack {
    grid-template-columns: minmax(0, 1fr);
  }

  .organization-workspace-report-stack > * {
    grid-column: 1 / -1;
  }

  .organization-workspace-report-detail-panel .transparency-detail-cover img {
    height: 260px;
  }
}

/* Organization partner campaign detail */
.page.organization-workspace-partner-page-shell {
  max-width: 1280px;
}

.organization-workspace-detail-stack.organization-workspace-stack {
  grid-template-columns: minmax(0, 1fr);
}

.organization-workspace-partner-page > * {
  grid-column: 1 / -1;
}

.organization-workspace-partner-page {
  gap: 18px;
}

.organization-workspace-partner-hero {
  min-height: 220px;
  padding: 24px;
}

.organization-workspace-partner-hero .organization-workspace-logo {
  width: 72px;
  height: 72px;
  border-radius: 20px;
}

.organization-workspace-partner-hero .organization-workspace-detail-main h1 {
  max-width: 820px;
  font-size: clamp(1.55rem, 2.8vw, 2.35rem);
  letter-spacing: 0;
}

.organization-workspace-partner-hero .organization-workspace-detail-main p:not(.eyebrow) {
  max-width: 720px;
  font-size: 0.95rem;
}

.organization-workspace-partner-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.organization-workspace-partner-kpi {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
  border: 1px solid rgba(15, 118, 110, 0.12);
  border-radius: 18px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.055);
}

.organization-workspace-partner-kpi > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  color: #ffffff;
  background: linear-gradient(135deg, #047857, #14b8a6);
}

.organization-workspace-partner-kpi.sky > span {
  background: linear-gradient(135deg, #0369a1, #0ea5e9);
}

.organization-workspace-partner-kpi.amber > span {
  background: linear-gradient(135deg, #b45309, #f59e0b);
}

.organization-workspace-partner-kpi.slate > span {
  background: linear-gradient(135deg, #334155, #64748b);
}

.organization-workspace-partner-kpi div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.organization-workspace-partner-kpi strong {
  min-width: 0;
  color: #0f172a;
  font-size: 1.12rem;
  font-weight: 950;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.organization-workspace-partner-kpi small {
  color: #334155;
  font-size: 0.78rem;
  font-weight: 900;
}

.organization-workspace-partner-kpi em {
  color: #64748b;
  font-size: 0.73rem;
  font-style: normal;
  font-weight: 750;
  line-height: 1.25;
}

.organization-workspace-partner-page .organization-workspace-partner-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(340px, 0.72fr);
  gap: 18px;
  align-items: start;
}

.organization-workspace-partner-page .organization-workspace-partner-main,
.organization-workspace-partner-page .organization-workspace-partner-sidebar {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.organization-workspace-partner-page .organization-workspace-partner-sidebar {
  position: sticky;
  top: 88px;
}

.organization-workspace-partner-page .organization-workspace-partner-overview {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.organization-workspace-partner-page .organization-workspace-partner-overview > .organization-workspace-detail-card {
  min-height: 0;
  padding: 18px;
  border-radius: 20px;
}

.organization-workspace-summary-card {
  align-content: start;
}

.organization-workspace-summary-card .organization-workspace-detail-card-head {
  align-items: start;
}

.organization-workspace-summary-card .organization-workspace-detail-card-head h2 {
  font-size: 1.45rem;
}

.organization-workspace-summary-card .organization-workspace-detail-card-head small {
  display: block;
  margin-top: 3px;
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 750;
}

.organization-workspace-summary-lines {
  display: grid;
  gap: 4px;
}

.organization-workspace-program-card {
  padding: 20px;
  border-radius: 20px;
}

.organization-workspace-partner-page .organization-workspace-partner-sidebar .organization-workspace-detail-card,
.organization-workspace-partner-page .organization-workspace-partner-sidebar .organization-workspace-action-card {
  padding: 16px;
  border-radius: 20px;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.055);
}

.organization-workspace-partner-page .organization-workspace-partner-sidebar .organization-workspace-detail-card-head,
.organization-workspace-partner-page .organization-workspace-partner-sidebar .organization-workspace-action-card-head {
  gap: 11px;
}

.organization-workspace-partner-page .organization-workspace-partner-sidebar .organization-workspace-detail-card-head > span,
.organization-workspace-partner-page .organization-workspace-partner-sidebar .organization-workspace-action-card-head > span {
  width: 42px;
  height: 42px;
  border-radius: 14px;
}

.organization-workspace-partner-page .organization-workspace-form-grid {
  gap: 8px;
}

.organization-workspace-partner-page .organization-workspace-form-grid input,
.organization-workspace-partner-page .organization-workspace-form-grid select {
  min-height: 42px;
  font-size: 0.84rem;
}

.organization-workspace-partner-data {
  display: grid;
  gap: 14px;
  border: 1px solid rgba(15, 118, 110, 0.12);
  border-radius: 22px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.06);
}

.organization-workspace-partner-data-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.organization-workspace-partner-data-head h2 {
  margin: 0;
  color: #0f172a;
  font-size: 1.12rem;
  line-height: 1.2;
}

.organization-workspace-partner-data-head > span {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 7px 11px;
  color: #065f46;
  background: #ecfdf5;
  font-size: 0.74rem;
  font-weight: 900;
}

.organization-workspace-partner-page .organization-workspace-partner-lists {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.organization-workspace-partner-page .organization-workspace-source-panel {
  padding: 12px;
  border-radius: 18px;
  box-shadow: none;
}

.organization-workspace-partner-page .organization-workspace-source-grid {
  grid-template-columns: minmax(0, 1fr);
}

.organization-workspace-partner-page .organization-workspace-source-card.operation {
  min-width: 0;
}

@media (max-width: 1180px) {
  .organization-workspace-partner-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .organization-workspace-partner-page .organization-workspace-partner-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .organization-workspace-partner-page .organization-workspace-partner-sidebar {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .organization-workspace-partner-page .organization-workspace-debt-card {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .page.organization-workspace-partner-page-shell {
    padding-left: 14px;
    padding-right: 14px;
  }

  .organization-workspace-partner-hero {
    padding: 18px;
  }

  .organization-workspace-partner-hero .organization-workspace-detail-main {
    align-items: flex-start;
  }

  .organization-workspace-partner-hero .organization-workspace-logo {
    width: 58px;
    height: 58px;
    border-radius: 17px;
  }

  .organization-workspace-partner-kpis,
  .organization-workspace-partner-page .organization-workspace-partner-overview,
  .organization-workspace-partner-page .organization-workspace-partner-sidebar,
  .organization-workspace-partner-page .organization-workspace-partner-lists {
    grid-template-columns: minmax(0, 1fr);
  }

  .organization-workspace-partner-data-head {
    align-items: start;
    flex-direction: column;
  }

  .organization-workspace-partner-page .organization-workspace-source-card.operation {
    grid-template-columns: minmax(0, 1fr);
  }

  .organization-workspace-partner-page .organization-workspace-source-card.operation .organization-workspace-card-body {
    padding: 10px 0 0;
  }
}

.organization-workspace-partner-page .organization-workspace-partner-layout {
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.organization-workspace-partner-page .organization-workspace-partner-main {
  display: grid;
  grid-template-columns: minmax(280px, 0.7fr) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}

.organization-workspace-partner-page .organization-workspace-partner-overview {
  grid-template-columns: minmax(0, 1fr);
}

.organization-workspace-partner-page .organization-workspace-partner-sidebar {
  position: static;
  top: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.organization-workspace-partner-page .organization-workspace-debt-card {
  grid-column: auto;
}

.organization-workspace-partner-page .organization-workspace-partner-lists {
  grid-template-columns: minmax(0, 1fr);
}

.organization-workspace-partner-page .organization-workspace-detail-card,
.organization-workspace-partner-page .organization-workspace-action-card,
.organization-workspace-partner-data,
.organization-workspace-partner-kpi {
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.045);
}

.organization-workspace-partner-page .organization-workspace-action-card.api {
  align-self: start;
}

.organization-workspace-partner-page .organization-workspace-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.organization-workspace-partner-page .organization-workspace-form-wide {
  grid-column: 1 / -1;
}

@media (max-width: 1180px) {
  .organization-workspace-partner-page .organization-workspace-partner-sidebar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .organization-workspace-partner-page .organization-workspace-partner-main,
  .organization-workspace-partner-page .organization-workspace-partner-sidebar {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .organization-workspace-partner-page .organization-workspace-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.organization-workspace-claim-ledger {
  gap: 12px;
}

.organization-workspace-claim-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid rgba(15, 118, 110, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
}

.organization-workspace-claim-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.organization-workspace-claim-table th,
.organization-workspace-claim-table td {
  padding: 11px 12px;
  border-bottom: 1px solid rgba(15, 118, 110, 0.08);
  color: #334155;
  font-size: 0.8rem;
  font-weight: 800;
  text-align: left;
  vertical-align: middle;
}

.organization-workspace-claim-table th {
  color: #64748b;
  background: rgba(240, 253, 244, 0.82);
  font-size: 0.68rem;
  font-weight: 950;
  text-transform: uppercase;
}

.organization-workspace-claim-table tr:last-child td {
  border-bottom: 0;
}

.organization-workspace-claim-table td strong {
  color: #0f172a;
  font-size: 0.86rem;
  font-weight: 950;
}

.organization-workspace-claim-table td small {
  display: block;
  margin-top: 2px;
  color: #94a3b8;
  font-size: 0.66rem;
  font-weight: 850;
}

.organization-workspace-claim-table .tag {
  white-space: nowrap;
}

@media (max-width: 760px) {
  .organization-workspace-claim-table-wrap {
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .organization-workspace-claim-table,
  .organization-workspace-claim-table thead,
  .organization-workspace-claim-table tbody,
  .organization-workspace-claim-table tr,
  .organization-workspace-claim-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .organization-workspace-claim-table thead {
    display: none;
  }

  .organization-workspace-claim-table tbody {
    display: grid;
    gap: 8px;
  }

  .organization-workspace-claim-table tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px 10px;
    border: 1px solid rgba(15, 118, 110, 0.1);
    border-radius: 14px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.92);
  }

  .organization-workspace-claim-table td {
    display: grid;
    gap: 2px;
    padding: 0;
    border: 0;
    font-size: 0.76rem;
  }

  .organization-workspace-claim-table td::before {
    content: attr(data-label);
    color: #94a3b8;
    font-size: 0.62rem;
    font-weight: 950;
    text-transform: uppercase;
  }

  .organization-workspace-claim-table td[data-label="Mã"],
  .organization-workspace-claim-table td[data-label="Trạng thái"] {
    grid-column: span 2;
  }
}

.organizations-page,
.organization-public-page {
  color: #0f172a;
}

.organizations-stack,
.organization-public-stack {
  gap: 16px;
}

.organizations-hero-card,
.organization-public-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 18px;
  border-radius: 22px;
  padding: 20px;
  color: #f8fafc;
  background:
    radial-gradient(circle at 88% 14%, rgba(52, 211, 153, 0.2), transparent 32%),
    linear-gradient(135deg, #063f35 0%, #075447 58%, #0f766e 100%);
  box-shadow: 0 22px 48px rgba(6, 78, 59, 0.22);
}

.organizations-hero-card h1,
.organization-public-hero h1 {
  margin: 0;
  color: #ffffff;
  font-size: 1.56rem;
  line-height: 1.12;
}

.organizations-hero-card p,
.organization-public-copy p {
  margin: 8px 0 0;
  max-width: 720px;
  color: rgba(236, 253, 245, 0.78);
  font-size: 0.9rem;
  line-height: 1.5;
}

.organizations-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.organizations-hero-stats span,
.organization-public-impact article {
  display: grid;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
}

.organizations-hero-stats i,
.organization-public-impact article > span {
  color: #bbf7d0;
}

.organizations-hero-stats strong,
.organization-public-impact strong {
  color: #ffffff;
  font-size: 1.05rem;
  line-height: 1;
}

.organizations-hero-stats small,
.organization-public-impact small {
  color: rgba(236, 253, 245, 0.72);
  font-size: 0.72rem;
  font-weight: 850;
}

.organizations-filter-panel,
.organization-public-panel {
  display: grid;
  gap: 14px;
  border: 1px solid rgba(15, 118, 110, 0.12);
  border-radius: 20px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.06);
}

.organizations-filter-form {
  display: grid;
  gap: 10px;
}

.organizations-filter-form .button {
  width: 100%;
}

.activity-search-field.compact {
  min-height: 48px;
}

.organizations-grid,
.organization-public-activity-grid,
.organization-public-contact-grid,
.organization-public-impact {
  display: grid;
  gap: 10px;
}

.organization-public-card,
.organization-public-activity,
.organization-public-contact-grid article {
  border: 1px solid rgba(15, 118, 110, 0.12);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
}

.organization-public-card {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.organization-public-card-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.organization-public-card-logo,
.organization-public-logo {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  color: #064e3b;
  background: linear-gradient(135deg, #bbf7d0, #99f6e4);
  font-size: 0.8rem;
  font-weight: 950;
}

.organization-public-card-logo img,
.organization-public-logo img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.organization-public-card strong,
.organization-public-activity strong,
.organization-public-contact-grid strong {
  display: block;
  min-width: 0;
  color: #0f172a;
  font-size: 0.96rem;
  line-height: 1.28;
  overflow-wrap: anywhere;
}

.organization-public-card small,
.organization-public-activity small,
.organization-public-contact-grid small,
.organization-public-activity em {
  color: #64748b;
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 780;
  line-height: 1.35;
}

.organization-public-card-stats,
.organization-public-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.organization-public-card-stats span,
.organization-public-meta span,
.organization-public-meta a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 7px 10px;
  color: #065f46;
  background: #ecfdf5;
  font-size: 0.72rem;
  font-weight: 900;
  text-decoration: none;
}

.organization-public-hero {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

.organization-public-logo {
  width: 76px;
  height: 76px;
  border-radius: 22px;
  box-shadow: 0 18px 28px rgba(16, 185, 129, 0.22);
}

.organization-public-impact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.organization-public-impact article {
  color: #ffffff;
  background:
    linear-gradient(135deg, rgba(20, 184, 166, 0.18), rgba(34, 197, 94, 0.08)),
    #064e3b;
}

.organization-public-progress {
  display: grid;
  gap: 14px;
}

.organization-public-activity,
.organization-public-contact-grid article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  color: inherit;
  text-decoration: none;
}

.organization-public-contact-grid article {
  grid-template-columns: auto minmax(0, 1fr);
}

.organization-public-activity > span,
.organization-public-contact-grid article > span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 13px;
  color: #047857;
  background: linear-gradient(135deg, #d1fae5, #e0f2fe);
}

@media (min-width: 768px) {
  .organizations-filter-form {
    grid-template-columns: minmax(0, 1.35fr) minmax(180px, 0.65fr) auto;
    align-items: center;
  }

  .organizations-filter-form .button {
    width: auto;
  }

  .organizations-grid,
  .organization-public-activity-grid,
  .organization-public-contact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .organization-public-impact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .organizations-page,
  .organization-public-page {
    max-width: 1180px;
  }

  .organizations-hero-card {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.45fr);
    align-items: end;
  }

  .organizations-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.tree-detail-stack {
  gap: 14px;
}

.tree-detail-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  overflow: hidden;
  border-radius: 24px;
  padding: 18px;
  color: #ffffff;
  background:
    radial-gradient(circle at 90% 12%, rgba(34, 197, 94, 0.36), transparent 30%),
    linear-gradient(135deg, #063f35 0%, #075447 48%, #0f766e 100%);
  box-shadow: 0 22px 46px rgba(6, 78, 59, 0.24);
}

.tree-detail-hero::after {
  content: "";
  position: absolute;
  right: -32px;
  bottom: -42px;
  width: 156px;
  height: 156px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 50%;
}

.tree-detail-hero-copy,
.tree-detail-medal {
  position: relative;
  z-index: 1;
}

.tree-detail-back {
  color: rgba(255, 255, 255, 0.84);
  font-size: 0.76rem;
}

.tree-detail-back .fa-icon {
  transform: rotate(180deg);
}

.tree-detail-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  border-radius: 999px;
  padding: 7px 10px;
  color: #dcfce7;
  background: rgba(255, 255, 255, 0.12);
  font-size: 0.72rem;
  font-weight: 900;
}

.tree-detail-unread-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  margin: 8px 0 0 0;
  border: 1px solid rgba(255, 241, 199, 0.58);
  border-radius: 999px;
  padding: 7px 10px;
  color: #fff7d8;
  background: rgba(237, 174, 50, 0.2);
  font-size: 0.72rem;
  font-weight: 950;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.tree-detail-hero h1 {
  margin: 12px 0 7px;
  max-width: 12ch;
  color: #ffffff;
  font-size: clamp(1.45rem, 7vw, 2.35rem);
  letter-spacing: 0;
  line-height: 0.96;
  overflow-wrap: anywhere;
}

.tree-detail-hero p {
  max-width: 34rem;
  margin: 0;
  color: rgba(236, 253, 245, 0.86);
  font-size: 0.86rem;
  line-height: 1.45;
}

.tree-detail-medal {
  display: grid;
  place-items: center;
  align-self: center;
  width: 92px;
  min-height: 112px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 22px;
  padding: 12px 8px;
  background: rgba(255, 255, 255, 0.1);
  text-align: center;
  backdrop-filter: blur(12px);
}

.tree-detail-medal span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 15px;
  color: #064e3b;
  background: linear-gradient(135deg, #bbf7d0, #fef3c7);
}

.tree-detail-medal strong {
  max-width: 100%;
  margin-top: 9px;
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.tree-detail-medal small {
  color: rgba(236, 253, 245, 0.78);
  font-size: 0.68rem;
  font-weight: 850;
}

.tree-detail-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.tree-detail-stat,
.tree-detail-project-card,
.tree-detail-location-card,
.tree-timeline-item {
  border: 1px solid rgba(15, 118, 110, 0.12);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07);
}

.tree-detail-stat {
  display: grid;
  gap: 8px;
  min-height: 112px;
  border-radius: 19px;
  padding: 13px;
}

.tree-detail-stat span,
.tree-timeline-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 13px;
  color: #065f46;
  background: linear-gradient(135deg, #dcfce7, #ccfbf1);
}

.tree-detail-stat strong {
  color: #0f172a;
  font-size: 1.12rem;
  line-height: 1;
}

.tree-detail-stat small {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 850;
}

.tree-detail-project-card {
  display: grid;
  gap: 13px;
  border-radius: 22px;
  padding: 14px;
}

.tree-detail-location-card {
  display: grid;
  gap: 12px;
  overflow: hidden;
  border-radius: 22px;
  padding: 14px;
}

.tree-detail-location-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
}

.tree-detail-location-head h2,
.tree-detail-location-head p {
  margin: 0;
}

.tree-detail-location-head h2 {
  color: #0f172a;
  font-size: 1.02rem;
  line-height: 1.16;
  overflow-wrap: anywhere;
}

.tree-detail-location-head p:not(.eyebrow) {
  margin-top: 4px;
  color: #64748b;
  font-size: 0.82rem;
  line-height: 1.4;
}

.tree-detail-location-head > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: linear-gradient(135deg, #dcfce7, #ccfbf1);
  color: #047857;
}

.tree-detail-mini-map {
  position: relative;
  overflow: hidden;
  min-height: 220px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 20% 20%, rgba(34, 197, 94, 0.16), transparent 32%),
    linear-gradient(135deg, #e7f5ef, #f8fbf8);
}

.tree-detail-planting-map {
  margin-top: 2px;
  padding: 12px;
  border-radius: 20px;
}

.tree-detail-planting-map .tree-detail-map-stage {
  min-height: 360px;
}

.tree-detail-planting-map .planting-tree-sheet {
  left: 20px;
  right: 20px;
  bottom: 58px;
}

.tree-detail-map-stage {
  min-height: 220px;
  width: 100%;
  height: 100%;
}

.tree-detail-map-loading {
  position: absolute;
  inset: 0;
  z-index: 420;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  background: rgba(247, 252, 249, 0.92);
  color: #0f766e;
  font-size: 0.82rem;
  font-weight: 900;
}

.tree-detail-map-loading .fa-icon {
  width: 22px;
  height: 22px;
}

.tree-detail-map-loading.is-error {
  color: #b42318;
}

.tree-detail-map-marker {
  display: grid;
  place-items: center;
  border: none;
  background: transparent;
}

.tree-detail-map-marker span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: 999px;
  background: linear-gradient(135deg, #0f6b49, #2dd4bf);
  color: #fff;
  box-shadow: 0 12px 24px rgba(15, 107, 73, 0.28);
}

.tree-detail-location-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.tree-detail-location-meta span {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #0f766e;
  font-size: 0.7rem;
  font-weight: 850;
}

.tree-detail-location-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tree-detail-project-card > img {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  object-fit: cover;
}

.tree-detail-project-card h2 {
  margin: 0 0 6px;
  color: #0f172a;
  font-size: 1.06rem;
  line-height: 1.2;
}

.tree-detail-project-card p:not(.eyebrow) {
  margin: 0;
  color: #64748b;
  font-size: 0.84rem;
  line-height: 1.45;
}

.tree-detail-project-meta,
.tree-timeline-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 12px 0;
}

.tree-detail-project-meta span,
.tree-timeline-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 6px 9px;
  color: #0f766e;
  background: #ecfdf5;
  font-size: 0.7rem;
  font-weight: 850;
}

.tree-timeline {
  position: relative;
  display: grid;
  gap: 10px;
}

.tree-timeline::before {
  content: "";
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 17px;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(#34d399, rgba(20, 184, 166, 0.08));
}

.tree-timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  border-radius: 20px;
  padding: 12px;
}

.tree-timeline-icon {
  position: relative;
  z-index: 1;
  color: #ffffff;
  background: linear-gradient(135deg, #059669, #14b8a6);
}

.tree-timeline-body {
  min-width: 0;
}

.tree-timeline-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.tree-timeline-head strong {
  color: #0f172a;
  font-size: 0.93rem;
  line-height: 1.25;
}

.tree-timeline-head span {
  flex: 0 0 auto;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 800;
}

.tree-timeline-body p {
  margin: 7px 0 0;
  color: #475569;
  font-size: 0.82rem;
  line-height: 1.45;
}

.tree-timeline-body img {
  width: 100%;
  max-height: 220px;
  margin-top: 10px;
  border-radius: 16px;
  object-fit: cover;
}

.admin-tree-update-form {
  display: grid;
  gap: 12px;
}

.admin-tree-update-form textarea {
  min-height: 96px;
}

.admin-tree-update-history {
  display: grid;
  gap: 10px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in oklab, var(--border) 82%, white);
}

.admin-tree-update-history-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.admin-tree-update-history-head strong {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--foreground);
  font-size: 0.78rem;
}

.admin-tree-update-history-head p {
  margin: 4px 0 0;
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 800;
}

.admin-tree-update-list {
  display: grid;
  gap: 9px;
}

.admin-tree-update-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
  border: 1px solid color-mix(in oklab, var(--primary) 10%, white);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(15, 118, 110, 0.05), transparent 50%),
    #fff;
}

.admin-tree-update-item-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, #def8ec, #f8fffb);
  color: var(--primary-strong);
}

.admin-tree-update-item-body {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.admin-tree-update-item-meta,
.admin-tree-update-item-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--muted-foreground);
  font-size: 0.62rem;
  font-weight: 900;
}

.admin-tree-update-item-meta span,
.admin-tree-update-item-foot span {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--muted) 52%, white);
}

.admin-tree-update-item h4 {
  margin: 0;
  color: var(--foreground);
  font-size: 0.84rem;
  line-height: 1.25;
}

.admin-tree-update-item p {
  margin: 0;
  color: #475569;
  font-size: 0.74rem;
  font-weight: 750;
  line-height: 1.45;
}

.admin-tree-update-item-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 7px;
}

.admin-tree-care-schedule-panel {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid color-mix(in oklab, var(--primary) 12%, white);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(20, 184, 166, 0.08), transparent 58%),
    color-mix(in oklab, #f8fafc 82%, white);
}

.admin-tree-care-schedule-head .button-secondary {
  min-height: 34px;
  padding-inline: 10px;
  white-space: nowrap;
}

.admin-tree-care-schedule-list {
  display: grid;
  gap: 8px;
}

.admin-tree-care-schedule-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
  border: 1px solid color-mix(in oklab, var(--border) 76%, white);
  border-radius: 13px;
  background: #fff;
}

.admin-tree-care-schedule-item.overdue {
  border-color: color-mix(in oklab, #ef4444 24%, white);
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.06), #fff 54%);
}

.admin-tree-care-schedule-item.due_soon {
  border-color: color-mix(in oklab, #f59e0b 28%, white);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), #fff 54%);
}

.admin-tree-care-schedule-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: linear-gradient(135deg, #ccfbf1, #ecfeff);
  color: #0f766e;
}

.admin-tree-care-schedule-body {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.admin-tree-care-schedule-body h4,
.admin-tree-care-schedule-body p,
.admin-tree-care-schedule-body small {
  margin: 0;
}

.admin-tree-care-schedule-body h4 {
  color: var(--foreground);
  font-size: 0.82rem;
  line-height: 1.25;
}

.admin-tree-care-schedule-body p,
.admin-tree-care-schedule-body small {
  color: #475569;
  font-size: 0.72rem;
  font-weight: 750;
  line-height: 1.42;
}

.admin-tree-care-schedule-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.admin-tree-update-system-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  padding: 9px;
  border-radius: 13px;
  background: color-mix(in oklab, var(--muted) 46%, white);
  color: var(--muted-foreground);
  font-size: 0.64rem;
  font-weight: 900;
}

.admin-tree-update-system-list > span,
.admin-tree-update-system-list small {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.admin-tree-update-delete-note {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid color-mix(in oklab, #ef4444 16%, white);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(255, 255, 255, 0.92));
}

.admin-tree-update-delete-note p {
  margin: 0;
  color: #7f1d1d;
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.45;
}

.button-secondary.danger,
.button-secondary.ghost.danger {
  color: #b42318;
}

.admin-tree-update-button {
  min-height: 34px;
  padding-inline: 10px;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .tree-detail-stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .tree-detail-project-card {
    grid-template-columns: 280px minmax(0, 1fr);
    align-items: center;
  }

  .tree-detail-planting-map .tree-detail-map-stage {
    min-height: 440px;
  }

  .admin-tree-update-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-tree-update-wide {
    grid-column: 1 / -1;
  }

  .admin-tree-update-item {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: start;
  }

  .admin-tree-care-schedule-item {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: start;
  }

  .admin-tree-update-item-actions {
    grid-column: auto;
  }

  .admin-tree-care-schedule-actions {
    grid-column: auto;
  }
}

@media (min-width: 1100px) {
  .tree-detail-page {
    max-width: 1180px;
  }

  .tree-detail-stack {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(360px, 0.72fr);
    align-items: start;
  }

  .tree-detail-hero,
  .tree-detail-stat-grid {
    grid-column: 1 / -1;
  }

  .tree-detail-project-card {
    grid-column: 1;
  }

  .tree-detail-location-card {
    grid-column: 1;
  }

  .tree-detail-stack > .section {
    grid-column: 2;
    grid-row: 3 / span 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }

  .page[data-motion-root],
  .page[data-motion-root] [data-motion-item],
  .progress > span {
    opacity: 1;
    transform: none;
  }

  .credit-ring {
    --ring-progress: var(--value);
  }
}

/* GreenID tree identity card */
.tree-green-stack {
  gap: 18px;
  max-width: 980px;
  margin-inline: auto;
}

.tree-detail-greenid-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  margin-top: 10px;
  color: #ecfdf5;
  font-size: 0.78rem;
  font-weight: 800;
}

.tree-green-card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 18px;
  border: 1px solid rgba(187, 247, 208, 0.28);
  border-radius: 28px;
  padding: clamp(18px, 4vw, 28px);
  color: #ffffff;
  background:
    radial-gradient(circle at 92% 8%, rgba(187, 247, 208, 0.22), transparent 25%),
    linear-gradient(90deg, rgba(236, 253, 245, 0.08) 0 1px, transparent 1px 72px),
    linear-gradient(0deg, rgba(236, 253, 245, 0.055) 0 1px, transparent 1px 72px),
    linear-gradient(135deg, #052f2b 0%, #075447 50%, #0f766e 100%);
  box-shadow: 0 28px 70px rgba(6, 78, 59, 0.3);
}

.tree-green-card.is-planted {
  border-color: rgba(187, 247, 208, 0.34);
}

.tree-green-card.is-available {
  border-color: rgba(253, 230, 138, 0.34);
}

.tree-green-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(236, 253, 245, 0.18);
  padding-bottom: 15px;
}

.tree-green-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tree-green-logo {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(236, 253, 245, 0.28);
  border-radius: 14px;
  color: #052f2b;
  background: linear-gradient(135deg, #dcfce7, #fef3c7);
}

.tree-green-brand-name {
  margin: 0;
  color: #ffffff;
  font-size: 1.02rem;
  font-weight: 900;
}

.tree-green-brand-sub {
  margin: 0;
  color: rgba(236, 253, 245, 0.78);
  font-size: 0.72rem;
  font-weight: 800;
}

.tree-green-header-right {
  display: grid;
  justify-items: end;
  gap: 5px;
}

.tree-green-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(236, 253, 245, 0.22);
  border-radius: 999px;
  padding: 7px 12px;
  color: #dcfce7;
  background: rgba(255, 255, 255, 0.11);
  font-size: 0.72rem;
  font-weight: 900;
  white-space: nowrap;
}

.tree-green-serial {
  color: rgba(236, 253, 245, 0.7);
  font-size: 0.68rem;
  font-weight: 800;
}

.tree-green-card-body {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 20px;
}

.tree-green-identity .eyebrow {
  color: rgba(187, 247, 208, 0.9);
  font-weight: 950;
}

.tree-green-code {
  margin: 7px 0 10px;
  color: #ffffff;
  font-size: clamp(1.55rem, 5.8vw, 2.45rem);
  letter-spacing: 0;
  line-height: 1;
  overflow-wrap: anywhere;
}

.tree-green-project {
  margin: 0;
  color: #dcfce7;
  font-size: 1.02rem;
  font-weight: 900;
}

.tree-green-location {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 6px 0 0;
  color: rgba(236, 253, 245, 0.82);
  font-size: 0.82rem;
  font-weight: 750;
}

.tree-green-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 18px 0 0;
  border: 1px solid rgba(236, 253, 245, 0.18);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
}

.tree-green-meta div {
  border-right: 1px solid rgba(236, 253, 245, 0.12);
  border-bottom: 1px solid rgba(236, 253, 245, 0.12);
  padding: 12px 13px;
  background: transparent;
}

.tree-green-meta div:first-child {
  border-top-left-radius: 20px;
}

.tree-green-meta div:nth-child(2) {
  border-top-right-radius: 20px;
}

.tree-green-meta div:nth-last-child(2) {
  border-bottom-left-radius: 20px;
}

.tree-green-meta div:last-child {
  border-bottom-right-radius: 20px;
}

.tree-green-meta dt {
  color: rgba(236, 253, 245, 0.66);
  font-size: 0.7rem;
  font-weight: 850;
}

.tree-green-meta dd {
  margin: 4px 0 0;
  color: #ffffff;
  font-size: 0.84rem;
  font-weight: 900;
}

.tree-green-corporate {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 14px 0 0;
  border: 1px solid rgba(253, 230, 138, 0.3);
  border-radius: 999px;
  padding: 9px 12px;
  color: #fef3c7;
  background: rgba(237, 174, 50, 0.14);
  font-size: 0.78rem;
  font-weight: 800;
}

.tree-green-qr {
  display: grid;
  justify-items: center;
  gap: 10px;
  align-self: start;
  border: 1px solid rgba(236, 253, 245, 0.28);
  border-radius: 24px;
  padding: 16px;
  background: #ffffff;
  box-shadow: 0 24px 45px rgba(2, 44, 34, 0.28);
}

.tree-green-qr img {
  width: 100%;
  max-width: 232px;
  border-radius: 14px;
}

.tree-green-qr-fallback {
  display: grid;
  place-items: center;
  width: 180px;
  height: 180px;
  border-radius: 12px;
  color: #047857;
  background: #ecfdf5;
  font-size: 2.4rem;
}

.tree-green-qr small {
  color: #334155;
  font-size: 0.72rem;
  font-weight: 800;
}

.tree-green-verify-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  border: 1px solid rgba(15, 118, 110, 0.16);
  border-radius: 14px;
  padding: 9px 10px;
  color: #ffffff;
  background: #064e3b;
  font-size: 0.74rem;
  font-weight: 900;
  text-decoration: none;
}

.tree-green-stat-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border: 1px solid rgba(236, 253, 245, 0.16);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.08);
}

.tree-green-stat {
  display: grid;
  justify-items: center;
  gap: 4px;
  border-right: 1px solid rgba(236, 253, 245, 0.12);
  border-radius: 0;
  padding: 12px 8px;
  text-align: center;
  background: transparent;
}

.tree-green-stat span {
  color: #bbf7d0;
}

.tree-green-stat strong {
  color: #ffffff;
  font-size: 0.96rem;
}

.tree-green-stat small {
  color: rgba(236, 253, 245, 0.72);
  font-size: 0.68rem;
}

.tree-green-card-foot {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid rgba(236, 253, 245, 0.16);
  padding-top: 12px;
  color: rgba(236, 253, 245, 0.76);
  font-size: 0.72rem;
  font-weight: 800;
}

.tree-green-card-foot span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.tree-green-note {
  border: 1px solid rgba(15, 118, 110, 0.16);
  border-radius: 20px;
  padding: 14px 16px;
  background: rgba(236, 253, 245, 0.6);
}

.tree-green-note p {
  margin: 4px 0 0;
  color: #0f172a;
  font-weight: 700;
}

.tree-green-note small {
  color: #475569;
}

.tree-green-timeline {
  display: grid;
  gap: 10px;
}

.tree-green-timeline-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  border: 1px solid rgba(15, 118, 110, 0.12);
  border-radius: 20px;
  padding: 12px 14px;
  background: #ffffff;
}

.tree-green-timeline-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  color: #047857;
  background: #ecfdf5;
}

.tree-green-timeline-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.tree-green-timeline-head strong {
  color: #0f172a;
  font-size: 0.88rem;
}

.tree-green-timeline-head span {
  color: #64748b;
  font-size: 0.72rem;
  white-space: nowrap;
}

.tree-green-timeline-item p {
  margin: 4px 0 0;
  color: #475569;
  font-size: 0.82rem;
  line-height: 1.45;
}

@media (min-width: 720px) {
  .tree-green-card-body {
    grid-template-columns: minmax(0, 1fr) 280px;
    align-items: start;
  }

  .tree-green-qr {
    width: 280px;
  }
}

@media (max-width: 520px) {
  .tree-green-card-top,
  .tree-green-card-foot {
    align-items: flex-start;
    flex-direction: column;
  }

  .tree-green-meta,
  .tree-green-stat-row {
    grid-template-columns: 1fr;
  }

  .tree-green-meta div,
  .tree-green-meta div:first-child,
  .tree-green-meta div:nth-child(2),
  .tree-green-meta div:nth-last-child(2),
  .tree-green-meta div:last-child {
    border-radius: 0;
  }

  .tree-green-meta div:first-child {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
  }

  .tree-green-meta div:last-child {
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
  }
}

/* GreenID printable identity card redesign */
.tree-green-page {
  color: #12352b;
}

.tree-green-stack {
  max-width: 1180px;
  gap: 16px;
}

.tree-green-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.tree-green-toolbar-link {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  border: 1px solid rgba(8, 83, 57, 0.16);
  border-radius: 999px;
  padding: 0 15px;
  color: #0d513d;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 12px 24px rgba(15, 61, 45, 0.08);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 900;
  text-decoration: none;
}

.tree-green-toolbar-link:hover,
.tree-green-toolbar-link:focus-visible {
  color: #073d2c;
  background: #ffffff;
  transform: translateY(-1px);
}

.tree-green-passport {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.tree-green-card-face {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(17, 92, 67, 0.18);
  border-radius: 28px;
  padding: clamp(16px, 2.5vw, 24px);
  color: #113a2f;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(247, 246, 226, 0.68)),
    repeating-linear-gradient(45deg, rgba(13, 81, 61, 0.035) 0 1px, transparent 1px 9px),
    #fbfaec;
  box-shadow: 0 26px 64px rgba(7, 61, 44, 0.14);
}

.tree-green-card-face::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(17, 92, 67, 0.08);
  border-radius: 22px;
  pointer-events: none;
}

.tree-green-card-face::after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: 70px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(17, 92, 67, 0.11), transparent 64%);
  pointer-events: none;
}

.tree-green-front-head {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: center;
  gap: clamp(12px, 2vw, 20px);
}

.tree-green-vnx-mark {
  display: grid;
  gap: 2px;
  color: #0b5b3f;
}

.tree-green-vnx-mark strong {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  font-size: clamp(2.4rem, 5vw, 4.3rem);
  line-height: 0.9;
  font-weight: 950;
  letter-spacing: 0;
}

.tree-green-vnx-mark strong span {
  color: #16824f;
  font-size: 0.72em;
}

.tree-green-vnx-mark small {
  color: #0b5b3f;
  font-size: 0.78rem;
  font-weight: 850;
}

.tree-green-title-block {
  text-align: center;
}

.tree-green-title-block h1,
.tree-green-back-head h2 {
  margin: 0;
  color: #0b4f39;
  font-size: clamp(1.12rem, 3.1vw, 2.1rem);
  line-height: 1.08;
  font-weight: 950;
  letter-spacing: 0;
}

.tree-green-title-block p,
.tree-green-back-head p {
  margin: 5px 0 0;
  color: #1e5f48;
  font-size: clamp(0.8rem, 1.8vw, 1.12rem);
  font-weight: 850;
  letter-spacing: 0.02em;
}

.tree-green-id-strip {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 6px;
  width: min(100%, 430px);
  margin: 16px auto 14px;
}

.tree-green-id-strip span {
  color: #44685a;
  font-size: 0.78rem;
  font-weight: 850;
}

.tree-green-id-strip strong {
  width: 100%;
  border: 1px solid rgba(17, 92, 67, 0.24);
  border-radius: 12px;
  padding: 10px 12px;
  color: #16824f;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  font-size: clamp(1rem, 3vw, 1.45rem);
  line-height: 1.1;
  text-align: center;
  overflow-wrap: anywhere;
}

.tree-green-front-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(14px, 2.4vw, 22px);
  align-items: start;
}

.tree-green-photo-card {
  position: relative;
  overflow: hidden;
  min-height: 360px;
  margin: 0;
  border-radius: 22px;
  background: #d9f0df;
  box-shadow: 0 18px 36px rgba(13, 81, 61, 0.16);
}

.tree-green-photo-card img,
.tree-green-map-card img,
.tree-green-photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tree-green-photo-card img {
  position: absolute;
  inset: 0;
}

.tree-green-photo-card figcaption {
  position: absolute;
  left: 18px;
  bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 15px;
  padding: 10px 13px;
  color: #ffffff;
  background: rgba(12, 67, 48, 0.72);
  box-shadow: 0 12px 24px rgba(2, 44, 34, 0.22);
  font-size: 0.72rem;
  font-weight: 950;
  line-height: 1.16;
  backdrop-filter: blur(8px);
}

.tree-green-photo-card figcaption .fa-icon {
  width: 20px;
  height: 20px;
  color: #bdf8c9;
}

.tree-green-front-info {
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.tree-green-qr {
  display: grid;
  justify-items: center;
  gap: 7px;
  border: 1px solid rgba(13, 81, 61, 0.16);
  border-radius: 18px;
  padding: 10px;
  background: #ffffff;
  box-shadow: 0 14px 28px rgba(7, 61, 44, 0.12);
}

.tree-green-qr img {
  display: block;
  width: 100%;
  max-width: none;
  border-radius: 8px;
}

.tree-green-main-qr {
  width: 124px;
}

.tree-green-footer-qr {
  width: 92px;
  padding: 7px;
  border-radius: 12px;
}

.tree-green-qr small {
  color: #315446;
  font-size: 0.58rem;
  font-weight: 850;
  text-align: center;
}

.tree-green-qr-fallback {
  display: grid;
  place-items: center;
  width: 100px;
  height: 100px;
  border-radius: 10px;
  color: #0f7a4a;
  background: #eef9ef;
  font-size: 2rem;
}

.tree-green-id-fields {
  display: grid;
  margin: 0;
}

.tree-green-id-fields div {
  border-bottom: 1px solid rgba(17, 92, 67, 0.12);
  padding: 9px 0;
}

.tree-green-id-fields div:first-child {
  padding-top: 0;
}

.tree-green-id-fields dt {
  color: #526b61;
  font-size: 0.73rem;
  font-weight: 850;
}

.tree-green-id-fields dt small {
  color: #6d8178;
  font-weight: 750;
}

.tree-green-id-fields dd {
  margin: 4px 0 0;
  color: #102c23;
  font-size: clamp(0.92rem, 2vw, 1.2rem);
  line-height: 1.2;
  font-weight: 900;
}

.tree-green-metric-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid rgba(17, 92, 67, 0.12);
  border-radius: 20px;
  background: rgba(229, 244, 225, 0.64);
}

.tree-green-metric-tile {
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: 0;
  border-right: 1px solid rgba(17, 92, 67, 0.1);
  padding: 13px 9px;
  text-align: center;
}

.tree-green-metric-tile:last-child {
  border-right: 0;
}

.tree-green-metric-tile > span,
.tree-green-impact-tile > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  color: #ffffff;
  background: #138a50;
  box-shadow: 0 10px 18px rgba(19, 138, 80, 0.18);
}

.tree-green-metric-tile small {
  display: grid;
  gap: 1px;
  color: #45685a;
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1.15;
}

.tree-green-metric-tile small em {
  color: #6a8177;
  font-style: normal;
  font-weight: 750;
}

.tree-green-metric-tile strong {
  width: 100%;
  color: #0b4f39;
  font-size: clamp(0.82rem, 1.5vw, 1.04rem);
  line-height: 1.18;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.tree-green-signature-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 18px;
  border-top: 1px solid rgba(17, 92, 67, 0.14);
}

.tree-green-signature-row div {
  min-height: 74px;
  border-right: 1px solid rgba(17, 92, 67, 0.12);
  padding: 14px 12px 0;
}

.tree-green-signature-row div:last-child {
  border-right: 0;
}

.tree-green-signature-row span {
  display: block;
  color: #607a6e;
  font-size: 0.7rem;
  font-weight: 850;
}

.tree-green-signature-row strong {
  display: block;
  margin-top: 9px;
  color: #12352b;
  font-size: 0.84rem;
  font-weight: 900;
}

.tree-green-back {
  display: grid;
  gap: 14px;
  background:
    linear-gradient(180deg, rgba(11, 79, 57, 0.98) 0 112px, transparent 112px),
    linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(247, 246, 226, 0.68)),
    repeating-linear-gradient(45deg, rgba(13, 81, 61, 0.03) 0 1px, transparent 1px 9px),
    #fbfaec;
}

.tree-green-back::before {
  border-color: rgba(255, 255, 255, 0.12);
}

.tree-green-back-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 88px;
  color: #ffffff;
}

.tree-green-back-seal {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  color: #e7fbdc;
  font-size: 1.25rem;
}

.tree-green-back-head h2,
.tree-green-back-head p {
  color: #ffffff;
}

.tree-green-back-head h2 {
  font-size: clamp(1.18rem, 2.15vw, 1.58rem);
}

.tree-green-back-head p {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.84rem;
}

.tree-green-back-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

.tree-green-panel {
  min-width: 0;
  border: 1px solid rgba(17, 92, 67, 0.14);
  border-radius: 15px;
  padding: 13px;
  background: rgba(255, 255, 255, 0.66);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.tree-green-panel h3 {
  margin: 0 0 10px;
  color: #0b4f39;
  font-size: 0.82rem;
  font-weight: 950;
  line-height: 1.2;
}

.tree-green-map-card {
  position: relative;
  overflow: hidden;
  height: 168px;
  border-radius: 12px;
  background: #dcefdc;
}

.tree-green-map-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.26) 0 1px, transparent 1px 34px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.24) 0 1px, transparent 1px 34px),
    rgba(230, 246, 224, 0.22);
}

.tree-green-map-pin {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50% 50% 50% 8px;
  color: #ffffff;
  background: #23a557;
  box-shadow: 0 14px 28px rgba(9, 80, 50, 0.22);
  transform: translate(-50%, -62%) rotate(-45deg);
}

.tree-green-map-pin .fa-icon {
  transform: rotate(45deg);
}

.tree-green-location-panel strong,
.tree-green-location-panel p,
.tree-green-location-panel small {
  display: block;
}

.tree-green-location-panel strong {
  margin-top: 12px;
  color: #12352b;
  font-size: 0.92rem;
  font-weight: 950;
}

.tree-green-location-panel p {
  margin: 5px 0 0;
  color: #3e5a4f;
  font-size: 0.8rem;
  line-height: 1.4;
}

.tree-green-location-panel small {
  margin-top: 8px;
  color: #0b4f39;
  font-size: 0.76rem;
  font-weight: 850;
}

.tree-green-location-panel a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  color: #0b6a44;
  font-size: 0.76rem;
  font-weight: 900;
  text-decoration: none;
}

.tree-green-history-list {
  display: grid;
  gap: 10px;
}

.tree-green-history-item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
}

.tree-green-history-item > span {
  position: relative;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #ffffff;
  background: #138a50;
  font-size: 0.74rem;
}

.tree-green-history-item > span::after {
  content: "";
  position: absolute;
  top: 28px;
  bottom: -18px;
  left: 50%;
  width: 1px;
  background: rgba(19, 138, 80, 0.38);
}

.tree-green-history-item:last-child > span::after {
  display: none;
}

.tree-green-history-item strong {
  color: #102c23;
  font-size: 0.82rem;
  font-weight: 950;
}

.tree-green-history-item p {
  margin: 2px 0 0;
  color: #1b3f33;
  font-size: 0.8rem;
  font-weight: 850;
  line-height: 1.32;
}

.tree-green-history-item small {
  display: block;
  margin-top: 2px;
  color: #5b7469;
  font-size: 0.72rem;
  line-height: 1.35;
}

.tree-green-photo-timeline {
  grid-column: span 1;
}

.tree-green-photo-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.tree-green-photo-thumb {
  display: grid;
  gap: 6px;
  margin: 0;
}

.tree-green-photo-thumb img,
.tree-green-photo-thumb > span {
  height: 96px;
  border-radius: 11px;
}

.tree-green-photo-thumb > span {
  display: grid;
  place-items: center;
  color: #0f7a4a;
  background: #eaf6df;
}

.tree-green-photo-thumb figcaption {
  color: #365a4b;
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1.18;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tree-green-side-panels {
  display: grid;
  gap: 10px;
}

.tree-green-person-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.tree-green-person-row > span {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  color: #ffffff;
  background: #82a938;
  font-size: 1.05rem;
}

.tree-green-person-row strong,
.tree-green-person-row small {
  display: block;
}

.tree-green-person-row strong {
  color: #102c23;
  font-size: 0.9rem;
  line-height: 1.24;
  font-weight: 950;
}

.tree-green-person-row small {
  margin-top: 3px;
  color: #587266;
  font-size: 0.74rem;
  line-height: 1.32;
  font-weight: 750;
}

.tree-green-impact-panel {
  position: relative;
  z-index: 1;
}

.tree-green-impact-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.tree-green-impact-tile {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-width: 0;
  border: 1px solid rgba(17, 92, 67, 0.1);
  border-radius: 13px;
  padding: 10px;
  background: rgba(239, 248, 228, 0.72);
}

.tree-green-impact-tile small,
.tree-green-impact-tile strong,
.tree-green-impact-tile em {
  display: block;
}

.tree-green-impact-tile small {
  color: #44685a;
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
}

.tree-green-impact-tile strong {
  margin-top: 3px;
  color: #0b4f39;
  font-size: 0.95rem;
  line-height: 1.16;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.tree-green-impact-tile em {
  margin-top: 2px;
  color: #6a8177;
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 750;
}

.tree-green-back-foot {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 -24px -24px;
  padding: 13px 18px 13px 24px;
  color: #ffffff;
  background: #0b4f39;
}

.tree-green-back-foot > div:first-child {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 0.8rem;
  font-weight: 850;
  line-height: 1.35;
}

.tree-green-back-foot > div:first-child .fa-icon {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  color: #c9f7c7;
}

.tree-green-note {
  border: 1px solid rgba(13, 81, 61, 0.12);
  border-radius: 18px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 14px 30px rgba(7, 61, 44, 0.08);
}

@media (min-width: 1120px) {
  .tree-green-passport {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }

  .tree-green-impact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .tree-green-front-grid,
  .tree-green-back-grid,
  .tree-green-impact-grid {
    grid-template-columns: 1fr;
  }

  .tree-green-photo-card {
    min-height: 300px;
  }

  .tree-green-metric-row,
  .tree-green-signature-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tree-green-metric-tile:nth-child(2n),
  .tree-green-signature-row div:nth-child(2n) {
    border-right: 0;
  }

  .tree-green-impact-tile {
    grid-template-columns: 44px minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .tree-green-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .tree-green-toolbar-link {
    width: 100%;
  }

  .tree-green-card-face {
    border-radius: 24px;
    padding: 14px;
  }

  .tree-green-card-face::before {
    inset: 8px;
    border-radius: 18px;
  }

  .tree-green-front-head {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .tree-green-vnx-mark {
    justify-items: center;
  }

  .tree-green-front-info {
    grid-template-columns: 1fr;
  }

  .tree-green-main-qr {
    width: min(100%, 190px);
    justify-self: center;
  }

  .tree-green-photo-card {
    min-height: 260px;
  }

  .tree-green-metric-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tree-green-signature-row,
  .tree-green-photo-strip {
    grid-template-columns: 1fr;
  }

  .tree-green-signature-row div {
    border-right: 0;
    border-bottom: 1px solid rgba(17, 92, 67, 0.1);
  }

  .tree-green-signature-row div:last-child {
    border-bottom: 0;
  }

  .tree-green-metric-tile {
    border-right: 1px solid rgba(17, 92, 67, 0.1);
    border-bottom: 1px solid rgba(17, 92, 67, 0.1);
  }

  .tree-green-metric-tile:nth-child(2n) {
    border-right: 0;
  }

  .tree-green-metric-tile:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .tree-green-back {
    background:
      linear-gradient(180deg, rgba(11, 79, 57, 0.98) 0 116px, transparent 116px),
      linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(247, 246, 226, 0.68)),
      #fbfaec;
  }

  .tree-green-back-head {
    align-items: flex-start;
  }

  .tree-green-back-foot {
    align-items: flex-start;
    flex-direction: column;
    margin: 0 -14px -14px;
    padding: 14px;
  }
}

@media print {
  body[data-route-page="treeGreenCard"] {
    background: #ffffff !important;
  }

  body[data-route-page="treeGreenCard"] .app-shell,
  body[data-route-page="treeGreenCard"] .app-main {
    display: block !important;
    min-height: auto !important;
    padding: 0 !important;
    background: #ffffff !important;
  }

  body[data-route-page="treeGreenCard"] .app-shell::before,
  body[data-route-page="treeGreenCard"] .app-shell::after,
  body[data-route-page="treeGreenCard"] .topbar,
  body[data-route-page="treeGreenCard"] .side-nav,
  body[data-route-page="treeGreenCard"] .bottom-nav,
  body[data-route-page="treeGreenCard"] .tree-green-toolbar,
  body[data-route-page="treeGreenCard"] .tree-green-note {
    display: none !important;
  }

  body[data-route-page="treeGreenCard"] .page {
    padding: 0 !important;
  }

  body[data-route-page="treeGreenCard"] .tree-green-stack {
    max-width: none !important;
    margin: 0 !important;
  }

  body[data-route-page="treeGreenCard"] .tree-green-passport {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8mm !important;
  }

  body[data-route-page="treeGreenCard"] .tree-green-card-face {
    break-inside: avoid;
    page-break-inside: avoid;
    box-shadow: none !important;
  }
}

/* Compact GreenID card revision */
.tree-green-compact-stack {
  max-width: 1080px;
  gap: 14px;
}

.tree-green-passport-compact {
  gap: 16px;
}

.tree-green-compact-card {
  --green-card-print-width: 160mm;
  --green-card-ratio: 1.586;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: 24px;
  padding: clamp(14px, 2vw, 18px);
  color: #082f23;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(249, 247, 231, 0.9)),
    repeating-linear-gradient(45deg, rgba(13, 81, 61, 0.025) 0 1px, transparent 1px 10px),
    #fbfaec;
  box-shadow: 0 18px 46px rgba(7, 61, 44, 0.13);
}

.tree-green-compact-card::before {
  inset: 9px;
  border-radius: 18px;
  border-color: rgba(17, 92, 67, 0.09);
}

.tree-green-compact-card::after {
  right: -90px;
  bottom: -90px;
  width: 220px;
  height: 220px;
  opacity: 0.7;
}

.tree-green-compact-head {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.tree-green-compact-head .tree-green-vnx-mark strong {
  color: #064e3b;
  font-size: clamp(2rem, 4vw, 2.7rem);
  line-height: 0.88;
}

.tree-green-compact-head .tree-green-vnx-mark small {
  font-size: 0.64rem;
}

.tree-green-compact-head .tree-green-title-block {
  text-align: left;
}

.tree-green-compact-head .tree-green-title-block h1 {
  color: #064e3b;
  font-size: clamp(1.05rem, 2vw, 1.38rem);
  line-height: 1.04;
}

.tree-green-compact-head .tree-green-title-block p {
  margin-top: 4px;
  color: #315f50;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.tree-green-compact-id {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 5px;
  margin: 12px 0 14px;
}

.tree-green-compact-id span {
  color: #315f50;
  font-size: 0.64rem;
  font-weight: 900;
  text-transform: uppercase;
}

.tree-green-compact-id strong {
  border: 1px solid rgba(17, 92, 67, 0.18);
  border-radius: 14px;
  padding: 9px 12px;
  color: #047447;
  background: rgba(255, 255, 255, 0.76);
  font-size: clamp(1rem, 2vw, 1.18rem);
  line-height: 1.12;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.tree-green-compact-main {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(155px, 0.9fr) minmax(0, 1.1fr);
  gap: 14px;
  flex: 1 1 auto;
  align-items: start;
  min-height: 0;
}

.tree-green-compact-photo {
  height: 100%;
  min-height: 0;
  border-radius: 18px;
}

.tree-green-compact-photo figcaption {
  left: 12px;
  bottom: 12px;
  gap: 7px;
  border-radius: 12px;
  padding: 8px 10px;
  font-size: 0.64rem;
  line-height: 1;
}

.tree-green-compact-photo figcaption .fa-icon {
  width: 15px;
  height: 15px;
}

.tree-green-compact-info {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-height: 0;
}

.tree-green-compact-qr {
  justify-self: start;
  width: 104px;
  gap: 5px;
  border-radius: 16px;
  padding: 8px;
}

.tree-green-compact-qr small {
  color: #4f685e;
  font-size: 0.56rem;
}

.tree-green-compact-fields {
  display: grid;
  gap: 0;
  margin: 0;
  min-height: 0;
  overflow: hidden;
}

.tree-green-compact-fields div {
  border-bottom: 1px solid rgba(17, 92, 67, 0.11);
  padding: 5px 0;
}

.tree-green-compact-fields div:first-child {
  padding-top: 0;
}

.tree-green-compact-fields dt {
  color: #3d6255;
  font-size: 0.55rem;
  font-weight: 900;
}

.tree-green-compact-fields dd {
  margin: 3px 0 0;
  color: #082f23;
  font-size: 0.68rem;
  line-height: 1.22;
  font-weight: 900;
}

.tree-green-compact-foot,
.tree-green-compact-note {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 9px;
  border-top: 1px solid rgba(17, 92, 67, 0.12);
  padding-top: 8px;
  color: #315f50;
  font-size: 0.68rem;
  font-weight: 850;
  line-height: 1.32;
}

.tree-green-compact-foot span,
.tree-green-compact-note span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tree-green-back-image {
  position: relative;
  z-index: 1;
  overflow: hidden;
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  margin: 12px 0 10px;
  border-radius: 18px;
  background: #d9f0df;
  box-shadow: 0 16px 30px rgba(7, 61, 44, 0.12);
}

.tree-green-back-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tree-green-back-image figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  gap: 3px;
  padding: 38px 14px 13px;
  color: #ffffff;
  background: linear-gradient(180deg, transparent, rgba(8, 50, 36, 0.86));
}

.tree-green-back-image figcaption strong {
  font-size: 0.9rem;
  line-height: 1.16;
  font-weight: 950;
}

.tree-green-back-image figcaption span {
  font-size: 0.7rem;
  line-height: 1.25;
  font-weight: 750;
}

.tree-green-compact-facts {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.tree-green-compact-fact {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  min-width: 0;
  border: 1px solid rgba(17, 92, 67, 0.11);
  border-radius: 14px;
  padding: 8px;
  background: rgba(246, 250, 236, 0.82);
}

.tree-green-compact-fact > span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  color: #ffffff;
  background: #11824c;
  font-size: 0.72rem;
}

.tree-green-compact-fact small {
  display: block;
  color: #315f50;
  font-size: 0.52rem;
  font-weight: 900;
  text-transform: uppercase;
}

.tree-green-compact-fact strong {
  display: block;
  margin-top: 3px;
  color: #082f23;
  font-size: 0.66rem;
  line-height: 1.18;
  font-weight: 950;
  overflow-wrap: anywhere;
  word-break: normal;
}

.tree-green-compact-note a {
  flex: 0 0 auto;
  color: #0b6a44;
  font-weight: 950;
  text-decoration: none;
}

.tree-green-compact-source {
  font-size: 0.82rem;
}

@media (min-width: 980px) {
  .tree-green-passport-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  .tree-green-compact-card {
    aspect-ratio: var(--green-card-ratio);
  }
}

@media (max-width: 900px) {
  .tree-green-compact-main,
  .tree-green-compact-info,
  .tree-green-compact-facts {
    grid-template-columns: 1fr;
  }

  .tree-green-compact-qr {
    justify-self: center;
  }
}

@media (max-width: 560px) {
  .tree-green-compact-head {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .tree-green-compact-head .tree-green-title-block {
    text-align: center;
  }

  .tree-green-compact-photo,
  .tree-green-back-image {
    min-height: 0;
    height: 230px;
  }

  .tree-green-compact-foot,
  .tree-green-compact-note {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media print {
  @page {
    size: A4 portrait;
    margin: 0;
  }

  body[data-route-page="treeGreenCard"] {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body[data-route-page="treeGreenCard"] .page {
    width: 210mm !important;
    min-height: auto !important;
  }

  body[data-route-page="treeGreenCard"] .tree-green-stack {
    display: block !important;
    width: 210mm !important;
    max-width: none !important;
  }

  body[data-route-page="treeGreenCard"] .tree-green-passport-compact {
    display: block !important;
    width: 210mm !important;
    margin: 0 !important;
  }

  body[data-route-page="treeGreenCard"] .tree-green-compact-card {
    width: var(--green-card-print-width) !important;
    height: calc(var(--green-card-print-width) / var(--green-card-ratio)) !important;
    margin: 24mm auto 0 !important;
    padding: 5.5mm !important;
    border-radius: 6mm !important;
    aspect-ratio: auto !important;
    break-inside: avoid;
    page-break-inside: avoid;
    box-shadow: none !important;
  }

  body[data-route-page="treeGreenCard"] .tree-green-compact-card + .tree-green-compact-card {
    page-break-before: always;
    break-before: page;
  }

  body[data-route-page="treeGreenCard"] .tree-green-compact-card::before {
    inset: 3mm !important;
    border-radius: 4.5mm !important;
  }

  body[data-route-page="treeGreenCard"] .tree-green-compact-head {
    grid-template-columns: 32mm minmax(0, 1fr) !important;
    gap: 4mm !important;
  }

  body[data-route-page="treeGreenCard"] .tree-green-compact-head .tree-green-vnx-mark strong {
    font-size: 11mm !important;
  }

  body[data-route-page="treeGreenCard"] .tree-green-compact-head .tree-green-vnx-mark small {
    font-size: 2.5mm !important;
  }

  body[data-route-page="treeGreenCard"] .tree-green-compact-head .tree-green-title-block h1 {
    font-size: 6mm !important;
  }

  body[data-route-page="treeGreenCard"] .tree-green-compact-head .tree-green-title-block p {
    font-size: 3mm !important;
  }

  body[data-route-page="treeGreenCard"] .tree-green-compact-id {
    margin: 3mm 0 4mm !important;
  }

  body[data-route-page="treeGreenCard"] .tree-green-compact-id span,
  body[data-route-page="treeGreenCard"] .tree-green-compact-fields dt,
  body[data-route-page="treeGreenCard"] .tree-green-compact-fact small {
    font-size: 2.35mm !important;
  }

  body[data-route-page="treeGreenCard"] .tree-green-compact-id strong {
    border-radius: 3.5mm !important;
    padding: 2.6mm 3.2mm !important;
    font-size: 5mm !important;
  }

  body[data-route-page="treeGreenCard"] .tree-green-compact-main {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) !important;
    gap: 4mm !important;
  }

  body[data-route-page="treeGreenCard"] .tree-green-compact-info {
    grid-template-columns: 29mm minmax(0, 1fr) !important;
    gap: 3mm !important;
  }

  body[data-route-page="treeGreenCard"] .tree-green-compact-qr {
    width: 29mm !important;
    border-radius: 4mm !important;
    padding: 2mm !important;
  }

  body[data-route-page="treeGreenCard"] .tree-green-compact-qr small {
    font-size: 2mm !important;
  }

  body[data-route-page="treeGreenCard"] .tree-green-compact-fields div {
    padding: 1.45mm 0 !important;
  }

  body[data-route-page="treeGreenCard"] .tree-green-compact-fields dd {
    font-size: 2.75mm !important;
  }

  body[data-route-page="treeGreenCard"] .tree-green-compact-foot,
  body[data-route-page="treeGreenCard"] .tree-green-compact-note {
    margin-top: 2.5mm !important;
    padding-top: 2.3mm !important;
    font-size: 2.5mm !important;
  }

  body[data-route-page="treeGreenCard"] .tree-green-back-image {
    margin: 4mm 0 3mm !important;
  }

  body[data-route-page="treeGreenCard"] .tree-green-compact-facts {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 2.4mm !important;
  }

  body[data-route-page="treeGreenCard"] .tree-green-compact-fact {
    grid-template-columns: 7mm minmax(0, 1fr) !important;
    gap: 2mm !important;
    border-radius: 3.5mm !important;
    padding: 2.2mm !important;
  }

  body[data-route-page="treeGreenCard"] .tree-green-compact-fact > span {
    width: 7mm !important;
    height: 7mm !important;
    border-radius: 2.4mm !important;
  }

  body[data-route-page="treeGreenCard"] .tree-green-compact-fact strong {
    font-size: 2.65mm !important;
  }
}

.invite-hero-card {
  position: relative;
  overflow: hidden;
  padding: 20px;
  border-radius: 24px;
  color: #ffffff;
  background:
    radial-gradient(circle at 88% 12%, rgba(110, 231, 183, 0.28), transparent 32%),
    linear-gradient(135deg, #06251d 0%, #0b5b46 55%, #14b8a6 100%);
  box-shadow: 0 22px 48px rgba(6, 37, 29, 0.22);
}

.invite-hero-content {
  display: grid;
  gap: 6px;
}

.invite-hero-content p {
  margin: 0;
  color: #d1fae5;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}

.invite-hero-content strong {
  font-size: clamp(1.4rem, 6vw, 2rem);
  line-height: 1.05;
}

.invite-hero-content span {
  color: rgba(236, 253, 245, 0.88);
  font-size: 0.86rem;
  line-height: 1.45;
}

.invite-code-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--card);
  box-shadow: var(--shadow-tight);
}

.invite-code-row,
.invite-link-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.invite-code-row {
  justify-content: space-between;
  flex-wrap: wrap;
}

.invite-code-row small {
  display: block;
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 700;
}

.invite-code-row strong {
  font-size: 1.3rem;
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
}

.invite-link-row input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card-tint);
  color: var(--muted-foreground);
  font-size: 0.84rem;
}

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

.invite-stat-tile {
  display: grid;
  gap: 4px;
  justify-items: center;
  padding: 14px 8px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
  text-align: center;
}

.invite-stat-tile span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  color: #047857;
  background: linear-gradient(135deg, #bbf7d0, #d1fae5);
}

.invite-stat-tile strong {
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
}

.invite-stat-tile small {
  color: var(--text-muted);
  font-size: 0.74rem;
}

.invite-list {
  display: grid;
  gap: 8px;
}

.invite-list-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
}

.invite-list-item.is-qualified {
  border-color: rgba(16, 185, 129, 0.32);
}

.invite-avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #065f46;
  background: linear-gradient(135deg, #d1fae5, #fef3c7);
  font-weight: 800;
  font-size: 0.82rem;
}

.invite-list-body {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.invite-list-body strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.invite-list-body small {
  color: var(--text-muted);
  font-size: 0.76rem;
}

.invite-credit {
  font-weight: 800;
  color: #047857;
  font-variant-numeric: tabular-nums;
}

.invite-credit.is-muted {
  color: var(--text-muted);
  font-weight: 700;
}

.planting-detail-actions,
.campaign-detail-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.planting-detail-actions .planting-detail-cta,
.campaign-detail-hero-actions .campaign-detail-hero-cta {
  margin: 0;
}

.invite-share-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.event-detail-action-panel .invite-share-button {
  margin-top: 4px;
}


.invite-list-item {
  display: grid;
  gap: 10px;
}

.invite-list-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.invite-joined-list {
  display: grid;
  gap: 6px;
  padding-left: 52px;
}

.invite-joined-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card-tint);
  color: inherit;
  text-decoration: none;
}

.invite-joined-item:hover {
  border-color: rgba(16, 185, 129, 0.32);
}

.invite-joined-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  color: #047857;
  background: linear-gradient(135deg, #bbf7d0, #d1fae5);
  flex: 0 0 auto;
}

.invite-joined-text {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.invite-joined-text strong {
  font-size: 0.86rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.invite-joined-text small {
  color: var(--text-muted);
  font-size: 0.74rem;
}

.invite-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 520px) {
  .invite-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .invite-joined-list {
    padding-left: 0;
  }
}

/* Leaderboard list score bar + medal coloring */
.leaderboard-row-bar {
  display: block;
  height: 4px;
  width: 100%;
  margin: 4px 0 2px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--primary-soft) 60%, white);
  overflow: hidden;
}

.leaderboard-row-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #16a34a, #f59e0b);
  transition: width 0.4s ease;
}

.leaderboard-row.rank-1 .leaderboard-row-rank {
  background: linear-gradient(135deg, #f59e0b, #ef6c00);
  box-shadow: 0 8px 18px rgba(245, 158, 11, 0.28);
}

.leaderboard-row.rank-2 .leaderboard-row-rank {
  background: linear-gradient(135deg, #0d9488, #0284c7);
  box-shadow: 0 8px 18px rgba(13, 148, 136, 0.22);
}

.leaderboard-row.rank-3 .leaderboard-row-rank {
  background: linear-gradient(135deg, #16a34a, #84cc16);
  box-shadow: 0 8px 18px rgba(22, 163, 74, 0.22);
}

/* Leaderboard list header + row polish */
.leaderboard-list-head {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(22, 163, 74, 0.18);
  border-radius: 18px;
  background:
    radial-gradient(circle at 92% 8%, rgba(245, 191, 11, 0.16), transparent 40%),
    linear-gradient(135deg, #06251d 0%, #0b3d31 52%, #0f766e 100%);
  color: #fff;
  box-shadow: 0 16px 34px rgba(6, 37, 29, 0.2);
}

.leaderboard-list-head::after {
  content: "\f091";
  position: absolute;
  right: -10px;
  bottom: -22px;
  font-family: "Font Awesome 7 Pro";
  font-size: 5.4rem;
  font-weight: 900;
  line-height: 1;
  color: rgba(255, 255, 255, 0.07);
  transform: rotate(-12deg);
  pointer-events: none;
}

.leaderboard-list-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 15px;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #06251d;
  box-shadow: 0 10px 22px rgba(245, 158, 11, 0.28);
}

.leaderboard-list-icon .fa-icon {
  width: 18px;
  height: 18px;
  font-size: 1rem;
}

.leaderboard-list-headings {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 2px;
}

.leaderboard-list-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: #ffe78a;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.leaderboard-list-eyebrow .fa-icon {
  width: 11px;
  height: 11px;
  font-size: 0.64rem;
}

.leaderboard-list-title {
  margin: 0;
  color: #fff;
  font-size: 1.04rem;
  line-height: 1.16;
  font-weight: 900;
}

.leaderboard-list-sub {
  margin: 0;
  color: rgba(236, 253, 245, 0.74);
  font-size: 0.68rem;
  font-weight: 700;
}

.leaderboard-list-count {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  align-self: flex-start;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 0.64rem;
  font-weight: 900;
}

.leaderboard-row {
  position: relative;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.leaderboard-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #16a34a, #f59e0b);
  opacity: 0;
  transition: opacity 0.18s ease;
}

.leaderboard-row:hover {
  transform: translateY(-1px);
  border-color: rgba(22, 163, 74, 0.28);
  box-shadow: 0 12px 26px rgba(6, 37, 29, 0.1);
}

.leaderboard-row:hover::before {
  opacity: 1;
}

.leaderboard-row.is-current-user::before {
  opacity: 1;
}

/* Dashboard full navigation grid (mobile reaches every section without sidebar) */
.dashboard-menu-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.dashboard-menu-tile {
  position: relative;
  overflow: hidden;
  min-width: 0;
  min-height: 84px;
  display: grid;
  grid-template-rows: auto minmax(16px, auto);
  align-content: center;
  justify-items: center;
  gap: 7px;
  padding: 12px 8px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
  color: var(--foreground);
  box-shadow: 0 8px 20px rgba(26, 68, 45, 0.06);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.dashboard-menu-tile:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--tile-a, var(--primary)) 40%, var(--border));
  box-shadow: 0 14px 30px rgba(26, 68, 45, 0.12);
}

.dashboard-menu-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--tile-a, #16a34a), var(--tile-b, #0d9488));
  box-shadow: 0 8px 18px color-mix(in oklab, var(--tile-a, #16a34a) 24%, transparent);
}

.dashboard-menu-icon .fa-icon {
  width: 17px;
  height: 17px;
  font-size: 0.95rem;
}

.dashboard-menu-tile strong {
  max-width: 100%;
  color: var(--foreground);
  font-size: 0.72rem;
  line-height: 1.14;
  font-weight: 800;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-menu-tile.tone-home { --tile-a: #16a34a; --tile-b: #15803d; }
.dashboard-menu-tile.tone-dashboard { --tile-a: #0d9488; --tile-b: #0f766e; }
.dashboard-menu-tile.tone-event { --tile-a: #16a34a; --tile-b: #0d9488; }
.dashboard-menu-tile.tone-tree { --tile-a: #22c55e; --tile-b: #15803d; }
.dashboard-menu-tile.tone-donate { --tile-a: #f59e0b; --tile-b: #ef6c00; }
.dashboard-menu-tile.tone-map { --tile-a: #0284c7; --tile-b: #2563eb; }
.dashboard-menu-tile.tone-knowledge { --tile-a: #0891b2; --tile-b: #0d9488; }
.dashboard-menu-tile.tone-credit { --tile-a: #7c3aed; --tile-b: #db2777; }
.dashboard-menu-tile.tone-rank { --tile-a: #f59e0b; --tile-b: #d97706; }
.dashboard-menu-tile.tone-invite { --tile-a: #0d9488; --tile-b: #16a34a; }
.dashboard-menu-tile.tone-profile { --tile-a: #475569; --tile-b: #0f172a; }
.dashboard-menu-tile.tone-admin { --tile-a: #14532d; --tile-b: #0f766e; }
.dashboard-menu-tile.tone-default { --tile-a: #16a34a; --tile-b: #0d9488; }

@media (min-width: 768px) {
  .dashboard-menu-grid {
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  }
}

.dashboard-menu-tile.tone-gift { --tile-a: #ec4899; --tile-b: #db2777; }

/* Reward shop (gift redemption) */
.rewards-hero-card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 88% 12%, rgba(245, 191, 11, 0.22), transparent 42%),
    linear-gradient(135deg, #831843 0%, #be185d 50%, #db2777 100%);
  color: #fff;
}

.rewards-hero-card::after {
  content: "\f06b";
  position: absolute;
  right: -12px;
  bottom: -26px;
  font-family: "Font Awesome 7 Pro";
  font-size: 7rem;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.08);
  transform: rotate(-12deg);
  pointer-events: none;
}

.rewards-hero-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 5px;
}

.rewards-hero-copy > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.72rem;
  font-weight: 800;
}

.rewards-hero-copy h1 {
  margin: 0;
  font-size: 1.3rem;
  line-height: 1.16;
  font-weight: 900;
}

.rewards-hero-copy p {
  margin: 0;
  max-width: 30rem;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.76rem;
  line-height: 1.45;
}

.rewards-hero-balance {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: grid;
  justify-items: end;
  text-align: right;
}

.rewards-hero-balance small {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.66rem;
  font-weight: 800;
}

.rewards-hero-balance strong {
  font-size: 1.5rem;
  font-weight: 900;
}

.rewards-hero-balance em {
  font-size: 0.84rem;
  font-style: normal;
  font-weight: 800;
}

.rewards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  width: 100%;
}

.reward-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--card);
  box-shadow: 0 8px 20px rgba(26, 68, 45, 0.06);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.reward-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(26, 68, 45, 0.12);
}

.reward-card.is-locked {
  opacity: 0.92;
}

.reward-card-media {
  position: relative;
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #fce7f3, #fbcfe8);
  color: #db2777;
}

.reward-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reward-card-placeholder .fa-icon {
  width: 40px;
  height: 40px;
  font-size: 2.2rem;
  opacity: 0.7;
}

.reward-card-flag {
  position: absolute;
  top: 8px;
  left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #be185d;
  font-size: 0.62rem;
  font-weight: 900;
}

.reward-card-stock {
  position: absolute;
  bottom: 8px;
  right: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.62);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
}

.reward-card-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  padding: 14px;
}

.reward-card-body h3 {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.2;
  font-weight: 900;
  color: var(--foreground);
  overflow-wrap: anywhere;
}

.reward-card-body p {
  margin: 0;
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--muted-foreground);
}

.reward-card-eligibility {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--primary-strong);
}

.reward-card-eligibility .fa-icon {
  width: 11px;
  height: 11px;
}

.reward-card-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 4px;
  min-width: 0;
}

.reward-card-cost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.92rem;
  font-weight: 900;
  color: #be185d;
}

.reward-redeem-button {
  flex: 0 0 auto;
}

@media (max-width: 520px) {
  .rewards-hero-card {
    align-items: flex-start;
    flex-direction: column;
  }

  .rewards-hero-balance {
    justify-items: start;
    text-align: left;
  }

  .reward-card-foot {
    align-items: stretch;
    flex-direction: column;
  }

  .reward-redeem-button {
    width: 100%;
  }
}

.reward-redeem-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.reward-card-reason {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  font-weight: 700;
  color: #b45309;
}

.reward-card-reason .fa-icon {
  width: 11px;
  height: 11px;
}

.rewards-history {
  display: grid;
  gap: 9px;
}

.reward-history-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
}

.reward-history-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, #fce7f3, #fbcfe8);
  color: #db2777;
}

.reward-history-copy {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 2px;
}

.reward-history-copy strong {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reward-history-copy small {
  font-size: 0.66rem;
  color: var(--muted-foreground);
}

.reward-history-meta {
  flex: 0 0 auto;
  display: grid;
  justify-items: end;
  gap: 4px;
}

.reward-history-cost {
  font-size: 0.82rem;
  font-weight: 900;
  color: #be185d;
}

.reward-card-type {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(16, 122, 87, 0.1);
  color: #0f766e;
  font-size: 0.72rem;
  font-weight: 800;
}

.reward-card-type .fa-icon {
  width: 13px;
  height: 13px;
}

.reward-history-code {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 0.78rem;
  color: #0f766e;
}

.reward-history-code strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.04em;
}

.reward-history-note {
  display: block;
  margin-top: 2px;
  color: #4b5563;
}

.reward-redeem-dialog {
  width: min(520px, 100%);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 28px 60px rgba(4, 47, 24, 0.32);
}

.reward-redeem-dialog-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.reward-redeem-dialog-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(16, 122, 87, 0.12);
  color: #0f766e;
  flex-shrink: 0;
}

.reward-redeem-dialog-head .eyebrow {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #0f766e;
}

.reward-redeem-dialog-head h2 {
  margin: 2px 0;
  font-size: 1.08rem;
}

.reward-redeem-dialog-head > div {
  flex: 1;
}

.reward-redeem-dialog-head span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.82rem;
  font-weight: 800;
  color: #be185d;
}

.reward-redeem-close {
  border: none;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  padding: 4px;
  border-radius: 8px;
}

.reward-redeem-close:hover {
  background: rgba(0, 0, 0, 0.05);
}

.reward-redeem-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(16, 122, 87, 0.08);
  color: #115e59;
  font-size: 0.82rem;
}

.reward-redeem-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.reward-redeem-dialog .form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.reward-redeem-dialog .form-field > span {
  font-size: 0.8rem;
  font-weight: 700;
  color: #374151;
}

.reward-redeem-dialog input,
.reward-redeem-dialog textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  font: inherit;
}

.reward-redeem-dialog textarea {
  resize: vertical;
}

.reward-redeem-error {
  margin: 0;
  color: #b91c1c;
  font-size: 0.82rem;
}

.reward-redeem-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

@media (min-width: 640px) {
  .rewards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .rewards-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

body[data-route-page="intro"] {
  background: #062417;
}

body[data-route-page="intro"] #app,
body[data-route-page="intro"] .app-shell,
body[data-route-page="intro"] .app-frame,
body[data-route-page="intro"] .app-main {
  width: 100%;
  min-height: 100svh;
}

body[data-route-page="intro"] .app-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) !important;
  background: #062417;
}

body[data-route-page="intro"] .app-shell::before,
body[data-route-page="intro"] .app-shell::after,
body[data-route-page="intro"] .app-sidebar,
body[data-route-page="intro"] .topbar,
body[data-route-page="intro"] .bottom-nav {
  display: none !important;
}

body[data-route-page="intro"] .app-frame {
  grid-column: 1 !important;
  grid-template-rows: minmax(0, 1fr);
}

body[data-route-page="intro"] .app-main {
  padding: 0 !important;
  overflow-x: hidden;
}

.journey-intro-page {
  --intro-green-950: #062417;
  --intro-green-900: #0b3322;
  --intro-green-800: #12472f;
  --intro-green-700: #1c5739;
  --intro-mint: #8ee8c5;
  --intro-aqua: #6ed7c7;
  --intro-lime: #c8f76f;
  --intro-sky: #8edcff;
  --intro-sun: #fad014;
  --intro-paper: #fffdf2;
  --intro-text: #f7fff7;
  --intro-muted: rgba(247, 255, 247, 0.78);
  --intro-line: rgba(255, 255, 255, 0.18);
  --intro-shadow: 0 26px 80px rgba(0, 0, 0, 0.34);
  width: 100%;
  max-width: none;
  min-height: 100svh;
  margin: 0;
  padding: 0;
  color: var(--intro-text);
  background: var(--intro-green-950);
}

.intro-site {
  position: relative;
  min-height: 100svh;
  isolation: isolate;
  overflow: hidden;
}

.intro-site::before {
  position: fixed;
  inset: 0;
  z-index: -4;
  content: "";
  background:
    linear-gradient(112deg, rgba(6, 36, 23, 0.96) 0%, rgba(9, 47, 32, 0.82) 38%, rgba(5, 25, 19, 0.62) 100%),
    linear-gradient(180deg, rgba(6, 36, 23, 0.12), rgba(6, 36, 23, 0.92)),
    url("/hanhtrinh-reference/assets/hero-bg.png") center / cover no-repeat;
  transform: scale(1.02);
}

.intro-site::after {
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(125deg, transparent 0 52%, rgba(250, 208, 20, 0.1) 52.2%, transparent 54%),
    linear-gradient(155deg, transparent 0 58%, rgba(110, 215, 199, 0.12) 58.2%, transparent 60%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 112px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 112px);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.8), transparent 78%);
}

.intro-wrap {
  width: min(100% - 40px, 1180px);
  margin-inline: auto;
}

.intro-enter-app {
  position: fixed;
  top: max(18px, env(safe-area-inset-top));
  right: max(18px, env(safe-area-inset-right));
  z-index: 80;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  color: #102719;
  background: linear-gradient(135deg, #fff4b4, var(--intro-sun), var(--intro-lime));
  box-shadow: 0 18px 48px rgba(250, 208, 20, 0.28), 0 0 0 8px rgba(250, 208, 20, 0.08);
  font-size: 0.92rem;
  font-weight: 950;
  text-decoration: none;
}

.intro-enter-app::after {
  width: 8px;
  height: 8px;
  margin-left: 10px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  content: "";
  transform: rotate(45deg);
}

.intro-enter-app:hover {
  transform: translateY(-1px);
  box-shadow: 0 22px 56px rgba(250, 208, 20, 0.34), 0 0 0 9px rgba(250, 208, 20, 0.1);
}

.intro-glow-lines,
.intro-spark-field {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

.intro-glow-lines {
  opacity: 0.72;
}

.intro-glow-lines span {
  position: absolute;
  width: 46vw;
  height: 2px;
  transform: rotate(-18deg);
  transform-origin: left center;
  background: linear-gradient(90deg, transparent, rgba(250, 208, 20, 0.88), rgba(142, 232, 197, 0.58), transparent);
  box-shadow: 0 0 18px rgba(250, 208, 20, 0.2), 0 0 30px rgba(142, 232, 197, 0.16);
  animation: intro-sweep 9s linear infinite;
}

.intro-glow-lines span:nth-child(1) { top: 16%; left: -20%; }
.intro-glow-lines span:nth-child(2) { top: 55%; left: -28%; width: 58vw; animation-delay: 2.6s; }
.intro-glow-lines span:nth-child(3) { top: 82%; left: -14%; width: 42vw; animation-delay: 5.4s; }

@keyframes intro-sweep {
  0% { transform: translateX(-18vw) rotate(-18deg); opacity: 0; }
  14% { opacity: 1; }
  88% { opacity: 0.85; }
  100% { transform: translateX(132vw) rotate(-18deg); opacity: 0; }
}

.intro-spark-field {
  z-index: -1;
  overflow: hidden;
  opacity: 0.92;
}

.intro-spark-field span {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--intro-sun);
  box-shadow: 0 0 18px rgba(250, 208, 20, 0.42);
  animation: intro-spark 7s ease-in-out infinite;
}

.intro-spark-field span:nth-child(1) { top: 18%; left: 12%; animation-delay: 0s; }
.intro-spark-field span:nth-child(2) { top: 72%; left: 18%; background: var(--intro-aqua); animation-delay: 1.3s; }
.intro-spark-field span:nth-child(3) { top: 24%; right: 19%; background: var(--intro-lime); animation-delay: 2.1s; }
.intro-spark-field span:nth-child(4) { top: 63%; right: 14%; animation-delay: 3.1s; }
.intro-spark-field span:nth-child(5) { top: 41%; left: 48%; background: var(--intro-sky); animation-delay: 4.2s; }
.intro-spark-field span:nth-child(6) { top: 86%; right: 32%; background: var(--intro-aqua); animation-delay: 5.2s; }

@keyframes intro-spark {
  0%, 100% { opacity: 0.18; transform: translate3d(0, 0, 0) scale(0.7); }
  45% { opacity: 1; transform: translate3d(10px, -18px, 0) scale(1.1); }
}

.intro-topbar {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 0 10px;
}

.intro-brand {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.intro-brand img {
  display: block;
  width: min(220px, 54vw);
  height: auto;
  filter: drop-shadow(0 14px 34px rgba(0, 0, 0, 0.26));
}

.intro-nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 172px;
}

.intro-icon-link,
.intro-small-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(247, 255, 247, 0.88);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 14px 34px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(18px);
  text-decoration: none;
}

.intro-icon-link {
  width: 44px;
  min-height: 44px;
  border-radius: 50%;
}

.intro-icon-link svg {
  width: 19px;
  height: 19px;
}

.intro-small-button {
  min-height: 44px;
  padding: 0 15px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 850;
}

.intro-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(330px, 0.95fr);
  align-items: center;
  gap: clamp(28px, 5vw, 68px);
  min-height: calc(100svh - 92px);
  padding: 34px 0 54px;
}

.intro-copy,
.intro-visual {
  position: relative;
}

.intro-copy {
  z-index: 2;
  min-width: 0;
}

.intro-launch-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  margin: 0 0 22px;
  padding: 8px 14px 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  color: rgba(247, 255, 247, 0.88);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.07));
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(18px);
  font-size: 0.9rem;
  font-weight: 800;
}

.intro-launch-pill span:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  color: #102719;
  background: linear-gradient(135deg, var(--intro-sun), var(--intro-lime));
  font-size: 0.74rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.intro-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  color: var(--intro-paper);
  font-size: 0.84rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.intro-eyebrow::before {
  width: 42px;
  height: 2px;
  content: "";
  background: linear-gradient(90deg, var(--intro-sun), var(--intro-aqua));
}

.journey-intro-page h1 {
  max-width: 760px;
  margin: 0;
  color: #ffffff;
  font-size: clamp(3.2rem, 10vw, 7.8rem);
  line-height: 0.89;
  letter-spacing: 0;
  text-shadow: 0 18px 58px rgba(0, 0, 0, 0.34), 0 0 44px rgba(142, 232, 197, 0.12);
}

.journey-intro-page h1 span {
  position: relative;
  display: inline-block;
  color: transparent;
  background: linear-gradient(100deg, #fff6ba 0%, var(--intro-sun) 42%, var(--intro-lime) 76%, var(--intro-aqua) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  filter: drop-shadow(0 12px 28px rgba(250, 208, 20, 0.18));
}

.journey-intro-page h1 span::after {
  position: absolute;
  right: 0.03em;
  bottom: -0.12em;
  left: 0.02em;
  height: 0.08em;
  border-radius: 999px;
  content: "";
  background: linear-gradient(90deg, transparent, var(--intro-sun), var(--intro-aqua), transparent);
  opacity: 0.82;
}

.intro-lead {
  max-width: 680px;
  margin: 24px 0 0;
  color: var(--intro-muted);
  font-size: clamp(1.05rem, 2.4vw, 1.32rem);
  line-height: 1.65;
}

.intro-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.intro-store-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  color: #102719;
  background: linear-gradient(135deg, rgba(255, 253, 242, 0.98), rgba(226, 255, 237, 0.94));
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.72);
  text-decoration: none;
}

.intro-store-button svg {
  width: 27px;
  height: 27px;
  color: var(--intro-green-700);
}

.intro-store-button small,
.intro-store-button strong {
  display: block;
  line-height: 1.05;
}

.intro-store-button small {
  color: rgba(16, 39, 25, 0.68);
  font-size: 0.72rem;
  font-weight: 800;
}

.intro-store-button strong {
  margin-top: 3px;
  font-size: 1.02rem;
  font-weight: 950;
}

.intro-store-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.intro-status-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 720px;
  margin-top: 38px;
}

.intro-status-item {
  position: relative;
  min-height: 126px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.065)),
    linear-gradient(135deg, rgba(250, 208, 20, 0.08), transparent 56%);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(18px);
}

.intro-status-item::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  content: "";
  background: linear-gradient(90deg, var(--intro-sun), var(--intro-aqua), transparent);
  opacity: 0.75;
}

.intro-status-item::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(115deg, transparent 0 34%, rgba(255, 255, 255, 0.22) 42%, transparent 50% 100%);
  transform: translateX(-120%);
  animation: intro-sheen 7.5s ease-in-out infinite;
}

.intro-status-item:nth-child(2)::after { animation-delay: 1.1s; }
.intro-status-item:nth-child(3)::after { animation-delay: 2.2s; }

@keyframes intro-sheen {
  0%, 38% { transform: translateX(-120%); }
  62%, 100% { transform: translateX(120%); }
}

.intro-status-icon,
.intro-status-item strong,
.intro-status-item span:last-child {
  position: relative;
  z-index: 1;
}

.intro-status-icon {
  display: inline-grid;
  place-items: center;
  width: 34px;
  aspect-ratio: 1;
  margin-bottom: 14px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  color: #102719;
  background: linear-gradient(135deg, var(--intro-sun), var(--intro-aqua));
  box-shadow: 0 10px 24px rgba(110, 215, 199, 0.18);
  font-size: 0.84rem;
  font-weight: 950;
}

.intro-status-item strong {
  display: block;
  color: #ffffff;
  font-size: clamp(1.05rem, 2vw, 1.24rem);
  line-height: 1.15;
}

.intro-status-item span:last-child {
  display: block;
  margin-top: 10px;
  color: rgba(247, 255, 247, 0.74);
  font-size: 0.92rem;
  line-height: 1.45;
}

.intro-visual {
  min-height: 620px;
  min-width: 330px;
}

.intro-visual::before {
  position: absolute;
  inset: 28px 0 18px;
  z-index: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  content: "";
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 22px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 24px 70px rgba(0, 0, 0, 0.16);
  opacity: 0.58;
  transform: perspective(900px) rotateY(-6deg) rotateX(2deg);
}

.intro-impact-app {
  position: absolute;
  inset: 34px 8px 26px;
  z-index: 2;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(5, 37, 29, 0.9), rgba(16, 76, 52, 0.78)),
    url("/hanhtrinh-reference/assets/community.jpg") center / cover no-repeat;
  box-shadow: 0 34px 100px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transform: perspective(1000px) rotateY(-5deg) rotateX(2deg);
}

.intro-impact-app::before {
  position: absolute;
  inset: 0;
  content: "";
  background:
    radial-gradient(circle at 22% 24%, rgba(250, 208, 20, 0.22), transparent 28%),
    radial-gradient(circle at 74% 34%, rgba(142, 232, 197, 0.2), transparent 26%),
    radial-gradient(circle at 62% 78%, rgba(141, 220, 255, 0.18), transparent 30%),
    linear-gradient(180deg, rgba(6, 36, 23, 0.72), rgba(6, 36, 23, 0.9));
}

.intro-impact-app::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.065) 0 1px, transparent 1px 54px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 54px);
  mask-image: radial-gradient(circle at 54% 52%, black, transparent 78%);
  opacity: 0.74;
}

.intro-app-topline {
  position: absolute;
  top: 18px;
  right: 18px;
  left: 18px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 58px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  background: rgba(7, 39, 28, 0.58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 18px 44px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(16px);
}

.intro-app-topline strong,
.intro-impact-card strong {
  display: block;
  color: #ffffff;
  font-size: 0.96rem;
  line-height: 1.12;
}

.intro-app-topline span,
.intro-impact-card span {
  display: block;
  margin-top: 4px;
  color: rgba(247, 255, 247, 0.72);
  font-size: 0.78rem;
  line-height: 1.35;
}

.intro-app-counter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  color: #102719;
  background: linear-gradient(135deg, #fff3ae, var(--intro-sun), var(--intro-lime));
  box-shadow: 0 14px 34px rgba(250, 208, 20, 0.22);
  font-size: 0.82rem;
  font-weight: 950;
  white-space: nowrap;
}

.intro-impact-route {
  position: absolute;
  inset: 98px 30px 98px 28px;
  z-index: 3;
  width: calc(100% - 58px);
  height: calc(100% - 196px);
  overflow: visible;
  filter: drop-shadow(0 0 16px rgba(142, 232, 197, 0.22));
}

.intro-impact-route path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.intro-impact-route .intro-track {
  stroke: rgba(255, 255, 255, 0.22);
  stroke-width: 4;
  stroke-dasharray: 4 14;
}

.intro-impact-route .intro-live {
  stroke: url(#introImpactGradient);
  stroke-width: 5;
  stroke-dasharray: 82 520;
  animation: intro-route-pulse 8.4s ease-in-out infinite;
}

@keyframes intro-route-pulse {
  from { stroke-dashoffset: 620; }
  to { stroke-dashoffset: 0; }
}

.intro-plant-point {
  position: absolute;
  z-index: 5;
  width: 86px;
  height: 96px;
  transform: translate(-50%, -50%);
}

.intro-plant-point.one { top: 32%; left: 22%; }
.intro-plant-point.two { top: 46%; left: 71%; }
.intro-plant-point.three { top: 72%; left: 44%; }

.intro-tap-ring {
  position: absolute;
  top: 30px;
  left: 50%;
  width: 62px;
  aspect-ratio: 1;
  border: 2px solid rgba(250, 208, 20, 0.72);
  border-radius: 50%;
  transform: translateX(-50%) scale(0.2);
  animation: intro-tap-burst 8.4s ease-in-out infinite;
}

.intro-plant-point.two .intro-tap-ring,
.intro-plant-point.two .intro-tree-sprout,
.intro-plant-point.two .intro-plant-label { animation-delay: 2.7s; }

.intro-plant-point.three .intro-tap-ring,
.intro-plant-point.three .intro-tree-sprout,
.intro-plant-point.three .intro-plant-label { animation-delay: 5.4s; }

.intro-tree-sprout {
  position: absolute;
  top: 28px;
  left: 50%;
  width: 46px;
  height: 52px;
  transform: translateX(-50%) scale(0.42);
  transform-origin: 50% 88%;
  animation: intro-tree-grow 8.4s ease-in-out infinite;
}

.intro-tree-sprout::before {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 8px;
  height: 32px;
  border-radius: 999px;
  content: "";
  background: linear-gradient(180deg, #e8d071, #725325);
  transform: translateX(-50%);
}

.intro-tree-sprout::after {
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 48px;
  height: 12px;
  border-radius: 50%;
  content: "";
  background: rgba(20, 63, 35, 0.82);
  box-shadow: 0 0 26px rgba(142, 232, 197, 0.24);
  transform: translateX(-50%);
  animation: intro-soil-glow 8.4s ease-in-out infinite;
}

.intro-tree-sprout i {
  position: absolute;
  top: 2px;
  left: 50%;
  width: 28px;
  height: 20px;
  border-radius: 999px 999px 999px 16px;
  background: linear-gradient(135deg, var(--intro-lime), var(--intro-aqua));
  transform-origin: 0 100%;
  box-shadow: 0 8px 18px rgba(142, 232, 197, 0.18);
}

.intro-tree-sprout i:nth-child(1) { transform: translateX(-5px) rotate(-38deg); }
.intro-tree-sprout i:nth-child(2) { top: 8px; transform: translateX(-3px) rotate(34deg) scale(0.9); }
.intro-tree-sprout i:nth-child(3) { top: 15px; transform: translateX(-16px) rotate(-8deg) scale(0.78); }

.intro-plant-label {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  color: #102719;
  background: rgba(255, 253, 242, 0.92);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
  font-size: 0.74rem;
  font-weight: 900;
  white-space: nowrap;
  transform: translateX(-50%) translateY(8px);
  animation: intro-label-pop 8.4s ease-in-out infinite;
}

.intro-tap-hand {
  position: absolute;
  z-index: 6;
  top: 0;
  left: 0;
  width: 86px;
  color: #ffeaa0;
  filter: drop-shadow(0 22px 24px rgba(0, 0, 0, 0.34));
  animation: intro-hand-plant 8.4s ease-in-out infinite;
}

.intro-hand-touch {
  animation: intro-finger-press 8.4s ease-in-out infinite;
}

.intro-impact-card {
  position: absolute;
  right: 22px;
  bottom: 22px;
  z-index: 6;
  width: min(280px, calc(100% - 44px));
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  background: rgba(7, 39, 28, 0.64);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(18px);
}

.intro-impact-progress {
  position: relative;
  height: 8px;
  margin-top: 14px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
}

.intro-impact-progress::before {
  position: absolute;
  inset: 0;
  width: 72%;
  border-radius: inherit;
  content: "";
  background: linear-gradient(90deg, var(--intro-sun), var(--intro-aqua), var(--intro-lime));
  box-shadow: 0 0 18px rgba(142, 232, 197, 0.24);
  animation: intro-progress-breath 4.2s ease-in-out infinite;
}

@keyframes intro-tap-burst {
  0%, 5%, 100% { opacity: 0; transform: translateX(-50%) scale(0.2); }
  9% { opacity: 1; transform: translateX(-50%) scale(1); }
  18% { opacity: 0; transform: translateX(-50%) scale(2.9); }
}

@keyframes intro-soil-glow {
  0%, 8%, 100% { opacity: 0.28; transform: translateX(-50%) scale(0.62); }
  18%, 72% { opacity: 1; transform: translateX(-50%) scale(1); }
}

@keyframes intro-tree-grow {
  0%, 10%, 100% { opacity: 0.48; transform: translateX(-50%) scale(0.42); }
  18% { opacity: 1; transform: translateX(-50%) scale(1.08); }
  24%, 78% { opacity: 1; transform: translateX(-50%) scale(1); }
  90% { opacity: 0.78; transform: translateX(-50%) scale(0.82); }
}

@keyframes intro-label-pop {
  0%, 16%, 100% { opacity: 0; transform: translateX(-50%) translateY(8px); }
  24%, 76% { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes intro-hand-plant {
  0%, 5% { opacity: 0; transform: translate(92px, 226px) rotate(-18deg); }
  8%, 22% { opacity: 1; transform: translate(92px, 226px) rotate(-18deg); }
  30%, 43% { opacity: 1; transform: translate(344px, 296px) rotate(-12deg); }
  54%, 68% { opacity: 1; transform: translate(214px, 428px) rotate(-16deg); }
  80%, 100% { opacity: 0; transform: translate(214px, 428px) rotate(-16deg); }
}

@keyframes intro-finger-press {
  0%, 8%, 17%, 30%, 39%, 54%, 63%, 100% { transform: translateY(0); }
  12%, 34%, 58% { transform: translateY(6px); }
}

@keyframes intro-progress-breath {
  0%, 100% { width: 62%; }
  50% { width: 86%; }
}

.intro-emblem {
  position: absolute;
  z-index: 4;
  top: 44px;
  right: 22px;
  display: grid;
  place-items: center;
  width: 148px;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(20, 82, 55, 0.66), rgba(9, 45, 31, 0.46));
  box-shadow: var(--intro-shadow), 0 0 0 12px rgba(250, 208, 20, 0.035), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(18px);
  animation: intro-float 6s ease-in-out infinite;
}

.intro-emblem::before {
  position: absolute;
  inset: -12px;
  border: 1px solid rgba(250, 208, 20, 0.32);
  border-radius: inherit;
  content: "";
  animation: intro-pulse-ring 3.8s ease-in-out infinite;
}

.intro-emblem img {
  width: 84px;
  height: 84px;
  object-fit: contain;
}

@keyframes intro-pulse-ring {
  0%, 100% { opacity: 0.28; transform: scale(0.92); }
  50% { opacity: 0.72; transform: scale(1.08); }
}

@keyframes intro-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

.intro-download-band {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 34px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.06));
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(18px);
}

.intro-download-band h2 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(1.55rem, 4vw, 2.55rem);
  line-height: 1.05;
}

.intro-download-band p:last-child {
  max-width: 700px;
  margin: 10px 0 0;
  color: var(--intro-muted);
  line-height: 1.55;
}

.intro-download-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 999px;
  color: #102719;
  background: linear-gradient(135deg, #fff4b4, var(--intro-sun), var(--intro-lime));
  box-shadow: 0 16px 34px rgba(250, 208, 20, 0.2);
  font-size: 0.92rem;
  font-weight: 950;
  text-decoration: none;
  white-space: nowrap;
}

.intro-contact-band {
  position: relative;
  z-index: 1;
  padding: 18px 0 34px;
}

.intro-contact-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(247, 255, 247, 0.8);
  font-size: 0.94rem;
}

.intro-contact-list,
.intro-social-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
}

.intro-contact-list a,
.intro-social-list a {
  color: rgba(247, 255, 247, 0.84);
  text-decoration: none;
}

.intro-contact-list a:hover,
.intro-social-list a:hover {
  color: #ffffff;
}

@media (max-width: 1080px) {
  .intro-nav-actions {
    padding-right: 150px;
  }
}

@media (max-width: 980px) {
  .intro-hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: 38px;
  }

  .intro-visual {
    min-height: 520px;
    order: -1;
  }
}

@media (max-width: 720px) {
  .intro-wrap {
    width: min(100% - 28px, 1180px);
  }

  .intro-site::before {
    background:
      linear-gradient(180deg, rgba(6, 36, 23, 0.92), rgba(6, 36, 23, 0.78) 48%, rgba(6, 36, 23, 0.96)),
      url("/hanhtrinh-reference/assets/hero-bg.png") center / cover no-repeat;
  }

  .intro-site::after {
    opacity: 0.42;
  }

  .intro-enter-app {
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    min-height: 44px;
    padding: 0 14px;
    font-size: 0.84rem;
  }

  .intro-topbar {
    align-items: flex-start;
    padding-block: 18px 8px;
  }

  .intro-brand img {
    width: min(206px, 58vw);
  }

  .intro-nav-actions {
    gap: 8px;
    padding-right: 0;
    padding-top: 50px;
  }

  .intro-small-button {
    display: none;
  }

  .intro-icon-link {
    width: 42px;
    min-height: 42px;
  }

  .intro-hero {
    gap: 28px;
    padding: 18px 0 36px;
  }

  .intro-launch-pill {
    align-items: flex-start;
    border-radius: 18px;
    padding: 10px;
    font-size: 0.84rem;
  }

  .journey-intro-page h1 {
    font-size: clamp(3.15rem, 17vw, 5.4rem);
  }

  .intro-lead {
    margin-top: 18px;
  }

  .intro-hero-actions,
  .intro-store-button {
    width: 100%;
  }

  .intro-store-button {
    justify-content: flex-start;
  }

  .intro-status-row {
    grid-template-columns: 1fr;
    margin-top: 30px;
  }

  .intro-status-item {
    min-height: 96px;
  }

  .intro-visual {
    min-height: 520px;
  }

  .intro-visual::before {
    inset: 14px 0 8px;
    transform: none;
  }

  .intro-impact-app {
    transform: none;
  }

  .intro-impact-route {
    inset: 98px 18px 98px;
    width: calc(100% - 36px);
  }

  .intro-tap-hand {
    animation-name: intro-hand-plant-mobile;
  }

  .intro-plant-point.one { top: 35%; left: 22%; }
  .intro-plant-point.two { top: 47%; left: 76%; }
  .intro-plant-point.three { top: 68%; left: 44%; }

  @keyframes intro-hand-plant-mobile {
    0%, 5% { opacity: 0; transform: translate(48px, 160px) rotate(-18deg); }
    8%, 22% { opacity: 1; transform: translate(48px, 160px) rotate(-18deg); }
    30%, 43% { opacity: 1; transform: translate(193px, 217px) rotate(-12deg); }
    54%, 68% { opacity: 1; transform: translate(110px, 195px) rotate(-16deg); }
    80%, 100% { opacity: 0; transform: translate(110px, 195px) rotate(-16deg); }
  }

  .intro-emblem {
    top: 10px;
    right: 4%;
    width: 104px;
  }

  .intro-emblem img {
    width: 62px;
    height: 62px;
  }

  .intro-download-band {
    align-items: flex-start;
    flex-direction: column;
    padding: 20px;
  }

  .intro-download-cta {
    width: 100%;
  }

  .intro-contact-inner {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 430px) {
  .intro-visual {
    min-height: 500px;
  }

  .intro-app-topline {
    right: 12px;
    left: 12px;
  }

  .intro-impact-card {
    right: 14px;
    bottom: 14px;
    width: calc(100% - 28px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .journey-intro-page *,
  .journey-intro-page *::before,
  .journey-intro-page *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}