/* CHANGE: storefront chrome — MyRON RustPlugin branding + dark forms + catalog covers. */
.brand-product {
  color: var(--muted) !important;
  font-weight: 600;
  margin-left: 2px;
}

.hub-page {
  min-height: calc(100vh - 72px);
  padding-bottom: 64px;
}

.hub-kicker {
  margin: 0 0 6px;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
}

.hub-hero {
  margin: 8px 0 32px;
  padding: 28px 32px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background:
    radial-gradient(1200px 280px at 8% -40%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 60%),
    linear-gradient(180deg, var(--panel) 0%, var(--navy) 100%);
}
.hub-hero h1 { margin: 0 0 8px; font-size: 1.85rem; }

.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.hub-card {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.hub-card:hover {
  text-decoration: none;
  border-color: var(--accent);
  transform: translateY(-2px);
}

.hub-card-cover,
.hub-cover-lg {
  /* CHANGE: fixed aspect ratio — no tall stretch; logos keep proportions. */
  aspect-ratio: 16 / 9;
  height: auto;
  min-height: 0;
  position: relative;
  display: grid;
  place-items: center;
  color: var(--cream);
  background: linear-gradient(160deg, #3a221c, var(--navy));
  overflow: hidden;
}
.hub-card-cover img,
.hub-cover-lg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

.hub-cover-mark {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  opacity: 0.92;
}

.hub-cover-apanomalizone { background: linear-gradient(155deg, #3a1d12 0%, var(--navy) 55%, #2a1810 100%); }
.hub-cover-apartitems { background: linear-gradient(155deg, #1f2a38 0%, var(--navy) 55%, #1a2228 100%); }
.hub-cover-apcontrol { background: linear-gradient(155deg, #1a2a18 0%, var(--navy) 55%, #163018 100%); }
.hub-cover-apburden { background: linear-gradient(155deg, #2a2410 0%, var(--navy) 55%, #2a220e 100%); }

.hub-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.hub-card-name { font-weight: 700; font-size: 1.05rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; }
/* CHANGE: aggregate review stars on catalog cards. */
.hub-card-rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  line-height: 1;
}
.hub-card-stars {
  display: inline-flex;
  align-items: center;
  gap: 1px;
}
.hub-card-star {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.2);
}
.hub-card-star.is-on {
  color: var(--fp-orange, #cd8c2b);
}
.hub-card-rating-avg {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--cream);
}
.hub-card-rating-count {
  font-size: 0.82rem;
}
.hub-ver {
  font-size: 0.72em;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.hub-pdp-title .hub-ver {
  display: inline-block;
  font-size: 0.48em;
  font-weight: 700;
  vertical-align: middle;
  margin-left: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 18%, var(--panel));
  color: var(--cream);
  letter-spacing: 0.02em;
}
.hub-card-tag { color: var(--muted); font-size: .9rem; min-height: 2.4em; line-height: 1.4; }
.hub-card-meta { display: flex; justify-content: space-between; align-items: center; margin-top: auto; }
.hub-price { font-weight: 700; color: var(--cream); }

.hub-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.hub-badge {
  font-size: .72rem;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.hub-badge.oxide { color: var(--fp-orange); border-color: color-mix(in srgb, var(--fp-orange) 45%, var(--border)); }
.hub-badge.carbon { color: var(--fp-blue-light); border-color: color-mix(in srgb, var(--fp-blue) 50%, var(--border)); }
.hub-badge.featured { color: var(--cream); border-color: color-mix(in srgb, var(--rust-red) 40%, var(--border)); }
/* CHANGE: product tags as hashtags, separate from framework/category pills. */
.hub-pdp-tags,
.hub-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
}
.hub-pdp-tags { margin-top: 8px; }
.hub-card-tags { margin-top: 2px; }
.hub-tag {
  font-size: 0.82rem;
  font-weight: 600;
  /* CHANGE: drop olive-green — use cream/accent for readable hub tags. */
  color: color-mix(in srgb, var(--cream) 78%, var(--muted));
  text-decoration: none;
  letter-spacing: 0.01em;
  text-transform: none;
}
a.hub-tag:hover {
  text-decoration: underline;
  color: var(--accent);
}

.hub-plugin { display: grid; grid-template-columns: 1.4fr .8fr; gap: 24px; align-items: start; }
@media (max-width: 900px) { .hub-plugin { grid-template-columns: 1fr; } }

.hub-buy-box { position: sticky; top: 84px; }
.hub-buy-box .btn { width: 100%; }

.hub-cover-lg {
  width: 100%;
  min-height: 200px;
  height: 220px;
  border-radius: 12px;
  object-fit: cover;
  margin-bottom: 16px;
}

/* —— Plugin product detail (PDP) —— */
.hub-pdp { padding-bottom: 88px; }
.hub-bc-sep { margin: 0 6px; opacity: 0.55; }
.hub-pdp-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.78fr);
  gap: 22px;
  align-items: start;
}
.hub-pdp-main { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.hub-pdp-aside { min-width: 0; }

.hub-pdp-gallery {
  padding: 12px;
  overflow: hidden;
}
.hub-pdp-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: var(--panel-alt);
  border: 1px solid var(--border);
}
.hub-pdp-stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hub-pdp-stage-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
}
.hub-pdp-thumbs {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.hub-pdp-thumb {
  flex: 0 0 auto;
  width: 76px;
  height: 52px;
  padding: 0;
  border-radius: 8px;
  border: 2px solid transparent;
  background: var(--panel-alt);
  cursor: pointer;
  overflow: hidden;
  opacity: 0.72;
  transition: opacity 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.hub-pdp-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hub-pdp-thumb:hover { opacity: 1; }
.hub-pdp-thumb.is-active {
  opacity: 1;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent);
}

.hub-pdp-hero { padding: 2px 2px 0; }
/* CHANGE: title/tagline left, author block right (Codefling-style). */
.hub-pdp-hero-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px 24px;
}
.hub-pdp-hero-main {
  flex: 1 1 220px;
  min-width: 0;
}
.hub-pdp-hero-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}
.hub-pdp-title {
  margin: 0;
  font-size: clamp(1.55rem, 2.4vw, 2rem);
  line-height: 1.15;
  color: var(--cream);
}
.hub-pdp-tagline {
  margin: 10px 0 0;
  font-size: 1.05rem;
  color: var(--muted);
  max-width: 52ch;
  line-height: 1.45;
}
.hub-pdp-author {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  margin-left: auto;
}
.hub-pdp-author-copy {
  text-align: right;
  line-height: 1.25;
}
.hub-pdp-author-by {
  color: var(--cream);
  font-size: 0.95rem;
}
.hub-pdp-author-by strong {
  font-weight: 700;
}
.hub-pdp-author-more {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.88rem;
  color: var(--fp-green, #6bbf59);
  text-decoration: none;
}
.hub-pdp-author-more:hover {
  text-decoration: underline;
  color: color-mix(in srgb, var(--fp-green, #6bbf59) 85%, white);
}
.hub-pdp-author-avatar {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--panel-alt) 80%, #1a2228);
  border: 1px solid var(--border);
  color: var(--cream);
  font-weight: 700;
  font-size: 1.25rem;
}
.hub-pdp-author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hub-pdp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: 14px;
}
.hub-pdp-meta-left {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  flex: 1 1 200px;
}
.hub-pdp-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
}
.hub-pdp-stat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text);
  text-decoration: none;
  font-size: 0.92rem;
}
.hub-pdp-stat:hover { text-decoration: none; color: var(--cream); }
.hub-pdp-stat-ico { color: var(--fp-orange, #cd8c2b); }

.hub-pdp-tabs { padding: 0; overflow: hidden; }
.hub-pdp-tablist {
  display: flex;
  gap: 2px;
  /* CHANGE: overflow-x alone was spawning a useless vertical scrollbar on the tab row. */
  overflow-x: auto;
  overflow-y: hidden;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel-alt) 70%, transparent);
  padding: 0 6px;
}
.hub-pdp-tab {
  flex: 0 0 auto;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 650;
  font-size: 0.92rem;
  padding: 14px 14px 12px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}
.hub-pdp-tab:hover { color: var(--cream); }
.hub-pdp-tab.is-active {
  color: var(--cream);
  border-bottom-color: var(--accent);
}
.hub-pdp-panel { padding: 18px 18px 20px; }
.hub-pdp-panel[hidden] { display: none !important; }
.hub-pdp-prose { margin: 0; }
.hub-pdp-prose > *:first-child { margin-top: 0; }

.hub-pdp-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hub-pdp-steps li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  align-items: start;
}
.hub-pdp-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 22%, var(--panel-alt));
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  color: var(--cream);
  font-weight: 700;
}
.hub-pdp-steps strong { display: block; margin-bottom: 4px; color: var(--cream); }
.hub-pdp-steps p { margin: 0; }
.hub-pdp-install-note {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 0.9rem;
}

