:root {
  --bg-page: #edf4ef;
  --bg-header: #ffffff;
  --bg-soft: #f4faf6;
  --text-main: #243548;
  --text-muted: #657b90;
  --line: #d8e2ec;
  --line-strong: #ccd8e4;
  --brand: #3fb96c;
  --brand-dark: #2d9856;
  --success: #2f9d5d;
  --hero-a: #2f7f4d;
  --hero-b: #3ea861;
  --hero-c: #2f6f57;
  --font-ui: "Manrope", sans-serif;
  --font-brand: "Plus Jakarta Sans", sans-serif;
  --font-logo: "Sora", sans-serif;
}

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

html {
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: #d9dde2;
  color: var(--text-main);
  font-family: var(--font-ui);
  overflow-y: scroll;
}

#siteHeaderMount {
  display: block;
  min-height: 112px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: linear-gradient(180deg, var(--bg-header), #fcfdff);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 8px 18px rgba(29, 47, 66, 0.06);
}

.site-header::after {
  content: "";
  display: block;
  height: 1px;
  background: #cdd4dd;
}

.utility-row,
.primary-row {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0.72rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.utility-row {
  border-bottom: 1px solid #e3eaf2;
}

.utility-left,
.utility-right,
.primary-actions {
  display: flex;
  align-items: center;
  gap: 0.46rem;
}

.brand {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.46rem;
  margin-right: 0.2rem;
}

.brand-logo-wrap {
  width: 42px;
  height: 42px;
  border-radius: 0;
  overflow: visible;
  position: relative;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.brand-logo-wrap::before {
  content: none;
  position: absolute;
  inset: -10px;
  background: radial-gradient(circle, rgba(63, 185, 108, 0.3), transparent 62%);
  pointer-events: none;
}

.brand-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transform: none;
  display: block;
}

.brand-badge {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  display: none;
  place-items: center;
  background: linear-gradient(135deg, #52ca7c, #2fa963);
  color: #ffffff;
  font-family: var(--font-brand);
  font-weight: 800;
  font-size: 0.76rem;
}

.brand-logo-wrap.fallback .brand-badge {
  display: grid;
}

.brand-text {
  color: #2a7d4b;
  font-family: var(--font-logo);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.02em;
  line-height: 1;
  text-rendering: geometricPrecision;
  background: linear-gradient(120deg, #1f6e41 0%, #39a862 55%, #2c5d43 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

.quick-links {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.quick-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  text-decoration: none;
  color: #486279;
  border-radius: 8px;
  padding: 0.42rem 0.64rem;
}

.quick-links a:hover {
  background: #edf8f1;
  color: #244634;
}

.top-links a {
  color: #40586f;
  font-size: 0.84rem;
  font-weight: 600;
  padding: 0.34rem 0.5rem;
  letter-spacing: 0.01em;
}

.top-links {
  margin-left: 0.35rem;
}

.ghost-link,
.solid-link,
.cart-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  text-decoration: none;
  border-radius: 8px;
  padding: 0.45rem 0.7rem;
  font-weight: 700;
  white-space: nowrap;
}

.ghost-link {
  border: 1px solid var(--line-strong);
  background: #ffffff;
  color: #2b4258;
}

.solid-link {
  border: 1px solid var(--line-strong);
  background: #ffffff;
  color: #2b4258;
}

.solid-link:hover {
  background: #eef8f2;
}

.auth-user-link {
  max-width: 172px;
}

.auth-user-link .auth-user-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.auth-user-compact {
  padding: 0.4rem 0.62rem;
  font-size: 0.88rem;
  border: 0;
  background: transparent;
  box-shadow: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.auth-user-compact:hover {
  background: #eef8f2;
  color: #1f5f3f;
}

.user-message-link {
  border: 1px solid var(--line-strong);
  background: #ffffff;
  padding: 0.4rem 0.58rem;
  color: #486279;
  font-size: 0.82rem;
}

.user-message-link i {
  font-size: 0.78rem;
}

.updates-pill {
  min-width: 18px;
  height: 18px;
  padding: 0 0.28rem;
  border-radius: 999px;
  border: 1px solid #2f9d5d;
  background: #3fb96c;
  color: #ffffff;
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.08rem;
}

.mobile-updates-pill {
  margin-left: 0.34rem;
}

.user-message-link-first {
  position: relative;
  margin-left: 0.28rem;
}

.user-message-link-first::before {
  content: "";
  position: absolute;
  left: -0.68rem;
  top: -2px;
  bottom: -2px;
  width: 1px;
  background: #d4dde8;
}

.user-message-link:hover {
  background: #eef8f2;
  color: #1f5f3f;
}

.user-avatar {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  background: var(--avatar-bg, #3fb96c);
  color: #ffffff;
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1;
  border: 1px solid rgba(255, 255, 255, 0.34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
  flex: 0 0 20px;
}

.user-avatar.has-image {
  color: transparent;
  background: #eef5f0;
}

.user-avatar.has-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: var(--avatar-position-x, 50%) var(--avatar-position-y, 50%);
  transform: scale(var(--avatar-zoom, 1));
  transform-origin: center center;
  display: block;
  border-radius: inherit;
}

.user-avatar-large {
  width: 62px;
  height: 62px;
  font-size: 1.55rem;
  border-width: 2px;
  flex-basis: 62px;
}

.menu-toggle {
  display: none;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid var(--line-strong);
  background: #ffffff;
  color: #2e4660;
  border-radius: 8px;
  padding: 0.45rem 0.72rem;
}

.primary-row {
  padding-top: 0.66rem;
  padding-bottom: 0.66rem;
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: 0.52rem;
}

.simple-nav {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  text-decoration: none;
  border: 1px solid transparent;
  background: #ffffff;
  color: #334d63;
  border-radius: 8px;
  padding: 0.38rem 0.52rem;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.84rem;
}

.simple-nav:hover {
  background: #edf8f1;
  color: #26533b;
}

.active-cat {
  background: #ffffff;
  color: #334d63;
  border-color: transparent;
  box-shadow: none;
}

.cart-chip {
  border: 1px solid transparent;
  background: transparent;
  color: #44657c;
  padding: 0.32rem 0.52rem;
  border-radius: 7px;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
}

.cart-chip i {
  font-size: 0.75rem;
}

.cart-chip:hover {
  background: #eef7ff;
  color: #2e5068;
  border-color: #d8e1eb;
}

.wish-chip {
  border-color: #d2dae6;
  background: #ffffff;
  color: #4b6378;
}

.primary-divider {
  width: 1px;
  height: 22px;
  background: #d4dde8;
  align-self: center;
}

.wish-chip:hover {
  background: #f3f8fd;
  color: #304b62;
}

.purchases-chip {
  border-color: #ced9e6;
  background: #ffffff;
  color: #44657c;
}

.purchases-chip:hover {
  background: #eef7ff;
  color: #2e5068;
}

.creator-chip {
  border-color: #d3d9e5;
  background: #ffffff;
  color: #3f6178;
}

.creator-chip:hover {
  background: #eef6fd;
  color: #2f5068;
}

.mobile-menu {
  display: none;
  border-top: 1px solid var(--line);
  background: #f9fcfa;
}

.mobile-menu a {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  text-decoration: none;
  color: #2d4a3a;
  border-bottom: 1px solid #e1ece5;
  padding: 0.82rem 1rem;
}

.mobile-menu a i {
  width: 16px;
  text-align: center;
  color: #5d7690;
}

.mobile-label {
  display: block;
  padding: 0.6rem 1rem 0.35rem;
  color: #6a8095;
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 700;
}

.mobile-menu.open {
  display: block;
}

.page-main {
  max-width: 1240px;
  margin: 0 auto;
  padding: 1rem 1rem 0;
  background: #ffffff;
  border-left: 1px solid #cfd8e2;
  border-right: 1px solid #cfd8e2;
  box-shadow: none;
}

.cart-page-main {
  min-height: calc(100vh - 110px);
  padding-bottom: 1.4rem;
}

.cart-hero {
  border: 1px solid #d6e4dc;
  border-radius: 14px;
  background:
    radial-gradient(circle at 8% 16%, rgba(95, 183, 124, 0.18), transparent 30%),
    radial-gradient(circle at 86% 74%, rgba(94, 172, 120, 0.12), transparent 38%),
    #ffffff;
  padding: 0.92rem 1rem;
}

.cart-kicker {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 800;
  color: #3a8d5c;
}

.cart-hero h1 {
  margin: 0.42rem 0 0;
  font-family: var(--font-brand);
  font-size: clamp(1.45rem, 2.8vw, 2.02rem);
  line-height: 1.12;
  color: #1f5d3a;
}

.cart-hero p {
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
  color: #587084;
  max-width: 720px;
}

.cart-layout {
  margin-top: 0.8rem;
  display: grid;
  grid-template-columns: minmax(0, 1.52fr) minmax(276px, 0.78fr);
  gap: 0.8rem;
  align-items: start;
}

.cart-panel,
.cart-summary-card {
  border: 1px solid #d5e2da;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 10px 22px rgba(29, 56, 40, 0.06);
}

.cart-panel {
  padding: 0.76rem 0.8rem;
}

.cart-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
}

.cart-panel-head h2,
.cart-summary-card h2 {
  margin: 0;
  font-family: var(--font-brand);
  font-size: 1.24rem;
  color: #1d5635;
}

.cart-panel-head p,
.cart-summary-card > p {
  margin: 0.14rem 0 0;
  font-size: 0.82rem;
  color: #647d90;
}

.cart-toolbar {
  margin-top: 0.62rem;
  padding: 0.5rem 0.56rem;
  border: 1px solid #ddeae3;
  border-radius: 10px;
  background: #f8fcf9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.cart-select-all {
  display: inline-flex;
  align-items: center;
  gap: 0.46rem;
  color: #2d556f;
  font-size: 0.84rem;
  font-weight: 700;
  user-select: none;
}

.cart-select-all input {
  width: 16px;
  height: 16px;
  accent-color: #2f9960;
}

.cart-toolbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
}

.cart-ghost-btn,
.cart-continue-link {
  border: 1px solid #cfded5;
  border-radius: 9px;
  min-height: 34px;
  padding: 0.36rem 0.62rem;
  background: #ffffff;
  color: #35546c;
  font-size: 0.8rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  text-decoration: none;
}

.cart-ghost-btn {
  cursor: pointer;
}

.cart-ghost-btn:hover,
.cart-continue-link:hover {
  background: #edf8f1;
  color: #20412f;
}

.cart-ghost-btn:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

#cartFeedback.auth-feedback {
  margin-top: 0.56rem;
  padding: 0 0.16rem;
}

.cart-empty {
  margin: 0.62rem 0 0;
  border: 1px dashed #cfe0d6;
  border-radius: 10px;
  padding: 0.7rem;
  color: #5e768b;
  font-size: 0.86rem;
  background: #f7fcf8;
}

.cart-list {
  margin-top: 0.62rem;
  display: grid;
  gap: 0.62rem;
}

.cart-item {
  border: 1px solid #dbe7df;
  border-radius: 12px;
  background: #ffffff;
  padding: 0.56rem;
  display: grid;
  grid-template-columns: auto 172px minmax(0, 1fr) 200px;
  gap: 0.66rem;
  align-items: start;
}

.cart-item-check {
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 0.16rem;
}

.cart-item-check input {
  width: 16px;
  height: 16px;
  accent-color: #2f9960;
}

.cart-item-thumb {
  display: block;
  width: 172px;
  min-width: 172px;
  max-width: 172px;
  height: 97px;
  border: 1px solid #d7e4dc;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  justify-self: start;
  background: #eaf2ec;
}

.cart-item-thumb img {
  max-width: 100%;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.cart-item-main {
  min-width: 0;
  overflow: hidden;
}

.cart-item-main h3 {
  margin: 0;
  font-size: 1rem;
  color: #1f5838;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.cart-item-main h3 a {
  color: inherit;
  text-decoration: none;
}

.cart-item-main h3 a:hover {
  text-decoration: underline;
}

.cart-item-meta {
  margin: 0.32rem 0 0;
  font-size: 0.78rem;
  color: #60798e;
  overflow-wrap: anywhere;
}

.cart-item-addons {
  margin: 0.54rem 0 0;
  padding: 0.42rem 0.5rem;
  list-style: none;
  border: 1px solid #deebe3;
  border-radius: 9px;
  display: grid;
  gap: 0.34rem;
  background: #f9fcfa;
}

.cart-item-addons li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: #47657a;
}

.cart-item-side {
  border-left: 1px solid #e0ebe5;
  padding-left: 0.56rem;
  display: grid;
  gap: 0.26rem;
  align-content: start;
}

.cart-item-line,
.cart-item-total {
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.34rem;
  font-size: 0.78rem;
  color: #5d768a;
}

.cart-item-line strong,
.cart-item-total strong {
  color: #1c5638;
  font-size: 0.84rem;
}

.cart-item-line.is-coupon span,
.cart-item-line.is-coupon strong {
  color: #2c7a49;
}

.cart-item-total {
  margin-top: 0.12rem;
  padding-top: 0.28rem;
  border-top: 1px dashed #d9e6df;
}

.cart-item-total strong {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.04rem;
}

.cart-item-total strong small {
  color: #7f94a3;
  font-size: 0.69rem;
  font-weight: 700;
  text-decoration: line-through;
}

.cart-item-split {
  margin: 0.04rem 0 0;
  font-size: 0.72rem;
  color: #6a846e;
  text-align: right;
}

.cart-item-remove {
  margin-top: 0.4rem;
  border: 1px solid #d3dfd7;
  border-radius: 8px;
  min-height: 30px;
  background: #ffffff;
  color: #4b6578;
  font-size: 0.76rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.34rem;
  cursor: pointer;
}

.cart-item-remove:hover {
  background: #f6fbf8;
}

.cart-summary-card {
  padding: 0.76rem 0.8rem;
  position: sticky;
  top: 132px;
}

.cart-summary-list {
  margin: 0.66rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.34rem;
}

.cart-summary-list div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  font-size: 0.84rem;
}

.cart-summary-list dt {
  color: #60788d;
}

.cart-summary-list dd {
  margin: 0;
  font-weight: 800;
  color: #1e5a3b;
}

.cart-summary-list .is-split dt,
.cart-summary-list .is-split dd {
  color: #3e6b52;
  font-size: 0.8rem;
}

.cart-summary-list .is-total {
  margin-top: 0.1rem;
  padding-top: 0.38rem;
  border-top: 1px solid #dbe7df;
}

.cart-summary-list .is-total dt,
.cart-summary-list .is-total dd {
  color: #1a4d31;
  font-size: 0.92rem;
}

.cart-summary-list .is-discount dt,
.cart-summary-list .is-discount dd {
  color: #2c7a49;
  font-size: 0.82rem;
}

.cart-summary-list .is-discount dd {
  font-weight: 800;
}

.cart-coupon-box {
  margin-top: 0.76rem;
  border: 1px solid #dbe7df;
  border-radius: 12px;
  background: linear-gradient(180deg, #fbfefc 0%, #f6fbf8 100%);
  padding: 0.66rem;
  display: grid;
  gap: 0.46rem;
}

.cart-coupon-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.cart-coupon-head h3 {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 800;
  color: #1f5838;
}

.cart-coupon-clear {
  border: 1px solid #d6e4da;
  border-radius: 999px;
  background: #ffffff;
  color: #446a57;
  min-height: 30px;
  padding: 0.3rem 0.64rem;
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  font-size: 0.74rem;
  font-weight: 800;
  cursor: pointer;
}

.cart-coupon-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.46rem;
}

.cart-coupon-input-wrap {
  min-width: 0;
  border: 1px solid #d2e0d8;
  border-radius: 10px;
  background: #ffffff;
  min-height: 42px;
  padding: 0 0.72rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #4e7b63;
}

.cart-coupon-input-wrap input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #1f5838;
  font-family: var(--font-ui);
  font-size: 0.84rem;
  font-weight: 700;
}

.cart-coupon-input-wrap input:focus {
  outline: none;
}

.cart-coupon-apply {
  border: 1px solid #2f8b53;
  border-radius: 10px;
  background: linear-gradient(140deg, #3aa560, #2f9055);
  color: #ffffff;
  min-height: 42px;
  padding: 0.65rem 0.86rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
}

.cart-coupon-apply:hover {
  background: linear-gradient(140deg, #339357, #287d4b);
}

.cart-coupon-status {
  min-height: 1.08rem;
  font-size: 0.75rem;
}

.cart-coupon-scope {
  margin: 0;
  border-top: 1px dashed #d9e5de;
  padding-top: 0.46rem;
  color: #587084;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.4;
}

.soon-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.soon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.1rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: rgba(68, 180, 106, 0.12);
  color: #2f9a55;
  font-size: 0.63rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.soon-page {
  display: flex;
  justify-content: center;
  padding: 2rem 1.5rem 4rem;
}

.soon-card {
  width: min(720px, 100%);
  padding: 2.4rem;
  border: 1px solid rgba(106, 150, 128, 0.24);
  border-radius: 2rem;
  background:
    radial-gradient(circle at top right, rgba(109, 213, 140, 0.15), transparent 36%),
    linear-gradient(180deg, #ffffff 0%, #f8fcf9 100%);
  box-shadow: 0 24px 60px rgba(21, 69, 55, 0.1);
}

.soon-icon {
  width: 4rem;
  height: 4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 1.25rem;
  background: linear-gradient(135deg, #43b66d, #2f9a55);
  color: #ffffff;
  font-size: 1.4rem;
  box-shadow: 0 18px 36px rgba(54, 154, 89, 0.22);
}

.soon-kicker {
  margin: 1.2rem 0 0.55rem;
  color: #2f9a55;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.soon-card h1 {
  margin: 0;
  color: #123e32;
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1.05;
}

.soon-copy {
  margin: 0.95rem 0 0;
  max-width: 36rem;
  color: rgba(18, 62, 50, 0.78);
  font-size: 1.05rem;
  line-height: 1.75;
}

.soon-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 1.8rem;
}

.support-page-main {
  min-height: calc(100vh - 110px);
  padding: 1.3rem 1rem 2.4rem;
}

.support-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.9fr);
  gap: 1rem;
  padding: 1.3rem 1.35rem;
  border: 1px solid #d8e6dc;
  border-radius: 1.5rem;
  background:
    radial-gradient(circle at top right, rgba(106, 214, 139, 0.18), transparent 34%),
    linear-gradient(180deg, #ffffff, #f7fcf8);
  box-shadow: 0 18px 44px rgba(19, 73, 56, 0.08);
}

.support-kicker {
  margin: 0 0 0.65rem;
  color: #2f9a55;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.support-hero-copy h1 {
  margin: 0;
  color: #123e32;
  font-size: clamp(2rem, 4.4vw, 3rem);
  line-height: 1.04;
}

.support-hero-copy > p:last-of-type {
  margin: 0.85rem 0 0;
  color: #587084;
  font-size: 1rem;
  line-height: 1.75;
}

.support-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.15rem;
}

.support-hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid #d6e7db;
  border-radius: 999px;
  background: #ffffff;
  color: #305544;
  font-size: 0.86rem;
  font-weight: 700;
}

.support-hero-card,
.support-contact-card,
.support-form-card,
.support-side-card {
  border: 1px solid #d8e6dc;
  border-radius: 1.3rem;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(22, 74, 57, 0.06);
}

.support-hero-card {
  padding: 1.15rem 1.2rem;
}

.support-hero-card h2,
.support-side-card h3 {
  margin: 0;
  color: #1f6f47;
  font-size: 1rem;
}

.support-hero-card ul,
.support-checklist {
  list-style: none;
  margin: 0.95rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}

.support-hero-card li,
.support-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  color: #486279;
  font-size: 0.92rem;
  line-height: 1.6;
}

.support-contact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.support-contact-card {
  padding: 1.15rem;
}

.support-contact-icon {
  width: 2.9rem;
  height: 2.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  background: linear-gradient(135deg, #49ba71, #2f9654);
  color: #ffffff;
  font-size: 1.05rem;
  box-shadow: 0 16px 26px rgba(54, 154, 89, 0.2);
}

.support-contact-card h3 {
  margin: 0.95rem 0 0;
  color: #123e32;
  font-size: 1.02rem;
}

.support-contact-card p {
  margin: 0.5rem 0 1rem;
  color: #587084;
  font-size: 0.92rem;
  line-height: 1.7;
}

.support-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(290px, 0.85fr);
  gap: 1rem;
  margin-top: 1rem;
}

.support-form-card {
  padding: 1.25rem;
}

.support-form {
  margin-top: 1rem;
}

.support-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.support-field {
  display: grid;
  gap: 0.45rem;
  margin-bottom: 0.9rem;
}

.support-field span {
  color: #335948;
  font-size: 0.86rem;
  font-weight: 800;
}

.support-field input,
.support-field select,
.support-field textarea {
  width: 100%;
  border: 1px solid #d1e3d8;
  border-radius: 0.9rem;
  background: #fbfdfb;
  color: #244634;
  font: inherit;
  padding: 0.82rem 0.95rem;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.support-field textarea {
  min-height: 180px;
  resize: vertical;
}

.support-field input:focus,
.support-field select:focus,
.support-field textarea:focus {
  border-color: #50b878;
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(80, 184, 120, 0.12);
}

.support-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 0.2rem;
}

.support-side-card {
  padding: 1.2rem;
}

.support-mini-panel {
  margin-top: 1rem;
  padding: 0.95rem 1rem;
  border: 1px solid #d8e6dc;
  border-radius: 1rem;
  background: #f9fcfa;
}

.support-mini-panel h4 {
  margin: 0;
  color: #1f6f47;
  font-size: 0.92rem;
}

.support-mini-panel p {
  margin: 0.42rem 0 0;
  color: #486279;
  font-size: 0.92rem;
  font-weight: 700;
}

.support-mini-panel p a {
  color: #1f6f47;
  text-decoration: none;
}

.support-mini-panel p a:hover {
  text-decoration: underline;
}

.help-center-main {
  min-height: calc(100vh - 110px);
  padding: 1.3rem 1rem 2.4rem;
}

.help-center-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.82fr);
  gap: 1rem;
  align-items: start;
}

.help-center-hero-copy,
.help-center-side-card,
.help-topic-card,
.help-center-shell {
  border: 1px solid #d8e6dc;
  border-radius: 1.35rem;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(22, 74, 57, 0.06);
}

.help-center-hero-copy {
  padding: 1.3rem 1.35rem;
  background:
    radial-gradient(circle at top right, rgba(106, 214, 139, 0.16), transparent 34%),
    linear-gradient(180deg, #ffffff, #f8fcf9);
}

.help-center-hero-copy h1 {
  margin: 0;
  color: #123e32;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
}

.help-center-hero-copy > p {
  margin: 0.85rem 0 0;
  color: #587084;
  font-size: 1rem;
  line-height: 1.72;
}

.help-center-search {
  margin-top: 1.15rem;
}

.help-center-search-field {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid #d5e4d9;
  border-radius: 1rem;
  background: #fbfdfb;
  color: #345646;
}

.help-center-search-field i {
  color: #4ba96f;
}

.help-center-search-field input {
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  color: #244634;
  font: inherit;
}

.help-center-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1rem;
}

.help-center-chip {
  border: 1px solid #d5e4d9;
  background: #ffffff;
  color: #426279;
  border-radius: 999px;
  padding: 0.5rem 0.82rem;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.help-center-chip:hover,
.help-center-chip.is-active {
  border-color: #b7dcc1;
  background: #eff9f2;
  color: #1f6f47;
}

.help-center-side {
  display: grid;
  gap: 1rem;
}

.help-center-side-card {
  padding: 1.15rem 1.2rem;
}

.help-center-side-card h2,
.help-center-side-card h3 {
  margin: 0;
  color: #143f33;
  font-size: 1rem;
}

.help-center-side-card p {
  margin: 0.6rem 0 0;
  color: #587084;
  font-size: 0.93rem;
  line-height: 1.7;
}

.help-center-side-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}

.help-center-link-list {
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.help-center-link-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid #d8e6dc;
  border-radius: 1rem;
  background: #f9fcfa;
  color: #315445;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
}

.help-center-link-list a:hover {
  background: #f0f8f3;
}

.help-center-topics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.help-topic-card {
  padding: 1.1rem;
}

.help-topic-icon {
  width: 2.7rem;
  height: 2.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.95rem;
  background: linear-gradient(135deg, #49ba71, #2f9654);
  color: #ffffff;
  box-shadow: 0 16px 26px rgba(54, 154, 89, 0.2);
}

.help-topic-card h3 {
  margin: 0.9rem 0 0;
  color: #123e32;
  font-size: 1rem;
}

.help-topic-card p {
  margin: 0.48rem 0 0;
  color: #587084;
  font-size: 0.9rem;
  line-height: 1.7;
}

.help-center-shell {
  margin-top: 1rem;
  padding: 1.2rem;
}

.help-center-panel-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid #e0ece4;
}

.help-center-panel-head h2 {
  margin: 0.2rem 0 0;
  color: #123e32;
  font-size: 1.55rem;
}

.help-center-result-count {
  margin: 0;
  color: #5f7384;
  font-size: 0.9rem;
  font-weight: 700;
}

.help-center-results {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}

.help-result-group {
  border: 1px solid #dde9e1;
  border-radius: 1.15rem;
  background: #fbfdfb;
  overflow: hidden;
}

.help-result-group-head {
  padding: 1rem 1rem 0.2rem;
}

.help-result-group-head h3 {
  margin: 0.18rem 0 0;
  color: #143f33;
  font-size: 1.18rem;
}

.help-result-list {
  padding: 0.55rem 0.8rem 0.85rem;
}

.help-item + .help-item {
  margin-top: 0.65rem;
}

.help-item {
  border: 1px solid #dbe8df;
  border-radius: 1rem;
  background: #ffffff;
  overflow: hidden;
}

.help-item-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border: 0;
  background: transparent;
  padding: 0.95rem 1rem;
  color: #173e34;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.help-item-toggle i.fa-chevron-down {
  color: #6e8090;
  transition: transform 0.18s ease;
}

.help-item-toggle.is-open i.fa-chevron-down {
  transform: rotate(180deg);
}

.help-item-title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.help-item-icon {
  width: 2.2rem;
  height: 2.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.85rem;
  background: #eff9f2;
  color: #259159;
}

.help-item-title {
  font-size: 0.97rem;
  font-weight: 800;
}

.help-item-answer {
  padding: 0 1rem 1rem;
}

.help-item-answer p {
  margin: 0;
  color: #587084;
  font-size: 0.93rem;
  line-height: 1.72;
}

.help-answer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.85rem;
}

.help-answer-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.78rem;
  border: 1px solid #d3e4d8;
  border-radius: 999px;
  background: #f6fbf7;
  color: #1e7047;
  font-size: 0.84rem;
  font-weight: 800;
  text-decoration: none;
}

.help-answer-link:hover {
  background: #eef8f2;
}

@media (max-width: 980px) {
  .support-hero,
  .support-shell,
  .support-contact-grid {
    grid-template-columns: 1fr;
  }

  .support-form-grid {
    grid-template-columns: 1fr;
  }

  .help-center-hero,
  .help-center-topics {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .support-page-main {
    padding: 1rem 0.8rem 1.6rem;
  }

  .support-hero,
  .support-form-card,
  .support-side-card,
  .support-contact-card {
    padding: 1rem;
    border-radius: 1.1rem;
  }

  .support-hero-meta {
    flex-direction: column;
    align-items: stretch;
  }

  .support-form-actions {
    flex-direction: column;
  }

  .help-center-main {
    padding: 1rem 0.8rem 1.6rem;
  }

  .help-center-panel-head {
    flex-direction: column;
    align-items: start;
  }

  .help-item-title-wrap {
    align-items: start;
  }
}

#cartCheckoutButton.auth-submit {
  margin-top: 0.74rem;
  width: 100%;
  justify-content: center;
}

.cart-summary-note {
  margin: 0.46rem 0 0;
  color: #6e8799;
  font-size: 0.76rem;
}

.auth-page-main {
  min-height: calc(100vh - 110px);
  padding: 2.2rem 1rem 2.4rem;
}

.auth-shell {
  border: 1px solid #d5e2da;
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 18%, rgba(113, 202, 144, 0.15), transparent 36%),
    radial-gradient(circle at 88% 86%, rgba(95, 176, 127, 0.1), transparent 30%),
    #ffffff;
  box-shadow: 0 18px 30px rgba(20, 49, 35, 0.1);
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
}

.auth-info {
  padding: 2rem 1.6rem;
  background:
    linear-gradient(152deg, #2f8f54, #3aa560 58%, #2f7b50);
  color: #e9fff0;
}

.auth-kicker {
  margin: 0;
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #d6f8e2;
}

.auth-info h1 {
  margin: 0.55rem 0 0;
  color: #ffffff;
  font-family: var(--font-brand);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.16;
}

.auth-info > p {
  margin: 0.62rem 0 0;
  color: #ddf9e7;
  max-width: 440px;
  font-size: 0.91rem;
  line-height: 1.52;
}

.auth-info ul {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.52rem;
}

.auth-info li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #f2fff6;
  font-size: 0.84rem;
  font-weight: 600;
}

.auth-info li i {
  width: 18px;
  text-align: center;
  color: #f8fff9;
}

.auth-card {
  padding: 1.8rem 1.6rem;
}

.auth-card h2 {
  margin: 0;
  color: #1f4d31;
  font-family: var(--font-brand);
  font-size: 1.5rem;
}

.auth-subtitle {
  margin: 0.45rem 0 0;
  color: #607587;
  font-size: 0.88rem;
}

.auth-form {
  margin-top: 1rem;
  display: grid;
  gap: 0.68rem;
}

.auth-form label {
  color: #30495e;
  font-size: 0.83rem;
  font-weight: 700;
}

.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"] {
  width: 100%;
  border: 1px solid #d4dee9;
  border-radius: 10px;
  background: #fcfeff;
  color: #294158;
  font-family: var(--font-ui);
  font-size: 0.88rem;
  padding: 0.66rem 0.72rem;
}

.auth-form input[type="text"]:focus,
.auth-form input[type="email"]:focus,
.auth-form input[type="password"]:focus {
  outline: none;
  border-color: #8bc79f;
  box-shadow: 0 0 0 3px rgba(73, 178, 110, 0.16);
}

.auth-check {
  display: inline-flex;
  align-items: center;
  gap: 0.52rem;
  margin-top: 0.1rem;
  color: #486075;
  font-size: 0.81rem;
  font-weight: 600;
}

.auth-check input {
  width: 15px;
  height: 15px;
  accent-color: #2f9d5d;
}

.auth-feedback {
  min-height: 1.24rem;
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: #5f7487;
}

.auth-feedback.is-success {
  color: #257a48;
}

.auth-feedback.is-error {
  color: #b43f4c;
}

.auth-feedback.is-info {
  color: #2c6f97;
}

.auth-submit {
  margin-top: 0.06rem;
  border: 1px solid #2f8b53;
  border-radius: 10px;
  background: linear-gradient(140deg, #3aa560, #2f9055);
  color: #ffffff;
  font-family: var(--font-ui);
  font-size: 0.87rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  padding: 0.68rem 0.76rem;
  cursor: pointer;
}

.auth-submit:hover {
  background: linear-gradient(140deg, #339357, #287d4b);
}

.auth-submit:disabled {
  opacity: 0.72;
  cursor: not-allowed;
}

.auth-switch {
  margin: 0.94rem 0 0;
  color: #5b7084;
  font-size: 0.84rem;
}

.auth-switch a {
  color: #2f9d5d;
  font-weight: 800;
  text-decoration: none;
}

.auth-switch a:hover {
  text-decoration: underline;
}

.updates-overlay {
  position: fixed;
  inset: 0;
  z-index: 123;
  display: none;
}

.updates-overlay.is-open {
  display: block;
}

.updates-overlay-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  background: rgba(13, 21, 30, 0.42);
  backdrop-filter: blur(2px);
  cursor: pointer;
}

.updates-panel {
  position: absolute;
  top: 72px;
  right: max(12px, calc((100vw - 1240px) / 2 + 132px));
  width: min(380px, calc(100% - 1.1rem));
  border: 1px solid #d4dde8;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 24px 40px rgba(17, 31, 44, 0.24);
  overflow: hidden;
}

.updates-panel::before {
  content: "";
  position: absolute;
  top: -10px;
  right: 24px;
  width: 18px;
  height: 18px;
  background: #ffffff;
  border-left: 1px solid #d4dde8;
  border-top: 1px solid #d4dde8;
  transform: rotate(45deg);
}

.updates-panel-head {
  position: relative;
  z-index: 1;
  border-bottom: 1px solid #e3eaf2;
  padding: 0.78rem 0.82rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.72rem;
  background:
    radial-gradient(circle at 84% 12%, rgba(126, 208, 157, 0.12), transparent 42%),
    #ffffff;
}

.updates-panel-head h3 {
  margin: 0;
  color: #1f6e41;
  font-family: var(--font-brand);
  font-size: 1.02rem;
  line-height: 1.1;
  display: inline-flex;
  align-items: center;
  gap: 0.36rem;
}

.updates-panel-head h3 i {
  font-size: 0.84rem;
  color: #3a9d63;
}

.updates-mark-read {
  border: 1px solid #c7d8cb;
  border-radius: 8px;
  background: #f2faf4;
  color: #2a6c45;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.34rem 0.5rem;
  cursor: pointer;
}

.updates-mark-read:hover {
  background: #e7f6ec;
}

.updates-panel-list {
  max-height: min(64vh, 540px);
  overflow: auto;
  padding: 0.62rem 0.72rem 0.7rem;
  display: grid;
  gap: 0.52rem;
}

.updates-item {
  border: 1px solid #d8e2ed;
  border-radius: 14px;
  background:
    radial-gradient(circle at 100% 0%, rgba(94, 193, 121, 0.08), transparent 38%),
    linear-gradient(180deg, #fdfefe 0%, #f8fbf9 100%);
  padding: 0.72rem;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: start;
  gap: 0.72rem;
  text-decoration: none;
  color: inherit;
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease,
    background-color 150ms ease;
}

.updates-item.is-clickable:hover {
  border-color: #c7dfd0;
  box-shadow: 0 14px 26px rgba(31, 76, 45, 0.08);
  transform: translateY(-1px);
}

.updates-item-media {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  background: linear-gradient(180deg, #e8f6ed 0%, #d7efe0 100%);
  border: 1px solid #cfe3d7;
  color: #2c8a53;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.updates-item-media i {
  font-size: 1rem;
}

.updates-item-media-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.updates-item-body {
  min-width: 0;
  display: grid;
  gap: 0.16rem;
}

.updates-item-label {
  color: #2c8a53;
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.updates-item h4 {
  margin: 0;
  color: #254257;
  font-size: 0.88rem;
  font-family: var(--font-brand);
  line-height: 1.24;
}

.updates-item p {
  margin: 0.06rem 0 0;
  color: #527082;
  font-size: 0.79rem;
  line-height: 1.5;
}

.updates-item-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 0.3rem;
}

.updates-item time {
  color: #6d8195;
  font-size: 0.73rem;
  font-weight: 700;
}

.updates-item-action {
  color: #237244;
  font-size: 0.74rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
}

.updates-item.is-unread {
  border-color: #c7e1d0;
  background:
    radial-gradient(circle at 100% 0%, rgba(94, 193, 121, 0.12), transparent 42%),
    linear-gradient(180deg, #f6fcf7 0%, #eef8f1 100%);
  box-shadow: inset 3px 0 0 #3fb96c;
}

.updates-empty {
  margin: 0;
  color: #607689;
  font-size: 0.83rem;
  border: 1px dashed #d4dee8;
  border-radius: 10px;
  padding: 0.8rem 0.72rem;
  background: #fbfdff;
}

.profile-overlay {
  position: fixed;
  inset: 0;
  z-index: 124;
  display: none;
}

.profile-overlay.is-open {
  display: block;
}

.profile-overlay-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  background: rgba(10, 17, 25, 0.46);
  backdrop-filter: blur(4px);
  cursor: pointer;
}

.profile-panel {
  position: absolute;
  top: 72px;
  right: max(12px, calc((100vw - 1240px) / 2 + 12px));
  width: min(368px, calc(100% - 1.1rem));
  border: 1px solid #d4e0dd;
  border-radius: 16px;
  background:
    radial-gradient(circle at 88% 12%, rgba(128, 206, 154, 0.12), transparent 40%),
    linear-gradient(180deg, #ffffff 0%, #f7fbf9 100%);
  box-shadow:
    0 26px 48px rgba(15, 31, 22, 0.24),
    0 6px 18px rgba(39, 92, 64, 0.08);
  overflow: hidden;
}

.profile-panel::before {
  content: "";
  position: absolute;
  top: -10px;
  right: 26px;
  width: 18px;
  height: 18px;
  background: #fbfefd;
  border-left: 1px solid #d4e0dd;
  border-top: 1px solid #d4e0dd;
  transform: rotate(45deg);
}

.profile-panel-head {
  position: relative;
  z-index: 1;
  padding: 0.95rem 0.95rem 0.8rem;
  border-bottom: 1px solid #dfeae5;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
  background:
    linear-gradient(145deg, rgba(243, 251, 246, 0.95), rgba(255, 255, 255, 0.88)),
    radial-gradient(circle at 82% 20%, rgba(124, 206, 154, 0.18), transparent 42%);
}

.profile-panel-head-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.72rem;
}

.profile-avatar {
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 16px rgba(23, 52, 36, 0.24);
}

.profile-panel-user h3 {
  margin: 0;
  color: #1d6f42;
  font-family: var(--font-brand);
  font-size: 1.2rem;
  line-height: 1.1;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.profile-panel-user h3 i {
  font-size: 0.72rem;
  color: #17a75a;
}

.profile-panel-user p {
  margin: 0.18rem 0 0;
  color: #5c7388;
  font-size: 0.82rem;
}

.profile-panel-quick {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.profile-panel-quick a {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid #d2e2d8;
  background: linear-gradient(180deg, #ffffff 0%, #f3faf6 100%);
  color: #4e6f62;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.profile-panel-quick a:hover {
  background: linear-gradient(180deg, #f4fbf7 0%, #e9f7ef 100%);
  color: #2f6f49;
}

.profile-panel-stats {
  display: grid;
  gap: 0;
  padding: 0.56rem 0.92rem 0.62rem;
  border-bottom: 1px solid #dfeae5;
  background: rgba(255, 255, 255, 0.62);
}

.profile-panel-stats div {
  min-width: 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.72rem;
  padding: 0.22rem 0;
}

.profile-panel-stats span {
  display: inline-block;
  color: #647c90;
  font-size: 0.84rem;
}

.profile-panel-stats strong {
  display: inline-block;
  margin-top: 0;
  color: #1f6e41;
  font-size: 0.93rem;
  font-weight: 800;
}

.profile-panel-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid #dfeae5;
  background: linear-gradient(180deg, #f6fbf8 0%, #eff7f3 100%);
}

.profile-panel-tabs a {
  text-decoration: none;
  text-align: center;
  color: #5d7669;
  font-size: 0.84rem;
  font-weight: 700;
  padding: 0.58rem 0.65rem;
  border-right: 1px solid #dfeae5;
}

.profile-panel-tabs a:last-child {
  border-right: 0;
}

.profile-panel-tabs a.is-active {
  color: #256d44;
  background:
    linear-gradient(180deg, #ffffff 0%, #f6fcf8 100%);
  box-shadow: inset 0 -2px 0 rgba(63, 185, 108, 0.9);
}

.profile-panel-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-bottom: 1px solid #dfeae5;
  background: rgba(255, 255, 255, 0.75);
}

.profile-panel-links a {
  text-decoration: none;
  color: #4b6677;
  font-size: 0.84rem;
  padding: 0.6rem 0.82rem;
  border-top: 1px solid #e8f1ec;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: background-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.profile-panel-links a:nth-child(1),
.profile-panel-links a:nth-child(2) {
  border-top: 0;
}

.profile-panel-links a:hover {
  background: #edf9f1;
  color: #1f6640;
  transform: translateX(1px);
}

.profile-panel-links a i {
  width: 14px;
  text-align: center;
  color: #5d8674;
  font-size: 0.78rem;
}

.profile-panel-logout {
  width: 100%;
  border: 0;
  background: linear-gradient(180deg, #ffffff 0%, #fff6f8 100%);
  color: #b2424f;
  font-family: var(--font-ui);
  font-size: 0.92rem;
  font-weight: 700;
  text-align: left;
  padding: 0.72rem 0.88rem 0.78rem;
  display: inline-flex;
  align-items: center;
  gap: 0.44rem;
  cursor: pointer;
}

.profile-panel-logout:hover {
  background: linear-gradient(180deg, #fff8f9 0%, #ffeef2 100%);
}

.profile-panel-status {
  padding: 0.68rem 0.78rem 0.8rem;
  background: linear-gradient(180deg, #f9fcfa 0%, #f3f8f5 100%);
}

.profile-panel-status input {
  width: 100%;
  border: 1px solid #d6e5dc;
  border-radius: 8px;
  background: #ffffff;
  color: #355666;
  font-family: var(--font-ui);
  font-size: 0.83rem;
  padding: 0.56rem 0.66rem;
}

.profile-overlay.is-open .profile-panel {
  animation: profilePanelIn 220ms ease-out;
}

@keyframes profilePanelIn {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.profile-panel-status input::placeholder {
  color: #8398aa;
}

.no-scroll {
  overflow: hidden;
}

.auth-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
}

.auth-modal.is-open {
  display: block;
}

.auth-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(13, 21, 30, 0.45);
  backdrop-filter: blur(2px);
}

.auth-modal-panel {
  position: relative;
  width: min(620px, calc(100% - 1.4rem));
  margin: 7vh auto 0;
  border-radius: 16px;
  border: 1px solid #d3e0d9;
  background:
    radial-gradient(circle at 16% 18%, rgba(129, 203, 156, 0.15), transparent 34%),
    #ffffff;
  box-shadow: 0 24px 48px rgba(18, 37, 28, 0.26);
  padding: 1rem 0.96rem 1rem;
}

.auth-modal-close {
  position: absolute;
  right: 0.72rem;
  top: 0.72rem;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid #d3ddea;
  background: #ffffff;
  color: #50657a;
  cursor: pointer;
}

.auth-modal-close:hover {
  background: #f2f7fb;
}

.auth-modal-head {
  padding-right: 2.1rem;
}

.auth-modal-kicker {
  margin: 0;
  color: #58816b;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.7rem;
  font-weight: 800;
}

.auth-modal-head h2 {
  margin: 0.34rem 0 0;
  color: #1e4a30;
  font-family: var(--font-brand);
  font-size: 1.4rem;
  line-height: 1.1;
}

.auth-modal-head p {
  margin: 0.42rem 0 0;
  color: #577083;
  font-size: 0.84rem;
}

.auth-modal-tabs {
  margin-top: 0.82rem;
  display: inline-flex;
  gap: 0.36rem;
  border: 1px solid #d4e0e9;
  border-radius: 10px;
  background: #f8fbff;
  padding: 0.25rem;
}

.auth-modal-tabs button {
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #4c6578;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.42rem 0.75rem;
  cursor: pointer;
}

.auth-modal-tabs button.is-active {
  background: #ffffff;
  color: #2b6845;
  box-shadow: 0 4px 10px rgba(27, 51, 73, 0.14);
}

.auth-modal-view {
  display: none;
  margin-top: 0.74rem;
}

.auth-modal-view.is-active {
  display: block;
}

.auth-form.auth-form-modal {
  margin-top: 0.35rem;
}

.discovery-hero {
  max-width: 1240px;
  margin: 0 auto;
}

.discovery-shell {
  position: relative;
  border-radius: 16px;
  padding: 2.8rem 1.4rem 5rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 22px 42px rgba(23, 62, 45, 0.2);
  background:
    radial-gradient(circle at 18% 22%, rgba(157, 241, 171, 0.22), transparent 46%),
    radial-gradient(circle at 90% 10%, rgba(124, 226, 159, 0.2), transparent 42%),
    linear-gradient(128deg, var(--hero-a) 0%, var(--hero-b) 42%, var(--hero-c) 100%);
  overflow: visible;
}

.discovery-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    repeating-linear-gradient(35deg, rgba(255, 255, 255, 0.04) 0 2px, transparent 2px 28px),
    repeating-linear-gradient(145deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 31px);
  background-size: 170px 170px;
  pointer-events: none;
}

.discovery-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("assets/wasebyme-logo.png");
  background-repeat: no-repeat;
  background-position: 92% 50%;
  background-size: 420px 420px;
  opacity: 0.11;
  mix-blend-mode: screen;
  pointer-events: none;
}

.discovery-shell > * {
  position: relative;
  z-index: 1;
}

.discovery-shell h1 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(1.24rem, 2.4vw, 1.75rem);
  line-height: 1.22;
  font-weight: 800;
  max-width: 760px;
}

.hero-stats {
  margin-top: 0.84rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.hero-stats span {
  color: #e6f7eb;
  font-size: 0.8rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  padding: 0.26rem 0.5rem;
  border: 1px solid rgba(232, 251, 239, 0.28);
  border-radius: 999px;
  background: rgba(18, 64, 42, 0.22);
  backdrop-filter: blur(2px);
}

.hero-search {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: 1fr 160px 110px;
  gap: 0.5rem;
}

.hero-search-input-wrap {
  position: relative;
}

.hero-search-input-wrap i {
  position: absolute;
  left: 0.68rem;
  top: 50%;
  transform: translateY(-50%);
  color: #6a7f72;
  font-size: 0.88rem;
}

.hero-search input,
.hero-search select {
  width: 100%;
  border: 1px solid #d6e3d9;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.95);
  color: #2a4235;
  font-family: var(--font-ui);
  padding: 0.67rem 0.72rem;
}

.hero-search input {
  padding-left: 2rem;
}

.hero-search button {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: linear-gradient(135deg, #205038, #1a3d2d);
  color: #ffffff;
  font-family: var(--font-ui);
  font-weight: 700;
  cursor: pointer;
}

.hero-search button:hover {
  background: linear-gradient(135deg, #1a4230, #153324);
}

.popular-searches {
  margin: 0.9rem 0 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.38rem;
  color: #dbf4e1;
  font-size: 0.8rem;
}

.popular-searches strong {
  color: #ffffff;
  font-weight: 700;
  margin-right: 0.15rem;
}

.popular-searches a {
  text-decoration: none;
  color: #edfff1;
  border: 1px solid rgba(235, 255, 241, 0.24);
  border-radius: 999px;
  padding: 0.2rem 0.46rem;
  background: rgba(24, 77, 50, 0.26);
}

.popular-searches a:hover {
  background: rgba(24, 77, 50, 0.4);
}

.game-cards {
  margin-top: 1.7rem;
  padding: 0.68rem;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(237, 254, 243, 0.24);
  border-radius: 14px;
  backdrop-filter: blur(4px);
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.62rem;
  transform: translateY(54px);
}

.game-card {
  position: relative;
  border-radius: 12px;
  min-height: 126px;
  overflow: hidden;
  text-decoration: none;
  display: flex;
  align-items: flex-end;
  padding: 0.72rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow:
    inset 0 -58px 70px rgba(10, 18, 26, 0.42),
    0 10px 20px rgba(12, 31, 24, 0.2);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.game-card span {
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 700;
  z-index: 1;
  background: rgba(20, 33, 27, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 0.2rem 0.45rem;
}

.game-card::before {
  content: "";
  position: absolute;
  inset: 0;
  filter: saturate(1.18);
}

.game-card:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 -58px 70px rgba(10, 18, 26, 0.42),
    0 14px 24px rgba(12, 31, 24, 0.25);
}

.game-card.minecraft::before {
  background: linear-gradient(135deg, #3d7f45, #5fa662);
}

.game-card.roblox::before {
  background: linear-gradient(135deg, #3f7f62, #62a179);
}

.game-card.hytale::before {
  background: linear-gradient(135deg, #4f9256, #81bd69);
}

.game-card.gmod::before {
  background: linear-gradient(135deg, #4f7260, #73937f);
}

.game-card.websites::before {
  background: linear-gradient(135deg, #5f7866, #8da591);
}

.game-card.discord::before {
  background: linear-gradient(135deg, #2f6248, #4e7f63);
}

.variant-two .pulse-hero {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  padding: 1.2rem 0 0;
}

.variant-two .pulse-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 22px;
  background:
    radial-gradient(circle at 12% 12%, rgba(157, 241, 171, 0.22), transparent 40%),
    radial-gradient(circle at 88% 0%, rgba(124, 226, 159, 0.24), transparent 36%),
    linear-gradient(140deg, #3daa64, #35975a 52%, #2d8450);
  box-shadow: 0 24px 42px rgba(18, 49, 36, 0.24);
  border: 1px solid rgba(226, 255, 236, 0.18);
}

.variant-two .pulse-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 22px;
  background:
    linear-gradient(28deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 26px),
    linear-gradient(145deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 26px);
  background-size: 170px 170px;
  pointer-events: none;
}

.variant-two .pulse-grid,
.variant-two .channel-row {
  position: relative;
  z-index: 1;
}

.variant-two .pulse-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
  padding: 1.35rem 1.25rem 0;
}

.variant-two .pulse-left h1 {
  margin: 0;
  max-width: 680px;
  color: #ffffff;
  font-family: var(--font-brand);
  font-size: clamp(1.28rem, 2.6vw, 1.86rem);
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.variant-two .pulse-kicker {
  margin: 0 0 0.56rem;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #e6f7eb;
  font-weight: 700;
}

.variant-two .pulse-copy {
  margin: 0.65rem 0 0;
  max-width: 640px;
  color: #dbf4e1;
  font-size: 0.9rem;
  line-height: 1.45;
}

.variant-two .pulse-search {
  margin-top: 1rem;
  border: 1px solid rgba(232, 251, 239, 0.28);
  border-radius: 12px;
  background: rgba(18, 64, 42, 0.22);
  backdrop-filter: blur(4px);
  padding: 0.45rem;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.45rem;
}

.variant-two .pulse-search i {
  position: absolute;
  left: 0.98rem;
  color: #7e93a6;
  font-size: 0.86rem;
}

.variant-two .pulse-search input {
  width: 100%;
  border: 1px solid #d6e3d9;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.96);
  color: #2a4235;
  font-family: var(--font-ui);
  padding: 0.63rem 0.76rem 0.63rem 2rem;
}

.variant-two .pulse-search {
  position: relative;
}

.variant-two .pulse-search button {
  border: 1px solid rgba(238, 255, 244, 0.22);
  border-radius: 9px;
  background: #1f4b36;
  color: #ffffff;
  font-family: var(--font-ui);
  font-weight: 700;
  padding: 0.63rem 0.95rem;
  cursor: pointer;
}

.variant-two .pulse-search button:hover {
  background: #173c2b;
}

.variant-two .pulse-tags {
  margin-top: 0.74rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.variant-two .pulse-tags span {
  color: #e6f7eb;
  font-size: 0.77rem;
  font-weight: 700;
  margin-right: 0.12rem;
}

.variant-two .pulse-tags a {
  text-decoration: none;
  color: #edfff1;
  border: 1px solid rgba(235, 255, 241, 0.24);
  border-radius: 999px;
  background: rgba(24, 77, 50, 0.26);
  padding: 0.2rem 0.48rem;
  font-size: 0.76rem;
}

.variant-two .pulse-tags a:hover {
  background: rgba(24, 77, 50, 0.4);
}

.variant-two .pulse-right {
  border: 1px solid rgba(232, 251, 239, 0.28);
  border-radius: 16px;
  background: rgba(18, 64, 42, 0.22);
  padding: 0.82rem;
}

.variant-two .pulse-right h2 {
  margin: 0;
  color: #ffffff;
  font-family: var(--font-brand);
  font-size: 0.92rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.variant-two .pulse-right h2 i {
  font-size: 0.8rem;
  color: #dff7e7;
}

.variant-two .pulse-right ul {
  margin: 0.62rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.42rem;
}

.variant-two .pulse-right li {
  border: 1px solid rgba(223, 255, 234, 0.24);
  border-radius: 12px;
  background: rgba(18, 64, 42, 0.28);
  padding: 0.5rem 0.58rem;
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 0.48rem;
}

.variant-two .signal-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #e8ffef;
  background: rgba(230, 255, 239, 0.13);
  border: 1px solid rgba(230, 255, 239, 0.25);
  font-size: 0.75rem;
}

.variant-two .signal-copy {
  min-width: 0;
}

.variant-two .signal-copy strong {
  display: block;
  color: #ffffff;
  font-size: 0.98rem;
  line-height: 1.05;
}

.variant-two .signal-copy span {
  display: block;
  color: #d2efde;
  font-size: 0.72rem;
  margin-top: 0.08rem;
}

.variant-two .channel-row {
  margin-top: 1rem;
  padding: 0 1.25rem 1.2rem;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.55rem;
}

.variant-two .channel-card {
  position: relative;
  overflow: hidden;
  text-decoration: none;
  border: 1px solid rgba(216, 236, 224, 0.72);
  border-radius: 14px;
  background-color: transparent;
  color: #f7fff9;
  min-height: 86px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.38rem;
  background-size: cover;
  background-position: center;
  box-shadow:
    0 8px 16px rgba(17, 44, 32, 0.14);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.variant-two .channel-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 16, 22, 0.02), rgba(6, 10, 16, 0.24));
  pointer-events: none;
}

.variant-two .channel-card i {
  font-size: 1.05rem;
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.42);
}

.variant-two .channel-card span {
  font-size: 0.78rem;
  font-weight: 700;
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.44);
}

.variant-two .channel-card:hover {
  transform: translateY(-3px);
  border-color: rgba(38, 79, 60, 0.72);
  box-shadow:
    0 12px 24px rgba(14, 38, 29, 0.22);
}

.variant-two .channel-card.c1 {
  background-image:
    linear-gradient(180deg, rgba(15, 25, 32, 0.08), rgba(7, 10, 14, 0.46)),
    url("assets/Plugins.png");
}

.variant-two .channel-card.c2 {
  background-image:
    linear-gradient(180deg, rgba(15, 25, 32, 0.08), rgba(7, 10, 14, 0.46)),
    url("assets/Setups.webp");
}

.variant-two .channel-card.c3 {
  background-image:
    linear-gradient(180deg, rgba(15, 25, 32, 0.08), rgba(7, 10, 14, 0.46)),
    url("assets/Builds.webp");
}

.variant-two .channel-card.c4 {
  background-image:
    linear-gradient(180deg, rgba(15, 25, 32, 0.08), rgba(7, 10, 14, 0.46)),
    url("assets/Config.png");
}

.variant-two .channel-card.c5 {
  background-image:
    linear-gradient(180deg, rgba(15, 25, 32, 0.08), rgba(7, 10, 14, 0.46)),
    url("assets/Textures.jpg");
}

.variant-two .channel-card.c6 {
  background-image: linear-gradient(145deg, rgba(47, 98, 72, 0.6), rgba(78, 127, 99, 0.35));
}

.variant-two .best-products {
  max-width: 1240px;
  margin: 4rem auto 0;
  padding: 0 0.15rem 2rem;
}

.variant-two .best-products.latest-products {
  margin-top: 4rem;
  padding-bottom: 2.8rem;
}

.variant-two .best-products-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.7rem;
}

.variant-two .best-kicker {
  margin: 0;
  font-size: 0.78rem;
  color: #557262;
  font-weight: 700;
}

.variant-two .best-products-head h2 {
  margin: 0.14rem 0 0;
  font-family: var(--font-brand);
  color: var(--brand);
  font-size: 1.62rem;
  line-height: 1.08;
  display: inline-flex;
  align-items: center;
  gap: 0.18rem;
}

.variant-two .best-products-head h2 .section-title-icon {
  color: var(--brand);
  font-size: 0.72rem;
  line-height: 1;
}

.variant-two .best-link {
  text-decoration: none;
  border: 1px solid #c4d5c9;
  border-radius: 999px;
  background: #f4f9f5;
  color: #2d5d45;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.34rem 0.68rem;
}

.variant-two .best-products-rail-shell {
  position: relative;
}

.variant-two .best-products-grid {
  display: flex;
  gap: 0.85rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0.18rem 0.15rem 0.58rem;
  scrollbar-width: thin;
  scrollbar-color: #94b8a2 #e8f2ec;
}

.variant-two .best-products-grid::-webkit-scrollbar {
  height: 8px;
}

.variant-two .best-products-grid::-webkit-scrollbar-track {
  background: #e8f2ec;
  border-radius: 999px;
}

.variant-two .best-products-grid::-webkit-scrollbar-thumb {
  background: #94b8a2;
  border-radius: 999px;
}

.variant-two .rail-nav {
  position: absolute;
  top: 78px;
  width: 32px;
  height: 32px;
  border: 1px solid #d2deea;
  border-radius: 8px;
  background: #ffffff;
  color: #5a728b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 16px rgba(24, 41, 58, 0.12);
  z-index: 2;
}

.variant-two .rail-nav:hover {
  color: #20415f;
  border-color: #c1d3e2;
}

.variant-two .rail-nav.is-hidden {
  display: none;
  pointer-events: none;
}

.variant-two .rail-prev {
  left: -14px;
}

.variant-two .rail-next {
  right: -14px;
}

.variant-two .product-card-item {
  flex: 0 0 318px;
  scroll-snap-align: start;
  border: 1px solid #d6deea;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 10px 20px rgba(20, 42, 66, 0.08);
  overflow: hidden;
  position: relative;
}

.variant-two .creator-note {
  margin: 0 0 0.74rem;
  color: #557162;
  font-size: 0.78rem;
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  padding: 0.32rem 0.56rem;
  border: 1px solid #d1e1d7;
  background: #f3faf5;
  border-radius: 999px;
}

.variant-two .creator-note i {
  color: #2f7b50;
}

.variant-two .product-cover {
  height: 148px;
  display: block;
  position: relative;
  text-decoration: none;
  background:
    linear-gradient(180deg, rgba(10, 15, 22, 0.16), rgba(8, 12, 19, 0.7)),
    linear-gradient(135deg, #2d7f4c, #3c9c63 58%, #2c6f56);
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid #d8e1ec;
}

.variant-two .product-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(8, 10, 16, 0.35) 100%);
  pointer-events: none;
}

.variant-two .product-price-badge {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 1;
  border-radius: 6px;
  padding: 0.24rem 0.42rem;
  background: #ffffff;
  border: 1px solid #d2dce7;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.06rem;
  min-width: 72px;
}

.variant-two .product-price-badge strong {
  color: #243346;
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1;
}

.variant-two .product-price-badge small {
  color: #8795a2;
  font-size: 0.61rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: line-through;
}

.variant-two .product-price-badge.is-on-sale strong {
  color: #1f6f47;
}

.variant-two .product-badge {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #f7fbff;
  background: rgba(14, 25, 39, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 6px;
  padding: 0.18rem 0.44rem;
}

.variant-two .product-content {
  padding: 0.7rem 0.7rem 0.14rem;
}

.variant-two .product-card-item h3 {
  margin: 0;
  font-size: 1.06rem;
  line-height: 1.25;
}

.variant-two .product-card-item h3 a {
  text-decoration: none;
  color: var(--brand);
  font-family: var(--font-brand);
  font-weight: 800;
}

.variant-two .product-card-item h3 a:hover {
  color: var(--brand-dark);
}

.variant-two .product-source {
  margin: 0.3rem 0 0;
  font-size: 0.81rem;
  color: #5c7085;
  display: flex;
  align-items: center;
  gap: 0.24rem;
  flex-wrap: wrap;
}

.variant-two .product-source a {
  text-decoration: none;
  color: #9550bd;
  font-weight: 700;
}

.variant-two .product-source i {
  color: #169a58;
  font-size: 0.72rem;
}

.variant-two .product-source span {
  color: #5f7388;
}

.variant-two .product-desc {
  margin: 0.34rem 0 0;
  color: #4c6074;
  font-size: 0.81rem;
  line-height: 1.42;
  min-height: 1.34rem;
}

.variant-two .product-footer {
  margin: 0;
  padding: 0.62rem 0.7rem 0.76rem;
  display: grid;
  gap: 0.62rem;
  border-top: 1px solid #e2e8f1;
  background:
    linear-gradient(180deg, rgba(245, 250, 246, 0.94), rgba(255, 255, 255, 0.98));
}

.variant-two .product-stats-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.38rem;
  font-size: 0.79rem;
  color: #597082;
  font-weight: 700;
}

.variant-two .product-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.72rem;
  padding: 0.56rem 0.58rem;
  border: 1px solid #dce7df;
  border-radius: 12px;
  background:
    radial-gradient(circle at top left, rgba(89, 172, 117, 0.11), transparent 54%),
    linear-gradient(180deg, #f8fcf9, #f1f8f3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.variant-two .product-card-price {
  min-width: 0;
  display: grid;
  gap: 0.14rem;
}

.variant-two .product-card-price-label {
  color: #6f8576;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.variant-two .product-card-price-value {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.32rem;
}

.variant-two .product-card-price strong {
  color: #1f5d3c;
  font-size: 1rem;
  line-height: 1;
  font-weight: 900;
}

.variant-two .product-card-price small {
  color: #8795a2;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: line-through;
}

.variant-two .product-card-price.is-on-sale strong {
  color: #1e8051;
}

.variant-two .product-card-price.is-free strong {
  color: #239154;
}

.variant-two .product-card-status {
  border-radius: 999px;
  padding: 0.42rem 0.68rem;
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  font-size: 0.74rem;
  font-weight: 800;
  white-space: nowrap;
}

.variant-two .product-card-status.is-own {
  color: #5d6775;
  border: 1px solid #d4dce6;
  background: #ffffff;
}

.variant-two .product-card-status.is-owned {
  color: #2f8f53;
  border: 1px solid #bcdcc6;
  background: #f4fbf6;
}

.variant-two .product-stars {
  display: inline-flex;
  align-items: center;
  gap: 0.08rem;
  color: #f5b301;
}

.variant-two .product-stars i {
  font-size: 0.74rem;
}

.variant-two .product-stats-row span {
  white-space: nowrap;
}

.variant-two .product-owned-indicator {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: linear-gradient(140deg, #39a65f, #2f8f53);
  color: #ffffff;
  border: 1px solid #2f8f53;
  box-shadow: 0 6px 14px rgba(39, 131, 75, 0.28);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.variant-two .product-owned-indicator i {
  font-size: 0.66rem;
}

.variant-two .product-buy-btn {
  border: 1px solid #2f8f53;
  border-radius: 10px;
  background: linear-gradient(140deg, #39a65f, #2f8f53);
  color: #ffffff;
  font-family: var(--font-ui);
  font-size: 0.76rem;
  font-weight: 800;
  padding: 0.54rem 0.78rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 10px 18px rgba(47, 143, 83, 0.18);
}

.variant-two .product-buy-btn:hover {
  background: linear-gradient(140deg, #319356, #267947);
}

.variant-two .product-buy-btn.is-in-cart {
  border-color: #cfdae5;
  background: #ffffff;
  color: #35536e;
  box-shadow: 0 8px 16px rgba(35, 58, 82, 0.08);
}

.variant-two .product-buy-btn.is-in-cart:hover {
  background: #f4f8fb;
}

.variant-two .product-buy-btn.is-download {
  border-color: #246f47;
  background: linear-gradient(140deg, #2f8f53, #246f47);
}

.variant-two .product-buy-btn.is-download:hover {
  background: linear-gradient(140deg, #287d48, #1f623d);
}

.variant-two .product-buy-btn:disabled {
  cursor: not-allowed;
  opacity: 0.78;
}

.variant-two .product-empty {
  color: #567068;
  font-size: 0.88rem;
  margin: 0.45rem 0 0;
}

.variant-two .creator-cta {
  margin-top: 0.7rem;
}

.variant-two .creator-cta a {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.33rem;
  color: #255e42;
  border: 1px solid #c8dace;
  background: #eef7f1;
  border-radius: 9px;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.36rem 0.6rem;
}

.variant-two .trust-section {
  max-width: 1240px;
  margin: 4rem auto 0;
  padding: 0 0.15rem 3.1rem;
}

.catalog-page-main {
  min-height: calc(100vh - 110px);
  padding-bottom: 1.6rem;
}

.catalog-hero {
  margin-top: 1rem;
  border: 1px solid #d7e6dd;
  border-radius: 18px;
  background:
    radial-gradient(circle at 12% 18%, rgba(92, 184, 121, 0.18), transparent 28%),
    radial-gradient(circle at 88% 82%, rgba(73, 153, 103, 0.14), transparent 30%),
    linear-gradient(145deg, #ffffff, #f8fcf9 72%);
  box-shadow: 0 18px 34px rgba(24, 52, 38, 0.08);
  padding: 1.15rem;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(300px, 0.8fr);
  gap: 1rem;
}

.catalog-kicker,
.catalog-section-kicker {
  margin: 0;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 800;
  color: #4e8965;
}

.catalog-hero-copy h1 {
  margin: 0.35rem 0 0;
  color: #1e5335;
  font-family: var(--font-brand);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.06;
}

.catalog-hero-copy > p:not(.catalog-kicker) {
  margin: 0.55rem 0 0;
  max-width: 760px;
  color: #547082;
  font-size: 0.93rem;
  line-height: 1.6;
}

.catalog-inline-stats {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.72rem;
}

.catalog-inline-stats article,
.catalog-hero-panel {
  border: 1px solid #d6e6dc;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.catalog-inline-stats article {
  padding: 0.82rem 0.84rem;
}

.catalog-inline-stats strong {
  display: block;
  color: #205f3c;
  font-size: 1.24rem;
  font-weight: 900;
  line-height: 1;
}

.catalog-inline-stats span {
  display: block;
  margin-top: 0.28rem;
  color: #678072;
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.catalog-hero-panel {
  padding: 1rem;
  background:
    radial-gradient(circle at top right, rgba(112, 188, 139, 0.16), transparent 34%),
    linear-gradient(180deg, #ffffff, #f6fbf8);
}

.catalog-hero-panel h2 {
  margin: 0;
  color: #24553a;
  font-family: var(--font-brand);
  font-size: 1.02rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.catalog-hero-panel h2 i {
  color: #2c8d56;
}

.catalog-hero-panel ul {
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.72rem;
}

.catalog-hero-panel li {
  color: #587466;
  font-size: 0.88rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.58rem;
}

.catalog-hero-panel li i {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  border: 1px solid #cae2d2;
  background: #eef8f1;
  color: #2b8853;
}

.catalog-toolbar-shell,
.catalog-results-shell {
  margin-top: 1rem;
  border: 1px solid #d8e7de;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff, #fbfefc);
  box-shadow: 0 16px 30px rgba(25, 53, 39, 0.06);
}

.catalog-toolbar-shell {
  padding: 1rem;
}

.catalog-toolbar-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 0.9rem;
}

.catalog-toolbar-head h2 {
  margin: 0.3rem 0 0;
  color: #1d5434;
  font-family: var(--font-brand);
  font-size: 1.45rem;
  line-height: 1.1;
}

.catalog-results-meta {
  margin: 0;
  color: #627b6d;
  font-size: 0.84rem;
  font-weight: 700;
}

.catalog-toolbar {
  margin-top: 0.95rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  gap: 0.8rem;
}

.catalog-input-wrap,
.catalog-select-wrap {
  border: 1px solid #d2e1d7;
  border-radius: 14px;
  background: linear-gradient(180deg, #fbfefc, #f4faf6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.catalog-input-wrap {
  display: flex;
  align-items: center;
  gap: 0.58rem;
  padding: 0 0.85rem;
}

.catalog-input-wrap i {
  color: #5b8668;
}

.catalog-input-wrap input,
.catalog-select-wrap select {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: none;
  color: #274c3a;
  font-size: 0.92rem;
  font-family: var(--font-ui);
}

.catalog-input-wrap input {
  padding: 0.92rem 0;
}

.catalog-select-wrap {
  display: grid;
  gap: 0.12rem;
  padding: 0.48rem 0.72rem 0.5rem;
}

.catalog-select-wrap span {
  color: #6f8476;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.catalog-select-wrap select {
  padding: 0.18rem 0;
}

.catalog-results-shell {
  padding: 1rem;
}

.catalog-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(286px, 1fr));
  gap: 0.95rem;
}

.catalog-products-grid .product-card-item {
  flex: initial;
  min-width: 0;
}

.variant-two .trust-shell {
  position: relative;
  overflow: hidden;
  border: 1px solid #d4e1d9;
  border-radius: 16px;
  background:
    radial-gradient(circle at 14% 18%, rgba(127, 199, 153, 0.18), transparent 37%),
    radial-gradient(circle at 90% 90%, rgba(107, 175, 132, 0.14), transparent 34%),
    #ffffff;
  box-shadow: 0 18px 34px rgba(24, 52, 38, 0.1);
  padding: 1.2rem 1rem 1rem;
}

.variant-two .trust-shell::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, #3fb96c, #2f9d5d, rgba(47, 157, 93, 0.2));
}

.variant-two .trust-head h2 {
  margin: 0.26rem 0 0;
  color: #1d4b2f;
  font-family: var(--font-brand);
  font-size: 1.63rem;
  line-height: 1.12;
}

.variant-two .trust-kicker {
  margin: 0;
  color: #4f7260;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 800;
}

.variant-two .trust-head > p:not(.trust-kicker) {
  margin: 0.48rem 0 0;
  color: #4f6678;
  max-width: 760px;
  font-size: 0.88rem;
  line-height: 1.5;
}

.variant-two .trust-grid {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.7rem;
}

.variant-two .trust-card {
  border: 1px solid #d8e6de;
  border-radius: 12px;
  background: linear-gradient(165deg, #fbfefc, #f4faf7 75%);
  padding: 0.8rem 0.75rem 0.72rem;
  box-shadow: 0 8px 15px rgba(31, 67, 49, 0.07);
}

.variant-two .trust-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  border: 1px solid #cbe3d2;
  color: #1f5f3f;
  background: linear-gradient(140deg, #dff3e6, #f1fbf4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.variant-two .trust-icon i {
  font-size: 0.93rem;
}

.variant-two .trust-icon.ti-2 {
  background: linear-gradient(140deg, #e2f5ea, #f7fdf9);
}

.variant-two .trust-icon.ti-3 {
  background: linear-gradient(140deg, #ecf8f0, #f6fcf8);
}

.variant-two .trust-icon.ti-4 {
  background: linear-gradient(140deg, #e6f6ec, #f6fcf8);
}

.variant-two .trust-card h3 {
  margin: 0.62rem 0 0;
  color: #244f35;
  font-size: 0.92rem;
  font-family: var(--font-brand);
  line-height: 1.26;
}

.variant-two .trust-card p {
  margin: 0.34rem 0 0;
  color: #567083;
  font-size: 0.79rem;
  line-height: 1.45;
}

.variant-two .trust-signals {
  margin-top: 0.82rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.variant-two .trust-signals span {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  border: 1px solid #d4e3da;
  background: #f4faf6;
  color: #355b46;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 0.27rem 0.54rem;
}

.variant-two .trust-signals i {
  color: var(--brand);
  font-size: 0.74rem;
}

.variant-two .involve-section {
  max-width: 1240px;
  margin: 4rem auto 0;
  padding: 0 0.15rem 0;
}

.variant-two .involve-head h2 {
  margin: 0;
  color: #1e6f3e;
  font-family: var(--font-brand);
  font-size: 1.58rem;
  line-height: 1.08;
}

.variant-two .involve-head p {
  margin: 0.46rem 0 0;
  color: #536b80;
  font-size: 0.88rem;
}

.variant-two .involve-grid {
  margin-top: 0.84rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.62rem;
}

.variant-two .involve-card {
  position: relative;
  overflow: hidden;
  text-decoration: none;
  border-radius: 10px;
  border: 1px solid #2f8ac8;
  color: #ffffff;
  padding: 0.9rem 0.92rem 0.86rem;
  background:
    linear-gradient(130deg, rgba(255, 255, 255, 0.08), transparent 50%),
    linear-gradient(135deg, #1f83c6, #3199dc 56%, #237dbd);
  box-shadow: 0 14px 24px rgba(28, 96, 146, 0.2);
}

.variant-two .involve-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 18px);
  pointer-events: none;
}

.variant-two .involve-card h3,
.variant-two .involve-card p {
  position: relative;
  z-index: 1;
}

.variant-two .involve-card h3 {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  font-size: 1.01rem;
  font-family: var(--font-brand);
  line-height: 1.2;
}

.variant-two .involve-card h3 i {
  font-size: 0.74rem;
}

.variant-two .involve-card p {
  margin: 0.52rem 0 0;
  color: rgba(241, 249, 255, 0.96);
  font-size: 0.84rem;
  line-height: 1.45;
}

.variant-two .involve-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 28px rgba(23, 85, 133, 0.22);
}

.variant-two .site-footer {
  position: relative;
  margin: 0 calc(50% - 50vw) 0;
  padding: 0 0 2rem;
  background: #ffffff;
  border-top: 1px solid #d3dae3;
}

.variant-two .site-footer::before {
  content: "";
  display: block;
  height: 6px;
  background: #ffffff;
  border-bottom: 1px solid #d3dae3;
}

.variant-two .site-footer .footer-grid {
  max-width: 1240px;
  margin: 0 auto;
  padding: 1rem 1rem 0;
}

.variant-two .footer-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.8rem;
}

.variant-two .footer-col h4 {
  margin: 0;
  color: var(--brand);
  font-family: var(--font-brand);
  font-size: 1rem;
}

.variant-two .footer-col a {
  text-decoration: none;
  display: block;
  margin-top: 0.6rem;
  color: #546b80;
  font-size: 0.86rem;
}

.variant-two .footer-col a:hover {
  color: #1f6fb0;
}

.variant-two .footer-legal {
  max-width: 1240px;
  margin: 1rem auto 0;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid #e2e9f0;
  color: #7a8ea1;
  font-size: 0.77rem;
  text-align: center;
  line-height: 1.45;
}

.variant-two .site-footer {
  position: relative;
  margin: 0 calc(50% - 50vw) 0;
  padding: 0 0 1.65rem;
  background: #ffffff;
  border-top: 1px solid #d7e1ea;
}

.variant-two .site-footer::before {
  content: "";
  display: block;
  height: 5px;
  background: #ffffff;
  border-bottom: 1px solid #d7e1ea;
}

.variant-two .footer-shell {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0.95rem 1rem 0;
}

.variant-two .footer-intro {
  display: none;
}

.variant-two .footer-kicker {
  margin: 0;
  color: #4e8865;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.variant-two .footer-intro-copy {
  margin: 0;
  color: #546f63;
  font-size: 0.82rem;
  line-height: 1.55;
  max-width: 620px;
  text-align: right;
}

.variant-two .site-footer .footer-grid {
  max-width: none;
  margin: 0;
  padding: 0;
}

.variant-two .footer-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.85rem;
}

.variant-two .footer-col {
  display: grid;
  align-content: start;
  gap: 0.42rem;
}

.variant-two .footer-col h4 {
  margin: 0;
  color: var(--brand);
  font-family: var(--font-brand);
  font-size: 0.98rem;
}

.variant-two .footer-col > p {
  margin: 0;
  color: #5c7184;
  font-size: 0.76rem;
  line-height: 1.45;
}

.variant-two .footer-link-row {
  text-decoration: none;
  display: block;
  padding: 0.2rem 0 0;
  border-top: 0;
  transition: color 0.18s ease;
}

.variant-two .footer-link-row strong {
  display: block;
  color: #4d667d;
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.25;
}

.variant-two .footer-link-row span {
  display: block;
  margin-top: 0.14rem;
  color: #7a8d9e;
  font-size: 0.71rem;
  line-height: 1.38;
}

.variant-two .footer-link-row:hover {
  color: inherit;
}

.variant-two .footer-link-row:hover strong {
  color: #1f6fb0;
}

.variant-two .footer-link-row:hover span {
  color: #6c8396;
}

.variant-two .footer-legal {
  max-width: none;
  margin: 1rem 0 0;
  padding: 0.82rem 0 0;
  border-top: 1px solid #e2e9f0;
  color: #7a8ea1;
  font-size: 0.73rem;
  text-align: center;
  line-height: 1.5;
}

.site-footer {
  position: relative;
  margin: 0 calc(50% - 50vw) 0;
  padding: 0 0 1.65rem;
  background: #ffffff;
  border-top: 1px solid #d7e1ea;
}

.site-footer::before {
  content: "";
  display: block;
  height: 5px;
  background: #ffffff;
  border-bottom: 1px solid #d7e1ea;
}

.footer-shell {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0.95rem 1rem 0;
}

.site-footer .footer-grid {
  max-width: none;
  margin: 0;
  padding: 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.85rem;
}

.footer-col {
  display: grid;
  align-content: start;
  gap: 0.42rem;
}

.footer-col h4 {
  margin: 0;
  color: var(--brand);
  font-family: var(--font-brand);
  font-size: 0.98rem;
}

.footer-col > p {
  margin: 0;
  color: #5c7184;
  font-size: 0.76rem;
  line-height: 1.45;
}

.footer-link-row {
  text-decoration: none;
  display: block;
  padding: 0.2rem 0 0;
  border-top: 0;
  transition: color 0.18s ease;
}

.footer-link-row strong {
  display: block;
  color: #4d667d;
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.25;
}

.footer-link-row span {
  display: block;
  margin-top: 0.14rem;
  color: #7a8d9e;
  font-size: 0.71rem;
  line-height: 1.38;
}

.footer-link-row:hover {
  color: inherit;
}

.footer-link-row:hover strong {
  color: #1f6fb0;
}

.footer-link-row:hover span {
  color: #6c8396;
}

.footer-legal {
  max-width: none;
  margin: 1rem 0 0;
  padding: 0.82rem 0 0;
  border-top: 1px solid #e2e9f0;
  color: #7a8ea1;
  font-size: 0.73rem;
  text-align: center;
  line-height: 1.5;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.marketplace-notice {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 140;
  max-width: min(420px, calc(100vw - 1rem));
  border-radius: 10px;
  border: 1px solid #d5e0eb;
  background: #ffffff;
  color: #375168;
  box-shadow: 0 14px 28px rgba(22, 41, 57, 0.2);
  padding: 0.62rem 0.72rem;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.4;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.marketplace-notice.is-success {
  border-color: #b9dfc8;
  background: #f0faf3;
  color: #1f6a40;
}

.marketplace-notice.is-error {
  border-color: #eac6cd;
  background: #fff4f6;
  color: #a13c48;
}

.marketplace-notice.is-info {
  border-color: #cdddeb;
  background: #f4f9ff;
  color: #315a7d;
}

.marketplace-notice.is-hidden {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}

.policy-page-main {
  min-height: calc(100vh - 120px);
  padding: 1.25rem 1rem 2rem;
}

.policy-hero {
  border: 1px solid #d9e5dd;
  border-radius: 18px;
  padding: 1.25rem 1.15rem 1.15rem;
  background:
    radial-gradient(circle at 12% 18%, rgba(126, 204, 152, 0.18), transparent 30%),
    radial-gradient(circle at 90% 18%, rgba(97, 181, 129, 0.12), transparent 30%),
    #ffffff;
}

.policy-kicker {
  margin: 0;
  color: #3d8f5a;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.policy-hero h1 {
  margin: 0.55rem 0 0;
  color: #1e5032;
  font-family: var(--font-brand);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.05;
}

.policy-summary {
  margin: 0.6rem 0 0;
  max-width: 760px;
  color: #5e7384;
  font-size: 0.92rem;
  line-height: 1.62;
}

.policy-facts {
  margin-top: 0.95rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.policy-fact-pill {
  min-width: 190px;
  padding: 0.72rem 0.82rem;
  border: 1px solid #dbe6ef;
  border-radius: 14px;
  background: #fdfefe;
}

.policy-fact-pill span {
  display: block;
  color: #7790a1;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.policy-fact-pill strong {
  display: block;
  margin-top: 0.25rem;
  color: #244f38;
  font-size: 0.88rem;
  line-height: 1.45;
}

.policy-hero-meta {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  color: #678093;
  font-size: 0.82rem;
}

.policy-hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.36rem;
}

.policy-layout {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
  gap: 0.95rem;
  align-items: start;
}

.policy-sidebar {
  position: sticky;
  top: 108px;
  display: grid;
  gap: 0.85rem;
}

.policy-side-card,
.policy-content-shell {
  border: 1px solid #dbe5ee;
  border-radius: 18px;
  background: #ffffff;
}

.policy-side-card {
  padding: 1rem 0.95rem;
}

.policy-side-card h3 {
  margin: 0;
  color: #214d35;
  font-size: 1rem;
  font-family: var(--font-brand);
}

.policy-side-card p,
.policy-side-card a {
  color: #5b7283;
  font-size: 0.85rem;
  line-height: 1.6;
}

.policy-side-card a {
  text-decoration: none;
  font-weight: 700;
}

.policy-side-card a:hover {
  color: #1f6f46;
}

.policy-nav {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.8rem;
}

.policy-nav a,
.policy-related-link {
  text-decoration: none;
  padding: 0.72rem 0.78rem;
  border-radius: 12px;
  border: 1px solid #dfe8ef;
  background: #fbfdfd;
  color: #33556b;
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.45;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.policy-nav a:hover,
.policy-related-link:hover {
  border-color: #9cd1af;
  background: #f4fbf6;
  color: #1f6f46;
}

.policy-related-links {
  margin-top: 0.8rem;
  display: grid;
  gap: 0.45rem;
}

.policy-content-shell {
  padding: 0.45rem;
}

.policy-section {
  padding: 1rem 1rem 1.05rem;
  border-bottom: 1px solid #e6edf4;
}

.policy-section:last-child {
  border-bottom: 0;
}

.policy-section-index {
  margin: 0;
  color: #78a88a;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.policy-section h2 {
  margin: 0.45rem 0 0;
  color: #244a5f;
  font-size: 1.18rem;
  font-family: var(--font-brand);
}

.policy-section p,
.policy-section li {
  color: #51697c;
  font-size: 0.9rem;
  line-height: 1.7;
}

.policy-section a,
.policy-address-card a {
  color: #25744a;
  font-weight: 700;
  text-decoration: none;
}

.policy-section a:hover,
.policy-address-card a:hover {
  color: #1d5a39;
}

.policy-section ul {
  margin: 0.75rem 0 0;
  padding-left: 1.2rem;
}

.policy-address-card {
  margin: 0.75rem 0;
  padding: 0.82rem 0.9rem;
  border: 1px solid #dfe8ef;
  border-radius: 14px;
  background: #f9fcfa;
}

@media (max-width: 1040px) {
  .policy-layout {
    grid-template-columns: 1fr;
  }

  .policy-sidebar {
    position: static;
  }
}

@media (max-width: 760px) {
  .policy-page-main {
    padding: 1rem 0.8rem 1.6rem;
  }

  .policy-hero,
  .policy-side-card,
  .policy-content-shell {
    border-radius: 16px;
  }

  .policy-hero {
    padding: 1rem 0.9rem;
  }

  .policy-facts {
    gap: 0.55rem;
  }

  .policy-fact-pill {
    min-width: 0;
    width: 100%;
  }

  .policy-section {
    padding: 0.95rem 0.88rem 1rem;
  }
}

@media (max-width: 1090px) {
  .quick-links,
  .primary-row {
    display: none;
  }

  .menu-toggle {
    display: inline-flex;
  }
}

@media (max-width: 980px) {
  .hero-search {
    grid-template-columns: 1fr;
  }

  .game-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    transform: translateY(40px);
  }

  .discovery-shell::after {
    background-size: 300px 300px;
    background-position: 88% 40%;
  }

  .variant-two .pulse-grid {
    grid-template-columns: 1fr;
  }

  .catalog-hero {
    grid-template-columns: 1fr;
  }

  .catalog-toolbar {
    grid-template-columns: 1fr;
  }

  .variant-two .channel-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .variant-two .product-card-item {
    flex-basis: 296px;
  }

  .variant-two .best-products-grid {
    gap: 0.75rem;
  }

  .variant-two .rail-nav {
    display: none;
  }

  .variant-two .trust-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .variant-two .involve-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .variant-two .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .variant-two .footer-intro {
    grid-template-columns: 1fr;
  }

  .auth-shell {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .ghost-link,
  .solid-link {
    display: none;
  }

  .discovery-shell {
    padding: 1.25rem 0.82rem 4.1rem;
  }

  .hero-stats {
    gap: 0.42rem;
  }

  .hero-stats span {
    font-size: 0.82rem;
  }

  .popular-searches {
    font-size: 0.83rem;
    line-height: 1.45;
  }

  .game-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .catalog-hero,
  .catalog-toolbar-shell,
  .catalog-results-shell {
    padding: 0.85rem;
  }

  .catalog-inline-stats {
    grid-template-columns: 1fr;
  }

  .catalog-toolbar-head {
    align-items: start;
    flex-direction: column;
  }

  .catalog-products-grid {
    grid-template-columns: 1fr;
  }

  .discovery-shell::after {
    background-size: 210px 210px;
    background-position: 100% 28%;
  }

  .variant-two .pulse-hero::before,
  .variant-two .pulse-hero::after {
    border-radius: 16px;
  }

  .variant-two .pulse-grid {
    padding: 1rem 0.82rem 0;
  }

  .variant-two .pulse-search {
    grid-template-columns: 1fr;
  }

  .variant-two .pulse-search button {
    width: 100%;
  }

  .variant-two .channel-row {
    padding: 0 0.82rem 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .variant-two .best-products {
    margin-top: 3.5rem;
  }

  .variant-two .best-products.latest-products {
    margin-top: 3.5rem;
  }

  .variant-two .best-products-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .variant-two .product-card-item {
    flex-basis: min(84vw, 320px);
  }

  .variant-two .best-products-grid {
    gap: 0.65rem;
  }

  .variant-two .product-buy-btn {
    margin-left: 0;
  }

  .variant-two .trust-section {
    margin-top: 3.5rem;
    padding-bottom: 2.2rem;
  }

  .variant-two .trust-shell {
    padding: 1rem 0.82rem 0.9rem;
  }

  .variant-two .trust-head h2 {
    font-size: 1.35rem;
  }

  .variant-two .trust-grid {
    grid-template-columns: 1fr;
    gap: 0.58rem;
  }

  .variant-two .involve-section {
    margin-top: 3.5rem;
  }

  .variant-two .involve-head h2 {
    font-size: 1.35rem;
  }

  .variant-two .involve-grid {
    grid-template-columns: 1fr;
    gap: 0.56rem;
  }

  .variant-two .site-footer {
    margin: 0 calc(50% - 50vw) 0;
    padding: 0 0 1.7rem;
  }

  .site-footer {
    margin: 0 calc(50% - 50vw) 0;
    padding: 0 0 1.7rem;
  }

  .variant-two .site-footer::before {
    height: 7px;
  }

  .site-footer::before {
    height: 7px;
  }

  .variant-two .footer-shell {
    padding: 0.95rem 1rem 0;
  }

  .footer-shell {
    padding: 0.95rem 1rem 0;
  }

  .variant-two .site-footer .footer-grid {
    margin-top: 0;
    padding: 0.9rem 0 0;
  }

  .site-footer .footer-grid {
    margin-top: 0;
    padding: 0.9rem 0 0;
  }

  .variant-two .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.72rem;
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.72rem;
  }

  .variant-two .footer-legal {
    text-align: left;
  }

  .footer-legal {
    text-align: left;
  }

  .auth-page-main {
    padding: 1.4rem 0.8rem 1.8rem;
  }

  .auth-info,
  .auth-card {
    padding: 1.2rem 0.95rem;
  }

  .auth-info > p {
    font-size: 0.88rem;
  }

  .auth-info li {
    font-size: 0.8rem;
  }

  .auth-modal-panel {
    margin-top: 4vh;
    width: calc(100% - 1rem);
    padding: 0.86rem 0.72rem 0.88rem;
  }

  .auth-modal-tabs {
    width: 100%;
  }

  .auth-modal-tabs button {
    flex: 1;
  }

  .profile-panel {
    top: 60px;
    right: 0.5rem;
    left: 0.5rem;
    width: auto;
  }

  .profile-panel::before {
    right: 38px;
  }

  .updates-panel {
    top: 60px;
    right: 0.5rem;
    left: 0.5rem;
    width: auto;
  }

  .updates-panel::before {
    right: 108px;
  }

  .brand-logo-wrap {
    width: 38px;
    height: 38px;
  }
}

@media (max-width: 640px) {
  .variant-two .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .variant-two .footer-intro h2 {
    font-size: 1.28rem;
  }
}

.creator-page-main {
  min-height: calc(100vh - 110px);
  padding: 1.2rem 1rem 2rem;
}

.creator-page-hero {
  border: 1px solid #d9e5dd;
  border-radius: 16px;
  padding: 1.2rem 1.1rem;
  background:
    radial-gradient(circle at 8% 20%, rgba(124, 201, 148, 0.16), transparent 34%),
    radial-gradient(circle at 90% 88%, rgba(93, 171, 121, 0.1), transparent 32%),
    #ffffff;
}

.creator-page-kicker {
  margin: 0;
  color: #2f8f53;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.creator-page-hero h1 {
  margin: 0.52rem 0 0;
  color: #1f4e31;
  font-family: var(--font-brand);
  font-size: clamp(1.45rem, 2.5vw, 2.05rem);
}

.creator-page-hero p {
  margin: 0.55rem 0 0;
  color: #5c7285;
  font-size: 0.89rem;
  max-width: 700px;
  line-height: 1.55;
}

.creator-page-layout {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: 0.95rem;
  align-items: start;
}

.creator-summary-card,
.creator-editor-card {
  border: 1px solid #d7e3ee;
  border-radius: 14px;
  background: #ffffff;
}

.creator-summary-card {
  padding: 1rem 0.92rem 0.94rem;
  position: sticky;
  top: 116px;
}

.creator-summary-top {
  text-align: center;
}

.creator-avatar-button {
  position: relative;
  margin: 0 auto;
  border: 0;
  padding: 0;
  background: transparent;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
}

.creator-avatar-button:focus-visible {
  outline: none;
}

.creator-avatar-button:focus-visible .creator-avatar-preview,
.creator-avatar-button:hover .creator-avatar-preview {
  transform: translateY(-1px);
  box-shadow: 0 18px 30px rgba(31, 79, 50, 0.16);
}

.creator-avatar-preview {
  margin: 0 auto;
  width: 74px;
  height: 74px;
  font-size: 1.62rem;
  border-width: 2px;
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
  box-shadow: 0 12px 24px rgba(31, 79, 50, 0.12);
}

.creator-avatar-button:hover .creator-avatar-preview.has-image,
.creator-avatar-button:focus-visible .creator-avatar-preview.has-image {
  filter: brightness(0.98);
}

.creator-avatar-edit-badge {
  position: absolute;
  right: -6px;
  bottom: -4px;
  border: 1px solid #c9dece;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, #f1fbf4 100%);
  color: #236944;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 0.28rem 0.52rem;
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  box-shadow: 0 10px 18px rgba(23, 46, 30, 0.12);
}

.creator-avatar-modal {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: none;
}

.creator-avatar-modal.is-open {
  display: block;
}

.creator-avatar-modal-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  background: rgba(11, 19, 27, 0.54);
  backdrop-filter: blur(4px);
  cursor: pointer;
}

.creator-avatar-modal-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(520px, calc(100% - 1.2rem));
  transform: translate(-50%, -50%);
  border: 1px solid #d6e3da;
  border-radius: 22px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fcf8 100%);
  box-shadow: 0 30px 60px rgba(9, 20, 15, 0.22);
  overflow: hidden;
}

.creator-avatar-modal-head {
  padding: 1rem 1.05rem 0.82rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
  border-bottom: 1px solid #e1ece5;
}

.creator-avatar-modal-head h2 {
  margin: 0;
  color: #1f4f32;
  font-family: var(--font-brand);
  font-size: 1.12rem;
}

.creator-avatar-modal-head p {
  margin: 0.26rem 0 0;
  color: #64806f;
  font-size: 0.84rem;
}

.creator-avatar-modal-close {
  border: 1px solid #d4e1d8;
  border-radius: 12px;
  background: #ffffff;
  color: #325542;
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
}

.creator-avatar-editor-stage {
  padding: 1.1rem 1.05rem 0.45rem;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 30%, rgba(83, 174, 110, 0.08), transparent 52%),
    linear-gradient(180deg, #f8fcf9 0%, #f1f8f4 100%);
}

.creator-avatar-crop-area {
  position: relative;
  width: min(300px, 72vw);
  aspect-ratio: 1;
  border-radius: 999px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(32, 86, 57, 0.08), rgba(92, 182, 120, 0.12)),
    repeating-linear-gradient(
      45deg,
      rgba(35, 79, 50, 0.06) 0,
      rgba(35, 79, 50, 0.06) 10px,
      rgba(255, 255, 255, 0.12) 10px,
      rgba(255, 255, 255, 0.12) 20px
    );
  cursor: grab;
  user-select: none;
  touch-action: none;
  border: 3px solid rgba(255, 255, 255, 0.92);
  box-shadow:
    0 24px 42px rgba(20, 44, 29, 0.18),
    inset 0 0 0 1px rgba(38, 92, 58, 0.08);
}

.creator-avatar-crop-area.is-dragging {
  cursor: grabbing;
}

.creator-avatar-crop-area img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--avatar-position-x, 50%) var(--avatar-position-y, 50%);
  transform: scale(var(--avatar-zoom, 1));
  transform-origin: center center;
  display: block;
  pointer-events: none;
}

.creator-avatar-crop-ring {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.creator-avatar-crop-ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 0 0 1px rgba(38, 92, 58, 0.12);
}

.creator-avatar-editor-controls {
  padding: 0.2rem 1.05rem 0;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.creator-avatar-zoom {
  flex: 1 1 auto;
  display: grid;
  gap: 0.38rem;
}

.creator-avatar-zoom span {
  color: #31523e;
  font-size: 0.82rem;
  font-weight: 800;
}

.creator-avatar-zoom input {
  width: 100%;
  accent-color: #3fb96c;
}

.creator-avatar-modal-actions {
  padding: 1rem 1.05rem 1.1rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.72rem;
}

.creator-summary-top h2 {
  margin: 0.62rem 0 0;
  color: #1f4f32;
  font-family: var(--font-brand);
  font-size: 1.22rem;
}

.creator-summary-top > p {
  margin: 0.22rem 0 0;
  color: #5e7488;
  font-size: 0.84rem;
}

.creator-headline-preview {
  margin-top: 0.58rem;
  color: #4d667c;
  font-size: 0.84rem;
  line-height: 1.5;
  min-height: 2.3em;
}

.creator-stats-grid {
  margin-top: 0.84rem;
  border: 1px solid #e4edf5;
  border-radius: 10px;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.creator-stats-grid div {
  background: #fbfdff;
  padding: 0.6rem 0.35rem;
  text-align: center;
  border-right: 1px solid #e4edf5;
}

.creator-stats-grid div:last-child {
  border-right: 0;
}

.creator-stats-grid span {
  display: block;
  color: #687f92;
  font-size: 0.76rem;
}

.creator-stats-grid strong {
  display: block;
  margin-top: 0.16rem;
  color: #1f6f42;
  font-size: 0.92rem;
  font-weight: 800;
}

.creator-completion-card {
  margin-top: 0.78rem;
  border: 1px solid #e4edf5;
  border-radius: 10px;
  padding: 0.58rem 0.62rem 0.64rem;
  background: #fcfffd;
}

.creator-completion-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
}

.creator-completion-head span {
  color: #60778c;
  font-size: 0.79rem;
  font-weight: 700;
}

.creator-completion-head strong {
  color: #1f6f42;
  font-size: 0.88rem;
  font-weight: 800;
}

.creator-completion-bar {
  margin-top: 0.42rem;
  width: 100%;
  height: 8px;
  background: #e6eff7;
  border-radius: 999px;
  overflow: hidden;
}

.creator-completion-bar span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(120deg, #39a95f, #2f9053);
  transition: width 0.2s ease;
}

.creator-preview-links {
  list-style: none;
  margin: 0.85rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.48rem;
}

.creator-preview-links li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  gap: 0.42rem;
}

.creator-preview-links i {
  color: #5f7e92;
  text-align: center;
  font-size: 0.8rem;
}

.creator-preview-links a {
  color: #2d5f87;
  text-decoration: none;
  font-size: 0.79rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.creator-preview-links a:hover {
  color: #1f6f42;
  text-decoration: underline;
}

.creator-preview-links a.is-empty {
  color: #8298ab;
  pointer-events: none;
  text-decoration: none;
}

.creator-editor-card {
  padding: 1rem 1rem 1.08rem;
}

.creator-editor-card h2 {
  margin: 0;
  color: #1f4f32;
  font-family: var(--font-brand);
  font-size: 1.2rem;
}

.creator-editor-subtitle {
  margin: 0.4rem 0 0;
  color: #61798d;
  font-size: 0.84rem;
}

.creator-profile-form {
  margin-top: 0.9rem;
  display: grid;
  gap: 0.82rem;
}

.creator-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.62rem 0.72rem;
}

.creator-field {
  display: grid;
  gap: 0.34rem;
}

.creator-field label {
  margin: 0;
  color: #3f566d;
  font-size: 0.79rem;
  font-weight: 700;
}

.creator-field input,
.creator-field textarea {
  width: 100%;
  border: 1px solid #d4e0eb;
  border-radius: 10px;
  background: #fcfeff;
  color: #294158;
  font-family: var(--font-ui);
  font-size: 0.87rem;
  padding: 0.63rem 0.7rem;
}

.creator-field textarea {
  resize: vertical;
  min-height: 120px;
}

.creator-field input:focus,
.creator-field textarea:focus {
  outline: none;
  border-color: #8bc79f;
  box-shadow: 0 0 0 3px rgba(73, 178, 110, 0.16);
}

.creator-field-wide {
  grid-column: 1 / -1;
}

.creator-specialties-fieldset {
  margin: 0;
  border: 1px solid #dce7f1;
  border-radius: 10px;
  padding: 0.66rem 0.74rem 0.72rem;
  background: #fbfdff;
}

.creator-specialties-fieldset legend {
  color: #4b6177;
  font-size: 0.79rem;
  font-weight: 800;
  padding: 0 0.2rem;
}

.creator-specialties-grid {
  margin-top: 0.34rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.38rem;
}

.creator-specialties-grid label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.creator-specialties-grid input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.creator-specialties-grid span {
  display: inline-flex;
  align-items: center;
  gap: 0.36rem;
  padding: 0.38rem 0.55rem;
  border-radius: 999px;
  border: 1px solid #cfdceb;
  background: #ffffff;
  color: #476078;
  font-size: 0.78rem;
  font-weight: 700;
}

.creator-specialties-grid input:checked + span {
  border-color: #8ecaa2;
  background: #eaf7ef;
  color: #1f6a40;
}

.creator-profile-form .auth-feedback {
  margin-top: -0.16rem;
}

@media (max-width: 1024px) {
  .creator-page-layout {
    grid-template-columns: 1fr;
  }

  .creator-summary-card {
    position: static;
    top: auto;
  }
}

@media (max-width: 680px) {
  .creator-page-main {
    padding: 1rem 0.8rem 1.6rem;
  }

  .creator-page-hero {
    border-radius: 12px;
    padding: 1rem 0.85rem;
  }

  .creator-editor-card {
    padding: 0.88rem 0.82rem 0.9rem;
  }

  .creator-form-grid {
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }
}

.security-page-main {
  min-height: calc(100vh - 110px);
  padding: 1.2rem 1rem 2rem;
}

.security-hero {
  border: 1px solid #d9e6df;
  border-radius: 16px;
  padding: 1.1rem 1.05rem;
  background:
    radial-gradient(circle at 10% 20%, rgba(123, 201, 146, 0.16), transparent 34%),
    radial-gradient(circle at 90% 84%, rgba(94, 171, 122, 0.09), transparent 32%),
    #ffffff;
}

.security-kicker {
  margin: 0;
  color: #2e8f53;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.security-hero h1 {
  margin: 0.52rem 0 0;
  color: #1f5033;
  font-family: var(--font-brand);
  font-size: clamp(1.46rem, 2.5vw, 2.04rem);
}

.security-hero p {
  margin: 0.55rem 0 0;
  color: #5d7286;
  font-size: 0.88rem;
  line-height: 1.54;
  max-width: 720px;
}

.security-layout {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: minmax(245px, 310px) minmax(0, 1fr);
  gap: 0.95rem;
  align-items: start;
}

.security-summary-card,
.security-panel {
  border: 1px solid #d7e4ef;
  border-radius: 14px;
  background: #ffffff;
}

.security-summary-card {
  padding: 1rem 0.9rem 0.92rem;
  position: sticky;
  top: 116px;
}

.security-summary-card h2 {
  margin: 0;
  color: #1f4f32;
  font-family: var(--font-brand);
  font-size: 1.14rem;
}

.security-summary-card > p {
  margin: 0.2rem 0 0;
  color: #5b7489;
  font-size: 0.82rem;
}

.security-badge-row {
  margin-top: 0.66rem;
}

.security-level-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0.3rem 0.58rem;
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.security-level-badge.is-basic {
  color: #7d5e22;
  background: #fff5dc;
  border: 1px solid #f2dca8;
}

.security-level-badge.is-strong {
  color: #1f6a40;
  background: #eaf7ef;
  border: 1px solid #bfe2cc;
}

.security-level-badge.is-max {
  color: #1f536d;
  background: #e9f4ff;
  border: 1px solid #c2dff8;
}

.security-meta-list {
  list-style: none;
  margin: 0.8rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.security-meta-list li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  gap: 0.45rem;
}

.security-meta-list i {
  color: #608198;
  text-align: center;
  font-size: 0.79rem;
}

.security-meta-list span {
  color: #3f5a71;
  font-size: 0.8rem;
  word-break: break-word;
}

.security-logout-button {
  margin-top: 0.82rem;
  width: 100%;
  border: 1px solid #e7c6cc;
  border-radius: 9px;
  background: #fff8f9;
  color: #a43f4a;
  font-family: var(--font-ui);
  font-size: 0.83rem;
  font-weight: 700;
  padding: 0.58rem 0.64rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  cursor: pointer;
}

.security-logout-button:hover {
  background: #fff1f3;
}

.security-content-stack {
  display: grid;
  gap: 0.9rem;
}

.security-panel {
  padding: 0.96rem 0.94rem 1rem;
}

.security-panel-head h2 {
  margin: 0;
  color: #1f4f32;
  font-family: var(--font-brand);
  font-size: 1.12rem;
}

.security-panel-head p {
  margin: 0.38rem 0 0;
  color: #5f7689;
  font-size: 0.83rem;
}

.security-form {
  margin-top: 0.8rem;
  display: grid;
  gap: 0.5rem;
}

.security-form label {
  margin-top: 0.1rem;
  color: #3f576d;
  font-size: 0.79rem;
  font-weight: 700;
}

.security-form input[type="password"] {
  width: 100%;
  border: 1px solid #d4e0eb;
  border-radius: 10px;
  background: #fcfeff;
  color: #294158;
  font-family: var(--font-ui);
  font-size: 0.87rem;
  padding: 0.63rem 0.7rem;
}

.security-form input[type="password"]:focus {
  outline: none;
  border-color: #8bc79f;
  box-shadow: 0 0 0 3px rgba(73, 178, 110, 0.16);
}

.security-check {
  margin-top: 0.15rem;
  display: inline-grid;
  grid-template-columns: 17px minmax(0, 1fr);
  align-items: start;
  gap: 0.55rem;
}

.security-check input {
  margin-top: 2px;
  accent-color: #2f9d5d;
}

.security-check span {
  display: grid;
  gap: 0.2rem;
}

.security-check strong {
  color: #2f4961;
  font-size: 0.82rem;
}

.security-check small {
  color: #63798d;
  font-size: 0.77rem;
  line-height: 1.45;
}

.security-form .auth-feedback {
  margin-top: 0.18rem;
}

@media (max-width: 1024px) {
  .security-layout {
    grid-template-columns: 1fr;
  }

  .security-summary-card {
    position: static;
    top: auto;
  }
}

@media (max-width: 680px) {
  .security-page-main {
    padding: 1rem 0.8rem 1.6rem;
  }

  .security-hero {
    border-radius: 12px;
    padding: 1rem 0.85rem;
  }

  .security-panel {
    padding: 0.88rem 0.82rem 0.9rem;
  }
}

.privacy-page-main {
  min-height: calc(100vh - 110px);
  padding: 1.2rem 1rem 2rem;
}

.privacy-hero {
  border: 1px solid #d9e6df;
  border-radius: 16px;
  padding: 1.1rem 1.05rem;
  background:
    radial-gradient(circle at 10% 20%, rgba(123, 201, 146, 0.16), transparent 34%),
    radial-gradient(circle at 90% 84%, rgba(94, 171, 122, 0.09), transparent 32%),
    #ffffff;
}

.privacy-kicker {
  margin: 0;
  color: #2e8f53;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.privacy-hero h1 {
  margin: 0.52rem 0 0;
  color: #1f5033;
  font-family: var(--font-brand);
  font-size: clamp(1.46rem, 2.5vw, 2.04rem);
}

.privacy-hero p {
  margin: 0.55rem 0 0;
  color: #5d7286;
  font-size: 0.88rem;
  line-height: 1.54;
  max-width: 720px;
}

.privacy-layout {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: minmax(245px, 310px) minmax(0, 1fr);
  gap: 0.95rem;
  align-items: start;
}

.privacy-summary-card,
.privacy-editor-card {
  border: 1px solid #d7e4ef;
  border-radius: 14px;
  background: #ffffff;
}

.privacy-summary-card {
  padding: 1rem 0.9rem 0.92rem;
  position: sticky;
  top: 116px;
}

.privacy-summary-card h2 {
  margin: 0;
  color: #1f4f32;
  font-family: var(--font-brand);
  font-size: 1.14rem;
}

.privacy-summary-card > p {
  margin: 0.2rem 0 0;
  color: #5b7489;
  font-size: 0.82rem;
}

.privacy-badge-row {
  margin-top: 0.66rem;
}

.privacy-visibility-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0.3rem 0.58rem;
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #1f6a40;
  background: #eaf7ef;
  border: 1px solid #bfe2cc;
}

.privacy-score-card {
  margin-top: 0.72rem;
  border: 1px solid #e4edf5;
  border-radius: 10px;
  padding: 0.58rem 0.62rem 0.64rem;
  background: #fcfffd;
}

.privacy-score-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
}

.privacy-score-head span {
  color: #60778c;
  font-size: 0.79rem;
  font-weight: 700;
}

.privacy-score-head strong {
  color: #1f6f42;
  font-size: 0.88rem;
  font-weight: 800;
}

.privacy-score-bar {
  margin-top: 0.42rem;
  width: 100%;
  height: 8px;
  background: #e6eff7;
  border-radius: 999px;
  overflow: hidden;
}

.privacy-score-bar span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(120deg, #39a95f, #2f9053);
  transition: width 0.2s ease;
}

.privacy-shared-list {
  list-style: none;
  margin: 0.78rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.42rem;
}

.privacy-shared-list li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  gap: 0.45rem;
  color: #405a72;
  font-size: 0.79rem;
}

.privacy-shared-list li.is-enabled i {
  color: #2f9959;
}

.privacy-shared-list li.is-disabled i {
  color: #8ea3b6;
}

.privacy-export-button {
  margin-top: 0.82rem;
  width: 100%;
  border: 1px solid #cfe0ef;
  border-radius: 9px;
  background: #f7fbff;
  color: #355977;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.58rem 0.64rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  cursor: pointer;
}

.privacy-export-button:hover {
  background: #edf6ff;
}

.privacy-editor-card {
  padding: 1rem 1rem 1.08rem;
}

.privacy-editor-card h2 {
  margin: 0;
  color: #1f4f32;
  font-family: var(--font-brand);
  font-size: 1.2rem;
}

.privacy-editor-subtitle {
  margin: 0.4rem 0 0;
  color: #61798d;
  font-size: 0.84rem;
}

.privacy-settings-form {
  margin-top: 0.9rem;
  display: grid;
  gap: 0.82rem;
}

.privacy-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.62rem 0.72rem;
}

.privacy-field {
  display: grid;
  gap: 0.34rem;
}

.privacy-field label {
  margin: 0;
  color: #3f566d;
  font-size: 0.79rem;
  font-weight: 700;
}

.privacy-field select,
.privacy-field input,
.privacy-field textarea {
  width: 100%;
  border: 1px solid #d4e0eb;
  border-radius: 10px;
  background: #fcfeff;
  color: #294158;
  font-family: var(--font-ui);
  font-size: 0.87rem;
  padding: 0.63rem 0.7rem;
}

.privacy-field textarea {
  resize: vertical;
  min-height: 84px;
}

.privacy-field select:focus,
.privacy-field input:focus,
.privacy-field textarea:focus {
  outline: none;
  border-color: #8bc79f;
  box-shadow: 0 0 0 3px rgba(73, 178, 110, 0.16);
}

.privacy-fieldset {
  margin: 0;
  border: 1px solid #dce7f1;
  border-radius: 10px;
  padding: 0.66rem 0.74rem 0.72rem;
  background: #fbfdff;
  display: grid;
  gap: 0.44rem;
}

.privacy-fieldset legend {
  color: #4b6177;
  font-size: 0.79rem;
  font-weight: 800;
  padding: 0 0.2rem;
}

.privacy-check {
  display: inline-grid;
  grid-template-columns: 17px minmax(0, 1fr);
  align-items: start;
  gap: 0.55rem;
}

.privacy-check input {
  margin-top: 2px;
  accent-color: #2f9d5d;
}

.privacy-check span {
  display: grid;
  gap: 0.2rem;
}

.privacy-check strong {
  color: #2f4961;
  font-size: 0.82rem;
}

.privacy-check small {
  color: #63798d;
  font-size: 0.77rem;
  line-height: 1.45;
}

.privacy-actions-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.privacy-secondary-button {
  border: 1px solid #cfddeb;
  border-radius: 10px;
  background: #f9fbff;
  color: #405b73;
  font-family: var(--font-ui);
  font-size: 0.81rem;
  font-weight: 700;
  padding: 0.64rem 0.72rem;
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  cursor: pointer;
}

.privacy-secondary-button:hover {
  background: #edf4fb;
}

@media (max-width: 1024px) {
  .privacy-layout {
    grid-template-columns: 1fr;
  }

  .privacy-summary-card {
    position: static;
    top: auto;
  }
}

@media (max-width: 680px) {
  .privacy-page-main {
    padding: 1rem 0.8rem 1.6rem;
  }

  .privacy-hero {
    border-radius: 12px;
    padding: 1rem 0.85rem;
  }

  .privacy-editor-card {
    padding: 0.88rem 0.82rem 0.9rem;
  }

  .privacy-form-grid {
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }

  .privacy-actions-row {
    align-items: stretch;
  }

  .privacy-actions-row .auth-submit,
  .privacy-secondary-button {
    width: 100%;
    justify-content: center;
  }
}

.team-workspace-page-main {
  min-height: calc(100vh - 110px);
  padding: 1.2rem 1rem 2rem;
}

.team-workspace-hero {
  border: 1px solid #d9e6df;
  border-radius: 16px;
  padding: 1.1rem 1.05rem;
  background:
    radial-gradient(circle at 10% 20%, rgba(123, 201, 146, 0.16), transparent 34%),
    radial-gradient(circle at 90% 84%, rgba(94, 171, 122, 0.09), transparent 32%),
    #ffffff;
}

.team-workspace-kicker {
  margin: 0;
  color: #2e8f53;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.team-workspace-hero h1 {
  margin: 0.52rem 0 0;
  color: #1f5033;
  font-family: var(--font-brand);
  font-size: clamp(1.46rem, 2.5vw, 2.04rem);
}

.team-workspace-hero p {
  margin: 0.55rem 0 0;
  color: #5d7286;
  font-size: 0.88rem;
  line-height: 1.54;
  max-width: 760px;
}

.team-workspace-layout {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: minmax(245px, 310px) minmax(0, 1fr);
  gap: 0.95rem;
  align-items: start;
}

.team-workspace-summary-card,
.team-panel {
  border: 1px solid #d7e4ef;
  border-radius: 14px;
  background: #ffffff;
}

.team-workspace-summary-card {
  padding: 1rem 0.9rem 0.92rem;
  position: sticky;
  top: 116px;
}

.team-workspace-summary-card h2 {
  margin: 0;
  color: #1f4f32;
  font-family: var(--font-brand);
  font-size: 1.14rem;
}

.team-workspace-summary-card > p {
  margin: 0.2rem 0 0;
  color: #5b7489;
  font-size: 0.82rem;
}

.team-workspace-stats {
  margin-top: 0.72rem;
  border: 1px solid #e4edf5;
  border-radius: 10px;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.team-workspace-stats div {
  background: #fbfdff;
  padding: 0.56rem 0.35rem;
  text-align: center;
  border-right: 1px solid #e4edf5;
}

.team-workspace-stats div:last-child {
  border-right: 0;
}

.team-workspace-stats span {
  display: block;
  color: #687f92;
  font-size: 0.75rem;
}

.team-workspace-stats strong {
  display: block;
  margin-top: 0.14rem;
  color: #1f6f42;
  font-size: 0.9rem;
  font-weight: 800;
}

.team-workspace-checklist {
  list-style: none;
  margin: 0.78rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.44rem;
}

.team-workspace-checklist li {
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr);
  gap: 0.42rem;
  align-items: center;
  color: #3f5a71;
  font-size: 0.79rem;
}

.team-workspace-checklist i {
  color: #2f9959;
  text-align: center;
  font-size: 0.74rem;
}

.team-workspace-content {
  display: grid;
  gap: 0.9rem;
}

.team-panel {
  padding: 0.98rem 0.95rem 1rem;
}

.team-panel-head h2 {
  margin: 0;
  color: #1f4f32;
  font-family: var(--font-brand);
  font-size: 1.12rem;
}

.team-panel-head p {
  margin: 0.38rem 0 0;
  color: #5f7689;
  font-size: 0.83rem;
}

.team-form {
  margin-top: 0.8rem;
  display: grid;
  gap: 0.56rem;
}

.team-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.62rem 0.72rem;
}

.team-field {
  display: grid;
  gap: 0.34rem;
}

.team-field-wide {
  grid-column: 1 / -1;
}

.team-field label {
  margin: 0;
  color: #3f566d;
  font-size: 0.79rem;
  font-weight: 700;
}

.team-field input,
.team-field textarea,
.team-field select {
  width: 100%;
  border: 1px solid #d4e0eb;
  border-radius: 10px;
  background: #fcfeff;
  color: #294158;
  font-family: var(--font-ui);
  font-size: 0.87rem;
  padding: 0.63rem 0.7rem;
}

.team-field textarea {
  resize: vertical;
  min-height: 90px;
}

.team-field input:focus,
.team-field textarea:focus,
.team-field select:focus {
  outline: none;
  border-color: #8bc79f;
  box-shadow: 0 0 0 3px rgba(73, 178, 110, 0.16);
}

.team-list-grid {
  margin-top: 0.72rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.55rem;
}

.team-list-card {
  border: 1px solid #d5e3ef;
  border-radius: 10px;
  background: #fbfdff;
  color: #456078;
  text-align: left;
  padding: 0.62rem 0.66rem;
  display: grid;
  gap: 0.18rem;
  cursor: pointer;
}

.team-list-card strong {
  color: #214f33;
  font-size: 0.84rem;
}

.team-list-card span {
  color: #60778c;
  font-size: 0.75rem;
}

.team-list-card:hover {
  background: #f2faf5;
  border-color: #c3dacd;
}

.team-list-card.is-active {
  background: #eaf7ef;
  border-color: #9dcbb0;
}

.team-list-empty {
  margin: 0.72rem 0 0;
  border: 1px dashed #cddceb;
  border-radius: 10px;
  padding: 0.72rem 0.76rem;
  color: #688094;
  font-size: 0.82rem;
}

.team-details-form {
  margin-top: 0.8rem;
}

.team-actions-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.team-danger-button {
  border: 1px solid #e7c6cc;
  border-radius: 10px;
  background: #fff8f9;
  color: #a43f4a;
  font-family: var(--font-ui);
  font-size: 0.81rem;
  font-weight: 700;
  padding: 0.64rem 0.72rem;
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  cursor: pointer;
}

.team-danger-button:hover {
  background: #fff1f3;
}

.team-members-shell {
  margin-top: 0.74rem;
}

.team-members-table {
  width: 100%;
  border-collapse: collapse;
}

.team-members-table th,
.team-members-table td {
  border-top: 1px solid #e4edf5;
  padding: 0.52rem 0.44rem;
  text-align: left;
  font-size: 0.8rem;
  color: #466179;
  vertical-align: middle;
}

.team-members-table th {
  color: #607a90;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 800;
  border-top: 0;
}

.team-member-main {
  display: grid;
  gap: 0.05rem;
}

.team-member-main strong {
  color: #204f33;
  font-size: 0.82rem;
}

.team-member-main span {
  color: #6a8095;
  font-size: 0.74rem;
}

.team-member-select {
  min-width: 120px;
  border: 1px solid #d4e0eb;
  border-radius: 8px;
  background: #fcfeff;
  color: #2f4961;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  padding: 0.4rem 0.44rem;
}

.team-member-remove {
  border: 1px solid #d9e3ee;
  border-radius: 8px;
  background: #f9fbff;
  color: #45637d;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.38rem 0.5rem;
  cursor: pointer;
}

.team-member-remove:hover {
  background: #edf4fb;
}

.team-member-remove:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.team-members-empty {
  display: none;
  margin: 0.6rem 0 0;
  color: #6c8397;
  font-size: 0.81rem;
}

@media (max-width: 1024px) {
  .team-workspace-layout {
    grid-template-columns: 1fr;
  }

  .team-workspace-summary-card {
    position: static;
    top: auto;
  }
}

@media (max-width: 760px) {
  .team-workspace-page-main {
    padding: 1rem 0.8rem 1.6rem;
  }

  .team-workspace-hero {
    border-radius: 12px;
    padding: 1rem 0.85rem;
  }

  .team-panel {
    padding: 0.88rem 0.82rem 0.9rem;
  }

  .team-form-grid {
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }

  .team-field-wide {
    grid-column: auto;
  }

  .team-members-table th:nth-child(3),
  .team-members-table td:nth-child(3) {
    display: none;
  }

  .team-actions-row {
    align-items: stretch;
  }

  .team-actions-row .auth-submit,
  .team-danger-button {
    width: 100%;
    justify-content: center;
  }
}

.invoices-page-main {
  min-height: calc(100vh - 110px);
  padding: 1.2rem 1rem 2rem;
}

.invoices-hero {
  border: 1px solid #d9e6df;
  border-radius: 16px;
  padding: 1.1rem 1.05rem;
  background:
    radial-gradient(circle at 10% 20%, rgba(123, 201, 146, 0.16), transparent 34%),
    radial-gradient(circle at 90% 84%, rgba(94, 171, 122, 0.09), transparent 32%),
    #ffffff;
}

.invoices-kicker {
  margin: 0;
  color: #2e8f53;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.invoices-hero h1 {
  margin: 0.52rem 0 0;
  color: #1f5033;
  font-family: var(--font-brand);
  font-size: clamp(1.46rem, 2.5vw, 2.04rem);
}

.invoices-hero p {
  margin: 0.55rem 0 0;
  color: #5d7286;
  font-size: 0.88rem;
  line-height: 1.54;
  max-width: 760px;
}

.invoices-layout {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: minmax(245px, 310px) minmax(0, 1fr);
  gap: 0.95rem;
  align-items: start;
}

.invoices-summary-card,
.invoices-panel {
  border: 1px solid #d7e4ef;
  border-radius: 14px;
  background: #ffffff;
}

.invoices-summary-card {
  padding: 1rem 0.9rem 0.92rem;
  position: sticky;
  top: 116px;
}

.invoices-summary-card h2 {
  margin: 0;
  color: #1f4f32;
  font-family: var(--font-brand);
  font-size: 1.14rem;
}

.invoices-summary-card > p {
  margin: 0.2rem 0 0;
  color: #5b7489;
  font-size: 0.82rem;
}

.invoices-summary-grid {
  margin-top: 0.72rem;
  border: 1px solid #e4edf5;
  border-radius: 10px;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.invoices-summary-grid div {
  background: #fbfdff;
  padding: 0.56rem 0.35rem;
  text-align: center;
  border-right: 1px solid #e4edf5;
}

.invoices-summary-grid div:last-child {
  border-right: 0;
}

.invoices-summary-grid span {
  display: block;
  color: #687f92;
  font-size: 0.75rem;
}

.invoices-summary-grid strong {
  display: block;
  margin-top: 0.14rem;
  color: #1f6f42;
  font-size: 0.9rem;
  font-weight: 800;
}

.invoices-meta-list {
  list-style: none;
  margin: 0.78rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.44rem;
}

.invoices-meta-list li {
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr);
  gap: 0.42rem;
  align-items: center;
  color: #3f5a71;
  font-size: 0.79rem;
}

.invoices-meta-list i {
  color: #608198;
  text-align: center;
  font-size: 0.76rem;
}

.invoices-market-link {
  margin-top: 0.82rem;
  width: 100%;
  text-decoration: none;
  border: 1px solid #d1dceb;
  border-radius: 10px;
  background: #f9fbff;
  color: #39586f;
  font-size: 0.81rem;
  font-weight: 700;
  padding: 0.62rem 0.72rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.38rem;
}

.invoices-market-link:hover {
  background: #eef5fb;
}

.invoices-content-stack {
  display: grid;
  gap: 0.9rem;
}

.invoices-panel {
  padding: 0.98rem 0.95rem 1rem;
}

.invoices-panel-head h2 {
  margin: 0;
  color: #1f4f32;
  font-family: var(--font-brand);
  font-size: 1.12rem;
}

.invoices-panel-head p {
  margin: 0.38rem 0 0;
  color: #5f7689;
  font-size: 0.83rem;
}

.purchases-products-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.purchases-products-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  border: 1px solid #d1e1d7;
  border-radius: 999px;
  background: #f3faf5;
  color: #2d6e48;
  font-size: 0.76rem;
  font-weight: 800;
  padding: 0.35rem 0.62rem;
  white-space: nowrap;
}

.purchases-products-grid {
  margin-top: 0.82rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
}

.purchase-resource-row {
  display: grid;
  grid-template-columns: minmax(320px, 440px) minmax(0, 1fr);
  gap: 0.9rem;
  align-items: stretch;
  padding: 0.2rem 0;
}

.purchase-resource-row + .purchase-resource-row {
  padding-top: 1rem;
  border-top: 1px solid #dbe5ee;
}

.purchase-resource-card {
  border: 1px solid #d6deea;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 10px 20px rgba(20, 42, 66, 0.08);
  overflow: hidden;
  position: relative;
  min-width: 0;
}

.purchase-resource-card .product-cover {
  height: 156px;
  border-bottom: 0;
  border-radius: 0;
  overflow: hidden;
  isolation: isolate;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.purchase-resource-card .product-cover::before {
  inset: 0;
}

.purchase-resource-details {
  border: 1px solid #d7e4ef;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbf9 100%);
  padding: 0.82rem 0.85rem;
  display: grid;
  gap: 0.72rem;
}

.purchase-resource-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem 0.65rem;
}

.purchase-resource-detail-grid div {
  border: 1px solid #dce7f2;
  border-radius: 10px;
  background: #ffffff;
  padding: 0.5rem 0.55rem;
}

.purchase-resource-detail-grid span {
  display: block;
  color: #6b8295;
  font-size: 0.74rem;
}

.purchase-resource-detail-grid strong {
  display: block;
  margin-top: 0.2rem;
  color: #294e68;
  font-size: 0.82rem;
  line-height: 1.35;
  word-break: break-word;
}

.purchase-resource-status-row {
  display: flex;
  justify-content: flex-start;
}

.purchase-resource-note {
  margin: 0;
  border: 1px solid #dce7f2;
  border-radius: 10px;
  background: #ffffff;
  padding: 0.52rem 0.56rem;
  color: #4f667d;
  font-size: 0.8rem;
  line-height: 1.46;
}

.purchase-resource-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.58rem;
}

.purchase-resource-open {
  text-decoration: none;
}

.purchase-resource-download {
  border: 1px solid #d1dce8;
  border-radius: 10px;
  background: #ffffff;
  color: #355167;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.34rem;
  padding: 0.72rem 0.9rem;
  cursor: pointer;
}

.purchase-resource-download:hover {
  background: #f5faf7;
  border-color: #c4d7cb;
  color: #1f5f3f;
}

.purchases-products-panel.variant-two .product-empty {
  margin: 0;
  grid-column: 1 / -1;
}

.invoices-filters {
  margin-top: 0.8rem;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 0.6rem;
  align-items: end;
}

.invoices-field {
  display: grid;
  gap: 0.34rem;
}

.invoices-field-wide {
  grid-column: auto;
}

.invoices-field span {
  color: #3f566d;
  font-size: 0.79rem;
  font-weight: 700;
}

.invoices-field input,
.invoices-field select {
  width: 100%;
  border: 1px solid #d4e0eb;
  border-radius: 10px;
  background: #fcfeff;
  color: #294158;
  font-family: var(--font-ui);
  font-size: 0.87rem;
  padding: 0.63rem 0.7rem;
}

.invoices-field input:focus,
.invoices-field select:focus {
  outline: none;
  border-color: #8bc79f;
  box-shadow: 0 0 0 3px rgba(73, 178, 110, 0.16);
}

#invoicesApplyButton {
  white-space: nowrap;
}

.invoices-table-shell {
  margin-top: 0.74rem;
  border: 1px solid #e4edf5;
  border-radius: 12px;
  overflow: auto;
  background: #ffffff;
}

.invoices-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 840px;
}

.invoices-table th,
.invoices-table td {
  border-top: 1px solid #e4edf5;
  padding: 0.56rem 0.48rem;
  text-align: left;
  font-size: 0.8rem;
  color: #466179;
  vertical-align: middle;
}

.invoices-table th {
  color: #607a90;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 800;
  border-top: 0;
  background: #f8fbff;
}

.invoices-table tr.is-selected td {
  background: #f2faf5;
}

.invoice-main {
  display: grid;
  gap: 0.08rem;
}

.invoice-main strong {
  color: #224f34;
  font-size: 0.82rem;
}

.invoice-main span {
  color: #6b8296;
  font-size: 0.74rem;
}

.invoice-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0.24rem 0.48rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.invoice-status-badge.is-paid {
  color: #1f6a40;
  background: #eaf7ef;
  border: 1px solid #bfe2cc;
}

.invoice-status-badge.is-pending {
  color: #7b611b;
  background: #fff6dd;
  border: 1px solid #f2dfaa;
}

.invoice-status-badge.is-refunded {
  color: #255f86;
  background: #edf7ff;
  border: 1px solid #cce3f7;
}

.invoice-status-badge.is-failed {
  color: #9d3945;
  background: #fff1f3;
  border: 1px solid #f2ccd2;
}

.invoice-status-badge.is-void {
  color: #5f6f80;
  background: #f3f6f9;
  border: 1px solid #dce4ec;
}

.invoice-row-action {
  border: 1px solid #d3dfea;
  border-radius: 8px;
  background: #f9fbff;
  color: #45627b;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.36rem 0.5rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.invoice-row-action:hover {
  background: #edf5fc;
}

.invoice-row-action-ghost {
  margin-left: 0.28rem;
  width: 30px;
  padding: 0.36rem 0;
}

.invoices-empty {
  display: none;
  margin: 0;
  padding: 0.78rem 0.82rem;
  color: #688094;
  font-size: 0.82rem;
  border-top: 1px solid #e4edf5;
}

.invoice-detail-empty {
  margin-top: 0.72rem;
  border: 1px dashed #cddceb;
  border-radius: 10px;
  padding: 0.72rem 0.76rem;
  color: #688094;
  font-size: 0.82rem;
}

.invoice-detail-card {
  margin-top: 0.72rem;
  border: 1px solid #d6e3ee;
  border-radius: 12px;
  background: #fbfdff;
  padding: 0.78rem 0.78rem 0.82rem;
}

.invoice-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.62rem;
  flex-wrap: wrap;
}

.invoice-detail-head h3 {
  margin: 0;
  color: #1f4f32;
  font-family: var(--font-brand);
  font-size: 1rem;
}

.invoice-detail-head p {
  margin: 0.25rem 0 0;
  color: #5f778c;
  font-size: 0.8rem;
}

.invoice-detail-grid {
  margin-top: 0.7rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem 0.65rem;
}

.invoice-detail-grid div {
  border: 1px solid #dce7f2;
  border-radius: 10px;
  background: #ffffff;
  padding: 0.5rem 0.55rem;
}

.invoice-detail-grid span {
  display: block;
  color: #6b8295;
  font-size: 0.74rem;
}

.invoice-detail-grid strong {
  display: block;
  margin-top: 0.2rem;
  color: #294e68;
  font-size: 0.82rem;
  line-height: 1.35;
  word-break: break-word;
}

.invoice-detail-notes {
  margin: 0.6rem 0 0;
  border: 1px solid #dce7f2;
  border-radius: 10px;
  background: #ffffff;
  padding: 0.52rem 0.56rem;
  color: #4f667d;
  font-size: 0.8rem;
  line-height: 1.46;
}

.invoice-detail-actions {
  margin-top: 0.7rem;
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 1024px) {
  .invoices-layout {
    grid-template-columns: 1fr;
  }

  .invoices-summary-card {
    position: static;
    top: auto;
  }

  .purchase-resource-row {
    grid-template-columns: 1fr;
  }

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

  .purchases-products-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .invoices-page-main {
    padding: 1rem 0.8rem 1.6rem;
  }

  .invoices-hero {
    border-radius: 12px;
    padding: 1rem 0.85rem;
  }

  .invoices-panel {
    padding: 0.88rem 0.82rem 0.9rem;
  }

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

  .purchase-resource-actions-row {
    flex-direction: column;
  }

  .purchase-resource-actions-row .auth-submit,
  .purchase-resource-download {
    width: 100%;
  }

  .invoices-filters {
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }

  #invoicesApplyButton {
    width: 100%;
    justify-content: center;
  }

  .invoices-table {
    min-width: 680px;
  }

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

  .invoice-detail-actions {
    justify-content: stretch;
  }

  .invoice-detail-actions .auth-submit {
    width: 100%;
    justify-content: center;
  }
}

.payout-page-main {
  min-height: calc(100vh - 110px);
  padding: 1.2rem 1rem 2rem;
}

.payout-hero {
  border: 1px solid #d9e6df;
  border-radius: 16px;
  padding: 1.1rem 1.05rem;
  background:
    radial-gradient(circle at 10% 20%, rgba(123, 201, 146, 0.16), transparent 34%),
    radial-gradient(circle at 90% 84%, rgba(94, 171, 122, 0.09), transparent 32%),
    #ffffff;
}

.payout-kicker {
  margin: 0;
  color: #2e8f53;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.payout-hero h1 {
  margin: 0.52rem 0 0;
  color: #1f5033;
  font-family: var(--font-brand);
  font-size: clamp(1.46rem, 2.5vw, 2.04rem);
}

.payout-hero p {
  margin: 0.55rem 0 0;
  color: #5d7286;
  font-size: 0.88rem;
  line-height: 1.54;
  max-width: 760px;
}

.payout-layout {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: minmax(245px, 310px) minmax(0, 1fr);
  gap: 0.95rem;
  align-items: start;
}

.payout-summary-card,
.payout-panel {
  border: 1px solid #d7e4ef;
  border-radius: 14px;
  background: #ffffff;
}

.payout-summary-card {
  padding: 1rem 0.9rem 0.92rem;
  position: sticky;
  top: 116px;
}

.payout-summary-card h2 {
  margin: 0;
  color: #1f4f32;
  font-family: var(--font-brand);
  font-size: 1.14rem;
}

.payout-summary-card > p {
  margin: 0.2rem 0 0;
  color: #5b7489;
  font-size: 0.82rem;
}

.payout-badge-row {
  margin-top: 0.66rem;
}

.payout-method-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0.28rem 0.56rem;
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.payout-method-badge.is-paypal {
  color: #1f5a8a;
  background: #edf6ff;
  border: 1px solid #c9ddf4;
}

.payout-method-badge.is-bank {
  color: #1f6a40;
  background: #eaf7ef;
  border: 1px solid #bfe2cc;
}

.payout-summary-grid {
  margin-top: 0.72rem;
  border: 1px solid #e4edf5;
  border-radius: 10px;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.payout-summary-grid div {
  background: #fbfdff;
  padding: 0.56rem 0.35rem;
  text-align: center;
  border-right: 1px solid #e4edf5;
}

.payout-summary-grid div:last-child {
  border-right: 0;
}

.payout-summary-grid span {
  display: block;
  color: #687f92;
  font-size: 0.75rem;
}

.payout-summary-grid strong {
  display: block;
  margin-top: 0.14rem;
  color: #1f6f42;
  font-size: 0.9rem;
  font-weight: 800;
}

.payout-split-strip {
  margin-top: 0.72rem;
  padding: 0.68rem 0.78rem;
  border-radius: 12px;
  border: 1px solid #d7eadc;
  background: linear-gradient(135deg, #f4fcf6 0%, #eef8f1 100%);
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 0.54rem;
  align-items: start;
}

.payout-split-strip i {
  color: #2c9a5d;
  font-size: 0.86rem;
  margin-top: 0.12rem;
}

.payout-split-strip p {
  margin: 0;
  color: #456458;
  font-size: 0.8rem;
  line-height: 1.55;
}

.payout-meta-list {
  list-style: none;
  margin: 0.78rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.44rem;
}

.payout-meta-list li {
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr);
  gap: 0.42rem;
  align-items: center;
  color: #3f5a71;
  font-size: 0.79rem;
}

.payout-meta-list i {
  color: #608198;
  text-align: center;
  font-size: 0.76rem;
}

.payout-content-stack {
  display: grid;
  gap: 0.9rem;
}

.payout-panel {
  padding: 0.98rem 0.95rem 1rem;
}

.payout-panel-head h2 {
  margin: 0;
  color: #1f4f32;
  font-family: var(--font-brand);
  font-size: 1.12rem;
}

.payout-panel-head p {
  margin: 0.38rem 0 0;
  color: #5f7689;
  font-size: 0.83rem;
}

.payout-form {
  margin-top: 0.8rem;
  display: grid;
  gap: 0.56rem;
}

.payout-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.62rem 0.72rem;
}

.payout-field {
  display: grid;
  gap: 0.34rem;
}

.payout-field-wide {
  grid-column: 1 / -1;
}

.payout-field label {
  margin: 0;
  color: #3f566d;
  font-size: 0.79rem;
  font-weight: 700;
}

.payout-field input,
.payout-field select {
  width: 100%;
  border: 1px solid #d4e0eb;
  border-radius: 10px;
  background: #fcfeff;
  color: #294158;
  font-family: var(--font-ui);
  font-size: 0.87rem;
  padding: 0.63rem 0.7rem;
}

.payout-field input:focus,
.payout-field select:focus {
  outline: none;
  border-color: #8bc79f;
  box-shadow: 0 0 0 3px rgba(73, 178, 110, 0.16);
}

.payout-field-hint {
  margin: 0;
  color: #678097;
  font-size: 0.73rem;
  line-height: 1.45;
}

.payout-checklist {
  margin-top: 0.1rem;
  display: grid;
  gap: 0.44rem;
}

.payout-check {
  display: inline-grid;
  grid-template-columns: 17px minmax(0, 1fr);
  align-items: start;
  gap: 0.55rem;
}

.payout-check input {
  margin-top: 2px;
  accent-color: #2f9d5d;
}

.payout-check span {
  display: grid;
  gap: 0.2rem;
}

.payout-check strong {
  color: #2f4961;
  font-size: 0.82rem;
}

.payout-check small {
  color: #63798d;
  font-size: 0.77rem;
  line-height: 1.45;
}

.payout-requests-block {
  margin-top: 0.82rem;
  border-top: 1px solid #e2ecf4;
  padding-top: 0.75rem;
}

.payout-requests-block h3 {
  margin: 0;
  color: #2a4f3a;
  font-family: var(--font-brand);
  font-size: 0.96rem;
}

.payout-request-list {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.48rem;
}

.payout-request-item,
.payout-request-empty {
  border: 1px solid #dce8f2;
  border-radius: 10px;
  background: #fbfdff;
  padding: 0.58rem 0.62rem;
}

.payout-request-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.payout-request-row strong {
  color: #1d4f33;
  font-size: 0.86rem;
}

.payout-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0.14rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}

.payout-status.is-pending {
  color: #7b570f;
  background: #fff8e9;
  border-color: #f1dfb8;
}

.payout-status.is-active {
  color: #205e3a;
  background: #ecf9f0;
  border-color: #c8e7d2;
}

.payout-status.is-rejected {
  color: #8f2f37;
  background: #fff2f3;
  border-color: #f3cfd3;
}

.payout-request-meta {
  margin: 0.3rem 0 0;
  color: #61788d;
  font-size: 0.76rem;
  line-height: 1.45;
}

.payout-request-note {
  margin: 0.32rem 0 0;
  color: #4c6478;
  font-size: 0.77rem;
  line-height: 1.46;
}

.payout-request-empty {
  color: #6a8195;
  font-size: 0.8rem;
}

@media (max-width: 1024px) {
  .payout-layout {
    grid-template-columns: 1fr;
  }

  .payout-summary-card {
    position: static;
    top: auto;
  }
}

@media (max-width: 760px) {
  .payout-page-main {
    padding: 1rem 0.8rem 1.6rem;
  }

  .payout-hero {
    border-radius: 12px;
    padding: 1rem 0.85rem;
  }

  .payout-panel {
    padding: 0.88rem 0.82rem 0.9rem;
  }

  .payout-form-grid {
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }

  .payout-field-wide {
    grid-column: auto;
  }

  .payout-form .auth-submit {
    width: 100%;
    justify-content: center;
  }
}

.creator-dashboard-main {
  min-height: calc(100vh - 110px);
  padding: 1.2rem 1rem 2rem;
}

.creator-dashboard-hero {
  border: 1px solid #d9e6df;
  border-radius: 16px;
  padding: 1.08rem 1.05rem;
  background:
    radial-gradient(circle at 12% 18%, rgba(123, 201, 146, 0.18), transparent 34%),
    radial-gradient(circle at 92% 80%, rgba(94, 171, 122, 0.1), transparent 34%),
    #ffffff;
}

.creator-dashboard-kicker {
  margin: 0;
  color: #2e8f53;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.creator-dashboard-hero h1 {
  margin: 0.5rem 0 0;
  color: #1f5033;
  font-family: var(--font-brand);
  font-size: clamp(1.5rem, 2.8vw, 2.08rem);
}

.creator-dashboard-hero p {
  margin: 0.56rem 0 0;
  color: #5d7286;
  font-size: 0.88rem;
  line-height: 1.52;
  max-width: 760px;
}

.creator-dashboard-layout {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: minmax(250px, 310px) minmax(0, 1fr);
  gap: 0.95rem;
  align-items: start;
}

.creator-dashboard-summary-card,
.creator-dashboard-panel,
.creator-dashboard-kpi-card {
  border: 1px solid #d7e4ef;
  border-radius: 14px;
  background: #ffffff;
}

.creator-dashboard-summary-card {
  padding: 0.96rem 0.88rem 0.92rem;
  position: sticky;
  top: 116px;
}

.creator-dashboard-summary-top {
  text-align: center;
}

.creator-dashboard-avatar {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--avatar-bg, #3fb96c);
  color: #ffffff;
  font-family: var(--font-brand);
  font-size: 1.5rem;
  font-weight: 800;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.creator-dashboard-summary-top h2 {
  margin: 0.5rem 0 0;
  color: #1f4f32;
  font-family: var(--font-brand);
  font-size: 1.12rem;
}

.creator-dashboard-summary-top > p {
  margin: 0.2rem 0 0;
  color: #5b7489;
  font-size: 0.82rem;
}

.creator-dashboard-headline {
  margin: 0.42rem 0 0;
  color: #49647c;
  font-size: 0.78rem;
  line-height: 1.45;
}

.creator-dashboard-badge-row {
  margin-top: 0.64rem;
  text-align: center;
}

.creator-dashboard-level-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #c6dfd0;
  border-radius: 999px;
  padding: 0.28rem 0.58rem;
  background: #edf8f1;
  color: #1f6a40;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.creator-dashboard-stats-grid {
  margin-top: 0.7rem;
  border: 1px solid #e4edf5;
  border-radius: 10px;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.creator-dashboard-stats-grid div {
  background: #fbfdff;
  padding: 0.56rem 0.34rem;
  text-align: center;
  border-right: 1px solid #e4edf5;
}

.creator-dashboard-stats-grid div:last-child {
  border-right: 0;
}

.creator-dashboard-stats-grid span {
  display: block;
  color: #687f92;
  font-size: 0.74rem;
}

.creator-dashboard-stats-grid strong {
  display: block;
  margin-top: 0.15rem;
  color: #1f6f42;
  font-size: 0.9rem;
  font-weight: 800;
}

.creator-dashboard-meta-list {
  list-style: none;
  margin: 0.78rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.46rem;
}

.creator-dashboard-meta-list li {
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr);
  align-items: center;
  gap: 0.4rem;
  color: #3f5a71;
  font-size: 0.79rem;
}

.creator-dashboard-meta-list i {
  color: #638298;
  font-size: 0.77rem;
  text-align: center;
}

.creator-dashboard-meta-list a {
  color: #246b8f;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.creator-dashboard-meta-list a:hover {
  text-decoration: underline;
}

.creator-dashboard-content {
  display: grid;
  gap: 0.9rem;
}

.creator-dashboard-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.7rem;
}

.creator-dashboard-kpi-card {
  padding: 0.78rem 0.8rem;
}

.creator-dashboard-kpi-card p {
  margin: 0;
  color: #60798d;
  font-size: 0.78rem;
  font-weight: 700;
}

.creator-dashboard-kpi-card h3 {
  margin: 0.36rem 0 0;
  color: #1f4f32;
  font-family: var(--font-brand);
  font-size: 1.32rem;
}

.creator-dashboard-kpi-card span {
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  margin-top: 0.3rem;
  color: #607a90;
  font-size: 0.75rem;
}

.creator-dashboard-kpi-card i {
  color: #2f9d5d;
}

.creator-dashboard-panel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.72rem;
}

.creator-dashboard-panel {
  padding: 0.94rem 0.92rem;
}

.creator-dashboard-panel-head h2 {
  margin: 0;
  color: #1f4f32;
  font-family: var(--font-brand);
  font-size: 1.1rem;
}

.creator-dashboard-panel-head p {
  margin: 0.34rem 0 0;
  color: #5f7689;
  font-size: 0.82rem;
  line-height: 1.46;
}

.creator-dashboard-readiness {
  margin-top: 0.74rem;
  display: grid;
  gap: 0.55rem;
}

.creator-dashboard-readiness-row {
  display: grid;
  gap: 0.25rem;
}

.creator-dashboard-readiness-row div:first-child {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.creator-dashboard-readiness-row span {
  color: #536d84;
  font-size: 0.79rem;
}

.creator-dashboard-readiness-row strong {
  color: #1f6f42;
  font-size: 0.79rem;
  font-weight: 800;
}

.creator-dashboard-progress {
  height: 7px;
  border-radius: 999px;
  background: #eaf1f7;
  overflow: hidden;
}

.creator-dashboard-progress span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #58c479 0%, #2f9d5d 100%);
  transition: width 0.2s ease;
}

.creator-dashboard-tools-grid {
  margin-top: 0.72rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.48rem;
}

.creator-dashboard-tools-grid a {
  border: 1px solid #d2e3ef;
  border-radius: 10px;
  background: #f9fcff;
  color: #2f4e65;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.56rem 0.58rem;
}

.creator-dashboard-tools-grid a i {
  color: #2d9055;
}

.creator-dashboard-tools-grid a:hover {
  border-color: #9ec9df;
  background: #f2f9ff;
}

.creator-dashboard-table-wrap {
  margin-top: 0.72rem;
}

.creator-dashboard-table {
  width: 100%;
  border-collapse: collapse;
}

.creator-dashboard-table th,
.creator-dashboard-table td {
  text-align: left;
  padding: 0.54rem 0.36rem;
  border-bottom: 1px solid #e4edf5;
}

.creator-dashboard-table th {
  color: #5e788f;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.creator-dashboard-table td {
  color: #2e485f;
  font-size: 0.8rem;
}

.creator-dash-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0.14rem 0.48rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}

.creator-dash-status.is-pending {
  color: #7b570f;
  background: #fff8e9;
  border-color: #f1dfb8;
}

.creator-dash-status.is-active {
  color: #205e3a;
  background: #ecf9f0;
  border-color: #c8e7d2;
}

.creator-dash-status.is-rejected {
  color: #8f2f37;
  background: #fff2f3;
  border-color: #f3cfd3;
}

.creator-dashboard-empty {
  margin: 0.58rem 0 0;
  color: #6b8194;
  font-size: 0.8rem;
}

.creator-dashboard-updates-list {
  margin-top: 0.72rem;
  display: grid;
  gap: 0.46rem;
}

.creator-dashboard-update {
  border: 1px solid #dce9f3;
  border-radius: 10px;
  background: #fbfdff;
  padding: 0.56rem 0.62rem;
}

.creator-dashboard-update.is-unread {
  border-color: #a8d4ba;
  background: #f3fbf6;
}

.creator-dashboard-update h3 {
  margin: 0;
  color: #244a32;
  font-size: 0.83rem;
  font-weight: 800;
}

.creator-dashboard-update p {
  margin: 0.26rem 0 0;
  color: #4d667d;
  font-size: 0.79rem;
  line-height: 1.45;
}

.creator-dashboard-update time {
  display: inline-block;
  margin-top: 0.24rem;
  color: #738a9d;
  font-size: 0.72rem;
}

@media (max-width: 1180px) {
  .creator-dashboard-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .creator-dashboard-layout {
    grid-template-columns: 1fr;
  }

  .creator-dashboard-summary-card {
    position: static;
    top: auto;
  }

  .creator-dashboard-panel-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .creator-dashboard-main {
    padding: 1rem 0.8rem 1.6rem;
  }

  .creator-dashboard-hero {
    border-radius: 12px;
    padding: 1rem 0.85rem;
  }

  .creator-dashboard-kpi-grid {
    grid-template-columns: 1fr;
    gap: 0.56rem;
  }

  .creator-dashboard-panel {
    padding: 0.86rem 0.8rem;
  }

  .creator-dashboard-tools-grid {
    grid-template-columns: 1fr;
  }

  .creator-dashboard-table th:nth-child(3),
  .creator-dashboard-table td:nth-child(3) {
    display: none;
  }
}

.creator-hub-main {
  min-height: calc(100vh - 110px);
  padding: 1rem;
  background: #e6ebf1;
}

.creator-hub-shell {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 1rem;
}

.creator-hub-shell-sidebar-only {
  grid-template-columns: 270px;
  max-width: 300px;
  margin-left: 0;
  margin-right: auto;
}

.creator-hub-sidebar {
  border: 1px solid #d3dee8;
  border-radius: 12px;
  background: #f3f6fa;
  padding: 0.92rem 0.88rem;
}

.creator-hub-breadcrumb {
  margin: 0;
  color: #628199;
  font-size: 0.76rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
}

.creator-hub-user {
  margin-top: 0.72rem;
  display: flex;
  align-items: center;
  gap: 0.56rem;
}

.creator-hub-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.94rem;
  font-weight: 800;
  color: #ffffff;
  background: var(--avatar-bg, #3fb96c);
}

.creator-hub-user strong {
  display: block;
  color: #1f455d;
  font-size: 0.84rem;
}

.creator-hub-user p {
  margin: 0.08rem 0 0;
  color: #5e788f;
  font-size: 0.76rem;
}

.creator-hub-nav {
  margin-top: 0.08rem;
  display: grid;
  gap: 0.34rem;
  padding-bottom: 0.35rem;
}

.creator-hub-nav h3 {
  margin: 0.9rem 0 0.26rem;
  color: #2a7a4a;
  font-size: 1.03rem;
  font-weight: 900;
  letter-spacing: 0.01em;
}

.creator-hub-nav button,
.creator-hub-nav a {
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: #3e576e;
  font-family: var(--font-ui);
  font-size: 0.96rem;
  font-weight: 700;
  text-align: left;
  padding: 0.58rem 0.62rem;
  cursor: pointer;
  text-decoration: none;
  display: block;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}

.creator-hub-nav button:hover,
.creator-hub-nav a:hover {
  background: #edf4fb;
  color: #2e4e64;
}

.creator-hub-nav button.is-active,
.creator-hub-nav a.is-active {
  border-color: #b6d9c3;
  background:
    linear-gradient(90deg, rgba(64, 168, 101, 0.08), rgba(255, 255, 255, 0));
  color: #2c7048;
  box-shadow: inset 3px 0 0 #3fb96c;
}

.creator-hub-nav button.is-activating,
.creator-hub-nav a.is-activating {
  animation: creatorHubNavActivate 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes creatorHubNavActivate {
  0% {
    box-shadow:
      inset 0 0 0 rgba(63, 185, 108, 0),
      0 0 0 rgba(63, 185, 108, 0);
    background: rgba(63, 185, 108, 0.04);
  }
  60% {
    box-shadow:
      inset 3px 0 0 rgba(63, 185, 108, 0.95),
      0 10px 18px rgba(38, 109, 66, 0.12);
    background: linear-gradient(90deg, rgba(64, 168, 101, 0.12), rgba(255, 255, 255, 0));
  }
  100% {
    box-shadow: inset 3px 0 0 #3fb96c;
    background: linear-gradient(90deg, rgba(64, 168, 101, 0.08), rgba(255, 255, 255, 0));
  }
}

.creator-hub-content {
  border: 1px solid #d4e0ea;
  border-radius: 12px;
  background: #ffffff;
  padding: 0.95rem;
}

.creator-hub-content-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.7rem;
}

.creator-hub-content-head p {
  margin: 0;
}

.creator-hub-overview-title {
  margin: 0;
  color: #1f6f47;
  font-family: var(--font-brand);
  font-size: 1.76rem;
}

#creatorHubSectionKicker {
  color: #3b7aa5;
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

#creatorHubSectionTitle {
  margin: 0.32rem 0 0;
  color: #1f435c;
  font-family: var(--font-brand);
  font-size: 1.76rem;
}

#creatorHubSectionText {
  margin-top: 0.36rem;
  color: #5d768b;
  font-size: 0.86rem;
  line-height: 1.5;
  max-width: 760px;
}

.creator-hub-kb {
  border: 1px solid #2f9254;
  border-radius: 8px;
  background: linear-gradient(140deg, #46bf72, #2f9d5d);
  color: #ffffff;
  text-decoration: none;
  font-size: 0.79rem;
  font-weight: 800;
  padding: 0.52rem 0.68rem;
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  box-shadow: 0 8px 16px rgba(25, 87, 48, 0.18);
}

.creator-hub-kb:hover {
  background: linear-gradient(140deg, #39ad66, #27864c);
}

.creator-overview-intro {
  margin: 0.7rem 0 0;
  color: #5a7487;
  font-size: 0.85rem;
  line-height: 1.5;
  max-width: 760px;
}

.creator-overview-stats {
  margin-top: 0.84rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.58rem;
}

.creator-overview-stat-card {
  border: 1px solid #d8e6dc;
  border-radius: 10px;
  background: #fbfefc;
  padding: 0.6rem 0.66rem;
}

.creator-overview-stat-card p {
  margin: 0;
  color: #5d7a68;
  font-size: 0.75rem;
  font-weight: 700;
}

.creator-overview-stat-card strong {
  display: block;
  margin-top: 0.22rem;
  color: #1e6a43;
  font-size: 1.02rem;
  font-weight: 800;
}

.creator-overview-stat-card .metric-delta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.3rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 0.12rem 0.42rem;
}

.creator-overview-panel {
  margin-top: 0.84rem;
  border: 1px solid #d7e6dc;
  border-radius: 11px;
  background: #ffffff;
  padding: 0.74rem;
}

.creator-overview-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.72rem;
}

.creator-overview-panel-head h2 {
  margin: 0;
  color: #1f6f47;
  font-size: 1.03rem;
}

.creator-overview-panel-head p {
  margin: 0.26rem 0 0;
  color: #5f7a8f;
  font-size: 0.8rem;
}

.creator-overview-select {
  display: grid;
  gap: 0.2rem;
}

.creator-overview-select span {
  color: #5f7b66;
  font-size: 0.73rem;
  font-weight: 700;
}

.creator-overview-select select {
  border: 1px solid #cddfd2;
  border-radius: 8px;
  background: #fcfffd;
  color: #264d38;
  font-family: var(--font-ui);
  font-size: 0.81rem;
  padding: 0.42rem 0.5rem;
}

.creator-overview-select select:focus {
  outline: none;
  border-color: #90c8a5;
  box-shadow: 0 0 0 3px rgba(74, 171, 106, 0.16);
}

.creator-overview-substats {
  margin-top: 0.66rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.56rem;
}

.creator-overview-substat-card {
  border: 1px solid #dae8df;
  border-radius: 10px;
  background: #fbfefc;
  padding: 0.56rem 0.62rem;
}

.creator-overview-substat-card p {
  margin: 0;
  color: #5b7a68;
  font-size: 0.74rem;
  font-weight: 700;
}

.creator-overview-substat-card strong {
  display: block;
  margin-top: 0.22rem;
  color: #1f6643;
  font-size: 0.95rem;
  font-weight: 800;
}

.creator-overview-substat-card span,
.creator-overview-ref-card span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.28rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 0.12rem 0.42rem;
}

.creator-overview-change-positive {
  color: #1d643f;
  border-color: #c5e4d0;
  background: #ecf9f1;
}

.creator-overview-change-negative {
  color: #8a3640;
  border-color: #f0ccd2;
  background: #fff4f6;
}

.creator-overview-change-neutral {
  color: #567180;
  border-color: #d7e3ea;
  background: #f5fafc;
}

.creator-overview-legend {
  margin-top: 0.7rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.38rem;
}

.creator-overview-legend button {
  border: 1px solid #d0dfd5;
  border-radius: 999px;
  background: #f7fcf8;
  color: #31543d;
  font-family: var(--font-ui);
  font-size: 0.74rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.33rem;
  padding: 0.3rem 0.48rem;
  cursor: pointer;
}

.creator-overview-legend button:hover {
  background: #edf8f0;
}

.creator-overview-legend button.is-muted {
  opacity: 0.5;
}

.creator-overview-legend .dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  display: inline-block;
}

.creator-overview-legend .dot-total {
  background: #1f7e49;
}

.creator-overview-legend .dot-resources {
  background: #39b866;
}

.creator-overview-legend .dot-bundles {
  background: #3f93d4;
}

.creator-overview-legend .dot-addons {
  background: #8e73d8;
}

.creator-overview-legend .dot-referrals {
  background: #d39a2f;
}

.creator-overview-legend .dot-impressions {
  background: #1f7e49;
}

.creator-overview-legend .dot-views {
  background: #39b866;
}

.creator-overview-legend .dot-wishlist {
  background: #8e73d8;
}

.creator-overview-legend .dot-purchases {
  background: #d39a2f;
}

.creator-overview-chart-wrap {
  margin-top: 0.62rem;
  border: 1px solid #d5e4da;
  border-radius: 10px;
  background:
    linear-gradient(to top, rgba(232, 241, 236, 0.72) 1px, transparent 1px) 0 0 / 100% 34px,
    #fcfffd;
  min-height: 290px;
  overflow: hidden;
  position: relative;
}

.creator-overview-chart-svg {
  display: block;
  width: 100%;
  height: 290px;
}

.creator-overview-chart-empty {
  position: absolute;
  inset: 0;
  margin: 0;
  display: grid;
  place-items: center;
  color: #698494;
  font-size: 0.82rem;
  background: rgba(255, 255, 255, 0.72);
}

.creator-overview-line-total {
  stroke: #1f7e49;
}

.creator-overview-line-resources {
  stroke: #39b866;
}

.creator-overview-line-bundles {
  stroke: #3f93d4;
}

.creator-overview-line-addons {
  stroke: #8e73d8;
}

.creator-overview-line-referrals {
  stroke: #d39a2f;
}

.creator-overview-ref-grid {
  margin-top: 0.68rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.56rem;
}

.creator-overview-ref-card {
  border: 1px solid #d8e6dc;
  border-radius: 10px;
  background: #fbfefc;
  padding: 0.56rem 0.62rem;
}

.creator-overview-ref-card p {
  margin: 0;
  color: #5a7867;
  font-size: 0.74rem;
  font-weight: 700;
}

.creator-overview-ref-card strong {
  display: block;
  margin-top: 0.22rem;
  color: #1f6643;
  font-size: 0.95rem;
  font-weight: 800;
}

.creator-overview-panel .creator-hub-table th {
  color: #4d7361;
}

.creator-overview-panel .creator-hub-table td {
  color: #2f5068;
}

.creator-hub-views {
  margin-top: 0.9rem;
}

.creator-hub-view {
  display: none;
  gap: 0.72rem;
}

.creator-hub-view.is-active {
  display: grid;
}

.creator-hub-stats-grid,
.creator-hub-substats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.58rem;
}

.creator-hub-stats-grid article,
.creator-hub-substats-grid article {
  border: 1px solid #d8e4ee;
  border-radius: 10px;
  background: #fbfdff;
  padding: 0.64rem 0.68rem;
}

.creator-hub-stats-grid span,
.creator-hub-substats-grid span {
  color: #618096;
  font-size: 0.76rem;
  font-weight: 700;
}

.creator-hub-stats-grid strong,
.creator-hub-substats-grid strong {
  display: block;
  margin-top: 0.26rem;
  color: #1f4f68;
  font-size: 1rem;
  font-weight: 800;
}

.creator-hub-panel {
  border: 1px solid #d8e4ee;
  border-radius: 10px;
  background: #ffffff;
  padding: 0.76rem 0.78rem;
}

.creator-hub-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
}

.creator-hub-panel-head h2 {
  margin: 0;
  color: #1f4b64;
  font-size: 1.1rem;
}

.creator-hub-panel-head p {
  margin: 0.28rem 0 0;
  color: #5f788d;
  font-size: 0.82rem;
}

.creator-hub-inline-filters {
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
}

.creator-hub-inline-filters label {
  color: #5d788d;
  font-size: 0.75rem;
  font-weight: 700;
}

.creator-hub-inline-filters select,
.creator-hub-field input,
.creator-hub-field select {
  border: 1px solid #cfdeea;
  border-radius: 8px;
  background: #fcfeff;
  color: #25445a;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  padding: 0.5rem 0.58rem;
}

.creator-hub-inline-filters select:focus,
.creator-hub-field input:focus,
.creator-hub-field select:focus {
  outline: none;
  border-color: #8ec3de;
  box-shadow: 0 0 0 3px rgba(109, 176, 215, 0.16);
}

.creator-hub-chart-bars {
  margin-top: 0.76rem;
  border: 1px solid #d9e6f0;
  border-radius: 10px;
  background:
    linear-gradient(to top, rgba(229, 239, 247, 0.8) 1px, transparent 1px) 0 0 / 100% 28px,
    #fbfdff;
  min-height: 210px;
  padding: 0.72rem 0.6rem;
  display: flex;
  align-items: end;
  gap: 0.34rem;
}

.creator-hub-bar {
  flex: 1;
  border-radius: 5px 5px 2px 2px;
  background: linear-gradient(180deg, #6ec4ec 0%, #2f88b6 100%);
}

.creator-hub-form {
  margin-top: 0.72rem;
  display: grid;
  gap: 0.52rem;
}

.creator-hub-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.56rem 0.64rem;
}

.creator-hub-field {
  display: grid;
  gap: 0.28rem;
}

.creator-hub-field-wide {
  grid-column: 1 / -1;
}

.creator-hub-field label {
  color: #48657b;
  font-size: 0.77rem;
  font-weight: 700;
}

.creator-hub-resource-picker {
  border: 1px solid #d6e4ee;
  border-radius: 8px;
  background: #fbfdff;
  padding: 0.42rem;
  display: grid;
  gap: 0.34rem;
  max-height: 180px;
  overflow: auto;
}

.creator-hub-resource-picker label {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  color: #34556d;
  font-size: 0.78rem;
}

.creator-hub-resource-picker input {
  accent-color: #2f9d5d;
}

.creator-hub-table-wrap {
  margin-top: 0.6rem;
  overflow: auto;
}

.creator-hub-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}

.creator-hub-table th,
.creator-hub-table td {
  border-bottom: 1px solid #e1ebf3;
  text-align: left;
  padding: 0.5rem 0.32rem;
}

.creator-hub-table th {
  color: #587792;
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.creator-hub-table td {
  color: #2f5068;
  font-size: 0.8rem;
}

.creator-hub-table a {
  color: #246b8f;
  text-decoration: none;
}

.creator-hub-table a:hover {
  text-decoration: underline;
}

.creator-hub-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 0.12rem 0.46rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.creator-hub-chip.is-active {
  color: #205e3a;
  background: #ecf9f0;
  border-color: #c8e7d2;
}

.creator-hub-chip.is-pending {
  color: #7b570f;
  background: #fff8e9;
  border-color: #f1dfb8;
}

.creator-hub-chip.is-rejected {
  color: #8f2f37;
  background: #fff2f3;
  border-color: #f3cfd3;
}

.creator-hub-row-actions {
  display: inline-flex;
  gap: 0.34rem;
}

.creator-hub-row-actions button {
  border: 1px solid #ccdbe6;
  border-radius: 7px;
  background: #f7fbff;
  color: #2e607e;
  font-family: var(--font-ui);
  font-size: 0.74rem;
  font-weight: 700;
  padding: 0.32rem 0.46rem;
  cursor: pointer;
}

.creator-hub-row-actions button:hover {
  background: #edf5fb;
}

.creator-hub-empty {
  margin: 0.52rem 0 0;
  color: #678198;
  font-size: 0.79rem;
}

.creator-resources-panel {
  overflow: hidden;
}

.creator-resource-add {
  min-height: 39px;
  padding-inline: 0.88rem;
}

.creator-resources-toolbar {
  margin-top: 0.08rem;
  display: grid;
  grid-template-columns: minmax(260px, 1.6fr) repeat(3, minmax(140px, 1fr));
  gap: 0.52rem;
  align-items: end;
}

.creator-resources-search {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  border: 1px solid #cfe2d6;
  border-radius: 10px;
  background: #f8fdf9;
  padding: 0.48rem 0.58rem;
  min-height: 39px;
}

.creator-resources-search i {
  color: #4f7862;
  font-size: 0.84rem;
}

.creator-resources-search input {
  border: 0;
  background: transparent;
  color: #264938;
  width: 100%;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 600;
}

.creator-resources-search input::placeholder {
  color: #6f8e7e;
}

.creator-resources-search input:focus {
  outline: none;
}

.creator-resources-search:focus-within {
  border-color: #93cdab;
  box-shadow: 0 0 0 3px rgba(74, 171, 106, 0.16);
}

.creator-resources-summary {
  margin-top: 0.66rem;
  border: 1px solid #d8e7de;
  border-radius: 10px;
  background: linear-gradient(120deg, #f4fbf6, #fbfffc);
  padding: 0.52rem 0.64rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.56rem 0.9rem;
}

.creator-resources-summary span {
  color: #2f6847;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.creator-resources-note {
  margin: 0.46rem 0 0;
  color: #567267;
  font-size: 0.77rem;
  line-height: 1.45;
}

.creator-resources-note strong {
  color: #2a6d46;
}

.creator-resources-feedback {
  margin-top: 0.56rem;
  margin-bottom: 0;
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0.44rem 0.54rem;
  min-height: 16px;
}

.creator-resources-feedback:empty {
  display: none;
}

.creator-resources-feedback.is-success {
  color: #205e3a;
  border-color: #c8e7d2;
  background: #edf9f1;
}

.creator-resources-feedback.is-error {
  color: #8f2f37;
  border-color: #f1ced2;
  background: #fff3f5;
}

.creator-resources-feedback.is-info {
  color: #3a5f76;
  border-color: #d4e2ec;
  background: #f3f8fc;
}

.creator-resource-list {
  margin-top: 0.56rem;
  display: grid;
  gap: 0.44rem;
}

.creator-resource-row {
  border: 1px solid #d8e6dc;
  border-radius: 11px;
  background: #ffffff;
  padding: 0.56rem;
  display: grid;
  grid-template-columns: 172px minmax(0, 1fr) 292px;
  gap: 0.58rem;
  align-items: stretch;
  overflow: hidden;
  transition: border-color 170ms ease, box-shadow 170ms ease;
}

.creator-resource-row:hover {
  border-color: #c4dbc9;
  box-shadow: 0 8px 18px rgba(26, 64, 45, 0.08);
}

.creator-resource-thumb {
  position: relative;
  border: 1px solid #d2e2d8;
  border-radius: 9px;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  height: auto;
  align-self: start;
  aspect-ratio: 16 / 9;
  background: #eff5f1;
}

.creator-resource-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: inherit;
  transform: none;
}

.creator-resource-thumb-badge {
  position: absolute;
  left: 0.4rem;
  bottom: 0.4rem;
  border-radius: 999px;
  padding: 0.17rem 0.46rem;
  color: #ffffff;
  font-size: 0.67rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  letter-spacing: 0.02em;
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(1px);
}

.creator-resource-thumb-badge i {
  font-size: 0.6rem;
}

.creator-resource-thumb-badge.tone-plugins {
  background: linear-gradient(145deg, #39b866, #1f6f47);
}

.creator-resource-thumb-badge.tone-setups {
  background: linear-gradient(145deg, #2eae89, #1b7f63);
}

.creator-resource-thumb-badge.tone-builds {
  background: linear-gradient(145deg, #4aac6a, #2f8b45);
}

.creator-resource-thumb-badge.tone-config {
  background: linear-gradient(145deg, #35a06d, #276b4d);
}

.creator-resource-thumb-badge.tone-textures {
  background: linear-gradient(145deg, #5db579, #3a8558);
}

.creator-resource-main h3 {
  margin: 0;
  color: #1f6943;
  font-size: 1.03rem;
  line-height: 1.3;
}

.creator-resource-main h3 span {
  margin-left: 0.35rem;
  color: #658672;
  font-size: 0.78rem;
  font-weight: 700;
}

.creator-resource-meta {
  margin: 0.18rem 0 0;
  color: #5d7b68;
  font-size: 0.75rem;
  font-weight: 700;
}

.creator-resource-summary {
  margin: 0.34rem 0 0;
  color: #426253;
  font-size: 0.8rem;
  line-height: 1.46;
}

.creator-resource-review {
  margin: 0.34rem 0 0;
  color: #5d7b68;
  font-size: 0.74rem;
  font-weight: 700;
}

.creator-resource-side {
  border-left: 1px solid #e2ece6;
  padding-left: 0.58rem;
  display: grid;
  align-content: start;
  gap: 0.42rem;
}

.resource-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.14rem 0.52rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  width: fit-content;
}

.resource-status-published {
  color: #205e3a;
  border-color: #c8e7d2;
  background: #ecf9f0;
}

.resource-status-draft {
  color: #7b570f;
  border-color: #f1dfb8;
  background: #fff8e9;
}

.resource-status-pending {
  color: #8f2f37;
  border-color: #f3cfd3;
  background: #fff2f3;
}

.resource-status-scheduled {
  color: #6e5611;
  border-color: #eadcae;
  background: #fff9e8;
}

.resource-status-live {
  color: #1d6a41;
  border-color: #c7e5d3;
  background: #eaf8ef;
}

.resource-status-ended {
  color: #52697a;
  border-color: #dbe5eb;
  background: #f5f8fb;
}

.creator-resource-metrics {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.28rem 0.4rem;
}

.creator-resource-metrics div {
  border: 1px solid #dbe8df;
  border-radius: 8px;
  background: #fbfefc;
  padding: 0.3rem 0.38rem;
}

.creator-resource-metrics dt {
  margin: 0;
  color: #62806f;
  font-size: 0.68rem;
  font-weight: 700;
}

.creator-resource-metrics dd {
  margin: 0.15rem 0 0;
  color: #24563d;
  font-size: 0.82rem;
  font-weight: 800;
}

.creator-resource-actions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0.3rem;
}

.creator-resource-actions button {
  border: 1px solid #cedfd5;
  border-radius: 7px;
  background: #f7fcf8;
  color: #335b47;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.3rem 0.48rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.26rem;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
  min-width: 0;
  white-space: nowrap;
}

.creator-resource-actions button:hover {
  background: #eef8f1;
  border-color: #b9d9c5;
}

.creator-bundles-panel {
  overflow: hidden;
}

.creator-bundle-list {
  margin-top: 0.56rem;
  display: grid;
  gap: 0.5rem;
}

.creator-bundle-row {
  border: 1px solid #d8e6dc;
  border-radius: 11px;
  background: #ffffff;
  padding: 0.56rem;
  display: grid;
  grid-template-columns: 172px minmax(0, 1fr) 262px;
  gap: 0.58rem;
  align-items: stretch;
  overflow: hidden;
  transition: border-color 170ms ease, box-shadow 170ms ease;
}

.creator-bundle-row:hover {
  border-color: #c4dbc9;
  box-shadow: 0 8px 18px rgba(26, 64, 45, 0.08);
}

.creator-bundle-thumb {
  position: relative;
  border: 0;
  border-radius: 9px;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  align-self: start;
  aspect-ratio: 16 / 9;
  background: transparent;
}

.creator-bundle-thumb:has(.bundle-thumb-grid.is-count-2) {
  aspect-ratio: 1 / 1;
}

.creator-bundle-main {
  display: grid;
  align-content: start;
  min-width: 0;
}

.bundle-thumb-visual {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
}

.creator-bundle-thumb > .bundle-thumb-visual {
  position: absolute;
  inset: 0;
}

.bundle-thumb-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  background: transparent;
}

.bundle-thumb-grid {
  display: grid;
  gap: 0;
  background: transparent;
  border-radius: inherit;
  overflow: hidden;
}

.bundle-thumb-grid.is-count-1 {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.bundle-thumb-grid.is-count-2 {
  grid-template-columns: 1fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.bundle-thumb-grid.is-count-3,
.bundle-thumb-grid.is-count-4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.bundle-thumb-grid.is-count-3 .bundle-thumb-cell:first-child {
  grid-row: 1 / span 2;
}

.bundle-thumb-cell {
  position: relative;
  overflow: hidden;
  background: transparent;
}

.bundle-thumb-cell img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.creator-bundle-thumb-count {
  position: absolute;
  top: 0.42rem;
  right: 0.42rem;
  border-radius: 999px;
  padding: 0.18rem 0.5rem;
  background: rgba(13, 25, 19, 0.72);
  color: #ffffff;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.creator-bundle-main h3 {
  margin: 0;
  color: #1f6943;
  font-size: 1.03rem;
  line-height: 1.3;
}

.creator-bundle-main h3 span {
  margin-left: 0.35rem;
  color: #658672;
  font-size: 0.78rem;
  font-weight: 700;
}

.creator-bundle-includes {
  margin-top: 0.42rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.34rem;
}

.creator-bundle-includes span {
  border: 1px solid #d4e4da;
  border-radius: 999px;
  background: #f7fbf8;
  color: #416252;
  padding: 0.24rem 0.54rem;
  font-size: 0.71rem;
  font-weight: 700;
}

.creator-bundle-includes span.is-more {
  color: #24563d;
  background: #eef8f1;
  border-color: #c8e2d1;
}

.bundle-modal-panel {
  max-width: 1020px;
  max-height: calc(100vh - 3.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.bundle-builder-stats {
  margin: 0.15rem 0 0.3rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.42rem;
}

.bundle-builder-stats article {
  border: 1px solid #dbe8df;
  border-radius: 10px;
  background: #fbfefc;
  padding: 0.62rem 0.72rem;
}

.bundle-builder-stats span {
  display: block;
  color: #62806f;
  font-size: 0.74rem;
  font-weight: 700;
}

.bundle-builder-stats strong {
  display: block;
  margin-top: 0.18rem;
  color: #1e5d3c;
  font-size: 1rem;
  font-weight: 800;
}

.bundle-selected-preview {
  min-height: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: flex-start;
}

.bundle-selected-preview span {
  border: 1px solid #d4e4da;
  border-radius: 999px;
  background: #f7fbf8;
  color: #416252;
  padding: 0.28rem 0.58rem;
  font-size: 0.72rem;
  font-weight: 700;
}

.bundle-selected-preview span strong {
  color: #24563d;
  margin-left: 0.22rem;
}

.bundle-selected-preview span.is-empty {
  color: #6a8374;
  background: #ffffff;
  border-style: dashed;
}

.bundle-thumbnail-field {
  gap: 0.52rem;
}

.bundle-thumbnail-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.bundle-thumbnail-toggle {
  font-size: 0.78rem;
}

.bundle-custom-thumbnail-controls {
  display: grid;
  gap: 0.44rem;
}

.bundle-cover-preview {
  display: grid;
  gap: 0.42rem;
}

.bundle-cover-preview-frame {
  position: relative;
  width: min(420px, 100%);
  max-width: 100%;
  border: 1px solid #d7e5db;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #eef5f0;
}

.bundle-cover-preview-frame:has(.bundle-thumb-grid.is-count-2) {
  aspect-ratio: 1 / 1;
}

.bundle-cover-preview-note,
.bundle-cover-preview-empty {
  margin: 0;
  color: #647d70;
  font-size: 0.76rem;
  font-weight: 700;
}

.bundle-cover-preview-empty {
  border: 1px dashed #d2e2d8;
  border-radius: 10px;
  background: #fbfefc;
  padding: 0.85rem 0.95rem;
}

.bundle-resource-search {
  margin-bottom: 0.1rem;
}

.bundle-resource-picker {
  border: 1px solid #d8e6dc;
  border-radius: 12px;
  background: #fbfefc;
  padding: 0.45rem;
  display: grid;
  gap: 0.44rem;
  max-height: 360px;
  overflow: auto;
}

.bundle-resource-option {
  border: 1px solid #d8e6dc;
  border-radius: 10px;
  background: #ffffff;
  padding: 0.48rem;
  display: grid;
  grid-template-columns: auto 88px minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: center;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.bundle-resource-option:hover {
  border-color: #c3dbc9;
  background: #f9fcfa;
}

.bundle-resource-option.is-selected {
  border-color: #85c79e;
  background: #eff9f2;
  box-shadow: inset 0 0 0 1px rgba(47, 135, 79, 0.08);
}

.bundle-resource-option.is-disabled {
  opacity: 0.58;
  cursor: not-allowed;
}

.bundle-resource-option.is-disabled:hover {
  border-color: #d8e6dc;
  background: #ffffff;
  box-shadow: none;
}

.bundle-resource-option input {
  margin: 0;
  accent-color: #2f874f;
}

.bundle-resource-option-thumb {
  position: relative;
  border: 1px solid #d7e5db;
  border-radius: 8px;
  overflow: hidden;
  width: 88px;
  aspect-ratio: 16 / 9;
  background: #eef5f0;
}

.bundle-resource-option-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.bundle-resource-option-main {
  display: grid;
  gap: 0.14rem;
  min-width: 0;
}

.bundle-resource-option-main strong {
  color: #215c3d;
  font-size: 0.83rem;
  font-weight: 800;
  line-height: 1.35;
}

.bundle-resource-option-main span {
  color: #647d6f;
  font-size: 0.72rem;
  font-weight: 700;
}

.bundle-resource-option-side {
  display: grid;
  gap: 0.3rem;
  justify-items: end;
}

.bundle-resource-option-side strong {
  color: #1f5b3b;
  font-size: 0.84rem;
  font-weight: 800;
}

.bundle-resource-empty {
  margin: 0;
  border: 1px dashed #cfe1d5;
  border-radius: 10px;
  padding: 0.9rem 1rem;
  background: #ffffff;
  color: #6d8376;
  font-size: 0.82rem;
  font-weight: 700;
  text-align: center;
}

.sale-event-list {
  margin-top: 0.62rem;
  display: grid;
  gap: 0.56rem;
}

.sale-event-row {
  border: 1px solid #d8e6dc;
  border-radius: 12px;
  background: #ffffff;
  padding: 0.72rem;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) 280px;
  gap: 0.72rem;
  align-items: stretch;
  transition: border-color 170ms ease, box-shadow 170ms ease;
}

.sale-event-row:hover {
  border-color: #c5dbc9;
  box-shadow: 0 8px 18px rgba(26, 64, 45, 0.08);
}

.sale-event-main {
  min-width: 0;
  display: grid;
  align-content: start;
}

.sale-event-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 0.8rem;
}

.sale-event-head h3 {
  margin: 0.34rem 0 0;
  color: #1f6943;
  font-size: 1.02rem;
  line-height: 1.28;
}

.sale-event-discount {
  align-self: center;
  border-radius: 999px;
  padding: 0.34rem 0.72rem;
  background: linear-gradient(135deg, #53bd74, #2a874b);
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  white-space: nowrap;
  box-shadow: 0 10px 18px rgba(45, 132, 76, 0.18);
}

.sale-event-summary {
  margin: 0.42rem 0 0;
  color: #466556;
  font-size: 0.81rem;
  line-height: 1.5;
}

.sale-event-timeline {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.8rem;
}

.sale-event-timeline span {
  color: #5a7a69;
  font-size: 0.75rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
}

.sale-event-timeline i {
  color: #4d8b67;
}

.sale-event-offer-tags {
  margin-top: 0.56rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.36rem;
}

.sale-event-offer-tags span {
  border: 1px solid #d5e4db;
  border-radius: 999px;
  background: #f7fbf8;
  color: #426454;
  padding: 0.28rem 0.58rem;
  font-size: 0.72rem;
  font-weight: 700;
}

.sale-event-offer-tags strong {
  color: #24563d;
  margin-left: 0.26rem;
}

.sale-event-side {
  border-left: 1px solid #e2ece6;
  padding-left: 0.68rem;
  display: grid;
  align-content: start;
  gap: 0.44rem;
}

.sale-event-metrics {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.34rem;
}

.sale-event-metrics div {
  border: 1px solid #dbe8df;
  border-radius: 8px;
  background: #fbfefc;
  padding: 0.34rem 0.42rem;
}

.sale-event-metrics dt {
  margin: 0;
  color: #64806f;
  font-size: 0.68rem;
  font-weight: 700;
}

.sale-event-metrics dd {
  margin: 0.18rem 0 0;
  color: #24563d;
  font-size: 0.84rem;
  font-weight: 800;
}

.sale-event-updated {
  margin: 0;
  color: #678172;
  font-size: 0.73rem;
  font-weight: 700;
}

.sale-event-actions {
  grid-auto-columns: minmax(0, 1fr);
}

.sale-event-modal-panel {
  max-width: 1120px;
  max-height: calc(100vh - 3.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.sale-event-builder-stats {
  margin: 0.12rem 0 0.36rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.44rem;
}

.sale-event-builder-stats article {
  border: 1px solid #dbe8df;
  border-radius: 10px;
  background: #fbfefc;
  padding: 0.62rem 0.72rem;
}

.sale-event-builder-stats span {
  display: block;
  color: #64806f;
  font-size: 0.74rem;
  font-weight: 700;
}

.sale-event-builder-stats strong {
  display: block;
  margin-top: 0.18rem;
  color: #1e5d3c;
  font-size: 1rem;
  font-weight: 800;
}

.sale-event-search {
  margin-top: 0.3rem;
}

.sale-event-selected-preview {
  margin-top: 0.6rem;
  display: grid;
  gap: 0.42rem;
}

.sale-event-selected-empty {
  margin: 0;
  border: 1px dashed #d1e2d7;
  border-radius: 10px;
  background: #fbfefc;
  padding: 0.95rem 1rem;
  color: #6c8376;
  font-size: 0.79rem;
  font-weight: 700;
}

.sale-event-preview-card {
  border: 1px solid #dbe8df;
  border-radius: 11px;
  background: #ffffff;
  padding: 0.5rem;
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr) auto;
  gap: 0.52rem;
  align-items: center;
}

.sale-event-preview-thumb {
  position: relative;
  border: 1px solid #d3e2d8;
  border-radius: 9px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #eff5f1;
}

.sale-event-preview-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.sale-event-preview-main {
  display: grid;
  gap: 0.16rem;
  min-width: 0;
}

.sale-event-preview-main strong {
  color: #235b3d;
  font-size: 0.83rem;
  font-weight: 800;
}

.sale-event-preview-main span,
.sale-event-preview-main small {
  color: #657d70;
  font-size: 0.72rem;
  font-weight: 700;
}

.sale-event-preview-price {
  display: grid;
  justify-items: end;
  gap: 0.16rem;
}

.sale-event-preview-price span {
  color: #215939;
  font-size: 0.84rem;
  font-weight: 800;
}

.sale-event-preview-price small {
  color: #7c8f84;
  font-size: 0.71rem;
  font-weight: 700;
  text-decoration: line-through;
}

.sale-event-offer-grid {
  margin-top: 0.7rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.66rem;
  align-items: start;
}

.sale-event-picker-panel {
  border: 1px solid #d8e6dc;
  border-radius: 12px;
  background: #fbfefc;
  padding: 0.62rem;
  display: grid;
  gap: 0.56rem;
  align-content: start;
  align-self: start;
}

.sale-event-picker-head h3 {
  margin: 0;
  color: #1f6943;
  font-size: 0.92rem;
}

.sale-event-picker-head p {
  margin: 0.18rem 0 0;
  color: #617a6c;
  font-size: 0.75rem;
  line-height: 1.45;
}

.sale-event-picker-list {
  display: grid;
  gap: 0.42rem;
  max-height: 360px;
  overflow: auto;
}

.sale-event-picker-option {
  border: 1px solid #d8e6dc;
  border-radius: 10px;
  background: #ffffff;
  padding: 0.46rem;
  display: grid;
  grid-template-columns: auto 104px minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: center;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.sale-event-picker-option:hover {
  border-color: #c4dbc9;
  background: #f9fcfa;
}

.sale-event-picker-option.is-selected {
  border-color: #84c69d;
  background: #eff9f2;
  box-shadow: inset 0 0 0 1px rgba(47, 135, 79, 0.08);
}

.sale-event-picker-option input {
  margin: 0;
  accent-color: #2f874f;
}

.sale-event-picker-thumb {
  position: relative;
  border: 1px solid #d5e3d9;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #eef5f0;
}

.sale-event-picker-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.sale-event-picker-main {
  display: grid;
  gap: 0.14rem;
  min-width: 0;
}

.sale-event-picker-main strong {
  color: #215c3d;
  font-size: 0.83rem;
  font-weight: 800;
}

.sale-event-picker-main span,
.sale-event-picker-main small {
  color: #677f72;
  font-size: 0.72rem;
  font-weight: 700;
}

.sale-event-picker-side {
  display: grid;
  justify-items: end;
  gap: 0.18rem;
}

.sale-event-picker-side strong {
  color: #215b3b;
  font-size: 0.84rem;
  font-weight: 800;
}

.sale-event-picker-side small {
  color: #71877a;
  font-size: 0.71rem;
  font-weight: 700;
}

.sale-event-picker-empty {
  margin: 0;
  border: 1px dashed #d2e3d8;
  border-radius: 10px;
  padding: 0.95rem 1rem;
  background: #ffffff;
  color: #6d8376;
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
}

@media (max-width: 980px) {
  .sale-event-row {
    grid-template-columns: 1fr;
  }

  .sale-event-side {
    border-left: 0;
    border-top: 1px solid #e2ece6;
    padding-left: 0;
    padding-top: 0.68rem;
  }

  .sale-event-offer-grid {
    grid-template-columns: 1fr;
  }

  .sale-event-builder-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .sale-event-head {
    flex-direction: column;
    align-items: start;
  }

  .sale-event-preview-card {
    grid-template-columns: 1fr;
  }

  .sale-event-picker-option {
    grid-template-columns: auto 92px minmax(0, 1fr);
  }

  .sale-event-picker-side {
    grid-column: 2 / -1;
    justify-items: start;
  }
}

.admin-review-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-review-panel {
  margin-top: 0.84rem;
}

.admin-review-toolbar {
  grid-template-columns: minmax(280px, 1fr) 210px;
}

.admin-review-list {
  margin-top: 0.62rem;
  display: grid;
  gap: 0.52rem;
}

.admin-review-row {
  border: 1px solid #d8e6dc;
  border-radius: 11px;
  background: #ffffff;
  padding: 0.56rem;
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 0.58rem;
}

.admin-review-thumb {
  position: relative;
  border: 1px solid #d2e2d8;
  border-radius: 9px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #eff5f1;
}

.admin-review-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: inherit;
  transform: none;
}

.admin-review-main h3 {
  margin: 0;
  color: #1f6943;
  font-size: 1.03rem;
}

.admin-review-main h3 span {
  margin-left: 0.35rem;
  color: #658672;
  font-size: 0.78rem;
  font-weight: 700;
}

.admin-review-main p {
  margin: 0.28rem 0 0;
  color: #506b5f;
  font-size: 0.78rem;
  line-height: 1.45;
}

.admin-review-status {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.admin-review-metrics {
  font-weight: 700;
}

.admin-review-note {
  margin-top: 0.42rem;
  width: 100%;
  min-height: 62px;
  resize: vertical;
  border: 1px solid #cfdfd5;
  border-radius: 8px;
  background: #fbfefc;
  color: #244637;
  font-family: var(--font-ui);
  font-size: 0.79rem;
  font-weight: 600;
  padding: 0.46rem 0.52rem;
}

.admin-review-note:focus {
  outline: none;
  border-color: #93cdab;
  box-shadow: 0 0 0 3px rgba(74, 171, 106, 0.16);
}

.admin-review-actions {
  margin-top: 0.4rem;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.32rem;
}

.admin-review-actions button {
  border: 1px solid #cedfd5;
  border-radius: 7px;
  background: #f7fcf8;
  color: #335b47;
  font-family: var(--font-ui);
  font-size: 0.73rem;
  font-weight: 700;
  padding: 0.31rem 0.52rem;
  display: inline-flex;
  align-items: center;
  gap: 0.26rem;
  cursor: pointer;
}

.admin-review-actions button:hover {
  background: #eef8f1;
  border-color: #b9d9c5;
}

.admin-review-actions button:disabled {
  opacity: 0.52;
  cursor: not-allowed;
}

.admin-overview-intro {
  margin-top: 0.42rem;
}

.admin-dashboard-grid {
  margin-top: 0.84rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
}

.admin-dashboard-card {
  border: 1px solid #d8e6dc;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(250, 253, 251, 0.96), rgba(245, 251, 247, 0.92));
  padding: 0.86rem 0.9rem;
  display: grid;
  gap: 0.72rem;
}

.admin-dashboard-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.admin-dashboard-kicker {
  display: inline-block;
  color: #3a8a5a;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.admin-dashboard-card h2 {
  margin: 0.14rem 0 0;
  color: #1c6a42;
  font-size: 1.1rem;
  font-weight: 800;
}

.admin-dashboard-copy {
  margin: 0;
  color: #4f6a5d;
  font-size: 0.87rem;
  line-height: 1.65;
}

.admin-dashboard-link {
  border: 1px solid #cfe1d7;
  border-radius: 999px;
  background: #ffffff;
  color: #2d6945;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 0.52rem 0.78rem;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease;
}

.admin-dashboard-link:hover {
  background: #eff8f2;
  border-color: #b7d7c2;
  color: #215b38;
}

.admin-dashboard-link.is-disabled {
  opacity: 0.56;
  pointer-events: none;
}

.admin-capability-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.48rem;
}

.admin-capability-list li {
  border: 1px solid #dbe7df;
  border-radius: 11px;
  background: #ffffff;
  padding: 0.58rem 0.7rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.58rem;
  align-items: start;
}

.admin-capability-list li i {
  margin-top: 0.05rem;
  font-size: 0.92rem;
}

.admin-capability-list li.is-enabled i {
  color: #3ea96b;
}

.admin-capability-list li.is-locked i {
  color: #9caea3;
}

.admin-capability-list li strong,
.admin-capability-list li small {
  display: block;
}

.admin-capability-list li strong {
  color: #234634;
  font-size: 0.83rem;
  font-weight: 800;
}

.admin-capability-list li small {
  margin-top: 0.16rem;
  color: #647d71;
  font-size: 0.76rem;
  line-height: 1.45;
}

.admin-dashboard-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.admin-dashboard-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid #d9e8de;
  border-radius: 999px;
  background: #ffffff;
  color: #446758;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 0.42rem 0.68rem;
}

.admin-operations-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.52rem;
}

.admin-operations-grid div {
  border: 1px solid #dbe9df;
  border-radius: 12px;
  background: #ffffff;
  padding: 0.66rem 0.72rem;
}

.admin-operations-grid span {
  display: block;
  color: #678272;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.admin-operations-grid strong {
  display: block;
  margin-top: 0.24rem;
  color: #1f6943;
  font-size: 1rem;
  font-weight: 900;
}

.admin-role-guide-panel,
.admin-role-panel {
  margin-top: 0.86rem;
}

.admin-role-guide-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.62rem;
}

.admin-role-guide-card {
  border: 1px solid #d8e6dc;
  border-radius: 13px;
  background: #fbfefc;
  padding: 0.8rem 0.82rem;
}

.admin-role-guide-card.is-active {
  border-color: #aad0b7;
  background: linear-gradient(180deg, rgba(63, 185, 108, 0.08), rgba(255, 255, 255, 0.92));
}

.admin-role-guide-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.admin-role-guide-card p {
  margin: 0.55rem 0 0;
  color: #597465;
  font-size: 0.81rem;
  line-height: 1.58;
}

.admin-role-guide-card ul {
  margin: 0.6rem 0 0;
  padding-left: 1.05rem;
  color: #395b49;
  font-size: 0.77rem;
  line-height: 1.55;
}

.admin-role-toolbar {
  grid-template-columns: minmax(280px, 1fr) 210px;
}

.admin-role-list {
  margin-top: 0.72rem;
  display: grid;
  gap: 0.58rem;
}

.admin-role-row {
  border: 1px solid #d8e6dc;
  border-radius: 14px;
  background: #ffffff;
  padding: 0.72rem 0.78rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.8rem;
  align-items: center;
}

.admin-role-user {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.72rem;
  align-items: center;
}

.admin-role-avatar {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: var(--avatar-bg, #3fb96c);
  color: #ffffff;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  font-weight: 900;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.admin-role-avatar.has-image img,
.admin-role-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.admin-role-user-copy {
  min-width: 0;
}

.admin-role-user-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.42rem;
}

.admin-role-user-head h3 {
  margin: 0;
  color: #1e6741;
  font-size: 1rem;
  font-weight: 900;
}

.admin-role-user-copy > p {
  margin: 0.12rem 0 0;
  color: #5b7667;
  font-size: 0.82rem;
  font-weight: 700;
}

.admin-role-user-meta {
  margin-top: 0.34rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.34rem;
}

.admin-role-user-meta span {
  border: 1px solid #dbe8df;
  border-radius: 999px;
  background: #f9fdfb;
  color: #5d7568;
  font-size: 0.73rem;
  font-weight: 700;
  padding: 0.3rem 0.52rem;
}

.admin-role-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 0.34rem 0.62rem;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.admin-role-badge.role-admin {
  background: rgba(38, 104, 66, 0.12);
  border-color: rgba(38, 104, 66, 0.18);
  color: #1f6b42;
}

.admin-role-badge.role-co-admin {
  background: rgba(69, 125, 193, 0.12);
  border-color: rgba(69, 125, 193, 0.2);
  color: #2d6497;
}

.admin-role-badge.role-moderator {
  background: rgba(182, 135, 58, 0.14);
  border-color: rgba(182, 135, 58, 0.18);
  color: #8d6823;
}

.admin-role-badge.role-support {
  background: rgba(137, 99, 195, 0.12);
  border-color: rgba(137, 99, 195, 0.18);
  color: #6f4eb5;
}

.admin-role-badge.role-buyer {
  background: rgba(113, 135, 122, 0.12);
  border-color: rgba(113, 135, 122, 0.16);
  color: #587065;
}

.admin-role-controls {
  display: inline-flex;
  align-items: flex-end;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

.admin-role-select {
  display: grid;
  gap: 0.18rem;
}

.admin-role-select span {
  color: #5f786b;
  font-size: 0.71rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-role-select select {
  min-width: 156px;
  border: 1px solid #cadacf;
  border-radius: 10px;
  background: #fbfefc;
  color: #254937;
  font-family: var(--font-ui);
  font-size: 0.84rem;
  font-weight: 800;
  padding: 0.62rem 0.78rem;
}

.admin-role-save {
  border: 1px solid #2e8f56;
  border-radius: 10px;
  background: linear-gradient(180deg, #44ba71, #319858);
  color: #ffffff;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 900;
  padding: 0.68rem 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(53, 164, 96, 0.2);
}

.admin-role-save:disabled {
  cursor: not-allowed;
  opacity: 0.52;
  box-shadow: none;
}

.admin-role-lock {
  max-width: 240px;
  border: 1px dashed #d7e3db;
  border-radius: 12px;
  background: #fbfefc;
  padding: 0.66rem 0.76rem;
}

.admin-role-lock span,
.admin-role-lock small {
  display: block;
}

.admin-role-lock span {
  color: #2f5c46;
  font-size: 0.8rem;
  font-weight: 800;
}

.admin-role-lock small {
  margin-top: 0.14rem;
  color: #71877b;
  font-size: 0.73rem;
  line-height: 1.5;
}

.admin-user-panel {
  margin-top: 0.86rem;
}

.admin-user-list {
  margin-top: 0.72rem;
  display: grid;
  gap: 0.72rem;
}

.admin-user-row {
  border: 1px solid #d8e6dc;
  border-radius: 16px;
  background: #ffffff;
  padding: 0.84rem 0.9rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.9rem;
  align-items: start;
}

.admin-user-main {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.84rem;
  align-items: center;
}

.admin-user-avatar {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--avatar-bg, #3fb96c);
  color: #ffffff;
}

.admin-user-avatar.has-image img,
.admin-user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.admin-user-copy {
  min-width: 0;
  display: grid;
  gap: 0.28rem;
}

.admin-user-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.44rem;
}

.admin-user-head h3 {
  margin: 0;
  color: #1d6740;
  font-size: 1.02rem;
  font-weight: 900;
}

.admin-user-subline,
.admin-user-description {
  margin: 0;
}

.admin-user-subline {
  color: #617b6d;
  font-size: 0.82rem;
  font-weight: 700;
}

.admin-user-description {
  color: #476455;
  font-size: 0.84rem;
  line-height: 1.58;
}

.admin-user-pill {
  border: 1px solid #d7e7dd;
  border-radius: 999px;
  background: #f6fbf8;
  color: #396550;
  padding: 0.3rem 0.54rem;
  font-size: 0.72rem;
  font-weight: 900;
}

.admin-user-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.38rem;
}

.admin-user-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  border: 1px solid #dbe8df;
  border-radius: 999px;
  background: #fbfefc;
  color: #5a7567;
  padding: 0.3rem 0.52rem;
  font-size: 0.74rem;
  font-weight: 700;
}

.admin-user-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 0.5rem;
}

@media (max-width: 1720px) {
  .admin-user-row {
    grid-template-columns: 1fr;
  }

  .admin-user-actions {
    justify-content: flex-start;
  }
}

.admin-user-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.38rem;
  min-height: 40px;
  border: 1px solid #d6e5db;
  border-radius: 12px;
  background: #fbfefc;
  color: #2e5f46;
  padding: 0.65rem 0.86rem;
  font-size: 0.79rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.admin-user-action.is-primary {
  border-color: #2e9458;
  background: linear-gradient(180deg, #46bd73, #30985a);
  color: #ffffff;
  box-shadow: 0 12px 24px rgba(53, 164, 96, 0.18);
}

.admin-user-action.is-positive {
  border-color: #2f9559;
  background: #f0f9f4;
  color: #246641;
}

.admin-user-action.is-warning {
  border-color: #e4d7b6;
  background: #fffaf0;
  color: #8d6524;
}

.admin-user-action.is-locked {
  color: #78897f;
  background: #f8fbf9;
}

.admin-account-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 0.3rem 0.56rem;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.admin-account-status.status-active {
  border-color: #c5e4d0;
  background: #eef8f2;
  color: #256a43;
}

.admin-account-status.status-limited {
  border-color: #eadbb8;
  background: #fff8ea;
  color: #8d6723;
}

.admin-account-status.status-suspended {
  border-color: #e9cda9;
  background: #fff3e3;
  color: #98602a;
}

.admin-account-status.status-banned {
  border-color: #e7c3c3;
  background: #fff2f2;
  color: #9c3f3f;
}

.admin-balance-quick {
  display: grid;
  gap: 0.28rem;
}

.admin-balance-quick > label {
  color: #5e776a;
  font-size: 0.69rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-balance-quick-controls {
  display: flex;
  align-items: center;
  gap: 0.38rem;
  flex-wrap: wrap;
}

.admin-balance-quick-controls input {
  width: 116px;
  min-height: 40px;
  border: 1px solid #ceded4;
  border-radius: 12px;
  background: #ffffff;
  color: #2a503d;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.62rem 0.66rem;
}

.admin-balance-quick-controls input:focus {
  outline: none;
  border-color: #71ba8a;
  box-shadow: 0 0 0 4px rgba(77, 167, 106, 0.12);
}

.admin-user-modal-panel {
  width: min(1080px, calc(100vw - 1.4rem));
  max-height: 88vh;
  overflow-y: auto;
}

.admin-user-form {
  display: grid;
  gap: 1rem;
  margin-top: 0.9rem;
}

.admin-user-form-section {
  border: 1px solid #dce8e0;
  border-radius: 16px;
  background: #fbfefc;
  padding: 0.92rem;
}

.admin-user-form-section h3 {
  margin: 0 0 0.78rem;
  color: #1d6841;
  font-size: 1rem;
  font-weight: 900;
}

.admin-user-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.78rem;
}

.admin-user-field {
  display: grid;
  gap: 0.34rem;
}

.admin-user-field > span,
.admin-user-toggle-grid label {
  color: #506f5f;
}

.admin-user-field > span {
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-user-field input,
.admin-user-field textarea,
.admin-user-field select {
  width: 100%;
  min-width: 0;
  border: 1px solid #cedfd5;
  border-radius: 12px;
  background: #ffffff;
  color: #264a38;
  padding: 0.76rem 0.86rem;
  font: inherit;
}

.admin-user-field textarea {
  resize: vertical;
}

.admin-user-field input:focus,
.admin-user-field textarea:focus,
.admin-user-field select:focus {
  border-color: #67b783;
  box-shadow: 0 0 0 4px rgba(77, 167, 106, 0.12);
  outline: none;
}

.admin-user-field-wide {
  grid-column: 1 / -1;
}

.admin-user-toggle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem 0.9rem;
}

.admin-user-toggle-grid label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.5;
}

.admin-user-toggle-grid input[type="checkbox"] {
  accent-color: #3ea86a;
}

.admin-user-modal-actions {
  margin-top: 0.2rem;
}

.admin-panel-page-main {
  padding: 1.14rem 1rem 2.05rem;
  background:
    radial-gradient(circle at 4% 8%, rgba(91, 177, 123, 0.08), transparent 30%),
    radial-gradient(circle at 96% 2%, rgba(65, 143, 94, 0.06), transparent 28%),
    #e6ecf2;
}

.admin-reset-main {
  min-height: calc(100vh - 86px);
  padding: 1.2rem 1rem 2rem;
  display: grid;
  place-items: start center;
  background:
    radial-gradient(circle at 2% 4%, rgba(67, 174, 108, 0.12), transparent 28%),
    radial-gradient(circle at 96% 0%, rgba(39, 120, 80, 0.1), transparent 26%),
    #e6ecf2;
}

.admin-alt-header {
  position: sticky;
  top: 0;
  z-index: 60;
  border-bottom: 1px solid #223a30;
  background:
    linear-gradient(90deg, rgba(22, 34, 30, 0.95), rgba(19, 31, 27, 0.95)),
    radial-gradient(circle at 20% 0%, rgba(79, 184, 124, 0.26), transparent 36%);
  backdrop-filter: blur(8px);
}

.admin-alt-header-inner {
  width: min(1440px, 100% - 1.4rem);
  margin: 0 auto;
  min-height: 72px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.86rem;
}

.admin-alt-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.58rem;
  text-decoration: none;
}

.admin-alt-brand img {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  object-fit: cover;
}

.admin-alt-brand-copy span {
  display: block;
  color: #8fbda6;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 800;
}

.admin-alt-brand-copy strong {
  display: block;
  color: #ebfff4;
  font-size: 1rem;
  font-weight: 900;
}

.admin-alt-nav {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.admin-alt-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.36rem;
  min-height: 34px;
  border: 1px solid #2c4a3d;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  color: #cae3d6;
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.42rem 0.62rem;
}

.admin-alt-nav a.is-active {
  border-color: #43aa6c;
  background: rgba(76, 198, 122, 0.18);
  color: #e9fff1;
}

.admin-alt-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
}

.admin-alt-user-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.36rem;
  border: 1px solid #335244;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: #dff6e8;
  padding: 0.3rem 0.52rem;
  font-size: 0.75rem;
  font-weight: 800;
}

.admin-alt-user-pill small {
  border-left: 1px solid #456857;
  margin-left: 0.12rem;
  padding-left: 0.36rem;
  color: #9bc7b0;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.admin-alt-actions button {
  min-height: 34px;
  border: 1px solid #335446;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: #e7fff0;
  font-size: 0.76rem;
  font-weight: 800;
  padding: 0.42rem 0.66rem;
  display: inline-flex;
  align-items: center;
  gap: 0.36rem;
}

.admin-alt-actions button.is-secondary {
  color: #cbe4d8;
}

.admin-alt-actions #adminHeaderLogout {
  border-color: #58b17f;
  background: linear-gradient(180deg, #49b874, #2e8f57);
}

.admin-reset-gate {
  width: min(860px, 100%);
}

.admin-reset-app {
  width: min(1360px, 100%);
}

.admin-workspace-shell {
  display: grid;
  grid-template-columns: 332px minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.admin-workspace-sidebar {
  position: sticky;
  top: 86px;
}

.admin-workspace-menu-card {
  border: 1px solid #2a4539;
  border-radius: 20px;
  background:
    radial-gradient(circle at top right, rgba(89, 201, 138, 0.16), transparent 38%),
    linear-gradient(180deg, #1a2923, #121f1a);
  box-shadow: 0 18px 40px rgba(12, 28, 21, 0.35);
  padding: 1.04rem 0.96rem;
  display: grid;
  gap: 0.86rem;
}

.admin-workspace-menu-card.is-empty {
  min-height: 420px;
}

.admin-workspace-menu-card h2 {
  margin: -0.06rem 0 0;
  color: #e9fff3;
  font-size: 1.34rem;
  font-weight: 900;
}

.admin-workspace-menu-group {
  display: grid;
  gap: 0.44rem;
}

.admin-workspace-menu-group h3 {
  margin: 0;
  color: #9fd0b6;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.admin-workspace-menu-group a,
.admin-workspace-menu-group button {
  min-height: 38px;
  border: 1px solid #2e4d40;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  color: #dbf4e7;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.44rem;
  padding: 0.48rem 0.68rem;
  font-size: 0.84rem;
  font-weight: 700;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.admin-workspace-menu-group a:hover,
.admin-workspace-menu-group button:hover {
  border-color: #4db77b;
  background: rgba(86, 194, 130, 0.14);
}

.admin-workspace-link.is-active {
  border-color: #56c584;
  background: rgba(86, 194, 130, 0.22);
  color: #f1fff7;
  box-shadow: 0 0 0 1px rgba(98, 212, 143, 0.28);
}

.admin-workspace-link {
  width: 100%;
  justify-content: flex-start;
  appearance: none;
}

.admin-workspace-content {
  min-width: 0;
}

.admin-reset-card {
  border: 1px solid #d3e2d8;
  border-radius: 24px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbf9 100%);
  box-shadow: 0 20px 44px rgba(24, 56, 39, 0.11);
  padding: 1.2rem;
  display: grid;
  gap: 0.92rem;
}

.admin-reset-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.72rem;
}

.admin-reset-brand img {
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-radius: 12px;
}

.admin-reset-brand span {
  display: block;
  color: #3f7d5b;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.admin-reset-brand strong {
  display: block;
  color: #184f35;
  font-size: 1rem;
  font-weight: 900;
}

.admin-reset-card h1,
.admin-reset-card h2 {
  margin: 0;
  color: #15492f;
  font-size: 1.58rem;
  font-weight: 900;
}

.admin-reset-card p {
  margin: 0;
  color: #4f6b5d;
  font-size: 0.95rem;
  line-height: 1.62;
}

.admin-reset-user {
  display: inline-flex;
  width: fit-content;
  border: 1px solid #d7e7de;
  border-radius: 999px;
  background: #f6fbf8;
  color: #2f674a;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 0.36rem 0.68rem;
}

.admin-reset-form {
  display: grid;
  gap: 0.62rem;
}

.admin-reset-form label {
  color: #2d6247;
  font-size: 0.8rem;
  font-weight: 800;
}

.admin-reset-form input {
  width: 100%;
  min-height: 44px;
  border: 1px solid #cfe0d6;
  border-radius: 12px;
  background: #ffffff;
  color: #254b37;
  font-size: 0.92rem;
  font-weight: 700;
  padding: 0.62rem 0.78rem;
  outline: none;
}

.admin-reset-form input:focus {
  border-color: #31a45f;
  box-shadow: 0 0 0 3px rgba(65, 171, 106, 0.16);
}

.admin-reset-feedback {
  border-radius: 10px;
  border: 1px solid #d5e3da;
  background: #f6fbf8;
  color: #365f4a;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.52rem 0.62rem;
}

.admin-reset-feedback[data-tone="error"] {
  border-color: #ebcfcf;
  background: #fff5f5;
  color: #944646;
}

.admin-reset-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.52rem;
}

.admin-reset-actions button {
  min-height: 42px;
  border: 1px solid #2e9659;
  border-radius: 12px;
  background: linear-gradient(180deg, #45bb72, #2f975b);
  color: #ffffff;
  font-size: 0.83rem;
  font-weight: 800;
  padding: 0.56rem 0.86rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.admin-reset-actions button.is-secondary {
  border-color: #d3e2d8;
  background: #ffffff;
  color: #2d6247;
}

.admin-reset-kicker {
  display: inline-flex;
  width: fit-content;
  color: #3a7f5a;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.admin-reset-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.56rem;
}

.admin-reset-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  border: 1px solid #d7e7de;
  border-radius: 999px;
  background: #f7fcf9;
  color: #35654c;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 0.34rem 0.62rem;
}

.admin-view-block {
  display: none;
}

.admin-view-block.is-active {
  display: block;
}

.admin-products-card {
  gap: 0.84rem;
}

.admin-products-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.72rem;
}

.admin-products-head h2 {
  margin: 0.2rem 0 0;
}

.admin-products-head p {
  margin-top: 0.44rem;
  max-width: 760px;
}

.admin-products-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.48rem;
}

.admin-products-stats span {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  border: 1px solid #d7e7de;
  border-radius: 999px;
  background: #f7fcf9;
  color: #35654c;
  font-size: 0.81rem;
  font-weight: 800;
  padding: 0.34rem 0.64rem;
}

.admin-products-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.62rem;
}

.admin-products-filters label {
  display: grid;
  gap: 0.34rem;
  color: #35654c;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.admin-products-filters input,
.admin-products-filters select {
  width: 100%;
  min-height: 40px;
  border: 1px solid #cfe0d6;
  border-radius: 11px;
  background: #ffffff;
  color: #254b37;
  font-size: 0.88rem;
  font-weight: 700;
  padding: 0.48rem 0.62rem;
  outline: none;
}

.admin-products-filters input:focus,
.admin-products-filters select:focus {
  border-color: #31a45f;
  box-shadow: 0 0 0 3px rgba(65, 171, 106, 0.16);
}

.admin-products-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.52rem;
}

.admin-products-tools button {
  min-height: 38px;
  border: 1px solid #d3e2d8;
  border-radius: 11px;
  background: #ffffff;
  color: #2d6247;
  font-size: 0.8rem;
  font-weight: 800;
  font-family: inherit;
  padding: 0.44rem 0.72rem;
  display: inline-flex;
  align-items: center;
  gap: 0.36rem;
  cursor: pointer;
}

.admin-products-tools button:hover {
  border-color: #bee0cd;
  background: #f4fbf7;
}

.admin-products-list {
  display: grid;
  gap: 0.66rem;
}

.admin-product-row {
  border: 1px solid #d5e4db;
  border-radius: 14px;
  background: #ffffff;
  padding: 0.56rem;
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) 220px;
  gap: 0.68rem;
  align-items: center;
}

.admin-product-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  border: 1px solid #d7e4dc;
  object-fit: cover;
  display: block;
}

.admin-product-main {
  min-width: 0;
  display: grid;
  gap: 0.32rem;
}

.admin-product-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.62rem;
}

.admin-product-title-row h3 {
  margin: 0;
  color: #1f5f3f;
  font-size: 1rem;
  font-weight: 900;
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin-product-title-row h3 span {
  margin-left: 0.34rem;
  color: #6a8477;
  font-size: 0.8rem;
  font-weight: 800;
}

.admin-product-live-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #bfe1cb;
  border-radius: 999px;
  background: #eff9f3;
  color: #2f8f58;
  font-size: 0.71rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.25rem 0.56rem;
  white-space: nowrap;
}

.admin-product-subline {
  margin: 0;
  color: #557063;
  font-size: 0.83rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.admin-product-meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.34rem 0.6rem;
}

.admin-product-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: #667f73;
  font-size: 0.76rem;
  font-weight: 700;
}

.admin-product-actions {
  display: grid;
  gap: 0.42rem;
}

.admin-product-actions button,
.admin-product-actions a {
  min-height: 35px;
  border: 1px solid #d2dfd7;
  border-radius: 10px;
  background: #ffffff;
  color: #285c41;
  text-decoration: none;
  font-size: 0.79rem;
  font-weight: 800;
  font-family: inherit;
  padding: 0.4rem 0.62rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.34rem;
  cursor: pointer;
}

.admin-product-actions button:hover,
.admin-product-actions a:hover {
  border-color: #b8d8c5;
  background: #f3fbf6;
}

.admin-product-actions .is-danger {
  border-color: #e8c8c8;
  color: #8d4040;
  background: #fff8f8;
}

.admin-product-actions .is-danger:hover {
  border-color: #e1b8b8;
  background: #fff1f1;
}

.admin-products-empty {
  margin: 0;
  border: 1px dashed #cde0d5;
  border-radius: 12px;
  background: #f8fcfa;
  color: #5f7a6d;
  font-size: 0.86rem;
  font-weight: 700;
  text-align: center;
  padding: 0.92rem;
}

@media (max-width: 1280px) {
  .admin-products-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .admin-products-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-product-row {
    grid-template-columns: 144px minmax(0, 1fr);
  }

  .admin-product-actions {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .admin-products-filters {
    grid-template-columns: 1fr;
  }

  .admin-products-tools {
    justify-content: flex-start;
  }

  .admin-product-row {
    grid-template-columns: 1fr;
  }

  .admin-product-thumb {
    width: min(260px, 100%);
  }

  .admin-product-title-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .admin-product-actions {
    grid-template-columns: 1fr;
  }
}

.admin-panel-shell {
  max-width: 2240px;
  grid-template-columns: 350px minmax(0, 1fr);
  gap: 1.34rem;
  align-items: start;
}

.admin-panel-sidebar {
  position: sticky;
  top: 122px;
  align-self: start;
  max-height: calc(100vh - 136px);
  height: calc(100vh - 136px);
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  gap: 0.86rem;
  overflow: hidden;
}

.admin-sidebar-card {
  border: 1px solid #d7e6dc;
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(76, 184, 114, 0.1), transparent 36%),
    linear-gradient(180deg, #ffffff, #f9fdfb);
  box-shadow: 0 18px 40px rgba(18, 52, 32, 0.07);
  padding: 1rem 1rem 0.94rem;
  display: grid;
  gap: 0.72rem;
}

.admin-panel-sidebar .admin-sidebar-card {
  display: none !important;
}

.admin-sidebar-kicker,
.admin-page-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  color: #3c8b5b;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.admin-sidebar-card h2 {
  margin: -0.08rem 0 0;
  color: #174e35;
  font-size: 1.45rem;
  font-weight: 900;
}

.admin-sidebar-card p {
  margin: 0;
  color: #567062;
  font-size: 0.87rem;
  line-height: 1.65;
}

.admin-sidebar-identity {
  display: grid;
  gap: 0.72rem;
}

.admin-sidebar-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.admin-sidebar-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid #d9e8de;
  border-radius: 999px;
  background: #ffffff;
  color: #486d59;
  font-size: 0.74rem;
  font-weight: 800;
  padding: 0.32rem 0.56rem;
}

.admin-identity-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.78rem;
  align-items: center;
  border: 1px solid #dbe9e0;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.84);
  padding: 0.72rem;
}

.admin-identity-avatar {
  width: 60px;
  height: 60px;
  border-radius: 18px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--avatar-bg, #3fb96c);
  color: #ffffff;
}

.admin-identity-avatar.has-image img,
.admin-identity-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  max-width: 100%;
  max-height: 100%;
}

.admin-identity-copy {
  min-width: 0;
  display: grid;
  gap: 0.18rem;
}

.admin-identity-copy strong {
  color: #1a5738;
  font-size: 1rem;
  font-weight: 900;
}

.admin-identity-copy span {
  color: #627d6f;
  font-size: 0.8rem;
  font-weight: 700;
}

.admin-panel-content {
  min-width: 0;
  border: 1px solid #d2dee7;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 252, 249, 0.94));
  box-shadow: 0 22px 44px rgba(19, 51, 34, 0.07);
  padding: 1.22rem;
}

.admin-panel-head {
  align-items: flex-start;
  gap: 0.9rem;
}

.admin-section-nav {
  display: grid;
  gap: 0.48rem;
  min-height: 0;
  max-height: 100%;
  overflow: auto;
  padding-right: 0.14rem;
}

.admin-nav-search-shell {
  display: grid;
  gap: 0.34rem;
  border: 1px solid #d7e7dd;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fcf9 100%);
  padding: 0.66rem 0.7rem;
}

.admin-nav-search-shell label {
  color: #567365;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.admin-nav-search-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.48rem;
  border: 1px solid #d2e3d8;
  border-radius: 12px;
  background: #ffffff;
  padding: 0 0.2rem 0 0.56rem;
  min-height: 42px;
}

.admin-nav-search-row > i {
  color: #648275;
  font-size: 0.82rem;
}

.admin-nav-search-row input {
  width: 100%;
  border: 0;
  background: transparent;
  color: #2a523f;
  font-family: var(--font-ui);
  font-size: 0.84rem;
  font-weight: 700;
  min-height: 38px;
}

.admin-nav-search-row input:focus {
  outline: none;
}

.admin-nav-search-row button {
  width: 28px;
  height: 28px;
  border: 1px solid #d5e5db;
  border-radius: 999px;
  background: #ffffff;
  color: #5f7a6c;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease;
}

.admin-nav-search-row button:hover:not(:disabled) {
  background: #eff8f2;
  border-color: #c2ddcb;
  color: #245f3f;
}

.admin-nav-search-row button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.admin-section-directory {
  border: 1px solid #d8e8de;
  border-radius: 16px;
  background: #fbfefc;
  padding: 0.62rem 0.68rem;
  display: grid;
  gap: 0.44rem;
}

.admin-section-directory p {
  margin: 0;
  color: #5f7a6c;
  font-size: 0.78rem;
  line-height: 1.55;
}

.admin-section-empty {
  margin: 0;
  border: 1px dashed #cfe2d6;
  border-radius: 12px;
  background: #f8fcf9;
  color: #567264;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.45;
  padding: 0.62rem 0.66rem;
}

.admin-category-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.34rem;
}

.admin-category-chip-grid span {
  display: inline-flex;
  align-items: center;
  gap: 0.26rem;
  border: 1px solid #d5e5db;
  border-radius: 999px;
  background: #ffffff;
  color: #355f49;
  padding: 0.27rem 0.52rem;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.2;
}

.admin-section-group {
  display: grid;
  gap: 0.42rem;
}

.admin-section-group + .admin-section-group {
  margin-top: 0.16rem;
  padding-top: 0.34rem;
  border-top: 1px dashed #d4e4d9;
}

.admin-section-group-title {
  margin: 0;
  color: #6d8478;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-left: 0.18rem;
}

.admin-section-group-links {
  display: grid;
  gap: 0.44rem;
}

.admin-section-link {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.66rem;
  border: 1px solid #d6e4db;
  border-radius: 14px;
  background: #ffffff;
  color: #315e48;
  font-family: var(--font-ui);
  font-size: 0.88rem;
  font-weight: 800;
  padding: 0.72rem 0.8rem;
  cursor: pointer;
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    color 150ms ease,
    transform 150ms ease,
    box-shadow 150ms ease;
}

.admin-section-link:hover {
  border-color: #bfd8c9;
  background: #f5fbf7;
  color: #215c3c;
  transform: translateY(-1px);
}

.admin-section-link.is-active {
  border-color: #72b68a;
  background: linear-gradient(135deg, #e5f5ec, #f8fcf9);
  color: #1e6d44;
  box-shadow: 0 14px 26px rgba(38, 109, 68, 0.12);
}

.admin-section-link i {
  width: 18px;
  text-align: center;
  font-size: 0.92rem;
}

.admin-views {
  display: grid;
  gap: 1rem;
}

.admin-view {
  display: grid;
  gap: 1rem;
}

.admin-access-denied {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.96rem;
  align-items: center;
}

.admin-access-denied-icon {
  width: 62px;
  height: 62px;
  border-radius: 20px;
  background: linear-gradient(180deg, #ebf7ef, #f8fcf9);
  color: #2b7d50;
  display: grid;
  place-items: center;
  font-size: 1.35rem;
}

.admin-access-denied h2 {
  margin: 0;
  color: #1f5a3c;
}

.admin-access-denied p {
  margin: 0.3rem 0 0;
  color: #5f7a6c;
  line-height: 1.6;
}

body.admin-reauth-active {
  background: radial-gradient(circle at 12% 8%, rgba(62, 170, 103, 0.16), transparent 34%), #dfe7ed;
}

body.admin-reauth-active .admin-panel-page-main {
  filter: blur(2px) saturate(0.92);
  pointer-events: none;
  user-select: none;
}

body.admin-reauth-active .site-header {
  pointer-events: none;
}

.admin-reauth-gate {
  position: fixed;
  inset: 0;
  z-index: 160;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(8, 23, 14, 0.44);
  backdrop-filter: blur(8px);
}

.admin-reauth-card {
  width: min(540px, calc(100vw - 1rem));
  border: 1px solid #d4e4da;
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(76, 184, 114, 0.14), transparent 38%),
    linear-gradient(180deg, #ffffff 0%, #f7fbf9 100%);
  box-shadow: 0 32px 60px rgba(14, 37, 24, 0.3);
  padding: 1rem;
  display: grid;
  gap: 0.74rem;
}

.admin-reauth-brand {
  display: flex;
  align-items: center;
  gap: 0.66rem;
}

.admin-reauth-brand img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.admin-reauth-brand span {
  display: block;
  color: #5f7a6c;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.admin-reauth-brand strong {
  color: #1c5e3d;
  font-size: 1rem;
  font-weight: 900;
}

.admin-reauth-card h2 {
  margin: 0;
  color: #165137;
  font-size: 1.46rem;
  font-weight: 900;
  line-height: 1.18;
}

.admin-reauth-card > p {
  margin: 0;
  color: #607a6d;
  font-size: 0.84rem;
  line-height: 1.58;
}

.admin-reauth-form {
  display: grid;
  gap: 0.46rem;
}

.admin-reauth-form label {
  color: #4d675a;
  font-size: 0.78rem;
  font-weight: 800;
}

.admin-reauth-form input {
  width: 100%;
  border: 1px solid #cfdfd5;
  border-radius: 11px;
  background: #ffffff;
  color: #214837;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 700;
  min-height: 42px;
  padding: 0.62rem 0.72rem;
}

.admin-reauth-form input:focus {
  outline: none;
  border-color: #6eb887;
  box-shadow: 0 0 0 4px rgba(79, 173, 111, 0.15);
}

.admin-reauth-form input:disabled {
  background: #f2f6f3;
  color: #5f786b;
}

.admin-reauth-feedback {
  margin: 0.14rem 0 0;
  border: 1px solid #ecd9cf;
  border-radius: 10px;
  background: #fff8f5;
  color: #9d4f2e;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.45;
  padding: 0.52rem 0.6rem;
}

.admin-reauth-feedback[data-tone="success"] {
  border-color: #cde5d5;
  background: #f5fbf7;
  color: #255f3f;
}

.admin-reauth-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.16rem;
}

.admin-reauth-actions button {
  border: 1px solid #cedfd5;
  border-radius: 10px;
  background: #ffffff;
  color: #325e48;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.38rem;
  min-height: 40px;
  padding: 0.56rem 0.82rem;
  cursor: pointer;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.admin-reauth-actions button:hover:not(:disabled) {
  transform: translateY(-1px);
}

.admin-reauth-actions #adminReauthSubmit {
  border-color: #2f8f53;
  background: linear-gradient(145deg, #3ca962, #2d8f52);
  color: #ffffff;
}

.admin-reauth-actions #adminReauthSwitch:hover:not(:disabled) {
  border-color: #b7d8c4;
  background: #f4faf6;
  color: #1f5f3d;
}

.admin-reauth-actions button:disabled {
  opacity: 0.65;
  cursor: wait;
}

.admin-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.72rem;
}

.admin-kpi-card {
  border: 1px solid #d7e6dc;
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(77, 175, 109, 0.08), transparent 42%),
    #ffffff;
  padding: 0.9rem 0.94rem;
  display: grid;
  gap: 0.2rem;
  box-shadow: 0 12px 26px rgba(18, 52, 32, 0.05);
}

.admin-kpi-label {
  color: #71877b;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.admin-kpi-value {
  color: #1c5f3f;
  font-size: 1.45rem;
  font-weight: 900;
  line-height: 1.1;
}

.admin-kpi-meta {
  color: #617a6d;
  font-size: 0.77rem;
  line-height: 1.48;
}

.admin-activity-panel {
  margin-top: 0;
}

.admin-activity-feed {
  display: grid;
  gap: 0.58rem;
}

.admin-activity-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.76rem;
  align-items: start;
  border: 1px solid #d9e7de;
  border-radius: 15px;
  background: #fbfefc;
  padding: 0.78rem 0.84rem;
}

.admin-activity-item strong {
  display: block;
  color: #205c3d;
  font-size: 0.92rem;
  font-weight: 900;
}

.admin-activity-item p {
  margin: 0.18rem 0 0;
  color: #5d7769;
  font-size: 0.82rem;
  line-height: 1.55;
}

.admin-activity-item time {
  color: #708579;
  font-size: 0.74rem;
  font-weight: 800;
  white-space: nowrap;
}

.admin-activity-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.34rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-activity-badge.type-order,
.admin-activity-badge.type-payout {
  background: rgba(230, 189, 87, 0.12);
  border-color: rgba(198, 155, 44, 0.18);
  color: #8c681f;
}

.admin-activity-badge.type-support,
.admin-activity-badge.type-user {
  background: rgba(88, 124, 201, 0.12);
  border-color: rgba(88, 124, 201, 0.18);
  color: #426aab;
}

.admin-activity-badge.type-moderation,
.admin-activity-badge.type-coupon,
.admin-activity-badge.type-referral {
  background: rgba(63, 185, 108, 0.12);
  border-color: rgba(63, 185, 108, 0.18);
  color: #2d7f4e;
}

.admin-activity-badge.type-refund,
.admin-activity-badge.type-dispute {
  background: rgba(216, 116, 68, 0.12);
  border-color: rgba(216, 116, 68, 0.2);
  color: #9a4f2b;
}

.admin-two-column-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.72rem;
}

.admin-stack-list {
  margin-top: 0.72rem;
  display: grid;
  gap: 0.68rem;
}

.admin-stack-row {
  border: 1px solid #d8e6dc;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 253, 251, 0.94));
  box-shadow: 0 14px 30px rgba(17, 51, 32, 0.05);
  padding: 0.84rem 0.9rem;
  display: grid;
  gap: 0.7rem;
}

.admin-stack-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.78rem;
}

.admin-stack-head h3 {
  margin: 0;
  color: #1f6842;
  font-size: 1rem;
  font-weight: 900;
}

.admin-stack-head p {
  margin: 0.2rem 0 0;
  color: #657d70;
  font-size: 0.8rem;
  line-height: 1.45;
}

.admin-stack-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
}

.admin-stack-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  border: 1px solid #dbe8df;
  border-radius: 999px;
  background: #ffffff;
  color: #5a7467;
  padding: 0.32rem 0.56rem;
  font-size: 0.74rem;
  font-weight: 700;
}

.admin-stack-summary {
  margin: 0;
  color: #4d695a;
  font-size: 0.84rem;
  line-height: 1.58;
}

.admin-stack-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.48rem;
}

.admin-inline-field {
  display: grid;
  gap: 0.2rem;
}

.admin-inline-field span {
  color: #61796c;
  font-size: 0.71rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-inline-field select {
  min-width: 164px;
  border: 1px solid #ccdcd2;
  border-radius: 11px;
  background: #fbfefc;
  color: #264a38;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 800;
  padding: 0.64rem 0.76rem;
}

.admin-inline-field input {
  min-width: 120px;
  border: 1px solid #ccdcd2;
  border-radius: 11px;
  background: #fbfefc;
  color: #264a38;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 800;
  padding: 0.64rem 0.76rem;
}

.admin-inline-field select:focus,
.admin-inline-field input:focus,
.admin-inline-field textarea:focus {
  outline: none;
  border-color: #6db786;
  box-shadow: 0 0 0 4px rgba(77, 167, 106, 0.12);
}

.admin-inline-field textarea {
  border: 1px solid #ccdcd2;
  border-radius: 11px;
  background: #fbfefc;
  color: #264a38;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.5;
  padding: 0.64rem 0.76rem;
  resize: vertical;
  min-height: 96px;
}

.admin-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.38rem;
  min-height: 40px;
  border: 1px solid #d4e3da;
  border-radius: 12px;
  background: #ffffff;
  color: #2d5c45;
  padding: 0.64rem 0.88rem;
  font-size: 0.8rem;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    color 150ms ease,
    transform 150ms ease,
    box-shadow 150ms ease;
}

.admin-action-button:hover {
  border-color: #b9d7c5;
  background: #eff8f2;
  color: #21583a;
  transform: translateY(-1px);
}

.admin-action-button.is-primary {
  border-color: #2f9458;
  background: linear-gradient(180deg, #45bc72, #31985a);
  color: #ffffff;
  box-shadow: 0 12px 24px rgba(53, 164, 96, 0.18);
}

.admin-action-button.is-primary:hover {
  border-color: #2a874f;
  background: linear-gradient(180deg, #3aaf67, #2b8a51);
  color: #ffffff;
}

.admin-action-button.is-danger {
  border-color: #e0c2c2;
  background: #fff7f7;
  color: #a34141;
}

.admin-action-button.is-danger:hover {
  border-color: #d7a7a7;
  background: #fff0f0;
  color: #913535;
}

.admin-risk-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem;
}

.admin-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  border: 1px solid #d9e6de;
  border-radius: 999px;
  background: #fbfefc;
  color: #3b604f;
  padding: 0.5rem 0.68rem;
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.2;
}

.admin-switch input[type="checkbox"] {
  accent-color: #3ea96a;
}

.admin-catalog-grid {
  margin-top: 0.72rem;
  display: grid;
  gap: 0.66rem;
}

.admin-catalog-row {
  border: 1px solid #d8e6dc;
  border-radius: 16px;
  background: #ffffff;
  padding: 0.82rem 0.88rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.72rem;
  align-items: center;
}

.admin-catalog-main {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 0.68rem;
  align-items: center;
}

.admin-catalog-thumb {
  width: 88px;
  height: 56px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid #cadfd2;
  display: block;
}

.admin-catalog-main h3 {
  margin: 0;
  color: #1f6942;
  font-size: 0.98rem;
  font-weight: 900;
}

.admin-catalog-main p {
  margin: 0.18rem 0 0;
  color: #627c6f;
  font-size: 0.79rem;
}

.admin-catalog-controls {
  display: inline-flex;
  align-items: flex-end;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.46rem;
}

.admin-settings-panel {
  margin-top: 0;
}

.admin-settings-grid {
  margin-top: 0.8rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.62rem 0.78rem;
}

.admin-finance-panel {
  margin-top: 0.86rem;
}

.admin-finance-grid {
  margin-top: 0.68rem;
}

.admin-finance-switches {
  margin-top: 0.72rem;
}

.admin-finance-adjust-grid {
  margin-top: 0.72rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.64rem 0.76rem;
}

.admin-audit-list {
  margin-top: 0.74rem;
  display: grid;
  gap: 0.58rem;
}

.admin-audit-row {
  border: 1px solid #d8e6dc;
  border-radius: 14px;
  background: #ffffff;
  padding: 0.76rem 0.82rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.86rem;
  align-items: start;
}

.admin-audit-row.is-moderation {
  border-color: #d5e4da;
  background: linear-gradient(180deg, rgba(241, 250, 245, 0.68), #ffffff);
}

.admin-audit-row.is-finance {
  border-color: #d9e0ea;
  background: linear-gradient(180deg, rgba(242, 247, 255, 0.7), #ffffff);
}

.admin-audit-row.is-support {
  border-color: #e3dfd2;
  background: linear-gradient(180deg, rgba(255, 251, 242, 0.68), #ffffff);
}

.admin-audit-row.is-security {
  border-color: #d2e4ea;
  background: linear-gradient(180deg, rgba(238, 248, 255, 0.72), #ffffff);
}

.admin-audit-row.is-automation {
  border-color: #d7ddef;
  background: linear-gradient(180deg, rgba(244, 244, 255, 0.72), #ffffff);
}

.admin-audit-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.64rem;
}

.admin-audit-head h3 {
  margin: 0;
  color: #1f6743;
  font-size: 0.94rem;
  font-weight: 900;
}

.admin-audit-head span {
  color: #6b8073;
  font-size: 0.75rem;
  font-weight: 800;
}

.admin-audit-main p {
  margin: 0.4rem 0 0;
  color: #567062;
  font-size: 0.82rem;
  line-height: 1.56;
}

.admin-audit-meta {
  display: grid;
  gap: 0.42rem;
  align-content: start;
}

.admin-audit-meta span {
  border: 1px solid #dce9e0;
  border-radius: 999px;
  background: #fbfefc;
  color: #557567;
  padding: 0.38rem 0.62rem;
  font-size: 0.73rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
}

.admin-support-panel,
.admin-growth-panel {
  margin-top: 0;
}

.admin-security-panel,
.admin-automation-panel {
  margin-top: 0;
}

.admin-security-grid,
.admin-automation-grid {
  margin-top: 0.78rem;
}

.admin-automation-list {
  margin-top: 0.74rem;
  display: grid;
  gap: 0.6rem;
}

.admin-automation-row {
  border: 1px solid #d8e6dc;
  border-radius: 14px;
  background: #ffffff;
  padding: 0.8rem 0.84rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  box-shadow: 0 8px 18px rgba(19, 51, 34, 0.04);
}

.admin-automation-row.is-enabled {
  border-color: #c8e3d4;
  background: linear-gradient(180deg, rgba(242, 250, 246, 0.72), #ffffff);
}

.admin-automation-row.is-disabled {
  border-color: #dde5eb;
  background: linear-gradient(180deg, rgba(248, 251, 254, 0.72), #ffffff);
}

.admin-automation-main {
  min-width: 0;
}

.admin-automation-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.62rem;
}

.admin-automation-head h3 {
  margin: 0;
  color: #1f6743;
  font-size: 0.95rem;
  font-weight: 900;
}

.admin-automation-head span {
  border: 1px solid #d7e7dd;
  border-radius: 999px;
  background: #ffffff;
  color: #547264;
  font-size: 0.74rem;
  font-weight: 800;
  padding: 0.26rem 0.56rem;
  white-space: nowrap;
}

.admin-automation-main p {
  margin: 0.34rem 0 0;
  color: #597064;
  font-size: 0.82rem;
  line-height: 1.54;
}

.admin-support-grid {
  margin-top: 0.72rem;
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 0.8rem;
  align-items: start;
}

.admin-support-thread-list {
  display: grid;
  gap: 0.52rem;
}

.admin-support-thread-item {
  width: 100%;
  border: 1px solid #d8e6dc;
  border-radius: 16px;
  background: #ffffff;
  padding: 0.7rem 0.76rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.66rem;
  align-items: center;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    transform 150ms ease,
    box-shadow 150ms ease;
}

.admin-support-thread-item:hover {
  border-color: #bed8c8;
  background: #f8fcf9;
  transform: translateY(-1px);
}

.admin-support-thread-item.is-active {
  border-color: #85c39b;
  background: linear-gradient(180deg, #eef9f2, #fbfefc);
  box-shadow: 0 14px 28px rgba(38, 109, 68, 0.08);
}

.admin-support-thread-copy {
  min-width: 0;
  display: grid;
  gap: 0.16rem;
}

.admin-support-thread-copy strong,
.admin-support-thread-copy span,
.admin-support-thread-copy small {
  display: block;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-support-thread-copy strong {
  color: #1d5f3d;
  font-size: 0.88rem;
  font-weight: 900;
}

.admin-support-thread-copy span {
  color: #5d7669;
  font-size: 0.78rem;
  font-weight: 700;
}

.admin-support-thread-copy small {
  color: #72877c;
  font-size: 0.73rem;
}

.admin-support-thread-unread {
  min-width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #2fa05c;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 900;
}

.admin-support-thread-detail {
  min-width: 0;
}

.admin-support-detail-card {
  border: 1px solid #d8e6dc;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 14px 30px rgba(16, 48, 30, 0.06);
  padding: 0.92rem;
}

.admin-support-message-log {
  margin-top: 0.76rem;
  display: grid;
  gap: 0.54rem;
  max-height: 520px;
  overflow: auto;
  padding-right: 0.14rem;
}

.admin-support-message {
  max-width: min(680px, 100%);
  border: 1px solid #dbe8df;
  border-radius: 16px 16px 16px 6px;
  background: #fbfefc;
  padding: 0.68rem 0.74rem;
  margin-right: auto;
  display: grid;
  gap: 0.28rem;
}

.admin-support-message.is-mine {
  margin-left: auto;
  margin-right: 0;
  border-color: #bfe0ca;
  background: linear-gradient(180deg, #eef9f2, #fbfefc);
  border-radius: 16px 16px 6px 16px;
}

.admin-support-message-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.admin-support-message-head strong {
  color: #205b3d;
  font-size: 0.81rem;
  font-weight: 900;
}

.admin-support-message-head time {
  color: #6c8176;
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}

.admin-support-message-body {
  color: #4b6758;
  font-size: 0.84rem;
  line-height: 1.62;
}

.admin-support-reply-form {
  margin-top: 0.78rem;
  display: grid;
  gap: 0.72rem;
}

.admin-thumb-fallback {
  width: 100%;
  height: 100%;
  padding: 0.74rem;
  display: grid;
  place-content: center;
  gap: 0.34rem;
  text-align: center;
  color: #ffffff;
  background: linear-gradient(135deg, #2f7e4f, #45a86e);
}

.admin-thumb-fallback i {
  font-size: 1.16rem;
}

.admin-thumb-fallback span {
  font-size: 0.75rem;
  font-weight: 900;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.admin-thumb-fallback.tone-plugins {
  background: linear-gradient(135deg, #246245, #39a763);
}

.admin-thumb-fallback.tone-setups {
  background: linear-gradient(135deg, #275a71, #4098b2);
}

.admin-thumb-fallback.tone-builds {
  background: linear-gradient(135deg, #6e4b2f, #b67c3b);
}

.admin-thumb-fallback.tone-config {
  background: linear-gradient(135deg, #43606f, #6b94a8);
}

.admin-thumb-fallback.tone-textures {
  background: linear-gradient(135deg, #4b6e3e, #7fb34e);
}

.admin-header-copy {
  display: grid;
  gap: 0.08rem;
}

.admin-header-kicker {
  color: #6b8175;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.admin-header-copy strong {
  color: #1f5a3d;
  font-size: 1rem;
  font-weight: 900;
}

.admin-header-row {
  padding: 0 1rem 0.85rem;
}

.admin-header-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.52rem;
}

.admin-header-link {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  border: 1px solid #d8e5dc;
  border-radius: 999px;
  background: #ffffff;
  color: #315f48;
  text-decoration: none;
  padding: 0.6rem 0.82rem;
  font-size: 0.81rem;
  font-weight: 800;
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    transform 150ms ease,
    box-shadow 150ms ease;
}

.admin-header-link:hover {
  border-color: #bed8c8;
  background: #f6fbf8;
  transform: translateY(-1px);
}

.admin-header-link.is-active {
  border-color: #7fc196;
  background: linear-gradient(180deg, #eef9f2, #fbfefc);
  color: #1f6c44;
  box-shadow: 0 10px 18px rgba(38, 109, 68, 0.08);
}

.admin-header-link i {
  font-size: 0.84rem;
}

@media (max-width: 1280px) {
  .admin-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-support-grid {
    grid-template-columns: 280px minmax(0, 1fr);
  }
}

@media (max-width: 1120px) {
  .admin-panel-shell {
    grid-template-columns: 1fr;
  }

  .admin-panel-sidebar {
    position: static;
    height: auto;
    grid-template-rows: auto;
    overflow: visible;
  }

  .admin-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-support-grid {
    grid-template-columns: 1fr;
  }

  .admin-finance-adjust-grid,
  .admin-settings-grid,
  .admin-two-column-grid {
    grid-template-columns: 1fr;
  }

  .admin-audit-row {
    grid-template-columns: 1fr;
  }

  .admin-section-nav {
    max-height: none;
    overflow: visible;
  }

  .admin-reauth-card {
    width: min(620px, calc(100vw - 1rem));
  }
}

@media (max-width: 760px) {
  .admin-workspace-shell {
    grid-template-columns: 1fr;
  }

  .admin-workspace-sidebar {
    position: static;
  }

  .admin-alt-header-inner {
    width: min(100% - 1rem, 100%);
    grid-template-columns: 1fr;
    gap: 0.58rem;
    padding: 0.64rem 0;
  }

  .admin-alt-nav,
  .admin-alt-actions {
    justify-content: flex-start;
  }

  .admin-alt-user-pill {
    order: -1;
  }

  .admin-panel-page-main {
    padding: 0.82rem 0.72rem 1.2rem;
  }

  .admin-sidebar-card,
  .admin-kpi-card,
  .admin-stack-row,
  .admin-support-detail-card,
  .admin-dashboard-card,
  .admin-user-form-section {
    padding-left: 0.74rem;
    padding-right: 0.74rem;
  }

  .admin-kpi-grid {
    grid-template-columns: 1fr;
  }

  .admin-activity-item,
  .admin-stack-head {
    grid-template-columns: 1fr;
  }

  .admin-stack-head,
  .admin-stack-actions,
  .admin-support-message-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .admin-inline-field,
  .admin-inline-field select,
  .admin-action-button {
    width: 100%;
  }

  .admin-support-thread-item {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .admin-support-thread-unread {
    grid-column: 2;
    justify-self: start;
  }

  .admin-header-row {
    padding-left: 0.72rem;
    padding-right: 0.72rem;
  }

  .admin-header-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-header-link {
    justify-content: center;
  }

  .admin-risk-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-catalog-row {
    grid-template-columns: 1fr;
  }

  .admin-catalog-main {
    grid-template-columns: 1fr;
  }

  .admin-catalog-thumb {
    width: 100%;
    max-width: 160px;
  }

  .admin-catalog-controls,
  .admin-balance-quick-controls {
    width: 100%;
  }

  .admin-balance-quick-controls input {
    width: 100%;
  }

  .admin-audit-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .admin-automation-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .admin-nav-search-row {
    grid-template-columns: auto minmax(0, 1fr);
    padding-right: 0.5rem;
  }

  .admin-nav-search-row button {
    grid-column: 1 / -1;
    justify-self: end;
    margin-top: -0.1rem;
  }

  .admin-reauth-gate {
    padding: 0.58rem;
    align-content: start;
    overflow: auto;
  }

  .admin-reauth-card {
    width: 100%;
    border-radius: 16px;
    padding: 0.8rem 0.72rem;
  }

  .admin-reauth-actions {
    flex-direction: column;
  }

  .admin-reauth-actions button {
    width: 100%;
  }
}

.resource-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
}

.resource-modal.is-open {
  pointer-events: auto;
}

.resource-modal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(10, 25, 16, 0.42);
  opacity: 0;
  transition: opacity 180ms ease;
}

.resource-modal.is-open .resource-modal-backdrop {
  opacity: 1;
}

.resource-modal-panel {
  position: absolute;
  left: 50%;
  top: 7vh;
  transform: translateX(-50%) translateY(16px);
  width: min(760px, calc(100vw - 1.2rem));
  border: 1px solid #d3e4da;
  border-radius: 14px;
  background: #ffffff;
  padding: 0.76rem;
  box-shadow: 0 28px 50px rgba(14, 37, 24, 0.25);
  opacity: 0;
  transition: transform 210ms ease, opacity 210ms ease;
}

.resource-modal.is-open .resource-modal-panel {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.resource-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
}

.resource-modal-head h2 {
  margin: 0;
  color: #1f6f47;
  font-family: var(--font-brand);
  font-size: 1.42rem;
}

.resource-modal-close {
  border: 1px solid #d1dfd7;
  border-radius: 9px;
  background: #f7fbf8;
  color: #426754;
  width: 33px;
  height: 33px;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.resource-modal-close:hover {
  background: #edf6ef;
}

.resource-link-panel {
  width: min(560px, calc(100vw - 1.2rem));
}

.resource-team-panel {
  width: min(640px, calc(100vw - 1.2rem));
}

.resource-update-panel {
  width: min(860px, calc(100vw - 1.2rem));
}

.resource-update-panel input[readonly] {
  background: #f4faf6;
  color: #4e705e;
}

.resource-team-help {
  margin: 0.55rem 0 0;
  color: #4c6e5b;
  font-size: 0.82rem;
  line-height: 1.45;
}

.resource-team-list {
  margin-top: 0.56rem;
  display: grid;
  gap: 0.48rem;
  max-height: min(52vh, 440px);
  overflow: auto;
  padding-right: 0.16rem;
}

.resource-team-option {
  border: 1px solid #d5e5db;
  border-radius: 10px;
  background: #f9fdfb;
  padding: 0.54rem 0.6rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.54rem;
  align-items: start;
}

.resource-team-option input[type="radio"] {
  margin-top: 0.15rem;
  accent-color: #2f9d5d;
}

.resource-team-option strong {
  color: #1f6f47;
  font-size: 0.9rem;
}

.resource-team-option-meta {
  margin-top: 0.16rem;
  color: #5d7767;
  font-size: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.36rem;
}

.resource-team-empty {
  margin: 0.2rem 0 0;
  border: 1px dashed #cdded4;
  border-radius: 10px;
  background: #f7fcf8;
  color: #547365;
  font-size: 0.79rem;
  line-height: 1.5;
  padding: 0.68rem 0.72rem;
}

.resource-team-actions {
  margin-top: 0.66rem;
}

.resource-link-form {
  margin-top: 0.62rem;
  display: grid;
  gap: 0.56rem;
}

.resource-link-form .creator-hub-field {
  gap: 0.24rem;
}

.resource-link-form .creator-hub-field span {
  color: #486a58;
  font-size: 0.76rem;
  font-weight: 800;
}

.resource-link-form .creator-hub-field input {
  border: 1px solid #cfdfd5;
  border-radius: 8px;
  background: #fbfefc;
  color: #244637;
  font-family: var(--font-ui);
  font-size: 0.84rem;
  font-weight: 600;
  min-height: 40px;
  padding: 0.48rem 0.6rem;
}

.resource-link-form .creator-hub-field input:focus {
  outline: none;
  border-color: #93cdab;
  box-shadow: 0 0 0 3px rgba(74, 171, 106, 0.16);
}

.resource-link-help {
  margin: 0;
  border: 1px solid #d6e7dd;
  border-radius: 8px;
  background: #f6fcf8;
  color: #446a57;
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.45;
  padding: 0.52rem 0.58rem;
}

.resource-emoji-modal-panel {
  width: min(440px, calc(100vw - 1.2rem));
}

.resource-emoji-modal-grid {
  margin-top: 0.62rem;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 0.34rem;
  max-height: min(54vh, 360px);
  overflow: auto;
  padding-right: 0.12rem;
}

.resource-emoji-modal-grid button {
  border: 1px solid #d5e5dc;
  border-radius: 8px;
  background: #f7fcf8;
  min-height: 36px;
  cursor: pointer;
  font-size: 1.06rem;
  line-height: 1;
}

.resource-emoji-modal-grid button:hover {
  background: #ecf6ef;
  border-color: #b9d7c6;
}

.resource-form {
  margin-top: 0.58rem;
}

.resource-form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.56rem;
}

.resource-form-grid .creator-hub-field {
  gap: 0.24rem;
}

.resource-form-grid .creator-hub-field span {
  color: #4e705e;
  font-size: 0.75rem;
  font-weight: 700;
}

.resource-form-grid .creator-hub-field input,
.resource-form-grid .creator-hub-field textarea,
.resource-form-grid .creator-hub-field select {
  border: 1px solid #cfdfd5;
  border-radius: 8px;
  background: #fbfefc;
  color: #244637;
  font-family: var(--font-ui);
  font-size: 0.81rem;
  font-weight: 600;
  padding: 0.47rem 0.53rem;
}

.resource-form-grid .creator-hub-field textarea {
  resize: vertical;
  min-height: 66px;
}

.resource-form-grid .creator-hub-field input:focus,
.resource-form-grid .creator-hub-field textarea:focus,
.resource-form-grid .creator-hub-field select:focus {
  outline: none;
  border-color: #93cdab;
  box-shadow: 0 0 0 3px rgba(74, 171, 106, 0.16);
}

.resource-form-wide {
  grid-column: 1 / -1;
}

.resource-form-actions {
  margin-top: 0.56rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.4rem;
}

.resource-cancel,
.resource-save {
  border-radius: 8px;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  min-height: 36px;
  padding: 0.44rem 0.74rem;
}

.resource-cancel {
  border: 1px solid #d1ded7;
  background: #f7fbf8;
  color: #3a5f4c;
}

.resource-cancel:hover {
  background: #edf5ef;
}

.resource-save {
  border: 1px solid #2f9254;
  background: linear-gradient(140deg, #46bf72, #2f9d5d);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
}

.resource-save:hover {
  background: linear-gradient(140deg, #39ad66, #27864c);
}

.resource-editor-content {
  overflow: visible;
  padding: 1.18rem;
  border-radius: 14px;
}

.resource-editor-content .creator-hub-overview-title {
  font-size: 2rem;
}

.resource-editor-content .creator-overview-intro {
  font-size: 0.93rem;
  max-width: 920px;
}

.resource-editor-back {
  min-height: 43px;
}

.resource-editor-content .creator-hub-kb,
.resource-editor-content .resource-save {
  min-height: 43px;
  font-size: 0.88rem;
  padding: 0.56rem 0.92rem;
}

.resource-editor-page-main {
  padding: 1.15rem;
}

.resource-editor-shell {
  max-width: 1980px;
  grid-template-columns: minmax(0, 1fr);
}

.resource-editor-grid {
  margin-top: 0.9rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 0.82rem;
  align-items: start;
}

.resource-editor-main {
  margin-top: 0;
  padding: 0;
  overflow: hidden;
}

.resource-editor-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  border-bottom: 1px solid #d8e6dc;
  background: linear-gradient(180deg, #f8fcfa, #f4faf6);
}

.resource-editor-tabs button {
  border: 0;
  border-right: 1px solid #d8e6dc;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #4a6658;
  font-family: var(--font-ui);
  font-size: 0.92rem;
  font-weight: 800;
  padding: 0.68rem 0.9rem;
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.resource-editor-tabs button:hover {
  background: #edf7f0;
  color: #2d6245;
}

.resource-editor-tabs button.is-active {
  color: #1f6f47;
  background: #ffffff;
  border-bottom-color: #38aa66;
}

.resource-editor-form {
  padding: 0.94rem;
}

.resource-editor-tab-panel {
  display: none;
  gap: 0;
}

.resource-editor-tab-panel.is-active {
  display: block;
}

.resource-editor-row {
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
  border-top: 1px solid #e3ece6;
  align-items: start;
}

.resource-editor-tab-panel .resource-editor-row:first-child {
  border-top: 0;
}

[data-editor-panel="filtering"] .resource-editor-row {
  border-top: 0;
  border: 1px solid #e2ebe6;
  border-radius: 10px;
  margin-bottom: 0.56rem;
  background: #fcfffd;
  overflow: hidden;
}

[data-editor-panel="filtering"] .resource-editor-row:last-child {
  margin-bottom: 0;
}

[data-editor-panel="filtering"] .resource-editor-label,
[data-editor-panel="filtering"] .resource-editor-input-wrap {
  padding-top: 0.86rem;
  padding-bottom: 0.86rem;
}

[data-editor-panel="filtering"] .resource-editor-chip-grid {
  gap: 0.5rem;
}

.resource-editor-label {
  padding: 0.78rem 0.78rem;
  color: #486b5a;
  font-size: 0.89rem;
  font-weight: 800;
}

.resource-editor-input-wrap {
  padding: 0.72rem 0.78rem;
  border-left: 1px solid #e3ece6;
  display: grid;
  gap: 0.5rem;
}

.resource-editor-input-wrap input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.resource-editor-input-wrap textarea,
.resource-editor-input-wrap select {
  border: 1px solid #cfdfd5;
  border-radius: 8px;
  background: #fbfefc;
  color: #244637;
  font-family: var(--font-ui);
  font-size: 0.89rem;
  font-weight: 700;
  padding: 0.58rem 0.64rem;
}

.resource-editor-input-wrap input[type="file"],
.resource-addon-field input[type="file"] {
  width: 100%;
  border: 1px dashed #b8d2c1;
  border-radius: 10px;
  background:
    linear-gradient(180deg, #fbfefc 0%, #f4faf6 100%);
  color: #2f5845;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.34rem 0.38rem;
  cursor: pointer;
}

.resource-editor-input-wrap input[type="file"]::file-selector-button,
.resource-addon-field input[type="file"]::file-selector-button {
  border: 1px solid #b7d4c2;
  border-radius: 8px;
  background: linear-gradient(180deg, #f8fcf9 0%, #eaf6ee 100%);
  color: #246946;
  font-family: var(--font-ui);
  font-size: 0.79rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  padding: 0.44rem 0.76rem;
  margin-right: 0.52rem;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.resource-editor-input-wrap input[type="file"]::-webkit-file-upload-button,
.resource-addon-field input[type="file"]::-webkit-file-upload-button {
  border: 1px solid #b7d4c2;
  border-radius: 8px;
  background: linear-gradient(180deg, #f8fcf9 0%, #eaf6ee 100%);
  color: #246946;
  font-family: var(--font-ui);
  font-size: 0.79rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  padding: 0.44rem 0.76rem;
  margin-right: 0.52rem;
  cursor: pointer;
}

.resource-editor-input-wrap input[type="file"]:hover,
.resource-addon-field input[type="file"]:hover {
  border-color: #9dc8ad;
  background: linear-gradient(180deg, #f7fcf9 0%, #edf7f1 100%);
}

.resource-editor-input-wrap input[type="file"]:hover::file-selector-button,
.resource-addon-field input[type="file"]:hover::file-selector-button,
.resource-editor-input-wrap input[type="file"]:hover::-webkit-file-upload-button,
.resource-addon-field input[type="file"]:hover::-webkit-file-upload-button {
  border-color: #97c6ac;
  background: linear-gradient(180deg, #f3faf6 0%, #dff0e6 100%);
  color: #1f5c3d;
}

.resource-editor-input-wrap input[type="file"]:focus,
.resource-addon-field input[type="file"]:focus {
  outline: none;
  border-color: #93cdab;
  box-shadow: 0 0 0 3px rgba(74, 171, 106, 0.16);
}

.resource-editor-input-wrap input[type="file"].is-invalid,
.resource-addon-field input[type="file"].is-invalid {
  border-color: #d66a6a;
  box-shadow: 0 0 0 3px rgba(214, 106, 106, 0.14);
}

.resource-file-picker {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.48rem;
  border: 1px dashed #b8d2c1;
  border-radius: 10px;
  background: linear-gradient(180deg, #fbfefc 0%, #f4faf6 100%);
  padding: 0.34rem 0.38rem;
  min-height: 42px;
}

.resource-file-picker:hover {
  border-color: #9dc8ad;
  background: linear-gradient(180deg, #f7fcf9 0%, #edf7f1 100%);
}

.resource-file-picker:focus-within {
  border-color: #93cdab;
  box-shadow: 0 0 0 3px rgba(74, 171, 106, 0.16);
}

.resource-file-picker.is-invalid {
  border-color: #d66a6a;
  box-shadow: 0 0 0 3px rgba(214, 106, 106, 0.14);
}

.resource-file-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.resource-file-trigger {
  border: 1px solid #b7d4c2;
  border-radius: 8px;
  background: linear-gradient(180deg, #f8fcf9 0%, #eaf6ee 100%);
  color: #246946;
  font-family: var(--font-ui);
  font-size: 0.79rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  min-height: 32px;
  padding: 0.44rem 0.76rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.36rem;
  white-space: nowrap;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.resource-file-picker:hover .resource-file-trigger,
.resource-file-trigger:focus-visible {
  border-color: #97c6ac;
  background: linear-gradient(180deg, #f3faf6 0%, #dff0e6 100%);
  color: #1f5c3d;
  outline: none;
}

.resource-file-picker.is-invalid .resource-file-trigger {
  border-color: #d48a8a;
  color: #8d3f3f;
}

.resource-file-value {
  min-width: 0;
  color: #5b7468;
  font-size: 0.79rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.resource-file-value.is-selected {
  color: #2f664a;
}

.resource-editor-input-wrap textarea {
  resize: vertical;
  min-height: 100px;
}

.resource-editor-input-wrap input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
.resource-editor-input-wrap textarea:focus,
.resource-editor-input-wrap select:focus {
  outline: none;
  border-color: #93cdab;
  box-shadow: 0 0 0 3px rgba(74, 171, 106, 0.16);
}

.resource-editor-input-wrap input:not([type="checkbox"]):not([type="radio"]):not([type="file"]).is-invalid,
.resource-editor-input-wrap textarea.is-invalid,
.resource-editor-input-wrap select.is-invalid {
  border-color: #d66a6a;
  box-shadow: 0 0 0 3px rgba(214, 106, 106, 0.14);
}

.resource-editor-help {
  margin: 0;
  color: #597565;
  font-size: 0.81rem;
  line-height: 1.45;
}

.resource-editor-help.is-error {
  color: #bc4747;
  font-weight: 700;
}

.resource-editor-help.is-success {
  color: #2f8e56;
  font-weight: 700;
}

.resource-carousel-mini-list {
  margin-top: 0.12rem;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 118px;
  justify-content: start;
  gap: 0.46rem;
  overflow-x: auto;
  padding-bottom: 0.08rem;
}

.resource-carousel-mini-item {
  margin: 0;
  position: relative;
  width: 118px;
  border: 1px solid #d4e5dc;
  border-radius: 10px;
  overflow: hidden;
  background: #edf5ef;
  aspect-ratio: 16 / 9;
}

.resource-carousel-mini-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.resource-carousel-mini-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 999px;
  background: rgba(15, 31, 24, 0.66);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.72rem;
  transition: background-color 140ms ease, transform 140ms ease;
}

.resource-carousel-mini-remove:hover {
  background: rgba(14, 72, 45, 0.9);
  transform: translateY(-1px);
}

.resource-carousel-mini-item figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0.26rem 0.42rem;
  color: #eef8f1;
  font-size: 0.67rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: linear-gradient(180deg, transparent 0%, rgba(9, 27, 17, 0.82) 76%);
}

.resource-editor-dependencies-note {
  margin-top: -0.04rem;
  padding: 0.46rem 0.54rem;
  border: 1px solid #d9e7de;
  border-radius: 8px;
  background: #f8fcf9;
  color: #476957;
  font-size: 0.78rem;
}

.resource-rich-editor {
  position: relative;
  border: 1px solid #cfdfd5;
  border-radius: 10px;
  background: #ffffff;
  overflow: hidden;
}

.resource-rich-toolbar {
  border-bottom: 1px solid #dbe8df;
  background: linear-gradient(180deg, #f8fcfa, #f2f8f4);
  padding: 0.4rem 0.44rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.28rem;
}

.resource-rich-toolbar button,
.resource-rich-toolbar select,
.resource-rich-toolbar input[type="color"] {
  border: 1px solid #cfe0d5;
  border-radius: 7px;
  background: #ffffff;
  color: #2f5844;
  min-height: 30px;
  font-family: var(--font-ui);
  font-size: 0.76rem;
  font-weight: 700;
}

.resource-rich-toolbar button {
  min-width: 31px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0.34rem 0.42rem;
}

.resource-rich-toolbar button:hover,
.resource-rich-toolbar select:hover,
.resource-rich-toolbar input[type="color"]:hover {
  background: #eef7f1;
}

.resource-rich-toolbar button:focus,
.resource-rich-toolbar select:focus,
.resource-rich-toolbar input[type="color"]:focus {
  outline: none;
  border-color: #93cdab;
  box-shadow: 0 0 0 3px rgba(74, 171, 106, 0.16);
}

.resource-rich-toolbar select {
  padding: 0.26rem 0.42rem;
}

.resource-rich-toolbar input[type="color"] {
  width: 34px;
  min-width: 34px;
  padding: 2px;
  cursor: pointer;
}

.resource-emoji-picker {
  position: absolute;
  top: 42px;
  left: 0.48rem;
  z-index: 12;
  border: 1px solid #cfe0d5;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 16px 34px rgba(19, 44, 30, 0.2);
  padding: 0.38rem;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 0.28rem;
  width: min(322px, calc(100% - 0.96rem));
}

.resource-emoji-picker[hidden] {
  display: none !important;
}

.resource-emoji-picker button {
  border: 1px solid #d5e5dc;
  border-radius: 8px;
  background: #f7fcf8;
  min-height: 32px;
  cursor: pointer;
  font-size: 1.02rem;
  line-height: 1;
}

.resource-emoji-picker button:hover {
  background: #ecf6ef;
  border-color: #b9d7c6;
}

.resource-rich-area {
  min-height: 210px;
  max-height: 560px;
  overflow: auto;
  padding: 0.62rem 0.66rem;
  color: #244637;
  font-family: var(--font-ui);
  font-size: 0.89rem;
  line-height: 1.55;
  white-space: pre-wrap;
}

.resource-rich-area[data-placeholder]:empty::before {
  content: attr(data-placeholder);
  color: #88a097;
  pointer-events: none;
}

.resource-rich-area:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(74, 171, 106, 0.14);
}

.resource-rich-area img {
  max-width: min(100%, 620px);
  height: auto;
  border-radius: 8px;
}

.resource-rich-area a {
  color: #1f7e49;
  text-decoration: underline;
}

.resource-rich-area pre {
  background: #f4f9f6;
  border: 1px solid #d8e8df;
  border-radius: 8px;
  padding: 0.52rem;
  overflow: auto;
}

.resource-editor-inline-check {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  color: #355947;
  font-size: 0.84rem;
  font-weight: 800;
}

.resource-editor-inline-check + .resource-editor-inline-check {
  margin-top: -0.1rem;
}

.resource-editor-inline-check input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #2f9d5d;
}

.resource-editor-cover-preview {
  position: relative;
  border: 1px solid #cfdfd5;
  border-radius: 10px;
  background:
    linear-gradient(150deg, rgba(69, 191, 114, 0.92), rgba(32, 96, 59, 0.95));
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 0;
  padding: 0.9rem;
  display: grid;
  align-content: end;
  gap: 0.26rem;
  color: #ffffff;
  overflow: hidden;
}

.resource-editor-cover-preview::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--resource-cover-bg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #102318;
  opacity: 0;
  transition: opacity 180ms ease;
}

.resource-editor-cover-preview.is-image::before {
  opacity: 1;
}

.resource-editor-cover-preview span,
.resource-editor-cover-preview strong {
  position: relative;
  z-index: 1;
}

.resource-editor-cover-preview span {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.44);
  padding: 0.16rem 0.52rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.resource-editor-cover-preview strong {
  font-size: 1.16rem;
  line-height: 1.32;
}

.resource-editor-chip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 0.46rem;
}

.resource-custom-link-row {
  display: grid;
  grid-template-columns: minmax(190px, 0.44fr) minmax(0, 1fr);
  gap: 0.42rem;
}

.resource-editor-chip-grid label {
  border: 1px solid #d1e2d8;
  border-radius: 10px;
  background: #f8fcf9;
  color: #365a47;
  font-size: 0.81rem;
  font-weight: 800;
  padding: 0.38rem 0.54rem;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  width: 100%;
  gap: 0.44rem;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease, transform 140ms ease;
}

.resource-editor-chip-grid label:hover {
  border-color: #bad7c7;
  background: #f2f9f5;
  color: #274b3a;
}

.resource-editor-chip-grid label:has(input:checked) {
  border-color: #79b995;
  background: #eaf7ef;
  color: #1f5038;
}

.resource-editor-chip-grid input {
  width: 16px;
  height: 16px;
  margin: 0;
  flex: 0 0 auto;
  accent-color: #2f9d5d;
}

.resource-addons-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.48rem;
  flex-wrap: wrap;
}

.resource-addons-counter {
  color: #4e6d5c;
  font-size: 0.78rem;
  font-weight: 800;
}

.resource-addons-list {
  display: grid;
  gap: 0.54rem;
}

.resource-addons-empty {
  margin: 0;
  border: 1px dashed #cfe0d5;
  border-radius: 9px;
  background: #f7fcf9;
  color: #557564;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.64rem 0.7rem;
}

.resource-addon-item {
  border: 1px solid #d5e5dc;
  border-radius: 10px;
  background: #fbfefc;
  padding: 0.58rem 0.62rem;
  display: grid;
  gap: 0.5rem;
}

.resource-addon-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.resource-addon-head h4 {
  margin: 0;
  color: #1f6f47;
  font-size: 0.86rem;
  font-weight: 800;
}

.resource-addon-remove {
  border: 1px solid #d4e2da;
  border-radius: 7px;
  background: #f8fbf9;
  color: #4d695b;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 800;
  min-height: 30px;
  padding: 0.34rem 0.56rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
}

.resource-addon-remove:hover {
  background: #eef6f1;
}

.resource-addon-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.48rem 0.56rem;
}

.resource-addon-field {
  display: grid;
  gap: 0.28rem;
}

.resource-addon-field-wide {
  grid-column: 1 / -1;
}

.resource-addon-field span {
  color: #4a685a;
  font-size: 0.76rem;
  font-weight: 800;
}

.resource-addon-file-meta {
  margin: -0.1rem 0 0;
}

.resource-editor-actions {
  margin-top: 0.9rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.42rem;
}

.resource-editor-secondary {
  border: 1px solid #d1ded7;
  border-radius: 8px;
  background: #f7fbf8;
  color: #3a5f4c;
  font-family: var(--font-ui);
  font-size: 0.88rem;
  font-weight: 800;
  min-height: 42px;
  padding: 0.54rem 0.92rem;
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  cursor: pointer;
}

.resource-editor-secondary:hover {
  background: #edf5ef;
}

.resource-editor-side {
  display: grid;
  gap: 0.56rem;
  position: sticky;
  top: 94px;
}

.resource-editor-side-card {
  border: 1px solid #d7e6dc;
  border-radius: 12px;
  background: #ffffff;
  padding: 0.58rem;
}

.resource-editor-side-card h3 {
  margin: 0;
  color: #1f6f47;
  font-size: 0.96rem;
}

.resource-editor-side-card p {
  margin: 0.34rem 0 0;
  color: #5f7a8f;
  font-size: 0.76rem;
  line-height: 1.45;
}

.resource-editor-side-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
}

.resource-editor-preview-btn {
  border: 1px solid #d0ded6;
  border-radius: 8px;
  background: #f8fcf9;
  color: #355947;
  font-family: var(--font-ui);
  font-size: 0.76rem;
  font-weight: 800;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.33rem;
  cursor: pointer;
}

.resource-editor-preview-btn:hover {
  background: #eef7f1;
}

.resource-editor-side-actions .creator-hub-kb {
  justify-content: center;
  padding-inline: 0.4rem;
}

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

.resource-editor-checklist {
  margin: 0.48rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.16rem;
}

.resource-editor-checklist button {
  border: 0;
  background: transparent;
  color: inherit;
  width: 100%;
  font-family: var(--font-ui);
  font-size: 0.76rem;
  text-align: left;
  padding: 0.22rem 0;
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  cursor: pointer;
}

.resource-editor-checklist li.is-done {
  color: #215f3b;
}

.resource-editor-checklist li.is-missing {
  color: #7a5c26;
}

.resource-editor-label .resource-required-star {
  color: #d83b34;
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1;
  margin-left: 0.16rem;
}

.resource-editor-side-link {
  border: 1px solid #d2e1d8;
  border-radius: 9px;
  background: #f8fcf9;
  color: #315843;
  text-decoration: none;
  font-size: 0.76rem;
  font-weight: 800;
  min-height: 36px;
  padding: 0.42rem 0.54rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.34rem;
  width: 100%;
}

.resource-editor-side-link:hover {
  background: #eef7f1;
}

.resource-editor-side-note {
  margin: 0.42rem 0 0;
  color: #4f6f5e;
  font-size: 0.74rem;
  line-height: 1.44;
}

.resource-editor-side-highlight {
  background: linear-gradient(180deg, #f9fdfb, #f3faf6);
}

.resource-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 95;
  pointer-events: none;
}

.resource-preview-modal.is-open {
  pointer-events: auto;
}

.resource-preview-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(8, 22, 14, 0.42);
  opacity: 0;
  transition: opacity 180ms ease;
}

.resource-preview-modal.is-open .resource-preview-backdrop {
  opacity: 1;
}

.resource-preview-panel {
  position: absolute;
  left: 50%;
  top: 7vh;
  transform: translateX(-50%) translateY(14px);
  width: min(1200px, calc(100vw - 1.3rem));
  border: 1px solid #d3e4da;
  border-radius: 13px;
  background: #ffffff;
  padding: 0.9rem;
  box-shadow: 0 26px 48px rgba(14, 37, 24, 0.24);
  opacity: 0;
  transition: transform 220ms ease, opacity 220ms ease;
}

.resource-preview-modal.is-open .resource-preview-panel {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.resource-preview-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.7rem;
}

.resource-preview-head h2 {
  margin: 0;
  color: #1f6f47;
  font-family: var(--font-brand);
  font-size: 1.38rem;
}

.resource-preview-close {
  border: 1px solid #d1dfd7;
  border-radius: 9px;
  background: #f7fbf8;
  color: #426754;
  width: 33px;
  height: 33px;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.resource-preview-close:hover {
  background: #edf6ef;
}

.resource-preview-card {
  margin-top: 0.62rem;
}

.resource-view-main {
  min-height: calc(100vh - 112px);
  padding: 1rem 1rem 1.9rem;
}

.resource-view-shell {
  display: grid;
  gap: 0.78rem;
}

.referral-visit-banner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9rem;
  align-items: center;
  border: 1px solid #d8e7de;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(238, 249, 242, 0.98), rgba(249, 253, 250, 0.96));
  box-shadow: 0 18px 34px rgba(41, 92, 61, 0.08);
  padding: 0.95rem 1.05rem;
}

.referral-visit-banner-icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: #1f6a40;
  background: linear-gradient(135deg, #dff1e5, #eff9f2);
  border: 1px solid #cfe3d5;
  font-size: 1rem;
}

.referral-visit-banner-copy {
  display: grid;
  gap: 0.32rem;
  min-width: 0;
}

.referral-visit-banner-copy strong {
  color: #1c5b39;
  font-size: 0.95rem;
  font-weight: 800;
}

.referral-visit-banner-copy p {
  margin: 0;
  color: #5c7166;
  font-size: 0.88rem;
  line-height: 1.5;
}

.referral-visit-banner-copy p span {
  color: #285f41;
  font-weight: 700;
}

.referral-visit-banner-copy code {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  padding: 0.38rem 0.62rem;
  border-radius: 999px;
  border: 1px solid #d6e7db;
  background: rgba(255, 255, 255, 0.88);
  color: #21583a;
  font-size: 0.8rem;
  font-weight: 700;
  word-break: break-all;
}

.resource-view-breadcrumb {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.34rem;
  color: #5c7488;
  font-size: 0.78rem;
  font-weight: 700;
}

.resource-view-breadcrumb a {
  color: #2f8c58;
  text-decoration: none;
}

.resource-view-breadcrumb a:hover {
  text-decoration: underline;
}

.resource-view-breadcrumb strong {
  color: #2c4f3d;
}

.resource-view-head {
  border: 1px solid #d3e3d9;
  border-radius: 14px;
  background:
    radial-gradient(circle at 82% -20%, rgba(112, 204, 146, 0.2), transparent 46%),
    radial-gradient(circle at 8% 120%, rgba(96, 180, 129, 0.14), transparent 44%),
    linear-gradient(180deg, #f9fdfa, #f4faf6);
  padding: 0.88rem 0.94rem;
}

.resource-view-head-main {
  display: grid;
  gap: 0.34rem;
}

.resource-view-head-main > p {
  margin: 0;
  color: #4c6b7f;
  font-size: 0.91rem;
  line-height: 1.5;
}

.resource-view-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.48rem 0.86rem;
  color: #3f6074;
  font-size: 0.81rem;
  font-weight: 700;
}

.resource-view-meta-row span {
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
}

.resource-view-meta-row i {
  color: #2f9d5d;
  width: 14px;
  text-align: center;
}

.resource-view-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.96fr) minmax(278px, 0.94fr);
  gap: 0.8rem;
  align-items: start;
}

.resource-view-content,
.resource-view-side {
  display: grid;
  gap: 0.64rem;
}

.resource-view-stage {
  border: 1px solid #d4e4db;
  border-radius: 14px;
  background: #ffffff;
  overflow: hidden;
}

.resource-view-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  border-bottom: 1px solid #dbe8df;
  background: linear-gradient(180deg, #f8fcfa, #f3faf6);
}

.resource-view-tabs button {
  border: 0;
  border-right: 1px solid #dbe8df;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #4b6759;
  font-family: var(--font-ui);
  font-size: 0.86rem;
  font-weight: 800;
  min-height: 42px;
  padding: 0.52rem 0.8rem;
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.resource-view-tabs button:hover {
  background: #edf7f0;
  color: #2d6245;
}

.resource-view-tabs button.is-active {
  color: #1f6f47;
  background: #ffffff;
  border-bottom-color: #38aa66;
}

.resource-view-link-tabs {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.32rem;
  padding: 0.36rem 0.46rem;
}

.resource-view-link-tabs a {
  border: 1px solid #d4e3da;
  border-radius: 8px;
  background: #f8fcf9;
  color: #406151;
  text-decoration: none;
  font-size: 0.74rem;
  font-weight: 800;
  min-height: 30px;
  padding: 0.2rem 0.54rem;
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
}

.resource-view-link-tabs a:hover {
  background: #eef7f1;
}

.resource-view-stage-body {
  padding: 0.68rem;
}

.resource-view-pane {
  display: none;
  gap: 0.64rem;
}

.resource-view-pane.is-active {
  display: grid;
}

.resource-view-media-title {
  margin: 0;
  color: #1e613f;
  font-family: var(--font-brand);
  font-size: clamp(1.32rem, 2.1vw, 1.8rem);
  line-height: 1.14;
}

.resource-view-panel,
.resource-view-media,
.resource-view-buy-card,
.resource-view-side-card {
  border: 1px solid #d4e4db;
  border-radius: 14px;
  background: #ffffff;
}

.resource-view-panel,
.resource-view-side-card,
.resource-view-buy-card {
  padding: 0.78rem 0.84rem;
}

.resource-view-media {
  padding: 0.68rem;
}

.resource-view-main-image-wrap {
  border: 1px solid #d8e7de;
  border-radius: 12px;
  background: linear-gradient(145deg, #eaf5ee, #e4f2ea);
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.resource-view-main-image-wrap img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.resource-view-thumbs {
  margin-top: 0.52rem;
  display: flex;
  align-items: center;
  gap: 0.46rem;
  overflow-x: auto;
  padding-bottom: 0.12rem;
}

.resource-view-thumbs button {
  border: 1px solid #d3e3d9;
  border-radius: 10px;
  background: #ffffff;
  padding: 0;
  width: 84px;
  min-width: 84px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 140ms ease, transform 140ms ease;
}

.resource-view-thumbs button:hover {
  border-color: #91c9a8;
}

.resource-view-thumbs button.is-active {
  border-color: #2f9d5d;
  box-shadow: 0 0 0 2px rgba(47, 157, 93, 0.16);
}

.resource-view-thumbs img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.resource-view-panel h2,
.resource-view-side-card h3 {
  margin: 0;
  color: #1f6f47;
  font-family: var(--font-brand);
  font-size: 1.08rem;
}

.resource-view-side-card h3 {
  font-size: 0.95rem;
}

.resource-view-muted {
  margin: 0.38rem 0 0;
  color: #5f7a8f;
  font-size: 0.8rem;
  line-height: 1.48;
}

.resource-view-rich {
  margin-top: 0.5rem;
  color: #35546a;
  font-size: 0.9rem;
  line-height: 1.64;
  display: grid;
  gap: 0.52rem;
}

.resource-view-rich > *:first-child {
  margin-top: 0;
}

.resource-view-rich > *:last-child {
  margin-bottom: 0;
}

.resource-view-rich h1,
.resource-view-rich h2,
.resource-view-rich h3,
.resource-view-rich h4 {
  color: #205f3f;
  font-family: var(--font-brand);
  line-height: 1.28;
}

.resource-view-rich a {
  color: #1f8650;
  text-decoration: underline;
  word-break: break-word;
}

.resource-view-rich img {
  max-width: 100%;
  border-radius: 10px;
  border: 1px solid #d7e6dd;
  display: block;
}

.resource-view-rich pre,
.resource-view-rich code {
  font-family: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
}

.resource-view-rich pre {
  margin: 0;
  border: 1px solid #d8e8df;
  border-radius: 9px;
  background: #f4faf6;
  color: #2f4b3a;
  padding: 0.56rem 0.6rem;
  overflow: auto;
}

.resource-view-included-head {
  margin-top: 0.24rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.resource-view-included-head h3 {
  margin: 0;
  color: #215f40;
  font-size: 1rem;
}

.resource-view-included-head span {
  color: #648073;
  font-size: 0.76rem;
  font-weight: 800;
}

.resource-view-included-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.72rem;
}

.resource-view-included-card {
  border: 1px solid #d6deea;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 8px 16px rgba(20, 42, 66, 0.07);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  display: block;
}

.resource-view-rich .resource-view-included-card {
  color: inherit;
  text-decoration: none;
}

.resource-view-included-card:hover {
  border-color: #c6d8cc;
  box-shadow: 0 10px 18px rgba(20, 42, 66, 0.09);
  transform: translateY(-1px);
}

.resource-view-included-cover {
  min-height: 168px;
  position: relative;
  display: block;
  background:
    linear-gradient(180deg, rgba(10, 15, 22, 0.16), rgba(8, 12, 19, 0.7)),
    linear-gradient(135deg, #2d7f4c, #3c9c63 58%, #2c6f56);
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid #d8e1ec;
}

.resource-view-included-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(8, 10, 16, 0.35) 100%);
  pointer-events: none;
}

.resource-view-included-price {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 1;
  border-radius: 7px;
  padding: 0.24rem 0.42rem;
  font-size: 0.74rem;
  font-weight: 800;
  color: #243346;
  background: #ffffff;
  border: 1px solid #d2dce7;
}

.resource-view-included-badge {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #f7fbff;
  background: rgba(14, 25, 39, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 6px;
  padding: 0.18rem 0.42rem;
}

.resource-view-included-content {
  padding: 0.68rem 0.72rem 0.72rem;
  display: grid;
  gap: 0.26rem;
}

.resource-view-included-content h4 {
  margin: 0;
  color: #2a7a4b;
  font-size: 0.96rem;
  line-height: 1.32;
  font-weight: 800;
}

.resource-view-included-source {
  margin: 0;
  font-size: 0.76rem;
  color: #5c7085;
  display: flex;
  align-items: center;
  gap: 0.24rem;
  flex-wrap: wrap;
}

.resource-view-included-source i {
  color: #169a58;
  font-size: 0.72rem;
}

.resource-view-included-desc {
  margin: 0;
  color: #4c6074;
  font-size: 0.78rem;
  line-height: 1.48;
}

.resource-view-links {
  margin-top: 0.54rem;
  display: grid;
  gap: 0.4rem;
}

.resource-view-links a,
#resourceViewSupportLink {
  border: 1px solid #d1e2d8;
  border-radius: 9px;
  background: #f8fcf9;
  color: #2f6147;
  font-size: 0.83rem;
  font-weight: 800;
  text-decoration: none;
  padding: 0.46rem 0.56rem;
  display: inline-flex;
  align-items: center;
  gap: 0.36rem;
  width: fit-content;
  max-width: 100%;
}

.resource-view-links a:hover,
#resourceViewSupportLink:hover {
  background: #edf6f0;
}

.resource-view-buy-card {
  display: grid;
  gap: 0.52rem;
}

.resource-view-inline-box {
  border: 1px solid #d8e7de;
  border-radius: 10px;
  background: #f8fcf9;
  padding: 0.48rem 0.56rem;
  display: grid;
  gap: 0.16rem;
}

.resource-view-inline-label {
  margin: 0;
  color: #648094;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.resource-view-inline-box strong {
  color: #24553e;
  font-size: 0.86rem;
  font-weight: 800;
}

.resource-view-inline-box p {
  margin: 0;
  color: #4f6d81;
  font-size: 0.79rem;
  line-height: 1.45;
}

.resource-view-buy-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
}

.resource-view-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  color: #466579;
  font-size: 0.83rem;
  font-weight: 700;
}

.resource-view-price-row strong {
  color: #1f6f47;
  font-family: var(--font-brand);
  font-size: 1.26rem;
  line-height: 1;
}

.resource-view-price-row strong.resource-view-price-sale {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.12rem;
}

.resource-view-price-current {
  color: #1f6f47;
  line-height: 1;
}

.resource-view-price-old {
  color: #8697a1;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: line-through;
}

.resource-view-buy-btn {
  border: 1px solid #2f9254;
  border-radius: 10px;
  background: linear-gradient(140deg, #44bf71, #2f9d5d);
  color: #ffffff;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  font-weight: 800;
  min-height: 42px;
  padding: 0.48rem 0.82rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  cursor: pointer;
}

.resource-view-buy-btn:hover {
  background: linear-gradient(140deg, #39ad66, #27864c);
}

.resource-view-buy-btn:disabled {
  opacity: 0.7;
  cursor: wait;
}

.resource-view-wishlist-btn {
  border: 1px solid #d0ded5;
  border-radius: 10px;
  background: #f8fcf9;
  color: #355947;
  font-family: var(--font-ui);
  font-size: 0.86rem;
  font-weight: 800;
  min-height: 42px;
  padding: 0.48rem 0.66rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  cursor: pointer;
}

.resource-view-wishlist-btn:hover {
  background: #eef7f1;
}

.resource-view-wishlist-btn.is-active {
  border-color: #d49aac;
  background: #fff4f7;
  color: #8f3f5a;
}

.resource-view-feedback {
  margin: 0;
  font-size: 0.81rem;
  font-weight: 700;
  min-height: 1.2em;
}

.resource-view-feedback.is-success {
  color: #267d4c;
}

.resource-view-feedback.is-error {
  color: #b84f4f;
}

.resource-view-feedback.is-info {
  color: #3f6277;
}

.resource-view-buy-meta {
  margin: 0.1rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.38rem;
  color: #4f6d81;
  font-size: 0.81rem;
}

.resource-view-buy-meta li {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
}

.resource-view-buy-meta i {
  width: 15px;
  text-align: center;
  color: #2f9d5d;
}

.resource-view-payments {
  display: flex;
  align-items: center;
  gap: 0.38rem;
  color: #45657a;
}

.resource-view-payments span {
  border: 1px solid #d5e4db;
  border-radius: 8px;
  background: #f8fcf9;
  width: 36px;
  height: 28px;
  display: grid;
  place-items: center;
  font-size: 1.02rem;
}

.resource-view-side-card p {
  margin: 0.38rem 0 0;
  color: #5f7a8f;
  font-size: 0.8rem;
  line-height: 1.5;
}

.resource-view-tech-list {
  margin: 0.42rem 0 0;
  display: grid;
  gap: 0.38rem;
}

.resource-view-tech-list div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  border-top: 1px solid #e7efe9;
  padding-top: 0.38rem;
}

.resource-view-tech-list div:first-child {
  border-top: 0;
  padding-top: 0;
}

.resource-view-tech-list dt {
  color: #678296;
  font-size: 0.79rem;
  font-weight: 700;
}

.resource-view-tech-list dd {
  margin: 0;
  color: #2f5340;
  font-size: 0.82rem;
  font-weight: 800;
  text-align: right;
}

.resource-view-addons {
  margin-top: 0.56rem;
  border-top: 1px solid #e7efe9;
  padding-top: 0.5rem;
}

.resource-view-addons h4 {
  margin: 0;
  color: #24553e;
  font-size: 0.84rem;
  font-weight: 800;
}

.resource-view-addon-options {
  margin-top: 0.42rem;
  display: grid;
  gap: 0;
  border: 1px solid #d6deea;
  border-radius: 10px;
  background: #ffffff;
  overflow: hidden;
}

.resource-view-addon-option {
  border: 0;
  border-top: 1px solid #dfe7f0;
  border-radius: 0;
  background: #ffffff;
  color: inherit;
  text-align: left;
  padding: 0.52rem 0.58rem;
  display: grid;
  gap: 0.14rem;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}

.resource-view-addon-option:first-child {
  border-top: 0;
}

.resource-view-addon-option:hover {
  background: #f7fafc;
}

.resource-view-addon-option.is-active {
  background: linear-gradient(140deg, #39a65f, #2f8f53);
  border-top-color: rgba(255, 255, 255, 0.2);
}

.resource-view-addon-option header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.42rem;
}

.resource-view-addon-option strong {
  color: #2e4357;
  font-size: 0.8rem;
  font-weight: 800;
}

.resource-view-addon-option span {
  color: #4f667a;
  font-size: 0.77rem;
  font-weight: 800;
}

.resource-view-addon-option p {
  margin: 0;
  color: #5f7a8f;
  font-size: 0.75rem;
  line-height: 1.4;
}

.resource-view-addon-option.is-active strong,
.resource-view-addon-option.is-active span {
  color: #ffffff;
}

.resource-view-addon-option.is-active p {
  color: #e7f6ed;
}

.resource-view-stat-grid {
  margin-top: 0.5rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.38rem;
}

.resource-view-stat-grid article {
  border: 1px solid #d7e6dd;
  border-radius: 10px;
  background: #f8fcf9;
  min-height: 66px;
  padding: 0.44rem 0.5rem;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 0.42rem;
}

.resource-view-stat-item.is-views {
  border-color: #d7e6dd;
}

.resource-view-stat-item.is-purchases {
  border-color: #d5e7dc;
}

.resource-view-stat-item.is-downloads {
  border-color: #d2e5dc;
}

.resource-view-stat-item.is-ratings {
  border-color: #dce7d3;
}

.resource-view-stat-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d6e6dc;
  background: linear-gradient(180deg, #f6fbf8 0%, #eef7f1 100%);
  color: #2f7f56;
  font-size: 0.78rem;
}

.resource-view-stat-item.is-purchases .resource-view-stat-icon {
  color: #2a7a53;
}

.resource-view-stat-item.is-downloads .resource-view-stat-icon {
  color: #2b8359;
}

.resource-view-stat-item.is-ratings .resource-view-stat-icon {
  color: #c89a1a;
}

.resource-view-stat-copy {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 0.1rem;
}

.resource-view-stat-grid strong {
  color: #24553e;
  font-size: 1rem;
  font-weight: 800;
}

.resource-view-stat-grid span {
  color: #698397;
  font-size: 0.74rem;
  font-weight: 700;
}

.resource-view-chip-list {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.resource-view-chip-list span {
  border: 1px solid #d4e3da;
  border-radius: 999px;
  background: #f8fcf9;
  color: #406151;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.18rem 0.5rem;
}

.resource-view-chip-list .resource-view-chip-empty {
  border-style: dashed;
  color: #5e7a8e;
}

.resource-view-boolean-list {
  margin: 0.5rem 0 0;
  display: grid;
  gap: 0.34rem;
}

.resource-view-boolean-list div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.42rem;
  border-top: 1px solid #e7efe9;
  padding-top: 0.34rem;
}

.resource-view-boolean-list div:first-child {
  border-top: 0;
  padding-top: 0;
}

.resource-view-boolean-list dt {
  color: #678296;
  font-size: 0.78rem;
  font-weight: 700;
}

.resource-view-boolean-list dd {
  margin: 0;
  color: #2f5340;
  font-size: 0.8rem;
  font-weight: 800;
}

.resource-view-creator {
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.52rem;
}

.resource-view-creator-avatar {
  --creator-avatar-bg: #3fb96c;
  --creator-avatar-zoom: 1;
  --creator-avatar-position-x: 50%;
  --creator-avatar-position-y: 50%;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: var(--creator-avatar-bg);
  color: #ffffff;
  font-size: 1.04rem;
  font-weight: 800;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.resource-view-creator-avatar.has-image {
  color: transparent;
}

.resource-view-creator-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--creator-avatar-position-x) var(--creator-avatar-position-y);
  transform: scale(var(--creator-avatar-zoom));
  transform-origin: center center;
  display: block;
}

.resource-view-creator-meta {
  min-width: 0;
  display: grid;
  gap: 0.1rem;
}

.resource-view-creator-meta strong {
  color: #25563e;
  font-size: 0.86rem;
  font-weight: 800;
}

.resource-view-creator-meta span {
  color: #688296;
  font-size: 0.75rem;
  font-weight: 700;
}

.resource-view-bundles {
  margin-top: 0.52rem;
  display: grid;
  gap: 0.56rem;
}

.resource-view-bundle-offer-card {
  border-color: #dbe5de;
  background: linear-gradient(180deg, #fcfefc 0%, #f7fbf8 100%);
}

.resource-view-bundle-offer-link {
  margin-top: 0.48rem;
  border: 1px solid #dbe6de;
  border-radius: 13px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdfb 100%);
  color: inherit;
  text-decoration: none;
  padding: 0.72rem 0.78rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.resource-view-bundle-offer-link:hover {
  border-color: #bfd8c9;
  box-shadow: 0 8px 16px rgba(21, 43, 32, 0.08);
  transform: translateY(-1px);
}

.resource-view-bundle-offer-copy {
  min-width: 0;
  display: grid;
  gap: 0.16rem;
}

.resource-view-bundle-offer-copy strong {
  color: #25563e;
  font-size: 0.84rem;
  line-height: 1.3;
}

.resource-view-bundle-offer-copy span {
  color: #648072;
  font-size: 0.74rem;
  font-weight: 700;
}

.resource-view-bundle-offer-link i {
  color: #2d7e50;
  font-size: 0.88rem;
  flex: 0 0 auto;
}

.resource-view-bundle-card {
  border: 1px solid #dbe5de;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdfb 100%);
  box-shadow: 0 10px 18px rgba(20, 42, 66, 0.04);
  overflow: hidden;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 0.62rem;
  padding: 0.56rem;
  align-items: start;
  color: inherit;
  text-decoration: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.resource-view-bundle-card:hover {
  border-color: #c7d9ce;
  box-shadow: 0 12px 22px rgba(21, 43, 32, 0.08);
  transform: translateY(-1px);
}

.resource-view-bundle-thumb {
  min-height: 66px;
  position: relative;
  border-radius: 11px;
  overflow: hidden;
  width: 82px;
  aspect-ratio: 16 / 11;
  background: transparent;
  align-self: start;
  justify-self: start;
}

.resource-view-bundle-cover-art {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
}

.resource-view-bundle-cover-art img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  background: transparent;
}

.resource-view-bundle-cover-grid {
  display: grid;
  gap: 0;
  background: transparent;
  border-radius: inherit;
  overflow: hidden;
}

.resource-view-bundle-cover-grid.is-count-1 {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.resource-view-bundle-cover-grid.is-count-2 {
  grid-template-columns: 1fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.resource-view-bundle-cover-grid.is-count-3,
.resource-view-bundle-cover-grid.is-count-4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.resource-view-bundle-cover-grid.is-count-3 .resource-view-bundle-cell:first-child {
  grid-row: 1 / span 2;
}

.resource-view-bundle-cell {
  position: relative;
  overflow: hidden;
  background: transparent;
}

.resource-view-bundle-cell img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.resource-view-bundle-content {
  display: grid;
  gap: 0.34rem;
  min-width: 0;
  align-content: start;
}

.resource-view-bundle-content header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 0.5rem;
  min-width: 0;
}

.resource-view-bundle-content strong {
  color: #25533d;
  font-size: 0.84rem;
  line-height: 1.26;
  min-width: 0;
  overflow-wrap: anywhere;
}

.resource-view-bundle-content header span {
  color: #255f40;
  font-size: 0.74rem;
  font-weight: 800;
  white-space: nowrap;
  flex: 0 0 auto;
}

.resource-inline-price-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.08rem;
}

.resource-inline-price-current {
  color: #255f40;
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1;
}

.resource-inline-price-old {
  color: #8b9c93;
  font-size: 0.64rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: line-through;
}

.resource-view-bundle-desc {
  margin: 0;
  color: #5c7487;
  font-size: 0.74rem;
  line-height: 1.45;
}

.resource-view-bundle-includes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
}

.resource-view-bundle-includes span {
  border: 1px solid #dde7e0;
  border-radius: 999px;
  background: #ffffff;
  color: #62786c;
  padding: 0.17rem 0.42rem;
  font-size: 0.68rem;
  font-weight: 700;
}

.resource-view-recommended {
  margin-top: 0.52rem;
  display: grid;
  gap: 0.44rem;
}

.resource-view-reco-card {
  border: 1px solid #d6deea;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 8px 16px rgba(20, 42, 66, 0.07);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  display: block;
}

.resource-view-reco-cover {
  min-height: 122px;
  position: relative;
  display: block;
  background:
    linear-gradient(180deg, rgba(10, 15, 22, 0.16), rgba(8, 12, 19, 0.7)),
    linear-gradient(135deg, #2d7f4c, #3c9c63 58%, #2c6f56);
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid #d8e1ec;
}

.resource-view-reco-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(8, 10, 16, 0.35) 100%);
  pointer-events: none;
}

.resource-view-reco-price {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 1;
  border-radius: 6px;
  padding: 0.24rem 0.42rem;
  background: #ffffff;
  border: 1px solid #d2dce7;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.06rem;
}

.resource-view-reco-price strong {
  color: #243346;
  font-size: 0.73rem;
  font-weight: 800;
  line-height: 1;
}

.resource-view-reco-price small {
  color: #8795a2;
  font-size: 0.61rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: line-through;
}

.resource-view-reco-price.is-on-sale strong {
  color: #1f6f47;
}

.resource-view-reco-badge {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #f7fbff;
  background: rgba(14, 25, 39, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 6px;
  padding: 0.17rem 0.4rem;
}

.resource-view-reco-content {
  padding: 0.56rem 0.58rem 0.14rem;
  display: grid;
  gap: 0.22rem;
}

.resource-view-reco-content h4 {
  margin: 0;
  color: #2a7a4b;
  font-size: 0.92rem;
  line-height: 1.3;
  font-weight: 800;
}

.resource-view-reco-source {
  margin: 0;
  font-size: 0.76rem;
  color: #5c7085;
  display: flex;
  align-items: center;
  gap: 0.24rem;
  flex-wrap: wrap;
}

.resource-view-reco-source i {
  color: #169a58;
  font-size: 0.72rem;
}

.resource-view-reco-source span {
  color: #5f7388;
}

.resource-view-reco-desc {
  margin: 0;
  color: #4c6074;
  font-size: 0.76rem;
  line-height: 1.42;
}

.resource-view-reco-footer {
  margin: 0;
  padding: 0.48rem 0.58rem 0.6rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.36rem;
  font-size: 0.75rem;
  color: #597082;
  font-weight: 700;
  border-top: 1px solid #e2e8f1;
}

.resource-view-reco-footer span {
  white-space: nowrap;
}

.resource-view-reco-stars {
  display: inline-flex;
  align-items: center;
  gap: 0.08rem;
  color: #f5b301;
}

.resource-view-reco-stars i {
  font-size: 0.74rem;
}

.resource-view-timeline {
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.42rem;
}

.resource-view-timeline li {
  border: 1px solid #d8e7de;
  border-radius: 10px;
  background: #f8fcf9;
  padding: 0.52rem 0.58rem;
  display: grid;
  gap: 0.2rem;
}

.resource-view-timeline li > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
}

.resource-view-timeline strong {
  color: #24553e;
  font-size: 0.83rem;
  font-weight: 800;
}

.resource-view-timeline time {
  color: #6a8397;
  font-size: 0.72rem;
  font-weight: 700;
}

.resource-view-timeline p {
  margin: 0;
  color: #4f6d81;
  font-size: 0.78rem;
  line-height: 1.46;
}

.resource-view-version-list {
  margin-top: 0.5rem;
  display: grid;
  gap: 0.42rem;
}

.resource-view-version-item {
  border: 1px solid #d8e7de;
  border-radius: 10px;
  background: #f8fcf9;
  padding: 0.52rem 0.58rem;
  display: grid;
  gap: 0.2rem;
}

.resource-view-version-item header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.48rem;
}

.resource-view-version-item strong {
  color: #24553e;
  font-size: 0.84rem;
  font-weight: 800;
}

.resource-view-version-meta {
  margin: 0.14rem 0 0;
  color: #6a8397;
  font-size: 0.72rem;
  font-weight: 700;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.36rem;
}

.resource-view-version-item p {
  margin: 0;
  color: #4f6d81;
  font-size: 0.78rem;
  line-height: 1.46;
}

.resource-view-version-download {
  border: 1px solid #cfded5;
  border-radius: 8px;
  background: #ffffff;
  color: #2f5f47;
  font-family: var(--font-ui);
  font-size: 0.74rem;
  font-weight: 800;
  min-height: 30px;
  padding: 0.3rem 0.54rem;
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  cursor: pointer;
  white-space: nowrap;
}

.resource-view-version-download:hover {
  background: #eef7f1;
}

.resource-view-version-lock {
  border: 1px solid #d6e0d9;
  border-radius: 8px;
  background: #ffffff;
  color: #61796b;
  font-size: 0.73rem;
  font-weight: 800;
  min-height: 30px;
  padding: 0.3rem 0.54rem;
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  white-space: nowrap;
}

.resource-view-version-empty {
  margin: 0.16rem 0 0;
  border: 1px dashed #cdded4;
  border-radius: 10px;
  background: #f7fcf8;
  color: #547365;
  font-size: 0.8rem;
  line-height: 1.5;
  padding: 0.68rem 0.72rem;
}

.resource-view-review-summary {
  margin-top: 0.52rem;
  border: 1px solid #d8e7de;
  border-radius: 10px;
  background: #f8fcf9;
  min-height: 68px;
  padding: 0.46rem 0.56rem;
  display: grid;
  align-content: center;
  gap: 0.12rem;
}

.resource-view-review-summary strong {
  color: #24553e;
  font-size: 1.18rem;
  font-weight: 800;
}

.resource-view-review-summary span {
  color: #6a8397;
  font-size: 0.74rem;
  font-weight: 700;
}

.resource-view-review-list {
  margin-top: 0.46rem;
  display: grid;
  gap: 0.42rem;
}

.resource-view-review-list article {
  border: 1px solid #d8e7de;
  border-radius: 10px;
  background: #f8fcf9;
  padding: 0.52rem 0.58rem;
  display: grid;
  gap: 0.16rem;
}

.resource-view-review-list header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.42rem;
}

.resource-view-review-list header strong {
  color: #24553e;
  font-size: 0.83rem;
  font-weight: 800;
}

.resource-view-review-list header span {
  color: #e2ac2f;
  font-size: 0.72rem;
}

.resource-view-review-list p {
  margin: 0;
  color: #4f6d81;
  font-size: 0.78rem;
  line-height: 1.46;
}

.resource-view-review-list time {
  color: #6d8699;
  font-size: 0.7rem;
  font-weight: 700;
}

.resource-view-missing {
  min-height: 52vh;
  border: 1px dashed #cfe0d6;
  border-radius: 14px;
  background: #f8fcf9;
  padding: 1.4rem;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 0.4rem;
}

.resource-view-missing h1 {
  margin: 0;
  color: #1f6f47;
  font-family: var(--font-brand);
  font-size: 1.3rem;
}

.resource-view-missing p {
  margin: 0;
  color: #5f7a8f;
  font-size: 0.9rem;
  line-height: 1.5;
  max-width: 560px;
}

.resource-view-back-home {
  margin-inline: auto;
  border: 1px solid #d0dfd6;
  border-radius: 9px;
  background: #ffffff;
  color: #2f6046;
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 800;
  min-height: 38px;
  padding: 0.42rem 0.68rem;
  display: inline-flex;
  align-items: center;
  gap: 0.36rem;
}

.resource-view-back-home:hover {
  background: #eef7f1;
}

@media (max-width: 1120px) {
  .cart-layout {
    grid-template-columns: 1fr;
  }

  .cart-summary-card {
    position: static;
  }

  .resource-view-grid {
    grid-template-columns: 1fr;
  }

  .resource-view-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .resource-view-buy-card {
    grid-column: 1 / -1;
  }

  .resource-view-tabs button {
    flex: 1 1 auto;
    text-align: center;
  }

  .resource-view-link-tabs {
    margin-left: 0;
    width: 100%;
    border-top: 1px solid #e2ece6;
  }
}

@media (max-width: 760px) {
  .resource-view-main {
    padding: 0.82rem 0.72rem 1.3rem;
  }

  .resource-view-head,
  .resource-view-panel,
  .resource-view-side-card,
  .resource-view-buy-card {
    padding: 0.66rem 0.68rem;
  }

  .resource-view-media {
    padding: 0.52rem;
  }

  .resource-view-side {
    grid-template-columns: 1fr;
  }

  .resource-view-media-title {
    font-size: clamp(1.28rem, 5.8vw, 1.62rem);
  }

  .resource-view-price-row strong {
    font-size: 1.14rem;
  }

  .resource-view-stage-body {
    padding: 0.52rem;
  }

  .resource-view-buy-actions {
    grid-template-columns: 1fr;
  }

  .resource-view-bundle-card {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 0.56rem;
    padding: 0.5rem;
  }

  .resource-view-bundle-thumb {
    min-height: 68px;
  }

  .resource-view-version-item header {
    flex-direction: column;
    align-items: flex-start;
  }

  .resource-view-included-grid {
    grid-template-columns: 1fr;
  }

  .resource-view-reco-cover {
    min-height: 112px;
  }

  .resource-view-stat-grid {
    grid-template-columns: 1fr 1fr;
  }

  .resource-custom-link-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1100px) {
  .creator-hub-shell {
    grid-template-columns: 1fr;
  }

  .creator-hub-sidebar {
    position: static;
  }

  .resource-editor-grid {
    grid-template-columns: 1fr;
  }

  .resource-editor-side {
    position: static;
  }
}

@media (max-width: 860px) {
  .cart-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .cart-toolbar-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .cart-item {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .cart-item-thumb {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    max-width: 280px;
    height: auto;
  }

  .cart-item-main {
    grid-column: 1 / -1;
  }

  .cart-item-side {
    grid-column: 1 / -1;
    border-left: 0;
    border-top: 1px solid #e0ebe5;
    padding-top: 0.44rem;
    padding-left: 0;
  }

  .creator-hub-content-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .creator-overview-panel-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .creator-overview-stats,
  .creator-overview-substats,
  .creator-overview-ref-grid,
  .creator-hub-stats-grid,
  .creator-hub-substats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .creator-hub-form-grid {
    grid-template-columns: 1fr;
  }

  .creator-resources-toolbar {
    grid-template-columns: 1fr 1fr;
  }

  .creator-resource-row {
    grid-template-columns: 156px minmax(0, 1fr);
  }

  .creator-bundle-row {
    grid-template-columns: 156px minmax(0, 1fr);
  }

  .creator-resource-side {
    grid-column: 1 / -1;
    border-left: 0;
    border-top: 1px solid #e2ece6;
    padding-left: 0;
    padding-top: 0.5rem;
  }

  .bundle-builder-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bundle-resource-option {
    grid-template-columns: auto 88px minmax(0, 1fr);
  }

  .bundle-resource-option-side {
    grid-column: 2 / -1;
    grid-template-columns: auto auto;
    justify-content: space-between;
    align-items: center;
    justify-items: start;
  }

  .resource-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .resource-editor-row {
    grid-template-columns: 200px minmax(0, 1fr);
  }

  .resource-editor-side-actions {
    grid-template-columns: 1fr;
  }

  .resource-preview-panel {
    width: min(1200px, calc(100vw - 1rem));
  }

  .admin-review-toolbar {
    grid-template-columns: 1fr;
  }

  .admin-dashboard-grid,
  .admin-role-guide-grid {
    grid-template-columns: 1fr;
  }

  .admin-role-toolbar {
    grid-template-columns: 1fr;
  }

  .admin-review-row {
    grid-template-columns: 1fr;
  }

  .admin-role-row {
    grid-template-columns: 1fr;
  }

  .admin-role-controls {
    justify-content: flex-start;
  }

  .admin-user-row {
    grid-template-columns: 1fr;
  }

  .admin-user-actions {
    justify-content: flex-start;
  }

  .admin-user-form-grid,
  .admin-user-toggle-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .cart-page-main {
    padding: 0.82rem 0.72rem 1.2rem;
  }

  .cart-hero,
  .cart-panel,
  .cart-summary-card {
    padding: 0.64rem;
  }

  .cart-panel-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .cart-coupon-form {
    grid-template-columns: 1fr;
  }

  .cart-item {
    padding: 0.5rem;
  }

  .cart-item-thumb {
    width: 100%;
    max-width: 100%;
  }

  .creator-hub-main {
    padding: 0.8rem 0.72rem 1.4rem;
  }

  .creator-overview-stats,
  .creator-overview-substats,
  .creator-overview-ref-grid,
  .creator-hub-stats-grid,
  .creator-hub-substats-grid {
    grid-template-columns: 1fr;
  }

  #creatorHubSectionTitle {
    font-size: 1.44rem;
  }

  .creator-hub-overview-title {
    font-size: 1.44rem;
  }

  .creator-resources-toolbar {
    grid-template-columns: 1fr;
  }

  .creator-resource-row {
    grid-template-columns: 1fr;
  }

  .creator-bundle-row {
    grid-template-columns: 1fr;
  }

  .creator-resource-thumb {
    min-height: 0;
  }

  .bundle-builder-stats {
    grid-template-columns: 1fr;
  }

  .bundle-resource-option {
    grid-template-columns: 1fr;
  }

  .bundle-resource-option-thumb {
    width: 100%;
    max-width: 180px;
  }

  .bundle-resource-option-side {
    grid-column: auto;
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .creator-resource-main h3 {
    font-size: 0.95rem;
  }

  .resource-modal-panel {
    top: 2.4vh;
    width: min(760px, calc(100vw - 0.8rem));
    padding: 0.62rem;
  }

  .resource-form-grid {
    grid-template-columns: 1fr;
  }

  .resource-editor-form {
    padding: 0.56rem;
  }

  .resource-editor-row {
    grid-template-columns: 1fr;
  }

  .resource-editor-label {
    padding: 0.54rem 0.56rem 0.2rem;
  }

  .resource-editor-input-wrap {
    border-left: 0;
    padding: 0.26rem 0.56rem 0.56rem;
  }

  .resource-editor-actions {
    justify-content: stretch;
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .resource-editor-actions button {
    justify-content: center;
  }

  .resource-addon-grid {
    grid-template-columns: 1fr;
  }

  .resource-editor-tabs button {
    flex: 1 1 auto;
    text-align: center;
    min-width: 33%;
  }

  .resource-preview-panel {
    top: 2.2vh;
    width: min(1200px, calc(100vw - 0.8rem));
    padding: 0.62rem;
  }
}

.stores-grid {
  display: grid;
  gap: 0.86rem;
}

.store-list-card {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) auto;
  gap: 0.88rem;
  align-items: start;
  padding: 0.88rem;
  border: 1px solid #d9e7de;
  border-radius: 22px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fcf9 100%);
  box-shadow: 0 18px 42px rgba(35, 71, 48, 0.06);
}

.store-list-card.is-highlighted {
  border-color: #56ba79;
  box-shadow: 0 0 0 3px rgba(63, 185, 108, 0.15), 0 18px 42px rgba(35, 71, 48, 0.1);
}

.store-list-thumb {
  min-width: 0;
}

.store-list-cover {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 124px;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(135deg, #eff8f0 0%, #dff1e3 100%);
  color: #267447;
  border: 1px solid #dcebe0;
}

.store-list-cover.has-image img,
.store-list-cover-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.store-list-cover.is-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 0;
}

.store-list-cover-cell {
  min-height: 62px;
  overflow: hidden;
}

.store-list-cover.is-grid.is-count-1 {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.store-list-cover.is-grid.is-count-2 {
  grid-template-columns: 1fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.store-list-cover.is-title-fallback {
  place-items: center;
  padding: 0.9rem;
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.58), transparent 36%),
    linear-gradient(135deg, #edf8ef 0%, #dff2e4 100%);
}

.store-list-cover.is-title-fallback strong {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: center;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1.18rem;
  line-height: 1.16;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #2b7248;
}

.store-list-main {
  min-width: 0;
  display: grid;
  gap: 0.54rem;
}

.store-list-main h2 {
  margin: 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1.22rem;
  color: #1d7045;
}

.store-list-main p {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.62;
  color: #577262;
}

.store-list-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.52rem;
}

.store-list-info {
  display: flex;
  flex-wrap: wrap;
  gap: 0.82rem 1rem;
  font-size: 0.84rem;
  color: #5f7968;
}

.store-list-info span {
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
}

.store-list-badge,
.store-list-status,
.store-builder-role,
.store-collaborator-role {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.28rem 0.62rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.store-list-badge.is-edit,
.store-builder-role {
  background: rgba(63, 185, 108, 0.14);
  color: #1f7849;
}

.store-list-badge.is-view {
  background: rgba(53, 98, 72, 0.08);
  color: #436553;
}

.store-list-status {
  background: rgba(232, 241, 235, 0.94);
  color: #4d6d5a;
  text-transform: capitalize;
}

.store-list-status.is-published {
  background: rgba(63, 185, 108, 0.14);
  color: #227548;
}

.store-list-status.is-draft {
  background: rgba(244, 209, 98, 0.16);
  color: #8d6900;
}

.store-list-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.52rem;
  min-width: 264px;
  align-self: center;
}

.store-list-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  min-height: 40px;
  padding: 0.68rem 0.92rem;
  border-radius: 14px;
  border: 1px solid #d6e5db;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbf8 100%);
  color: #2a6543;
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 10px 18px rgba(37, 74, 51, 0.05);
  cursor: pointer;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease,
    color 0.18s ease;
}

.store-list-action i {
  font-size: 0.94rem;
}

.store-list-action:hover {
  transform: translateY(-1px);
  border-color: #b5d9c0;
  background: #ffffff;
  box-shadow: 0 14px 24px rgba(37, 74, 51, 0.08);
}

.store-list-action.is-edit {
  background: linear-gradient(180deg, #eff9f1 0%, #e2f3e6 100%);
  border-color: #bfe0c8;
  color: #1d7648;
}

.store-list-action.is-view {
  background: linear-gradient(180deg, #ffffff 0%, #f7fbf8 100%);
  color: #2f6146;
}

.store-list-action.is-share {
  background: linear-gradient(180deg, #f4fbf6 0%, #ebf7ef 100%);
  border-color: #d3e8da;
  color: #2a714a;
}

.store-list-action.is-delete {
  background: linear-gradient(180deg, #fff6f6 0%, #ffecec 100%);
  border-color: #efcfd0;
  color: #a3484d;
}

.store-list-action.is-delete:hover {
  border-color: #e6b6ba;
  box-shadow: 0 14px 24px rgba(135, 55, 63, 0.12);
}

.store-public-main {
  padding: 1rem 1rem 1.8rem;
}

.store-public-shell {
  width: min(1240px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 1rem;
}

.store-public-head,
.store-public-content > .store-block {
  border-radius: 28px;
  border: 1px solid #dfeae2;
  box-shadow: 0 20px 46px rgba(36, 66, 48, 0.06);
}

.store-public-head,
.store-public-content > .store-block:not(.store-block-hero) {
  background: linear-gradient(180deg, #ffffff 0%, #fbfdfc 100%);
}

.store-public-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: start;
  padding: 1.26rem;
}

.store-public-head-copy {
  display: grid;
  gap: 0.62rem;
}

.store-public-kicker,
.store-builder-kicker,
.store-hero-kicker {
  margin: 0;
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 800;
  color: #3d9a62;
}

.store-public-head-copy h1 {
  margin: 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: clamp(2rem, 3vw, 2.7rem);
  line-height: 1.02;
  color: #1f5f3e;
}

.store-public-head-copy p {
  margin: 0;
  max-width: 780px;
  font-size: 1rem;
  line-height: 1.66;
  color: #5b7665;
}

.store-public-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1rem;
  font-size: 0.85rem;
  color: #5b7665;
}

.store-public-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
}

.store-public-content {
  display: grid;
  gap: 1rem;
}

.store-block {
  padding: 1rem;
}

.store-block-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at top right, rgba(63, 185, 108, 0.24), transparent 34%),
    linear-gradient(135deg, #1f4f37 0%, #244e36 34%, #3ca765 100%);
  color: #ffffff;
}

.store-public-content > .store-block.store-block-hero {
  background:
    radial-gradient(circle at top right, rgba(63, 185, 108, 0.24), transparent 34%),
    linear-gradient(135deg, #1f4f37 0%, #244e36 34%, #3ca765 100%);
}

.store-block-hero h1 {
  margin: 0.24rem 0 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 0.96;
  letter-spacing: -0.04em;
  color: #ffffff;
}

.store-block-hero p {
  max-width: 640px;
  margin: 0.8rem 0 0;
  font-size: 1rem;
  line-height: 1.66;
  color: rgba(255, 255, 255, 0.88);
}

.store-public-content > .store-block.store-block-hero .store-hero-kicker {
  color: rgba(230, 255, 240, 0.78);
}

.store-hero-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1rem;
  padding: 0.8rem 1.1rem;
  border-radius: 14px;
  background: #ffffff;
  color: #1c7044;
  font-weight: 800;
  text-decoration: none;
}

.store-block-copy h1,
.store-block-copy h2,
.store-block-copy h3,
.store-section-head h2,
.store-builder-card-head h2,
.store-builder-canvas-head h2 {
  margin: 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  color: #1f6b42;
}

.store-block-copy p,
.store-builder-card-head p,
.store-builder-canvas-head p,
.store-section-head span,
.store-block-empty,
.store-builder-field-hint,
.store-builder-settings-head p {
  margin: 0;
  color: #647d6d;
  line-height: 1.6;
}

.store-block-copy.align-center {
  text-align: center;
}

.store-block-copy.align-right {
  text-align: right;
}

.store-block-creator {
  display: grid;
  gap: 1rem;
}

.store-creator-card {
  display: flex;
  gap: 0.86rem;
  align-items: center;
  padding: 0.94rem;
  border-radius: 22px;
  background: #f6fbf7;
  border: 1px solid #deebe0;
}

.store-creator-copy {
  display: grid;
  gap: 0.22rem;
}

.store-creator-copy strong {
  font-size: 1.12rem;
  color: #1f673f;
}

.store-creator-copy span {
  font-size: 0.86rem;
  color: #65806e;
}

.store-creator-copy-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.46rem;
  align-items: center;
}

.store-creator-role-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.24rem 0.58rem;
  border-radius: 999px;
  background: rgba(63, 185, 108, 0.1);
  color: #1f7849;
  font-size: 0.75rem;
  font-weight: 800;
}

.store-creator-copy p {
  margin: 0.18rem 0 0;
  color: #537062;
}

.store-creator-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.76rem;
}

.store-creator-stats span {
  display: inline-flex;
  gap: 0.34rem;
  align-items: center;
  padding: 0.62rem 0.84rem;
  border-radius: 16px;
  background: #fbfdfb;
  border: 1px solid #dfece3;
  color: #5b7665;
}

.store-creator-stats strong {
  color: #1d6a42;
}

.store-section-head {
  display: flex;
  justify-content: space-between;
  gap: 0.7rem;
  align-items: center;
  margin-bottom: 0.84rem;
}

.store-products-grid {
  display: grid;
  gap: 0.78rem;
}

.store-product-card {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) auto;
  gap: 0.78rem;
  align-items: center;
  padding: 0.7rem;
  border-radius: 20px;
  border: 1px solid #dbe9df;
  background: linear-gradient(180deg, #ffffff 0%, #f8fcf9 100%);
  text-decoration: none;
}

.store-product-thumb {
  display: block;
  width: 132px;
  min-width: 132px;
  height: 92px;
  overflow: hidden;
  border-radius: 16px;
  background: #edf6ef;
  border: 1px solid #dceade;
}

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

.store-product-thumb.store-product-thumb-bundle {
  display: grid;
  gap: 0;
}

.store-product-thumb.store-product-thumb-bundle.has-cover {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.store-product-thumb.store-product-thumb-bundle.is-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.store-product-thumb.store-product-thumb-bundle.is-grid.is-count-1 {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.store-product-thumb.store-product-thumb-bundle.is-grid.is-count-2 {
  grid-template-columns: 1fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.store-bundle-thumb-cell {
  overflow: hidden;
}

.store-bundle-thumb-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.store-product-body {
  display: grid;
  gap: 0.22rem;
  min-width: 0;
}

.store-product-body strong {
  color: #1f6b42;
  font-size: 1rem;
}

.store-product-body span {
  color: #5f7968;
  font-size: 0.9rem;
  line-height: 1.56;
}

.store-product-price {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.64rem 0.82rem;
  border-radius: 16px;
  background: rgba(63, 185, 108, 0.12);
  color: #1f7648;
  font-weight: 800;
  white-space: nowrap;
}

.store-block-image {
  display: grid;
  gap: 0.76rem;
}

.store-block-image img {
  width: 100%;
  max-height: 420px;
  border-radius: 22px;
  display: block;
  border: 1px solid #dce9df;
}

.store-block-image.is-fit-cover img {
  object-fit: cover;
}

.store-block-image.is-fit-contain img {
  object-fit: contain;
  background: #f7fbf8;
}

.store-block-image figcaption {
  color: #5f7968;
  font-size: 0.88rem;
}

.store-block-image.is-empty,
.store-builder-empty,
.store-builder-settings-empty {
  min-height: 220px;
  display: grid;
  place-items: center;
  gap: 0.42rem;
  text-align: center;
  border: 1px dashed #cbe0d1;
  border-radius: 24px;
  color: #6a8473;
  background: linear-gradient(180deg, #fcfefd 0%, #f6faf7 100%);
}

.store-block-divider {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: #5c7866;
  font-weight: 700;
}

.store-block-divider::before,
.store-block-divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: #dbe8de;
}

.store-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--avatar-bg, #3fb96c);
  color: #ffffff;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1.08rem;
  font-weight: 800;
  flex: 0 0 auto;
}

.store-avatar.has-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(var(--avatar-zoom, 1));
  transform-origin: var(--avatar-position-x, 50%) var(--avatar-position-y, 50%);
}

.store-avatar-xl {
  width: 84px;
  height: 84px;
  font-size: 1.84rem;
}

.store-avatar-sm {
  width: 42px;
  height: 42px;
  font-size: 0.96rem;
}

.store-builder-main {
  padding: 1rem;
}

.store-builder-shell {
  width: min(1380px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 1rem;
}

.store-builder-topbar,
.store-builder-card,
.store-builder-canvas {
  border-radius: 26px;
  border: 1px solid #deebe1;
  background: linear-gradient(180deg, #ffffff 0%, #fafdfb 100%);
  box-shadow: 0 22px 50px rgba(32, 67, 45, 0.06);
}

.store-builder-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.1rem;
}

.store-builder-topbar-main,
.store-builder-topbar-actions,
.store-builder-collab-main {
  display: flex;
  align-items: center;
  gap: 0.86rem;
}

.store-builder-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  color: #4a6f5a;
  font-weight: 700;
}

.store-builder-back-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid #d8e6dd;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbf8 100%);
  color: #2a6543;
  text-decoration: none;
  box-shadow: 0 10px 18px rgba(37, 74, 51, 0.05);
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.store-builder-back-icon:hover {
  transform: translateY(-1px);
  border-color: #b5d9c0;
  background: #ffffff;
  box-shadow: 0 14px 24px rgba(37, 74, 51, 0.08);
}

.store-builder-topbar-main h1 {
  margin: 0.14rem 0 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1.7rem;
  color: #1e6841;
}

.store-builder-layout {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr) minmax(300px, 340px);
  gap: 1rem;
  align-items: start;
}

.store-builder-sidebar,
.store-builder-card,
.store-collaborator-form,
.store-collaborators-list,
.store-collaborator-card,
.store-collaborator-main,
.store-collaborator-actions {
  min-width: 0;
}

.store-builder-card,
.store-builder-canvas {
  padding: 0.96rem;
}

.store-builder-card {
  display: grid;
  gap: 0.9rem;
}

.store-builder-card-head {
  display: grid;
  gap: 0.24rem;
}

.store-block-palette {
  display: grid;
  gap: 0.58rem;
}

.store-block-palette button {
  display: flex;
  align-items: center;
  gap: 0.62rem;
  width: 100%;
  padding: 0.86rem 0.94rem;
  border: 1px solid #dce9df;
  border-radius: 18px;
  background: #f8fcf9;
  color: #1e6841;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.store-block-palette button:hover {
  transform: translateY(-1px);
  border-color: #8fc9a5;
  background: #ffffff;
}

.store-builder-canvas-wrap {
  display: grid;
  gap: 0.8rem;
}

.store-builder-canvas-head {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  align-items: start;
}

.store-builder-canvas {
  display: grid;
  gap: 0.86rem;
  min-height: 620px;
}

.store-builder-block {
  border: 1px solid #e1ebe3;
  border-radius: 24px;
  background: #fbfdfc;
  overflow: hidden;
  cursor: grab;
}

.store-builder-block.is-selected {
  border-color: #63ba7f;
  box-shadow: 0 0 0 3px rgba(63, 185, 108, 0.14);
}

.store-builder-block.is-dragging {
  opacity: 0.5;
  cursor: grabbing;
}

.store-builder-block.is-drop-target {
  border-color: #63ba7f;
  box-shadow: 0 0 0 3px rgba(63, 185, 108, 0.18);
}

.store-builder-block-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  align-items: center;
  padding: 0.66rem 0.78rem;
  border-bottom: 1px solid #e6efe8;
  background: #f7fbf8;
}

.store-builder-block-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.44rem;
  border: 0;
  background: transparent;
  color: #236f43;
  font-weight: 800;
  text-transform: capitalize;
  cursor: pointer;
}

.store-builder-block-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.38rem;
}

.store-builder-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid #dae8de;
  background: #ffffff;
  color: #2e5f44;
  cursor: pointer;
}

.store-builder-icon-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.store-builder-icon-button.is-danger {
  color: #a34646;
}

.store-builder-block-preview {
  padding: 0.76rem;
  cursor: pointer;
}

.store-builder-settings-head {
  display: grid;
  gap: 0.18rem;
}

.store-builder-settings-head h3 {
  margin: 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  color: #1f6b42;
  text-transform: capitalize;
}

.store-builder-settings-fields {
  display: grid;
  gap: 0.78rem;
}

.store-builder-settings-fields textarea,
.store-builder-settings-fields input,
.store-builder-settings-fields select,
.store-builder-form-grid textarea,
.store-builder-form-grid input,
.store-builder-form-grid select,
.store-collaborator-form textarea,
.store-collaborator-form input,
.store-collaborator-form select {
  width: 100%;
  border-radius: 16px;
  border: 1px solid #d8e6dd;
  background: #ffffff;
}

.store-builder-form-grid {
  display: grid;
  gap: 0.78rem;
}

.store-builder-toggle {
  display: flex;
  align-items: center;
  gap: 0.58rem;
  padding: 0.78rem 0.9rem;
  border-radius: 18px;
  border: 1px solid #dce8df;
  background: #f8fcf9;
  color: #3a5f49;
  font-weight: 700;
}

.store-builder-picker-wrap {
  display: grid;
  gap: 0.66rem;
}

.creator-hub-field-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: #466955;
}

.store-builder-pill-grid {
  display: grid;
  gap: 0.54rem;
}

.store-builder-pill {
  display: flex;
  align-items: start;
  gap: 0.6rem;
  padding: 0.7rem 0.82rem;
  border-radius: 18px;
  border: 1px solid #dce9df;
  background: #f9fcfa;
  cursor: pointer;
}

.store-builder-pill.is-selected {
  border-color: #79c391;
  background: rgba(63, 185, 108, 0.1);
}

.store-builder-pill input {
  width: auto;
  margin-top: 0.1rem;
}

.store-builder-pill-main {
  display: grid;
  gap: 0.16rem;
}

.store-builder-pill-main strong {
  color: #1f6b42;
}

.store-builder-pill-main small {
  color: #688170;
}

.store-builder-member-picker {
  border: 1px solid #dce9df;
  border-radius: 18px;
  background: #fbfdfc;
  overflow: hidden;
}

.store-builder-member-picker summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.82rem 0.92rem;
  cursor: pointer;
}

.store-builder-member-picker summary::-webkit-details-marker {
  display: none;
}

.store-builder-member-picker summary span {
  display: grid;
  gap: 0.08rem;
}

.store-builder-member-picker summary strong {
  color: #1f6b42;
  font-size: 0.92rem;
}

.store-builder-member-picker summary small {
  color: #6b8474;
  font-size: 0.8rem;
}

.store-builder-member-picker summary i {
  color: #5d7a67;
  transition: transform 0.2s ease;
}

.store-builder-member-picker[open] summary i {
  transform: rotate(180deg);
}

.store-builder-member-options {
  display: grid;
  gap: 0.54rem;
  padding: 0 0.82rem 0.82rem;
}

.store-builder-member-option {
  display: flex;
  align-items: start;
  gap: 0.64rem;
  padding: 0.74rem 0.82rem;
  border-radius: 16px;
  border: 1px solid #dce9df;
  background: #f8fcf9;
  cursor: pointer;
}

.store-builder-member-option.is-selected {
  border-color: #7dc594;
  background: rgba(63, 185, 108, 0.1);
}

.store-builder-member-option input {
  width: auto;
  margin-top: 0.12rem;
}

.store-builder-member-option-main {
  display: grid;
  gap: 0.1rem;
}

.store-builder-member-option-main strong {
  color: #1f6b42;
  font-size: 0.92rem;
}

.store-builder-member-option-main small {
  color: #6b8474;
  font-size: 0.8rem;
}

.store-builder-upload-wrap {
  display: grid;
  gap: 0.62rem;
}

.store-thumb-preview {
  display: grid;
  place-items: center;
  min-height: 170px;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid #dce9de;
  background: #f7fbf8;
}

.store-thumb-preview img {
  width: 100%;
  height: 100%;
  max-height: 240px;
  object-fit: cover;
  display: block;
}

.store-thumb-preview.is-fallback {
  padding: 1rem;
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.62), transparent 36%),
    linear-gradient(135deg, #edf8ef 0%, #dff2e4 100%);
}

.store-thumb-preview.is-fallback strong {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: center;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1.34rem;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #2b7248;
}

.store-thumb-clear {
  justify-self: start;
  border: 1px solid #d6e4da;
  border-radius: 12px;
  background: #ffffff;
  color: #486b58;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 800;
  padding: 0.54rem 0.82rem;
  cursor: pointer;
}

.store-thumb-clear:hover {
  border-color: #bdd7c7;
  background: #f8fcf9;
}

.store-builder-image-preview {
  display: grid;
  place-items: center;
  min-height: 170px;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid #dce9de;
  background: #f7fbf8;
}

.store-builder-image-preview img {
  width: 100%;
  height: 100%;
  max-height: 260px;
  object-fit: cover;
  display: block;
}

.store-builder-image-preview.is-empty {
  color: #6a8473;
}

.store-collaborator-form {
  display: grid;
  gap: 0.74rem;
}

.store-collaborator-form .creator-hub-kb,
.store-collaborator-form .creator-resource-add {
  width: 100%;
  justify-content: center;
  box-sizing: border-box;
}

.store-collaborators-list {
  display: grid;
  gap: 0.58rem;
}

.store-collaborator-card {
  display: flex;
  justify-content: space-between;
  gap: 0.72rem;
  align-items: center;
  flex-wrap: wrap;
  padding: 0.76rem 0.84rem;
  border-radius: 18px;
  border: 1px solid #dce8df;
  background: #fbfdfc;
}

.store-collaborator-main {
  display: flex;
  align-items: center;
  gap: 0.64rem;
  min-width: 0;
  flex: 1 1 180px;
}

.store-collaborator-main strong {
  display: block;
  color: #1f6b42;
}

.store-collaborator-main span {
  display: block;
  font-size: 0.84rem;
  color: #688170;
}

.store-collaborator-actions {
  display: flex;
  align-items: center;
  gap: 0.46rem;
  flex: 1 1 220px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.store-collaborator-role-select {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 1 1 184px;
  min-width: 0;
  padding: 0.34rem 2rem 0.34rem 0.72rem;
  border-radius: 16px;
  border: 1px solid #dce9df;
  background: linear-gradient(180deg, #ffffff 0%, #f8fcf9 100%);
  box-shadow: 0 10px 18px rgba(37, 74, 51, 0.05);
}

.store-collaborator-role-label {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7a907f;
  margin-right: 0.48rem;
}

.store-collaborator-role-select select {
  width: 100%;
  min-width: 0;
  border: 0;
  padding: 0;
  background: transparent;
  color: #235f40;
  font-size: 0.88rem;
  font-weight: 800;
  box-shadow: none;
  appearance: none;
  cursor: pointer;
}

.store-collaborator-role-select i {
  position: absolute;
  right: 0.72rem;
  top: 50%;
  transform: translateY(-50%);
  color: #5d7a67;
  font-size: 0.76rem;
}

.store-collaborator-role {
  min-height: 42px;
  padding-inline: 0.94rem;
  background: linear-gradient(180deg, #eff9f1 0%, #e4f5e8 100%);
  border: 1px solid #c9e6d2;
  color: #1f7849;
}

.store-collaborator-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid #efd4d6;
  background: linear-gradient(180deg, #fff7f7 0%, #ffefef 100%);
  color: #a3484d;
  box-shadow: 0 10px 18px rgba(135, 55, 63, 0.08);
  cursor: pointer;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.store-collaborator-delete:hover {
  transform: translateY(-1px);
  border-color: #e6bcc0;
  box-shadow: 0 14px 24px rgba(135, 55, 63, 0.12);
}

.store-public-empty {
  width: min(860px, 100%);
  margin: 0 auto;
}

@media (max-width: 1320px) {
  .store-builder-layout {
    grid-template-columns: 240px minmax(0, 1fr);
  }

  .store-builder-sidebar {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
}

@media (max-width: 940px) {
  .store-list-card,
  .store-product-card {
    grid-template-columns: 1fr;
  }

  .store-list-actions {
    min-width: 0;
    width: 100%;
  }

  .store-product-thumb {
    width: 100%;
    min-width: 0;
    max-width: 280px;
  }

  .store-builder-topbar,
  .store-public-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .store-builder-layout {
    grid-template-columns: 1fr;
  }

  .store-builder-sidebar {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .store-public-main,
  .store-builder-main {
    padding: 0.8rem 0.72rem 1.4rem;
  }

  .store-list-card,
  .store-builder-topbar,
  .store-builder-card,
  .store-builder-canvas,
  .store-public-head,
  .store-block {
    padding: 0.74rem;
  }

  .store-builder-topbar-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .store-builder-topbar-actions > * {
    flex: 1 1 auto;
  }

  .store-list-actions {
    grid-template-columns: 1fr;
  }

  .store-collaborator-card {
    align-items: start;
    flex-direction: column;
  }
}

.referrals-panel,
.referrals-activity-panel {
  margin-top: 0.84rem;
}

.referrals-list {
  margin-top: 0.72rem;
  display: grid;
  gap: 0.72rem;
}

.referral-row {
  border: 1px solid #d7e6dc;
  border-radius: 14px;
  background: #ffffff;
  padding: 0.76rem;
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) 280px;
  gap: 0.84rem;
  box-shadow: 0 10px 24px rgba(33, 73, 48, 0.05);
}

.referral-row.is-unavailable {
  opacity: 0.82;
}

.referral-main {
  min-width: 0;
  display: grid;
  gap: 0.72rem;
}

.referral-head {
  min-width: 0;
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 0.78rem;
  align-items: start;
}

.referral-thumb {
  position: relative;
  border: 1px solid #d4e3d9;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #edf6ef, #e1efe4);
}

.referral-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.referral-thumb-fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 0.7rem;
  background: linear-gradient(135deg, #dff2e4, #cbe9d2);
}

.referral-thumb-fallback span {
  color: #1f6d44;
  text-align: center;
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.2;
}

.referral-thumb-fallback.is-generic {
  background: linear-gradient(135deg, #eef5f0, #ddebe1);
}

.referral-thumb-fallback.is-generic i {
  color: #2f7f4d;
  font-size: 1.2rem;
}

.referral-head-copy {
  min-width: 0;
  display: grid;
  gap: 0.36rem;
}

.referral-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.48rem;
}

.referral-title-row h3 {
  margin: 0;
  color: #1f6a44;
  font-size: 1.03rem;
  line-height: 1.25;
}

.referral-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0.26rem 0.66rem;
  font-size: 0.72rem;
  font-weight: 800;
}

.referral-status-badge.is-active {
  background: #edf9f0;
  color: #227346;
  border: 1px solid #cce5d3;
}

.referral-status-badge.is-paused {
  background: #fff7eb;
  color: #aa7224;
  border: 1px solid #efd7ab;
}

.referral-destination-line,
.referral-note {
  margin: 0;
  color: #5d7969;
  font-size: 0.79rem;
  line-height: 1.45;
}

.referral-destination-line {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.38rem;
  font-weight: 700;
}

.referral-destination-line i {
  color: #4d8a66;
}

.referral-link-preview {
  display: grid;
  gap: 0.22rem;
  border: 1px solid #d8e6dc;
  border-radius: 11px;
  background: #f9fcfa;
  padding: 0.58rem 0.68rem;
}

.referral-link-preview span {
  color: #698273;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.referral-link-preview code,
.referral-preview-box code {
  color: #275f40;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.45;
  word-break: break-all;
  white-space: normal;
}

.referral-metrics {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.42rem;
}

.referral-metrics div {
  border: 1px solid #dbe8df;
  border-radius: 10px;
  background: #fbfefc;
  padding: 0.48rem 0.56rem;
}

.referral-metrics dt {
  margin: 0;
  color: #6c8375;
  font-size: 0.68rem;
  font-weight: 800;
}

.referral-metrics dd {
  margin: 0.18rem 0 0;
  color: #22583a;
  font-size: 0.86rem;
  font-weight: 800;
}

.referral-side {
  border-left: 1px solid #e2ebe5;
  padding-left: 0.8rem;
  display: grid;
  align-content: start;
  gap: 0.62rem;
}

.referral-side-meta {
  display: grid;
  gap: 0.38rem;
}

.referral-side-meta span {
  color: #617d6d;
  font-size: 0.76rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
}

.referral-side-meta i {
  color: #4d8965;
}

.referral-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.44rem;
}

.referral-action {
  border: 1px solid #d6e4da;
  border-radius: 10px;
  background: #ffffff;
  color: #2d6446;
  min-height: 40px;
  padding: 0.62rem 0.78rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
  text-decoration: none;
}

.referral-action:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: #bed9c7;
  box-shadow: 0 12px 22px rgba(37, 71, 49, 0.08);
}

.referral-action:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.referral-action.is-copy,
.referral-action.is-open,
.referral-action.is-edit,
.referral-action.is-toggle {
  background: linear-gradient(180deg, #fbfefc 0%, #f2f8f4 100%);
}

.referral-action.is-delete {
  background: linear-gradient(180deg, #fff7f7 0%, #ffefef 100%);
  border-color: #efd3d3;
  color: #ad4f56;
}

.referral-preview-box {
  margin-top: 0.74rem;
  border: 1px solid #d8e5db;
  border-radius: 12px;
  background: #fbfefc;
  padding: 0.72rem 0.82rem;
  display: grid;
  gap: 0.26rem;
}

.referral-preview-label {
  color: #687f72;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.referral-modal-panel {
  max-width: 860px;
}

.referral-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.referral-form-grid .creator-hub-field {
  min-width: 0;
}

.referral-form-grid .creator-hub-field input,
.referral-form-grid .creator-hub-field select,
.referral-form-grid .creator-hub-field textarea {
  width: 100%;
  min-width: 0;
}

.referral-form-grid .creator-hub-field select {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.referral-form-grid .creator-hub-field input[aria-invalid="true"] {
  border-color: #e2a2aa;
  box-shadow: 0 0 0 3px rgba(192, 77, 96, 0.12);
}

.referral-code-status {
  min-height: 1.1rem;
  color: #71877a;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.35;
}

.referral-code-status.is-success {
  color: #2b7b49;
}

.referral-code-status.is-error {
  color: #b24454;
}

.referral-destination-field {
  grid-column: 1 / -1;
}

.referrals-activity-table td:nth-child(5),
.referrals-activity-table td:nth-child(6) {
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .referral-row {
    grid-template-columns: 1fr;
  }

  .referral-side {
    border-left: 0;
    border-top: 1px solid #e2ebe5;
    padding-left: 0;
    padding-top: 0.8rem;
  }
}

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

  .referral-form-grid {
    grid-template-columns: 1fr;
  }

  .referral-destination-field {
    grid-column: auto;
  }

  .referral-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .referral-actions {
    grid-template-columns: 1fr;
  }
}

.coupon-panel,
.coupon-redemptions-panel {
  margin-top: 0.84rem;
}

.coupon-list {
  margin-top: 0.72rem;
  display: grid;
  gap: 0.72rem;
}

.coupon-row {
  border: 1px solid #d7e6dc;
  border-radius: 14px;
  background: #ffffff;
  padding: 0.78rem;
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) 300px;
  gap: 0.86rem;
  box-shadow: 0 10px 24px rgba(33, 73, 48, 0.05);
}

.coupon-main {
  min-width: 0;
  display: grid;
  gap: 0.72rem;
}

.coupon-head {
  min-width: 0;
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 0.8rem;
  align-items: start;
}

.coupon-thumb {
  position: relative;
  border: 1px solid #d4e3d9;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #edf6ef, #e1efe4);
}

.coupon-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.coupon-thumb-fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 0.72rem;
  text-align: center;
}

.coupon-thumb-fallback.is-all {
  gap: 0.3rem;
  background: linear-gradient(135deg, #e3f4e7, #d4edd9);
  color: #227447;
}

.coupon-thumb-fallback.is-store {
  background: linear-gradient(135deg, #daf0df, #cbebd3);
}

.coupon-thumb-fallback.is-store span,
.coupon-thumb-fallback.is-all span {
  color: #206c44;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.2;
}

.coupon-thumb-fallback.is-all i,
.coupon-thumb-fallback.is-generic i {
  font-size: 1.1rem;
}

.coupon-thumb-fallback.is-generic {
  background: linear-gradient(135deg, #eef5f0, #ddebe1);
  color: #2f7f4d;
}

.coupon-head-copy {
  min-width: 0;
  display: grid;
  gap: 0.36rem;
}

.coupon-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.48rem;
}

.coupon-title-row h3 {
  margin: 0;
  color: #1f6a44;
  font-size: 1.03rem;
  line-height: 1.25;
}

.coupon-code-badge,
.coupon-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0.28rem 0.7rem;
  font-size: 0.72rem;
  font-weight: 800;
}

.coupon-code-badge {
  border: 1px solid #d8e5dc;
  background: #f7fbf8;
  color: #285a3e;
  letter-spacing: 0.06em;
}

.coupon-status-badge.is-active {
  background: #edf9f0;
  color: #227346;
  border: 1px solid #cce5d3;
}

.coupon-status-badge.is-paused {
  background: #fff7eb;
  color: #aa7224;
  border: 1px solid #efd7ab;
}

.coupon-status-badge.is-scheduled {
  background: #eef4ff;
  color: #3c68b7;
  border: 1px solid #d5e0fb;
}

.coupon-status-badge.is-expired {
  background: #f4f6f5;
  color: #6f7e75;
  border: 1px solid #dde6e0;
}

.coupon-target-line,
.coupon-note {
  margin: 0;
  color: #5d7969;
  font-size: 0.79rem;
  line-height: 1.45;
}

.coupon-target-line {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
}

.coupon-target-line i {
  color: #4d8a66;
}

.coupon-preview-box {
  margin-top: 0.74rem;
  border: 1px solid #d8e5db;
  border-radius: 12px;
  background: #fbfefc;
  padding: 0.72rem 0.82rem;
  display: grid;
  gap: 0.26rem;
}

.coupon-preview-box.is-inline {
  margin-top: 0.1rem;
}

.coupon-preview-label {
  color: #687f72;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.coupon-preview-box code {
  color: #275f40;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.45;
  word-break: break-all;
  white-space: normal;
}

.coupon-preview-box small {
  color: #6a7f73;
  font-size: 0.77rem;
  line-height: 1.45;
}

.coupon-metrics {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.42rem;
}

.coupon-metrics div {
  border: 1px solid #dbe8df;
  border-radius: 10px;
  background: #fbfefc;
  padding: 0.5rem 0.58rem;
}

.coupon-metrics dt {
  margin: 0;
  color: #6c8375;
  font-size: 0.68rem;
  font-weight: 800;
}

.coupon-metrics dd {
  margin: 0.18rem 0 0;
  color: #22583a;
  font-size: 0.86rem;
  font-weight: 800;
}

.coupon-side {
  border-left: 1px solid #e2ebe5;
  padding-left: 0.82rem;
  display: grid;
  align-content: start;
  gap: 0.64rem;
}

.coupon-side-meta {
  display: grid;
  gap: 0.38rem;
}

.coupon-side-meta span {
  color: #617d6d;
  font-size: 0.76rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
}

.coupon-side-meta i {
  color: #4d8965;
}

.coupon-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.44rem;
}

.coupon-action {
  border: 1px solid #d6e4da;
  border-radius: 10px;
  background: #ffffff;
  color: #2d6446;
  min-height: 40px;
  padding: 0.62rem 0.78rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
  text-decoration: none;
}

.coupon-action:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: #bed9c7;
  box-shadow: 0 12px 22px rgba(37, 71, 49, 0.08);
}

.coupon-action:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.coupon-action.is-copy,
.coupon-action.is-open,
.coupon-action.is-edit,
.coupon-action.is-toggle {
  background: linear-gradient(180deg, #fbfefc 0%, #f2f8f4 100%);
}

.coupon-action.is-delete {
  background: linear-gradient(180deg, #fff7f7 0%, #ffefef 100%);
  border-color: #efd3d3;
  color: #ad4f56;
}

.coupon-modal-panel {
  max-width: 860px;
}

.coupon-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.coupon-form-grid .creator-hub-field {
  min-width: 0;
}

.coupon-form-grid .creator-hub-field input,
.coupon-form-grid .creator-hub-field select,
.coupon-form-grid .creator-hub-field textarea {
  width: 100%;
  min-width: 0;
}

.coupon-form-grid .creator-hub-field input[aria-invalid="true"] {
  border-color: #e2a2aa;
  box-shadow: 0 0 0 3px rgba(192, 77, 96, 0.12);
}

.coupon-target-field {
  grid-column: 1 / -1;
}

.coupon-code-status {
  min-height: 1.1rem;
  color: #71877a;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.35;
}

.coupon-code-status.is-success {
  color: #2b7b49;
}

.coupon-code-status.is-error {
  color: #b24454;
}

.coupon-redemptions-table td:nth-child(5),
.coupon-redemptions-table td:nth-child(6) {
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .coupon-row {
    grid-template-columns: 1fr;
  }

  .coupon-side {
    border-left: 0;
    border-top: 1px solid #e2ebe5;
    padding-left: 0;
    padding-top: 0.8rem;
  }
}

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

  .coupon-form-grid {
    grid-template-columns: 1fr;
  }

  .coupon-target-field {
    grid-column: auto;
  }

  .coupon-metrics,
  .coupon-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .coupon-metrics,
  .coupon-actions {
    grid-template-columns: 1fr;
  }
}

.resource-view-support-card,
#resourceViewSupportCard {
  display: grid;
  gap: 0.7rem;
}

.resource-view-message-link,
#resourceViewSupportLink,
#resourceViewHelpLink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.46rem;
  min-height: 42px;
  border-radius: 11px;
  padding: 0.72rem 0.96rem;
  font-size: 0.82rem;
  font-weight: 800;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.resource-view-message-link {
  border: 1px solid #3ba667;
  background: linear-gradient(135deg, #43b86e, #2d995a);
  color: #ffffff;
  box-shadow: 0 14px 28px rgba(53, 149, 90, 0.2);
}

.resource-view-message-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 30px rgba(53, 149, 90, 0.24);
}

#resourceViewSupportLink,
#resourceViewHelpLink {
  border: 1px solid #d9e8de;
  background: #f9fcfa;
  color: #24563d;
}

#resourceViewSupportLink:hover,
#resourceViewHelpLink:hover {
  border-color: #b9d7c4;
  background: #f0f8f3;
}

.messages-page-main {
  width: min(1280px, calc(100vw - 2rem));
  margin: 0 auto;
  padding: 1.2rem 0 2.2rem;
}

.messages-hero {
  margin-bottom: 1rem;
  border: 1px solid #d9e8de;
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, rgba(94, 194, 129, 0.15), transparent 34%),
    linear-gradient(180deg, #ffffff, #fbfefc);
  padding: 1.4rem 1.6rem;
  box-shadow: 0 22px 48px rgba(19, 54, 33, 0.08);
}

.messages-kicker {
  margin: 0 0 0.26rem;
  color: #4b8c67;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.messages-hero h1 {
  margin: 0;
  color: #1f603d;
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1.05;
}

.messages-hero p:last-child {
  max-width: 760px;
  margin: 0.7rem 0 0;
  color: #587364;
  font-size: 0.98rem;
  line-height: 1.72;
}

.messages-auth-card {
  border: 1px solid #d9e8de;
  border-radius: 28px;
  background: #ffffff;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 22px 46px rgba(19, 54, 33, 0.07);
}

.messages-auth-icon {
  width: 74px;
  height: 74px;
  margin: 0 auto 1rem;
  border-radius: 22px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(67, 184, 110, 0.12), rgba(45, 153, 90, 0.18));
  color: #2d995a;
  font-size: 1.7rem;
}

.messages-auth-card h2 {
  margin: 0;
  color: #21593a;
  font-size: 1.45rem;
}

.messages-auth-card p {
  max-width: 620px;
  margin: 0.8rem auto 0;
  color: #647d70;
  line-height: 1.7;
}

.messages-auth-actions {
  margin-top: 1.1rem;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.72rem;
}

.messages-shell {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.messages-sidebar,
.messages-panel {
  border: 1px solid #d9e8de;
  border-radius: 28px;
  background: #ffffff;
  box-shadow: 0 22px 46px rgba(19, 54, 33, 0.06);
}

.messages-sidebar {
  padding: 1rem;
  display: grid;
  gap: 0.85rem;
  position: sticky;
  top: 1rem;
}

.messages-sidebar-head h2 {
  margin: 0;
  color: #1d5a3a;
  font-size: 1.16rem;
}

.messages-sidebar-head p {
  margin: 0.32rem 0 0;
  color: #6a8174;
  font-size: 0.84rem;
  font-weight: 700;
}

.messages-search {
  display: flex;
  align-items: center;
  gap: 0.66rem;
  border: 1px solid #d7e6dc;
  border-radius: 14px;
  background: #fbfefc;
  padding: 0 0.88rem;
  min-height: 46px;
}

.messages-search i {
  color: #61806d;
}

.messages-search input {
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  color: #234b38;
  font: inherit;
}

.messages-thread-list {
  display: grid;
  gap: 0.7rem;
}

.messages-thread-item {
  width: 100%;
  border: 1px solid #d8e6dd;
  border-radius: 18px;
  background: #fcfffd;
  padding: 0.72rem;
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.72rem;
  text-align: left;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.messages-thread-item:hover,
.messages-thread-item.is-active {
  border-color: #7fd19b;
  background: #f8fdf9;
  box-shadow: 0 14px 28px rgba(55, 133, 84, 0.12);
  transform: translateY(-1px);
}

.messages-thread-thumb {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #d9efe0, #ecf8f0);
  display: grid;
  place-items: center;
  color: #33734e;
  font-weight: 800;
}

.messages-thread-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.messages-thread-content {
  min-width: 0;
  display: grid;
  gap: 0.2rem;
}

.messages-thread-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.messages-thread-topline strong {
  color: #22573a;
  font-size: 0.9rem;
}

.messages-thread-topline time,
.messages-thread-product,
.messages-thread-preview {
  color: #6a8174;
  font-size: 0.78rem;
}

.messages-thread-product {
  font-weight: 700;
}

.messages-thread-preview {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.45;
}

.messages-thread-badge {
  min-width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: linear-gradient(135deg, #43b86e, #2d995a);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 0 0.36rem;
}

.messages-panel {
  min-height: 680px;
  padding: 1rem;
}

.messages-empty,
.messages-empty-state,
.messages-thread-placeholder {
  border: 1px dashed #d5e5db;
  border-radius: 22px;
  background: #fbfefc;
  color: #6a8074;
}

.messages-empty {
  margin: 0;
  padding: 1rem;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
}

.messages-empty-state {
  min-height: 100%;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 2rem;
}

.messages-empty-state h2 {
  margin: 0.9rem 0 0;
  color: #1e5d3b;
}

.messages-empty-state p {
  max-width: 520px;
  margin: 0.7rem auto 0;
  line-height: 1.7;
}

.messages-empty-illustration {
  width: 84px;
  height: 84px;
  border-radius: 26px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(67, 184, 110, 0.14), rgba(45, 153, 90, 0.22));
  color: #2b9559;
  font-size: 2rem;
}

.messages-thread-view {
  display: grid;
  gap: 0.88rem;
  min-height: 100%;
  max-width: 960px;
  margin: 0 auto;
  width: 100%;
}

.messages-thread-head {
  border: 1px solid #d9e7de;
  border-radius: 22px;
  background: linear-gradient(180deg, #ffffff, #fbfefc);
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
}

.messages-thread-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.82rem;
}

.messages-partner-avatar,
.messages-avatar {
  --avatar-bg: #3fb96c;
  --avatar-zoom: 1;
  --avatar-position-x: 50%;
  --avatar-position-y: 50%;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  overflow: hidden;
  display: inline-grid;
  place-items: center;
  background: var(--avatar-bg);
  color: #ffffff;
  font-size: 1.28rem;
  font-weight: 800;
  flex-shrink: 0;
}

.messages-avatar.has-image img,
.messages-partner-avatar.has-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(var(--avatar-zoom));
  transform-origin: var(--avatar-position-x) var(--avatar-position-y);
}

.messages-thread-copy {
  min-width: 0;
}

.messages-thread-kicker {
  margin: 0 0 0.16rem;
  color: #538569;
  font-size: 0.77rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.messages-thread-copy h2 {
  margin: 0;
  color: #1f5d3b;
  font-size: 1.34rem;
}

.messages-thread-copy p:last-child {
  margin: 0.36rem 0 0;
  color: #657d70;
  line-height: 1.55;
}

.messages-open-product {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 42px;
  border: 1px solid #d8e7dd;
  border-radius: 12px;
  padding: 0.7rem 0.96rem;
  background: #fbfefc;
  color: #24563d;
  font-size: 0.8rem;
  font-weight: 800;
  text-decoration: none;
}

.messages-composer-context {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  border: 1px solid #dbe9e0;
  border-radius: 14px;
  background: #f9fcfa;
  color: #4d7561;
  padding: 0.78rem 0.92rem;
  font-size: 0.84rem;
  font-weight: 700;
}

.messages-composer-context strong {
  color: #21583a;
}

.messages-list {
  min-height: 360px;
  max-height: 540px;
  overflow-y: auto;
  display: grid;
  gap: 0.78rem;
  padding-right: 0.25rem;
  align-items: start;
}

.messages-thread-placeholder {
  padding: 1.2rem;
  text-align: center;
}

.messages-thread-placeholder i {
  color: #4b8a67;
  font-size: 1.4rem;
}

.messages-thread-placeholder p {
  margin: 0.7rem 0 0;
}

.messages-bubble {
  width: fit-content;
  max-width: min(560px, 78%);
  border: 1px solid #dbe7de;
  border-radius: 20px 20px 20px 8px;
  background: linear-gradient(180deg, #ffffff, #f8fcfa);
  padding: 0.82rem 0.96rem;
  display: grid;
  gap: 0.4rem;
  justify-self: start;
  box-shadow: 0 10px 22px rgba(20, 58, 35, 0.06);
}

.messages-bubble.is-mine {
  border-color: #bfe2ca;
  border-radius: 20px 20px 8px 20px;
  background: linear-gradient(180deg, #f1fbf5, #e4f6ea);
  justify-self: end;
  box-shadow: 0 12px 24px rgba(43, 135, 79, 0.12);
}

.messages-bubble-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.messages-bubble-head strong {
  color: #20553a;
  font-size: 0.82rem;
}

.messages-bubble-head time {
  color: #738679;
  font-size: 0.73rem;
  font-weight: 700;
}

.messages-bubble-body {
  color: #314c3d;
  font-size: 0.9rem;
  line-height: 1.68;
  word-break: break-word;
}

.messages-form {
  border-top: 1px solid #e3ece7;
  padding-top: 0.95rem;
  display: grid;
  gap: 0.78rem;
  max-width: 760px;
}

.messages-compose-field {
  display: grid;
  gap: 0.5rem;
}

.messages-compose-field span {
  color: #4f7b64;
  font-size: 0.8rem;
  font-weight: 800;
}

.messages-compose-field textarea {
  width: 100%;
  resize: vertical;
  min-height: 132px;
  border: 1px solid #d7e5dc;
  border-radius: 18px;
  background: #fbfefc;
  padding: 0.95rem 1rem;
  color: #224937;
  font: inherit;
  line-height: 1.65;
  outline: none;
}

.messages-compose-field textarea:focus {
  border-color: #66bb84;
  box-shadow: 0 0 0 4px rgba(77, 167, 106, 0.12);
}

.messages-form-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
}

#messagesSendButton {
  min-height: 48px;
  padding: 0.82rem 1.2rem;
  border-radius: 15px;
  border: 1px solid #2f9d5d;
  background: linear-gradient(135deg, #45bc72, #2f9958);
  color: #ffffff;
  font-weight: 800;
  letter-spacing: 0.01em;
  box-shadow: 0 16px 30px rgba(47, 153, 88, 0.24);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

#messagesSendButton:hover {
  transform: translateY(-1px);
  filter: brightness(1.02);
  box-shadow: 0 18px 34px rgba(47, 153, 88, 0.28);
}

#messagesSendButton:active {
  transform: translateY(0);
}

#messagesSendButton i {
  font-size: 0.95rem;
}

.messages-reply-hint {
  margin: 0;
  color: #6b8275;
  font-size: 0.8rem;
  line-height: 1.6;
}

.messages-feedback {
  margin: 0;
  min-height: 22px;
  color: #587364;
  font-size: 0.82rem;
  font-weight: 700;
}

.messages-feedback.is-success {
  color: #238453;
}

.messages-feedback.is-error {
  color: #b14545;
}

@media (max-width: 1040px) {
  .messages-shell {
    grid-template-columns: 1fr;
  }

  .messages-sidebar {
    position: static;
  }
}

@media (max-width: 720px) {
  .messages-page-main {
    width: min(100vw - 1rem, 100%);
    padding-top: 0.8rem;
  }

  .messages-hero,
  .messages-sidebar,
  .messages-panel,
  .messages-auth-card {
    border-radius: 22px;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .messages-thread-item {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .messages-thread-badge {
    grid-column: 2;
    justify-self: end;
  }

  .messages-thread-head,
  .messages-form-foot {
    flex-direction: column;
    align-items: flex-start;
  }

  .messages-bubble {
    width: auto;
    max-width: 100%;
  }
}

.catalog-empty-state {
  border: 1px dashed #d6e6dc;
  border-radius: 24px;
  background: #fbfefc;
  padding: 2rem 1.4rem;
  text-align: center;
  color: #617b6d;
}

.catalog-empty-state i {
  font-size: 1.8rem;
  color: #2f9958;
}

.catalog-empty-state h2,
.catalog-empty-state h3 {
  margin: 0.85rem 0 0;
  color: #1f5d3b;
}

.catalog-empty-state p {
  margin: 0.55rem 0 0;
  line-height: 1.7;
}

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

.creator-directory-card {
  border: 1px solid #d8e7dd;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 20px 42px rgba(19, 54, 33, 0.06);
  padding: 1rem;
  display: grid;
  gap: 0.95rem;
}

.creator-directory-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.creator-directory-main {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.creator-directory-avatar {
  --avatar-bg: #3FB96C;
  --avatar-zoom: 1;
  --avatar-position-x: 50%;
  --avatar-position-y: 50%;
  width: 68px;
  height: 68px;
  border-radius: 22px;
  overflow: hidden;
  display: inline-grid;
  place-items: center;
  background: var(--avatar-bg);
  color: #ffffff;
  font-size: 1.45rem;
  font-weight: 800;
  flex-shrink: 0;
}

.creator-directory-avatar.has-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(var(--avatar-zoom));
  transform-origin: var(--avatar-position-x) var(--avatar-position-y);
}

.creator-directory-copy {
  min-width: 0;
  display: grid;
  gap: 0.22rem;
}

.creator-directory-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.creator-directory-title-row h3 {
  margin: 0;
  color: #185737;
  font-size: 1.22rem;
}

.creator-directory-verified {
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  border: 1px solid #cbe7d5;
  border-radius: 999px;
  background: #f3fbf6;
  color: #287f4f;
  padding: 0.32rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 800;
}

.creator-directory-handle {
  margin: 0;
  color: #6b8275;
  font-size: 0.84rem;
  font-weight: 700;
}

.creator-directory-headline {
  margin: 0.18rem 0 0;
  color: #375845;
  line-height: 1.62;
}

.creator-directory-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.46rem;
  min-height: 44px;
  border: 1px solid #3aa566;
  border-radius: 14px;
  background: linear-gradient(135deg, #46bc72, #2f9958);
  color: #ffffff;
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 800;
  padding: 0.74rem 1rem;
  box-shadow: 0 14px 26px rgba(47, 153, 88, 0.18);
  white-space: nowrap;
}

.creator-directory-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.68rem;
}

.creator-directory-stats article {
  border: 1px solid #d9e7de;
  border-radius: 16px;
  background: #fbfefc;
  padding: 0.8rem 0.9rem;
  display: grid;
  gap: 0.16rem;
}

.creator-directory-stats strong {
  color: #175636;
  font-size: 1rem;
}

.creator-directory-stats span {
  color: #6c8376;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.creator-directory-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.creator-directory-specialties {
  display: flex;
  flex-wrap: wrap;
  gap: 0.44rem;
}

.creator-directory-specialties span {
  border: 1px solid #d6e6dc;
  border-radius: 999px;
  background: #f8fcf9;
  color: #2a6143;
  padding: 0.34rem 0.68rem;
  font-size: 0.75rem;
  font-weight: 800;
}

.creator-directory-previews {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.36rem;
}

.creator-directory-thumb {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #d8e6dc;
  background: #edf7f0;
  flex-shrink: 0;
}

.creator-directory-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.creator-public-main {
  width: min(1280px, calc(100vw - 2rem));
  margin: 0 auto;
  padding: 1rem 0 2.2rem;
}

.creator-public-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) 288px;
  gap: 1rem;
  align-items: start;
}

.creator-public-main-card,
.creator-public-stats {
  border: 1px solid #d8e7dd;
  border-radius: 28px;
  background: #ffffff;
  box-shadow: 0 22px 46px rgba(19, 54, 33, 0.06);
}

.creator-public-main-card {
  position: relative;
  overflow: hidden;
  padding: 1.25rem 1.3rem;
  display: flex;
  align-items: flex-start;
  gap: 1.05rem;
  background:
    radial-gradient(circle at top right, rgba(76, 184, 114, 0.09), transparent 34%),
    linear-gradient(180deg, #ffffff, #fbfefc);
}

.creator-public-avatar {
  width: 96px;
  height: 96px;
  border-radius: 28px;
  font-size: 2rem;
}

.creator-public-copy {
  min-width: 0;
  display: grid;
  gap: 0.46rem;
}

.creator-public-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.creator-public-title-row h1 {
  margin: 0;
  color: #165734;
  font-size: clamp(2rem, 3vw, 2.8rem);
}

.creator-public-handle,
.creator-public-headline,
.creator-public-bio {
  margin: 0;
}

.creator-public-handle {
  color: #678073;
  font-weight: 800;
}

.creator-public-headline {
  color: #1f5339;
  font-size: 1rem;
  font-weight: 700;
}

.creator-public-bio {
  color: #496757;
  line-height: 1.68;
  max-width: 760px;
}

.creator-public-specialties {
  display: flex;
  flex-wrap: wrap;
  gap: 0.48rem;
  margin-top: 0.1rem;
}

.creator-public-specialties span {
  border: 1px solid #d5e6dc;
  border-radius: 999px;
  background: #f8fcf9;
  color: #2c6043;
  padding: 0.38rem 0.74rem;
  font-size: 0.77rem;
  font-weight: 800;
}

.creator-public-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.56rem;
  margin-top: 0.2rem;
}

.creator-public-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.46rem;
  border: 1px solid #d7e6dc;
  border-radius: 12px;
  background: #fbfefc;
  color: #24563d;
  text-decoration: none;
  padding: 0.72rem 0.92rem;
  font-size: 0.82rem;
  font-weight: 800;
}

.creator-public-stats {
  padding: 0.95rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.72rem;
}

.creator-public-stats article {
  border: 1px solid #d9e7de;
  border-radius: 18px;
  background: #fbfefc;
  padding: 0.85rem 0.92rem;
  display: grid;
  gap: 0.18rem;
}

.creator-public-stats strong {
  color: #175636;
  font-size: 1.1rem;
}

.creator-public-stats span {
  color: #6b8275;
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

#creatorPublicProductsShell.catalog-toolbar-shell {
  margin-top: 1rem;
}

#creatorPublicProductsResults.catalog-results-shell {
  padding-top: 0.95rem;
}

#creatorPublicProductsGrid.catalog-products-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
}

#creatorPublicProductsGrid.catalog-products-grid .product-card-item {
  width: 100%;
  max-width: none;
}

#creatorPublicProductsGrid.catalog-products-grid .product-cover {
  aspect-ratio: 16 / 9;
}

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

  .creator-public-hero {
    grid-template-columns: 1fr;
  }

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

  #creatorPublicProductsGrid.catalog-products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .creator-directory-top,
  .creator-directory-bottom,
  .creator-public-main-card {
    flex-direction: column;
  }

  .creator-directory-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .creator-public-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .creator-directory-action {
    width: 100%;
  }

  .creator-public-main {
    width: min(100vw - 1rem, 100%);
    padding-top: 0.8rem;
  }

  #creatorPublicProductsGrid.catalog-products-grid {
    grid-template-columns: 1fr;
  }
}

.apx-main {
  width: 100%;
}

.apx-app {
  width: min(1760px, 100%);
}

.apx-layout {
  display: grid;
  grid-template-columns: 368px minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.apx-sidebar {
  position: sticky;
  top: 86px;
  align-self: start;
  max-height: calc(100vh - 102px);
  overflow: auto;
  border: 1px solid #d6e4dc;
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(77, 180, 114, 0.12), transparent 36%),
    linear-gradient(180deg, #ffffff 0%, #f8fcfa 100%);
  box-shadow: 0 20px 44px rgba(21, 53, 35, 0.08);
  padding: 1rem;
  display: grid;
  gap: 0.8rem;
}

.apx-sidebar-head {
  display: grid;
  gap: 0.38rem;
}

.apx-sidebar-kicker {
  color: #3c8b5b;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.apx-sidebar-head h2 {
  margin: 0;
  color: #145535;
  font-size: 1.5rem;
  font-weight: 900;
}

.apx-sidebar-head p {
  margin: 0;
  color: #5b7869;
  font-size: 0.84rem;
  line-height: 1.6;
}

.apx-sidebar-search {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.52rem;
  min-height: 44px;
  border: 1px solid #d1e2d8;
  border-radius: 13px;
  background: #ffffff;
  padding: 0 0.72rem;
}

.apx-sidebar-search > i {
  color: #648173;
  font-size: 0.84rem;
}

.apx-sidebar-search input {
  width: 100%;
  min-height: 40px;
  border: 0;
  background: transparent;
  color: #28543f;
  font-size: 0.86rem;
  font-weight: 700;
  font-family: var(--font-ui);
  outline: none;
}

.apx-sidebar-nav {
  display: grid;
  gap: 0.62rem;
}

.apx-nav-group {
  display: grid;
  gap: 0.42rem;
}

.apx-nav-group h3 {
  margin: 0;
  padding-left: 0.2rem;
  color: #678074;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.apx-nav-links {
  display: grid;
  gap: 0.42rem;
}

.apx-nav-item {
  width: 100%;
  min-height: 42px;
  border: 1px solid #d6e5dc;
  border-radius: 13px;
  background: #ffffff;
  color: #2f6048;
  display: inline-flex;
  align-items: center;
  gap: 0.58rem;
  font-family: var(--font-ui);
  font-size: 0.88rem;
  font-weight: 800;
  padding: 0.62rem 0.76rem;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    color 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease;
}

.apx-nav-item i {
  width: 18px;
  text-align: center;
}

.apx-nav-item:hover {
  border-color: #bedac9;
  background: #f2faf6;
  color: #1f5c3d;
  transform: translateY(-1px);
}

.apx-nav-item.is-active {
  border-color: #76bb90;
  background: linear-gradient(135deg, #e5f5ec, #f9fdfa);
  color: #1d6b43;
  box-shadow: 0 14px 26px rgba(33, 107, 67, 0.12);
}

.apx-content {
  min-width: 0;
  border: 1px solid #d2e0d8;
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(67, 171, 107, 0.08), transparent 38%),
    linear-gradient(180deg, #ffffff 0%, #f8fcf9 100%);
  box-shadow: 0 22px 46px rgba(21, 53, 35, 0.08);
  padding: 1rem;
  display: grid;
  gap: 0.84rem;
}

.apx-content-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.74rem;
}

.apx-content-heading {
  min-width: 0;
  display: grid;
  gap: 0.24rem;
}

.apx-view-kicker {
  color: #3c8b5b;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.apx-content-heading h1 {
  margin: 0;
  color: #155536;
  font-size: 1.75rem;
  font-weight: 900;
  line-height: 1.1;
}

.apx-content-heading p {
  margin: 0;
  color: #5a7768;
  font-size: 0.9rem;
  line-height: 1.62;
}

.apx-content-head-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.apx-content-head-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.36rem;
  border: 1px solid #d7e5dd;
  border-radius: 999px;
  background: #ffffff;
  color: #416b54;
  font-size: 0.79rem;
  font-weight: 800;
  padding: 0.34rem 0.62rem;
}

.apx-feedback {
  margin: 0;
  border: 1px solid #d7e5dd;
  border-radius: 12px;
  background: #f6fbf8;
  color: #2e5f46;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.5;
  padding: 0.58rem 0.7rem;
}

.apx-feedback[data-tone="error"] {
  border-color: #e7cfcf;
  background: #fff5f5;
  color: #9c4a4a;
}

.apx-feedback[data-tone="success"] {
  border-color: #c9e3d4;
  background: #f3fbf6;
  color: #266646;
}

.apx-view-mount {
  min-width: 0;
  display: grid;
  gap: 0.84rem;
}

.apx-empty {
  margin: 0;
  border: 1px dashed #cedfd5;
  border-radius: 13px;
  background: #f8fcf9;
  color: #5f7a6d;
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  padding: 0.9rem;
}

.apx-modal {
  position: fixed;
  inset: 0;
  z-index: 180;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.apx-modal[hidden] {
  display: none;
}

.apx-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 20, 14, 0.46);
  backdrop-filter: blur(5px);
}

.apx-modal-dialog {
  position: relative;
  width: min(720px, calc(100vw - 1rem));
  max-height: calc(100vh - 1.5rem);
  overflow: auto;
  border: 1px solid #d5e4da;
  border-radius: 20px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbf9 100%);
  box-shadow: 0 28px 56px rgba(16, 42, 28, 0.34);
  padding: 0.9rem;
  display: grid;
  gap: 0.72rem;
}

.apx-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.64rem;
}

.apx-modal-head h2 {
  margin: 0;
  color: #195739;
  font-size: 1.2rem;
  font-weight: 900;
}

.apx-modal-close {
  width: 34px;
  height: 34px;
  border: 1px solid #d5e4da;
  border-radius: 10px;
  background: #ffffff;
  color: #315b46;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.apx-modal-form {
  display: grid;
  gap: 0.66rem;
}

.apx-modal-body {
  display: grid;
  gap: 0.62rem;
}

.apx-modal-body label {
  display: grid;
  gap: 0.26rem;
}

.apx-modal-body label > span {
  color: #3a654f;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.apx-modal-body input,
.apx-modal-body select,
.apx-modal-body textarea {
  width: 100%;
  border: 1px solid #cfe0d6;
  border-radius: 12px;
  background: #ffffff;
  color: #264d39;
  font-size: 0.88rem;
  font-family: var(--font-ui);
  font-weight: 700;
  padding: 0.58rem 0.72rem;
  outline: none;
}

.apx-modal-body textarea {
  min-height: 112px;
  resize: vertical;
}

.apx-modal-body input:focus,
.apx-modal-body select:focus,
.apx-modal-body textarea:focus {
  border-color: #6eb887;
  box-shadow: 0 0 0 4px rgba(79, 173, 111, 0.14);
}

.apx-checkbox-row {
  display: inline-flex !important;
  align-items: center;
  gap: 0.48rem;
}

.apx-checkbox-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #3fae6f;
}

.apx-modal-feedback {
  margin: 0;
  border: 1px solid #ead0d0;
  border-radius: 11px;
  background: #fff5f5;
  color: #964a4a;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.5;
  padding: 0.52rem 0.62rem;
}

.apx-modal-feedback[data-tone="success"] {
  border-color: #cde4d6;
  background: #f3faf6;
  color: #276446;
}

.apx-modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

.apx-modal-actions button {
  min-height: 40px;
  border: 1px solid #d4e3da;
  border-radius: 11px;
  background: #ffffff;
  color: #315f49;
  font-size: 0.82rem;
  font-weight: 800;
  font-family: var(--font-ui);
  padding: 0.54rem 0.82rem;
  cursor: pointer;
}

.apx-modal-actions button[type="submit"] {
  border-color: #2f9358;
  background: linear-gradient(180deg, #44ba72, #2f9559);
  color: #ffffff;
}

body.apx-modal-open {
  overflow: hidden;
}

@media (max-width: 1160px) {
  .apx-layout {
    grid-template-columns: 320px minmax(0, 1fr);
  }
}

@media (max-width: 980px) {
  .apx-layout {
    grid-template-columns: 1fr;
  }

  .apx-sidebar {
    position: static;
    max-height: none;
  }
}

/* Checkout page */
.checkout-body {
  background:
    radial-gradient(circle at 0% 0%, rgba(63, 185, 108, 0.14), transparent 26%),
    radial-gradient(circle at 95% 8%, rgba(63, 185, 108, 0.1), transparent 24%),
    #d9dde2;
}

.checkout-page-main {
  min-height: calc(100vh - 110px);
  padding-bottom: 1.5rem;
}

.checkout-hero {
  border: 1px solid #d6e4dc;
  border-radius: 16px;
  background:
    radial-gradient(circle at 10% 20%, rgba(92, 186, 125, 0.16), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #f7fcf8 100%);
  padding: 0.96rem;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(230px, 0.8fr);
  gap: 0.9rem;
  box-shadow: 0 14px 28px rgba(20, 54, 36, 0.07);
}

.checkout-kicker {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 800;
  color: #3a8d5c;
}

.checkout-hero h1 {
  margin: 0.42rem 0 0;
  font-family: var(--font-brand);
  font-size: clamp(1.45rem, 2.8vw, 2rem);
  line-height: 1.12;
  color: #1f5d3a;
}

.checkout-hero p {
  margin: 0.52rem 0 0;
  font-size: 0.9rem;
  color: #587084;
  max-width: 760px;
}

.checkout-hero-points {
  margin-top: 0.7rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
}

.checkout-hero-points span {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  border: 1px solid #d4e6db;
  border-radius: 999px;
  background: #ffffff;
  color: #2c6145;
  padding: 0.32rem 0.58rem;
  font-size: 0.74rem;
  font-weight: 800;
}

.checkout-hero-side {
  border: 1px solid #d7e6dc;
  border-radius: 12px;
  background: #fcfefc;
  padding: 0.68rem 0.72rem;
}

.checkout-hero-side h2 {
  margin: 0;
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #2f7b52;
}

.checkout-hero-side ul {
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.4rem;
}

.checkout-hero-side li {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  font-size: 0.8rem;
  color: #4e6d59;
  font-weight: 700;
}

.checkout-hero-side li i {
  color: #3ba162;
}

.checkout-layout {
  margin-top: 0.82rem;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.8fr);
  gap: 0.8rem;
  align-items: start;
}

.checkout-panel,
.checkout-summary-card {
  border: 1px solid #d5e2da;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 10px 22px rgba(29, 56, 40, 0.06);
}

.checkout-panel {
  padding: 0.76rem 0.8rem;
  display: grid;
  gap: 0.58rem;
}

.checkout-panel-head h2,
.checkout-summary-card h2 {
  margin: 0;
  font-family: var(--font-brand);
  font-size: 1.22rem;
  color: #1d5635;
}

.checkout-panel-head p,
.checkout-summary-card > p {
  margin: 0.16rem 0 0;
  font-size: 0.82rem;
  color: #647d90;
}

.checkout-panel-tools {
  border: 1px solid #d9e8de;
  border-radius: 10px;
  background: #f9fdfb;
  padding: 0.5rem 0.56rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.44rem;
}

.checkout-panel-tools span {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  border: 1px solid #d4e5db;
  border-radius: 999px;
  background: #ffffff;
  color: #365f49;
  font-size: 0.73rem;
  font-weight: 800;
  padding: 0.3rem 0.55rem;
}

#checkoutFeedback.auth-feedback {
  margin: 0;
  padding: 0 0.08rem;
}

.checkout-stripe-mount {
  border: 1px solid #dbe8e0;
  border-radius: 12px;
  background: #ffffff;
  min-height: 640px;
  overflow: hidden;
  padding: 0.1rem;
}

.checkout-stripe-shell {
  position: relative;
  min-height: 640px;
}

.checkout-stripe-shell .checkout-stripe-mount {
  min-height: inherit;
}

.checkout-stripe-mount iframe {
  width: 100%;
  border: 0;
}

.checkout-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 1px solid #dbe8e0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.95);
  color: #5a7688;
  font-size: 0.9rem;
  font-weight: 700;
  z-index: 2;
}

.checkout-loading[hidden] {
  display: none;
}

.checkout-summary-card {
  padding: 0.76rem 0.8rem;
  position: sticky;
  top: 132px;
  display: grid;
  gap: 0.68rem;
}

.checkout-summary-list {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.32rem;
}

.checkout-summary-list div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.64rem;
  font-size: 0.83rem;
}

.checkout-summary-list dt {
  color: #60788d;
}

.checkout-summary-list dd {
  margin: 0;
  font-weight: 800;
  color: #1e5a3b;
}

.checkout-summary-list .is-total {
  margin-top: 0.12rem;
  padding-top: 0.4rem;
  border-top: 1px solid #dbe7df;
}

.checkout-summary-list .is-total dt,
.checkout-summary-list .is-total dd {
  color: #1a4d31;
  font-size: 0.92rem;
}

.checkout-summary-actions {
  border-top: 1px dashed #d8e6de;
  padding-top: 0.62rem;
  display: grid;
  gap: 0.42rem;
}

.checkout-back-link,
.checkout-hosted-link {
  border: 1px solid #d3dfd7;
  border-radius: 9px;
  min-height: 36px;
  padding: 0.38rem 0.62rem;
  background: #ffffff;
  color: #35546c;
  font-size: 0.8rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  text-decoration: none;
}

.checkout-back-link:hover,
.checkout-hosted-link:hover {
  background: #edf8f1;
  color: #20412f;
}

.checkout-support-card {
  border: 1px solid #d6e4db;
  border-radius: 12px;
  background: linear-gradient(180deg, #fbfefc, #f7fcf9);
  padding: 0.6rem 0.66rem;
}

.checkout-support-card h3 {
  margin: 0;
  color: #1d5838;
  font-size: 0.92rem;
}

.checkout-support-card p {
  margin: 0.44rem 0 0;
  color: #5f788c;
  font-size: 0.78rem;
  line-height: 1.52;
}

.checkout-support-card a {
  margin-top: 0.5rem;
  border: 1px solid #2f8b53;
  border-radius: 10px;
  background: linear-gradient(140deg, #3aa560, #2f9055);
  color: #ffffff;
  min-height: 38px;
  padding: 0.4rem 0.66rem;
  display: inline-flex;
  align-items: center;
  gap: 0.36rem;
  font-size: 0.8rem;
  font-weight: 800;
  text-decoration: none;
}

.checkout-support-card a:hover {
  background: linear-gradient(140deg, #339357, #287d4b);
}

.checkout-load-error {
  min-height: 360px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.6rem;
  text-align: center;
  color: #60788d;
  padding: 1rem;
}

.checkout-load-error i {
  font-size: 1.3rem;
  color: #b24f4f;
}

.checkout-load-error p {
  margin: 0;
  max-width: 540px;
  font-size: 0.88rem;
  line-height: 1.58;
}

@media (max-width: 1024px) {
  .checkout-hero,
  .checkout-layout {
    grid-template-columns: 1fr;
  }

  .checkout-summary-card {
    position: static;
  }

  .checkout-stripe-mount {
    min-height: 580px;
  }

  .checkout-stripe-shell {
    min-height: 580px;
  }
}

@media (max-width: 720px) {
  .checkout-page-main {
    width: min(100vw - 1rem, 100%);
    padding-top: 0.8rem;
  }

  .checkout-hero,
  .checkout-panel,
  .checkout-summary-card {
    border-radius: 12px;
    padding-left: 0.72rem;
    padding-right: 0.72rem;
  }

  .checkout-panel-tools {
    gap: 0.36rem;
  }

  .checkout-panel-tools span {
    font-size: 0.7rem;
    padding: 0.28rem 0.48rem;
  }

  .checkout-stripe-mount {
    min-height: 520px;
  }

  .checkout-stripe-shell {
    min-height: 520px;
  }

  .checkout-loading {
    font-size: 0.84rem;
  }
}

.cart-payment-methods {
  margin: 0.9rem 0 0.7rem;
  padding: 0.95rem 1rem;
  border: 1px solid #d8e8dd;
  border-radius: 0.85rem;
  background: linear-gradient(180deg, #f8fcf9 0%, #f2faf4 100%);
}

.cart-payment-methods h3 {
  margin: 0;
  font-size: 0.93rem;
  font-weight: 800;
  color: #135c3c;
}

.cart-payment-options {
  margin-top: 0.72rem;
  display: grid;
  gap: 0.62rem;
}

.cart-payment-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.62rem 0.72rem;
  border: 1px solid #cde2d4;
  border-radius: 0.75rem;
  background: #ffffff;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.cart-payment-option input {
  margin: 0;
}

.cart-payment-option span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.89rem;
  font-weight: 700;
  color: #184f38;
}

.cart-payment-option:has(input:checked) {
  border-color: #3ca267;
  background: #eff9f1;
  box-shadow: 0 0 0 2px rgba(60, 162, 103, 0.14);
}

.cart-bank-transfer-panel {
  margin-top: 0.75rem;
  padding: 0.95rem 1rem;
  border: 1px solid #cce4d3;
  border-radius: 0.92rem;
  background: linear-gradient(180deg, #fbfefc 0%, #f5fcf7 100%);
}

.cart-bank-transfer-panel h3 {
  margin: 0 0 0.45rem;
  display: inline-flex;
  align-items: center;
  gap: 0.48rem;
  font-size: 0.94rem;
  font-weight: 800;
  color: #145236;
}

.cart-bank-transfer-panel p {
  margin: 0 0 0.75rem;
  font-size: 0.8rem;
  line-height: 1.45;
  color: #4f6f5f;
}

.cart-bank-transfer-list {
  margin: 0;
  display: grid;
  gap: 0.38rem;
}

.cart-bank-transfer-list div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.8rem;
  padding: 0.4rem 0;
  border-bottom: 1px dashed #deebe2;
}

.cart-bank-transfer-list div:last-child {
  border-bottom: 0;
}

.cart-bank-transfer-list dt {
  font-size: 0.72rem;
  font-weight: 700;
  color: #5a7466;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.cart-bank-transfer-list dd {
  margin: 0;
  font-size: 0.84rem;
  font-weight: 700;
  color: #154f36;
  text-align: right;
  word-break: break-word;
}

.cart-bank-transfer-actions {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.cart-bank-modal {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: grid;
  place-items: center;
  padding: 0.9rem;
}

.cart-bank-modal[hidden] {
  display: none;
}

.cart-bank-modal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  margin: 0;
  background: rgba(13, 28, 22, 0.48);
  cursor: pointer;
}

.cart-bank-modal-dialog {
  position: relative;
  z-index: 1;
  width: min(560px, calc(100vw - 1.4rem));
  max-height: calc(100vh - 1.4rem);
  overflow: auto;
  margin: 0;
  box-shadow: 0 22px 62px rgba(18, 52, 37, 0.28);
}

.cart-bank-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
}

.cart-bank-modal-close {
  width: 2rem;
  height: 2rem;
  border: 1px solid #c9dece;
  border-radius: 0.6rem;
  background: #ffffff;
  color: #25553e;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
}

.cart-bank-modal-close:hover {
  border-color: #3ca267;
  color: #0d6c45;
}

body.cart-bank-modal-open {
  overflow: hidden;
}

@media (max-width: 600px) {
  .cart-bank-transfer-list div {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.28rem;
  }

  .cart-bank-transfer-list dd {
    text-align: left;
  }
}