.hub-pdp-versions { list-style: none; margin: 0; padding: 0; }
.hub-pdp-version {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.hub-pdp-version:last-child { border-bottom: 0; padding-bottom: 0; }
.hub-pdp-version:first-child { padding-top: 0; }
.hub-pdp-version-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  margin-bottom: 6px;
}
.hub-pdp-version-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  min-width: 0;
}
.hub-pdp-version-actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
/* CHANGE: compact download CTA on each version row. */
.hub-pdp-version-dl {
  padding: 6px 12px !important;
  font-size: 0.85rem !important;
  min-height: 0 !important;
  width: auto !important;
  align-self: auto !important;
}
.hub-pdp-version-dl-hint {
  font-size: 0.85rem;
}
.hub-pdp-version-body {
  margin: 0;
  color: var(--text);
  line-height: 1.45;
  white-space: pre-wrap;
}

.hub-pdp-review-form {
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.hub-pdp-review-form-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}
.hub-pdp-rating-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 !important;
}
/* CHANGE: interactive star rating for reviews. */
.hub-star-picker {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.hub-star-btn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 2px 3px;
  margin: 0;
  cursor: pointer;
  font-size: 1.35rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.22);
  transition: color 0.12s ease, transform 0.12s ease;
}
.hub-star-btn:hover,
.hub-star-btn.is-hover,
.hub-star-btn.is-on {
  color: var(--fp-orange, #cd8c2b);
}
.hub-star-btn:hover,
.hub-star-btn:focus-visible {
  transform: scale(1.12);
  outline: none;
}
.hub-pdp-reviews { display: flex; flex-direction: column; gap: 12px; }
.hub-pdp-review {
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
}
.hub-pdp-review-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  margin-bottom: 6px;
}
.hub-pdp-stars { color: var(--fp-orange, #cd8c2b); letter-spacing: 0.02em; }
.hub-pdp-review p { margin: 0; line-height: 1.45; }

.hub-pdp-buy {
  position: sticky;
  top: 84px;
  padding: 18px;
}
.hub-pdp-buy-price { margin-bottom: 14px; }
.hub-pdp-price {
  display: block;
  font-size: 2rem;
  font-weight: 750;
  line-height: 1.1;
  color: var(--cream);
}
.hub-pdp-perks {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hub-pdp-perks li {
  position: relative;
  padding-left: 22px;
  color: var(--text);
  font-size: 0.92rem;
}
.hub-pdp-perks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fp-green, #8cc63f);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fp-green, #8cc63f) 22%, transparent);
}
.hub-pdp-buy-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hub-pdp-buy-actions .btn,
.hub-pdp-cta,
.hub-pdp-cta-sec { width: 100%; }
.hub-pdp-cta {
  min-height: 44px;
  font-weight: 700;
}
.hub-pdp-owned-banner {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 4px;
}
.hub-pdp-legal {
  margin: 14px 0 0;
  font-size: 0.8rem;
  text-align: center;
}
.hub-pdp-legal a { color: var(--muted); }

.hub-pdp-related { margin-top: 8px; }
.hub-pdp-related-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.hub-pdp-related-head h2 {
  margin: 0;
  font-size: 1.2rem;
  color: var(--cream);
}

.hub-pdp-mobile-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(10px);
}
.hub-pdp-mobile-price {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.hub-pdp-mobile-price strong {
  color: var(--cream);
  font-size: 1.1rem;
}
.hub-pdp-mobile-price span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 46vw;
  font-size: 0.8rem;
}
.hub-pdp-mobile-bar .btn { flex: 0 0 auto; min-width: 120px; }
.hub-pdp-mobile-bar form { margin: 0; }

@media (max-width: 960px) {
  .hub-pdp-layout { grid-template-columns: 1fr; }
  .hub-pdp-buy { position: static; }
  .hub-pdp-mobile-bar { display: flex; }
}

@media (max-width: 640px) {
  .hub-pdp-stage { aspect-ratio: 4 / 3; }
  .hub-pdp-meta { flex-direction: column; align-items: flex-start; }
  .hub-pdp-tab { padding: 12px 12px 10px; font-size: 0.86rem; }
  .hub-pdp-hero-row { flex-direction: column; }
  .hub-pdp-author { margin-left: 0; }
  .hub-pdp-author-copy { text-align: left; }
}

.hub-auth {
  max-width: 420px;
  margin: 48px auto 0;
  padding: 28px 28px 24px;
}
.hub-auth h1 { margin: 0 0 18px; }
.hub-auth .btn { width: 100%; }
.hub-auth-or { margin: 16px 0 10px; text-align: center; }
.hub-auth-foot { margin-top: 16px; }
.hub-oauth { display: flex; flex-direction: column; gap: 8px; }
.hub-btn-steam { background: #171a21; border-color: #3d4450; color: #fff; }
.hub-btn-discord { background: #5865f2; border-color: #5865f2; color: #fff; }
.hub-btn-discord:hover { filter: brightness(1.08); }

.hub-changelog { list-style: none; padding: 0; margin: 0; }
.hub-changelog li { padding: 10px 0; border-bottom: 1px solid var(--border); }

.profile-logout {
  display: block;
  background: none; border: 0; color: inherit; cursor: pointer; width: 100%; text-align: left; padding: 8px 12px; font: inherit; text-decoration: none;
}
.profile-logout:hover { text-decoration: none; background: rgba(255,255,255,0.06); }

/* CHANGE: storefront header profile chip + dropdown (Facepunch dark theme). */
.hub-profile-dropdown {
  position: relative;
}

.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: min(220px, 42vw);
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel-alt);
  color: var(--cream);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 650;
  cursor: pointer;
  line-height: 1.2;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.user-chip:hover,
.hub-profile-dropdown.open .user-chip {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, var(--panel-alt));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.user-chip-avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}

.user-chip-avatar--fallback {
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, #3a221c, var(--panel));
  color: var(--cream);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.user-chip-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-chip-caret {
  flex-shrink: 0;
  opacity: 0.72;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.hub-profile-dropdown.open .user-chip-caret {
  transform: rotate(180deg);
  opacity: 1;
}

.hub-profile-menu {
  right: 0;
  left: auto;
  min-width: 220px;
  padding: 6px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.45),
    0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent);
}

.hub-profile-menu .profile-menu-head {
  padding: 10px 12px 8px;
}

.hub-profile-menu .profile-menu-meta {
  padding: 8px 12px 6px;
  font-size: 0.78rem;
  color: var(--muted);
  word-break: break-all;
}

.hub-profile-menu .profile-menu-trust {
  padding: 8px 10px 6px;
}

.hub-trust-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  border: 1px solid var(--border);
  background: var(--panel-alt);
  color: var(--muted);
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

a.hub-trust-chip:hover {
  filter: brightness(1.08);
  color: var(--cream);
}

.hub-trust-chip.is-new {
  color: var(--muted);
  border-color: var(--border);
}

.hub-trust-chip.is-verified {
  color: color-mix(in srgb, #7eb8ff 85%, var(--cream));
  border-color: color-mix(in srgb, #4a8fd4 40%, var(--border));
  background: color-mix(in srgb, #4a8fd4 14%, var(--panel));
}

.hub-trust-chip.is-trusted {
  color: color-mix(in srgb, var(--fp-green, #738d45) 90%, var(--cream));
  border-color: color-mix(in srgb, var(--fp-green, #738d45) 45%, var(--border));
  background: color-mix(in srgb, var(--fp-green, #738d45) 16%, var(--panel));
}

.hub-trust-chip.is-staff {
  color: color-mix(in srgb, var(--accent-soft) 80%, var(--cream));
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  background: color-mix(in srgb, var(--accent) 14%, var(--panel));
}

.hub-trust-current {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.hub-trust-ladder {
  margin-bottom: 16px;
}

.hub-trust-tiers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hub-trust-tier {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--input);
}

.hub-trust-tier p {
  margin: 0;
  flex: 1 1 220px;
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.45;
}

.hub-trust-tier.is-current {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
}

.hub-profile-menu .profile-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--cream);
}

.hub-profile-menu .profile-steam {
  margin-top: 3px;
  font-size: 0.78rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.hub-profile-menu .profile-menu-sep {
  margin: 4px 0;
  background: var(--border);
}

.hub-profile-menu .profile-menu-item {
  border-radius: 8px;
  padding: 9px 12px;
  color: var(--text);
  font-size: 0.9rem;
}

.hub-profile-menu .profile-menu-item:hover {
  background: color-mix(in srgb, var(--accent-soft) 14%, var(--panel-alt));
  color: var(--cream);
}

.hub-profile-menu .profile-menu-item--logout {
  color: #e08a7a;
}

.hub-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0 !important;
  border-radius: 10px;
}
.hub-icon-btn svg { display: block; }
.hub-settings-head { margin-bottom: 18px; }
.hub-account-section-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.hub-profile-menu .profile-menu-item--logout:hover {
  background: color-mix(in srgb, var(--accent) 14%, var(--panel-alt));
  color: #ffb4aa;
}

@media (max-width: 720px) {
  .user-chip-label {
    display: none;
  }

  .user-chip {
    max-width: none;
    padding: 3px;
    border-radius: 999px;
  }

  .user-chip-caret {
    display: none;
  }
}

.hub-2fa { max-width: 460px; }
.hub-2fa-qr {
  display: block;
  margin: 12px auto 16px;
  background: #fff;
  padding: 8px;
  border-radius: 8px;
}
.hub-2fa-secret code {
  display: block;
  word-break: break-all;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}
.hub-recovery {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.hub-recovery code {
  display: block;
  padding: 8px;
  background: var(--input);
  border: 1px solid var(--border);
  border-radius: 6px;
  text-align: center;
}

.hub-search, .hub-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 24px;
}
.hub-search input, .hub-filters input, .hub-filters select {
  min-width: 160px;
  flex: 1;
  padding: 10px 12px;
  background: var(--input);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  font: inherit;
}

/* CHANGE: hero search stays compact — not full-bleed after wider layout. */
.hub-hero .hub-search {
  width: min(100%, 420px);
  margin: 14px 0 0;
}
.hub-hero .hub-search input {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}
.hub-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 0 0 28px;
}
.hub-steps .card { display: flex; gap: 12px; align-items: flex-start; padding: 16px; }
.hub-steps strong { font-size: 1.4rem; color: var(--accent); }
@media (max-width: 800px) { .hub-steps { grid-template-columns: 1fr; } }

.hub-shots {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin: 0 0 16px;
}
.hub-shots img {
  height: 88px;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.site-footer {
  margin-top: 48px;
  padding: 28px 24px 40px;
  border-top: 1px solid var(--border);
  background: var(--panel);
}
.site-footer-grid {
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 24px;
}
.footer-heading {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
  font-weight: 700;
}
.header-search input {
  width: 180px;
  padding: 8px 10px;
  background: var(--input);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  font: inherit;
}
.hub-how-grid, .hub-help-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  margin: 18px 0 28px;
}
.hub-help-card { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; }
.hub-help-card:hover { text-decoration: none; border-color: var(--accent); }
.hub-how-grid .card strong { font-size: 1.4rem; color: var(--accent-hover); }
@media (max-width: 900px) {
  .site-footer-grid { grid-template-columns: 1fr 1fr; }
  .header-search { display: none; }
}
.site-footer a { display: block; margin: 6px 0; color: var(--muted); }
@media (max-width: 800px) { .site-footer-grid { grid-template-columns: 1fr; } }

.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th, .admin-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }

/* CHANGE: label above control so columns align (no side-by-side text+input). */
.admin-form label:not(.admin-check) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  margin: 0;
  min-width: 0;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 500;
}

.admin-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 20px;
  align-items: start;
}

.admin-form-grid > .admin-span-2 {
  grid-column: 1 / -1;
}

.admin-form-grid-compact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 720px;
}

.admin-field-sm {
  max-width: 11rem;
}

.admin-input-md {
  max-width: 28rem !important;
}

.admin-form .admin-section {
  margin: 0 0 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}

.admin-form .admin-section:last-of-type {
  border-bottom: 0;
  padding-bottom: 0;
}

.admin-form .admin-section h2 {
  margin: 0 0 10px;
  font-size: 1.05rem;
}

/* CHANGE: card is flex-column — keep primary actions compact, not full-bleed. */
.admin-form > .btn,
.admin-form > .btn-primary,
.card.admin-form .btn-primary {
  align-self: flex-start;
  width: auto;
  min-width: 0;
  padding: 7px 14px;
  font-size: 0.9rem;
}

.admin-section-lead {
  margin: -4px 0 12px;
  font-size: 0.86rem;
}

.admin-field-hint {
  font-size: 0.78rem;
  font-weight: 400;
}

.admin-repeater {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

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

.admin-dep-row {
  grid-template-columns: minmax(140px, 1fr) minmax(160px, 1.4fr) minmax(100px, 0.8fr) 140px auto;
}

.admin-repeater-row select,
.admin-repeater-row input {
  width: 100%;
  max-width: none;
  margin: 0;
}

.admin-repeater-remove {
  min-width: 36px;
  padding: 8px 10px;
  line-height: 1;
}

@media (max-width: 900px) {
  .admin-form-grid-compact { grid-template-columns: 1fr 1fr; max-width: none; }
  .admin-dep-row { grid-template-columns: 1fr; }
  .admin-repeater-row { grid-template-columns: 1fr; }
  .admin-field-sm { max-width: none; }
}

/* CHANGE: dark theme; grid cells fill equally so fields line up. */
.admin-shell input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="color"]):not([type="range"]):not([type="submit"]):not([type="button"]),
.admin-shell select,
.admin-shell textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-top: 0;
  padding: 10px 12px;
  background: var(--input);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 400;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  color-scheme: dark;
}

.admin-shell textarea {
  min-height: 96px;
  resize: vertical;
  line-height: 1.45;
}

.admin-shell .admin-page-editor textarea,
.admin-shell textarea.admin-wide {
  max-width: 100%;
}

.admin-shell input::placeholder,
.admin-shell textarea::placeholder {
  color: var(--muted);
  opacity: 0.85;
}

.admin-shell input:focus,
.admin-shell select:focus,
.admin-shell textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

.admin-shell select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 16px) calc(50% - 3px),
    calc(100% - 11px) calc(50% - 3px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 28px;
}

.admin-shell input[readonly] {
  opacity: 0.85;
  cursor: default;
  color: var(--muted);
}

.admin-shell input[type="file"] {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-top: 0;
  padding: 10px 12px;
  background: var(--input);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  font: inherit;
  box-sizing: border-box;
}

.admin-shell input[type="file"]::file-selector-button,
.admin-shell input[type="file"]::-webkit-file-upload-button {
  margin-right: 12px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel-alt);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.admin-inline-form select,
.admin-inline-form input:not([type="checkbox"]):not([type="hidden"]) {
  width: auto;
  min-width: 140px;
  margin-top: 0;
}

/* CHANGE: dark inputs on auth/support even if a page misses form-grid. */
.hub-auth input:not([type="checkbox"]):not([type="hidden"]):not(.otp-cell),
.hub-auth select,
.hub-auth textarea,
.hub-page .form-grid input:not([type="checkbox"]):not([type="hidden"]):not(.otp-cell),
.hub-page .form-grid select,
.hub-page .form-grid textarea {
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  background: var(--input);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  font: inherit;
}

/* CHANGE: 6 TOTP cells; focus ring matches the authenticator-style orange glow. */
.otp-box { margin: 4px 0 8px; }
.otp-label {
  margin: 0 0 10px;
  font-size: 0.82rem;
  color: var(--muted);
}
.otp-cells {
  display: flex;
  gap: 8px;
  justify-content: space-between;
}
.otp-cell {
  width: 3rem !important;
  height: 3.15rem;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0;
  background: var(--input) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  color: var(--text) !important;
  caret-color: var(--fp-orange);
}
.otp-cell:focus {
  outline: none;
  border-color: var(--fp-orange) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fp-orange) 32%, transparent);
}
.hub-otp-submit { margin-top: 8px; }
form.is-otp-ready .hub-otp-submit { display: none; }
.hub-otp-recovery { margin-top: 12px; }
.hub-link-btn {
  background: none;
  border: 0;
  padding: 0;
  color: var(--accent-soft);
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
}
@media (max-width: 420px) {
  .otp-cell { width: 2.45rem !important; height: 2.7rem; font-size: 1.15rem; }
}

/* CHANGE: professional account cabinet — compact fields, hero, purchase cards */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hub-account {
  max-width: min(1200px, var(--content-max));
  margin: 0 auto;
  padding-top: 8px;
}

.hub-account-banner {
  background:
    radial-gradient(900px 220px at 12% 0%, color-mix(in srgb, var(--accent) 32%, transparent), transparent 62%),
    linear-gradient(120deg, #3a221c, var(--navy) 55%, var(--charcoal));
}

.hub-account-banner.has-image {
  background-size: cover;
  background-position: center;
}

.hub-account-appearance {
  grid-column: 1 / -1;
}

.hub-profile-media-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.hub-profile-media-block h3 {
  margin: 0 0 10px;
  font-size: 0.95rem;
}

.hub-profile-media-preview {
  width: 72px;
  height: 72px;
  border-radius: 999px;
  overflow: hidden;
  border: 2px solid var(--border);
  margin-bottom: 12px;
}

.hub-profile-media-preview img,
.hub-profile-media-fallback {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.hub-profile-media-fallback {
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, #3a221c, var(--panel));
  color: var(--cream);
  font-weight: 800;
}

.hub-profile-banner-preview {
  height: 88px;
  border-radius: 12px;
  border: 1px solid var(--border);
  margin-bottom: 12px;
  background:
    linear-gradient(120deg, var(--panel-alt), var(--navy) 55%, #3a221c);
  background-size: cover;
  background-position: center;
}

.hub-profile-upload {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.hub-profile-upload input[type="file"] {
  max-width: 220px;
  flex: 1;
  min-width: 160px;
}

.hub-profile-upload-secondary {
  margin-top: 8px;
}

.hub-profile-media-note {
  margin: 8px 0 0;
  font-size: 0.82rem;
}

@media (max-width: 720px) {
  .hub-profile-media-grid {
    grid-template-columns: 1fr;
  }
}

.hub-account-avatar-fallback {
  display: grid;
  place-items: center;
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--cream);
  background: linear-gradient(160deg, #3a221c, var(--panel-alt));
}

.hub-account-hero .hub-kicker {
  margin: 0 0 4px;
  font-size: 0.72rem;
}

.hub-account-sub {
  margin: 4px 0 0;
  font-size: 0.92rem;
  color: var(--muted);
}

.hub-account-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.hub-account-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  padding: 14px 18px 16px;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel-alt) 55%, var(--panel));
}

.hub-account-stat {
  flex: 1 1 140px;
  min-width: 120px;
  padding: 4px 18px;
  border-right: 1px solid var(--border);
}

.hub-account-stat:first-child {
  padding-left: 0;
}

.hub-account-stat:last-child {
  border-right: none;
  padding-right: 0;
}

.hub-account-stat-label {
  display: block;
  margin-bottom: 4px;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.hub-account-stat-value {
  display: block;
  font-size: 1.05rem;
  font-weight: 750;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}

@media (max-width: 720px) {
  .hub-account-stat {
    flex: 1 1 45%;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 10px 0;
  }

  .hub-account-stat:nth-last-child(-n+2) {
    border-bottom: none;
  }
}

.hub-account-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel-alt);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  text-transform: lowercase;
}

.hub-account-chip.is-ok {
  color: var(--cream);
  border-color: color-mix(in srgb, var(--ok) 45%, var(--border));
  background: color-mix(in srgb, var(--ok) 18%, var(--panel));
}

.hub-account-chip.is-warn {
  color: var(--cream);
  border-color: color-mix(in srgb, var(--warn) 45%, var(--border));
  background: color-mix(in srgb, var(--warn) 16%, var(--panel));
}

a.hub-account-chip--link {
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.15s ease, border-color 0.15s ease;
}

a.hub-account-chip--link:hover {
  filter: brightness(1.08);
  color: var(--cream);
}

.hub-account-grid {
  margin-bottom: 28px;
}

/* CHANGE: settings top row = name | security | linked (3 equal cols) */
.profile-grid.hub-account-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.hub-account-panel {
  padding: 18px 20px;
  border-radius: 14px;
  background: var(--panel);
  min-width: 0;
}

.hub-account-panel-head h2 {
  margin: 0 0 4px;
  font-size: 1.05rem;
}

.hub-account-panel-head p {
  margin: 0 0 14px;
  font-size: 0.88rem;
  line-height: 1.45;
}

.hub-account-inline {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.hub-account-inline input {
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  background: var(--input);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.hub-account-inline input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent);
}

.hub-account-inline .btn-primary {
  white-space: nowrap;
  width: 100%;
}

.hub-nick-field {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hub-nick-field input {
  width: 100%;
  max-width: none;
}

.hub-nick-status {
  margin: 0;
  min-height: 1.15em;
  font-size: 0.82rem;
  line-height: 1.3;
  color: var(--muted);
}

.hub-nick-status.is-ok { color: var(--fp-green, #738d45); }
.hub-nick-status.is-bad { color: #f0a090; font-weight: 650; }
.hub-nick-status.is-pending { color: var(--muted); font-style: italic; }

input.is-nick-ok,
.hub-auth input.is-nick-ok {
  border-color: color-mix(in srgb, var(--fp-green, #738d45) 70%, var(--border)) !important;
  color: var(--cream);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fp-green, #738d45) 22%, transparent);
}

input.is-nick-bad,
.hub-auth input.is-nick-bad {
  border-color: var(--accent) !important;
  color: #ffb4a8;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}

input.is-nick-pending,
.hub-auth input.is-nick-pending {
  border-color: color-mix(in srgb, var(--fp-orange, #c26d33) 55%, var(--border));
}

@keyframes hub-nick-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}

input.is-nick-shake {
  animation: hub-nick-shake 0.38s ease;
}

.hub-auth .hub-nick-status {
  display: block;
  margin-top: 6px;
}

.hub-account-name-readonly {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.hub-account-name-value {
  font-size: 1.05rem;
  font-weight: 650;
  color: var(--cream);
}

.hub-account-security {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

.hub-account-security-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hub-account-security-label {
  font-weight: 650;
  color: var(--cream);
}

.hub-account-link-btn {
  min-width: 0;
  width: 100%;
  text-align: center;
}

.hub-account-link-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hub-account-link-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--input);
}

.hub-account-link-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.hub-account-link-meta strong {
  display: block;
  font-size: 0.95rem;
}

.hub-account-link-meta .muted {
  display: block;
  font-size: 0.82rem;
  margin-top: 2px;
}

.hub-account-link-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex-shrink: 0;
  background: var(--panel-alt) center / 20px 20px no-repeat;
  border: 1px solid var(--border);
}

.hub-account-link-icon--steam {
  background-color: #1b2838;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M11.979 0C5.678 0 .511 4.86.022 11.037l6.432 2.658a3.28 3.28 0 0 1 1.874-.593c.055 0 .109.004.163.008l2.861-4.142V8.88c0-2.495 2.028-4.522 4.522-4.522 2.494 0 4.522 2.027 4.522 4.522 0 2.493-2.028 4.52-4.522 4.52h-.063l-4.077 2.926c.004.055.008.11.008.166a3.28 3.28 0 0 1-3.28 3.28 3.272 3.272 0 0 1-2.015-.693L.247 13.77C1.456 20.792 8.177 24 11.979 24c6.627 0 11.999-5.373 11.999-12S18.606 0 11.979 0zM7.54 18.35l-1.403-.58a2.47 2.47 0 0 0 1.962 1.562 2.454 2.454 0 0 0 2.454-2.453 2.45 2.45 0 0 0-.318-1.218l1.404.58a3.28 3.28 0 0 1-3.702 2.11zM18.023 7.358a2.45 2.45 0 0 0-2.451-2.45 2.45 2.45 0 0 0-2.45 2.45 2.45 2.45 0 0 0 2.45 2.452 2.45 2.45 0 0 0 2.451-2.452z'/%3E%3C/svg%3E");
}

.hub-account-link-icon--discord {
  background-color: #5865f2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.664-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z'/%3E%3C/svg%3E");
}

.hub-account-link-action {
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 0.88rem;
  padding: 8px 12px;
  width: 100%;
  text-align: center;
  justify-content: center;
}

.hub-account-link-item .hub-account-chip {
  align-self: flex-start;
}

@media (max-width: 1100px) {
  .profile-grid.hub-account-grid {
    grid-template-columns: 1fr;
  }
}

.hub-account-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.hub-account-section-head h2 {
  margin: 0 0 4px;
  font-size: 1.25rem;
}

.hub-account-section-head p {
  margin: 0;
  font-size: 0.9rem;
}

.hub-account-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 28px 24px;
  border-radius: 14px;
  border-style: dashed;
}

.hub-account-empty-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 650;
  color: var(--cream);
}

.hub-purchase-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hub-purchase-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 14px;
}

.hub-purchase-main h3 {
  margin: 0 0 6px;
  font-size: 1.05rem;
}

.hub-purchase-main h3 a {
  color: var(--cream);
  text-decoration: none;
}

.hub-purchase-main h3 a:hover {
  color: var(--accent-soft);
  text-decoration: underline;
}

.hub-purchase-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.88rem;
}

.hub-purchase-note {
  margin: 8px 0 0;
  font-size: 0.82rem;
}

.hub-purchase-actions {
  flex-shrink: 0;
}

@media (max-width: 720px) {
  .profile-hero-body {
    flex-direction: column;
    align-items: flex-start;
    margin-top: -40px;
  }

  .profile-hero-meta {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }

  .hub-account-inline input {
    width: 100%;
  }

  .hub-account-inline .btn-primary {
    width: 100%;
  }

  .hub-account-link-item {
    align-items: flex-start;
    flex-direction: column;
  }

  .hub-account-link-action,
  .hub-account-link-item .hub-account-chip {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

/* CHANGE: premium storefront shell shared by cart/support/help/about/home */
.hub-store { max-width: var(--content-max); margin: 0 auto; width: 100%; }
.hub-store-hero { margin: 8px 0 22px; }
.hub-store-hero h1 { margin: 0 0 8px; font-size: 1.85rem; }
.hub-store-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.hub-breadcrumb { margin: 0 0 12px; color: var(--muted); font-size: 0.9rem; }
.hub-section-head { margin: 28px 0 12px; display: flex; align-items: baseline; gap: 10px; }
.hub-section-head h2 { margin: 0; }
.hub-section-count {
  font-size: 0.92rem;
}

.hub-step-mini,
.hub-step-card {
  border-radius: 14px;
}
.hub-step-card strong,
.hub-step-mini strong {
  display: inline-block;
  color: var(--accent);
  font-size: 1.35rem;
  margin-bottom: 6px;
}
.hub-step-card h2 { margin: 0 0 8px; font-size: 1.05rem; }
.hub-step-card p { margin: 0; color: var(--muted); line-height: 1.45; }

/* CHANGE: catalog filter bar — row toolbar (beat .card column flex), dark inputs. */
.hub-catalog-bar.card,
.hub-filters.card {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  padding: 12px 14px;
  margin: 0 0 18px;
}
.hub-catalog-bar-search {
  flex: 1 1 240px;
  min-width: 180px;
}
.hub-catalog-bar-search input,
.hub-catalog-bar select,
.hub-filters.card input,
.hub-filters.card select {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 10px 12px;
  background: var(--input) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 8px;
  font: inherit;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
  color-scheme: dark;
}
.hub-catalog-bar-search input {
  width: 100% !important;
  flex: none !important;
  max-width: none !important;
}
.hub-catalog-bar-search input::placeholder {
  color: var(--muted);
  opacity: 0.9;
}
.hub-catalog-bar-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  flex: 0 1 auto;
}
.hub-catalog-bar select,
.hub-filters.card select {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 9.5rem !important;
  max-width: 15rem !important;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) calc(50% - 2px), calc(100% - 11px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 28px;
}
.hub-catalog-bar-apply {
  flex: 0 0 auto;
  width: auto !important;
  align-self: stretch;
  white-space: nowrap;
  min-height: 42px;
}

@media (max-width: 720px) {
  .hub-catalog-bar.card {
    flex-direction: column;
    align-items: stretch;
  }
  .hub-catalog-bar-search,
  .hub-catalog-bar-filters {
    width: 100%;
  }
  .hub-catalog-bar-filters {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .hub-catalog-bar select {
    max-width: none !important;
    width: 100% !important;
  }
  .hub-catalog-bar-filters select:last-child {
    grid-column: 1 / -1;
  }
  .hub-catalog-bar-apply {
    width: 100% !important;
  }
}

.hub-cart-layout {
  display: grid;
  grid-template-columns: 1.5fr 0.9fr;
  gap: 16px;
  align-items: start;
}
.hub-cart-list { display: flex; flex-direction: column; gap: 10px; }
.hub-cart-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 14px;
}
.hub-cart-item h2 { margin: 0 0 4px; font-size: 1.05rem; }
.hub-cart-item h2 a { color: var(--cream); text-decoration: none; }
.hub-cart-item-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.hub-cart-summary { padding: 18px 20px; border-radius: 14px; position: sticky; top: 84px; }
.hub-cart-summary h2 { margin: 0 0 14px; font-size: 1.1rem; }
.hub-cart-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
  font-size: 1.05rem;
}
.hub-cart-legal { font-size: 0.84rem; line-height: 1.45; margin: 0 0 14px; }
.hub-cart-cta { width: 100%; }
.hub-cart-note { margin-top: 10px; font-size: 0.82rem; }

.hub-support-layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 16px;
  align-items: start;
}
.hub-support-guest { padding: 24px; border-radius: 14px; max-width: 640px; }
.hub-ticket-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hub-ticket-item {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--input);
}
.hub-ticket-item a { color: inherit; text-decoration: none; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hub-ticket-item a strong { color: var(--cream); }
.hub-ticket-thread { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.hub-ticket-msg { border-radius: 14px; padding: 14px 16px; }
.hub-ticket-msg header { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.hub-ticket-msg.is-staff { border-color: color-mix(in srgb, var(--fp-blue-light) 35%, var(--border)); }
.hub-ticket-msg.is-user { border-color: color-mix(in srgb, var(--accent) 28%, var(--border)); }

.hub-about-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.hub-about-cta { margin-top: 8px; }

.hub-help-card {
  padding: 18px;
  border-radius: 14px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.hub-help-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  text-decoration: none;
}
.hub-help-card strong { display: block; margin-bottom: 6px; color: var(--cream); }
.hub-legal-links { margin-top: 20px; padding: 18px 20px; border-radius: 14px; }
.hub-legal-links h2 { margin: 0 0 12px; font-size: 1.1rem; }

.hub-cms-article { padding: 24px 26px; border-radius: 14px; max-width: 1100px; }
.hub-cms-body,
.hub-prose,
.hub-legal {
  line-height: 1.55;
  color: var(--text);
}
.hub-cms-body h2,
.hub-legal h2 {
  margin: 1.4em 0 0.5em;
  font-size: 1.15rem;
  color: var(--cream);
}
.hub-cms-body ul,
.hub-legal ul,
.hub-cms-body ol,
.hub-legal ol { padding-left: 1.2rem; }
.hub-legal-meta { color: var(--muted); font-size: 0.9rem; }

.hub-plugin-badges { margin: 10px 0 18px; }
.hub-buy-price { font-size: 1.45rem; }
.hub-buy-legal { font-size: 0.82rem; margin: 8px 0 14px; }
.hub-buy-form { margin-bottom: 8px; }
.hub-review-card { margin-bottom: 10px; border-radius: 12px; }
.hub-auth-consent { font-size: 0.84rem; line-height: 1.4; }

/* —— Admin shell polish —— */
.hub-admin-body { min-height: 100vh; background: var(--bg); }
.admin-main { min-width: 0; }
.admin-page-head { margin-bottom: 18px; }
.admin-page-title { margin: 0; font-size: 1.55rem; color: var(--cream); }
.admin-page-sub { margin: 6px 0 0; }
.admin-back { margin: 0 0 14px; }
.admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.admin-search {
  display: flex;
  gap: 8px;
  flex: 1 1 280px;
  max-width: 520px;
}
.admin-search input[type=search] {
  flex: 1;
  width: auto;
  margin-top: 0;
  padding: 9px 12px;
  background: var(--input);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
}

.admin-search input[type=search]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.admin-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.admin-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
  text-decoration: none;
  font-size: 0.86rem;
  background: var(--panel);
}
.admin-chip:hover { color: var(--text); text-decoration: none; border-color: var(--accent); }
.admin-chip.active {
  background: color-mix(in srgb, var(--accent) 22%, var(--panel));
  border-color: var(--accent);
  color: var(--cream);
}
.admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.admin-stat { text-decoration: none; color: inherit; padding: 16px; }
.admin-stat:hover { text-decoration: none; border-color: var(--accent); }
.admin-stat-value { display: block; font-size: 1.55rem; font-weight: 700; color: var(--cream); }
.admin-stat-label { display: block; margin-top: 4px; color: var(--muted); font-size: 0.86rem; }
.admin-ops-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 18px;
}
.admin-ops-card h2 { margin-top: 0; font-size: 1.1rem; }
.admin-status-list { list-style: none; padding: 0; margin: 0 0 10px; }
.admin-status-list li { display: flex; align-items: center; gap: 8px; margin: 8px 0; color: var(--text); }
.admin-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--muted); flex: 0 0 auto;
}
.admin-dot.ok { background: var(--fp-green, #8cc63f); }
.admin-dot.warn { background: var(--fp-orange, #cd8c2b); }
.admin-dot.bad { background: var(--accent); }
.admin-ops-meta { font-size: 0.85rem; word-break: break-all; }
.admin-banner-warn {
  padding: 10px 12px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--cream);
}
.admin-quick-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.admin-dash-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 8px;
}
.admin-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.admin-section-head h2 { margin: 0; font-size: 1.1rem; }
.admin-table-dense td, .admin-table-dense th { padding: 10px 8px; font-size: 0.92rem; }
.admin-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
}

/* CHANGE: table action column — keep buttons/borders aligned across rows. */
.admin-table-actions {
  width: 1%;
  white-space: nowrap;
  vertical-align: middle !important;
  text-align: right;
}
.admin-table-actions-inner {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
}
.admin-table-actions form {
  display: inline-flex;
  margin: 0;
  padding: 0;
}
.admin-table-actions .btn {
  white-space: nowrap;
  margin: 0;
}

/* CHANGE: Pages CMS master–detail — compact list + one editor. */
.admin-pages { display: flex; flex-direction: column; gap: 14px; }
.admin-pages-create {
  padding: 0;
  overflow: hidden;
}
.admin-pages-create > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  padding: 12px 16px;
  font-weight: 650;
  color: var(--cream);
}
.admin-pages-create > summary::-webkit-details-marker { display: none; }
.admin-pages-create > summary::before {
  content: "+ ";
  color: var(--accent);
  font-weight: 700;
}
.admin-pages-create[open] > summary::before { content: "− "; }
.admin-pages-create-form {
  padding: 0 16px 14px;
  border-top: 1px solid var(--border);
}
.admin-pages-create-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 14px;
  align-items: flex-end;
  padding-top: 12px;
}
.admin-pages-create-row .btn { align-self: flex-end; }

.admin-pages-layout {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.admin-pages-list {
  padding: 0;
  position: sticky;
  top: 72px;
  max-height: calc(100vh - 96px);
  overflow: auto;
}
.admin-pages-list-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--panel);
  z-index: 1;
}
.admin-pages-empty { padding: 14px; margin: 0; }
.admin-pages-items {
  list-style: none;
  margin: 0;
  padding: 6px;
}
.admin-pages-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  border: 1px solid transparent;
}
.admin-pages-item:hover {
  background: color-mix(in srgb, var(--panel-alt) 80%, transparent);
  text-decoration: none;
}
.admin-pages-item.is-active {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 14%, var(--panel));
}
.admin-pages-item-title {
  font-weight: 650;
  color: var(--cream);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-pages-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  align-items: center;
  font-size: 0.78rem;
}
.admin-pages-pill {
  display: inline-flex;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
  text-transform: lowercase;
  letter-spacing: 0.02em;
}
.admin-pages-pill.is-on {
  color: var(--fp-green, #8cc63f);
  border-color: color-mix(in srgb, var(--fp-green, #8cc63f) 45%, var(--border));
}

.admin-pages-editor { padding: 16px 18px 14px; min-width: 0; }
.admin-pages-editor-actions { display: flex; gap: 8px; }
.admin-pages-placeholder {
  padding: 36px 16px;
  text-align: center;
}
.admin-pages-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: flex-end;
  margin: 14px 0 12px;
}
.admin-pages-fields > label {
  flex: 0 1 auto;
}
.admin-pages-fields .admin-field-sm {
  width: 8.5rem;
  max-width: 8.5rem;
}
.admin-pages-fields .admin-field-sm select,
.admin-pages-fields .admin-field-sm input {
  width: 100%;
}
.admin-pages-body {
  width: 100% !important;
  max-width: none !important;
  min-height: 280px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86rem;
  line-height: 1.45;
}
.admin-pages-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}
.admin-pages-footer-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.admin-pages-delete {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

@media (max-width: 900px) {
  .admin-pages-layout { grid-template-columns: 1fr; }
  .admin-pages-list {
    position: static;
    max-height: none;
  }
}

.admin-check { display: inline-flex !important; align-items: center; gap: 10px; color: var(--text); font-size: 0.95rem; font-weight: 400; cursor: pointer; }
.admin-check-row { display: flex; flex-wrap: wrap; gap: 10px 12px; margin: 12px 0; align-items: center; }

/* CHANGE: asp-for injects hidden after checkbox — use ~ not +; make state obvious. */
.admin-shell .admin-check {
  padding: 8px 12px 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-alt);
  transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}
.admin-shell .admin-check:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}
.admin-shell .admin-check input[type="checkbox"]:checked ~ .admin-check-box {
  border-color: color-mix(in srgb, var(--accent) 90%, white);
  background: var(--accent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent),
    0 0 12px color-mix(in srgb, var(--accent) 45%, transparent);
}
.admin-shell .admin-check input[type="checkbox"]:checked ~ .admin-check-box::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.admin-shell .admin-check:has(input[type="checkbox"]:checked) {
  border-color: color-mix(in srgb, var(--accent) 70%, var(--border));
  background: color-mix(in srgb, var(--accent) 16%, var(--panel));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}
.admin-shell .admin-check:has(input[type="checkbox"]:checked) .admin-check-text {
  color: var(--cream);
  font-weight: 600;
}
.admin-shell .admin-check-box {
  display: block;
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: #12171f;
  flex-shrink: 0;
  position: relative;
}

/* CHANGE: Enter-to-chip tag editor (double-click to edit). */
.admin-tag-editor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 12px;
  background: var(--input);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: text;
  max-width: 40rem;
}
.admin-tag-editor:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.admin-tag-chips {
  display: contents;
}
.admin-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 5px 8px 5px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 18%, var(--panel));
  color: var(--cream);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.2;
}
.admin-tag-chip:hover {
  border-color: color-mix(in srgb, var(--accent) 65%, var(--border));
  background: color-mix(in srgb, var(--accent) 28%, var(--panel));
}
.admin-tag-chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
}
.admin-tag-chip-x:hover {
  color: var(--cream);
  background: color-mix(in srgb, var(--accent) 35%, transparent);
}
.admin-tag-input {
  flex: 1 1 140px;
  min-width: 120px;
  margin: 0 !important;
  padding: 6px 4px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text);
  font: inherit;
  outline: none !important;
  max-width: none !important;
  width: auto !important;
}
.admin-tag-chip-edit {
  min-width: 80px;
  max-width: 220px;
  margin: 0;
  padding: 5px 10px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: 0.86rem;
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
}

/* CHANGE: Codefling-style screenshot dropzone + thumbnail grid. */
.admin-shot-uploader { margin: 12px 0 16px; }
.admin-shot-drop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 140px;
  padding: 22px 18px;
  border: 1px dashed color-mix(in srgb, var(--border) 80%, var(--muted));
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel-alt) 70%, transparent);
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.admin-shot-drop.is-dragover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
}
.admin-shot-file {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.admin-shot-drop-lead {
  margin: 4px 0 0;
  color: var(--cream);
  font-size: 0.95rem;
}
.admin-shot-drop-hint {
  margin: 0;
  font-size: 0.82rem;
}
.admin-shot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin-top: 4px;
}
.admin-shot-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.admin-shot-thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #0d1117;
}
.admin-shot-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.admin-shot-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}
.admin-shot-remove:hover { background: var(--accent); }
.admin-shot-primary-form {
  position: absolute;
  left: 8px;
  bottom: 8px;
  margin: 0;
}
.admin-shot-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 4px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: var(--cream);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
.admin-shot-primary input {
  accent-color: var(--fp-green, #8cc63f);
  margin: 0;
  cursor: pointer;
}
.admin-shot-card.is-primary .admin-shot-thumb {
  border-color: color-mix(in srgb, var(--fp-green, #8cc63f) 55%, var(--border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fp-green, #8cc63f) 35%, transparent);
}
.admin-shot-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font-size: 0.78rem;
}
.admin-shot-name {
  color: var(--muted);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-shot-name:hover { color: var(--cream); }
.admin-shot-url summary {
  cursor: pointer;
  user-select: none;
}

/* CHANGE: Quill dark rich-text for product description. */
.admin-desc-block { display: flex; flex-direction: column; gap: 8px; }
.admin-desc-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 500;
}
.admin-rte {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--input);
  max-width: 100%;
}
.admin-rte .ql-toolbar.ql-snow {
  border: 0;
  border-bottom: 1px solid var(--border);
  background: var(--panel-alt);
  padding: 8px 10px;
}
.admin-rte .ql-container.ql-snow {
  border: 0;
  font: inherit;
  font-size: 0.95rem;
  min-height: 220px;
  color: var(--text);
}
.admin-rte .ql-editor {
  min-height: 220px;
  color: var(--text);
  line-height: 1.5;
}
.admin-rte .ql-editor.ql-blank::before {
  color: var(--muted);
  font-style: normal;
  opacity: 0.8;
}
.admin-rte .ql-snow .ql-stroke { stroke: var(--muted); }
.admin-rte .ql-snow .ql-fill { fill: var(--muted); }
.admin-rte .ql-snow .ql-picker { color: var(--text); }
.admin-rte .ql-snow .ql-picker-label { border-color: transparent; }
.admin-rte .ql-snow .ql-picker-options {
  background: var(--panel);
  border-color: var(--border);
  color: var(--text);
}
.admin-rte .ql-snow.ql-toolbar button:hover,
.admin-rte .ql-snow .ql-toolbar button:hover,
.admin-rte .ql-snow.ql-toolbar button.ql-active,
.admin-rte .ql-snow .ql-toolbar button.ql-active {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 6px;
}
.admin-rte .ql-snow.ql-toolbar button:hover .ql-stroke,
.admin-rte .ql-snow .ql-toolbar button:hover .ql-stroke,
.admin-rte .ql-snow.ql-toolbar button.ql-active .ql-stroke,
.admin-rte .ql-snow .ql-toolbar button.ql-active .ql-stroke { stroke: var(--cream); }
.admin-rte .ql-snow.ql-toolbar button:hover .ql-fill,
.admin-rte .ql-snow .ql-toolbar button:hover .ql-fill,
.admin-rte .ql-snow.ql-toolbar button.ql-active .ql-fill,
.admin-rte .ql-snow .ql-toolbar button.ql-active .ql-fill { fill: var(--cream); }
.admin-rte .ql-snow a { color: var(--accent); }
.admin-desc-html {
  min-height: 220px;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.86rem;
}
.admin-grant-panel { margin-bottom: 18px; }
.admin-mono { font-family: ui-monospace, Consolas, monospace; font-size: 0.78rem; word-break: break-all; }
.admin-buyer-cell { display: flex; gap: 10px; align-items: center; }
.admin-avatar, .admin-avatar-lg {
  border-radius: 50%;
  object-fit: cover;
  background: var(--panel-alt);
  border: 1px solid var(--border);
}
.admin-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  font-weight: 700;
  color: var(--cream);
  background: color-mix(in srgb, var(--accent) 35%, var(--panel));
}
.admin-avatar-lg { width: 72px; height: 72px; }
.admin-avatar-lg.admin-avatar-fallback { width: 72px; height: 72px; font-size: 1.6rem; }
.admin-buyer-hero {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 16px;
  padding: 16px;
}
.admin-ticket-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.admin-thread { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.admin-msg.is-staff { border-left: 3px solid var(--accent); }
.admin-msg.is-user { border-left: 3px solid var(--fp-blue, #4a90d9); }
.admin-msg-head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.admin-msg-body { margin: 0; white-space: pre-wrap; }
.admin-inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.admin-inline-form select,
.admin-inline-form input:not([type="checkbox"]):not([type="hidden"]) {
  width: auto;
  min-width: 140px;
  margin-top: 0;
}
.admin-settings-form { display: flex; flex-direction: column; gap: 14px; }
/* CHANGE: professional Settings page — status chips + compact field rows. */
.admin-settings { display: flex; flex-direction: column; gap: 14px; }
.admin-settings-status { padding: 16px 18px; }
.admin-settings-hint { font-size: 0.82rem; }
.admin-settings-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 4px;
}
.admin-settings-chip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel-alt) 70%, transparent);
  min-width: 0;
}
.admin-settings-chip strong {
  display: block;
  color: var(--cream);
  font-size: 0.88rem;
  margin-bottom: 2px;
}
.admin-settings-chip span:last-child {
  display: block;
  color: var(--muted);
  font-size: 0.8rem;
}
.admin-settings-chip.is-ok {
  border-color: color-mix(in srgb, var(--fp-green, #8cc63f) 40%, var(--border));
}
.admin-settings-chip.is-warn {
  border-color: color-mix(in srgb, var(--fp-orange, #cd8c2b) 40%, var(--border));
}
.admin-settings-chip.is-bad {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}
.admin-settings-webhook {
  margin: 12px 0 0;
  font-size: 0.82rem;
  word-break: break-all;
}
.admin-settings-panel {
  padding: 16px 18px 18px;
}
.admin-settings-panel h2 {
  margin: 0 0 6px;
  font-size: 1.05rem;
}
.admin-settings-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: flex-end;
}
.admin-settings-fields > label {
  flex: 0 1 auto;
  min-width: 0;
}
.admin-settings-fields .admin-field-sm {
  width: 8.5rem;
  max-width: 8.5rem;
}
.admin-settings-fields .admin-field-sm input {
  width: 100%;
}
.admin-settings-grow {
  flex: 1 1 220px;
  min-width: 180px;
  max-width: 36rem;
}
.admin-settings-note {
  margin: 10px 0 0;
  font-size: 0.82rem;
}
.admin-settings-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: 8px 0 14px;
}
.admin-settings-announce {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 40rem;
}
.admin-settings-announce textarea {
  width: 100% !important;
  max-width: none !important;
}
.admin-sticky-save {
  position: sticky;
  bottom: 12px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  border: 1px solid var(--border);
  border-radius: 10px;
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
}
.admin-sticky-save .btn {
  width: auto;
  align-self: auto;
}

@media (max-width: 960px) {
  .admin-settings-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .admin-settings-status-grid { grid-template-columns: 1fr; }
}

.admin-cat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.admin-cat-row input[type=text],
.admin-cat-row input:not([type]) {
  flex: 1 1 180px;
  width: auto;
  min-width: 140px;
  margin-top: 0;
}
.admin-inline-delete { margin: -8px 0 16px; }
.btn-danger-ghost {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  color: #f0b4a8;
}
.btn-danger-ghost:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.hub-badge-ok {
  background: color-mix(in srgb, var(--fp-green, #8cc63f) 28%, transparent);
  color: #c8e6a0;
}
.hub-badge-warn {
  background: color-mix(in srgb, var(--accent) 28%, transparent);
  color: #f0b4a8;
}
tr.is-muted { opacity: 0.55; }
.hub-store-banner {
  padding: 10px 16px;
  text-align: center;
  background: color-mix(in srgb, var(--accent) 16%, var(--panel));
  border-bottom: 1px solid var(--border);
  color: var(--cream);
}
.hub-price-old {
  text-decoration: line-through;
  opacity: 0.65;
  margin-right: 6px;
  font-weight: 500;
  font-size: 0.9em;
}
.hub-pdp-deps {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.hub-pdp-deps h3 { margin: 0 0 8px; font-size: 1rem; }
.hub-pdp-deps ul { margin: 0; padding-left: 1.1rem; }
.hub-pdp-deps li { margin: 4px 0; }

/* CHANGE: header balance + bell + mail (screenshot-style user bar). */
.hub-user-bar {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: 4px;
}
.hub-user-bar-sep {
  width: 1px;
  height: 18px;
  background: color-mix(in srgb, var(--text) 28%, transparent);
}
.hub-balance-link {
  display: inline-flex;
  align-items: center;
  padding: 6px 2px;
  color: var(--text);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
}
.hub-balance-link:hover {
  color: var(--accent);
  text-decoration: none;
}
.hub-balance-drop { position: relative; }
.hub-balance-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 2px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
}
.hub-balance-btn svg { opacity: 0.7; }
.hub-drop-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 180px;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hub-drop-menu a {
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
}
.hub-drop-menu a:hover { background: var(--panel-alt); }
.hub-drop-hint { padding: 6px 10px; font-size: 0.78rem; }
.hub-icon-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  padding: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  color: color-mix(in srgb, var(--text) 82%, transparent);
  text-decoration: none;
}
.hub-icon-chip:hover {
  color: var(--text);
  background: var(--panel-alt);
}
.hub-icon-chip.is-active {
  color: var(--accent);
}
.hub-icon-badge {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

/* CHANGE: notification bell dropdown (list first, full page via footer link) */
.hub-notif-drop {
  position: relative;
}
.hub-notif-drop.open .hub-icon-chip {
  color: var(--accent);
  background: var(--panel-alt);
}
.hub-notif-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(420px, calc(100vw - 24px));
  max-height: min(520px, 70vh);
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  z-index: 60;
  overflow: hidden;
}
.hub-notif-panel[hidden] {
  display: none !important;
}
.hub-notif-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.hub-notif-panel-head strong {
  font-size: 1rem;
  color: var(--text);
}
.hub-notif-settings-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--panel-alt) 80%, transparent);
  color: color-mix(in srgb, var(--text) 88%, transparent);
  font-size: 0.78rem;
  text-decoration: none;
  white-space: nowrap;
}
.hub-notif-settings-btn:hover {
  border-color: var(--accent);
  color: var(--text);
}
.hub-notif-panel-list {
  overflow-y: auto;
  max-height: 360px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--accent) 70%, transparent) transparent;
}
.hub-notif-panel-list::-webkit-scrollbar {
  width: 6px;
}
.hub-notif-panel-list::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--accent) 70%, transparent);
  border-radius: 999px;
}
.hub-notif-empty {
  margin: 0;
  padding: 20px 16px;
  text-align: center;
}
.hub-notif-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  color: var(--text);
  text-decoration: none;
}
.hub-notif-item:hover {
  background: var(--panel-alt);
}
.hub-notif-item.is-unread {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.hub-notif-avatar {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--accent);
}
.hub-notif-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.hub-notif-title {
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--text);
  font-weight: 600;
}
.hub-notif-body {
  font-size: 0.82rem;
  line-height: 1.35;
  color: color-mix(in srgb, var(--text) 72%, transparent);
}
.hub-notif-time {
  font-size: 0.75rem;
  color: color-mix(in srgb, var(--text) 55%, transparent);
}
.hub-notif-panel-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  color: var(--accent);
  font-weight: 600;
  font-size: 0.88rem;
  text-decoration: none;
}
.hub-notif-panel-foot:hover {
  background: var(--panel-alt);
  color: var(--text);
}

.hub-notif-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.hub-notif-page-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.hub-notif-full-list {
  padding: 0;
  overflow: hidden;
}
.hub-notif-full-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.hub-notif-full-item:last-child {
  border-bottom: 0;
}
.hub-notif-full-item.is-unread {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.hub-notif-full-item .hub-notif-copy {
  flex: 1;
}
.hub-notif-full-item .hub-notif-title {
  text-decoration: none;
}
.hub-notif-full-item .hub-notif-title:hover {
  color: var(--accent);
}
.hub-notif-channels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 12px;
}
.hub-notif-channel {
  padding: 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel-alt);
}
.hub-notif-channel-ico {
  font-size: 1.4rem;
  margin-bottom: 8px;
}
.hub-notif-channel h3 {
  margin: 0 0 8px;
  font-size: 1rem;
}
.hub-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  cursor: pointer;
}
@media (max-width: 900px) {
  .hub-notif-channels {
    grid-template-columns: 1fr;
  }
  .hub-notif-panel {
    right: -40px;
  }
}

/* CHANGE: messages dropdown + compose modal + two-pane inbox */
.hub-mail-drop { position: relative; }
.hub-mail-drop.open .hub-icon-chip {
  color: var(--accent);
  background: var(--panel-alt);
}
.hub-mail-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(440px, calc(100vw - 24px));
  max-height: min(520px, 70vh);
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  z-index: 60;
  overflow: hidden;
}
.hub-mail-panel[hidden] { display: none !important; }
.hub-mail-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.hub-mail-panel-head strong { font-size: 1rem; }
.hub-mail-compose-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, #4a8fd4 55%, var(--border));
  background: color-mix(in srgb, #4a8fd4 16%, var(--panel-alt));
  color: var(--text);
  font-size: 0.78rem;
  cursor: pointer;
  white-space: nowrap;
}
.hub-mail-compose-btn:hover {
  border-color: #4a8fd4;
}
.hub-mail-panel-list {
  overflow-y: auto;
  max-height: 360px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--accent) 70%, transparent) transparent;
}
.hub-mail-panel-list::-webkit-scrollbar { width: 6px; }
.hub-mail-panel-list::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--accent) 70%, transparent);
  border-radius: 999px;
}
.hub-mail-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  color: var(--text);
  text-decoration: none;
}
.hub-mail-item:hover { background: var(--panel-alt); }
.hub-mail-item.is-unread {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.hub-mail-avatar {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent);
}
.hub-mail-copy,
.hub-mail-row-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
.hub-mail-item-top,
.hub-mail-row-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.hub-mail-title,
.hub-mail-subj {
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
}
.hub-mail-item-meta,
.hub-mail-meta {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}
.hub-mail-unread {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 22%, transparent);
  color: var(--text);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.hub-mail-time,
.hub-mail-meta time {
  font-size: 0.72rem;
  color: color-mix(in srgb, var(--text) 55%, transparent);
}
.hub-mail-body,
.hub-mail-preview {
  font-size: 0.82rem;
  line-height: 1.35;
  color: color-mix(in srgb, var(--text) 72%, transparent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hub-mail-peers {
  font-size: 0.75rem;
  color: color-mix(in srgb, var(--text) 55%, transparent);
}
.hub-mail-panel-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  color: var(--accent);
  font-weight: 600;
  font-size: 0.88rem;
  text-decoration: none;
}
.hub-mail-panel-foot:hover {
  background: var(--panel-alt);
  color: var(--text);
}
.hub-mail-empty {
  margin: 0;
  padding: 20px 16px;
  text-align: center;
}

.hub-modal-open { overflow: hidden; }
.hub-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.hub-modal[hidden] { display: none !important; }
.hub-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
}
.hub-modal-dialog {
  position: relative;
  width: min(640px, 100%);
  max-height: min(90vh, 760px);
  overflow: auto;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
.hub-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.hub-modal-head h2 {
  margin: 0;
  font-size: 1.15rem;
}
.hub-modal-close {
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.hub-modal-close:hover { background: var(--panel-alt); }
.hub-modal-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
}
.hub-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hub-field-label {
  font-size: 0.85rem;
  font-weight: 600;
}
.hub-req {
  color: #e57373;
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-left: 4px;
}
.hub-field input,
.hub-field textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel-alt);
  color: var(--text);
  font: inherit;
}
.hub-field textarea { resize: vertical; min-height: 140px; }
.hub-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 4px;
}

.hub-mail-page { padding-bottom: 24px; }
.hub-mail-shell {
  display: grid;
  grid-template-columns: minmax(280px, 360px) 1fr;
  min-height: min(72vh, 820px);
  padding: 0;
  overflow: hidden;
}
.hub-mail-sidebar {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  min-height: 0;
  background: color-mix(in srgb, var(--panel-alt) 55%, transparent);
}
.hub-mail-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--border);
}
.hub-mail-side-head h1 {
  margin: 0;
  font-size: 1.15rem;
}
.hub-mail-create-btn {
  white-space: nowrap;
  font-size: 0.82rem;
  padding: 6px 10px;
}
.hub-mail-side-list {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
.hub-mail-row {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  color: var(--text);
  text-decoration: none;
  position: relative;
}
.hub-mail-row:hover { background: var(--panel-alt); }
.hub-mail-row.is-unread { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.hub-mail-row.is-active {
  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
}
.hub-mail-row.is-active::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 0;
  bottom: 8px;
  width: 3px;
  border-radius: 3px 0 0 3px;
  background: var(--accent);
}
.hub-mail-side-foot {
  padding: 10px 12px;
  border-top: 1px solid var(--border);
}
.hub-mail-search {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  opacity: 0.7;
}
.hub-mail-main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}
.hub-mail-main--empty {
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 32px;
  text-align: center;
}
.hub-mail-placeholder { margin: 0; max-width: 28ch; }
.hub-mail-conv-head {
  padding: 16px 18px 10px;
  border-bottom: 1px solid var(--border);
}
.hub-mail-conv-head h2 { margin: 0 0 4px; font-size: 1.25rem; }
.hub-mail-conv-head p { margin: 0; }
.hub-mail-warn {
  margin: 12px 18px 0;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, #c9a227 55%, var(--border));
  background: color-mix(in srgb, #c9a227 12%, var(--panel-alt));
  color: color-mix(in srgb, #f0d78c 80%, var(--text));
  font-size: 0.85rem;
}
.hub-mail-thread {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hub-mail-bubble {
  max-width: 85%;
  align-self: flex-start;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
}
.hub-mail-bubble.is-mine {
  align-self: flex-end;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}
.hub-mail-bubble-meta {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 0.78rem;
  margin-bottom: 4px;
}
.hub-mail-bubble-body {
  white-space: pre-wrap;
  line-height: 1.45;
}
.hub-mail-reply {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel-alt) 40%, transparent);
}
.hub-mail-reply textarea {
  flex: 1;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font: inherit;
  resize: vertical;
}
@media (max-width: 900px) {
  .hub-mail-shell { grid-template-columns: 1fr; }
  .hub-mail-sidebar { max-height: 42vh; }
  .hub-mail-panel { right: -72px; }
}

.hub-purchase-card.is-unread {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
}

@media (max-width: 900px) {
  .admin-ops-grid,
  .admin-dash-split,
  .admin-form-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .hub-cart-layout,
  .hub-support-layout,
  .hub-about-grid { grid-template-columns: 1fr; }
  .hub-cart-summary { position: static; }
}