@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Outfit:wght@400;500;600;700;800&display=swap");

:root,
html[data-theme="light"] {
  color-scheme: light;
  --bg: #eef0f3;
  --bg2: #ffffff;
  --surface: #ffffff;
  --surface-muted: #f3f4f6;
  --ink: #111111;
  --text: #141414;
  --heading: #111111;
  --hint: #6b7280;
  --line: #e4e7eb;
  --lime: #b8ff3c;
  --lime-2: #8ef01e;
  --black: #0d0d0d;
  --bubble-in: #e8ebef;
  --bubble-out: #111111;
  --ghost-bg: #0d0d0d;
  --ghost-fg: #ffffff;
  --ghost-ring: #111111;
  --input-bg: #ffffff;
  --input-border: #111111;
  --tabbar-bg: #111111;
  --tab-inactive-bg: #1c1c1c;
  --tab-inactive-fg: #d4d8dc;
  --app-gradient: radial-gradient(circle at 12% 8%, rgba(184, 255, 60, 0.16), transparent 28%),
    linear-gradient(#f4f5f7, #e8ebef);
  --grid-line: rgba(17, 17, 17, 0.035);
  --card-shadow: 0 8px 24px rgba(17, 17, 17, 0.04);
  --soft-fill: rgba(17, 17, 17, 0.05);
  --soft-line: rgba(17, 17, 17, 0.08);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bot: env(safe-area-inset-bottom, 0px);
  --tab: 78px;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121418;
  --bg2: #1a1d23;
  --surface: #1e2229;
  --surface-muted: #282d36;
  --ink: #f3f4f6;
  --text: #e8eaee;
  --heading: #f5f6f8;
  --hint: #9aa1ac;
  --line: #343a44;
  --black: #0a0a0a;
  --bubble-in: #2a303a;
  --bubble-out: #d8dde6;
  --bubble-out-fg: #111111;
  --bubble-out-meta: rgba(17, 17, 17, 0.62);
  --ghost-bg: #eceff3;
  --ghost-fg: #111111;
  --ghost-ring: #eceff3;
  --input-bg: #282d36;
  --input-border: #4b5563;
  --tabbar-bg: #0c0e11;
  --tab-inactive-bg: #22262e;
  --tab-inactive-fg: #c5cad3;
  --app-gradient: radial-gradient(circle at 14% 6%, rgba(184, 255, 60, 0.1), transparent 34%),
    radial-gradient(circle at 88% 18%, rgba(148, 163, 184, 0.08), transparent 36%),
    linear-gradient(#16191f, #101216);
  --grid-line: rgba(255, 255, 255, 0.045);
  --card-shadow: 0 12px 30px rgba(0, 0, 0, 0.38);
  --soft-fill: rgba(255, 255, 255, 0.06);
  --soft-line: rgba(255, 255, 255, 0.1);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: Outfit, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
}
html.theme-switching,
html.theme-switching body,
html.theme-switching .app,
html.theme-switching .card,
html.theme-switching .profile-card,
html.theme-switching .sheet-card,
html.theme-switching .live-card,
html.theme-switching .sec-tile,
html.theme-switching .tabbar,
html.theme-switching .msg {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.app {
  height: 100%;
  max-width: 520px;
  margin: 0 auto;
  position: relative;
  overflow-x: clip;
  background: var(--app-gradient);
}

.app::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(circle at 50% 20%, #000 20%, transparent 80%);
}

.hud-top { display: none !important; }
.pin-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 3px 8px;
  border-radius: 999px;
  background: #111;
  color: #fff !important;
  -webkit-text-fill-color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.live-card.is-pin {
  box-shadow: 0 0 0 2px #111;
}
.pub-pin-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 10px 0 4px;
}

.view {
  display: none;
  position: relative;
  z-index: 1;
  height: calc(100% - var(--safe-top));
  overflow: auto;
  padding: calc(12px + var(--safe-top)) 16px calc(var(--tab) + 18px + var(--safe-bot));
}
.view.is-active { display: block; }
.view-chat.is-active {
  display: flex;
  flex-direction: column;
  padding-bottom: calc(var(--tab) + 10px + var(--safe-bot));
}

.top, .brand-wrap {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.top h1, .brand-title h1, .wordmark {
  margin: 0;
  font-size: 32px;
  letter-spacing: -0.06em;
  font-weight: 800;
  color: var(--heading);
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
}
.wordmark em, .brand-title h1 em {
  font-style: normal;
  background: var(--lime);
  color: #111;
  padding: 3px 10px 5px;
  border-radius: 10px;
  box-shadow: 0 0 18px rgba(184, 255, 60, 0.45);
}
.top h2 { margin: 0; font-size: 20px; letter-spacing: -0.04em; font-weight: 700; }
.eyebrow {
  margin: 0 0 3px;
  color: #8b9098;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.brand-wrap { align-items: center; flex-direction: column; }
.ad-hero {
  position: relative;
  display: block;
  width: 100%;
  min-height: 200px;
  padding: 16px 16px 14px;
  border-radius: 22px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(17,17,17,0.9) 0%, rgba(17,17,17,0.68) 48%, rgba(17,17,17,0.88) 100%),
    url("/brand/ox-studio.jpg") center / cover no-repeat,
    #111;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 16px 40px rgba(17,17,17,0.16);
  box-sizing: border-box;
}
.ad-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 88% 18%, rgba(184,255,60,0.28), transparent 34%),
    linear-gradient(180deg, transparent 36%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}
.ad-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 168px;
  box-sizing: border-box;
}
.ad-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  flex: 0 0 auto;
}
.ad-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(184,255,60,0.16);
  border: 1px solid rgba(184,255,60,0.55);
  color: var(--lime);
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
}
.ad-live {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 10px rgba(184,255,60,0.9);
  animation: ad-pulse 1.6s ease-in-out infinite;
}
@keyframes ad-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.85); }
}
.ad-hero .eyebrow { color: var(--lime); margin-bottom: 0; }
.ad-hero strong {
  display: block;
  max-width: 20ch;
  font-size: 22px;
  letter-spacing: -0.05em;
  line-height: 1.15;
  font-weight: 800;
  text-shadow: 0 2px 18px rgba(0,0,0,0.35);
  flex: 0 0 auto;
}
.ad-hero strong .ad-title-mark {
  display: inline-block;
  font-style: normal;
  background: var(--lime);
  color: #111;
  padding: 1px 8px 2px;
  border-radius: 999px;
  text-shadow: none;
  box-shadow: 0 0 14px rgba(184,255,60,0.35);
}
.ad-hero-note {
  margin: 6px 0 0;
  color: #d5d9de;
  font-size: 12px;
  line-height: 1.35;
  max-width: 30ch;
  flex: 0 1 auto;
}
.ad-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 12px;
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
}
.ad-cta em {
  font-style: normal;
  background: var(--lime);
  color: #111;
  font-weight: 800;
  padding: 8px 12px;
  border-radius: 12px;
  box-shadow: 0 0 18px rgba(184,255,60,0.35);
  line-height: 1;
}
.ad-cta b {
  font-size: 13px;
  font-weight: 800;
  color: var(--heading);
  background: var(--surface);
  border-radius: 999px;
  padding: 8px 14px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.18);
  line-height: 1;
}
.brand-title { width: 100%; padding-top: 10px; }

.search-wrap {
  position: relative;
  margin-bottom: 14px;
}
.search-wrap::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  background: var(--heading);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='6.5' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M16 16l5 5' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='6.5' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M16 16l5 5' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.search-wrap input, .composer input {
  flex: 1;
  min-width: 0;
  width: 100%;
  border: 1px solid var(--input-border);
  outline: 0;
  background: var(--input-bg);
  color: var(--text);
  border-radius: 16px;
  padding: 13px 14px;
  font: inherit;
}
.search-wrap input { padding-left: 40px; }

.ghost, .primary, .composer button, .fab {
  border: 0;
  border-radius: 999px;
  padding: 10px 16px;
  font: inherit;
  white-space: nowrap;
}
.ghost {
  background: var(--ghost-bg);
  color: var(--ghost-fg);
  font-weight: 700;
  box-shadow: 0 0 0 1px var(--ghost-ring), 0 8px 18px rgba(17, 17, 17, 0.16);
}
.primary, .composer button, .fab {
  background: var(--lime);
  color: #111;
  font-weight: 800;
  box-shadow: 0 0 0 1px #111, 0 0 18px rgba(184,255,60,0.35);
}

.lead-note {
  margin: 0 0 14px;
  color: var(--hint);
  line-height: 1.45;
  font-size: 14px;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.feed-mode-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 4px 0 14px;
}
.feed-mode-btn {
  border: 1px solid var(--ghost-ring);
  background: #111;
  color: #fff;
  border-radius: 16px;
  padding: 12px 10px;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.02em;
  cursor: pointer;
}
.feed-mode-btn.is-on {
  background: var(--lime);
  color: #111;
  box-shadow: 0 0 18px rgba(184,255,60,0.35);
}
.market-block[hidden],
.pubs-block[hidden],
.giveaways-block[hidden] {
  display: none !important;
}
.giveaway-hint { margin: 0 0 10px; line-height: 1.35; font-size: 13px; }
.giveaway-feed { display: grid; gap: 8px; padding-bottom: 110px; }
.giveaway-card {
  display: block;
  padding: 10px 12px;
  background: var(--surface-muted);
  border: 0;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: none;
  outline: none;
  transition: background .15s ease, transform .12s ease;
}
.giveaway-card:active { transform: scale(0.995); }
.giveaway-card .gw-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}
.giveaway-card .gw-main { display: grid; gap: 4px; min-width: 0; }
.giveaway-card .gw-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.giveaway-card .gw-prize {
  margin: 0;
  display: inline-block;
  max-width: 100%;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--heading);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.giveaway-card h3 {
  margin: 0;
  font-size: 15px;
  letter-spacing: -0.03em;
  line-height: 1.2;
}
.giveaway-card .gw-topic {
  margin: 0;
  font-size: 12px;
  color: var(--hint);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.giveaway-card .live-stats {
  margin-top: 2px;
  gap: 6px 10px;
  font-size: 11px;
}
.giveaway-card .gw-actions {
  display: grid;
  gap: 6px;
  margin: 0;
  align-self: center;
}
.giveaway-card .gw-actions .gw-btn,
.giveaway-card .gw-actions .primary,
.giveaway-card .gw-actions .ghost {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  border: 0;
  box-shadow: none;
}
.giveaway-card .gw-actions .primary:disabled {
  opacity: 0.65;
  cursor: default;
}
.giveaway-card.is-mine {
  background: rgba(184,255,60,0.18);
  border: 0;
  box-shadow: none;
}
.giveaway-card .gw-ended {
  font-size: 11px;
  font-weight: 800;
  color: var(--hint);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: "IBM Plex Mono", monospace;
}
.giveaway-card .gw-badge-mine {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hint);
  font-family: "IBM Plex Mono", monospace;
}
.sheet-card.giveaway-detail .gw-prize-xl {
  display: inline-flex;
  margin: 4px 0 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--lime);
  color: #111;
  font-size: 14px;
  font-weight: 800;
  border: 0;
}
.sheet-card.giveaway-detail .pub-actions {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.sheet-card.giveaway-detail .pub-actions .primary,
.sheet-card.giveaway-detail .pub-actions .ghost {
  min-height: 42px;
  border-radius: 12px;
  font-weight: 800;
}
@media (max-width: 520px) {
  .feed-mode-tabs { gap: 6px; }
  .feed-mode-btn { padding: 10px 6px; font-size: 12px; border-radius: 14px; }
  .giveaway-card .gw-row { grid-template-columns: 1fr; }
  .giveaway-card .gw-actions .gw-btn { width: 100%; }
}
.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 0 8px;
}
.sec-kicker {
  margin: 0;
  font-size: 28px;
  letter-spacing: -0.06em;
  font-weight: 800;
  line-height: 1;
}
.sec-count {
  background: #111;
  color: var(--lime);
  border-radius: 999px;
  padding: 7px 10px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sec-intro {
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--hint);
  font-size: 13px;
  line-height: 1.45;
}
.view-sections {
  padding-bottom: calc(var(--tab) + 28px + var(--safe-bot));
}
.sec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: stretch;
}
.sec-grid.is-solo { grid-template-columns: 1fr; }
.sec-grid.is-solo .sec-tile {
  min-height: 0;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
.sec-grid.is-solo .sec-tile-top,
.sec-grid.is-solo .sec-tile-foot { margin: 0; }
.sec-grid.is-solo .sec-tile-body { flex: 1; }
.sec-tile {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 198px;
  height: 100%;
  width: 100%;
  text-align: left;
  color: inherit;
  font: inherit;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 14px;
  box-shadow: var(--card-shadow);
}
.sec-tile-top {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 12px;
}
.sec-idx {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--hint);
}
.sec-tile-body { flex: 1; }
.sec-tile-body h3 {
  margin: 0 0 6px;
  font-size: 16px;
  letter-spacing: -0.04em;
  line-height: 1.15;
}
.sec-tile-body p {
  margin: 0;
  color: var(--hint);
  font-size: 12px;
  line-height: 1.35;
}
.sec-tile-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 14px;
  font-size: 11px;
  color: var(--hint);
  font-family: "IBM Plex Mono", monospace;
}
.sec-tile-foot b {
  color: var(--heading);
  font-size: 16px;
  line-height: 1;
}
.sec-tile.is-feature {
  min-height: 0;
  margin-bottom: 10px;
  background: #111;
  color: var(--lime);
  border-color: var(--ghost-ring);
  box-shadow: 0 0 0 2px var(--lime), 0 16px 32px rgba(17,17,17,0.2);
}
.sec-tile.is-feature .sec-tile-body p,
.sec-tile.is-feature .sec-idx,
.sec-tile.is-feature .sec-tile-foot { color: #c5c9ce; }
.sec-tile.is-feature h3 { color: #fff; font-size: 22px; }
.sec-tile.is-feature .mark {
  background: var(--lime);
  color: #111;
  box-shadow: none;
}
.sec-tile.is-feature .sec-tile-foot b {
  background: var(--lime);
  color: #111;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sec-tile.is-pin:not(.is-feature) {
  box-shadow: 0 0 0 2px var(--lime);
}
.sec-empty {
  background: var(--surface);
  border: 1px dashed var(--ghost-ring);
  border-radius: 22px;
  padding: 28px 18px;
  text-align: center;
  color: var(--hint);
  line-height: 1.45;
}
.pin-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.pin-head span {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hint);
}
.pin-row {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
}
.pin-chip {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  row-gap: 1px;
  align-items: center;
  text-align: left;
  background: #111;
  color: #fff;
  -webkit-text-fill-color: #fff;
  border: 0;
  border-radius: 14px;
  padding: 8px 10px;
  box-shadow: 0 0 0 1.5px var(--lime);
  font: inherit;
}
.pin-chip .pin-badge {
  justify-self: start;
  margin-bottom: 2px;
}
.pin-chip .mark {
  display: none;
}
.pin-chip .mark svg {
  width: 14px;
  height: 14px;
}
.pin-chip .pin-badge {
  padding: 2px 6px;
  font-size: 9px;
}
.pin-chip strong {
  display: block;
  font-size: 13px;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: #fff;
  -webkit-text-fill-color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pin-chip > span:not(.pin-badge) {
  color: #c5c9ce;
  -webkit-text-fill-color: #c5c9ce;
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pin-chip.is-topic { background: #171717; }
.board-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.board-hero-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.board-hero-top h2 {
  margin: 0;
  font-size: 26px;
  letter-spacing: -0.05em;
  line-height: 1.05;
}
.lane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.lane-head span {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  color: var(--hint);
}
.carousel {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  background: #111;
  margin-bottom: 14px;
  aspect-ratio: 2 / 1;
  width: 100%;
  max-width: 100%;
  min-height: 170px;
}
.carousel-track {
  display: flex;
  height: 100%;
  transition: transform 0.4s ease;
}
.carousel-slide {
  flex: 0 0 100%;
  min-width: 100%;
  width: 100%;
  height: 100%;
  color: #fff;
  text-decoration: none;
  display: block;
  position: relative;
  overflow: hidden;
}
.carousel-slide img,
.carousel-slide .banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  background: #151515;
}
.carousel-slide.banner-slide .banner-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #111;
  overflow: hidden;
}
.carousel-slide.banner-slide .banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center center;
  filter: none;
}
.carousel-slide .banner-fallback {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 20%, rgba(184,255,60,0.28), transparent 40%),
    radial-gradient(circle at 85% 30%, rgba(125,211,252,0.22), transparent 42%),
    linear-gradient(145deg, #151515, #0d0d0d 55%, #1a1a1a);
}
/* Paid/admin image banners: photo only, no overlay copy */
.carousel-slide.banner-slide.is-image-only .banner-shade,
.carousel-slide.banner-slide.is-image-only .banner-copy,
.carousel-slide.banner-slide.is-image-only .banner-promo {
  display: none !important;
}
.carousel-slide.banner-slide.is-promo .banner-shade {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8,10,12,0.15) 0%, rgba(8,10,12,0.2) 40%, rgba(8,10,12,0.82) 100%);
}
.banner-promo {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: grid;
  gap: 6px;
  padding: 16px;
  pointer-events: none;
}
.banner-promo-kicker {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lime);
  font-weight: 700;
}
.banner-promo strong {
  font-size: 20px;
  letter-spacing: -0.04em;
  line-height: 1.15;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0,0,0,0.45);
}
.banner-promo p {
  margin: 0;
  font-size: 12px;
  color: rgba(255,255,255,0.82);
  max-width: 34ch;
}
.banner-promo-btn {
  pointer-events: auto;
  justify-self: start;
  margin-top: 4px;
  border: 0;
  border-radius: 999px;
  padding: 10px 16px;
  background: var(--lime);
  color: #111;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0,0,0,0.28);
}
.banner-order-box { margin: 0 0 14px; }
.banner-order-box:empty { display: none; }
.feed-ad,
.feed-ad-strip .feed-ad {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  border-radius: 22px;
  overflow: hidden;
  background: #111;
  text-decoration: none;
}
.feed-ad img,
.feed-ad-strip .feed-ad img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Same visibility treatment as .ad-hero overlays */
.carousel-slide.banner-slide .banner-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(17,17,17,0.78) 0%, rgba(17,17,17,0.42) 48%, rgba(17,17,17,0.72) 100%),
    radial-gradient(circle at 88% 18%, rgba(184,255,60,0.22), transparent 34%),
    linear-gradient(180deg, transparent 28%, rgba(0,0,0,0.62) 100%);
}
.carousel-slide.banner-slide .banner-copy {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px 16px 28px;
  pointer-events: none;
  background: transparent;
}
.carousel-slide .banner-eyebrow {
  margin: 0 0 auto;
  color: var(--lime);
  align-self: flex-start;
}
.carousel-slide .banner-copy strong {
  display: block;
  max-width: 20ch;
  font-size: 22px;
  letter-spacing: -0.05em;
  line-height: 1.15;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0,0,0,0.4);
}
.carousel-slide .banner-sub {
  margin: 6px 0 0;
  color: #d5d9de;
  font-size: 12px;
  line-height: 1.35;
  max-width: 30ch;
}
.carousel-slide .banner-cta {
  margin-top: 12px;
  pointer-events: none;
}
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: var(--lime);
  color: #111;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
}
.carousel-btn.prev { left: 10px; }
.carousel-btn.next { right: 10px; }
.carousel-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 6px;
  pointer-events: none;
}
.carousel-dots button {
  pointer-events: auto;
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
}
.carousel-dots button.is-on { background: var(--lime); width: 16px; border-radius: 99px; }
.home-pins { margin-bottom: 10px; }
.home-pins:empty { display: none; }
.topic {
  width: 100%;
  text-align: left;
  background: #111;
  color: #fff;
  border: 0;
  border-radius: 22px;
  padding: 14px;
  box-shadow: 0 0 0 2px var(--lime);
}
.topic h3 { margin: 0 0 6px; font-size: 16px; }
.topic p { margin: 0; color: #c5c9ce; font-size: 13px; }
.banner {
  display: block;
  overflow: hidden;
  border-radius: 22px;
  background: #111;
  color: #fff;
  text-decoration: none;
  border: 1px solid var(--ghost-ring);
}
.banner img { width: 100%; height: 132px; object-fit: cover; display: block; }
.banner div { padding: 12px 14px 14px; }
.banner strong { display: block; font-size: 16px; }
.banner span { display: block; margin-top: 4px; color: #c5c9ce; font-size: 13px; }
.ad-empty {
  border: 1px dashed #cfd4da;
  background: var(--surface);
  border-radius: 22px;
  padding: 18px 16px;
  text-align: center;
  color: var(--hint);
  line-height: 1.45;
}
.ad-empty a { color: #111; font-weight: 700; background: var(--lime); padding: 2px 8px; border-radius: 8px; text-decoration: none; }

.board-hero {
  background: #111;
  color: #fff;
  border: 0;
  border-radius: 24px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 0 0 2px var(--lime), 0 16px 32px rgba(17,17,17,0.16);
}
.board-hero .eyebrow { color: var(--lime); }
.board-hero p { margin: 0 0 12px; color: #c5c9ce; line-height: 1.45; }
.board-hero .mark { display: none !important; }
.pins, .feed { display: grid; gap: 10px; margin-bottom: 14px; }
.pins { padding: 0; background: transparent; }
.pins .eyebrow, .feed .eyebrow { color: var(--hint); }
.pins:empty { display: none; }
.post {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 14px;
  text-align: left;
  color: var(--text);
}
.post.pin {
  background: #111;
  color: #fff;
  border-color: var(--ghost-ring);
  outline: 2px solid var(--lime);
}
.post.pin p { color: #c5c9ce; }
.post.pin .meta { color: #9aa1a8; }
.post h3 { margin: 0 0 6px; font-size: 17px; letter-spacing: -0.03em; color: var(--heading); }
.post p { margin: 0; color: var(--hint); line-height: 1.4; white-space: pre-wrap; }
.post .meta { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--hint); }
.tag {
  background: #111;
  color: var(--lime);
  border-radius: 999px;
  padding: 3px 8px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
}
.tag.wait { background: #fff3cd; color: #111; }
.tag.reject { background: #2b2b2b; color: #fff; }
.desk-card.is-rejected-log,
.desk-card.is-report-log {
  background: var(--surface-muted);
  border-style: dashed;
}
.desk-card.is-rejected-log h3 .tag.reject {
  margin-right: 6px;
  vertical-align: middle;
}
.fab {
  position: sticky;
  bottom: 8px;
  width: 100%;
  border-radius: 16px;
  padding: 14px;
}
#view-sections .fab.feed-fab {
  position: static;
  margin: 0 0 12px;
  box-shadow: none;
}
#pub-form { display: grid; gap: 10px; }
#pub-form textarea, #pub-form input:not([type="file"]), #pub-form select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 13px 14px;
  font: inherit;
  background: var(--surface);
}
.pub-room-label {
  display: grid;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  color: var(--hint);
}
#pub-room {
  border: 1px solid var(--ghost-ring) !important;
  font-weight: 700;
  color: var(--heading);
}
.file-pick {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  border: 1px dashed #111;
  border-radius: 16px;
  background: var(--surface);
  font-weight: 800;
  cursor: pointer;
}
.file-pick input { display: none; }
.file-list { display: flex; flex-wrap: wrap; gap: 8px; }
.file-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #111;
  color: #fff;
  border-radius: 14px;
  padding: 8px 10px;
  max-width: 100%;
}
.file-item img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 12px;
}
.file-item span { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }
.file-item button {
  border: 0;
  background: var(--lime);
  color: #111;
  border-radius: 999px;
  width: 22px;
  height: 22px;
  font-weight: 800;
}
.media { display: grid; gap: 8px; margin-top: 10px; }
.media-img,
.wall-media {
  display: flex;
  justify-content: center;
  align-items: center;
  width: min(100%, 360px);
  border-radius: 22px;
  overflow: hidden;
  background: #111;
}
.media-img img,
.wall-media img,
.media-video {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(70dvh, 520px);
  object-fit: contain;
  display: block;
  background: #111;
  border-radius: 0;
}
.media-video {
  width: 100%;
  max-height: min(70dvh, 520px);
  aspect-ratio: 16 / 9;
  border-radius: 22px;
  overflow: hidden;
  background: #111;
  object-fit: contain;
}
.media-audio { width: 100%; }
.wall-file-preview {
  width: 96px;
  height: 96px;
  border-radius: 22px;
  overflow: hidden;
  background: #111;
}
.wall-file-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.wall-media { margin: 0 0 10px; }
.file-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #111;
  color: var(--lime);
  text-decoration: none;
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 700;
  font-size: 13px;
}

.cards { display: block; }
.chat-list, .profile { display: grid; gap: 10px; }
.card, .chat-item, .profile-card, .sheet-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 14px;
  box-shadow: var(--card-shadow);
}
.card, .chat-item {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  text-align: left;
  color: inherit;
  font: inherit;
}
.card.is-main {
  background: #111;
  color: #fff;
  border-color: var(--ghost-ring);
  box-shadow: 0 0 0 2px var(--lime), 0 12px 28px rgba(17,17,17,0.18);
}
.card.is-main .mark {
  background: var(--lime);
  color: #111;
  box-shadow: none;
}
.card.is-main h3 { color: #fff; }
.card.is-main p { color: #c5c9ce; }
.card.is-main .price {
  background: var(--lime);
  color: #111;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.main-pill {
  display: inline-block;
  margin-bottom: 6px;
  background: var(--lime);
  color: #111;
  border-radius: 999px;
  padding: 3px 8px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.card h3, .chat-item h3 { margin: 0 0 4px; font-size: 16px; }
.card p, .chat-item p, .meta { margin: 0; color: var(--hint); font-size: 13px; }
.price {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 600;
  font-size: 16px;
  color: var(--heading);
}

.mark, .ico {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: var(--black);
  color: var(--lime);
  box-shadow: 0 0 0 1px #111, 0 0 16px rgba(184,255,60,0.18);
}
.sec-tile[data-icon="chat"] .mark,
.mark[data-icon="chat"] { background: #111; color: #b8ff3c; }
.sec-tile[data-icon="code"] .mark,
.mark[data-icon="code"] { background: #101820; color: #7dd3fc; box-shadow: 0 0 0 1px #111, 0 0 16px rgba(125,211,252,0.22); }
.sec-tile[data-icon="design"] .mark,
.mark[data-icon="design"] { background: #1a1220; color: #f0abfc; box-shadow: 0 0 0 1px #111, 0 0 16px rgba(240,171,252,0.22); }
.sec-tile[data-icon="bots"] .mark,
.mark[data-icon="bots"] { background: #102018; color: #86efac; box-shadow: 0 0 0 1px #111, 0 0 16px rgba(134,239,172,0.22); }
.sec-tile[data-icon="video"] .mark,
.mark[data-icon="video"] { background: #201410; color: #fdba74; box-shadow: 0 0 0 1px #111, 0 0 16px rgba(253,186,116,0.22); }
.sec-tile[data-icon="texts"] .mark,
.mark[data-icon="texts"] { background: #12161f; color: #c4b5fd; box-shadow: 0 0 0 1px #111, 0 0 16px rgba(196,181,253,0.22); }
.sec-tile[data-icon="ads"] .mark,
.mark[data-icon="ads"] { background: #1f180a; color: #fde047; box-shadow: 0 0 0 1px #111, 0 0 16px rgba(253,224,71,0.22); }
.sec-tile[data-icon="photo"] .mark,
.mark[data-icon="photo"] { background: #1a1014; color: #fda4af; box-shadow: 0 0 0 1px #111, 0 0 16px rgba(253,164,175,0.22); }
.sec-tile[data-icon="other"] .mark,
.mark[data-icon="other"] { background: #151515; color: #e5e7eb; box-shadow: 0 0 0 1px #111, 0 0 16px rgba(229,231,235,0.16); }
.sec-tile[data-icon="users"] .mark,
.mark[data-icon="users"] { background: #10161f; color: #93c5fd; box-shadow: 0 0 0 1px #111, 0 0 16px rgba(147,197,253,0.22); }
.sec-tile[data-icon="plastic"] .mark,
.mark[data-icon="plastic"] { background: #121410; color: #bef264; box-shadow: 0 0 0 1px #111, 0 0 16px rgba(190,242,100,0.22); }
.sec-tile[data-icon="crypto"] .mark,
.mark[data-icon="crypto"] { background: #1a1408; color: #fbbf24; box-shadow: 0 0 0 1px #111, 0 0 16px rgba(251,191,36,0.24); }
.sec-tile.is-feature .mark {
  background: var(--lime) !important;
  color: #111 !important;
  box-shadow: none !important;
}

.stats { display: flex; gap: 8px; flex-wrap: wrap; }
.stats span {
  background: #111;
  color: var(--lime);
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 11px;
  font-family: "IBM Plex Mono", monospace;
}

.empty { color: var(--hint); text-align: center; padding: 40px 16px; }

.chat-head { margin-bottom: 8px; align-items: center; }
.chat-who { display: flex; align-items: center; gap: 10px; flex: 1; }
.chat-who .mark { width: 42px; height: 42px; border-radius: 14px; }
.chat-who p { margin: 2px 0 0; color: var(--hint); font-size: 12px; }

.messages {
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 6px 2px 10px;
}
.msg {
  max-width: 86%;
  padding: 10px 12px;
  border-radius: 18px;
  line-height: 1.35;
  font-size: 15px;
  word-break: break-word;
}
.msg small { display: block; margin-top: 0; opacity: 0.6; font-size: 11px; font-family: "IBM Plex Mono", monospace; }
.msg .who {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 4px;
  letter-spacing: 0.04em;
  min-width: 0;
}
.msg .who .msg-author { min-width: 0; flex: 1 1 auto; }
.msg-dm {
  border: 0;
  background: var(--soft-fill);
  color: var(--heading);
  width: 24px;
  height: 24px;
  border-radius: 8px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  flex: 0 0 24px;
  cursor: pointer;
  margin-left: auto;
}
.msg-dm .icon-svg { width: 13px; height: 13px; }
.msg.out .msg-dm {
  background: rgba(184,255,60,0.18);
  color: var(--lime);
}
.msg.in { align-self: flex-start; background: var(--bubble-in); border-bottom-left-radius: 6px; color: var(--text); }
.msg.out { align-self: flex-end; background: var(--bubble-out); color: var(--bubble-out-fg, #fff); border-bottom-right-radius: 6px; }
.msg.out .who { color: var(--bubble-out-meta, rgba(255, 255, 255, 0.72)); }
.msg-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  min-height: 18px;
}
.msg-foot small { flex: 1 1 auto; }
.msg-tools {
  display: inline-flex;
  gap: 4px;
  margin-top: 0;
  flex: 0 0 auto;
}
.msg-tools .msg-tool {
  border: 0;
  border-radius: 10px;
  width: 28px;
  height: 28px;
  padding: 0;
  background: var(--soft-fill);
  color: var(--heading);
  display: inline-grid;
  place-items: center;
  line-height: 1;
  cursor: pointer;
}
.msg-tools .msg-tool .icon-svg { width: 14px; height: 14px; }
.msg-tools .msg-tool.is-ban {
  background: #111;
  color: #fff;
}
.msg-tools .msg-tool.is-unban {
  background: var(--lime);
  color: #111;
}
.msg.out .msg-tools .msg-tool {
  background: rgba(255,255,255,0.12);
  color: #fff;
}
.msg.out .msg-tools .msg-tool.is-unban {
  background: rgba(184,255,60,0.22);
  color: var(--lime);
}
.msg-ban-pill {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  padding: 2px 6px;
  border-radius: 999px;
  background: #fee2e2;
  color: #991b1b;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.msg.is-banned-user {
  opacity: 0.82;
}
.msg > .who,
.msg > .msg-text,
.msg > .msg-foot {
  position: relative;
  z-index: 1;
}
.ban-note {
  margin: 0 0 8px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #111;
  color: var(--lime);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}
.msg.sys {
  align-self: center;
  max-width: 94%;
  background: var(--surface);
  border: 1px solid var(--line);
  text-align: center;
  color: var(--hint);
}

.composer { display: flex; gap: 8px; }
.composer-wrap {
  display: grid;
  gap: 0;
}
.composer-reply {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  padding: 8px 10px;
  border-radius: 14px;
  background: var(--soft-fill);
  border-left: 3px solid var(--lime);
}
.composer-reply[hidden] { display: none !important; }
.composer-reply-main {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 2px;
}
.composer-reply-main b {
  font-size: 12px;
  color: var(--heading);
}
.composer-reply-main span {
  font-size: 12px;
  color: var(--hint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.composer-reply-x {
  border: 0;
  background: transparent;
  color: var(--hint);
  font-size: 20px;
  line-height: 1;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  cursor: pointer;
}
.composer-row {
  display: flex;
  gap: 8px;
  width: 100%;
}
.dm-composer {
  display: grid;
  gap: 8px;
}
.dm-composer .composer-row { display: flex; gap: 8px; }
.dm-composer .composer-row input { flex: 1; }
.msg-reply-quote {
  display: grid;
  gap: 2px;
  width: 100%;
  margin: 0 0 6px;
  padding: 6px 8px;
  border: 0;
  border-radius: 10px;
  border-left: 3px solid var(--lime);
  background: rgba(17,17,17,0.06);
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.msg.out .msg-reply-quote {
  background: rgba(255,255,255,0.12);
}
.msg-reply-quote b {
  font-size: 11px;
  font-weight: 800;
  color: var(--heading);
}
.msg.out .msg-reply-quote b { color: var(--lime); }
.msg-reply-quote span {
  font-size: 12px;
  opacity: 0.8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msg-forward-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  opacity: 0.7;
  margin: 0 0 4px;
}
.msg-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.msg-act {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  background: transparent;
  color: inherit;
  opacity: 0.55;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 4px;
  border-radius: 8px;
  cursor: pointer;
}
.msg-act:hover { opacity: 1; background: var(--soft-fill); }
.msg.out .msg-act:hover { background: rgba(255,255,255,0.12); }
.msg-act .icon-svg { width: 12px; height: 12px; }
.msg.is-flash {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
  transition: outline-color 0.3s ease;
}
html[data-theme="dark"] .msg-reply-quote {
  background: rgba(255,255,255,0.06);
}
html[data-theme="dark"] .composer-reply {
  background: rgba(255,255,255,0.06);
}

.composer button { width: 48px; border-radius: 16px; font-size: 20px; }
.composer button.send-btn,
button.send-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.composer button.send-btn .icon-svg,
button.send-btn .icon-svg {
  width: 20px;
  height: 20px;
}
.stat-ico {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: inherit;
}
.stat-ico .icon-svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.icon-btn .icon-svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}
.icon-btn.danger {
  color: #b42318;
  border-color: #f3c2c0;
}
.wall-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.kv b .icon-svg {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  margin-right: 4px;
}

.tabbar {
  position: absolute;
  z-index: 3;
  left: 12px;
  right: 12px;
  bottom: calc(8px + var(--safe-bot));
  height: 70px;
  padding: 6px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  background: var(--tabbar-bg);
  border-radius: 24px;
  box-shadow: 0 14px 32px rgba(17, 17, 17, 0.24), 0 0 0 1px var(--tabbar-bg);
  overflow: hidden;
}
.tabbar .tab-label { font-size: 10px; }
.tabbar.is-admin { grid-template-columns: repeat(5, 1fr); }
.tabbar.is-admin .tab-label { font-size: 9px; }
.tabbar button {
  border: 0;
  height: 100%;
  min-width: 0;
  border-radius: 18px;
  background: var(--tab-inactive-bg);
  color: var(--tab-inactive-fg);
  font: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
/* display:flex above must not resurrect the admin tab for regular users */
.tabbar button[hidden] {
  display: none !important;
}
.tabbar button.is-on {
  background: var(--lime);
  color: #111;
  box-shadow: 0 0 18px rgba(184,255,60,0.4);
}
.tab-ico {
  width: 22px;
  height: 22px;
  display: block;
  background: currentColor;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
}
.tab-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
}
.tabbar button:not(.is-on) .tab-ico {
  color: var(--lime);
}
.ico-chat {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 5.5A2.5 2.5 0 0 1 6.5 3h11A2.5 2.5 0 0 1 20 5.5v8A2.5 2.5 0 0 1 17.5 16H9l-4.2 3.1A.8.8 0 0 1 3.5 18.5V5.5z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 5.5A2.5 2.5 0 0 1 6.5 3h11A2.5 2.5 0 0 1 20 5.5v8A2.5 2.5 0 0 1 17.5 16H9l-4.2 3.1A.8.8 0 0 1 3.5 18.5V5.5z'/%3E%3C/svg%3E");
}
.ico-grid {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4h7v7H4zm9 0h7v7h-7zM4 13h7v7H4zm9 0h7v7h-7z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4h7v7H4zm9 0h7v7h-7zM4 13h7v7H4zm9 0h7v7h-7z'/%3E%3C/svg%3E");
}
.ico-user {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 12a4 4 0 1 0-4-4 4 4 0 0 0 4 4zm0 2c-4 0-8 2-8 5v1h16v-1c0-3-4-5-8-5z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 12a4 4 0 1 0-4-4 4 4 0 0 0 4 4zm0 2c-4 0-8 2-8 5v1h16v-1c0-3-4-5-8-5z'/%3E%3C/svg%3E");
}
.ico-ox {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm1.1 15.2V19h-2.2v-1.7a4.2 4.2 0 0 1-3.2-4h2.1a2.1 2.1 0 0 0 2.1 1.9c1.1 0 1.8-.5 1.8-1.3 0-.9-.6-1.2-2.3-1.7-2.1-.6-3.5-1.5-3.5-3.5A3.5 3.5 0 0 1 10.9 5.8V4h2.2v1.7a3.6 3.6 0 0 1 2.9 3.4h-2.1a1.7 1.7 0 0 0-1.7-1.5c-.9 0-1.5.4-1.5 1.2 0 .8.6 1.1 2.3 1.6 2.2.6 3.5 1.5 3.5 3.6a3.7 3.7 0 0 1-2.4 3.7z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm1.1 15.2V19h-2.2v-1.7a4.2 4.2 0 0 1-3.2-4h2.1a2.1 2.1 0 0 0 2.1 1.9c1.1 0 1.8-.5 1.8-1.3 0-.9-.6-1.2-2.3-1.7-2.1-.6-3.5-1.5-3.5-3.5A3.5 3.5 0 0 1 10.9 5.8V4h2.2v1.7a3.6 3.6 0 0 1 2.9 3.4h-2.1a1.7 1.7 0 0 0-1.7-1.5c-.9 0-1.5.4-1.5 1.2 0 .8.6 1.1 2.3 1.6 2.2.6 3.5 1.5 3.5 3.6a3.7 3.7 0 0 1-2.4 3.7z'/%3E%3C/svg%3E");
}
.ico-admin {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 4 5v6c0 5 3.4 9.4 8 11 4.6-1.6 8-6 8-11V5z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 4 5v6c0 5 3.4 9.4 8 11 4.6-1.6 8-6 8-11V5z'/%3E%3C/svg%3E");
}

.admin-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  min-width: 0;
  max-width: 100%;
}
.admin-stats span {
  background: #111;
  color: #fff;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 800;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-stats .stat-online {
  background: var(--lime);
  color: #111;
  box-shadow: 0 0 14px rgba(184,255,60,0.35);
}
.online-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 8px rgba(184,255,60,0.7);
  margin-right: 6px;
  vertical-align: middle;
}
.admin-switch {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
  min-width: 0;
  max-width: 100%;
}
.admin-switch-group {
  background: #111;
  border-radius: 18px;
  padding: 8px;
  display: grid;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.admin-switch-label {
  color: rgba(184,255,60,0.7);
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0 4px;
}
.admin-switch-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  min-width: 0;
}
.admin-switch button {
  border: 0;
  background: #1c1c1c;
  color: #d4d8dc;
  border-radius: 14px;
  padding: 10px 6px;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-switch button.is-on {
  background: var(--lime);
  color: #111;
}
.admin-pane { display: none; min-width: 0; max-width: 100%; overflow-x: hidden; }
.admin-pane.is-on { display: block; }
.admin-stack { display: grid; gap: 10px; margin-bottom: 16px; min-width: 0; }
.admin-dash {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 10px;
  min-width: 0;
  max-width: 100%;
}
.admin-dash button {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 16px;
  padding: 10px 6px 8px;
  font: inherit;
  text-align: left;
  min-height: 58px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.admin-dash b {
  display: block;
  font-size: 18px;
  letter-spacing: -0.04em;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-dash span {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 700;
  color: #7a8088;
  letter-spacing: 0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-dash button.is-on {
  background: #111;
  border-color: var(--ghost-ring);
  color: #fff;
}
.admin-dash button.is-on span { color: var(--lime); }
.admin-dash button.has-work b { color: #c2410c; }
.admin-dash button.is-on.has-work b { color: var(--lime); }
.admin-room-scroller {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 0 0 10px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.admin-room-scroller::-webkit-scrollbar { display: none; }
.admin-room-scroller button {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--heading);
  border-radius: 999px;
  padding: 8px 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.admin-room-scroller button.is-on {
  background: var(--lime);
  border-color: var(--lime);
}
.admin-room-scroller .chip-n {
  display: inline-flex;
  min-width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 999px;
  background: #111;
  color: var(--lime);
  font-size: 10px;
  align-items: center;
  justify-content: center;
}
.admin-room-scroller button.is-on .chip-n {
  background: #111;
  color: var(--lime);
}
.admin-subswitch {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 10px;
  min-width: 0;
  max-width: 100%;
}
.admin-subswitch.is-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.admin-subswitch button {
  border: 0;
  background: #1c1c1c;
  color: #d4d8dc;
  border-radius: 14px;
  padding: 9px 4px;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-subswitch button.is-on {
  background: var(--lime);
  color: #111;
}
.admin-search {
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 16px;
  padding: 12px 14px;
  font: inherit;
  font-size: 15px;
  margin: 0 0 12px;
}
.admin-room-group { display: grid; gap: 10px; }
.admin-room-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin: 2px 4px 0;
}
.admin-room-head strong { font-size: 13px; letter-spacing: -0.02em; }
.admin-room-head span { font-size: 11px; color: #7a8088; font-weight: 700; }
.desk-card.is-deleted-log { background: #faf7f4; }
.desk-card .pub-room-tag {
  display: inline-flex;
  margin: 0 0 6px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--surface-muted);
  font-size: 11px;
  font-weight: 800;
  color: var(--hint);
}
.admin-market-h {
  margin: 14px 0 8px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--hint);
}
.desk-card .admin-actions.is-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
.desk-card .admin-actions.is-row button {
  width: auto;
  flex: 1 1 calc(50% - 4px);
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  padding: 10px 8px;
}
.sheet-form, .desk-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 14px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.desk-card h3,
.desk-card p,
.desk-card .meta {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.desk-card h3 {
  margin: 0 0 6px;
  font-size: 16px;
  line-height: 1.25;
}
.admin-banner-thumb {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 110px;
  object-fit: cover;
  border-radius: 14px;
  margin-bottom: 8px;
  background: #111;
}
.admin-room-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  max-width: 100%;
}
.admin-room-card .mark {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
}
.admin-room-copy {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.admin-room-card h3,
.admin-room-card p { margin: 0; }
.admin-room-card h3 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-room-card p {
  color: var(--hint);
  font-size: 13px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.admin-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 0;
  min-width: 0;
  max-width: 100%;
}
.admin-mini-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--surface-muted);
  font-size: 11px;
  font-weight: 800;
  color: var(--hint);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-mini-chip.is-hot { background: #111; color: var(--lime); }
.admin-mini-chip.is-ban { background: #fee2e2; color: #991b1b; }
.admin-link-clip {
  display: block;
  max-width: 100%;
  font-size: 12px;
  color: var(--hint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-person-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}
.admin-person-name {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
}
.admin-person-name h3 {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-person-card .admin-mini-chip {
  flex: 0 0 auto;
}
.admin-person-meta {
  margin: 4px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}
#view-admin {
  overflow-x: hidden;
  max-width: 100%;
}
#view-admin .top,
#view-admin .wordmark {
  min-width: 0;
  max-width: 100%;
}
@media (max-width: 420px) {
  .admin-dash { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-subswitch,
  .admin-subswitch.is-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .desk-card .admin-actions.is-row button { flex: 1 1 100%; }
}
.sheet-form { display: grid; gap: 8px; margin-bottom: 12px; }
.sheet-form .admin-actions,
.sheet-form .admin-actions.is-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
.sheet-form .admin-actions button {
  flex: 1 1 calc(50% - 4px);
  min-width: 0;
  max-width: 100%;
}
.sheet-form textarea,
.sheet-form input, .sheet-form select {
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  font: inherit;
  font-size: 16px;
  background: var(--input-bg);
  color: var(--text);
  -webkit-appearance: none;
  appearance: none;
}
.sheet-form textarea { min-height: 96px; resize: vertical; }
.sheet-form select {
  background-image: linear-gradient(45deg, transparent 50%, #111 50%), linear-gradient(135deg, #111 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 28px;
}
.desk-card .admin-actions { display: grid; gap: 8px; margin-top: 10px; }
.desk-card .admin-actions button { width: 100%; }
.post-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.post-actions button { flex: 1; }

.profile-card strong { display: block; font-size: 20px; margin-bottom: 4px; }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.kv:last-child { border-bottom: 0; }
.kv span { color: var(--hint); }

.faq-card { display: grid; gap: 14px; overflow: visible; }
.faq-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-left: 2px;
}
.faq-head .eyebrow {
  letter-spacing: 0.16em;
  padding-left: 1px;
}
.faq-team-label {
  margin: 6px 0 0;
  font-weight: 800;
}
.faq-contact {
  flex: 0 0 auto;
  padding: 8px 12px;
  font-size: 12px;
}
.faq-team { display: grid; gap: 8px; }
.faq-person {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 14px;
  background: #111;
  color: #fff;
}
.faq-person strong { display: block; font-size: 14px; margin: 4px 0 0; color: #fff; }
.faq-person .meta { color: #c5c9ce; }
.faq-badge {
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 999px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  background: #1c1c1c;
  color: #fff;
}
.faq-badge.owner {
  background: var(--lime);
  color: #111;
}
.faq-badge.main {
  background: rgba(184,255,60,0.18);
  color: var(--lime);
  box-shadow: 0 0 0 1px rgba(184,255,60,0.45);
}
.faq-link {
  color: var(--heading);
  background: var(--surface);
  text-decoration: none;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.faq-list { display: grid; gap: 8px; }
.faq-item {
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  background: var(--surface-muted);
  border-radius: 16px;
  padding: 12px 14px;
  font: inherit;
  color: inherit;
  display: block;
}
.faq-item > summary {
  list-style: none;
  cursor: pointer;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.faq-q b {
  font-size: 14px;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.faq-q i {
  font-style: normal;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #111;
  color: var(--lime);
  font-weight: 800;
  flex: 0 0 auto;
}
.faq-q i::before { content: "+"; }
.faq-a {
  display: none;
  margin: 10px 0 0;
  color: var(--hint);
  font-size: 13px;
  line-height: 1.45;
}
.faq-item.is-open,
.faq-item[open] {
  background: var(--surface);
  border-color: var(--ghost-ring);
  box-shadow: 0 0 0 1px #111;
}
.faq-item.is-open .faq-a,
.faq-item[open] .faq-a { display: block; }
.faq-item.is-open .faq-q i,
.faq-item[open] .faq-q i {
  background: var(--lime);
  color: #111;
}
.faq-item.is-open .faq-q i::before,
.faq-item[open] .faq-q i::before { content: "−"; }
#profile .profile-pane[data-profile-pane="faq"] .faq-card {
  padding: 4px 0 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}

.role-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 7px 11px;
  border-radius: 999px;
  background: #111;
  color: var(--lime);
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  box-shadow: 0 0 0 1px #111, 0 0 16px rgba(184,255,60,0.22);
}
.role-pill.is-main {
  background: var(--lime);
  color: #111;
  box-shadow: 0 0 18px rgba(184,255,60,0.4);
}
.role-pill.is-admin { background: #1c1c1c; color: #fff; }
.role-pill.is-banned {
  background: #ff5a5a;
  color: #fff;
  margin-left: 6px;
}
/* Role plaque follows the same style pack as prefix plaques */
.role-pill.prefix-lime { background: var(--lime); color: #111; box-shadow: 0 0 18px rgba(184,255,60,0.4); }
.role-pill.prefix-gold {
  background: linear-gradient(135deg, #f6d365, #fda085);
  color: #111;
  box-shadow: 0 0 16px rgba(253,160,133,0.45);
}
.role-pill.prefix-neon {
  background: #111;
  color: #39ff14;
  box-shadow: 0 0 0 1px #39ff14, 0 0 18px rgba(57,255,20,0.45);
}
.role-pill.prefix-dark { background: #111; color: #fff; box-shadow: 0 0 0 1px #333; }
.role-pill.prefix-ruby {
  background: linear-gradient(135deg, #ff416c, #ff4b2b);
  color: #fff;
  box-shadow: 0 0 16px rgba(255,65,108,0.4);
}
.role-pill.prefix-ice {
  background: linear-gradient(135deg, #e0f2fe, #7dd3fc);
  color: #0c4a6e;
  box-shadow: 0 0 14px rgba(125,211,252,0.45);
}
.role-pill.prefix-violet {
  background: linear-gradient(135deg, #a78bfa, #6366f1);
  color: #fff;
  box-shadow: 0 0 16px rgba(99,102,241,0.4);
}
.role-pill.prefix-chrome {
  background: linear-gradient(135deg, #f8fafc, #94a3b8 45%, #e2e8f0);
  color: #111;
  box-shadow: 0 2px 10px rgba(15,23,42,0.25);
}
.role-pill.prefix-pulse {
  background: #111;
  color: var(--lime);
  box-shadow: 0 0 0 1px var(--lime), 0 0 18px rgba(184,255,60,0.55);
}
.role-pill.prefix-mint {
  background: linear-gradient(135deg, #a7f3d0, #34d399);
  color: #064e3b;
  box-shadow: 0 0 14px rgba(52,211,153,0.4);
}

.icon-svg {
  width: 22px;
  height: 22px;
  display: block;
  stroke-linecap: round;
  stroke-linejoin: round;
}

button, input { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
.sec-tile { position: relative; }
.sec-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.18;
  pointer-events: none;
}
.sec-tile.is-feature .sec-cover { opacity: 0.28; }
.sec-tile-top, .sec-tile-body, .sec-tile-foot { position: relative; z-index: 1; }

/* === OX platform polish === */
.feed-toolbar {
  position: sticky;
  top: 0;
  z-index: 8;
  margin: 0 0 12px;
  padding: 8px 0 10px;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--bg) 96%, transparent) 55%,
      color-mix(in srgb, var(--bg) 72%, transparent) 100%
    );
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.filter-bar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}
.filter-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin: 0;
  padding: 2px 2px 4px;
  scrollbar-width: none;
  mask-image: linear-gradient(90deg, #000 86%, transparent);
}
.filter-row::-webkit-scrollbar { display: none; }
.filter-chip {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: var(--surface-muted);
  color: var(--text);
  border-radius: 999px;
  padding: 9px 13px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.filter-chip:active { transform: scale(0.97); }
.filter-chip.is-on {
  background: var(--lime);
  color: #111;
  border-color: #111;
  box-shadow: 0 0 16px rgba(184,255,60,0.35);
}
.filter-chip .mini-mark,
.filter-chip .mini-mark .icon-svg {
  width: 14px;
  height: 14px;
  color: inherit;
}
.catalog-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  background: var(--surface-muted);
  color: var(--text);
  border-radius: 16px;
  padding: 9px 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -0.02em;
  box-shadow: none;
  white-space: nowrap;
}
.catalog-toggle.is-on {
  background: var(--lime);
  color: #111;
  border-color: #111;
  box-shadow: 0 0 18px rgba(184, 255, 60, 0.28);
}
.catalog-toggle-ico {
  width: 14px;
  height: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
.catalog-toggle-ico::before,
.catalog-toggle-ico::after {
  content: "";
  display: block;
  border-radius: 2px;
  background: currentColor;
  box-shadow: 0 8px 0 currentColor;
  height: 5px;
}
.rooms-catalog {
  margin-top: 10px;
  padding: 12px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 12% 0%, rgba(184, 255, 60, 0.18), transparent 42%),
    var(--surface);
  border: 1px solid var(--ghost-ring);
  box-shadow: 0 14px 34px rgba(17, 17, 17, 0.08);
  animation: rooms-catalog-in 0.22s ease;
}
.rooms-catalog[hidden] { display: none !important; }
@keyframes rooms-catalog-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.rooms-catalog-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.rooms-catalog-head strong {
  display: block;
  font-size: 18px;
  letter-spacing: -0.04em;
  line-height: 1.1;
}
.rooms-catalog-note {
  margin: 0 0 12px;
  font-size: 12px;
}
.rooms-catalog .search-wrap { margin-bottom: 12px; }
.rooms-catalog .cards { max-height: min(52vh, 420px); overflow: auto; padding-right: 2px; }
.rooms-catalog .sec-grid { gap: 8px; }
.rooms-catalog .sec-tile {
  min-height: 148px;
  border-radius: 18px;
  padding: 12px;
}
.rooms-catalog .catalog-close {
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 12px;
}
.feed-active-filter {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 8px;
  padding: 8px 10px;
  border-radius: 14px;
  background: #111;
  color: #fff;
  font-size: 12px;
}
.feed-active-filter.is-shown { display: flex; }
.feed-active-filter b { color: var(--lime); font-weight: 800; }
.feed-active-filter button {
  border: 0;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-radius: 999px;
  padding: 6px 10px;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
}
.live-feed {
  display: grid;
  gap: 10px;
  padding-bottom: 110px;
}
.live-card {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  width: 100%;
  margin: 0;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
  text-align: left;
  color: var(--heading);
  cursor: pointer;
  box-shadow: var(--card-shadow);
  font: inherit;
}
.live-card.is-text {
  grid-template-columns: 1fr;
}
.live-card.is-text .live-body {
  padding: 14px 14px 12px;
}
.live-card.pub-card {
  grid-template-columns: 1fr;
}
.live-card.pub-card .live-cover {
  width: 100%;
  height: 168px;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  background: #111;
  display: grid;
  place-items: center;
}
.live-card.pub-card .live-cover img {
  width: 100%;
  height: 168px;
  object-fit: cover;
  object-position: center;
  display: block;
}
.live-card.pub-card .live-cover.is-icon {
  height: 92px;
  background:
    radial-gradient(circle at 20% 20%, rgba(184,255,60,0.35), transparent 42%),
    #111;
}
.live-card.pub-card .live-cover.is-icon .mark {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--lime);
  color: #111;
}
.live-card.pub-card .live-body {
  padding: 12px 14px 14px;
}
.live-card.pub-card .live-body h3 {
  margin: 8px 0 6px;
  font-size: 17px;
  letter-spacing: -0.04em;
  line-height: 1.22;
  color: var(--heading);
}
.live-card.pub-card .live-body p {
  color: var(--text);
  font-size: 13px;
  line-height: 1.4;
  -webkit-line-clamp: 3;
}
.live-card.pub-card .live-top {
  align-items: center;
}
.live-card.pub-card .live-room {
  color: var(--hint);
  background: var(--surface-muted);
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 9px;
}
.live-thumb {
  width: 72px;
  height: 72px;
  min-height: 72px;
  align-self: center;
  justify-self: center;
  margin: 12px 0;
  border-radius: 18px;
  overflow: hidden;
  background: #111;
  display: grid;
  place-items: center;
}
.live-thumb img {
  width: 72px;
  height: 72px;
  min-height: 72px;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 0;
}
.market-card .live-thumb {
  background: #0f1114;
}
.market-detail-media {
  width: 100%;
  max-height: 260px;
  border-radius: 18px;
  overflow: hidden;
  background: #111;
}
.market-detail-media .market-detail-img,
.market-detail-img {
  display: block;
  width: 100%;
  max-height: 260px;
  height: auto;
  object-fit: contain;
  object-position: center;
  background: #111;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.live-thumb.is-icon .mark {
  width: 40px;
  height: 40px;
  border-radius: 14px;
}
.live-body { padding: 12px 12px 12px 10px; min-width: 0; }
.live-body h3 {
  margin: 6px 0 4px;
  font-size: 15px;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--heading);
}
.live-body p {
  margin: 0;
  color: var(--text);
  font-size: 12px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.live-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}
.live-top .pin-badge {
  margin-left: auto;
}
.live-room {
  color: var(--hint);
  font-size: 10px;
  font-family: "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.live-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
  font-size: 11px;
  color: var(--hint);
  font-family: "IBM Plex Mono", monospace;
}
.live-stats b { margin-left: auto; font-weight: 600; }
.live-stats .live-raised,
.live-stats .pub-raised-once {
  margin-left: auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 700;
  color: var(--hint);
  text-align: right;
}
.pub-raised-once:not(.is-plain) {
  color: var(--hint);
}
.tag.boost {
  background: var(--lime);
  color: #111;
  border-radius: 999px;
  padding: 2px 7px;
  font-weight: 800;
  font-size: 10px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tag.boost.is-past {
  background: #f3f5f7;
  color: var(--hint);
}
.pub-raised-note {
  display: none;
}
.rooms-drawer { display: none !important; }
#report-modal.sheet,
#report-modal.sheet.is-open {
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  background: rgba(10, 10, 10, 0.58);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.sheet-card.report-sheet {
  width: min(100%, 520px);
  max-height: min(92vh, 720px);
  overflow: auto;
  margin: 0;
  border: 0;
  border-radius: 28px 28px 0 0;
  padding: 10px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  background:
    radial-gradient(ellipse 80% 50% at 0% 0%, rgba(184, 255, 60, 0.22), transparent 55%),
    linear-gradient(180deg, #fbfcfd 0%, #f3f5f7 100%);
  box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.28);
  animation: report-sheet-in 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes report-sheet-in {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}
.report-grab {
  width: 42px;
  height: 4px;
  margin: 2px auto 12px;
  border-radius: 99px;
  background: rgba(17, 17, 17, 0.14);
}
.report-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.report-head-copy .eyebrow {
  margin: 0 0 6px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7a8088;
}
.report-head-copy strong {
  display: block;
  font-size: 28px;
  letter-spacing: -0.06em;
  line-height: 1;
  color: var(--heading);
}
.report-sub {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--hint);
  max-width: 26ch;
}
.report-close {
  width: 40px;
  height: 40px;
  padding: 0 !important;
  border-radius: 14px !important;
  display: grid;
  place-items: center;
  background: rgba(17, 17, 17, 0.05) !important;
  flex-shrink: 0;
}
.report-close .icon-svg { width: 16px; height: 16px; }
.report-target {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding: 12px;
  border-radius: 18px;
  background: #111;
  color: #fff;
  position: relative;
  overflow: hidden;
  animation: report-target-in 0.35s ease 0.05s both;
}
@keyframes report-target-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.report-target::after {
  content: "";
  position: absolute;
  right: -18px;
  top: -24px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: rgba(184, 255, 60, 0.18);
  pointer-events: none;
}
.report-target-mark {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: var(--lime);
  color: #111;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  z-index: 1;
}
.report-target-mark .icon-svg {
  width: 18px;
  height: 18px;
}
.report-target-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
  z-index: 1;
}
.report-target-kind {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.report-target b {
  font-size: 15px;
  letter-spacing: -0.03em;
  color: #fff;
  word-break: break-word;
  line-height: 1.25;
}
.report-target.is-pub .report-target-mark {
  background: var(--surface);
}
.report-form { display: grid; gap: 14px; }
.report-reasons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.report-reason {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  align-content: start;
  min-height: 108px;
  padding: 12px;
  border: 1px solid var(--soft-line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  animation: report-reason-in 0.34s ease both;
}
.report-reason:nth-child(1) { animation-delay: 0.04s; }
.report-reason:nth-child(2) { animation-delay: 0.08s; }
.report-reason:nth-child(3) { animation-delay: 0.12s; }
.report-reason:nth-child(4) { animation-delay: 0.16s; }
.report-reason:nth-child(5) {
  animation-delay: 0.2s;
  grid-column: 1 / -1;
  min-height: 0;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 10px;
}
@keyframes report-reason-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.report-reason:active { transform: scale(0.985); }
.report-reason input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.report-reason-ico {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: #151515;
  color: var(--lime);
  display: grid;
  place-items: center;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 800;
}
.report-reason-ico[data-reason="spam"]::before { content: "SP"; }
.report-reason-ico[data-reason="scam"]::before { content: "$$"; }
.report-reason-ico[data-reason="abuse"]::before { content: "!"; }
.report-reason-ico[data-reason="illegal"]::before { content: "X"; }
.report-reason-ico[data-reason="other"]::before { content: "…"; }
.report-reason-copy { min-width: 0; display: grid; gap: 3px; }
.report-reason-copy em {
  font-style: normal;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--heading);
}
.report-reason-copy small {
  font-size: 11px;
  color: var(--hint);
  line-height: 1.3;
}
.report-reason-check {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid rgba(17, 17, 17, 0.18);
  background: transparent;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.report-reason:nth-child(5) .report-reason-check {
  position: static;
}
.report-reason.is-on {
  border-color: var(--ghost-ring);
  background: #111;
  box-shadow: 0 12px 28px rgba(17, 17, 17, 0.16);
}
.report-reason.is-on .report-reason-ico {
  background: var(--lime);
  color: #111;
}
.report-reason.is-on .report-reason-copy em { color: #fff; }
.report-reason.is-on .report-reason-copy small { color: rgba(255, 255, 255, 0.58); }
.report-reason.is-on .report-reason-check {
  border-color: var(--lime);
  background: var(--lime);
  transform: scale(1.05);
}
.report-reason.is-on .report-reason-check::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 3px;
  width: 5px;
  height: 8px;
  border-right: 2px solid #111;
  border-bottom: 2px solid #111;
  transform: rotate(40deg);
}
.report-details-label {
  display: grid;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--heading);
}
.report-details-label i {
  font-style: normal;
  font-weight: 600;
  color: var(--hint);
}
.report-form textarea,
.report-details-label textarea {
  width: 100%;
  border: 1px solid rgba(17, 17, 17, 0.12);
  border-radius: 18px;
  padding: 13px 14px;
  font: inherit;
  background: color-mix(in srgb, var(--surface) 95%, transparent);
  resize: vertical;
  min-height: 84px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.report-form textarea:focus,
.report-details-label textarea:focus {
  outline: none;
  border-color: var(--ghost-ring);
  box-shadow: 0 0 0 3px rgba(184, 255, 60, 0.35);
}
.report-foot {
  display: grid;
  gap: 10px;
  padding-top: 2px;
}
.report-note {
  margin: 0;
  font-size: 11px;
  color: var(--hint);
  line-height: 1.4;
}
.report-submit {
  width: 100%;
  border-radius: 18px !important;
  padding: 15px !important;
  font-size: 15px !important;
  letter-spacing: -0.02em;
  box-shadow: 0 10px 24px rgba(184, 255, 60, 0.28);
}
.report-success {
  display: grid;
  gap: 10px;
  justify-items: center;
  text-align: center;
  padding: 28px 8px 10px;
  animation: report-sheet-in 0.28s ease;
}
.report-success-orb {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.55), transparent 45%),
    var(--lime);
  box-shadow: 0 0 0 1px #111, 0 14px 30px rgba(184, 255, 60, 0.35);
  animation: report-orb-pop 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes report-orb-pop {
  from { transform: scale(0.7); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.report-success-mark {
  width: 22px;
  height: 12px;
  border-left: 3px solid #111;
  border-bottom: 3px solid #111;
  transform: rotate(-45deg) translate(1px, -2px);
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  position: relative;
}
.report-success-mark::before { content: none; }
.report-success strong {
  font-size: 22px;
  letter-spacing: -0.05em;
}
.report-success p {
  margin: 0;
  color: var(--hint);
  font-size: 13px;
  line-height: 1.4;
  max-width: 280px;
}
.report-success .report-submit {
  margin-top: 8px;
}
@media (min-width: 520px) {
  #report-modal.sheet,
  #report-modal.sheet.is-open {
    align-items: center;
    padding: 18px;
  }
  .sheet-card.report-sheet {
    border-radius: 28px;
    max-height: 85vh;
  }
  .report-grab { display: none; }
}
.report-card-status {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #fff3cd;
  color: var(--heading);
}
.report-card-status.is-resolved { background: #dcfce7; }
.report-card-status.is-rejected { background: #e5e7eb; color: var(--hint); }
.report-card-status.is-banned { background: #fee2e2; color: #991b1b; }
.desk-card.is-report-banned { border-color: rgba(153, 27, 27, 0.25); }
.ox-pill {
  background: #111;
  color: var(--lime);
  border-radius: 999px;
  padding: 8px 12px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 700;
}

/* —— modern OX Hub —— */
.hub-tabs {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin: 0 0 14px;
  padding: 5px;
  background: #111;
  border-radius: 20px;
}
.hub-tabs button {
  border: 0 !important;
  background: transparent !important;
  color: #aeb4bc !important;
  border-radius: 15px !important;
  padding: 8px 3px 7px !important;
  font: inherit !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  box-shadow: none !important;
  display: grid !important;
  gap: 5px !important;
  justify-items: center !important;
  align-content: center !important;
  min-height: 60px !important;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease !important;
}
.hub-tabs button .hub-tab-ico {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.07);
  color: #f3f4f6;
  opacity: 1;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.hub-tabs button .hub-tab-ico .icon-svg {
  width: 17px;
  height: 17px;
  stroke-width: 2.15;
}
.hub-tabs button:not(.is-on):active .hub-tab-ico {
  transform: scale(0.94);
}
.hub-tabs button.is-on {
  background: var(--lime) !important;
  color: #111 !important;
}
.hub-tabs button.is-on .hub-tab-ico {
  background: rgba(17, 17, 17, 0.14);
  color: #111;
  transform: translateY(-1px);
}

#view-hub .hub-tabs {
  position: sticky;
  top: 0;
  z-index: 40;
  box-shadow: 0 8px 18px rgba(247, 248, 250, 0.9);
}
.hub-studio {
  display: grid;
  gap: 8px;
  margin: 0 0 14px;
}
#view-hub.is-hub-previewing .hub-studio {
  position: sticky;
  top: calc(var(--hub-tabs-h, 72px) + 6px);
  z-index: 35;
  margin: 0 0 14px;
  padding: 8px 10px 10px;
  border-radius: 22px;
  background: rgba(248, 249, 251, 0.97);
  box-shadow: 0 14px 34px rgba(17, 17, 17, 0.16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
#view-hub.is-hub-previewing #hub-body {
  padding-top: 0;
}
#view-hub.is-hub-previewing .hub-studio-card.is-flash {
  box-shadow: 0 14px 36px rgba(17,17,17,0.18), 0 0 0 2px rgba(184,255,60,0.8);
}
.hub-studio-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  padding: 0 2px;
}
.hub-preview-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--hint);
}
.hub-preview-kind {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 8px;
  background: #111;
  color: var(--lime);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.hub-preview-reset {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: var(--hint);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 6px;
  cursor: pointer;
}
.hub-preview-reset[hidden] + .hub-preview-off,
.hub-preview-reset[hidden] ~ .hub-preview-off {
  margin-left: auto;
}
.hub-preview-reset:not([hidden]) + .hub-preview-off {
  margin-left: 0;
}
.hub-preview-reset:hover,
.hub-preview-reset:focus-visible {
  color: var(--heading);
}
.hub-preview-off,
.hub-preview-on {
  border: 0;
  border-radius: 8px;
  min-height: 28px;
  padding: 0 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.hub-preview-off {
  background: #111;
  color: #fff;
}
.hub-preview-off:hover,
.hub-preview-off:focus-visible {
  background: #222;
}
.hub-preview-on {
  margin-left: auto;
  background: var(--lime);
  color: #111;
}
.hub-preview-on:hover,
.hub-preview-on:focus-visible {
  filter: brightness(1.05);
}
#view-hub:not(.is-hub-previewing) .hub-studio {
  position: static;
  box-shadow: none;
  background: transparent;
  padding: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#view-hub:not(.is-hub-previewing) .hub-studio-card {
  box-shadow: 0 10px 24px rgba(17,17,17,0.12);
}
.hub-studio-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: 14px 14px 12px;
  background: #111;
  color: #fff;
  border: 0;
  box-shadow: 0 12px 30px rgba(17,17,17,0.16);
  transition: box-shadow 0.25s ease, filter 0.25s ease;
}
.hub-studio-card.is-flash {
  box-shadow: 0 14px 34px rgba(17,17,17,0.22), 0 0 0 2px rgba(184,255,60,0.75);
  filter: saturate(1.08);
}
.hub-studio-card.bg-default {
  background:
    radial-gradient(circle at 12% 0%, rgba(184,255,60,0.22), transparent 40%),
    linear-gradient(145deg, #171717, #0d0d0d);
}
.hub-studio-card.is-bg-dark {
  color: #fff;
}
.hub-studio-card.is-bg-light {
  color: var(--heading);
}
.hub-studio-card.is-bg-dark .hub-studio-meta .meta,
.hub-studio-card.is-bg-dark .hub-studio-balance span {
  color: rgba(255,255,255,0.62);
}
.hub-studio-card.is-bg-light .hub-studio-meta .meta,
.hub-studio-card.is-bg-light .hub-studio-balance span {
  color: rgba(17,17,17,0.58);
}
.hub-studio-card.is-bg-dark .hub-studio-balance {
  border-top-color: rgba(255,255,255,0.12);
}
.hub-studio-card.is-bg-light .hub-studio-balance {
  border-top-color: rgba(17,17,17,0.1);
}
.hub-studio-card.is-bg-light .hub-studio-balance strong {
  color: var(--heading);
}
.hub-studio-card.is-bg-dark .nick-plain .msg-nick {
  color: #fff;
}
.hub-studio-card.is-bg-light .nick-plain .msg-nick {
  color: var(--heading);
}
.hub-studio-top {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.hub-studio-meta { min-width: 0; flex: 1; }
.hub-studio-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 18px;
  letter-spacing: -0.04em;
  line-height: 1.15;
}
.hub-studio-meta .meta {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.3;
}
.hub-studio-balance {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.hub-studio-balance strong {
  font-size: 20px;
  letter-spacing: -0.05em;
  color: var(--lime);
}
.hub-studio-balance span { font-size: 12px; color: rgba(255,255,255,0.55); }
.hub-preview-buy {
  margin-top: 10px;
}
.hub-preview-buy .primary {
  width: 100%;
  min-height: 42px;
  border-radius: 13px;
  font-weight: 800;
}
.hub-preview-owned {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 13px;
  background: rgba(184,255,60,0.18);
  color: inherit;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}
.hub-studio-card.is-bg-dark .hub-preview-owned {
  background: rgba(184,255,60,0.16);
  color: var(--lime);
}
.hub-studio-card.is-bg-light .hub-preview-owned {
  background: var(--soft-fill);
  color: var(--heading);
}
.hub-topup { margin: 0 0 10px; }
.hub-topup-off { margin: 0 0 10px; }
.status-list-modern .status-row {
  border: 0;
  border-radius: 14px;
  margin: 0 6px 6px;
  background: var(--surface-muted);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: calc(100% - 12px);
  padding: 10px 12px;
  text-align: left;
  font: inherit;
  color: var(--text);
  cursor: pointer;
}
.status-list-modern .status-row.is-owned {
  background: rgba(184, 255, 60, 0.14);
  opacity: 1;
  cursor: pointer;
}
.status-list-modern .status-row.is-preview {
  background: #111;
  color: #fff;
  box-shadow: 0 0 0 2px var(--lime);
}
.status-list-modern .status-row.is-preview .status-priv {
  color: rgba(184, 255, 60, 0.75);
}
.status-list-modern .status-row.is-preview .status-name {
  color: #fff;
}
.status-list-modern .status-preview {
  background: #111;
  border-radius: 12px;
  min-height: 42px;
  padding: 4px 6px;
}
.status-buy {
  border: 0;
  border-radius: 12px;
  min-height: 36px;
  padding: 0 12px;
  background: #111;
  color: var(--lime);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}
.status-row.is-preview .status-buy {
  background: var(--lime);
  color: #111;
}
.status-price {
  font-size: 12px;
  font-weight: 800;
  color: var(--hint);
}

/* —— profile style studio —— */
.style-studio-note { margin: 0 0 12px; }
.style-section {
  display: grid;
  gap: 8px;
  margin: 0 0 16px;
  padding: 12px;
  border-radius: 18px;
  background: var(--surface-muted);
  border: 0;
}
.style-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.style-section-head strong {
  font-size: 14px;
  letter-spacing: -0.03em;
}
.style-section-head span {
  font-size: 11px;
  color: var(--hint);
  font-weight: 700;
}
.style-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.style-swatch {
  display: grid;
  gap: 6px;
  justify-items: center;
  padding: 10px 6px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--heading);
  cursor: pointer;
  font: inherit;
  text-align: center;
  min-height: 92px;
  box-shadow: none;
}
.style-swatch.is-on {
  background: #111;
  color: var(--lime);
}
.style-swatch.is-on .style-swatch-meta { color: rgba(184,255,60,0.7); }
.style-swatch-name {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.style-swatch-meta {
  font-size: 10px;
  font-weight: 700;
  color: var(--hint);
  font-style: normal;
}
.swatch-preview {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 28px;
}
.swatch-preview .msg-nick { font-size: 13px; }
.swatch-frame .ava-ring { transform: scale(1.05); }
.swatch-bg {
  width: 100%;
  height: 28px;
  border-radius: 8px;
  background: #ddd;
}
@media (min-width: 700px) {
  .style-picker-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .style-picker-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .hub-tabs button { font-size: 12px !important; min-height: 58px !important; }
}

.hub-body { padding-bottom: 120px; }

/* —— status packs (privileges) —— */
.status-balance { display: grid; gap: 12px; }
.status-balance-top strong { margin-bottom: 2px; }
.status-topup { margin: 0; gap: 8px; }
.status-topup-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}
.status-topup-row input {
  margin: 0;
  min-width: 0;
}
.status-topup-row .primary {
  padding: 12px 16px;
  border-radius: 14px;
  white-space: nowrap;
}

.status-pack {
  margin: 0 0 14px;
  padding: 0 0 6px;
  border-radius: 22px;
  background:
    linear-gradient(180deg, var(--surface), var(--surface)),
    radial-gradient(circle at 100% 0%, rgba(184,255,60,0.12), transparent 42%);
  border: 1px solid var(--line);
  box-shadow: var(--card-shadow);
  color: var(--text);
  /* overflow must stay visible — clip breaks sticky pack heads in .view */
}
.pub-service-pack {
  margin: 4px 0 0;
}
.pub-boost-bar {
  display: grid;
  gap: 8px;
  padding: 10px;
  border-radius: 18px;
  background: var(--soft-fill);
  border: 1px solid rgba(17,17,17,0.08);
  min-width: 0;
}
.pub-boost-bar.is-live {
  border-color: color-mix(in srgb, var(--lime) 55%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--lime) 25%, transparent);
}
.pub-boost-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}
.pub-boost-head strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  letter-spacing: -0.03em;
  line-height: 1;
}
.pub-boost-head strong .icon-svg {
  width: 14px;
  height: 14px;
}
.pub-boost-head span {
  font-size: 11px;
  font-family: "IBM Plex Mono", monospace;
  color: #7a8088;
  min-width: 0;
  max-width: 100%;
  flex: 1 1 160px;
  text-align: right;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.pub-boost-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
.pub-boost-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 46px;
  padding: 10px 12px;
  border: 0;
  border-radius: 14px;
  background: #111;
  color: #fff;
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
}
.pub-boost-chip:active {
  transform: scale(0.98);
}
.pub-boost-chip b {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.15;
  text-align: left;
}
.pub-boost-chip span {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--lime);
  line-height: 1;
  white-space: nowrap;
}
.pub-boost-chip.is-on {
  background: color-mix(in srgb, var(--lime) 22%, #111);
  cursor: pointer;
}
.pub-boost-chip.is-on span {
  color: var(--lime);
  max-width: 58%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pub-boost-chip.is-paid {
  background: color-mix(in srgb, var(--lime) 18%, #111);
  cursor: default;
  transform: none;
}
.pub-boost-chip.is-paid span {
  color: var(--lime);
}
.pub-boost-renew {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid rgba(17,17,17,0.1);
  cursor: pointer;
}
.pub-boost-renew input {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  flex: 0 0 22px;
  border: 2px solid var(--ghost-ring);
  border-radius: 6px;
  background: var(--surface);
  cursor: pointer;
  position: relative;
}
.pub-boost-renew input:checked {
  background: var(--lime);
  border-color: var(--ghost-ring);
}
.pub-boost-renew input:checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #111;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.pub-boost-renew input:disabled {
  opacity: 0.55;
  cursor: wait;
}
.pub-boost-renew span {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.pub-boost-renew b {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.15;
}
.pub-boost-renew em {
  font-style: normal;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--hint);
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.pub-boost-chip.is-off,
.pub-boost-chip:disabled {
  background: #2a2c2e;
  color: #d1d5db;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.pub-boost-chip.is-off span,
.pub-boost-chip:disabled span {
  color: #f87171;
}
.pub-boost-prefix {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 36px;
  padding: 8px 12px;
  border: 0;
  border-radius: 12px;
  background: rgba(184,255,60,0.16);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.pub-boost-prefix span { font-size: 13px; font-weight: 700; }
.pub-boost-prefix em {
  font-style: normal;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--hint);
}
.pub-boost-prefix.is-owned {
  cursor: default;
  background: var(--soft-fill);
}
.sheet-card.pub-detail.bg-custom .pub-boost-bar,
.sheet-card.pub-detail.bg-carbon .pub-boost-bar,
.sheet-card.pub-detail.bg-velvet .pub-boost-bar,
.sheet-card.pub-detail.bg-ocean .pub-boost-bar,
.sheet-card.pub-detail.bg-plasma .pub-boost-bar,
.sheet-card.pub-detail.bg-nebula .pub-boost-bar,
.sheet-card.pub-detail.bg-circuit .pub-boost-bar {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.1);
}
.sheet-card.pub-detail.bg-custom .pub-boost-head span,
.sheet-card.pub-detail.bg-carbon .pub-boost-head span,
.sheet-card.pub-detail.bg-velvet .pub-boost-head span,
.sheet-card.pub-detail.bg-ocean .pub-boost-head span,
.sheet-card.pub-detail.bg-plasma .pub-boost-head span,
.sheet-card.pub-detail.bg-nebula .pub-boost-head span,
.sheet-card.pub-detail.bg-circuit .pub-boost-head span {
  color: rgba(248,250,252,0.72);
}
.sheet-card.pub-detail.bg-custom .pub-boost-prefix,
.sheet-card.pub-detail.bg-carbon .pub-boost-prefix,
.sheet-card.pub-detail.bg-velvet .pub-boost-prefix,
.sheet-card.pub-detail.bg-ocean .pub-boost-prefix,
.sheet-card.pub-detail.bg-plasma .pub-boost-prefix,
.sheet-card.pub-detail.bg-nebula .pub-boost-prefix,
.sheet-card.pub-detail.bg-circuit .pub-boost-prefix {
  background: rgba(184,255,60,0.14);
  color: #f8fafc;
}
.sheet-card.pub-detail.bg-custom .pub-boost-prefix em,
.sheet-card.pub-detail.bg-carbon .pub-boost-prefix em,
.sheet-card.pub-detail.bg-velvet .pub-boost-prefix em,
.sheet-card.pub-detail.bg-ocean .pub-boost-prefix em,
.sheet-card.pub-detail.bg-plasma .pub-boost-prefix em,
.sheet-card.pub-detail.bg-nebula .pub-boost-prefix em,
.sheet-card.pub-detail.bg-circuit .pub-boost-prefix em {
  color: var(--lime);
}
.sheet-card.pub-detail.bg-custom .pub-boost-prefix.is-owned,
.sheet-card.pub-detail.bg-carbon .pub-boost-prefix.is-owned,
.sheet-card.pub-detail.bg-velvet .pub-boost-prefix.is-owned,
.sheet-card.pub-detail.bg-ocean .pub-boost-prefix.is-owned,
.sheet-card.pub-detail.bg-plasma .pub-boost-prefix.is-owned,
.sheet-card.pub-detail.bg-nebula .pub-boost-prefix.is-owned,
.sheet-card.pub-detail.bg-circuit .pub-boost-prefix.is-owned {
  background: rgba(255,255,255,0.06);
}
.sheet-card.pub-detail.bg-custom .pub-boost-renew,
.sheet-card.pub-detail.bg-carbon .pub-boost-renew,
.sheet-card.pub-detail.bg-velvet .pub-boost-renew,
.sheet-card.pub-detail.bg-ocean .pub-boost-renew,
.sheet-card.pub-detail.bg-plasma .pub-boost-renew,
.sheet-card.pub-detail.bg-nebula .pub-boost-renew,
.sheet-card.pub-detail.bg-circuit .pub-boost-renew {
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  color: var(--heading);
  border-color: rgba(255,255,255,0.2);
}
.sheet-card.pub-detail.bg-custom .pub-raised-once,
.sheet-card.pub-detail.bg-carbon .pub-raised-once,
.sheet-card.pub-detail.bg-velvet .pub-raised-once,
.sheet-card.pub-detail.bg-ocean .pub-raised-once,
.sheet-card.pub-detail.bg-plasma .pub-raised-once,
.sheet-card.pub-detail.bg-nebula .pub-raised-once,
.sheet-card.pub-detail.bg-circuit .pub-raised-once {
  color: rgba(248,250,252,0.82);
}
.sheet-card.pub-detail.bg-custom .pub-actions,
.sheet-card.pub-detail.bg-carbon .pub-actions,
.sheet-card.pub-detail.bg-velvet .pub-actions,
.sheet-card.pub-detail.bg-ocean .pub-actions,
.sheet-card.pub-detail.bg-plasma .pub-actions,
.sheet-card.pub-detail.bg-nebula .pub-actions,
.sheet-card.pub-detail.bg-circuit .pub-actions {
  background: rgba(8, 8, 8, 0.78);
  padding: 8px;
  border-radius: 20px;
}
.sheet-card.pub-detail.bg-custom .pub-actions .primary,
.sheet-card.pub-detail.bg-carbon .pub-actions .primary,
.sheet-card.pub-detail.bg-velvet .pub-actions .primary,
.sheet-card.pub-detail.bg-ocean .pub-actions .primary,
.sheet-card.pub-detail.bg-plasma .pub-actions .primary,
.sheet-card.pub-detail.bg-nebula .pub-actions .primary,
.sheet-card.pub-detail.bg-circuit .pub-actions .primary {
  background: var(--lime);
  color: #111;
}
.sheet-card.pub-detail.bg-custom .pub-actions .primary.is-liked,
.sheet-card.pub-detail.bg-carbon .pub-actions .primary.is-liked,
.sheet-card.pub-detail.bg-velvet .pub-actions .primary.is-liked,
.sheet-card.pub-detail.bg-ocean .pub-actions .primary.is-liked,
.sheet-card.pub-detail.bg-plasma .pub-actions .primary.is-liked,
.sheet-card.pub-detail.bg-nebula .pub-actions .primary.is-liked,
.sheet-card.pub-detail.bg-circuit .pub-actions .primary.is-liked {
  background: #111;
  color: var(--lime);
  box-shadow: 0 0 0 1px var(--lime);
}
.sheet-card.pub-detail.bg-custom .pub-actions .danger,
.sheet-card.pub-detail.bg-carbon .pub-actions .danger,
.sheet-card.pub-detail.bg-velvet .pub-actions .danger,
.sheet-card.pub-detail.bg-ocean .pub-actions .danger,
.sheet-card.pub-detail.bg-plasma .pub-actions .danger,
.sheet-card.pub-detail.bg-nebula .pub-actions .danger,
.sheet-card.pub-detail.bg-circuit .pub-actions .danger {
  background: #1a1010;
  color: #ff8a80;
  box-shadow: 0 0 0 1px rgba(255,138,128,0.35);
}
.pub-service-pack .status-pack-head {
  position: static;
  top: auto;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.pub-service-hub-hint {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(184,255,60,0.14);
  color: var(--hint);
  font-size: 12px;
  line-height: 1.4;
}
.status-pack-head {
  position: sticky;
  top: -12px;
  z-index: 3;
  padding: 14px 14px 10px;
  margin: 0;
  border-radius: 22px 22px 0 0;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 16px -12px rgba(0, 0, 0, 0.25);
  color: var(--text);
}
.status-pack-head strong {
  display: block;
  font-size: 17px;
  letter-spacing: -0.03em;
  margin-bottom: 2px;
  color: var(--heading);
}
.status-pack-head .meta { margin: 0; font-size: 12px; color: var(--hint); }

.status-list {
  display: flex;
  flex-direction: column;
  padding: 0 8px 4px;
}
.status-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 12px 6px;
  border: 0;
  border-bottom: 1px solid var(--soft-line);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: inherit;
  border-radius: 0;
  box-shadow: none;
  touch-action: manipulation;
}
.status-list .status-row:last-child { border-bottom: 0; }
.status-row:active:not(:disabled) { background: var(--soft-fill); }
.status-row.is-owned {
  opacity: 1;
  cursor: pointer;
}

.status-preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  min-width: 48px;
  max-width: 48px;
  overflow: hidden;
}
.status-preview .msg-nick {
  font-size: 11px !important;
  max-width: 48px;
}
.status-preview-frame {
  justify-content: center;
}
.status-preview-frame .ava-ring { transform: scale(1.08); }
.status-preview-bg {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(17,17,17,0.1);
  background: var(--surface-muted);
  display: block;
  box-shadow: none !important;
  animation: none !important;
  color: transparent !important;
  flex: 0 0 auto;
}
.status-preview-mark {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  gap: 0;
  border-radius: 12px;
  background: #111;
  color: var(--lime);
}
.status-preview-mark.is-boost {
  background: linear-gradient(145deg, #1a1a1a, #0d0d0d);
  color: var(--lime);
  grid-template-rows: auto auto;
  padding: 4px 2px;
}
.status-preview-mark.is-prefix {
  background: rgba(184,255,60,0.14);
  border: 1px solid rgba(184,255,60,0.45);
}
.status-preview-mark .msg-prefix {
  transform: scale(0.95);
}
.status-mark-ico {
  display: grid;
  place-items: center;
  line-height: 0;
}
.status-mark-ico .icon-svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
}
.status-mark-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
  line-height: 1;
}

.status-info {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.status-name {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--heading);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.status-priv {
  font-style: normal;
  font-size: 11px;
  color: var(--hint);
  font-family: "IBM Plex Mono", monospace;
  letter-spacing: 0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.status-price {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  color: #111;
  background: var(--lime);
  border-radius: 999px;
  padding: 6px 10px;
  white-space: nowrap;
}
.status-row.is-owned .status-price {
  background: var(--soft-fill);
  color: var(--hint);
}

/* legacy shop cards kept for other surfaces */
.shop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.shop-card {
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
  font: inherit;
  display: grid;
  gap: 6px;
}
.shop-card b { font-family: "IBM Plex Mono", monospace; }
.shop-card.is-owned {
  opacity: 0.72;
  cursor: default;
}
.shop-card.is-owned b { color: var(--lime); }

/* chat / feed avatars — compact */
.msg-author {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.msg-author:hover .msg-nick { text-decoration: underline; }
.msg-ava,
.msg-ava.msg-ava-sm {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px;
  min-height: 22px;
  max-width: 22px;
  max-height: 22px;
  border-radius: 8px;
  object-fit: cover;
  display: inline-grid;
  place-items: center;
  background: #111;
  color: var(--lime);
  font-size: 10px;
  font-weight: 800;
  flex: 0 0 22px;
}
.msg-ava.msg-ava-md {
  width: 36px !important;
  height: 36px !important;
  max-width: 36px;
  max-height: 36px;
  border-radius: 12px;
  flex-basis: 36px;
}
.msg .who .msg-ava { width: 22px !important; height: 22px !important; }
.msg-nick {
  font-size: 12px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.25;
  max-width: 100%;
}
/* gradient / glow nicks need paint outside the glyph box */
[class*="nick-"]:not(.nick-plain) .msg-nick {
  overflow: visible;
  display: inline-block;
  vertical-align: baseline;
}
.prefix-row {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  max-width: 100%;
  flex-wrap: wrap;
}
.msg-prefix {
  display: inline-flex;
  align-items: center;
  background: var(--lime);
  color: #111;
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 9px;
  font-weight: 800;
  font-family: "IBM Plex Mono", monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
  flex: 0 0 auto;
  box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.12);
}
.msg-prefix.prefix-lime { background: var(--lime); color: #111; }
.msg-prefix.prefix-gold {
  background: linear-gradient(135deg, #f6d365, #fda085);
  color: var(--heading);
  box-shadow: 0 0 10px rgba(253, 160, 133, 0.35);
}
.msg-prefix.prefix-neon {
  background: #111;
  color: #39ff14;
  box-shadow: 0 0 0 1px #39ff14, 0 0 12px rgba(57, 255, 20, 0.45);
}
.msg-prefix.prefix-dark {
  background: #111;
  color: #fff;
}
.msg-prefix.prefix-ruby {
  background: linear-gradient(135deg, #ff416c, #ff4b2b);
  color: #fff;
}
.msg-prefix.prefix-ice {
  background: linear-gradient(135deg, #a1c4fd, #c2e9fb);
  color: #0f172a;
}
.msg-prefix.prefix-violet {
  background: linear-gradient(135deg, #a18cd1, #fbc2eb);
  color: var(--heading);
}
.msg-prefix.prefix-chrome {
  background: linear-gradient(135deg, #d4d4d8, #fafafa 40%, #a1a1aa 70%, #e4e4e7);
  color: var(--heading);
}
.msg-prefix.prefix-pulse {
  background: #111;
  color: var(--lime);
  box-shadow: 0 0 0 1px var(--lime), 0 0 12px rgba(184, 255, 60, 0.4);
  animation: prefix-pulse 2.4s ease-in-out infinite;
}
.msg-prefix.prefix-mint {
  background: linear-gradient(135deg, #84fab0, #8fd3f4);
  color: #0f172a;
}
@keyframes prefix-pulse {
  0%, 100% { box-shadow: 0 0 0 1px var(--lime), 0 0 8px rgba(184, 255, 60, 0.3); }
  50% { box-shadow: 0 0 0 1px var(--lime), 0 0 16px rgba(184, 255, 60, 0.55); }
}
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 9px;
  font-weight: 800;
  font-family: "IBM Plex Mono", monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
  flex: 0 0 auto;
  background: #111;
  color: #fff;
}
.status-badge i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
}
.status-badge.badge-vip { background: linear-gradient(135deg, #f6d365, #fda085); color: #111; }
.status-badge.badge-vip i { background: #111; box-shadow: none; }
.status-badge.badge-pro { background: #111; color: var(--lime); box-shadow: 0 0 0 1px var(--lime); }
.status-badge.badge-verified { background: #0ea5e9; color: #fff; }
.status-badge.badge-verified i { background: #fff; box-shadow: none; border-radius: 2px; width: 7px; height: 7px; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%); }
.status-badge.badge-elite { background: linear-gradient(135deg, #111, #333); color: #fbbf24; box-shadow: 0 0 0 1px #fbbf24; }
.status-badge.badge-fire { background: linear-gradient(135deg, #ff416c, #ff4b2b); color: #fff; }
.status-badge.badge-star { background: #111; color: #fde047; box-shadow: 0 0 0 1px #fde047; }
.status-badge.badge-new { background: #22c55e; color: #fff; }
.status-badge.badge-top { background: linear-gradient(135deg, #6366f1, #22d3ee); color: #fff; }
.status-badge.badge-partner { background: #fff; color: #111; box-shadow: 0 0 0 1px #111; }
.role-pill.role-pill-mini {
  margin-top: 0;
  padding: 2px 7px;
  font-size: 9px;
  letter-spacing: 0.04em;
  box-shadow: none;
}
.prefix-editor {
  display: grid;
  gap: 8px;
  margin-bottom: 4px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(17, 17, 17, 0.1);
  background: var(--soft-fill);
}
.prefix-live-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 8px 10px;
  border-radius: 12px;
  background: #111;
}
.prefix-live-preview .msg-prefix,
.prefix-live-preview .status-badge { font-size: 10px; padding: 3px 8px; }
.msg .who { margin-bottom: 5px; line-height: 1.2; }
.msg.out .who { color: rgba(255,255,255,0.72); }
.msg .msg-text { word-break: break-word; }

.entity-id {
  margin: 3px 0 0;
  color: rgba(17, 17, 17, 0.56);
  font: 700 10px/1.35 "IBM Plex Mono", monospace;
  overflow-wrap: anywhere;
}
.pub-link-copy,
.pub-share-btn {
  border: 1px solid rgba(17, 17, 17, 0.14);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  color: var(--heading);
  padding: 5px 9px;
  font: 800 10px/1 "IBM Plex Mono", monospace;
}
.live-stats .pub-link-copy { margin-left: auto; }
.profile-link-btn {
  width: 100%;
  margin-top: 10px;
}
.user-profile-sheet.is-bg-dark .entity-id,
.user-profile-sheet.bg-carbon .entity-id,
.user-profile-sheet.bg-velvet .entity-id,
.user-profile-sheet.bg-ocean .entity-id,
.user-profile-sheet.bg-plasma .entity-id,
.user-profile-sheet.bg-nebula .entity-id,
.user-profile-sheet.bg-circuit .entity-id {
  color: rgba(255, 255, 255, 0.66);
}

/* —— avatar rings / luxury frames —— */
.ava-ring {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 10px;
  padding: 2px;
  background: transparent;
}
.ava-ring .msg-ava,
.ava-ring .profile-hero-ava {
  display: grid;
  place-items: center;
  border-radius: inherit;
  position: relative;
  z-index: 1;
  line-height: 1;
  text-align: center;
}
.ava-ring .msg-ava.stub,
.ava-ring .profile-hero-ava.stub {
  display: grid !important;
  place-items: center !important;
}
.ava-ring.is-lg {
  border-radius: 24px;
  padding: 3px;
}
.ava-ring.frame-none { padding: 0; }

.ava-ring.frame-lime {
  background: linear-gradient(135deg, #d8ff6a 0%, #8fdf20 40%, #c8ff4a 70%, #5ea300 100%);
  box-shadow:
    0 0 0 1px rgba(184,255,60,0.35),
    0 0 14px rgba(184,255,60,0.45),
    inset 0 0 0 1px rgba(255,255,255,0.25);
  animation: ring-lime 2.8s ease-in-out infinite;
}
.ava-ring.frame-gold {
  background: linear-gradient(135deg, #fff1b8 0%, #e0b84a 28%, #8a6110 52%, #f5d76e 78%, #c9a227 100%);
  background-size: 200% 200%;
  box-shadow:
    0 0 0 1px rgba(201,162,39,0.45),
    0 0 16px rgba(245,199,66,0.4),
    inset 0 0 0 1px rgba(255,255,255,0.35);
  animation: ring-gold 3.6s linear infinite;
}
.ava-ring.frame-pulse {
  background: linear-gradient(135deg, #e0f2fe 0%, #7dd3fc 35%, #38bdf8 65%, #0ea5e9 100%);
  box-shadow:
    0 0 0 1px rgba(125,211,252,0.5),
    0 0 18px rgba(56,189,248,0.45);
  animation: ring-pulse 1.8s ease-in-out infinite;
}
.ava-ring.frame-obsidian {
  background: linear-gradient(145deg, #3a3a3a 0%, #0a0a0a 35%, #2c2c2c 55%, #111 78%, #5a5a5a 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.18),
    0 0 14px rgba(0,0,0,0.45),
    inset 0 0 0 1px rgba(255,255,255,0.12);
  animation: ring-obsidian 3.2s ease-in-out infinite;
}
.ava-ring.frame-ruby {
  background: linear-gradient(135deg, #ff8aa0 0%, #e11d48 32%, #7f1d1d 58%, #fb7185 82%, #be123c 100%);
  background-size: 200% 200%;
  box-shadow:
    0 0 0 1px rgba(225,29,72,0.45),
    0 0 16px rgba(244,63,94,0.4),
    inset 0 0 0 1px rgba(255,255,255,0.28);
  animation: ring-ruby 3.4s linear infinite;
}
.ava-ring.frame-prism {
  background: conic-gradient(from 120deg, #fbbf24, #34d399, #38bdf8, #a78bfa, #f472b6, #fbbf24);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.35),
    0 0 18px rgba(167,139,250,0.45);
  animation: ring-prism 4s linear infinite;
}
.ava-ring.frame-ember {
  background: linear-gradient(135deg, #ffedd5 0%, #fb923c 28%, #ea580c 55%, #7c2d12 78%, #fdba74 100%);
  background-size: 220% 220%;
  box-shadow:
    0 0 0 1px rgba(234,88,12,0.4),
    0 0 16px rgba(251,146,60,0.45),
    inset 0 0 0 1px rgba(255,255,255,0.3);
  animation: ring-ember 3s ease-in-out infinite;
}

/* —— custom editable frame —— */
.ava-ring.frame-custom {
  --fx-dur: 1;
  --fi: var(--frame-intensity, 65);
  --frame-glow-size: calc(4px + (0.22px * var(--fi)));
  --frame-glow-size-2: calc(10px + (0.34px * var(--fi)));
  padding: 3px;
  isolation: isolate;
  background: linear-gradient(135deg, var(--frame-c1, #b8ff3c), var(--frame-c2, #38bdf8));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--frame-glow, #b8ff3c) 45%, transparent),
    0 0 var(--frame-glow-size) var(--frame-glow, #b8ff3c),
    0 0 var(--frame-glow-size-2) color-mix(in srgb, var(--frame-c2, #38bdf8) calc(20% + 0.55% * var(--fi)), transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  filter: saturate(calc(0.75 + 0.01 * var(--fi))) brightness(calc(0.92 + 0.004 * var(--fi)));
}
.ava-ring.frame-custom[data-frame-speed="slow"] { --fx-dur: 1.75; }
.ava-ring.frame-custom[data-frame-speed="normal"] { --fx-dur: 1; }
.ava-ring.frame-custom[data-frame-speed="fast"] { --fx-dur: 0.55; }
.ava-ring.frame-custom[data-frame-speed="off"] { animation: none !important; }
.ava-ring.frame-custom.is-lg {
  padding: 5px;
  border-radius: 26px;
}
.ava-ring.frame-custom[data-frame-mode="solid"] {
  background: var(--frame-c1, #b8ff3c);
  animation: none;
}
.ava-ring.frame-custom[data-frame-mode="neon"] {
  background: linear-gradient(135deg, var(--frame-c1, #b8ff3c), var(--frame-c2, #38bdf8));
  box-shadow:
    0 0 0 1px var(--frame-glow, #b8ff3c),
    0 0 var(--frame-glow-size) var(--frame-glow, #b8ff3c),
    0 0 var(--frame-glow-size-2) var(--frame-c2, #38bdf8);
  animation: frame-custom-neon calc(3.6s * var(--fx-dur, 1)) ease-in-out infinite;
}
.ava-ring.frame-custom[data-frame-mode="pulse"] {
  background: linear-gradient(135deg, var(--frame-c1, #b8ff3c), var(--frame-c2, #38bdf8));
  animation: frame-custom-pulse calc(2.8s * var(--fx-dur, 1)) ease-in-out infinite;
}
.ava-ring.frame-custom[data-frame-mode="chrome"] {
  background: linear-gradient(
    135deg,
    var(--frame-c1, #b8ff3c) 0%,
    #f8fafc 28%,
    var(--frame-c2, #38bdf8) 52%,
    #ffffff 72%,
    var(--frame-glow, #b8ff3c) 100%
  );
  background-size: 200% 200%;
  animation: ring-chrome3d calc(8s * var(--fx-dur, 1)) linear infinite;
}
.ava-ring.frame-custom[data-frame-mode="gradient"] {
  background-size: 180% 180%;
  animation: ring-chrome3d calc(7s * var(--fx-dur, 1)) linear infinite;
}
.ava-ring.frame-custom[data-frame-mode="spin"] {
  background: conic-gradient(from 0deg, var(--frame-c1, #b8ff3c), var(--frame-c2, #38bdf8), var(--frame-glow, #b8ff3c), var(--frame-c1, #b8ff3c));
  animation: frame-custom-spin calc(4.2s * var(--fx-dur, 1)) linear infinite;
}
.ava-ring.frame-custom[data-frame-mode="shimmer"] {
  background: linear-gradient(
    120deg,
    var(--frame-c1, #b8ff3c) 0%,
    #fff 35%,
    var(--frame-c2, #38bdf8) 55%,
    var(--frame-glow, #b8ff3c) 100%
  );
  background-size: 220% 220%;
  animation: frame-custom-shimmer calc(3.2s * var(--fx-dur, 1)) ease-in-out infinite;
}
.ava-ring.frame-custom[data-frame-mode="breathe"] {
  background: linear-gradient(135deg, var(--frame-c1, #b8ff3c), var(--frame-c2, #38bdf8));
  animation: frame-custom-breathe calc(3.4s * var(--fx-dur, 1)) ease-in-out infinite;
}
.ava-ring.frame-custom[data-frame-mode="dual"] {
  background:
    linear-gradient(90deg, var(--frame-c1, #b8ff3c), transparent 45%),
    linear-gradient(270deg, var(--frame-c2, #38bdf8), transparent 45%),
    linear-gradient(135deg, var(--frame-glow, #b8ff3c), var(--frame-c2, #38bdf8));
  background-size: 200% 100%, 200% 100%, 100% 100%;
  animation: frame-custom-dual calc(3.8s * var(--fx-dur, 1)) ease-in-out infinite;
}
@keyframes frame-custom-neon {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.18); }
}
@keyframes frame-custom-pulse {
  0%, 100% {
    box-shadow: 0 0 0 1px var(--frame-glow, #b8ff3c), 0 0 var(--frame-glow-size, 12px) var(--frame-glow, #b8ff3c);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 2px var(--frame-c2, #38bdf8), 0 0 var(--frame-glow-size-2, 28px) var(--frame-glow, #b8ff3c);
    transform: scale(calc(1 + 0.00035 * var(--fi, 65)));
  }
}
@keyframes frame-custom-spin {
  to { transform: rotate(360deg); }
}
.ava-ring.frame-custom[data-frame-mode="spin"] > * {
  transform: rotate(0deg);
  animation: frame-custom-spin-fix calc(4.2s * var(--fx-dur, 1)) linear infinite;
}
@keyframes frame-custom-spin-fix {
  to { transform: rotate(-360deg); }
}
@keyframes frame-custom-shimmer {
  0%, 100% { background-position: 0% 50%; filter: brightness(1); }
  50% { background-position: 100% 50%; filter: brightness(1.12); }
}
@keyframes frame-custom-breathe {
  0%, 100% { padding: 3px; box-shadow: 0 0 0 1px var(--frame-glow, #b8ff3c), 0 0 var(--frame-glow-size, 10px) var(--frame-glow, #b8ff3c); }
  50% { padding: 6px; box-shadow: 0 0 0 2px var(--frame-c2, #38bdf8), 0 0 var(--frame-glow-size-2, 24px) var(--frame-glow, #b8ff3c); }
}
.ava-ring.frame-custom.is-lg[data-frame-mode="breathe"] {
  animation: frame-custom-breathe-lg calc(3.4s * var(--fx-dur, 1)) ease-in-out infinite;
}
@keyframes frame-custom-breathe-lg {
  0%, 100% { padding: 5px; box-shadow: 0 0 0 1px var(--frame-glow, #b8ff3c), 0 0 var(--frame-glow-size, 12px) var(--frame-glow, #b8ff3c); }
  50% { padding: 8px; box-shadow: 0 0 0 2px var(--frame-c2, #38bdf8), 0 0 var(--frame-glow-size-2, 28px) var(--frame-glow, #b8ff3c); }
}
@keyframes frame-custom-dual {
  0%, 100% { background-position: 0% 50%, 100% 50%, 0 0; }
  50% { background-position: 100% 50%, 0% 50%, 0 0; }
}

/* —— custom editable background —— */
.profile-card.bg-custom,
.bg-custom,
.sheet-card.pub-detail.bg-custom,
.user-profile-sheet.bg-custom,
.dm-shell.bg-custom,
.dm-row-bg-custom,
.msg.msg-bg-custom,
.status-preview-bg.bg-custom,
.msg-author.msg-bg-custom {
  --fx-dur: 1;
  --bi: var(--bg-intensity, 55);
  --bg-accent-mix: calc(12% + (0.55% * var(--bi)));
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--bg-accent, #b8ff3c) calc(18% + 0.4% * var(--bi)), #111);
  background: linear-gradient(
    155deg,
    var(--bg-c1, #0f172a),
    color-mix(in srgb, var(--bg-c2, #1e293b) calc(100% - 0.35% * var(--bi)), var(--bg-accent, #b8ff3c)),
    var(--bg-c2, #1e293b)
  ) !important;
  color: #f8fafc;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--bg-accent, #b8ff3c) calc(14% + 0.35% * var(--bi)), transparent),
    0 0 calc(8px + 0.18px * var(--bi)) color-mix(in srgb, var(--bg-accent, #b8ff3c) calc(10% + 0.25% * var(--bi)), transparent);
}
.profile-card.bg-custom::after,
.sheet-card.pub-detail.bg-custom::after,
.user-profile-sheet.bg-custom::after,
.status-preview-bg.bg-custom::after {
  content: "";
  position: absolute;
  inset: -20%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 20% 15%, color-mix(in srgb, var(--bg-accent, #b8ff3c) calc(10% + 0.5% * var(--bi)), transparent), transparent 42%),
    radial-gradient(circle at 85% 80%, color-mix(in srgb, var(--bg-accent, #b8ff3c) calc(6% + 0.35% * var(--bi)), transparent), transparent 46%);
  opacity: calc(0.2 + 0.008 * var(--bi));
}
.profile-card.bg-custom > *,
.sheet-card.pub-detail.bg-custom > *,
.user-profile-sheet.bg-custom > * {
  position: relative;
  z-index: 1;
}
.bg-custom[data-bg-speed="slow"],
.profile-card.bg-custom[data-bg-speed="slow"] { --fx-dur: 1.75; }
.bg-custom[data-bg-speed="normal"],
.profile-card.bg-custom[data-bg-speed="normal"] { --fx-dur: 1; }
.bg-custom[data-bg-speed="fast"],
.profile-card.bg-custom[data-bg-speed="fast"] { --fx-dur: 0.55; }
.bg-custom[data-bg-speed="off"],
.profile-card.bg-custom[data-bg-speed="off"] { animation: none !important; }
.bg-custom[data-bg-mode="solid"],
.profile-card.bg-custom[data-bg-mode="solid"],
.sheet-card.pub-detail.bg-custom[data-bg-mode="solid"],
.user-profile-sheet.bg-custom[data-bg-mode="solid"],
.msg.msg-bg-custom[data-bg-mode="solid"] {
  background: var(--bg-c1, #0f172a) !important;
  animation: none !important;
}
.bg-custom[data-bg-mode="radial"],
.profile-card.bg-custom[data-bg-mode="radial"],
.sheet-card.pub-detail.bg-custom[data-bg-mode="radial"],
.user-profile-sheet.bg-custom[data-bg-mode="radial"],
.msg.msg-bg-custom[data-bg-mode="radial"] {
  background:
    radial-gradient(circle at 25% 20%, color-mix(in srgb, var(--bg-accent, #b8ff3c) calc(18% + 0.55% * var(--bi, 55)), transparent), transparent 42%),
    radial-gradient(circle at 80% 70%, color-mix(in srgb, var(--bg-c2, #1e293b) 80%, #fff), transparent 46%),
    linear-gradient(160deg, var(--bg-c1, #0f172a), var(--bg-c2, #1e293b)) !important;
}
.bg-custom[data-bg-mode="mesh"],
.profile-card.bg-custom[data-bg-mode="mesh"],
.sheet-card.pub-detail.bg-custom[data-bg-mode="mesh"],
.user-profile-sheet.bg-custom[data-bg-mode="mesh"] {
  background:
    linear-gradient(color-mix(in srgb, var(--bg-accent, #b8ff3c) calc(10% + 0.35% * var(--bi, 55)), transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--bg-accent, #b8ff3c) calc(10% + 0.35% * var(--bi, 55)), transparent) 1px, transparent 1px),
    linear-gradient(155deg, var(--bg-c1, #0f172a), var(--bg-c2, #1e293b)) !important;
  background-size: 18px 18px, 18px 18px, auto !important;
}
.bg-custom[data-bg-mode="animated"],
.profile-card.bg-custom[data-bg-mode="animated"],
.sheet-card.pub-detail.bg-custom[data-bg-mode="animated"],
.user-profile-sheet.bg-custom[data-bg-mode="animated"],
.msg.msg-bg-custom[data-bg-mode="animated"] {
  background:
    radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--bg-accent, #b8ff3c) calc(25% + 0.45% * var(--bi, 55)), transparent), transparent 34%),
    radial-gradient(circle at 75% 40%, color-mix(in srgb, var(--bg-c2, #1e293b) 70%, #fff), transparent 38%),
    linear-gradient(155deg, var(--bg-c1, #0f172a), var(--bg-c2, #1e293b)) !important;
  background-size: 140% 140%, 140% 140%, 100% 100% !important;
  animation: custom-bg-drift calc(8s * var(--fx-dur, 1)) ease-in-out infinite alternate;
}
.bg-custom[data-bg-mode="wave"],
.profile-card.bg-custom[data-bg-mode="wave"],
.sheet-card.pub-detail.bg-custom[data-bg-mode="wave"],
.user-profile-sheet.bg-custom[data-bg-mode="wave"] {
  background:
    radial-gradient(120% 60% at 10% 100%, color-mix(in srgb, var(--bg-accent, #b8ff3c) calc(22% + 0.4% * var(--bi, 55)), transparent), transparent 50%),
    radial-gradient(100% 50% at 90% 0%, color-mix(in srgb, var(--bg-c2, #1e293b) 70%, #fff), transparent 46%),
    linear-gradient(165deg, var(--bg-c1, #0f172a), var(--bg-c2, #1e293b)) !important;
  background-size: 160% 120%, 160% 120%, 100% 100% !important;
  animation: custom-bg-wave calc(7s * var(--fx-dur, 1)) ease-in-out infinite;
}
.bg-custom[data-bg-mode="aurora"],
.profile-card.bg-custom[data-bg-mode="aurora"],
.sheet-card.pub-detail.bg-custom[data-bg-mode="aurora"],
.user-profile-sheet.bg-custom[data-bg-mode="aurora"] {
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--bg-accent, #b8ff3c) calc(30% + 0.45% * var(--bi, 55)), transparent), transparent 40%),
    linear-gradient(300deg, color-mix(in srgb, var(--bg-c2, #1e293b) 80%, #38bdf8), transparent 45%),
    linear-gradient(160deg, var(--bg-c1, #0f172a), var(--bg-c2, #1e293b)) !important;
  background-size: 180% 180%, 180% 180%, 100% 100% !important;
  animation: custom-bg-aurora calc(9s * var(--fx-dur, 1)) ease-in-out infinite;
}
.bg-custom[data-bg-image="1"],
.profile-card.bg-custom[data-bg-image="1"],
.sheet-card.pub-detail.bg-custom[data-bg-image="1"],
.user-profile-sheet.bg-custom[data-bg-image="1"],
.dm-shell.bg-custom[data-bg-image="1"],
.msg.msg-bg-custom[data-bg-image="1"],
.bg-custom[data-bg-mode="image"],
.profile-card.bg-custom[data-bg-mode="image"],
.sheet-card.pub-detail.bg-custom[data-bg-mode="image"],
.user-profile-sheet.bg-custom[data-bg-mode="image"],
.dm-shell.bg-custom[data-bg-mode="image"] {
  background-color: #07080a !important;
  background-image:
    linear-gradient(180deg, rgba(6, 7, 10, 0.46) 0%, rgba(6, 7, 10, 0.62) 48%, rgba(6, 7, 10, 0.78) 100%),
    var(--bg-image) !important;
  background-size: cover, cover !important;
  background-position: center, center !important;
  background-repeat: no-repeat !important;
  animation: none !important;
}
.profile-card.bg-custom[data-bg-image="1"]::after,
.profile-card.bg-custom[data-bg-mode="image"]::after,
.user-profile-sheet.bg-custom[data-bg-image="1"]::after,
.user-profile-sheet.bg-custom[data-bg-mode="image"]::after,
.sheet-card.pub-detail.bg-custom[data-bg-image="1"]::after,
.sheet-card.pub-detail.bg-custom[data-bg-mode="image"]::after,
.status-preview-bg.bg-custom[data-bg-image="1"]::after {
  display: block;
  content: "";
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.18);
  opacity: 1;
}
.bg-custom[data-bg-mode="kenburns"],
.profile-card.bg-custom[data-bg-mode="kenburns"],
.sheet-card.pub-detail.bg-custom[data-bg-mode="kenburns"],
.user-profile-sheet.bg-custom[data-bg-mode="kenburns"] {
  background-color: #07080a !important;
  background-image:
    linear-gradient(180deg, rgba(6, 7, 10, 0.46) 0%, rgba(6, 7, 10, 0.7) 100%),
    var(--bg-image) !important;
  background-size: 120% 120%, 120% 120% !important;
  background-position: 30% 40%, 30% 40% !important;
  background-repeat: no-repeat !important;
  animation: custom-bg-kenburns calc(12s * var(--fx-dur, 1)) ease-in-out infinite alternate !important;
}
.profile-card.bg-custom[data-bg-image="1"] .meta,
.profile-card.bg-custom[data-bg-image="1"] .profile-bio,
.profile-card.bg-custom[data-bg-image="1"] .profile-progress .meta,
.profile-card.bg-custom[data-bg-mode="image"] .meta,
.profile-card.bg-custom[data-bg-mode="image"] .profile-bio,
.user-profile-sheet.bg-custom[data-bg-image="1"] .meta,
.user-profile-sheet.bg-custom[data-bg-image="1"] .profile-bio {
  color: rgba(255, 255, 255, 0.92) !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7);
}
.profile-card.bg-custom[data-bg-image="1"] .msg-nick,
.profile-card.bg-custom[data-bg-mode="image"] .msg-nick,
.user-profile-sheet.bg-custom[data-bg-image="1"] .msg-nick {
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.75);
}
@keyframes custom-bg-wave {
  0%, 100% { background-position: 0% 80%, 100% 0%, 0 0; }
  50% { background-position: 40% 20%, 40% 90%, 0 0; }
}
@keyframes custom-bg-aurora {
  0%, 100% { background-position: 0% 40%, 100% 60%, 0 0; filter: hue-rotate(0deg); }
  50% { background-position: 80% 60%, 20% 30%, 0 0; filter: hue-rotate(18deg); }
}
@keyframes custom-bg-kenburns {
  0% { background-position: 20% 30%; background-size: 120% 120%; }
  100% { background-position: 80% 70%; background-size: 140% 140%; }
}
.bg-custom[data-bg-light="0"],
.profile-card.bg-custom[data-bg-light="0"],
.sheet-card.pub-detail.bg-custom[data-bg-light="0"],
.user-profile-sheet.bg-custom[data-bg-light="0"] {
  color: var(--heading) !important;
}
.bg-custom[data-bg-light="1"],
.profile-card.bg-custom[data-bg-light="1"],
.sheet-card.pub-detail.bg-custom[data-bg-light="1"],
.user-profile-sheet.bg-custom[data-bg-light="1"] {
  color: #f8fafc !important;
}
.bg-custom[data-bg-light="0"] .meta,
.bg-custom[data-bg-light="0"] .profile-bio,
.bg-custom[data-bg-light="0"] .profile-progress .meta,
.profile-card.bg-custom[data-bg-light="0"] .meta,
.profile-card.bg-custom[data-bg-light="0"] .profile-bio,
.profile-card.bg-custom[data-bg-light="0"] .profile-progress .meta,
.user-profile-sheet.bg-custom[data-bg-light="0"] .meta,
.user-profile-sheet.bg-custom[data-bg-light="0"] .profile-bio {
  color: rgba(17, 17, 17, 0.78) !important;
}
.bg-custom[data-bg-light="1"] .meta,
.bg-custom[data-bg-light="1"] .profile-bio,
.bg-custom[data-bg-light="1"] .profile-progress .meta,
.profile-card.bg-custom[data-bg-light="1"] .meta,
.profile-card.bg-custom[data-bg-light="1"] .profile-bio,
.profile-card.bg-custom[data-bg-light="1"] .profile-progress .meta,
.user-profile-sheet.bg-custom[data-bg-light="1"] .meta,
.user-profile-sheet.bg-custom[data-bg-light="1"] .profile-bio {
  color: rgba(248, 250, 252, 0.88) !important;
}
.profile-card.bg-custom[data-bg-light="1"] .profile-hero-meta.nick-plain .msg-nick,
.user-profile-sheet.bg-custom[data-bg-light="1"] .profile-hero-meta.nick-plain .msg-nick {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
.profile-card.bg-custom[data-bg-light="0"] .profile-hero-meta.nick-plain .msg-nick,
.user-profile-sheet.bg-custom[data-bg-light="0"] .profile-hero-meta.nick-plain .msg-nick {
  color: var(--heading) !important;
  -webkit-text-fill-color: #111 !important;
}
.bg-custom[data-bg-light="1"] .profile-stat,
.profile-card.bg-custom[data-bg-light="1"] .profile-stat,
.user-profile-sheet.bg-custom[data-bg-light="1"] .profile-stat {
  --profile-stat-num: #ffffff;
  --profile-stat-label: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.bg-custom[data-bg-light="0"] .profile-stat,
.profile-card.bg-custom[data-bg-light="0"] .profile-stat,
.user-profile-sheet.bg-custom[data-bg-light="0"] .profile-stat {
  --profile-stat-num: #111;
  --profile-stat-label: rgba(17, 17, 17, 0.65);
  background: var(--soft-fill);
  border: 1px solid rgba(17, 17, 17, 0.08);
}
.text-tone-toggle {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 4px;
  border-radius: 14px;
  background: #111;
}
.tone-btn {
  border: 0;
  border-radius: 11px;
  padding: 10px 8px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  background: transparent;
  color: #d4d8dc;
  cursor: pointer;
}
.tone-btn.is-on {
  background: var(--lime);
  color: #111;
}
.bg-image-tools {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
}
.bg-image-pick {
  position: relative;
  width: 100%;
  min-height: 48px;
  border-radius: 14px !important;
  overflow: hidden;
}
.bg-image-pick input[type="file"] {
  display: block !important;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  margin: 0;
  cursor: pointer;
  font-size: 24px;
  z-index: 2;
}
.bg-image-clear {
  width: 100%;
  border-radius: 12px;
  padding: 10px;
}
.bg-image-preview {
  height: 96px;
  border-radius: 14px;
  border: 1px solid var(--ghost-ring);
  background: #111 center / cover no-repeat;
}
@keyframes custom-bg-drift {
  0% { background-position: 0% 20%, 100% 10%, 0 0; }
  100% { background-position: 40% 60%, 30% 50%, 0 0; }
}
.cosmetic-editor {
  margin-top: 10px;
  border-radius: 18px;
  border: 1px solid var(--ghost-ring);
  background:
    radial-gradient(circle at 8% 0%, rgba(184, 255, 60, 0.14), transparent 42%),
    #fff;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);
  transition: max-height 0.28s ease, opacity 0.22s ease, transform 0.22s ease, margin 0.2s ease;
}
.cosmetic-editor.is-open {
  max-height: 2400px;
  opacity: 1;
  transform: translateY(0);
  margin-top: 10px;
  overflow: visible;
}
.cosmetic-editor[hidden] { display: none !important; }
.cosmetic-editor-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 0;
  background: transparent;
  padding: 12px 14px;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.cosmetic-editor-head strong {
  display: block;
  font-size: 15px;
  letter-spacing: -0.03em;
}
.cosmetic-editor-head em {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 11px;
  color: var(--hint);
  font-weight: 600;
}
.cosmetic-caret {
  width: 10px;
  height: 10px;
  border-right: 2px solid #111;
  border-bottom: 2px solid #111;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  flex: 0 0 auto;
}
.cosmetic-editor.is-open .cosmetic-caret {
  transform: rotate(-135deg);
  margin-top: 6px;
}
.cosmetic-editor-body {
  padding: 0 14px 14px;
  display: grid;
  gap: 10px;
}
.cosmetic-locked { opacity: 0.85; }
.cosmetic-locked-box { padding: 12px 14px; }
.cosmetic-locked-box.is-open { max-height: 120px; }
.fx-label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--hint);
}
.fx-chip-group { display: grid; gap: 8px; }
.fx-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.fx-chip {
  border: 1px solid var(--ghost-ring);
  background: #111;
  color: #fff;
  border-radius: 999px;
  padding: 7px 11px;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.fx-chip.is-on {
  background: var(--lime);
  color: #111;
  box-shadow: 0 0 14px rgba(184, 255, 60, 0.3);
}
.cosmetic-check {
  display: flex !important;
  align-items: center;
  gap: 8px;
  grid-column: 1 / -1;
}
.cosmetic-check input { width: auto !important; height: auto !important; }

/* —— 3D luxury frames —— */
.ava-ring.frame-chrome3d,
.ava-ring.frame-crystal3d,
.ava-ring.frame-holo3d {
  padding: 3px;
  isolation: isolate;
  transform: translateZ(0);
}
.ava-ring.frame-chrome3d.is-lg,
.ava-ring.frame-crystal3d.is-lg,
.ava-ring.frame-holo3d.is-lg {
  padding: 5px;
  border-radius: 26px;
}
.ava-ring.frame-chrome3d::before,
.ava-ring.frame-crystal3d::before,
.ava-ring.frame-holo3d::before,
.ava-ring.frame-chrome3d::after,
.ava-ring.frame-crystal3d::after,
.ava-ring.frame-holo3d::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}
.ava-ring.frame-chrome3d {
  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #d4d4d8 14%,
      #71717a 32%,
      #fafafa 48%,
      #a1a1aa 62%,
      #3f3f46 78%,
      #e4e4e7 100%
    );
  background-size: 240% 240%;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55),
    0 3px 0 #52525b,
    0 5px 0 #27272a,
    0 8px 16px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -2px 3px rgba(0, 0, 0, 0.35);
  animation: ring-chrome3d 3.2s linear infinite;
}
.ava-ring.frame-chrome3d::before {
  inset: -1px;
  background: linear-gradient(
    115deg,
    transparent 28%,
    rgba(255, 255, 255, 0.85) 46%,
    transparent 62%
  );
  background-size: 220% 100%;
  mix-blend-mode: screen;
  opacity: 0.75;
  animation: ring-chrome-shine 2.4s ease-in-out infinite;
}
.ava-ring.frame-chrome3d::after {
  inset: 2px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), transparent 42%);
  opacity: 0.9;
}
.ava-ring.frame-crystal3d {
  background:
    linear-gradient(
      135deg,
      #f0f9ff 0%,
      #7dd3fc 18%,
      #a5b4fc 38%,
      #e879f9 58%,
      #67e8f9 78%,
      #ddd6fe 100%
    );
  background-size: 260% 260%;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7),
    0 3px 0 rgba(59, 130, 246, 0.45),
    0 5px 0 rgba(30, 64, 175, 0.35),
    0 8px 18px rgba(56, 189, 248, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -2px 4px rgba(37, 99, 235, 0.28);
  animation: ring-crystal3d 4s ease-in-out infinite;
}
.ava-ring.frame-crystal3d::before {
  inset: 1px;
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.85), transparent 42%),
    linear-gradient(320deg, rgba(255, 255, 255, 0.4), transparent 48%);
  opacity: 0.95;
}
.ava-ring.frame-crystal3d::after {
  inset: -2px;
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.55), transparent 40%);
  animation: ring-crystal-glow 2.8s ease-in-out infinite;
  opacity: 0.8;
}
.ava-ring.frame-holo3d {
  background: conic-gradient(
    from 0deg,
    #ff0080,
    #ff8c00,
    #40e0d0,
    #7b2ff7,
    #00ff87,
    #ff0080
  );
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55),
    0 3px 0 rgba(124, 58, 237, 0.5),
    0 5px 0 rgba(76, 29, 149, 0.4),
    0 8px 20px rgba(236, 72, 153, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28);
  animation: ring-holo3d 3.5s linear infinite;
}
.ava-ring.frame-holo3d::before {
  inset: 2px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.55), transparent 45%);
  opacity: 0.85;
}
.ava-ring.frame-holo3d::after {
  inset: -3px;
  background: conic-gradient(
    from 180deg,
    transparent,
    rgba(255, 255, 255, 0.65),
    transparent 32%
  );
  animation: ring-holo-spin 2.8s linear infinite;
  opacity: 0.7;
  filter: blur(1px);
}

@keyframes ring-lime {
  0%, 100% { filter: saturate(1); box-shadow: 0 0 0 1px rgba(184,255,60,0.35), 0 0 10px rgba(184,255,60,0.35); }
  50% { filter: saturate(1.25); box-shadow: 0 0 0 1px rgba(184,255,60,0.55), 0 0 22px rgba(184,255,60,0.7); }
}
@keyframes ring-gold {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes ring-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(125,211,252,0.45), 0 0 10px rgba(56,189,248,0.35); filter: brightness(1); }
  50% { box-shadow: 0 0 0 2px rgba(186,230,253,0.8), 0 0 24px rgba(56,189,248,0.75); filter: brightness(1.08); }
}
@keyframes ring-obsidian {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.2); }
}
@keyframes ring-ruby {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes ring-prism {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}
@keyframes ring-ember {
  0%, 100% { background-position: 0% 40%; box-shadow: 0 0 0 1px rgba(234,88,12,0.35), 0 0 12px rgba(251,146,60,0.35); }
  50% { background-position: 100% 60%; box-shadow: 0 0 0 1px rgba(251,146,60,0.55), 0 0 22px rgba(249,115,22,0.65); }
}
@keyframes ring-chrome3d {
  0% { background-position: 0% 40%; }
  100% { background-position: 200% 60%; }
}
@keyframes ring-chrome-shine {
  0% { background-position: 120% 0; opacity: 0.35; }
  45% { opacity: 0.85; }
  100% { background-position: -40% 0; opacity: 0.35; }
}
@keyframes ring-crystal3d {
  0%, 100% { background-position: 0% 30%; filter: saturate(1.05) brightness(1); }
  50% { background-position: 100% 70%; filter: saturate(1.25) brightness(1.08); }
}
@keyframes ring-crystal-glow {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.03); }
}
@keyframes ring-holo3d {
  0% { filter: hue-rotate(0deg) saturate(1.15); }
  100% { filter: hue-rotate(360deg) saturate(1.25); }
}
@keyframes ring-holo-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* legacy class hooks still used in a few places */
.msg-ava.frame-lime,
.profile-hero-ava.frame-lime { box-shadow: 0 0 0 2px var(--lime), 0 0 12px rgba(184,255,60,0.45); }
.msg-ava.frame-gold,
.profile-hero-ava.frame-gold { box-shadow: 0 0 0 2px #f5c542, 0 0 14px rgba(245,199,66,0.45); }
.msg-ava.frame-pulse,
.profile-hero-ava.frame-pulse { box-shadow: 0 0 0 2px #7dd3fc, 0 0 14px rgba(125,211,252,0.5); }
.msg-ava.frame-obsidian,
.profile-hero-ava.frame-obsidian { box-shadow: 0 0 0 2px #2a2a2a, 0 0 12px rgba(0,0,0,0.45); }
.msg-ava.frame-ruby,
.profile-hero-ava.frame-ruby { box-shadow: 0 0 0 2px #e11d48, 0 0 14px rgba(244,63,94,0.45); }
.msg-ava.frame-prism,
.profile-hero-ava.frame-prism { box-shadow: 0 0 0 2px #a78bfa, 0 0 14px rgba(167,139,250,0.5); }
.msg-ava.frame-ember,
.profile-hero-ava.frame-ember { box-shadow: 0 0 0 2px #ea580c, 0 0 14px rgba(251,146,60,0.45); }
.msg-ava.frame-chrome3d,
.profile-hero-ava.frame-chrome3d {
  box-shadow: 0 0 0 2px #a1a1aa, 0 0 14px rgba(161, 161, 170, 0.55);
}
.msg-ava.frame-crystal3d,
.profile-hero-ava.frame-crystal3d {
  box-shadow: 0 0 0 2px #7dd3fc, 0 0 14px rgba(125, 211, 252, 0.55);
}
.msg-ava.frame-holo3d,
.profile-hero-ava.frame-holo3d {
  box-shadow: 0 0 0 2px #e879f9, 0 0 14px rgba(232, 121, 249, 0.55);
}

/* —— luxury nick styles ——
   IMPORTANT: never put filter on the same node as background-clip:text —
   that paints a colored rectangle instead of clipped glyphs.
   Glow via text-shadow (solid) or filter on the PARENT .nick-* wrapper. */
[class*="nick-"] .msg-nick {
  -webkit-font-smoothing: antialiased;
  background-color: transparent;
}
.msg-nick {
  background-color: transparent;
}

.nick-fx {
  display: inline-block;
  max-width: 100%;
  min-width: 0;
  line-height: 1.25;
  vertical-align: baseline;
  background: transparent;
}
/* glow on nick-fx wrapper only — never on .msg-nick with background-clip */
.nick-gold .nick-fx,
.profile-hero-meta.nick-gold .nick-fx { filter: drop-shadow(0 0 5px rgba(245,199,66,0.45)); }
.nick-wave .nick-fx,
.profile-hero-meta.nick-wave .nick-fx { filter: drop-shadow(0 0 5px rgba(129,140,248,0.4)); }
.nick-ice .nick-fx,
.profile-hero-meta.nick-ice .nick-fx { filter: drop-shadow(0 0 5px rgba(125,211,252,0.5)); }
.nick-fire .nick-fx,
.profile-hero-meta.nick-fire .nick-fx { filter: drop-shadow(0 0 5px rgba(249,115,22,0.45)); }
.nick-rose .nick-fx,
.profile-hero-meta.nick-rose .nick-fx { filter: drop-shadow(0 0 5px rgba(251,113,133,0.4)); }
.nick-sunset .nick-fx,
.profile-hero-meta.nick-sunset .nick-fx { filter: drop-shadow(0 0 5px rgba(249,115,22,0.4)); }
.nick-plasma .nick-fx,
.profile-hero-meta.nick-plasma .nick-fx { filter: drop-shadow(0 0 6px rgba(167,139,250,0.45)); }
.nick-royal .nick-fx,
.profile-hero-meta.nick-royal .nick-fx { filter: drop-shadow(0 0 5px rgba(139,92,246,0.45)); }
.nick-mirror .nick-fx,
.profile-hero-meta.nick-mirror .nick-fx { filter: drop-shadow(0 0 4px rgba(255,255,255,0.25)); }
.nick-lava .nick-fx,
.profile-hero-meta.nick-lava .nick-fx { filter: drop-shadow(0 0 5px rgba(234,88,12,0.5)); }
.nick-emerald .nick-fx,
.profile-hero-meta.nick-emerald .nick-fx { filter: drop-shadow(0 0 5px rgba(16,185,129,0.45)); }
.nick-candy .nick-fx,
.profile-hero-meta.nick-candy .nick-fx { filter: drop-shadow(0 0 5px rgba(244,114,182,0.45)); }
.nick-steel .nick-fx,
.profile-hero-meta.nick-steel .nick-fx { filter: drop-shadow(0 1px 1px rgba(15,23,42,0.28)); }
.nick-aurora .nick-fx,
.profile-hero-meta.nick-aurora .nick-fx { filter: drop-shadow(0 0 6px rgba(52,211,153,0.4)); }
.nick-honey .nick-fx,
.profile-hero-meta.nick-honey .nick-fx { filter: drop-shadow(0 0 4px rgba(251,191,36,0.4)); }
.nick-ocean .nick-fx,
.profile-hero-meta.nick-ocean .nick-fx { filter: drop-shadow(0 0 5px rgba(14,165,233,0.45)); }
.nick-sakura .nick-fx,
.profile-hero-meta.nick-sakura .nick-fx { filter: drop-shadow(0 0 5px rgba(244,114,182,0.4)); }

.nick-neon .msg-nick,
.profile-hero-meta.nick-neon .msg-nick {
  color: #e8ff8a;
  -webkit-text-fill-color: #e8ff8a;
  letter-spacing: 0.03em;
  text-shadow:
    0 0 2px #fff,
    0 0 6px #d8ff6a,
    0 0 14px rgba(184,255,60,0.9),
    0 0 28px rgba(143,223,32,0.5);
  animation: nick-soft-glow 4.8s ease-in-out infinite;
}
.nick-gold .msg-nick,
.profile-hero-meta.nick-gold .msg-nick {
  background-image: linear-gradient(100deg, #6b4a0a 0%, #c9a227 18%, #f5d76e 36%, #8a6110 52%, #e8c547 68%, #5c4208 84%, #d4af37 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: gold-foil 9s linear infinite;
}
/* Readable gold / light nicks on pastel profile backgrounds */
.bg-aurora .nick-gold .nick-fx,
.bg-mist .nick-gold .nick-fx,
.bg-sunset .nick-gold .nick-fx,
.bg-grid .nick-gold .nick-fx,
.user-profile-sheet.bg-aurora .nick-gold .nick-fx,
.user-profile-sheet.bg-mist .nick-gold .nick-fx,
.user-profile-sheet.bg-sunset .nick-gold .nick-fx,
.user-profile-sheet.bg-grid .nick-gold .nick-fx,
.bg-aurora .nick-honey .nick-fx,
.bg-aurora .nick-amber .nick-fx,
.bg-aurora .nick-ice .nick-fx,
.bg-aurora .nick-mint .nick-fx,
.bg-aurora .nick-rose .nick-fx,
.bg-mist .nick-honey .nick-fx,
.bg-mist .nick-amber .nick-fx,
.bg-sunset .nick-honey .nick-fx,
.bg-sunset .nick-amber .nick-fx {
  filter:
    drop-shadow(0 1px 0 rgba(17,17,17,0.55))
    drop-shadow(0 0 1px rgba(17,17,17,0.45))
    drop-shadow(0 0 8px rgba(138,97,16,0.35));
}
.bg-aurora .profile-hero-name .msg-nick,
.bg-mist .profile-hero-name .msg-nick,
.bg-sunset .profile-hero-name .msg-nick,
.bg-grid .profile-hero-name .msg-nick,
.user-profile-sheet.bg-aurora .profile-hero-name .msg-nick,
.user-profile-sheet.bg-mist .profile-hero-name .msg-nick,
.user-profile-sheet.bg-sunset .profile-hero-name .msg-nick,
.user-profile-sheet.bg-grid .profile-hero-name .msg-nick {
  -webkit-font-smoothing: antialiased;
}
.nick-glitch .msg-nick,
.profile-hero-meta.nick-glitch .msg-nick {
  color: #f8fafc;
  -webkit-text-fill-color: #f8fafc;
  letter-spacing: 0.02em;
  text-shadow: 1px 0 rgba(255,45,149,0.55), -1px 0 rgba(0,229,255,0.55);
  animation: nick-glitch 6s ease-in-out infinite;
}
.nick-wave .msg-nick,
.profile-hero-meta.nick-wave .msg-nick {
  background-image: linear-gradient(90deg, #818cf8, #38bdf8, #c084fc, #f472b6, #818cf8);
  background-size: 280% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: silk-wave 8s ease-in-out infinite;
}
.nick-ice .msg-nick,
.profile-hero-meta.nick-ice .msg-nick {
  background-image: linear-gradient(90deg, #ffffff, #bae6fd, #7dd3fc, #e0f2fe, #ffffff);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: silk-wave 9s ease-in-out infinite;
}
.nick-fire .msg-nick,
.profile-hero-meta.nick-fire .msg-nick {
  background-image: linear-gradient(90deg, #fff7ed, #fdba74, #f97316, #ef4444, #facc15, #f97316);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: fire-flow 7s linear infinite;
}
.nick-rose .msg-nick,
.profile-hero-meta.nick-rose .msg-nick {
  background-image: linear-gradient(110deg, #ffe4e6, #fb7185, #f43f5e, #fda4af, #fb7185);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: gold-foil 9s linear infinite;
}
.nick-mint .msg-nick,
.profile-hero-meta.nick-mint .msg-nick {
  color: #6ee7b7;
  -webkit-text-fill-color: #6ee7b7;
  text-shadow:
    0 0 4px #a7f3d0,
    0 0 12px rgba(52,211,153,0.75),
    0 0 22px rgba(16,185,129,0.4);
}
.nick-mono .msg-nick,
.profile-hero-meta.nick-mono .msg-nick {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.05em;
  color: var(--heading);
  -webkit-text-fill-color: #111;
  font-weight: 700;
}
.nick-cyber .msg-nick,
.profile-hero-meta.nick-cyber .msg-nick {
  color: #67e8f9;
  -webkit-text-fill-color: #67e8f9;
  letter-spacing: 0.04em;
  text-shadow:
    1px 0 #ff2d95,
    -1px 0 #22d3ee,
    0 0 8px rgba(34,211,238,0.85),
    0 0 18px rgba(6,182,212,0.45);
  animation: nick-cyber-pulse 3.8s ease-in-out infinite;
}
.nick-sunset .msg-nick,
.profile-hero-meta.nick-sunset .msg-nick {
  background-image: linear-gradient(95deg, #fde68a, #fbbf24, #f97316, #ec4899, #f472b6);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: silk-wave 8.5s ease-in-out infinite;
}
.nick-plasma .msg-nick,
.profile-hero-meta.nick-plasma .msg-nick {
  background-image: linear-gradient(90deg, #c4b5fd, #22d3ee, #f472b6, #a78bfa, #22d3ee);
  background-size: 280% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: silk-wave 7.5s ease-in-out infinite;
}
.nick-royal .msg-nick,
.profile-hero-meta.nick-royal .msg-nick {
  background-image: linear-gradient(100deg, #4c1d95, #a78bfa, #ede9fe, #7c3aed, #c4b5fd, #6d28d9);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: gold-foil 10s linear infinite;
}
.nick-toxic .msg-nick,
.profile-hero-meta.nick-toxic .msg-nick {
  color: #bef264;
  -webkit-text-fill-color: #bef264;
  text-shadow:
    0 0 3px #ecfccb,
    0 0 10px rgba(163,230,53,0.9),
    0 0 20px rgba(132,204,22,0.55);
  animation: nick-soft-glow 5s ease-in-out infinite;
}
.nick-ink .msg-nick,
.profile-hero-meta.nick-ink .msg-nick {
  color: #0a0a0a;
  -webkit-text-fill-color: #0a0a0a;
  font-weight: 900;
  letter-spacing: -0.02em;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4), 0 2px 4px rgba(0,0,0,0.18);
}
.nick-mirror .msg-nick,
.profile-hero-meta.nick-mirror .msg-nick {
  background-image: linear-gradient(100deg, #52525b, #fafafa 22%, #a1a1aa 40%, #ffffff 55%, #71717a 72%, #e4e4e7 88%, #3f3f46);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: gold-foil 8.5s linear infinite;
}
.nick-arctic .msg-nick,
.profile-hero-meta.nick-arctic .msg-nick {
  color: #bae6fd;
  -webkit-text-fill-color: #bae6fd;
  text-shadow:
    0 0 4px #fff,
    0 0 10px rgba(186,230,253,0.95),
    0 0 20px rgba(56,189,248,0.55);
}
.nick-lava .msg-nick,
.profile-hero-meta.nick-lava .msg-nick {
  background-image: linear-gradient(90deg, #450a0a, #9a3412, #ea580c, #facc15, #ef4444, #9a3412);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: fire-flow 7.5s linear infinite;
}
.nick-pixel .msg-nick,
.profile-hero-meta.nick-pixel .msg-nick {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  color: #a3e635;
  -webkit-text-fill-color: #a3e635;
  letter-spacing: 0.1em;
  text-shadow: 1px 0 #14532d, -1px 0 #3f6212, 0 1px 0 #052e16;
}
.nick-emerald .msg-nick,
.profile-hero-meta.nick-emerald .msg-nick {
  background-image: linear-gradient(100deg, #047857, #34d399, #d1fae5, #059669, #6ee7b7, #065f46);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: gold-foil 9s linear infinite;
}
.nick-amber .msg-nick,
.profile-hero-meta.nick-amber .msg-nick {
  color: #fbbf24;
  -webkit-text-fill-color: #fbbf24;
  text-shadow:
    0 0 4px #fef3c7,
    0 0 12px rgba(245,158,11,0.8),
    0 0 22px rgba(217,119,6,0.4);
}
.nick-violet .msg-nick,
.profile-hero-meta.nick-violet .msg-nick {
  color: #c4b5fd;
  -webkit-text-fill-color: #c4b5fd;
  text-shadow:
    0 0 4px #ede9fe,
    0 0 12px rgba(139,92,246,0.8),
    0 0 24px rgba(124,58,237,0.4);
}
.nick-shadow .msg-nick,
.profile-hero-meta.nick-shadow .msg-nick {
  color: #1f2937;
  -webkit-text-fill-color: #1f2937;
  letter-spacing: 0.02em;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.35),
    0 2px 0 rgba(0,0,0,0.22),
    0 4px 8px rgba(0,0,0,0.18);
}
.nick-candy .msg-nick,
.profile-hero-meta.nick-candy .msg-nick {
  background-image: linear-gradient(90deg, #f472b6, #fb7185, #fda4af, #f9a8d4, #e879f9, #f472b6);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: silk-wave 8s ease-in-out infinite;
}
.nick-steel .msg-nick,
.profile-hero-meta.nick-steel .msg-nick {
  background-image: linear-gradient(100deg, #334155, #e2e8f0 25%, #64748b 45%, #f8fafc 60%, #94a3b8 80%, #475569);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: gold-foil 9s linear infinite;
}
.nick-aurora .msg-nick,
.profile-hero-meta.nick-aurora .msg-nick {
  background-image: linear-gradient(90deg, #34d399, #22d3ee, #818cf8, #e879f9, #34d399);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: silk-wave 8.5s ease-in-out infinite;
}
.nick-honey .msg-nick,
.profile-hero-meta.nick-honey .msg-nick {
  background-image: linear-gradient(100deg, #b45309, #fcd34d, #fffbeb, #d97706, #fde68a, #92400e);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: gold-foil 9.5s linear infinite;
}
.nick-noir .msg-nick,
.profile-hero-meta.nick-noir .msg-nick {
  color: #111827;
  -webkit-text-fill-color: #111827;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 #fff, 0 2px 0 rgba(0,0,0,0.2);
}
.nick-ocean .msg-nick,
.profile-hero-meta.nick-ocean .msg-nick {
  background-image: linear-gradient(90deg, #38bdf8, #0284c7, #0ea5e9, #22d3ee, #0369a1);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: silk-wave 8s ease-in-out infinite;
}
.nick-pulse .msg-nick,
.profile-hero-meta.nick-pulse .msg-nick {
  color: #fb7185;
  -webkit-text-fill-color: #fb7185;
  animation: nick-pulse 3.4s ease-in-out infinite;
}
.nick-sakura .msg-nick,
.profile-hero-meta.nick-sakura .msg-nick {
  background-image: linear-gradient(110deg, #fff1f2, #f9a8d4, #f472b6, #fecdd3, #fb7185);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: gold-foil 9s linear infinite;
}

/* —— custom editable nick —— */
.nick-custom,
.profile-hero-meta.nick-custom,
.msg-author.nick-custom,
.dm-row-name.nick-custom {
  --ni: var(--nick-intensity, 60);
  --nick-glow-size: calc(2px + (0.16px * var(--ni)));
  --nick-glow-size-2: calc(6px + (0.28px * var(--ni)));
}
.nick-custom .msg-nick,
.profile-hero-meta.nick-custom .msg-nick,
.msg-author.nick-custom .msg-nick,
.dm-row-name.nick-custom .msg-nick {
  font-weight: 800;
}
.nick-custom .nick-fx,
.profile-hero-meta.nick-custom .nick-fx,
.msg-author.nick-custom .nick-fx,
.dm-row-name.nick-custom .nick-fx {
  filter:
    drop-shadow(0 0 var(--nick-glow-size) var(--nick-glow, #b8ff3c))
    saturate(calc(0.7 + 0.01 * var(--ni)))
    brightness(calc(0.9 + 0.0045 * var(--ni)));
}
.nick-custom[data-nick-mode="gradient"] .msg-nick,
.nick-custom:not([data-nick-mode]) .msg-nick,
.profile-hero-meta.nick-custom[data-nick-mode="gradient"] .msg-nick,
.profile-hero-meta.nick-custom:not([data-nick-mode]) .msg-nick,
.msg-author.nick-custom[data-nick-mode="gradient"] .msg-nick,
.msg-author.nick-custom:not([data-nick-mode]) .msg-nick,
.dm-row-name.nick-custom[data-nick-mode="gradient"] .msg-nick,
.dm-row-name.nick-custom:not([data-nick-mode]) .msg-nick {
  background-image: linear-gradient(
    95deg,
    var(--nick-c1, #b8ff3c),
    var(--nick-c2, #38bdf8),
    var(--nick-c1, #b8ff3c)
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: silk-wave 8s ease-in-out infinite;
}
.nick-custom[data-nick-mode="glow"] .msg-nick,
.profile-hero-meta.nick-custom[data-nick-mode="glow"] .msg-nick,
.msg-author.nick-custom[data-nick-mode="glow"] .msg-nick,
.dm-row-name.nick-custom[data-nick-mode="glow"] .msg-nick {
  color: var(--nick-c1, #b8ff3c);
  -webkit-text-fill-color: var(--nick-c1, #b8ff3c);
  text-shadow:
    0 0 var(--nick-glow-size) var(--nick-glow, #b8ff3c),
    0 0 var(--nick-glow-size-2) var(--nick-glow, #b8ff3c),
    0 0 calc(12px + 0.22px * var(--ni)) var(--nick-c2, #38bdf8);
  animation: nick-soft-glow 5s ease-in-out infinite;
}
.nick-custom[data-nick-mode="flame"] .msg-nick,
.profile-hero-meta.nick-custom[data-nick-mode="flame"] .msg-nick,
.msg-author.nick-custom[data-nick-mode="flame"] .msg-nick,
.dm-row-name.nick-custom[data-nick-mode="flame"] .msg-nick {
  background-image: linear-gradient(
    90deg,
    var(--nick-c1, #b8ff3c),
    var(--nick-c2, #38bdf8),
    var(--nick-glow, #b8ff3c),
    var(--nick-c1, #b8ff3c)
  );
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: fire-flow 7s linear infinite;
}
.nick-custom[data-nick-mode="neon"] .msg-nick,
.profile-hero-meta.nick-custom[data-nick-mode="neon"] .msg-nick,
.msg-author.nick-custom[data-nick-mode="neon"] .msg-nick,
.dm-row-name.nick-custom[data-nick-mode="neon"] .msg-nick {
  color: var(--nick-c1, #b8ff3c);
  -webkit-text-fill-color: var(--nick-c1, #b8ff3c);
  letter-spacing: 0.03em;
  text-shadow:
    0 0 2px #fff,
    0 0 var(--nick-glow-size) var(--nick-glow, #b8ff3c),
    0 0 var(--nick-glow-size-2) var(--nick-c2, #38bdf8),
    0 0 calc(14px + 0.24px * var(--ni)) var(--nick-glow, #b8ff3c);
  animation: nick-soft-glow 4.8s ease-in-out infinite;
}
.fx-range {
  display: grid;
  gap: 6px;
  grid-column: 1 / -1;
}
.fx-range b {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  color: var(--heading);
}
.fx-range input[type="range"] {
  width: 100%;
  accent-color: var(--lime);
}
.nick-custom[data-nick-mode="chrome"] .msg-nick,
.profile-hero-meta.nick-custom[data-nick-mode="chrome"] .msg-nick,
.msg-author.nick-custom[data-nick-mode="chrome"] .msg-nick,
.dm-row-name.nick-custom[data-nick-mode="chrome"] .msg-nick {
  background-image: linear-gradient(
    100deg,
    var(--nick-c1, #b8ff3c) 0%,
    #f8fafc 28%,
    var(--nick-c2, #38bdf8) 48%,
    #ffffff 62%,
    var(--nick-glow, #b8ff3c) 82%,
    var(--nick-c1, #b8ff3c) 100%
  );
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: gold-foil 9s linear infinite;
}

.nick-custom-editor {
  display: grid;
  gap: 10px;
  margin-top: 4px;
  padding: 12px;
  border-radius: 16px;
  background: var(--soft-fill);
  border: 1px solid rgba(17, 17, 17, 0.08);
}
.nick-custom-editor[hidden] { display: none !important; }
.nick-custom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.nick-custom-grid label {
  display: grid;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--hint);
  min-width: 0;
}
.nick-custom-grid input[type="color"] {
  width: 100%;
  height: 40px;
  padding: 4px;
  border-radius: 12px;
  border: 1px solid rgba(17, 17, 17, 0.1);
  background: var(--surface);
}
.nick-custom-grid input[type="range"] {
  width: 100%;
}
@media (max-width: 480px) {
  .nick-custom-grid { grid-template-columns: 1fr; }
}

@keyframes nick-pulse {
  0%, 100% { text-shadow: 0 0 4px rgba(244,63,94,0.35), 0 0 10px rgba(251,113,133,0.18); }
  50% { text-shadow: 0 0 8px rgba(244,63,94,0.75), 0 0 18px rgba(251,113,133,0.4), 0 0 28px rgba(244,63,94,0.22); }
}
@keyframes gold-foil {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}
@keyframes nick-glitch {
  0%, 86%, 100% {
    transform: translate(0);
    text-shadow: 1px 0 rgba(255,45,149,0.5), -1px 0 rgba(0,229,255,0.5);
  }
  88% {
    transform: translate(-0.6px, 0);
    text-shadow: 1.5px 0 rgba(255,45,149,0.7), -1.5px 0 rgba(0,229,255,0.7);
  }
  90% {
    transform: translate(0.6px, 0);
    text-shadow: -1px 0 rgba(255,45,149,0.65), 1.5px 0 rgba(0,229,255,0.65);
  }
  92% {
    transform: translate(0);
    text-shadow: 1px 0 rgba(255,45,149,0.5), -1px 0 rgba(0,229,255,0.5);
  }
}
@keyframes silk-wave {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 100% center; }
}
@keyframes fire-flow {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}
@keyframes nick-soft-glow {
  0%, 100% { opacity: 0.92; }
  50% { opacity: 1; }
}
@keyframes nick-neon-flicker {
  0%, 100% { opacity: 0.94; }
  50% { opacity: 1; }
}
@keyframes nick-cyber-pulse {
  0%, 100% {
    text-shadow: 1px 0 #ff2d95, -1px 0 #22d3ee, 0 0 8px rgba(34,211,238,0.55);
  }
  50% {
    text-shadow: 1px 0 #ff2d95, -1px 0 #22d3ee, 0 0 12px rgba(34,211,238,0.85), 0 0 20px rgba(6,182,212,0.35);
  }
}

/* outgoing bubbles: keep color/glow styles, only lift dark solid nicks */
.msg.out .nick-mono .msg-nick,
.msg.out .nick-ink .msg-nick,
.msg.out .nick-shadow .msg-nick,
.msg.out .nick-noir .msg-nick {
  color: #f8fafc;
  -webkit-text-fill-color: #f8fafc;
  text-shadow: 0 1px 0 rgba(0,0,0,0.25), 0 0 10px rgba(255,255,255,0.15);
}
.msg.out .nick-neon .msg-nick {
  color: #e8ff8a;
  -webkit-text-fill-color: #e8ff8a;
}
.msg.out .nick-glitch .msg-nick {
  color: #fff;
  -webkit-text-fill-color: #fff;
}
.bg-carbon .nick-mono .msg-nick,
.bg-carbon .nick-ink .msg-nick,
.bg-carbon .nick-shadow .msg-nick,
.bg-carbon .nick-noir .msg-nick,
.bg-velvet .nick-mono .msg-nick,
.bg-velvet .nick-ink .msg-nick,
.bg-velvet .nick-shadow .msg-nick,
.bg-velvet .nick-noir .msg-nick,
.bg-ocean .nick-mono .msg-nick,
.bg-ocean .nick-ink .msg-nick,
.bg-ocean .nick-shadow .msg-nick,
.bg-ocean .nick-noir .msg-nick,
.profile-card.bg-carbon .nick-mono .msg-nick,
.profile-card.bg-carbon .nick-ink .msg-nick,
.profile-card.bg-carbon .nick-shadow .msg-nick,
.profile-card.bg-carbon .nick-noir .msg-nick,
.profile-card.bg-velvet .nick-mono .msg-nick,
.profile-card.bg-velvet .nick-ink .msg-nick,
.profile-card.bg-velvet .nick-shadow .msg-nick,
.profile-card.bg-velvet .nick-noir .msg-nick,
.profile-card.bg-ocean .nick-mono .msg-nick,
.profile-card.bg-ocean .nick-ink .msg-nick,
.profile-card.bg-ocean .nick-shadow .msg-nick,
.profile-card.bg-ocean .nick-noir .msg-nick {
  color: #f8fafc;
  -webkit-text-fill-color: #f8fafc;
  text-shadow: 0 1px 0 rgba(0,0,0,0.3), 0 0 10px rgba(255,255,255,0.12);
}

@media (prefers-reduced-motion: reduce) {
  .nick-neon .msg-nick,
  .nick-gold .msg-nick,
  .nick-glitch .msg-nick,
  .nick-wave .msg-nick,
  .nick-ice .msg-nick,
  .nick-fire .msg-nick,
  .nick-rose .msg-nick,
  .nick-cyber .msg-nick,
  .nick-sunset .msg-nick,
  .nick-plasma .msg-nick,
  .nick-royal .msg-nick,
  .nick-toxic .msg-nick,
  .nick-mirror .msg-nick,
  .nick-lava .msg-nick,
  .nick-emerald .msg-nick,
  .nick-candy .msg-nick,
  .nick-steel .msg-nick,
  .nick-aurora .msg-nick,
  .nick-honey .msg-nick,
  .nick-ocean .msg-nick,
  .nick-pulse .msg-nick,
  .nick-sakura .msg-nick,
  .nick-custom .msg-nick,
  .profile-hero-meta[class*="nick-"] .msg-nick,
  .msg-author[class*="nick-"] .msg-nick,
  .dm-row-name[class*="nick-"] .msg-nick {
    animation: none !important;
  }
  .ava-ring.frame-chrome3d,
  .ava-ring.frame-crystal3d,
  .ava-ring.frame-holo3d,
  .ava-ring.frame-chrome3d::before,
  .ava-ring.frame-crystal3d::after,
  .ava-ring.frame-holo3d::after {
    animation: none !important;
  }
  .bg-plasma::before,
  .bg-plasma::after,
  .bg-nebula::before,
  .bg-nebula::after,
  .bg-circuit::before,
  .bg-circuit::after,
  .profile-card.bg-plasma::before,
  .profile-card.bg-plasma::after,
  .profile-card.bg-nebula::before,
  .profile-card.bg-nebula::after,
  .profile-card.bg-circuit::before,
  .profile-card.bg-circuit::after,
  .sheet-card.pub-detail.bg-plasma::before,
  .sheet-card.pub-detail.bg-plasma::after,
  .sheet-card.pub-detail.bg-nebula::before,
  .sheet-card.pub-detail.bg-nebula::after,
  .sheet-card.pub-detail.bg-circuit::before,
  .sheet-card.pub-detail.bg-circuit::after,
  .status-preview-bg.bg-plasma::before,
  .status-preview-bg.bg-plasma::after,
  .status-preview-bg.bg-nebula::before,
  .status-preview-bg.bg-nebula::after,
  .status-preview-bg.bg-circuit::before,
  .status-preview-bg.bg-circuit::after {
    animation: none !important;
  }
}

.profile-preview .msg-ava { width: 42px !important; height: 42px !important; max-width: 42px; max-height: 42px; border-radius: 14px; }

.profile-hero { display: grid; gap: 14px; position: relative; overflow: hidden; }
.profile-hero-top {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 2;
  min-width: 0;
  overflow: visible;
  padding-bottom: 6px;
}
.profile-hero-ava {
  width: 72px;
  height: 72px;
  border-radius: 22px;
  object-fit: cover;
  flex: 0 0 auto;
  background: #111;
  color: var(--lime);
  display: grid;
  place-items: center;
  font-size: 28px;
  font-weight: 800;
}
.profile-hero-ava.stub { border: 1px solid #2a2a2a; }
.profile-hero-meta { min-width: 0; flex: 1; overflow: visible; }
.profile-hero-name {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
  overflow: visible;
}
.profile-hero-name .nick-fx,
.profile-hero-name .msg-nick {
  max-width: 100%;
  min-width: 0;
  overflow: visible;
}
.profile-hero-name strong,
.profile-hero-name .msg-nick {
  font-size: 22px !important;
  margin: 0;
  line-height: 1.25;
  overflow: visible;
  white-space: nowrap;
}
.profile-bio {
  margin: 0;
  line-height: 1.45;
  color: var(--text);
  word-break: break-word;
}
.bg-carbon .profile-bio,
.bg-velvet .profile-bio,
.bg-ocean .profile-bio { color: #e8eaed; }
.profile-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.profile-stat {
  background: var(--soft-fill);
  border-radius: 16px;
  padding: 12px 8px;
  text-align: center;
  min-width: 0;
}
.profile-stat {
  --profile-stat-num: var(--heading);
  --profile-stat-label: var(--hint);
}
.bg-carbon .profile-stat,
.bg-velvet .profile-stat,
.bg-ocean .profile-stat,
.bg-plasma .profile-stat,
.bg-nebula .profile-stat,
.bg-circuit .profile-stat,
.profile-card.bg-carbon .profile-stat,
.profile-card.bg-velvet .profile-stat,
.profile-card.bg-ocean .profile-stat,
.profile-card.bg-plasma .profile-stat,
.profile-card.bg-nebula .profile-stat,
.profile-card.bg-circuit .profile-stat,
.user-profile-sheet.bg-carbon .profile-stat,
.user-profile-sheet.bg-velvet .profile-stat,
.user-profile-sheet.bg-ocean .profile-stat,
.user-profile-sheet.bg-plasma .profile-stat,
.user-profile-sheet.bg-nebula .profile-stat,
.user-profile-sheet.bg-circuit .profile-stat {
  --profile-stat-num: #ffffff;
  --profile-stat-label: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.profile-stat b,
.profile-stat .profile-stat-val {
  display: block;
  font-size: 18px;
  font-weight: 800;
  font-family: "Outfit", "Segoe UI", sans-serif;
  letter-spacing: -0.03em;
  color: var(--profile-stat-num) !important;
  -webkit-text-fill-color: var(--profile-stat-num) !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  text-shadow: none !important;
  filter: none !important;
  animation: none !important;
  opacity: 1 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-stat span:not(.profile-stat-val) {
  display: block;
  margin-top: 4px;
  color: var(--profile-stat-label) !important;
  -webkit-text-fill-color: var(--profile-stat-label) !important;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-progress { display: grid; gap: 6px; }
.profile-progress-bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(17,17,17,0.1);
  overflow: hidden;
}
.bg-carbon .profile-progress-bar,
.bg-velvet .profile-progress-bar,
.bg-ocean .profile-progress-bar { background: rgba(255,255,255,0.12); }
.profile-progress-bar i {
  display: block;
  height: 100%;
  background: var(--lime);
  border-radius: inherit;
}
.profile-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.profile-section-head strong { margin: 0; font-size: 18px; }
button.profile-stat {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  font: inherit;
  color: inherit;
  width: 100%;
  cursor: pointer;
}
.profile-main {
  display: grid;
  gap: 12px;
  padding: 12px;
}
.profile-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 4px;
  border-radius: 16px;
  background: var(--soft-fill);
}
.profile-tabs-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.profile-tabs-4,
.profile-tabs-5,
.profile-tabs-6 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.user-profile-sheet .profile-tabs {
  grid-template-columns: 1fr 1fr;
}
.user-profile-sheet .profile-tabs-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.profile-tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--hint);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.03em;
  min-height: 40px;
  border-radius: 12px;
  padding: 8px 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
}
.profile-tab em {
  font-style: normal;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  color: inherit;
  opacity: 0.7;
}
.profile-tab.is-on {
  background: #111;
  color: #fff;
}
.profile-tab.is-on em { color: var(--lime); opacity: 1; }
.profile-pane[hidden] { display: none !important; }
.profile-pane { min-width: 0; }
.security-box {
  display: grid;
  gap: 12px;
  padding: 6px 2px 2px;
}
.security-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.security-ico {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #111;
  color: var(--lime);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.security-ico svg {
  width: 22px;
  height: 22px;
}
.security-head strong {
  display: block;
  font-size: 18px;
  letter-spacing: -0.03em;
}
.security-status {
  margin: 2px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--heading);
}
.security-box .meta { margin: 0; }
#pin-change-form.sheet-form {
  display: grid;
  gap: 10px;
}
#pin-change-form label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--hint);
}
#pin-change-form .pin-input {
  letter-spacing: 0.28em;
  font-size: 20px;
  font-weight: 800;
  text-align: center;
}
#pin-change-form.sheet-form,
#profile-custom-form.sheet-form,
#wall-box .sheet-form {
  background: transparent;
  border: 0;
  padding: 4px 0 0;
  box-shadow: none;
  overflow: visible;
  margin-bottom: 10px;
}
.wall-composer {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.wall-compose-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
  min-width: 0;
}
.wall-photo-btn {
  min-height: 48px;
  margin: 0;
  border-radius: 16px;
  font-size: 14px;
}
#wall-form .wall-publish-btn,
.wall-publish-btn {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  margin: 0;
  padding: 12px 10px;
  border-radius: 16px;
  border: 1px solid var(--ghost-ring);
  box-shadow: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  z-index: 2;
}
#wall-box .desk-card {
  margin-top: 8px;
}
.wall-post {
  display: grid;
  gap: 10px;
  padding: 12px;
  margin-top: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  min-width: 0;
}
.wall-post-media {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface-muted);
}
.wall-post-media img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(70dvh, 420px);
  object-fit: contain;
  object-position: center;
}
.wall-post-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--heading);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.wall-post-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--hint);
  font-size: 11px;
  font-family: "IBM Plex Mono", monospace;
}
.wall-post-bar b {
  margin-left: auto;
  font-weight: 600;
}
.wall-post-bar .icon-btn {
  padding: 6px 8px;
  min-height: 32px;
  min-width: 32px;
}
.profile-empty {
  margin: 8px 0 0;
  padding: 22px 14px;
  text-align: center;
  color: var(--hint);
  font-size: 13px;
  line-height: 1.45;
  background: var(--soft-fill);
  border-radius: 16px;
}
.portfolio-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: rgba(184, 255, 60, 0.16);
  color: #111;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
  line-height: 1;
  cursor: pointer;
}
html[data-theme="dark"] .portfolio-badge {
  background: rgba(184, 255, 60, 0.18);
  color: var(--lime);
}
.live-card.is-pin .portfolio-badge,
.post.pin .portfolio-badge {
  background: rgba(184, 255, 60, 0.22);
  color: var(--lime);
}
.portfolio-strip {
  display: grid;
  gap: 8px;
  margin: 10px 0 12px;
  padding: 10px;
  border-radius: 16px;
  background: var(--surface-muted);
  border: 1px solid var(--line);
}
.portfolio-strip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.portfolio-strip-head strong {
  font-size: 13px;
  letter-spacing: -0.02em;
  color: var(--heading);
}
.portfolio-strip-btn,
.portfolio-strip-empty {
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 12px;
  font-size: 12px;
}
.portfolio-strip-thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  cursor: pointer;
}
.portfolio-thumb {
  display: block;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  background: #111;
}
.portfolio-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
html[data-theme="dark"] .portfolio-strip {
  background: var(--surface) !important;
  border-color: var(--line) !important;
}
.portfolio-composer { margin-bottom: 12px; }
.portfolio-grid {
  display: grid;
  gap: 10px;
}
.portfolio-card {
  display: grid;
  gap: 10px;
  padding: 10px;
  border-radius: 18px;
  background: var(--surface-muted);
  border: 1px solid var(--line);
  overflow: hidden;
  min-width: 0;
}
.portfolio-media {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  background: #111;
  aspect-ratio: 16 / 10;
}
.portfolio-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.portfolio-media.is-empty {
  display: grid;
  place-items: center;
  color: var(--lime);
  min-height: 120px;
}
.portfolio-body {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.portfolio-body h3 {
  margin: 0;
  font-size: 15px;
  letter-spacing: -0.03em;
  color: var(--heading);
}
.portfolio-body p {
  margin: 0;
  color: var(--hint);
  font-size: 13px;
  line-height: 1.4;
  white-space: pre-wrap;
}
.portfolio-link {
  color: var(--heading);
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  word-break: break-all;
}
.portfolio-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--hint);
  font-size: 11px;
  font-family: "IBM Plex Mono", monospace;
}
.portfolio-bar b {
  margin-left: auto;
  font-weight: 600;
}
html[data-theme="dark"] .portfolio-card {
  background: var(--surface) !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"] .portfolio-link {
  color: #c7d2fe;
}
.fav-list {
  display: grid;
  gap: 8px;
}
.fav-card {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border-radius: 16px;
  background: var(--soft-fill);
  border: 1px solid var(--soft-line);
  cursor: pointer;
}
.fav-thumb {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  overflow: hidden;
  background: #111;
  display: grid;
  place-items: center;
  color: var(--lime);
}
.fav-thumb img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  display: block;
}
.fav-thumb.is-icon .icon-svg,
.fav-thumb.is-icon svg {
  width: 22px;
  height: 22px;
}
.fav-body { min-width: 0; }
.fav-room {
  display: block;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #7a8088;
  margin-bottom: 2px;
}
.fav-card h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fav-card p {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--hint);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fav-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 11px;
  color: #7a8088;
}
.fav-meta span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 48%;
}
.fav-unsave {
  flex: 0 0 auto;
  min-width: 40px;
  min-height: 40px;
  padding: 8px;
}
.profile-deposit {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--soft-line);
  display: grid;
  gap: 8px;
}
.profile-deposit strong { font-size: 15px; }
.deposit-xrocket { gap: 8px; }
.deposit-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.deposit-presets .deposit-preset {
  min-height: 36px;
  padding: 6px 12px;
  border-radius: 12px;
}
.deposit-presets .deposit-preset.is-on {
  background: #111;
  color: var(--lime);
  border-color: var(--ghost-ring);
}
.deposit-or {
  margin: 2px 0 0;
  text-align: center;
  opacity: 0.7;
}
.deposit-pending-card {
  margin-top: 8px;
  display: grid;
  gap: 8px;
}
.deposit-pay-link {
  display: block;
  text-align: center;
  padding: 12px;
  border-radius: 14px;
  text-decoration: none;
}
#view-profile .profile-actions {
  grid-template-columns: 1fr 1fr;
}
#view-profile .profile-actions button:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
#view-profile .profile-hero {
  padding: 16px;
}
.user-profile-sheet .profile-tabs {
  background: var(--soft-fill);
}
.user-profile-sheet.bg-carbon .profile-tabs,
.user-profile-sheet.bg-velvet .profile-tabs,
.user-profile-sheet.bg-ocean .profile-tabs,
.user-profile-sheet.bg-plasma .profile-tabs,
.user-profile-sheet.bg-nebula .profile-tabs,
.user-profile-sheet.bg-circuit .profile-tabs {
  background: rgba(255,255,255,0.1);
}
.user-profile-sheet.bg-carbon .profile-tab,
.user-profile-sheet.bg-velvet .profile-tab,
.user-profile-sheet.bg-ocean .profile-tab,
.user-profile-sheet.bg-plasma .profile-tab,
.user-profile-sheet.bg-nebula .profile-tab,
.user-profile-sheet.bg-circuit .profile-tab {
  color: rgba(255,255,255,0.7);
}
.user-profile-sheet.bg-carbon .profile-tab.is-on,
.user-profile-sheet.bg-velvet .profile-tab.is-on,
.user-profile-sheet.bg-ocean .profile-tab.is-on,
.user-profile-sheet.bg-plasma .profile-tab.is-on,
.user-profile-sheet.bg-nebula .profile-tab.is-on,
.user-profile-sheet.bg-circuit .profile-tab.is-on,
.user-profile-sheet.bg-custom .profile-tab.is-on {
  background: #111;
  color: #fff;
  -webkit-text-fill-color: #fff;
}
.user-profile-sheet.bg-carbon .fav-card,
.user-profile-sheet.bg-velvet .fav-card,
.user-profile-sheet.bg-ocean .fav-card,
.user-profile-sheet.bg-plasma .fav-card,
.user-profile-sheet.bg-nebula .fav-card,
.user-profile-sheet.bg-circuit .fav-card {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.1);
  color: #fff;
}
.user-profile-sheet.bg-carbon .fav-card p,
.user-profile-sheet.bg-velvet .fav-card p,
.user-profile-sheet.bg-ocean .fav-card p,
.user-profile-sheet.bg-plasma .fav-card p,
.user-profile-sheet.bg-nebula .fav-card p,
.user-profile-sheet.bg-circuit .fav-card p,
.user-profile-sheet.bg-carbon .fav-room,
.user-profile-sheet.bg-velvet .fav-room,
.user-profile-sheet.bg-ocean .fav-room,
.user-profile-sheet.bg-plasma .fav-room,
.user-profile-sheet.bg-nebula .fav-room,
.user-profile-sheet.bg-circuit .fav-room,
.user-profile-sheet.bg-carbon .fav-meta,
.user-profile-sheet.bg-velvet .fav-meta,
.user-profile-sheet.bg-ocean .fav-meta,
.user-profile-sheet.bg-plasma .fav-meta,
.user-profile-sheet.bg-nebula .fav-meta,
.user-profile-sheet.bg-circuit .fav-meta,
.user-profile-sheet.bg-carbon .profile-empty,
.user-profile-sheet.bg-velvet .profile-empty,
.user-profile-sheet.bg-ocean .profile-empty,
.user-profile-sheet.bg-plasma .profile-empty,
.user-profile-sheet.bg-nebula .profile-empty,
.user-profile-sheet.bg-circuit .profile-empty {
  color: rgba(255,255,255,0.72);
}
.profile-toggle {
  padding: 8px 12px;
  font-size: 12px;
  flex: 0 0 auto;
  white-space: nowrap;
}
.profile-panel[hidden] { display: none !important; }
.profile-select-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.profile-select-row label {
  display: grid;
  gap: 6px;
  font-size: 12px;
  color: var(--hint);
  min-width: 0;
}
.profile-select-row select,
.profile-select-row input {
  width: 100%;
  min-width: 0;
  font-size: 16px; /* prevent iOS zoom */
}
#profile-custom-form input,
#profile-custom-form textarea,
#profile-custom-form select,
#deposit-form input,
#wall-form textarea,
#wall-form input {
  font-size: 16px;
  max-width: 100%;
}
#profile-custom-form textarea { min-height: 96px; }
#profile-save-btn {
  width: 100%;
  padding: 14px;
  border-radius: 16px;
  font-size: 15px;
  font-weight: 800;
  touch-action: manipulation;
}
.file-pick {
  min-height: 48px;
  font-size: 14px;
  touch-action: manipulation;
}
.profile-actions { display: grid; gap: 8px; }
.profile-actions button {
  width: 100%;
  padding: 13px;
  border-radius: 14px;
  min-height: 48px;
  touch-action: manipulation;
}
#view-profile .profile {
  gap: 12px;
  padding-bottom: 96px;
}
#view-profile .profile-card {
  overflow: hidden;
  max-width: 100%;
}
#view-profile .profile-main {
  overflow: visible;
}
#view-profile .top h1.wordmark {
  font-size: 28px;
}

/* phone-first profile tweaks */
@media (max-width: 480px) {
  .profile-hero-ava { width: 64px; height: 64px; border-radius: 20px; font-size: 24px; }
  .profile-hero-name strong,
  .profile-hero-name .msg-nick { font-size: 18px !important; }
  .profile-stats { gap: 6px; }
  .profile-stat { padding: 10px 6px; border-radius: 14px; }
  .profile-stat b,
  .profile-stat .profile-stat-val { font-size: 14px; }
  .profile-card { padding: 12px; border-radius: 18px; }
  .sheet-form { padding: 12px; border-radius: 18px; }
}
@media (min-width: 481px) {
  .profile-select-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* game overlay */
.sheet,
#game-overlay,
#pub-modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(17,17,17,0.55);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  padding: max(12px, env(safe-area-inset-top, 0px))
    max(12px, env(safe-area-inset-right, 0px))
    max(12px, env(safe-area-inset-bottom, 0px))
    max(12px, env(safe-area-inset-left, 0px));
  box-sizing: border-box;
  overflow: hidden;
}
.sheet.is-open,
#game-overlay:not([hidden]),
#pub-modal:not([hidden]) {
  display: flex !important;
}
#pub-modal.is-open {
  align-items: flex-end;
  justify-content: center;
  background: rgba(8, 8, 8, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
/* Telegram WebView: blur + infinite cosmetics animations are expensive */
@media (max-width: 900px) {
  #pub-modal.is-open,
  #user-modal.sheet.is-open,
  #report-modal.sheet.is-open,
  #confirm-modal.sheet.is-open {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .ava-ring[class*="frame-"]:not(.frame-custom),
  .msg-prefix.prefix-pulse,
  .role-pill.prefix-pulse,
  .live-card .ava-ring {
    animation: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
.game-panel {
  width: min(100%, 360px);
  background: #111;
  color: #fff;
  border-radius: 24px;
  padding: 16px;
  box-shadow: 0 0 0 2px var(--lime), 0 20px 50px rgba(0,0,0,0.35);
}
.game-hud {
  display: flex;
  justify-content: space-between;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  margin-bottom: 12px;
}
.game-hud b { color: var(--lime); font-size: 16px; }
.game-stage {
  position: relative;
  height: 240px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 30% 20%, rgba(184,255,60,0.12), transparent 40%),
    #171717;
  border: 1px solid #2a2a2a;
  overflow: hidden;
}
.game-target {
  position: absolute;
  left: 40%;
  top: 40%;
  width: 64px;
  height: 64px;
  border: 0;
  border-radius: 20px;
  background: var(--lime);
  color: #111;
  font-weight: 900;
  font-size: 16px;
  box-shadow: 0 0 22px rgba(184,255,60,0.45);
  touch-action: manipulation;
}
.game-hint { color: #c5c9ce !important; margin: 12px 0; }
.game-panel .ghost { width: 100%; }
.game-toast {
  position: fixed;
  left: 50%;
  bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 50;
  background: var(--lime);
  color: #111;
  font-weight: 800;
  font-size: 13px;
  line-height: 1.35;
  padding: 10px 14px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  max-width: min(92vw, 320px);
  width: max-content;
  white-space: normal;
  text-align: center;
  word-break: break-word;
  box-sizing: border-box;
}
.sheet-card.pub-detail {
  width: min(100%, 420px);
  max-width: 100%;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  background: var(--surface);
  border-radius: 28px 28px 18px 18px;
  padding: 16px;
  padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(17,17,17,0.22);
  box-sizing: border-box;
  min-width: 0;
}
.sheet-card.pub-post {
  padding: 0;
  padding-bottom: max(18px, env(safe-area-inset-bottom, 0px));
  gap: 0;
  background: var(--surface) !important;
  background-image: none !important;
  color: var(--heading);
}
.sheet-card.pub-post .pub-title,
.sheet-card.pub-post .pub-article .pub-title {
  color: var(--heading) !important;
}
.sheet-card.pub-post .pub-text,
.sheet-card.pub-post .pub-article .pub-text,
.sheet-card.pub-post .pub-stats,
.sheet-card.pub-post .live-stats,
.sheet-card.pub-post .meta {
  color: var(--text) !important;
}
.pub-sheet-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px 10px;
  position: sticky;
  top: 0;
  z-index: 4;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(10px);
}
.pub-room-chip {
  display: inline-flex;
  align-items: center;
  max-width: 58%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: 999px;
  background: #111;
  color: var(--lime);
  font-size: 10px;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pub-cover {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--surface-muted);
  overflow: hidden;
}
.pub-cover img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(70dvh, 560px);
  object-fit: contain;
  object-position: center;
}
.pub-article {
  display: grid;
  gap: 12px;
  padding: 16px 16px 8px;
  min-width: 0;
}
.pub-article .pub-title {
  color: var(--heading);
}
.pub-article .pub-text {
  color: var(--text);
}
.pub-author-go {
  flex: 0 0 auto;
  padding: 8px 12px !important;
  min-height: 36px;
  font-size: 12px;
}
.pub-comments {
  margin: 8px 16px 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface-muted);
  border-top: 1px solid #eceff2;
}
.pub-comments-empty {
  margin: 0;
  padding: 8px 0 4px;
}
.pub-detail .pub-boost-bar {
  margin: 8px 16px 0;
}
.pub-detail .pub-manage {
  margin: 8px 16px 0;
}
.pub-detail .pub-hint {
  margin: 8px 16px 0;
  padding: 0;
}
.sheet-card.pub-detail.bg-grid {
  background-color: #fbfcfa;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(184,255,60,0.16), transparent 34%),
    linear-gradient(#e7ebe7 1px, transparent 1px),
    linear-gradient(90deg, #e7ebe7 1px, transparent 1px);
  background-size: auto, 18px 18px, 18px 18px;
}
.sheet-card.pub-detail.bg-aurora {
  background:
    radial-gradient(circle at 18% 20%, rgba(184,255,60,0.28), transparent 36%),
    radial-gradient(circle at 82% 12%, rgba(125,211,252,0.32), transparent 34%),
    radial-gradient(circle at 70% 88%, rgba(192,132,252,0.22), transparent 40%),
    linear-gradient(135deg, #f7fee7, #e0f2fe 45%, #fae8ff);
  border-color: transparent;
}
.sheet-card.pub-detail.bg-carbon {
  color: #fff;
  border-color: #1c1c1c;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.06) 0%, transparent 35%, rgba(255,255,255,0.03) 70%, transparent 100%),
    repeating-linear-gradient(45deg, #141414 0 2px, #101010 2px 4px),
    #0d0d0d;
}
.sheet-card.pub-detail.bg-velvet {
  color: #f8eef5;
  border-color: #3b1028;
  background:
    radial-gradient(circle at 20% 15%, rgba(244,114,182,0.28), transparent 38%),
    radial-gradient(circle at 85% 80%, rgba(124,58,237,0.22), transparent 42%),
    linear-gradient(160deg, #2a0b1c, #140812 55%, #1a0f24);
}
.sheet-card.pub-detail.bg-mist {
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.85), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(186,230,253,0.45), transparent 45%),
    linear-gradient(180deg, #eef2f6, #dfe7ef);
  border-color: rgba(148,163,184,0.35);
}
.sheet-card.pub-detail.bg-sunset {
  background:
    radial-gradient(circle at 15% 10%, rgba(253,224,71,0.45), transparent 36%),
    radial-gradient(circle at 80% 20%, rgba(251,146,60,0.4), transparent 40%),
    radial-gradient(circle at 60% 90%, rgba(244,63,94,0.28), transparent 42%),
    linear-gradient(145deg, #fff7ed, #ffedd5 45%, #fecdd3);
  border-color: transparent;
}
.sheet-card.pub-detail.bg-ocean {
  color: #e8f4ff;
  border-color: #0c4a6e;
  background:
    radial-gradient(circle at 18% 20%, rgba(56,189,248,0.35), transparent 38%),
    radial-gradient(circle at 85% 75%, rgba(14,165,233,0.28), transparent 42%),
    linear-gradient(160deg, #082f49, #0c4a6e 50%, #075985);
}
.sheet-card.pub-detail.bg-carbon .pub-title,
.sheet-card.pub-detail.bg-carbon .pub-text,
.sheet-card.pub-detail.bg-carbon .meta,
.sheet-card.pub-detail.bg-carbon .live-room,
.sheet-card.pub-detail.bg-carbon .live-stats,
.sheet-card.pub-detail.bg-velvet .pub-title,
.sheet-card.pub-detail.bg-velvet .pub-text,
.sheet-card.pub-detail.bg-velvet .meta,
.sheet-card.pub-detail.bg-velvet .live-room,
.sheet-card.pub-detail.bg-velvet .live-stats,
.sheet-card.pub-detail.bg-ocean .pub-title,
.sheet-card.pub-detail.bg-ocean .pub-text,
.sheet-card.pub-detail.bg-ocean .meta,
.sheet-card.pub-detail.bg-ocean .live-room,
.sheet-card.pub-detail.bg-ocean .live-stats,
.sheet-card.pub-detail.bg-plasma .pub-title,
.sheet-card.pub-detail.bg-plasma .pub-text,
.sheet-card.pub-detail.bg-plasma .meta,
.sheet-card.pub-detail.bg-plasma .live-room,
.sheet-card.pub-detail.bg-plasma .live-stats,
.sheet-card.pub-detail.bg-nebula .pub-title,
.sheet-card.pub-detail.bg-nebula .pub-text,
.sheet-card.pub-detail.bg-nebula .meta,
.sheet-card.pub-detail.bg-nebula .live-room,
.sheet-card.pub-detail.bg-nebula .live-stats,
.sheet-card.pub-detail.bg-circuit .pub-title,
.sheet-card.pub-detail.bg-circuit .pub-text,
.sheet-card.pub-detail.bg-circuit .meta,
.sheet-card.pub-detail.bg-circuit .live-room,
.sheet-card.pub-detail.bg-circuit .live-stats { color: #e8eaed; }
.sheet-card.pub-detail.bg-carbon .ghost,
.sheet-card.pub-detail.bg-velvet .ghost,
.sheet-card.pub-detail.bg-ocean .ghost,
.sheet-card.pub-detail.bg-plasma .ghost,
.sheet-card.pub-detail.bg-nebula .ghost,
.sheet-card.pub-detail.bg-circuit .ghost,
.sheet-card.pub-detail.bg-custom .ghost {
  background: #111;
  color: #fff;
  border-color: #2a2a2a;
  box-shadow: 0 0 0 1px #111;
  opacity: 1;
}
.pub-sheet-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px 10px;
  position: sticky;
  top: 0;
  z-index: 4;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(10px);
}
.pub-author-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 18px;
  background: var(--soft-fill);
}
.pub-detail.bg-carbon .pub-author-row,
.pub-detail.bg-velvet .pub-author-row,
.pub-detail.bg-ocean .pub-author-row { background: rgba(255,255,255,0.06); }
.pub-detail.bg-aurora .pub-author-row,
.pub-detail.bg-grid .pub-author-row,
.pub-detail.bg-mist .pub-author-row,
.pub-detail.bg-sunset .pub-author-row { background: color-mix(in srgb, var(--surface) 55%, transparent); }
.pub-author-row > [data-open-profile] {
  flex: 0 0 auto;
  position: relative;
  z-index: 3;
  pointer-events: auto;
}
.pub-actions .is-saved {
  background: #111;
  color: var(--lime);
}
.pub-comments {
  display: grid;
  gap: 10px;
  margin: 8px 16px 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface-muted);
}
.pub-comments strong {
  font-size: 14px;
  color: var(--heading);
}
.pub-comment-list { display: grid; gap: 8px; }
.pub-comment {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 10px 12px;
  display: grid;
  gap: 6px;
}
.pub-comment.is-deleted {
  background: transparent;
  border: 1px dashed rgba(17,17,17,0.14);
}
.pub-comment-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.pub-comment-top b { font-size: 11px; color: var(--hint); font-weight: 700; }
.pub-comment p { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.pub-comment-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pub-comment-actions .icon-btn {
  padding: 6px 10px;
  font-size: 12px;
}
.pub-comment-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}
.pub-comment-form input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 11px 12px;
  font: inherit;
  font-size: 15px;
  background: var(--surface);
  color: var(--heading);
}
.pub-comment-form .primary {
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 14px;
  white-space: nowrap;
}
#confirm-modal.sheet {
  z-index: 60;
}
#confirm-modal.sheet.is-open,
#confirm-modal.sheet:not([hidden]) { display: flex !important; }
.confirm-sheet {
  width: min(100%, 420px);
  display: grid;
  gap: 12px;
}
.confirm-sheet .admin-search { margin: 0; }
.confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.confirm-actions button { width: 100%; }
.filter-chip .icon-svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}
.pub-author-row .msg-author {
  min-width: 0;
  flex: 1 1 auto;
  align-items: center;
  line-height: 1;
}
.pub-author-row .ava-ring {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  box-sizing: border-box;
  padding: 2px;
  border-radius: 14px;
  flex: 0 0 40px;
  transform: none !important;
  align-self: center;
  line-height: 0;
}
.pub-author-row .ava-ring.frame-none {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
  padding: 0;
}
.pub-author-row .ava-ring .msg-ava,
.pub-author-row .ava-ring .msg-ava.msg-ava-md {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px;
  min-height: 36px;
  max-width: 36px;
  max-height: 36px;
  border-radius: 12px;
  object-fit: cover;
  flex: none;
  aspect-ratio: 1 / 1;
}
.pub-title {
  margin: 0;
  font-size: 22px;
  letter-spacing: -0.045em;
  line-height: 1.18;
  color: var(--heading);
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}
.pub-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}
.pub-link {
  color: #5a8a00;
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 3px;
  word-break: break-all;
}
.sheet-card.pub-detail.bg-custom .pub-title {
  color: #f8fafc;
}
.sheet-card.pub-detail.bg-custom .pub-text,
.sheet-card.pub-detail.bg-custom .pub-hint,
.sheet-card.pub-detail.bg-custom .live-stats,
.sheet-card.pub-detail.bg-custom .live-room {
  color: rgba(248, 250, 252, 0.9);
}
.sheet-card.pub-detail.bg-custom .pub-link {
  color: var(--bg-accent, #b8ff3c);
}
.sheet-card.pub-detail.bg-custom[data-bg-light="0"] .pub-title {
  color: var(--heading);
}
.sheet-card.pub-detail.bg-custom[data-bg-light="0"] .pub-text,
.sheet-card.pub-detail.bg-custom[data-bg-light="0"] .pub-hint,
.sheet-card.pub-detail.bg-custom[data-bg-light="0"] .live-stats,
.sheet-card.pub-detail.bg-custom[data-bg-light="0"] .live-room {
  color: #2a2f36;
}
.sheet-card.pub-detail.bg-custom[data-bg-light="0"] .pub-link {
  color: #3f7d00;
}
.sheet-card.pub-detail.bg-custom[data-bg-light="1"] .pub-title {
  color: #f8fafc;
}
.sheet-card.pub-detail.bg-custom[data-bg-light="1"] .pub-text,
.sheet-card.pub-detail.bg-custom[data-bg-light="1"] .pub-hint,
.sheet-card.pub-detail.bg-custom[data-bg-light="1"] .live-stats,
.sheet-card.pub-detail.bg-custom[data-bg-light="1"] .live-room {
  color: rgba(248, 250, 252, 0.92);
}
.sheet-card.pub-detail.bg-custom[data-bg-light="1"] .pub-link {
  color: var(--bg-accent, #b8ff3c);
}
.pub-detail.bg-carbon .pub-text,
.pub-detail.bg-velvet .pub-text,
.pub-detail.bg-ocean .pub-text { color: #e8eaed; }
.pub-stats { margin-top: 0; }
.pub-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  isolation: isolate;
  position: relative;
  z-index: 2;
}
.pub-actions.is-owner {
  grid-template-columns: 1fr 1fr;
}
.pub-actions.is-owner .primary {
  grid-column: auto;
}
.pub-actions button {
  width: 100%;
  min-height: 46px;
  min-width: 0;
  max-width: 100%;
  border-radius: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  justify-content: center;
}
.pub-actions .danger { grid-column: 1 / -1; }
.pub-actions .primary.is-liked {
  background: #111;
  color: var(--lime);
}
.pub-manage {
  margin-top: 4px;
}
.pub-manage .sheet-form {
  gap: 10px;
}
.boost-picker {
  display: grid;
  gap: 12px;
}
.boost-picker .sheet-form {
  gap: 10px;
}
.pin-dest {
  width: min(100%, 420px);
  max-width: 100%;
  max-height: min(88vh, 720px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  padding-bottom: max(14px, env(safe-area-inset-bottom, 0px));
}
.pin-dest-main {
  display: grid;
  gap: 8px;
  flex: 0 0 auto;
}
.pin-dest-rooms {
  display: grid;
  gap: 8px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 2px;
  margin: 0 -2px;
}
.pin-dest-list {
  display: grid;
  gap: 8px;
}
.pin-dest-list button,
.pin-dest-main button,
.pin-dest-rooms button {
  width: 100%;
  min-height: 46px;
  border-radius: 16px;
  text-align: left;
  justify-content: flex-start;
}
.pin-dest-list button.is-on,
.pin-dest-rooms button.is-on {
  background: #111;
  color: var(--lime);
}
#pub-modal.is-open:has(.pin-dest) {
  overflow: auto;
  align-items: flex-end;
}
.pub-hint { margin: 0; }
.pub-media {
  display: grid;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}
.pub-media-img {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: var(--surface-muted);
  box-sizing: border-box;
}
.pub-media-img img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(70dvh, 560px);
  object-fit: contain;
  object-position: center;
  background: transparent;
}
.pub-media-video {
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: min(70dvh, 680px);
  aspect-ratio: 16 / 9;
  border-radius: 22px;
  overflow: hidden;
  background: #111;
  box-sizing: border-box;
  object-fit: contain;
  object-position: center;
}
.sheet-card.pub-detail.bg-custom,
.sheet-card.pub-detail.bg-plasma,
.sheet-card.pub-detail.bg-nebula,
.sheet-card.pub-detail.bg-circuit {
  overflow-x: hidden;
  overflow-y: auto;
}
.sheet-card.pub-detail.bg-custom::after {
  inset: 0;
}
.sheet-card.pub-detail {
  position: relative;
  isolation: isolate;
}
.pub-bg-fill {
  display: none;
}
.sheet-card.pub-detail[class*="bg-"] > .pub-bg-fill {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background: inherit;
}
.sheet-card.pub-detail > *:not(.pub-bg-fill):not(.sheet-bg-fill) {
  position: relative;
  z-index: 1;
}
.sheet-card.pub-detail.bg-custom:not(.user-profile-sheet) {
  background-color: var(--bg-c1, #0f172a) !important;
  background-image: linear-gradient(160deg, var(--bg-c1, #0f172a), var(--bg-c2, #1e293b)) !important;
}
.sheet-card.pub-detail.bg-custom[data-bg-image="1"]:not(.user-profile-sheet),
.sheet-card.pub-detail.bg-custom[data-bg-mode="image"]:not(.user-profile-sheet),
.sheet-card.pub-detail.bg-custom[data-bg-mode="kenburns"]:not(.user-profile-sheet) {
  background-color: #07080a !important;
  background-image:
    linear-gradient(180deg, rgba(6, 7, 10, 0.46) 0%, rgba(6, 7, 10, 0.62) 48%, rgba(6, 7, 10, 0.78) 100%),
    var(--bg-image) !important;
  background-size: cover, cover !important;
  background-position: center, center !important;
  background-repeat: no-repeat !important;
  animation: none !important;
}

/* Opened publication: always white card, black text */
.sheet-card.pub-post,
.sheet-card.pub-post.is-bg-dark,
.sheet-card.pub-post.is-bg-light,
.sheet-card.pub-post[class*="bg-"] {
  background: var(--surface) !important;
  background-image: none !important;
  color: var(--heading);
}
.sheet-card.pub-detail.bg-custom:not(.user-profile-sheet),
.sheet-card.pub-detail.bg-carbon,
.sheet-card.pub-detail.bg-velvet,
.sheet-card.pub-detail.bg-ocean,
.sheet-card.pub-detail.bg-plasma,
.sheet-card.pub-detail.bg-nebula,
.sheet-card.pub-detail.bg-circuit {
  background-color: #0c1018;
}
.sheet-card.pub-detail.bg-grid,
.sheet-card.pub-detail.bg-aurora,
.sheet-card.pub-detail.bg-mist,
.sheet-card.pub-detail.bg-sunset {
  background-color: #f3f5f7;
}
.sheet-card.pub-detail.bg-plasma::before,
.sheet-card.pub-detail.bg-plasma::after,
.sheet-card.pub-detail.bg-nebula::before,
.sheet-card.pub-detail.bg-nebula::after,
.sheet-card.pub-detail.bg-circuit::before,
.sheet-card.pub-detail.bg-circuit::after,
.sheet-card.pub-detail.bg-custom::before,
.sheet-card.pub-detail.bg-custom::after {
  inset: 0 !important;
}
.sheet-card.pub-detail.is-bg-dark .pub-title,
.sheet-card.pub-detail.is-bg-dark .pub-text,
.sheet-card.pub-detail.is-bg-dark .meta,
.sheet-card.pub-detail.is-bg-dark .live-room,
.sheet-card.pub-detail.is-bg-dark .live-stats,
.sheet-card.pub-detail.is-bg-dark .pub-hint,
.sheet-card.pub-detail.is-bg-dark .pub-comments strong,
.sheet-card.pub-detail.is-bg-dark .pub-comment p,
.sheet-card.pub-detail.is-bg-dark .pub-raised-once {
  color: #e8eaed;
}
.sheet-card.pub-detail.is-bg-light .pub-title,
.sheet-card.pub-detail.is-bg-light .pub-text,
.sheet-card.pub-detail.is-bg-light .meta,
.sheet-card.pub-detail.is-bg-light .live-room,
.sheet-card.pub-detail.is-bg-light .live-stats,
.sheet-card.pub-detail.is-bg-light .pub-hint {
  color: var(--text);
}
.sheet-card.pub-detail.is-bg-dark .pub-author-row,
.sheet-card.pub-detail.is-bg-dark .pub-comments,
.sheet-card.pub-detail.is-bg-dark .pub-manage .sheet-form {
  background: rgba(8, 8, 8, 0.55);
  border-color: rgba(255, 255, 255, 0.1);
  color: #f4f6f8;
}
.sheet-card.pub-detail.is-bg-light .pub-author-row,
.sheet-card.pub-detail.is-bg-light .pub-comments {
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}
.sheet-card.pub-detail.is-bg-dark .pub-comment {
  background: rgba(255, 255, 255, 0.08);
}
.sheet-card.pub-detail.is-bg-light .pub-comment {
  background: var(--soft-fill);
}
.sheet-card.pub-detail.is-bg-dark .pub-comment-form input,
.sheet-card.pub-detail.is-bg-light .pub-comment-form input {
  background: var(--surface);
  color: var(--heading);
}
.sheet-card.pub-detail.is-bg-dark .pub-comments {
  border-top: 0;
  padding: 12px;
  border-radius: 18px;
}
.sheet-card.pub-detail.is-bg-dark .pub-link {
  color: var(--lime);
}
.sheet-card.pub-detail.is-bg-light .pub-link {
  color: #3f7d00;
}
.sheet-card.pub-detail.is-bg-dark .ghost {
  background: #111;
  color: #fff;
  border-color: #2a2a2a;
}
.sheet-card.pub-detail.is-bg-light .ghost {
  background: var(--surface);
  color: var(--heading);
}

/* Feed cards stay white with black text — author backgrounds apply only in opened posts */
.live-card,
.live-card[class*="bg-"],
.live-card.is-bg-dark,
.live-card.is-bg-light,
.live-card.bg-custom {
  background: var(--surface) !important;
  background-image: none !important;
  color: var(--heading);
}
.live-card .live-body h3,
.live-card .live-stats b,
.live-card .nick-plain .msg-nick {
  color: var(--heading);
}
.live-card .live-body p {
  color: var(--text);
}
.live-card .live-room,
.live-card .live-stats,
.live-card .pub-raised-once,
.live-card .live-raised {
  color: var(--hint);
}
.live-card .pub-bg-fill {
  display: none !important;
}
.sheet-card.pub-detail.is-bg-dark .nick-plain .msg-nick,
.sheet-card.pub-detail.is-bg-dark .pub-comment .msg-nick {
  color: #fff;
}

.pub-detail .pub-service-pack,
.pub-detail .pub-boost-bar,
.pub-detail .status-pack,
.pub-detail .pub-actions,
.pub-detail .pub-manage,
.pub-detail .sheet-form {
  min-width: 0;
  max-width: 100%;
}
.pub-detail .status-row {
  grid-template-columns: 44px minmax(0, 1fr) auto;
  max-width: 100%;
}
.pub-detail .status-info {
  min-width: 0;
}
.pub-detail .status-name,
.pub-detail .status-priv {
  overflow-wrap: anywhere;
  word-break: break-word;
}
@media (max-width: 420px) {
  #pub-modal.is-open {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    align-items: flex-end;
  }
  .sheet-card.pub-detail {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    border-radius: 24px 24px 0 0;
  }
}
.msg-ava.msg-ava-md,
.ava-ring .msg-ava.msg-ava-md {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px;
  min-height: 36px;
  max-width: 36px;
  max-height: 36px;
  border-radius: 12px;
  font-size: 14px;
}
.ava-ring:has(.msg-ava-md) { border-radius: 14px; }
.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: color-mix(in srgb, var(--bg) 97%, transparent);
  display: grid;
  place-items: center;
  padding: 20px;
}
.auth-gate[hidden] { display: none !important; }
.sub-gate,
.pin-gate {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--bg);
  display: grid;
  place-items: center;
  padding: 24px;
}
.sub-gate { z-index: 90; }
.sub-gate[hidden],
.pin-gate[hidden] { display: none !important; }
.sub-card {
  width: min(100%, 360px);
  background: var(--surface);
  border: 3px solid var(--ghost-ring);
  border-radius: 28px;
  padding: 28px 22px 22px;
  text-align: center;
  box-shadow: 8px 8px 0 var(--ghost-ring);
  display: grid;
  gap: 12px;
  color: var(--text);
}
.sub-card .eyebrow {
  letter-spacing: 0.18em;
  font-size: 12px;
  color: var(--heading);
  margin: 0;
}
.sub-card h2 {
  margin: 0;
  font-size: 30px;
  letter-spacing: -0.04em;
}
.sub-card .meta {
  margin: 0;
  color: var(--hint);
  font-size: 16px;
}
.sub-card .sub-open,
.sub-card .primary {
  display: block;
  text-decoration: none;
  text-align: center;
  padding: 14px 16px;
  border-radius: 16px;
  background: #b8ff3c;
  color: #111;
  border: 2px solid var(--ghost-ring);
  font-weight: 800;
}
.sub-card .ghost {
  padding: 14px 16px;
  border-radius: 16px;
  border: 2px solid var(--ghost-ring);
  background: #101216;
  color: #fff;
  font-weight: 700;
}
.pin-card {
  width: min(100%, 360px);
  background: var(--surface);
  border: 3px solid var(--ghost-ring);
  border-radius: 28px;
  padding: 28px 22px 22px;
  text-align: center;
  box-shadow: 8px 8px 0 var(--ghost-ring);
  color: var(--text);
}
.pin-card .eyebrow {
  letter-spacing: 0.18em;
  font-size: 12px;
  color: var(--heading);
  margin: 0 0 10px;
}
.pin-card h2 {
  margin: 0;
  font-size: 32px;
  letter-spacing: -0.04em;
}
.pin-card .meta {
  margin: 8px 0 0;
  color: var(--hint);
  font-size: 16px;
}
.pin-dots {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 22px 0 10px;
}
.pin-dots span {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--ghost-ring);
  background: transparent;
}
.pin-dots span.is-on {
  background: #b8ff3c;
  box-shadow: 0 0 0 3px rgba(184,255,60,0.25);
}
.pin-error {
  color: #e11d48;
  font-size: 14px;
  min-height: 20px;
  margin: 0 0 8px;
}
.pin-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 8px;
}
.pin-pad button {
  height: 58px;
  border: 2px solid var(--ghost-ring);
  border-radius: 16px;
  background: #101216;
  color: #b8ff3c;
  font-size: 24px;
  font-weight: 700;
}
.pin-pad button:active {
  background: #b8ff3c;
  color: #111;
}
.auth-card {
  width: min(100%, 360px);
  background: var(--surface);
  border-radius: 24px;
  padding: 22px;
  border: 1px solid var(--ghost-ring);
  text-align: center;
  color: var(--text);
}
.tg-login { margin: 16px 0; min-height: 40px; }
.auth-brand h2 { margin: 2px 0 4px; font-size: 28px; letter-spacing: -0.04em; }
.auth-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin: 18px 0 14px;
  padding: 5px;
  border-radius: 15px;
  background: #111;
}
.auth-tabs button {
  min-width: 0;
  border: 0;
  border-radius: 11px;
  padding: 9px 5px;
  background: #202020;
  color: #d5d7da;
  font: 800 11px/1 Outfit, sans-serif;
}
.auth-tabs button.is-on { background: var(--lime); color: #111; }
.auth-form { display: grid; gap: 10px; text-align: left; }
.auth-form label {
  display: grid;
  gap: 5px;
  color: var(--hint);
  font-size: 12px;
  font-weight: 700;
}
.auth-form input {
  width: 100%;
  min-height: 46px;
  border: 1px solid #d8dce1;
  border-radius: 13px;
  padding: 0 13px;
  background: var(--surface-muted);
  color: var(--heading);
  font: 600 15px Outfit, sans-serif;
}
.auth-form input:focus { outline: 2px solid var(--lime); border-color: var(--ghost-ring); }
.auth-form .primary,
.auth-telegram .primary { width: 100%; min-height: 46px; border-radius: 13px; }
.auth-error {
  margin: 12px 0 0;
  border-radius: 12px;
  padding: 9px 10px;
  background: #fee2e2;
  color: #991b1b;
  font-size: 12px;
  font-weight: 700;
}
.auth-2fa-note {
  margin: 14px 0 0;
  color: var(--hint);
  font-size: 11px;
  line-height: 1.35;
}
.auth-telegram { padding-top: 2px; }
.account-security-box { margin-top: 12px; }
.account-logout-btn { width: 100%; margin-top: 10px; min-height: 44px; }

.pc-logout {
  height: 42px;
  padding: 0 14px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: var(--hint);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.pc-logout:hover {
  background: var(--soft-fill);
  color: var(--heading);
}
.profile-hero-actions {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
.profile-logout-btn {
  width: 100%;
  min-height: 42px;
  border-radius: 14px;
  font-weight: 800;
  color: #b42318;
  border-color: rgba(180,35,24,0.2);
}
.profile-logout-btn:hover {
  background: rgba(180,35,24,0.08);
}
@media (min-width: 900px) {
  .profile-hero-actions {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
}


/* Desktop forum layout */
.pc-topbar,
.pc-side { display: none; }

@media (min-width: 900px) {
  :root { --tab: 0px; --pc-top: 66px; --pc-max: 1280px; --pc-gutter: max(24px, calc((100% - var(--pc-max)) / 2)); }
  body { background: var(--bg); }
  .app {
    width: 100%;
    max-width: none;
    border: 0;
    box-shadow: none;
    background: var(--app-gradient);
  }
  .app::before { mask-image: radial-gradient(circle at 50% 0%, #000 10%, transparent 70%); }
  .hud-top { display: none; }

  .pc-topbar {
    display: flex;
    align-items: center;
    gap: 18px;
    position: absolute;
    z-index: 6;
    top: 0;
    left: 0;
    right: 0;
    height: var(--pc-top);
    padding: 0 var(--pc-gutter);
    background: color-mix(in srgb, var(--surface) 84%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    backdrop-filter: blur(18px) saturate(1.4);
    border-bottom: 1px solid var(--soft-line);
  }
  .pc-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
    cursor: pointer;
    user-select: none;
  }
  .pc-brand img {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 0 0 2px #111;
  }
  .pc-brand span {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.05em;
    color: var(--heading);
  }
  .pc-brand em {
    font-style: normal;
    background: var(--lime);
    padding: 1px 7px;
    border-radius: 8px;
    margin-left: 2px;
  }

  .tabbar,
  .tabbar.is-admin {
    position: static;
    inset: auto;
    width: auto;
    height: 42px;
    padding: 0;
    display: flex;
    gap: 4px;
    background: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .tabbar button {
    flex-direction: row;
    gap: 8px;
    height: 42px;
    padding: 0 16px;
    border-radius: 13px;
    background: transparent;
    color: #444b55;
  }
  .tabbar button.is-on {
    background: #111;
    color: var(--lime);
    box-shadow: none;
  }
  .tabbar button:not(.is-on):hover { background: var(--soft-fill); }
  .tabbar .tab-ico { width: 18px; height: 18px; }
  .tabbar button:not(.is-on) .tab-ico { opacity: 0.8; }
  .tabbar .tab-label,
  .tabbar.is-admin .tab-label { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }

  .pc-search {
    flex: 1 1 auto;
    max-width: 380px;
    margin-left: auto;
  }
  .pc-search input {
    width: 100%;
    height: 42px;
    padding: 0 16px 0 40px;
    border-radius: 13px;
    border: 1px solid var(--soft-line);
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 14px center no-repeat,
      var(--surface-muted);
    font: inherit;
    font-size: 14px;
    color: var(--heading);
  }
  .pc-search input:focus {
    outline: none;
    background-color: var(--input-bg);
    border-color: var(--lime);
    box-shadow: 0 0 0 4px rgba(184,255,60,0.35);
  }
  .pc-account {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
  }
  .pc-new-topic {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 42px;
    padding: 0 16px;
    border: 0;
    border-radius: 13px;
    background: var(--lime);
    color: #111;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(142,240,30,0.35);
  }
  .pc-new-topic .icon-svg { width: 16px; height: 16px; }
  .pc-me {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 12px 0 4px;
    border-radius: 14px;
    cursor: pointer;
    max-width: 200px;
  }
  .pc-me:hover { background: var(--soft-fill); }
  .pc-me-ava {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 11px;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: #111;
    color: var(--lime);
    font-weight: 800;
  }
  .pc-me-ava img { width: 100%; height: 100%; object-fit: cover; }
  .pc-me-name {
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .view {
    height: 100%;
    padding: calc(var(--pc-top) + 24px) var(--pc-gutter) 40px;
  }
  .view-chat.is-active { padding-bottom: 24px; }

  .pc-side { display: block; min-width: 0; }
  .pc-side-inner {
    position: sticky;
    top: calc(var(--pc-top) + 16px);
    display: grid;
    gap: 14px;
  }
  .pc-card {
    background: var(--surface);
    border: 1px solid #e8ebee;
    border-radius: 20px;
    padding: 16px;
    box-shadow: 0 8px 24px rgba(17,17,17,0.04);
  }
  .pc-card h3 {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.02em;
  }
  .pc-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
  }
  .pc-link {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    color: #4d7d00;
    cursor: pointer;
  }
  .pc-link:hover { text-decoration: underline; }
  .pc-cta {
    background: #111;
    color: #fff;
    border-color: var(--ghost-ring);
  }
  .pc-cta strong { display: block; font-size: 17px; letter-spacing: -0.02em; }
  .pc-cta p { margin: 6px 0 12px; font-size: 13px; color: rgba(255,255,255,0.7); line-height: 1.4; }
  .pc-cta .primary { width: 100%; min-height: 42px; }
  .pc-rooms { display: grid; gap: 2px; }
  .pc-room {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 38px;
    padding: 6px 12px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #2b3038;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
  }
  .pc-room:hover { background: var(--surface-muted); }
  .pc-room.is-on { background: #111; color: #fff; }
  .pc-room-ico { display: none !important; }
  .pc-chat-line {
    display: grid;
    gap: 2px;
    padding: 8px 0;
    border-top: 1px solid #f0f2f4;
    font-size: 13px;
    line-height: 1.35;
  }
  .pc-chat-line:first-of-type { border-top: 0; padding-top: 0; }
  .pc-chat-line b { font-size: 12px; font-weight: 800; }
  .pc-chat-line span { color: #4b5260; overflow-wrap: anywhere; }
  .pc-topic {
    display: grid;
    gap: 4px;
    padding: 10px;
    margin: 0 -10px;
    width: calc(100% + 20px);
    border: 0;
    border-radius: 12px;
    background: none;
    text-align: left;
    font: inherit;
    cursor: pointer;
  }
  .pc-topic:hover { background: var(--surface-muted); }
  .pc-topic b { font-size: 14px; line-height: 1.3; color: var(--heading); }
  .pc-topic span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--hint);
    font-family: "IBM Plex Mono", monospace;
  }
  .pc-side-empty { margin: 0; font-size: 13px; color: var(--hint); }
  .pc-about p { margin: 0 0 10px; font-size: 13px; color: #4b5260; line-height: 1.4; }
  .pc-about-links { display: flex; gap: 8px; }
  .pc-about-links a {
    padding: 7px 12px;
    border-radius: 10px;
    background: var(--surface-muted);
    color: var(--heading);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
  }
  .pc-about-links a:hover { background: var(--lime); }

  #view-sections.is-active {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    grid-template-rows: repeat(7, auto) 1fr;
    column-gap: 26px;
    align-content: start;
  }
  #view-sections > :not(.pc-side) { grid-column: 1; min-width: 0; }
  #view-sections > .brand-wrap { display: none; }
  #view-sections > .pc-side { grid-column: 2; grid-row: 1 / -1; }
  .feed-fab.feed-fab { display: none; }

  .live-feed {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .live-feed > .live-card.is-text { min-height: 0; }
  .live-card.is-text .live-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 24px;
    padding: 16px 20px;
  }
  .live-card.is-text .live-body > * { grid-column: 1; }
  .live-card.is-text .live-body h3 { font-size: 18px; margin-top: 8px; }
  .live-card.is-text .live-body p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #4b5260;
  }
  .live-card.is-text .live-stats {
    grid-column: 2;
    grid-row: 1 / span 4;
    margin-top: 0;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: center;
    gap: 8px;
    min-width: 120px;
  }
  .live-card.is-text .live-stats b { margin-left: 0; }

  #feed {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
  }
  #feed > .feed-ad,
  #feed > .empty { grid-column: 1 / -1; }

  .view-chat.is-active {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    grid-template-rows: auto minmax(0, 1fr) auto;
    column-gap: 26px;
  }
  .view-chat > .chat-head { grid-column: 1; grid-row: 1; }
  .view-chat > .messages {
    grid-column: 1;
    grid-row: 2;
    padding: 18px 20px;
    background: color-mix(in srgb, var(--surface) 70%, transparent);
    border: 1px solid var(--line);
    border-radius: 22px;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .view-chat > .composer-wrap { grid-column: 1; grid-row: 3; margin-top: 12px; }
  .view-chat > .pc-side {
    grid-column: 2;
    grid-row: 1 / 4;
    overflow: auto;
    min-height: 0;
  }
  #to-sections { display: none; }

  .carousel { min-height: 300px; }
  .ad-hero { min-height: 250px; }
  .ad-hero-inner { min-height: 218px; }
  #view-profile .profile {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
  }
  #view-profile .profile-hero,
  #view-profile .profile-actions { grid-column: 1; }
  #view-profile .profile-main {
    grid-column: 2;
    grid-row: 1 / span 6;
  }
  .hub-body { padding-bottom: 30px; }
  .sheet-card.pub-detail { width: min(760px, 100%); }
  .user-profile-sheet { width: min(720px, 100%); }
  .auth-card {
    width: min(100%, 460px);
    padding: 30px;
    border-radius: 28px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.24);
  }
}

@media (min-width: 900px) and (max-width: 1180px) {
  .pc-search { display: block; max-width: 240px; }
  .pc-me-name { display: none; }
  .pc-logout { display: none; }
  #view-sections.is-active,
  .view-chat.is-active { grid-template-columns: minmax(0, 1fr) 280px; column-gap: 18px; }
}
.user-profile-sheet {
  width: min(100%, 420px);
  max-width: 100%;
  max-height: 85vh;
  overflow-x: hidden;
  overflow-y: auto;
  display: grid;
  gap: 12px;
  min-width: 0;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.user-profile-sheet > * {
  min-width: 0;
  max-width: 100%;
}
/* phone: bottom sheet so profile fits Telegram viewport */
@media (max-width: 520px) {
  #user-modal.sheet,
  #user-modal.sheet.is-open {
    align-items: flex-end;
    justify-content: stretch;
    padding: 0;
    padding-top: calc(10px + var(--safe-top));
  }
  #user-modal .user-profile-sheet {
    width: 100%;
    max-width: none;
    max-height: min(92dvh, calc(100% - 8px));
    margin: 0;
    border-radius: 22px 22px 0 0;
    padding: 14px 14px calc(16px + var(--safe-bot));
    box-sizing: border-box;
  }
  #user-modal .profile-actions {
    grid-template-columns: 1fr;
  }
  #user-modal .profile-select-row {
    grid-template-columns: 1fr;
  }
  #user-modal .profile-hero-name strong,
  #user-modal .profile-hero-name .msg-nick {
    font-size: 18px !important;
  }
}
.user-profile-sheet .user-profile-hero,
.user-profile-sheet .user-profile-wall {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.user-profile-sheet .user-profile-wall {
  display: grid;
  gap: 10px;
}
.user-profile-sheet .wall-post { margin-top: 0; }
.user-profile-sheet .profile-stats {
  margin-top: 4px;
}
.user-profile-sheet.bg-carbon .profile-stat,
.user-profile-sheet.bg-velvet .profile-stat,
.user-profile-sheet.bg-ocean .profile-stat,
.user-profile-sheet.bg-plasma .profile-stat,
.user-profile-sheet.bg-nebula .profile-stat,
.user-profile-sheet.bg-circuit .profile-stat {
  --profile-stat-num: #ffffff;
  --profile-stat-label: rgba(255, 255, 255, 0.78);
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.16);
  color: #fff;
}
.user-profile-sheet.bg-carbon .desk-card,
.user-profile-sheet.bg-velvet .desk-card,
.user-profile-sheet.bg-ocean .desk-card {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.1);
  color: #fff;
}
.user-profile-sheet.bg-aurora .profile-stat,
.user-profile-sheet.bg-grid .profile-stat,
.user-profile-sheet.bg-mist .profile-stat,
.user-profile-sheet.bg-sunset .profile-stat {
  background: color-mix(in srgb, var(--surface) 55%, transparent);
}
.user-profile-sheet .profile-prefix-tools.sheet-form,
.user-profile-sheet .profile-prefix-tools {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 12px;
  box-sizing: border-box;
  overflow: hidden;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  border: 1px solid rgba(17,17,17,0.08);
  border-radius: 18px;
}
.user-profile-sheet .profile-prefix-tools label {
  display: grid;
  gap: 6px;
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
}
.user-profile-sheet .profile-prefix-tools input {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.user-profile-sheet .profile-prefix-tools .profile-select-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  min-width: 0;
}
.user-profile-sheet .profile-prefix-tools .profile-select-row button {
  width: 100%;
  min-width: 0;
  padding: 11px 8px;
  font-size: 13px;
}
.user-profile-sheet.bg-carbon .profile-prefix-tools,
.user-profile-sheet.bg-velvet .profile-prefix-tools,
.user-profile-sheet.bg-ocean .profile-prefix-tools,
.user-profile-sheet.bg-plasma .profile-prefix-tools,
.user-profile-sheet.bg-nebula .profile-prefix-tools,
.user-profile-sheet.bg-circuit .profile-prefix-tools {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.14);
  color: #fff;
}

/* —— premium DM / group chat —— */
.dm-card {
  display: grid;
  grid-template-rows: auto minmax(220px, 52vh) auto;
  gap: 0;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 18px 48px rgba(17,17,17,0.1);
}
.dm-shell {
  display: grid;
  gap: 10px;
  padding: 12px 12px 10px;
  background:
    radial-gradient(circle at 12% 0%, rgba(184,255,60,0.14), transparent 42%),
    linear-gradient(180deg, #f7f8fa, #ffffff);
  border-bottom: 1px solid #eceff2;
}
.dm-toolbar {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}
.dm-back-btn,
.dm-add-btn,
.dm-mod-btn {
  width: 40px !important;
  height: 40px;
  min-height: 40px;
  padding: 0 !important;
  border-radius: 14px !important;
  display: inline-grid !important;
  place-items: center;
  background: #111 !important;
  color: #fff !important;
  border: 0 !important;
}
.dm-mod-btn.is-unban {
  background: var(--lime) !important;
  color: #111 !important;
}
.dm-toolbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.dm-back-btn .icon-svg,
.dm-add-btn .icon-svg,
.dm-mod-btn .icon-svg { width: 18px; height: 18px; }
.dm-faces:empty { display: none; }
.dm-identity { min-width: 0; }
.dm-identity-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.dm-peer-ava {
  border: 0;
  background: transparent;
  padding: 0;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  flex: 0 0 auto;
  line-height: 0;
}
.dm-peer-ava .ava-ring {
  width: 40px;
  height: 40px;
  box-sizing: border-box;
  padding: 2px;
  border-radius: 14px;
  display: inline-grid;
  place-items: center;
  transform: none !important;
}
.dm-peer-ava .ava-ring.frame-none {
  width: 36px;
  height: 36px;
  padding: 0;
}
.dm-peer-ava .ava-ring .msg-ava {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px;
  min-height: 36px;
  max-width: 36px;
  max-height: 36px;
  border-radius: 12px;
  object-fit: cover;
  display: grid !important;
  place-items: center !important;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}
.dm-identity-text {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.dm-identity-text .msg-nick,
.dm-identity-text strong {
  display: block;
  font-size: 16px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
}
.dm-identity-text .meta {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dm-faces {
  display: flex;
  align-items: center;
  gap: 0;
  padding-left: 4px;
  min-height: 34px;
}
.member-face {
  border: 0;
  background: transparent;
  padding: 0;
  margin-left: -6px;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  line-height: 0;
  position: relative;
}
.member-face:first-child { margin-left: 0; }
.member-face .ava-ring {
  width: 30px;
  height: 30px;
  box-sizing: border-box;
  padding: 2px;
  border-radius: 11px;
  display: inline-grid;
  place-items: center;
  transform: none !important;
  box-shadow: 0 0 0 2px #fff;
}
.member-face .ava-ring.frame-none {
  width: 26px;
  height: 26px;
  padding: 0;
  background: #111;
}
.member-face .ava-ring .msg-ava,
.member-face .ava-ring .msg-ava.msg-ava-sm {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px;
  min-height: 26px;
  max-width: 26px;
  max-height: 26px;
  border-radius: 9px;
  font-size: 10px;
  object-fit: cover;
  display: grid !important;
  place-items: center !important;
  line-height: 1;
}
.dm-shell.bg-grid,
.dm-shell.bg-aurora,
.dm-shell.bg-mist,
.dm-shell.bg-sunset {
  color: var(--heading);
  border-bottom-color: transparent;
}
.dm-shell.bg-grid .meta,
.dm-shell.bg-aurora .meta,
.dm-shell.bg-mist .meta,
.dm-shell.bg-sunset .meta {
  color: rgba(17, 17, 17, 0.62) !important;
}
.dm-shell.bg-grid .dm-identity-text.nick-plain .msg-nick,
.dm-shell.bg-aurora .dm-identity-text.nick-plain .msg-nick,
.dm-shell.bg-mist .dm-identity-text.nick-plain .msg-nick,
.dm-shell.bg-sunset .dm-identity-text.nick-plain .msg-nick {
  color: var(--heading) !important;
  -webkit-text-fill-color: #111 !important;
}
.dm-shell.bg-grid .ghost,
.dm-shell.bg-aurora .ghost,
.dm-shell.bg-mist .ghost,
.dm-shell.bg-sunset .ghost {
  background: var(--soft-fill);
  color: var(--heading);
  border-color: rgba(17, 17, 17, 0.1);
}
.dm-shell.bg-grid {
  background-color: #fbfcfa;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(184,255,60,0.16), transparent 34%),
    linear-gradient(#e7ebe7 1px, transparent 1px),
    linear-gradient(90deg, #e7ebe7 1px, transparent 1px);
  background-size: auto, 18px 18px, 18px 18px;
}
.dm-shell.bg-aurora {
  background:
    radial-gradient(circle at 18% 20%, rgba(184,255,60,0.28), transparent 36%),
    radial-gradient(circle at 82% 12%, rgba(125,211,252,0.32), transparent 34%),
    radial-gradient(circle at 70% 88%, rgba(192,132,252,0.22), transparent 40%),
    linear-gradient(135deg, #f7fee7, #e0f2fe 45%, #fae8ff);
}
.dm-shell.bg-carbon {
  color: #fff;
  border-bottom-color: transparent;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.06) 0%, transparent 35%, rgba(255,255,255,0.03) 70%, transparent 100%),
    repeating-linear-gradient(45deg, #141414 0 2px, #101010 2px 4px),
    #0d0d0d;
}
.dm-shell.bg-velvet {
  color: #f8eef5;
  border-bottom-color: transparent;
  background:
    radial-gradient(circle at 20% 15%, rgba(244,114,182,0.28), transparent 38%),
    linear-gradient(160deg, #2a0b1c, #140812 55%, #1a0f24);
}
.dm-shell.bg-mist {
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.85), transparent 40%),
    linear-gradient(180deg, #eef2f6, #dfe7ef);
}
.dm-shell.bg-sunset {
  background:
    radial-gradient(circle at 15% 10%, rgba(253,224,71,0.45), transparent 36%),
    radial-gradient(circle at 80% 20%, rgba(251,146,60,0.4), transparent 40%),
    linear-gradient(145deg, #fff7ed, #ffedd5 45%, #fecdd3);
}
.dm-shell.bg-custom[data-bg-light="0"] {
  color: var(--heading) !important;
}
.dm-shell.bg-custom[data-bg-light="0"] .meta {
  color: rgba(17, 17, 17, 0.68) !important;
}
.dm-shell.bg-custom[data-bg-light="0"] .dm-identity-text.nick-plain .msg-nick {
  color: var(--heading) !important;
  -webkit-text-fill-color: #111 !important;
}
.dm-shell.bg-custom[data-bg-light="0"] .ghost {
  background: var(--soft-fill);
  color: var(--heading);
  border-color: rgba(17, 17, 17, 0.1);
}
.dm-shell.bg-custom[data-bg-light="1"] {
  color: #f8fafc !important;
}
.dm-shell.bg-custom[data-bg-light="1"] .meta {
  color: rgba(248, 250, 252, 0.78) !important;
}
.dm-shell.bg-custom[data-bg-light="1"] .dm-identity-text.nick-plain .msg-nick {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
.dm-shell.bg-custom[data-bg-light="1"] .ghost {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.18);
}
.dm-shell.bg-ocean {
  color: #e8f4ff;
  border-bottom-color: transparent;
  background:
    radial-gradient(circle at 18% 20%, rgba(56,189,248,0.35), transparent 38%),
    linear-gradient(160deg, #082f49, #0c4a6e 50%, #075985);
}
.dm-shell.bg-carbon .meta,
.dm-shell.bg-velvet .meta,
.dm-shell.bg-ocean .meta,
.dm-shell.bg-plasma .meta,
.dm-shell.bg-nebula .meta,
.dm-shell.bg-circuit .meta { color: #aeb4bb; }
.dm-shell.bg-carbon .dm-identity-text .msg-nick,
.dm-shell.bg-velvet .dm-identity-text .msg-nick,
.dm-shell.bg-ocean .dm-identity-text .msg-nick,
.dm-shell.bg-plasma .dm-identity-text .msg-nick,
.dm-shell.bg-nebula .dm-identity-text .msg-nick,
.dm-shell.bg-circuit .dm-identity-text .msg-nick,
.dm-shell.bg-carbon .dm-identity-text.nick-plain .msg-nick,
.dm-shell.bg-velvet .dm-identity-text.nick-plain .msg-nick,
.dm-shell.bg-ocean .dm-identity-text.nick-plain .msg-nick,
.dm-shell.bg-plasma .dm-identity-text.nick-plain .msg-nick,
.dm-shell.bg-nebula .dm-identity-text.nick-plain .msg-nick,
.dm-shell.bg-circuit .dm-identity-text.nick-plain .msg-nick { color: #fff; }
.dm-shell.bg-carbon .ghost,
.dm-shell.bg-velvet .ghost,
.dm-shell.bg-ocean .ghost,
.dm-shell.bg-plasma .ghost,
.dm-shell.bg-nebula .ghost,
.dm-shell.bg-circuit .ghost {
  background: #1c1c1c;
  color: #fff;
  border-color: #2a2a2a;
}
.dm-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.dm-title { min-width: 0; flex: 1; }
.dm-peer-head,
.dm-group-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dm-peer-head .meta,
.dm-group-head .meta { margin-top: 2px; }
.dm-group-head strong {
  display: block;
  font-size: 18px;
  margin: 0;
}
.dm-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  min-height: 0;
  overflow: auto;
  background:
    radial-gradient(circle at 80% 0%, rgba(184,255,60,0.06), transparent 28%),
    linear-gradient(#f3f5f7, #eef1f4);
}
.dm-thread.is-empty {
  place-items: center;
  justify-content: center;
}
.dm-thread .msg {
  max-width: 88%;
  box-shadow: 0 8px 20px rgba(17,17,17,0.06);
}
.dm-thread .msg.in {
  align-self: flex-start;
}
.dm-thread .msg.out {
  align-self: flex-end;
}
.dm-thread .msg.in:not([class*="msg-bg-"]) {
  background: var(--surface);
  color: var(--heading);
  border: 1px solid rgba(17,17,17,0.06);
}
.dm-thread .msg.out:not([class*="msg-bg-"]) {
  background: #111;
  color: #fff;
  border: 1px solid var(--ghost-ring);
}
.dm-thread .msg .who {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  line-height: 1;
}
.dm-thread .msg .who-mine {
  justify-content: flex-end;
}
.dm-thread .msg .who .msg-author {
  align-items: center;
}
.dm-thread .msg .who .ava-ring {
  width: 24px;
  height: 24px;
  box-sizing: border-box;
  padding: 1px;
  border-radius: 8px;
  display: inline-grid;
  place-items: center;
  transform: none !important;
  flex: 0 0 24px;
}
.dm-thread .msg .who .ava-ring.frame-none {
  width: 22px;
  height: 22px;
  padding: 0;
  flex-basis: 22px;
}
.dm-thread .msg .who .ava-ring .msg-ava {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px;
  min-height: 22px;
  max-width: 22px;
  max-height: 22px;
  border-radius: 7px;
  object-fit: cover;
}
.dm-thread .msg.msg-bg-grid,
.dm-thread .msg.msg-bg-aurora,
.dm-thread .msg.msg-bg-carbon,
.dm-thread .msg.msg-bg-velvet,
.dm-thread .msg.msg-bg-mist,
.dm-thread .msg.msg-bg-sunset,
.dm-thread .msg.msg-bg-ocean,
.dm-thread .msg.msg-bg-plasma,
.dm-thread .msg.msg-bg-nebula,
.dm-thread .msg.msg-bg-circuit {
  border-width: 1px;
}
.dm-you {
  display: inline-flex;
  align-items: center;
  margin-right: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(184,255,60,0.2);
  color: #5ea300;
  font-size: 9px;
  font-weight: 800;
  font-family: "IBM Plex Mono", monospace;
  text-transform: uppercase;
}
.msg.out .dm-you {
  background: rgba(184,255,60,0.22);
  color: var(--lime);
}
.dm-composer {
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-top: 1px solid #eceff2;
  align-items: center;
}
.dm-composer input {
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface-muted);
  min-height: 44px;
}
.dm-composer .send-btn {
  width: 44px !important;
  height: 44px;
  border-radius: 14px !important;
}
.dm-empty {
  display: grid;
  gap: 8px;
  place-items: center;
  text-align: center;
  padding: 28px 16px;
  color: var(--hint);
}
.dm-empty.list {
  background: var(--surface);
  border: 1px dashed #d7dbe0;
  border-radius: 22px;
}
.dm-empty strong { color: var(--heading); font-size: 16px; }
.dm-kind {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: #111;
  color: var(--lime);
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 1px rgba(184,255,60,0.25), 0 8px 18px rgba(17,17,17,0.16);
}
.dm-kind .icon-svg { width: 18px; height: 18px; }
.dm-row {
  cursor: pointer;
  text-align: left;
  width: 100%;
  border-radius: 22px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.dm-row:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(17,17,17,0.08); }
.dm-row-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dm-row-meta {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 2px;
  overflow: hidden;
}
.dm-row-name {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.dm-row-name .msg-prefix {
  flex: 0 0 auto;
}
.dm-row-name .nick-fx {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.dm-row-meta b,
.dm-row-meta .dm-row-title {
  font-size: 15px;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.dm-row-meta .meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dm-row-bg-carbon .dm-row-name.nick-plain .msg-nick,
.dm-row-bg-velvet .dm-row-name.nick-plain .msg-nick,
.dm-row-bg-ocean .dm-row-name.nick-plain .msg-nick,
.dm-row-bg-plasma .dm-row-name.nick-plain .msg-nick,
.dm-row-bg-nebula .dm-row-name.nick-plain .msg-nick,
.dm-row-bg-circuit .dm-row-name.nick-plain .msg-nick {
  color: #fff;
  -webkit-text-fill-color: #fff;
}
.dm-count {
  min-width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #111;
  color: var(--lime);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  font-family: "IBM Plex Mono", monospace;
}
.dm-row-bg-grid {
  background-image:
    radial-gradient(circle at 10% 0%, rgba(184,255,60,0.14), transparent 42%),
    linear-gradient(rgba(17,17,17,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17,17,17,0.035) 1px, transparent 1px);
  background-size: auto, 12px 12px, 12px 12px;
}
.dm-row-bg-aurora {
  background:
    radial-gradient(circle at 15% 10%, rgba(184,255,60,0.18), transparent 40%),
    radial-gradient(circle at 85% 20%, rgba(125,211,252,0.2), transparent 42%),
    #f7fbff;
}
.dm-row-bg-carbon {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.06), transparent 40%),
    repeating-linear-gradient(45deg, #171717 0 2px, #121212 2px 4px);
  color: #fff;
  border-color: #1c1c1c;
}
.dm-row-bg-velvet {
  background:
    radial-gradient(circle at 20% 10%, rgba(244,114,182,0.28), transparent 45%),
    linear-gradient(160deg, #2a0b1c, #1a0f24);
  color: #fff;
  border-color: #4a1840;
}
.dm-row-bg-mist {
  background:
    radial-gradient(circle at 30% 0%, rgba(255,255,255,0.8), transparent 50%),
    linear-gradient(180deg, #eef2f6, #dfe7ef);
}
.dm-row-bg-sunset {
  background:
    radial-gradient(circle at 15% 0%, rgba(253,224,71,0.35), transparent 45%),
    radial-gradient(circle at 90% 30%, rgba(251,146,60,0.3), transparent 48%),
    #fff1e6;
}
.dm-row-bg-ocean {
  background:
    radial-gradient(circle at 20% 10%, rgba(56,189,248,0.3), transparent 45%),
    linear-gradient(160deg, #082f49, #0c4a6e);
  color: #fff;
  border-color: #0369a1;
}
.dm-row-bg-carbon .meta,
.dm-row-bg-velvet .meta,
.dm-row-bg-ocean .meta,
.dm-row-bg-plasma .meta,
.dm-row-bg-nebula .meta,
.dm-row-bg-circuit .meta { color: #aeb4bb; }
.member-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.member-chip {
  border: 1px solid rgba(17,17,17,0.08);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border-radius: 999px;
  padding: 4px 10px 4px 4px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(17,17,17,0.05);
  max-width: 160px;
}
.dm-shell.bg-carbon .member-chip,
.dm-shell.bg-velvet .member-chip,
.dm-shell.bg-ocean .member-chip {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.1);
  color: #fff;
}
.dm-shell.bg-carbon .member-face .ava-ring,
.dm-shell.bg-velvet .member-face .ava-ring,
.dm-shell.bg-ocean .member-face .ava-ring,
.dm-shell.bg-mist .member-face .ava-ring {
  box-shadow: 0 0 0 2px rgba(255,255,255,0.35);
}
.member-chip .msg-nick {
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.member-chip .ava-ring {
  width: 26px;
  height: 26px;
  box-sizing: border-box;
  padding: 2px;
  border-radius: 9px;
  display: inline-grid;
  place-items: center;
  transform: none !important;
  flex: 0 0 26px;
}
.member-chip .ava-ring.frame-none {
  width: 22px;
  height: 22px;
  padding: 0;
  flex-basis: 22px;
}
.member-chip .ava-ring .msg-ava {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px;
  min-height: 22px;
  max-width: 22px;
  max-height: 22px;
  border-radius: 7px;
  object-fit: cover;
}
.member-chip button {
  border: 0;
  background: transparent;
  padding: 0;
  display: inline-flex;
  color: inherit;
  cursor: pointer;
}
.member-chip .icon-svg { width: 12px; height: 12px; }
.dm-add { margin-left: auto; }
.people-results { display: grid; gap: 8px; margin-top: 8px; min-width: 0; }
.people-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
.people-card-head {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.people-card-head .msg-author {
  width: 100%;
  max-width: 100%;
  flex-wrap: wrap;
  row-gap: 4px;
}
.people-card-head .msg-prefix {
  max-width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.people-card-head .nick-fx {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  /* kill glow spill outside the card */
  filter: none !important;
}
.people-card-head .msg-nick {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}
.people-card-actions,
.people-card .admin-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  min-width: 0;
}
.people-card-actions .primary,
.people-card .admin-actions .primary {
  grid-column: 1 / -1;
}
.people-card-actions button,
.people-card .admin-actions button {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 10px 8px;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#user-modal.sheet {
  z-index: 46;
}
#user-modal.sheet.is-open,
#user-modal.sheet:not([hidden]) { display: flex !important; }
.profile-preview { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
/* —— luxury backgrounds (profile + chat bubbles) —— */
.profile-card.bg-grid,
.bg-grid {
  background-color: #fbfcfa;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(184,255,60,0.16), transparent 34%),
    linear-gradient(#e7ebe7 1px, transparent 1px),
    linear-gradient(90deg, #e7ebe7 1px, transparent 1px);
  background-size: auto, 18px 18px, 18px 18px;
  border-color: rgba(17,17,17,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 10px 30px rgba(17,17,17,0.04);
}
.profile-card.bg-aurora,
.bg-aurora {
  background:
    radial-gradient(circle at 18% 20%, rgba(184,255,60,0.28), transparent 36%),
    radial-gradient(circle at 82% 12%, rgba(125,211,252,0.32), transparent 34%),
    radial-gradient(circle at 70% 88%, rgba(192,132,252,0.22), transparent 40%),
    linear-gradient(135deg, #f7fee7, #e0f2fe 45%, #fae8ff);
  background-size: 140% 140%, 140% 140%, 140% 140%, 100% 100%;
  border-color: transparent;
  animation: aurora-drift 10s ease-in-out infinite alternate;
}
.profile-card.bg-carbon,
.bg-carbon {
  color: #fff;
  border-color: #1c1c1c;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.06) 0%, transparent 35%, rgba(255,255,255,0.03) 70%, transparent 100%),
    repeating-linear-gradient(45deg, #141414 0 2px, #101010 2px 4px),
    #0d0d0d;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 16px 40px rgba(0,0,0,0.28);
}
.profile-card.bg-velvet,
.bg-velvet {
  color: #f8eef5;
  border-color: #3b1028;
  background:
    radial-gradient(circle at 20% 15%, rgba(244,114,182,0.28), transparent 38%),
    radial-gradient(circle at 85% 80%, rgba(124,58,237,0.22), transparent 42%),
    linear-gradient(160deg, #2a0b1c, #140812 55%, #1a0f24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 16px 40px rgba(42,11,28,0.35);
}
.profile-card.bg-mist,
.bg-mist {
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.85), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(186,230,253,0.45), transparent 45%),
    linear-gradient(180deg, #eef2f6, #dfe7ef);
  border-color: rgba(148,163,184,0.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 10px 30px rgba(148,163,184,0.18);
}
.profile-card.bg-sunset,
.bg-sunset {
  background:
    radial-gradient(circle at 15% 10%, rgba(253,224,71,0.45), transparent 36%),
    radial-gradient(circle at 80% 20%, rgba(251,146,60,0.4), transparent 40%),
    radial-gradient(circle at 60% 90%, rgba(244,63,94,0.28), transparent 42%),
    linear-gradient(145deg, #fff7ed, #ffedd5 45%, #fecdd3);
  border-color: transparent;
  animation: sunset-drift 12s ease-in-out infinite alternate;
}
.profile-card.bg-ocean,
.bg-ocean {
  color: #e8f4ff;
  border-color: #0c4a6e;
  background:
    radial-gradient(circle at 18% 20%, rgba(56,189,248,0.35), transparent 38%),
    radial-gradient(circle at 85% 75%, rgba(14,165,233,0.28), transparent 42%),
    linear-gradient(160deg, #082f49, #0c4a6e 50%, #075985);
  box-shadow: inset 0 1px 0 rgba(125,211,252,0.18), 0 16px 40px rgba(8,47,73,0.35);
}
/* Animated BGs: solid base + moving ::before/::after (WebView-safe) */
.profile-card.bg-plasma,
.bg-plasma,
.sheet-card.pub-detail.bg-plasma,
.user-profile-sheet.bg-plasma,
.dm-shell.bg-plasma,
.dm-row-bg-plasma,
.msg.msg-bg-plasma,
.status-preview-bg.bg-plasma {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #f5f3ff;
  border-color: #4c1d95;
  background: linear-gradient(155deg, #1e1035, #2e1065 48%, #0f172a) !important;
  box-shadow: inset 0 1px 0 rgba(216, 180, 254, 0.22), 0 16px 40px rgba(46, 16, 101, 0.4);
}
.profile-card.bg-nebula,
.bg-nebula,
.sheet-card.pub-detail.bg-nebula,
.user-profile-sheet.bg-nebula,
.dm-shell.bg-nebula,
.dm-row-bg-nebula,
.msg.msg-bg-nebula,
.status-preview-bg.bg-nebula {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #eef2ff;
  border-color: #1e1b4b;
  background: linear-gradient(165deg, #0b1026, #1a1145 50%, #0f172a) !important;
  box-shadow: inset 0 1px 0 rgba(199, 210, 254, 0.18), 0 16px 40px rgba(15, 23, 42, 0.45);
}
.profile-card.bg-circuit,
.bg-circuit,
.sheet-card.pub-detail.bg-circuit,
.user-profile-sheet.bg-circuit,
.dm-shell.bg-circuit,
.dm-row-bg-circuit,
.msg.msg-bg-circuit,
.status-preview-bg.bg-circuit {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #ecfdf5;
  border-color: #064e3b;
  background:
    linear-gradient(rgba(52, 211, 153, 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(52, 211, 153, 0.14) 1px, transparent 1px),
    linear-gradient(160deg, #022c22, #064e3b 50%, #052e16) !important;
  background-size: 18px 18px, 18px 18px, auto !important;
  box-shadow: inset 0 1px 0 rgba(110, 231, 183, 0.2), 0 16px 40px rgba(2, 44, 34, 0.4);
}
.profile-card.bg-plasma::before,
.bg-plasma::before,
.sheet-card.pub-detail.bg-plasma::before,
.user-profile-sheet.bg-plasma::before,
.dm-shell.bg-plasma::before,
.dm-row-bg-plasma::before,
.msg.msg-bg-plasma::before,
.status-preview-bg.bg-plasma::before,
.profile-card.bg-nebula::before,
.bg-nebula::before,
.sheet-card.pub-detail.bg-nebula::before,
.user-profile-sheet.bg-nebula::before,
.dm-shell.bg-nebula::before,
.dm-row-bg-nebula::before,
.msg.msg-bg-nebula::before,
.status-preview-bg.bg-nebula::before,
.profile-card.bg-circuit::before,
.bg-circuit::before,
.sheet-card.pub-detail.bg-circuit::before,
.user-profile-sheet.bg-circuit::before,
.dm-shell.bg-circuit::before,
.dm-row-bg-circuit::before,
.msg.msg-bg-circuit::before,
.status-preview-bg.bg-circuit::before {
  content: "";
  position: absolute;
  inset: -45%;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
}
.profile-card.bg-plasma::after,
.bg-plasma::after,
.sheet-card.pub-detail.bg-plasma::after,
.user-profile-sheet.bg-plasma::after,
.dm-shell.bg-plasma::after,
.dm-row-bg-plasma::after,
.msg.msg-bg-plasma::after,
.status-preview-bg.bg-plasma::after,
.profile-card.bg-nebula::after,
.bg-nebula::after,
.sheet-card.pub-detail.bg-nebula::after,
.user-profile-sheet.bg-nebula::after,
.dm-shell.bg-nebula::after,
.dm-row-bg-nebula::after,
.msg.msg-bg-nebula::after,
.status-preview-bg.bg-nebula::after,
.profile-card.bg-circuit::after,
.bg-circuit::after,
.sheet-card.pub-detail.bg-circuit::after,
.user-profile-sheet.bg-circuit::after,
.dm-shell.bg-circuit::after,
.dm-row-bg-circuit::after,
.msg.msg-bg-circuit::after,
.status-preview-bg.bg-circuit::after {
  content: "";
  position: absolute;
  inset: -35%;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
}
.profile-card.bg-plasma::before,
.bg-plasma::before,
.sheet-card.pub-detail.bg-plasma::before,
.user-profile-sheet.bg-plasma::before,
.dm-shell.bg-plasma::before,
.dm-row-bg-plasma::before,
.msg.msg-bg-plasma::before,
.status-preview-bg.bg-plasma::before {
  background:
    radial-gradient(circle at 28% 30%, rgba(244, 114, 182, 0.65), transparent 34%),
    radial-gradient(circle at 72% 38%, rgba(129, 140, 248, 0.55), transparent 36%),
    radial-gradient(circle at 48% 78%, rgba(34, 211, 238, 0.45), transparent 38%);
  animation: plasma-blobs 4.5s ease-in-out infinite alternate;
}
.profile-card.bg-plasma::after,
.bg-plasma::after,
.sheet-card.pub-detail.bg-plasma::after,
.user-profile-sheet.bg-plasma::after,
.dm-shell.bg-plasma::after,
.dm-row-bg-plasma::after,
.msg.msg-bg-plasma::after,
.status-preview-bg.bg-plasma::after {
  background: conic-gradient(
    from 80deg,
    transparent,
    rgba(244, 114, 182, 0.22),
    transparent 35%,
    rgba(56, 189, 248, 0.2),
    transparent 65%
  );
  animation: plasma-spin 7s linear infinite;
  opacity: 0.9;
}
.profile-card.bg-nebula::before,
.bg-nebula::before,
.sheet-card.pub-detail.bg-nebula::before,
.user-profile-sheet.bg-nebula::before,
.dm-shell.bg-nebula::before,
.dm-row-bg-nebula::before,
.msg.msg-bg-nebula::before,
.status-preview-bg.bg-nebula::before {
  background:
    radial-gradient(circle at 20% 28%, rgba(167, 139, 250, 0.7), transparent 32%),
    radial-gradient(circle at 78% 22%, rgba(244, 114, 182, 0.45), transparent 34%),
    radial-gradient(circle at 58% 78%, rgba(56, 189, 248, 0.4), transparent 36%),
    radial-gradient(circle at 32% 72%, rgba(52, 211, 153, 0.28), transparent 30%);
  animation: nebula-blobs 5.5s ease-in-out infinite alternate;
}
.profile-card.bg-nebula::after,
.bg-nebula::after,
.sheet-card.pub-detail.bg-nebula::after,
.user-profile-sheet.bg-nebula::after,
.dm-shell.bg-nebula::after,
.dm-row-bg-nebula::after,
.msg.msg-bg-nebula::after,
.status-preview-bg.bg-nebula::after {
  background:
    radial-gradient(circle at 60% 40%, rgba(255, 255, 255, 0.14), transparent 18%),
    radial-gradient(circle at 30% 60%, rgba(196, 181, 253, 0.2), transparent 22%);
  animation: nebula-twinkle 3.2s ease-in-out infinite alternate;
}
.profile-card.bg-circuit::before,
.bg-circuit::before,
.sheet-card.pub-detail.bg-circuit::before,
.user-profile-sheet.bg-circuit::before,
.dm-shell.bg-circuit::before,
.dm-row-bg-circuit::before,
.msg.msg-bg-circuit::before,
.status-preview-bg.bg-circuit::before {
  background:
    radial-gradient(circle at 18% 20%, rgba(16, 185, 129, 0.55), transparent 28%),
    radial-gradient(circle at 82% 70%, rgba(34, 211, 238, 0.4), transparent 32%),
    linear-gradient(115deg, transparent 40%, rgba(52, 211, 153, 0.35) 50%, transparent 60%);
  background-size: auto, auto, 220% 100%;
  animation: circuit-sweep 3.6s ease-in-out infinite;
}
.profile-card.bg-circuit::after,
.bg-circuit::after,
.sheet-card.pub-detail.bg-circuit::after,
.user-profile-sheet.bg-circuit::after,
.dm-shell.bg-circuit::after,
.dm-row-bg-circuit::after,
.msg.msg-bg-circuit::after,
.status-preview-bg.bg-circuit::after {
  inset: 0;
  background:
    linear-gradient(rgba(110, 231, 183, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110, 231, 183, 0.16) 1px, transparent 1px);
  background-size: 18px 18px, 18px 18px;
  animation: circuit-grid 2.8s linear infinite;
  opacity: 0.7;
  mix-blend-mode: screen;
}
.profile-card.bg-plasma > *,
.profile-card.bg-nebula > *,
.profile-card.bg-circuit > *,
.sheet-card.pub-detail.bg-plasma > *,
.sheet-card.pub-detail.bg-nebula > *,
.sheet-card.pub-detail.bg-circuit > *,
.user-profile-sheet.bg-plasma > *,
.user-profile-sheet.bg-nebula > *,
.user-profile-sheet.bg-circuit > *,
.dm-shell.bg-plasma > *,
.dm-shell.bg-nebula > *,
.dm-shell.bg-circuit > *,
.msg.msg-bg-plasma > *,
.msg.msg-bg-nebula > *,
.msg.msg-bg-circuit > * {
  position: relative;
  z-index: 1;
}
.status-preview-bg.bg-plasma,
.status-preview-bg.bg-nebula,
.status-preview-bg.bg-circuit {
  animation: none !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
}
.bg-carbon .meta,
.bg-carbon strong,
.profile-card.bg-carbon .meta,
.profile-card.bg-carbon strong,
.bg-velvet .meta,
.bg-velvet strong,
.profile-card.bg-velvet .meta,
.profile-card.bg-velvet strong,
.bg-ocean .meta,
.bg-ocean strong,
.profile-card.bg-ocean .meta,
.profile-card.bg-ocean strong,
.bg-plasma .meta,
.bg-plasma strong,
.profile-card.bg-plasma .meta,
.profile-card.bg-plasma strong,
.bg-nebula .meta,
.bg-nebula strong,
.profile-card.bg-nebula .meta,
.profile-card.bg-nebula strong,
.bg-circuit .meta,
.bg-circuit strong,
.profile-card.bg-circuit .meta,
.profile-card.bg-circuit strong { color: #fff; }
.bg-carbon .profile-bio,
.bg-velvet .profile-bio,
.bg-ocean .profile-bio,
.bg-plasma .profile-bio,
.bg-nebula .profile-bio,
.bg-circuit .profile-bio { color: #d7dbe0; }
/* nick cosmetics must win over dark text color */
.bg-carbon .nick-plain .msg-nick,
.profile-card.bg-carbon .nick-plain .msg-nick,
.sheet-card.pub-detail.bg-carbon .nick-plain .msg-nick,
.bg-velvet .nick-plain .msg-nick,
.profile-card.bg-velvet .nick-plain .msg-nick,
.sheet-card.pub-detail.bg-velvet .nick-plain .msg-nick,
.bg-ocean .nick-plain .msg-nick,
.profile-card.bg-ocean .nick-plain .msg-nick,
.sheet-card.pub-detail.bg-ocean .nick-plain .msg-nick,
.bg-plasma .nick-plain .msg-nick,
.profile-card.bg-plasma .nick-plain .msg-nick,
.sheet-card.pub-detail.bg-plasma .nick-plain .msg-nick,
.bg-nebula .nick-plain .msg-nick,
.profile-card.bg-nebula .nick-plain .msg-nick,
.sheet-card.pub-detail.bg-nebula .nick-plain .msg-nick,
.bg-circuit .nick-plain .msg-nick,
.profile-card.bg-circuit .nick-plain .msg-nick,
.sheet-card.pub-detail.bg-circuit .nick-plain .msg-nick { color: #fff; }

@keyframes aurora-drift {
  0% { background-position: 0% 20%, 100% 0%, 60% 100%, 0 0; }
  100% { background-position: 40% 60%, 40% 40%, 30% 40%, 0 0; }
}
@keyframes sunset-drift {
  0% { filter: saturate(1); }
  100% { filter: saturate(1.15) hue-rotate(-6deg); }
}
@keyframes plasma-blobs {
  0% { transform: translate(-6%, -4%) scale(1); }
  100% { transform: translate(8%, 6%) scale(1.12); }
}
@keyframes plasma-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes nebula-blobs {
  0% { transform: translate(-4%, 2%) scale(1); opacity: 0.85; }
  100% { transform: translate(7%, -5%) scale(1.15); opacity: 1; }
}
@keyframes nebula-twinkle {
  0% { transform: translate(0, 0) scale(1); opacity: 0.35; }
  100% { transform: translate(-4%, 5%) scale(1.2); opacity: 0.85; }
}
@keyframes circuit-sweep {
  0% { background-position: 0 0, 0 0, 0% 50%; opacity: 0.7; }
  50% { opacity: 1; }
  100% { background-position: 0 0, 0 0, 100% 50%; opacity: 0.75; }
}
@keyframes circuit-grid {
  0% { transform: translate(0, 0); opacity: 0.45; }
  50% { opacity: 0.85; }
  100% { transform: translate(9px, 9px); opacity: 0.5; }
}

/* chat bubbles inherit author cosmetics */
.msg.msg-bg-grid {
  background-image:
    radial-gradient(circle at 10% 0%, rgba(184,255,60,0.14), transparent 42%),
    linear-gradient(rgba(17,17,17,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17,17,17,0.04) 1px, transparent 1px);
  background-size: auto, 12px 12px, 12px 12px;
  background-color: #f7faf4;
  border: 1px solid rgba(184,255,60,0.18);
  color: #111;
}
.msg.msg-bg-aurora {
  background:
    radial-gradient(circle at 15% 10%, rgba(184,255,60,0.22), transparent 40%),
    radial-gradient(circle at 85% 20%, rgba(125,211,252,0.24), transparent 42%),
    radial-gradient(circle at 70% 100%, rgba(192,132,252,0.18), transparent 46%),
    #eef6ff;
  border: 1px solid rgba(125,211,252,0.22);
  color: var(--heading);
}
.msg.msg-bg-carbon {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.07), transparent 40%),
    repeating-linear-gradient(45deg, #171717 0 2px, #121212 2px 4px);
  color: #f3f5f7;
  border: 1px solid #2a2a2a;
}
.msg.msg-bg-velvet {
  background:
    radial-gradient(circle at 20% 10%, rgba(244,114,182,0.28), transparent 45%),
    linear-gradient(160deg, #2a0b1c, #1a0f24);
  color: #f8eef5;
  border: 1px solid #4a1840;
}
.msg.msg-bg-mist {
  background:
    radial-gradient(circle at 30% 0%, rgba(255,255,255,0.8), transparent 50%),
    linear-gradient(180deg, #eef2f6, #dfe7ef);
  border: 1px solid rgba(148,163,184,0.35);
  color: var(--heading);
}
.msg.msg-bg-sunset {
  background:
    radial-gradient(circle at 15% 0%, rgba(253,224,71,0.35), transparent 45%),
    radial-gradient(circle at 90% 30%, rgba(251,146,60,0.3), transparent 48%),
    #fff1e6;
  border: 1px solid rgba(251,146,60,0.28);
  color: var(--heading);
}
.msg.msg-bg-grid,
.msg.msg-bg-aurora,
.msg.msg-bg-mist,
.msg.msg-bg-sunset {
  color: var(--heading) !important;
}
.msg.msg-bg-grid .msg-text,
.msg.msg-bg-aurora .msg-text,
.msg.msg-bg-mist .msg-text,
.msg.msg-bg-sunset .msg-text,
.msg.msg-bg-grid .who,
.msg.msg-bg-aurora .who,
.msg.msg-bg-mist .who,
.msg.msg-bg-sunset .who {
  color: var(--heading) !important;
}
.msg.msg-bg-grid small,
.msg.msg-bg-aurora small,
.msg.msg-bg-mist small,
.msg.msg-bg-sunset small,
.msg.msg-bg-grid .msg-foot small,
.msg.msg-bg-aurora .msg-foot small,
.msg.msg-bg-mist .msg-foot small,
.msg.msg-bg-sunset .msg-foot small {
  color: rgba(17, 17, 17, 0.55) !important;
}
.msg.msg-bg-grid .dm-you,
.msg.msg-bg-aurora .dm-you,
.msg.msg-bg-mist .dm-you,
.msg.msg-bg-sunset .dm-you {
  background: var(--soft-fill);
  color: var(--hint);
}
.msg.msg-bg-custom[data-bg-light="0"] {
  color: var(--heading) !important;
}
.msg.msg-bg-custom[data-bg-light="0"] .msg-text,
.msg.msg-bg-custom[data-bg-light="0"] .who {
  color: var(--heading) !important;
}
.msg.msg-bg-custom[data-bg-light="0"] small,
.msg.msg-bg-custom[data-bg-light="0"] .msg-foot small {
  color: rgba(17, 17, 17, 0.55) !important;
}
.msg.msg-bg-custom[data-bg-light="0"] .dm-you {
  background: var(--soft-fill);
  color: #374151;
}
.msg.msg-bg-custom[data-bg-light="1"] {
  color: #f8fafc !important;
}
.msg.msg-bg-custom[data-bg-light="1"] .msg-text,
.msg.msg-bg-custom[data-bg-light="1"] .who {
  color: #f8fafc !important;
}
.msg.msg-bg-custom[data-bg-light="1"] small,
.msg.msg-bg-custom[data-bg-light="1"] .msg-foot small {
  color: rgba(248, 250, 252, 0.7) !important;
}
.msg.msg-bg-custom[data-bg-light="1"] .dm-you {
  background: rgba(184, 255, 60, 0.22);
  color: var(--lime);
}
.msg.msg-bg-ocean {
  background:
    radial-gradient(circle at 20% 10%, rgba(56,189,248,0.3), transparent 45%),
    linear-gradient(160deg, #082f49, #0c4a6e);
  color: #e8f4ff;
  border: 1px solid #0369a1;
}
.msg.msg-bg-carbon small,
.msg.msg-bg-carbon .who,
.msg.msg-bg-velvet small,
.msg.msg-bg-velvet .who,
.msg.msg-bg-ocean small,
.msg.msg-bg-ocean .who,
.msg.msg-bg-plasma small,
.msg.msg-bg-plasma .who,
.msg.msg-bg-nebula small,
.msg.msg-bg-nebula .who,
.msg.msg-bg-circuit small,
.msg.msg-bg-circuit .who { color: rgba(255,255,255,0.7); }
.msg.out.msg-bg-grid,
.msg.out.msg-bg-aurora,
.msg.out.msg-bg-mist,
.msg.out.msg-bg-sunset {
  color: #111;
}
.msg.out.msg-bg-grid small,
.msg.out.msg-bg-aurora small,
.msg.out.msg-bg-mist small,
.msg.out.msg-bg-sunset small { color: rgba(17,17,17,0.55); }

/* Chat bubbles: no animated overlays — they turn short msgs into solid green bars */
.msg.msg-bg-plasma,
.msg.msg-bg-nebula,
.msg.msg-bg-circuit,
.msg.msg-bg-custom {
  isolation: isolate;
  overflow: hidden;
}
.msg.msg-bg-plasma::before,
.msg.msg-bg-plasma::after,
.msg.msg-bg-nebula::before,
.msg.msg-bg-nebula::after,
.msg.msg-bg-circuit::before,
.msg.msg-bg-circuit::after,
.msg.msg-bg-custom::before,
.msg.msg-bg-custom::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}
.msg.msg-bg-circuit {
  background:
    linear-gradient(rgba(52, 211, 153, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(52, 211, 153, 0.12) 1px, transparent 1px),
    linear-gradient(160deg, #0b3d32, #0f5c45) !important;
  background-size: 14px 14px, 14px 14px, auto !important;
  color: #ecfdf5 !important;
  border: 1px solid rgba(52, 211, 153, 0.35);
  box-shadow: none;
}
.msg.msg-bg-plasma {
  background: linear-gradient(155deg, #2a1848, #1e293b) !important;
  color: #f5f3ff !important;
  box-shadow: none;
}
.msg.msg-bg-nebula {
  background: linear-gradient(165deg, #14182e, #1a1145) !important;
  color: #eef2ff !important;
  box-shadow: none;
}
.msg.msg-bg-circuit .msg-text,
.msg.msg-bg-plasma .msg-text,
.msg.msg-bg-nebula .msg-text,
.msg.msg-bg-carbon .msg-text,
.msg.msg-bg-velvet .msg-text,
.msg.msg-bg-ocean .msg-text,
.msg.msg-bg-custom .msg-text {
  color: inherit !important;
  position: relative;
  z-index: 2;
}
.msg.msg-bg-circuit .who,
.msg.msg-bg-plasma .who,
.msg.msg-bg-nebula .who,
.msg.msg-bg-circuit .msg-foot,
.msg.msg-bg-plasma .msg-foot,
.msg.msg-bg-nebula .msg-foot {
  position: relative;
  z-index: 2;
}
.msg.out.msg-bg-circuit,
.msg.out.msg-bg-plasma,
.msg.out.msg-bg-nebula,
.msg.out.msg-bg-carbon,
.msg.out.msg-bg-velvet,
.msg.out.msg-bg-ocean,
.msg.out.msg-bg-custom {
  color: #f8fafc !important;
}
.msg.has-frame {
  box-shadow: 0 8px 22px rgba(17,17,17,0.08);
}
.msg .ava-ring {
  margin-right: 2px;
  flex: 0 0 auto;
  max-width: 30px;
  max-height: 30px;
  overflow: hidden;
  animation: none !important;
}
.msg .ava-ring::before,
.msg .ava-ring::after {
  animation: none !important;
  opacity: 0.55;
}
.msg .ava-ring .msg-ava {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px;
  min-height: 24px;
  max-width: 24px;
  max-height: 24px;
  border-radius: 8px;
  display: grid !important;
  place-items: center !important;
  line-height: 1;
}
.game-toast.is-err {
  background: #111;
  color: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35), 0 0 0 2px #ff5a5a;
}

#game-overlay.game-overlay,
.game-overlay {
  position: fixed;
  inset: 0;
  z-index: 72;
  background: #07080b;
  display: none;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  overflow: hidden;
}
#game-overlay:not([hidden]) {
  display: flex !important;
}
.oxcore-lobby {
  position: relative;
  overflow: hidden;
  background: #111;
  color: #fff;
  border-radius: 28px;
  padding: 22px 18px 18px;
  box-shadow: 8px 8px 0 #b8ff3c;
  display: grid;
  gap: 12px;
}
.oxcore-lobby-glow {
  position: absolute;
  inset: auto -40px -80px auto;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(184,255,60,0.35), transparent 68%);
  pointer-events: none;
}
.oxcore-lobby-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.oxcore-badge {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #b8ff3c;
}
.oxcore-mark {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  background: #b8ff3c;
  color: #111;
  font-weight: 900;
  display: grid;
  place-items: center;
  box-shadow: 0 0 24px rgba(184,255,60,0.45);
}
.oxcore-lobby h2 {
  margin: 0;
  font-size: 36px;
  letter-spacing: -0.06em;
  line-height: 0.95;
}
.oxcore-tag {
  margin: 0;
  color: #c5c9ce;
  font-size: 15px;
}
.oxcore-stats-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.oxcore-stats-row div {
  background: #1a1b1e;
  border-radius: 16px;
  padding: 10px 8px;
  text-align: center;
}
.oxcore-stats-row em {
  display: block;
  font-style: normal;
  font-size: 11px;
  color: #8b9198;
  margin-bottom: 2px;
}
.oxcore-stats-row b {
  color: #b8ff3c;
  font-size: 18px;
}
.oxcore-rules {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.oxcore-rules li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  color: #d8dce0;
}
.oxcore-rules i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #b8ff3c;
  margin-top: 4px;
  flex: 0 0 auto;
  box-shadow: 0 0 10px rgba(184,255,60,0.55);
}
.oxcore-rules i.is-gold { background: #ffe566; box-shadow: 0 0 10px rgba(255,229,102,0.55); }
.oxcore-rules i.is-bad { background: #ff4d7a; border-radius: 3px; box-shadow: 0 0 10px rgba(255,77,122,0.45); }
.oxcore-play {
  width: 100%;
  min-height: 52px;
  border-radius: 16px !important;
  font-size: 16px !important;
}
.oxcore-shell {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 8px;
  padding: max(10px, env(safe-area-inset-top, 0px)) 12px max(12px, env(safe-area-inset-bottom, 0px));
  color: #fff;
}
.oxcore-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.oxcore-close {
  flex: 0 0 auto !important;
  width: auto !important;
  color: #fff !important;
  background: #1a1b1e !important;
  border-color: #2a2c31 !important;
}
.oxcore-hud {
  display: flex;
  gap: 10px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  color: #9aa1a8;
}
.oxcore-hud b { color: #b8ff3c; font-size: 14px; }
.oxcore-stage {
  position: relative;
  min-height: 0;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid #1f2228;
  background: #07080b;
  touch-action: none;
}
.oxcore-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}
.oxcore-banner {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 84px;
  font-weight: 900;
  letter-spacing: -0.08em;
  color: #b8ff3c;
  text-shadow: 0 0 40px rgba(184,255,60,0.45);
  pointer-events: none;
}
.oxcore-banner.is-gone,
.oxcore-banner:empty { display: none; }
.oxcore-hint {
  margin: 0;
  text-align: center;
  color: #7d848c;
  font-size: 12px;
}
.oxcore-result {
  position: absolute;
  inset: 18px;
  background: rgba(12,13,16,0.92);
  border: 2px solid #b8ff3c;
  border-radius: 24px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  text-align: center;
  padding: 22px 16px;
  box-shadow: 8px 8px 0 #b8ff3c;
}
.oxcore-result strong {
  font-size: 64px;
  letter-spacing: -0.07em;
  line-height: 0.9;
  color: #b8ff3c;
}
.oxcore-gain { color: #fff; margin: 0; font-weight: 700; }
.oxcore-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
  margin-top: 8px;
}

/* hide old photo covers if any remain */
.sec-cover { display: none !important; }

/* Opened user profile: uploaded photo must win over later pub-detail dark fills */
.user-profile-sheet > .sheet-bg-fill {
  display: none;
}
.user-profile-sheet.bg-custom[data-bg-image="1"] > .sheet-bg-fill,
.user-profile-sheet.bg-custom[data-bg-mode="image"] > .sheet-bg-fill,
.user-profile-sheet.bg-custom[data-bg-mode="kenburns"] > .sheet-bg-fill {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background-color: #07080a;
  background-image:
    linear-gradient(180deg, rgba(6, 7, 10, 0.5) 0%, rgba(6, 7, 10, 0.66) 48%, rgba(6, 7, 10, 0.82) 100%),
    var(--bg-image);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat;
}
#user-modal .user-profile-sheet.bg-custom[data-bg-image="1"],
#user-modal .user-profile-sheet.bg-custom[data-bg-mode="image"],
#user-modal .user-profile-sheet.bg-custom[data-bg-mode="kenburns"],
.sheet-card.pub-detail.user-profile-sheet.bg-custom[data-bg-image="1"],
.sheet-card.pub-detail.user-profile-sheet.bg-custom[data-bg-mode="image"],
.sheet-card.pub-detail.user-profile-sheet.bg-custom[data-bg-mode="kenburns"] {
  background-color: #07080a !important;
  background-image:
    linear-gradient(180deg, rgba(6, 7, 10, 0.5) 0%, rgba(6, 7, 10, 0.66) 48%, rgba(6, 7, 10, 0.82) 100%),
    var(--bg-image) !important;
  background-size: cover, cover !important;
  background-position: center, center !important;
  background-repeat: no-repeat !important;
  animation: none !important;
}
.user-profile-sheet.bg-custom[data-bg-light="1"] .profile-tabs {
  background: rgba(255, 255, 255, 0.1);
}
.user-profile-sheet.bg-custom[data-bg-light="1"] .profile-tab,
.user-profile-sheet.bg-custom.is-bg-dark .profile-tab {
  color: rgba(255, 255, 255, 0.88);
  -webkit-text-fill-color: rgba(255, 255, 255, 0.88);
}
#user-modal .user-profile-sheet .ghost,
#user-modal .user-profile-sheet .ghost.icon-btn,
#user-modal .user-profile-sheet .ghost.danger,
#user-modal .user-profile-sheet .profile-tab.is-on,
.user-profile-sheet.bg-custom[data-bg-light="1"] .profile-tab.is-on,
.user-profile-sheet.bg-custom.is-bg-dark .profile-tab.is-on,
.user-profile-sheet.bg-custom .ghost,
.user-profile-sheet.bg-custom .ghost.icon-btn {
  background: #111 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border-color: #2a2a2a;
}
.user-profile-sheet.bg-custom .ghost .icon-svg,
.user-profile-sheet.bg-custom .ghost .icon-svg *,
#user-modal .user-profile-sheet .ghost .icon-svg,
#user-modal .user-profile-sheet .ghost .icon-svg * {
  color: #fff !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* ---------- design polish ---------- */
::selection { background: rgba(184,255,60,0.55); color: var(--heading); }
:where(button, a, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--lime-2);
  outline-offset: 2px;
}
:where(button):not(:disabled):active { transform: scale(0.97); }
:where(button) { transition: transform .12s ease, background-color .18s ease, box-shadow .18s ease, color .18s ease; }

.messages {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 6px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 6px), transparent 100%);
  padding-top: 14px;
}
.msg { box-shadow: 0 1px 0 rgba(17,17,17,0.03); }
.msg.out { box-shadow: 0 8px 20px rgba(17,17,17,0.12); }

.composer input,
.composer textarea { transition: border-color .18s ease, box-shadow .18s ease; }
.composer input:focus,
.composer textarea:focus {
  border-color: var(--lime);
  box-shadow: 0 0 0 4px rgba(184,255,60,0.35);
  outline: none;
}

.live-card { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.live-card:active { transform: scale(0.99); }

.profile-tabs-5,
.profile-tabs-6 {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.profile-tabs-5::-webkit-scrollbar,
.profile-tabs-6::-webkit-scrollbar { display: none; }
.profile-tabs-5 .profile-tab,
.profile-tabs-6 .profile-tab {
  flex: 1 0 auto;
  padding: 8px 14px;
  scroll-snap-align: start;
  white-space: nowrap;
}

.pub-actions:not(.is-owner) {
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
}
.pub-actions:not(.is-owner) button:not(.danger) { font-size: 14px; }
.pub-actions .danger {
  min-height: 36px;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: #c43d2f;
  font-size: 13px;
  font-weight: 700;
  opacity: 0.85;
}
.pub-actions .danger:hover { opacity: 1; background: rgba(196,61,47,0.08); }

.entity-id {
  user-select: all;
  opacity: 0.75;
}

@media (hover: hover) and (pointer: fine) {
  .live-card:hover {
    transform: translateY(-2px);
    border-color: #dfe3e7;
    box-shadow: 0 16px 34px rgba(17,17,17,0.08);
  }
  #app > .tabbar button:not(.is-on):hover { background: rgba(255,255,255,0.08); }
  * { scrollbar-width: thin; scrollbar-color: rgba(17,17,17,0.22) transparent; }
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-thumb {
    background: rgba(17,17,17,0.2);
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: padding-box;
  }
  ::-webkit-scrollbar-thumb:hover { background-color: rgba(17,17,17,0.35); }
  ::-webkit-scrollbar-track { background: transparent; }
}

@media (min-width: 900px) {
  .profile-tabs-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .profile-tabs-5 .profile-tab { padding: 8px 6px; }
  .profile-tabs-6 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .profile-tabs-6 .profile-tab { padding: 8px 6px; }
  .pub-actions:not(.is-owner) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .chat-head {
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(17,17,17,0.06);
  }
  .msg { max-width: 72%; }
}

@media (max-width: 899px) {
  :root { --tab: 66px; }
  html, body { -webkit-tap-highlight-color: transparent; }
  .view { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .tabbar {
    left: 10px;
    right: 10px;
    bottom: calc(8px + var(--safe-bot));
    height: 62px;
    padding: 5px;
    gap: 4px;
    border-radius: 22px;
    background: rgba(17,17,17,0.94);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
  .tabbar button {
    border-radius: 17px;
    gap: 3px;
    background: transparent;
  }
  .tabbar button.is-on { box-shadow: 0 0 14px rgba(184,255,60,0.35); }
  .tabbar .tab-ico { width: 20px; height: 20px; }
  .tabbar .tab-label { font-size: 10px; font-weight: 700; letter-spacing: 0.01em; }
  #to-sections {
    min-height: 40px;
    padding: 0 16px;
    font-size: 14px;
    border-radius: 999px;
  }
  .status-preview { width: 60px; min-width: 60px; max-width: 60px; }
  .status-preview .msg-nick { max-width: 60px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
}

@media (max-width: 899px) and (pointer: coarse) {
  input:not(.pin-input):not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  textarea,
  select { font-size: 16px !important; }
}

@media (max-width: 420px) {
  .top h1, .brand-title h1, .wordmark { font-size: 28px; }
  .view { padding-left: 12px; padding-right: 12px; }
  .msg { max-width: 90%; font-size: 15px; }
  .chat-who .mark { width: 38px; height: 38px; border-radius: 12px; }
  .pub-actions:not(.is-owner) button:not(.danger) { font-size: 13px; gap: 5px; }
}
@media (max-width: 899px) {
  .profile-tabs-5 {
    -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent);
    mask-image: linear-gradient(90deg, #000 82%, transparent);
    padding-right: 28px;
  }
}



.banner-order-cta {
  display: grid;
  gap: 2px;
  width: 100%;
  margin: 0 0 12px;
  padding: 12px 14px;
  text-align: left;
  border: 0;
  border-radius: 16px;
  background: #111;
  color: #fff;
  cursor: pointer;
  font: inherit;
  box-shadow: none;
}
.banner-order-cta strong { font-size: 14px; letter-spacing: -0.03em; color: var(--lime); }
.banner-order-cta span { font-size: 12px; color: rgba(255,255,255,0.72); }
.banner-slide.is-promo .banner-media { position: relative; }
.banner-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8,10,12,0.72), rgba(8,10,12,0.18) 55%, transparent);
  pointer-events: none;
}
.banner-promo {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 2;
  display: grid;
  gap: 6px;
  max-width: min(70%, 280px);
  color: #fff;
}
.banner-promo-kicker {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lime);
  font-family: "IBM Plex Mono", monospace;
}
.banner-promo strong { font-size: 18px; letter-spacing: -0.04em; }
.banner-promo-btn {
  width: fit-content;
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--lime);
  color: #111;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.pc-banner-cta p { margin: 6px 0 10px; color: var(--hint); font-size: 13px; line-height: 1.35; }
.pc-banner-cta .ghost { width: 100%; min-height: 40px; border-radius: 12px; }

/* Banner area cropper (1000×500 / 2:1) */
.banner-crop-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(8, 10, 12, 0.72);
  backdrop-filter: blur(8px);
}
.banner-crop-card {
  width: min(560px, 100%);
  max-height: min(92vh, 820px);
  overflow: auto;
  background: var(--surface);
  border-radius: 22px;
  padding: 14px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.35);
  display: grid;
  gap: 12px;
}
.banner-crop-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.banner-crop-head strong { display: block; font-size: 18px; letter-spacing: -0.03em; }
.banner-crop-head .meta { margin: 4px 0 0; }
.banner-crop-stage {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #111;
  border: 1px solid var(--ghost-ring);
}
.banner-crop-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
  background:
    linear-gradient(45deg, #1a1a1a 25%, transparent 25%) 0 0 / 16px 16px,
    linear-gradient(-45deg, #1a1a1a 25%, transparent 25%) 0 0 / 16px 16px,
    #111;
}
.banner-crop-frame:active { cursor: grabbing; }
.banner-crop-frame img {
  position: absolute;
  left: 0;
  top: 0;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform;
}
.banner-crop-rule {
  position: absolute;
  left: 10px;
  bottom: 8px;
  z-index: 2;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(184,255,60,0.92);
  color: var(--heading);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  pointer-events: none;
}
.banner-crop-zoom {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
}
.banner-crop-zoom input[type="range"] { width: 100%; }
.banner-crop-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.banner-order-sheet {
  display: flex;
  flex-direction: column;
  max-height: min(92vh, 840px);
  padding: 0;
  overflow: hidden;
}
.banner-order-sheet .sheet-head {
  padding: 14px 16px 10px;
  margin: 0;
  flex: none;
}
.banner-order-form {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0 16px 16px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.banner-order-lead {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--hint);
}
.banner-term-block,
.banner-upload-block {
  display: grid;
  gap: 8px;
}
.banner-term-head,
.banner-upload-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  color: var(--heading);
}
.banner-term-head em,
.banner-upload-head em {
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  color: var(--hint);
}
.banner-term-label { margin: 0; font-weight: 800; color: var(--heading); }
.banner-term-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}
.banner-term-btn {
  display: grid;
  gap: 2px;
  justify-items: start;
  padding: 12px 10px;
  border-radius: 14px;
  border: 0;
  background: var(--surface-muted);
  color: var(--heading);
  text-align: left;
  cursor: pointer;
  font: inherit;
  min-height: 74px;
}
.banner-term-btn strong { font-size: 14px; letter-spacing: -0.03em; }
.banner-term-btn span { font-size: 11px; color: var(--hint); }
.banner-term-btn b { font-size: 13px; margin-top: 2px; }
.banner-term-btn.is-on {
  background: #111;
  color: var(--lime);
}
.banner-term-btn.is-on span { color: rgba(184,255,60,0.75); }
.banner-field {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 800;
  color: var(--heading);
}
.banner-field input {
  min-height: 46px;
  border: 0;
  border-radius: 14px;
  padding: 0 14px;
  background: var(--surface-muted);
  color: var(--heading);
  font: inherit;
  font-weight: 600;
}
.banner-field input:focus {
  outline: 2px solid var(--lime);
  background: var(--surface);
}
.banner-file-pick {
  display: grid !important;
  gap: 4px;
  width: 100%;
  min-height: 0;
  padding: 14px;
  border: 0 !important;
  border-radius: 16px !important;
  background: var(--surface-muted) !important;
  text-align: left;
  cursor: pointer;
}
.banner-file-pick.has-file {
  background: rgba(184,255,60,0.18) !important;
}
.banner-file-pick-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--heading);
}
.banner-file-pick-sub {
  font-size: 12px;
  font-weight: 600;
  color: var(--hint);
  line-height: 1.35;
}
.banner-crop-preview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.banner-order-foot {
  position: sticky;
  bottom: 0;
  padding-top: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,0), #fff 28%);
}
.banner-order-foot .primary {
  width: 100%;
  min-height: 48px;
  border-radius: 14px;
  font-weight: 800;
}
.banner-postpay {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #eceff2;
}
.banner-postpay-preview img {
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  border-radius: 14px;
  background: #111;
}
.banner-order-mine { display: grid; gap: 10px; margin-top: 14px; }
.banner-mine-card {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 0;
  border-radius: 16px;
  background: var(--surface-muted);
}
.banner-mine-card img {
  width: 88px;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  border-radius: 10px;
  background: #111;
}
.banner-mine-card strong { display: block; font-size: 14px; }
@media (max-width: 420px) {
  .banner-term-btn { padding: 10px 6px; }
  .banner-term-btn strong { font-size: 13px; }
  .banner-term-btn b { font-size: 12px; }
}

.banner-crop-preview {
  display: grid;
  gap: 8px;
  margin: 8px 0 0;
}
.banner-crop-preview.is-hidden,
.banner-crop-preview[hidden] { display: none !important; }
.banner-crop-frame-view {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 1;
  border-radius: 14px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(184,255,60,0.08), transparent 42%),
    #111;
  border: 1px solid var(--line);
}
.banner-crop-frame-view img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.banner-crop-frame-view .banner-preview-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: 4px;
  padding: 12px;
  color: rgba(255,255,255,0.72);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  pointer-events: none;
}
.banner-crop-frame-view.has-image .banner-preview-empty { display: none; }
.banner-crop-preview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.banner-crop-preview-actions .ghost {
  min-height: 36px;
}

.maint-gate {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: grid;
  place-items: center;
  padding: 20px;
  background:
    radial-gradient(circle at 20% 10%, rgba(184,255,60,0.16), transparent 36%),
    rgba(8, 10, 12, 0.92);
  backdrop-filter: blur(10px);
}
.maint-gate[hidden] { display: none !important; }
.maint-card {
  width: min(420px, 100%);
  background: var(--surface);
  color: var(--heading);
  border-radius: 24px;
  padding: 28px 22px;
  text-align: center;
  box-shadow: 0 24px 80px rgba(0,0,0,0.35);
}
.maint-card h2 {
  margin: 6px 0 10px;
  font-size: 28px;
  letter-spacing: -0.05em;
}
.maint-card .meta { margin: 0 auto; max-width: 34ch; line-height: 1.45; }
#admin-maint-btn.is-on {
  background: #111;
  color: var(--lime);
  border-color: var(--ghost-ring);
}


@media (min-width: 900px) {
  #pub-modal.is-open {
    align-items: center;
    justify-content: center;
    padding: 28px;
  }
  .sheet-card.banner-order-sheet {
    width: min(520px, 100%);
    max-height: min(88vh, 900px);
    border-radius: 24px;
  }
  .banner-crop-overlay { z-index: 130; padding: 28px; }
  .banner-crop-card {
    width: min(720px, 100%);
    max-height: min(90vh, 860px);
  }
  .banner-term-grid { gap: 10px; }
  .banner-term-btn { padding: 14px 12px; border-radius: 14px; min-height: 80px; }
  .banner-order-cta { margin-bottom: 16px; padding: 14px 16px; border-radius: 18px; }
  .banner-promo { left: 22px; bottom: 22px; max-width: min(46%, 340px); }
  .banner-promo strong { font-size: 22px; }
  .giveaway-feed {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding-bottom: 40px;
  }
  .giveaway-card {
    padding: 12px 14px;
    border-radius: 16px;
    background: var(--surface-muted);
  }
  .giveaway-card:hover { background: var(--surface); }
  .giveaway-card.is-mine { background: rgba(184,255,60,0.2); }
  .giveaway-card h3 { font-size: 16px; }
  .giveaways-block .sec-head { margin-bottom: 8px; }
  .giveaway-hint { max-width: 62ch; }
  .sheet-card.giveaway-detail { width: min(520px, 100%); }
}


#banner-order-btn.banner-order-cta,
.banner-order-cta {
  display: grid !important;
  gap: 4px;
  width: 100%;
  margin: 0 0 14px;
  padding: 14px 16px;
  text-align: left;
  border: 0;
  border-radius: 18px;
  background: #111;
  color: #fff;
  cursor: pointer;
  font: inherit;
  box-shadow: 0 10px 28px rgba(17,17,17,0.18);
}
#banner-order-btn.banner-order-cta strong,
.banner-order-cta strong {
  font-size: 15px;
  letter-spacing: -0.03em;
  color: var(--lime);
}
#banner-order-btn.banner-order-cta span,
.banner-order-cta span {
  font-size: 12px;
  color: rgba(255,255,255,0.72);
  line-height: 1.35;
}
#banner-order-btn.banner-order-cta:active,
.banner-order-cta:active { transform: scale(0.99); }
@media (min-width: 900px) {
  #banner-order-btn.banner-order-cta,
  .banner-order-cta {
    padding: 16px 18px;
    border-radius: 20px;
    margin-bottom: 16px;
  }
  #banner-order-btn.banner-order-cta strong,
  .banner-order-cta strong { font-size: 16px; }
}

@media (min-width: 900px) {

.pc-search {
  position: relative;
}
.pc-search-suggest {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 40;
  display: grid;
  gap: 2px;
  padding: 8px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--soft-line);
  box-shadow: var(--card-shadow);
  max-height: min(360px, 60vh);
  overflow: auto;
  color: var(--text);
}
.pc-search-suggest[hidden] { display: none !important; }
.pc-suggest-label {
  padding: 4px 10px 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hint);
  font-family: "IBM Plex Mono", monospace;
}
.pc-suggest-empty {
  padding: 12px 10px;
  font-size: 13px;
  color: var(--hint);
}
.pc-suggest-user {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--heading);
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.pc-suggest-user:hover,
.pc-suggest-user:focus-visible {
  background: var(--surface-muted);
  outline: none;
}
.pc-suggest-ava {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #111;
  color: var(--lime);
  font-weight: 800;
  font-size: 14px;
}
.pc-suggest-ava img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pc-suggest-meta {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.pc-suggest-meta strong {
  font-size: 14px;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pc-suggest-meta em {
  font-style: normal;
  font-size: 12px;
  color: var(--hint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

}

.insure-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
  line-height: 1;
}
.insure-badge.is-on {
  background: rgba(34, 197, 94, 0.16);
  color: #15803d;
}
.insure-badge.is-off {
  background: rgba(239, 68, 68, 0.14);
  color: #b91c1c;
}
.post.pin .insure-badge.is-on,
.live-card.is-pin .insure-badge.is-on {
  background: rgba(184, 255, 60, 0.18);
  color: var(--lime);
}
.post.pin .insure-badge.is-off,
.live-card.is-pin .insure-badge.is-off {
  background: rgba(255, 77, 122, 0.18);
  color: #ff8fad;
}
.live-top .insure-badge { flex: none; }
.pub-author-row .insure-badge { margin-left: 2px; }

.theme-card .style-section-head { margin-bottom: 2px; }
.theme-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}
.theme-opt {
  border: 1px solid var(--line);
  background: var(--surface-muted);
  color: var(--text);
  border-radius: 16px;
  padding: 12px 10px;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.02em;
  cursor: pointer;
}
.theme-opt.is-on {
  background: var(--lime);
  color: #111;
  border-color: var(--ghost-ring);
  box-shadow: 0 0 18px rgba(184, 255, 60, 0.35);
}

/* —— Dark theme polish —— */
html[data-theme="dark"] .theme-opt.is-on {
  border-color: var(--lime);
}
html[data-theme="dark"] .top h2,
html[data-theme="dark"] .chat-who h2,
html[data-theme="dark"] .sec-tile-body h3,
html[data-theme="dark"] .card h3,
html[data-theme="dark"] .chat-item h3,
html[data-theme="dark"] .desk-card h3,
html[data-theme="dark"] .profile-card > strong,
html[data-theme="dark"] .style-section-head strong {
  color: var(--heading);
}
html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .pins .eyebrow,
html[data-theme="dark"] .feed .eyebrow,
html[data-theme="dark"] .sec-idx,
html[data-theme="dark"] .sec-tile-foot {
  color: var(--hint);
}
html[data-theme="dark"] .chat-who p { color: var(--hint); }
html[data-theme="dark"] .feed-mode-btn {
  border-color: var(--line);
  background: var(--surface-muted);
  color: var(--text);
}
html[data-theme="dark"] .feed-mode-btn.is-on {
  background: var(--lime);
  color: #111;
  border-color: var(--ghost-ring);
}
html[data-theme="dark"] .msg-dm {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}
html[data-theme="dark"] .msg.out .msg-dm {
  background: rgba(17, 17, 17, 0.12);
  color: #111;
}
html[data-theme="dark"] .msg.out .msg-tools .msg-tool {
  color: rgba(17, 17, 17, 0.72);
}
html[data-theme="dark"] .msg.out small {
  color: rgba(17, 17, 17, 0.55);
}
html[data-theme="dark"] .ghost {
  box-shadow: 0 0 0 1px var(--ghost-ring), 0 8px 18px rgba(0, 0, 0, 0.28);
}
html[data-theme="dark"] .primary,
html[data-theme="dark"] .composer button,
html[data-theme="dark"] .fab {
  box-shadow: 0 0 0 1px #111, 0 0 18px rgba(184, 255, 60, 0.22);
}
html[data-theme="dark"] .sheet-form textarea,
html[data-theme="dark"] .sheet-form input,
html[data-theme="dark"] .sheet-form select,
html[data-theme="dark"] .search-wrap input,
html[data-theme="dark"] .composer input,
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: #7b8494;
}
html[data-theme="dark"] .pc-topbar {
  background: rgba(18, 20, 24, 0.92);
  border-color: var(--line);
  backdrop-filter: blur(12px);
}
html[data-theme="dark"] .pc-brand,
html[data-theme="dark"] .pc-brand span {
  color: var(--heading);
}
html[data-theme="dark"] .pc-search input {
  background: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text);
}
html[data-theme="dark"] .pc-search-suggest {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: var(--card-shadow);
}
html[data-theme="dark"] .giveaway-card,
html[data-theme="dark"] .fav-card,
html[data-theme="dark"] .wall-composer,
html[data-theme="dark"] .ad-empty,
html[data-theme="dark"] .banner,
html[data-theme="dark"] .status-card,
html[data-theme="dark"] .hub-studio-card.bg-default,
html[data-theme="dark"] .style-picker,
html[data-theme="dark"] .style-section,
html[data-theme="dark"] .deposit-pending-card,
html[data-theme="dark"] .pin-dest,
html[data-theme="dark"] .auth-gate,
html[data-theme="dark"] .faq-item,
html[data-theme="dark"] .admin-mini-card {
  background: var(--surface);
  border-color: var(--line);
  color: var(--text);
}
html[data-theme="dark"] .profile-tab.is-on {
  background: #0f1114;
  color: #fff;
  box-shadow: 0 0 0 1px rgba(184, 255, 60, 0.25);
}
html[data-theme="dark"] .profile-progress-bar {
  background: var(--surface-muted);
}
html[data-theme="dark"] .entity-id,
html[data-theme="dark"] .profile-bio {
  color: var(--text);
}
html[data-theme="dark"] .deposit-presets .deposit-preset.is-on {
  background: var(--ghost-bg);
  color: #111;
  border-color: var(--ghost-ring);
}
html[data-theme="dark"] .fx-chip {
  border-color: var(--line);
  background: var(--surface-muted);
  color: var(--text);
}
html[data-theme="dark"] .fx-chip.is-on {
  background: var(--lime);
  color: #111;
  border-color: var(--ghost-ring);
}
html[data-theme="dark"] .tag.wait {
  background: #5b4a14;
  color: #ffe8a3;
}
html[data-theme="dark"] .live-card.is-pin,
html[data-theme="dark"] .post.pin {
  box-shadow: 0 0 0 2px var(--lime);
}
html[data-theme="dark"] .sheet-card,
html[data-theme="dark"] #pub-modal .sheet-card,
html[data-theme="dark"] #user-modal .sheet-card,
html[data-theme="dark"] #confirm-modal .sheet-card,
html[data-theme="dark"] #report-modal .sheet-card {
  background: var(--surface);
  border-color: var(--line);
  color: var(--text);
}
html[data-theme="dark"] .file-pick,
html[data-theme="dark"] .admin-actions button.ghost,
html[data-theme="dark"] .pub-actions .ghost {
  color: var(--ghost-fg);
}
html[data-theme="dark"] .hub-tabs {
  background: var(--tabbar-bg);
}
html[data-theme="dark"] .carousel-slide,
html[data-theme="dark"] .rooms-catalog .card,
html[data-theme="dark"] .chat-list .chat-item {
  background: var(--surface);
  border-color: var(--line);
  color: var(--text);
}
html[data-theme="dark"] .price,
html[data-theme="dark"] .kv b,
html[data-theme="dark"] .lead-note {
  color: var(--heading);
}
html[data-theme="dark"] .lead-note { color: var(--hint); }
html[data-theme="dark"] .pin-badge {
  background: var(--ghost-bg);
  color: #111 !important;
  -webkit-text-fill-color: #111;
}
html[data-theme="dark"] .insure-badge.is-on {
  background: rgba(184, 255, 60, 0.16);
  color: var(--lime);
}
html[data-theme="dark"] .insure-badge.is-off {
  background: rgba(255, 77, 122, 0.16);
  color: #ff8fad;
}
html[data-theme="dark"] .wordmark,
html[data-theme="dark"] .brand-title h1,
html[data-theme="dark"] .top h1 {
  color: var(--heading);
}
html[data-theme="dark"] .msg.in .who {
  color: var(--hint);
}
html[data-theme="dark"] .empty,
html[data-theme="dark"] .giveaway-hint,
html[data-theme="dark"] .style-studio-note {
  color: var(--hint);
}
html[data-theme="dark"] .profile-hero.bg-default,
html[data-theme="dark"] .profile-card.bg-default {
  background: var(--surface);
  color: var(--text);
}
html[data-theme="dark"] .profile-progress p.meta {
  color: var(--hint);
}
html[data-theme="dark"] .admin-person-card,
html[data-theme="dark"] .desk-card,
html[data-theme="dark"] .sheet-form {
  background: var(--surface);
  border-color: var(--line);
}
html[data-theme="dark"] .toast,
html[data-theme="dark"] .ox-toast {
  background: #0f1114;
  color: #f3f4f6;
  border: 1px solid var(--line);
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #3a414d;
}
html[data-theme="dark"] ::-webkit-scrollbar-track {
  background: transparent;
}

/* —— OX DARK THEME GLOBAL —— */
html[data-theme="dark"] .tag.wait { background: #5b4a14; color: #ffe8a3; }
html[data-theme="dark"] .tag.boost.is-past { background: var(--surface-muted); color: var(--hint); }
html[data-theme="dark"] .desk-card.is-deleted-log { background: #2a221c; }
html[data-theme="dark"] .msg-ban-pill,
html[data-theme="dark"] .admin-mini-chip.is-ban,
html[data-theme="dark"] .report-card-status.is-banned,
html[data-theme="dark"] .auth-error { background: rgba(248, 113, 113, 0.16); color: #fecaca; }
html[data-theme="dark"] .report-card-status { background: var(--surface-muted); color: var(--text); }
html[data-theme="dark"] .report-card-status.is-rejected { background: #3a3f48; color: #e5e7eb; }

html[data-theme="dark"] .rooms-catalog {
  background:
    radial-gradient(circle at 12% 0%, rgba(184, 255, 60, 0.12), transparent 42%),
    var(--surface) !important;
  border-color: var(--line) !important;
  box-shadow: var(--card-shadow);
}
html[data-theme="dark"] .feed-toolbar {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--bg) 96%, transparent) 55%,
      color-mix(in srgb, var(--bg) 70%, transparent) 100%
    ) !important;
}
html[data-theme="dark"] .filter-chip {
  background: #252a33 !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] .filter-chip.is-on {
  background: var(--lime) !important;
  color: #111 !important;
  border-color: #111 !important;
}
html[data-theme="dark"] .catalog-toggle {
  background: #252a33 !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
  box-shadow: none;
}
html[data-theme="dark"] .catalog-toggle.is-on {
  background: var(--lime) !important;
  color: #111 !important;
  border-color: #111 !important;
}
html[data-theme="dark"] .rooms-catalog-head strong,
html[data-theme="dark"] .rooms-catalog-note,
html[data-theme="dark"] .feed-active-filter {
  color: var(--text);
}
html[data-theme="dark"] .feed-active-filter {
  background: var(--surface-muted);
  border-color: var(--line);
}

html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text) !important;
  caret-color: var(--lime);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #7b8494 !important; }

html[data-theme="dark"] .shop-card,
html[data-theme="dark"] .status-pack-head,
html[data-theme="dark"] .status-preview-bg,
html[data-theme="dark"] .pub-boost-renew,
html[data-theme="dark"] .pub-comment,
html[data-theme="dark"] .pub-comments,
html[data-theme="dark"] .pub-cover,
html[data-theme="dark"] .sheet-card.pub-detail,
html[data-theme="dark"] .sheet-card.pub-post,
html[data-theme="dark"] .style-section,
html[data-theme="dark"] .sec-intro,
html[data-theme="dark"] .ad-empty,
html[data-theme="dark"] .file-pick,
html[data-theme="dark"] .admin-dash button,
html[data-theme="dark"] .admin-room-scroller button,
html[data-theme="dark"] .admin-search,
html[data-theme="dark"] .faq-link,
html[data-theme="dark"] .faq-item,
html[data-theme="dark"] .faq-item.is-open,
html[data-theme="dark"] .faq-item[open],
html[data-theme="dark"] .pc-card,
html[data-theme="dark"] .dm-card,
html[data-theme="dark"] .dm-composer,
html[data-theme="dark"] .dm-empty.list,
html[data-theme="dark"] .banner-crop-card,
html[data-theme="dark"] .banner-mine-card,
html[data-theme="dark"] .banner-file-pick,
html[data-theme="dark"] .maint-card,
html[data-theme="dark"] .member-chip,
html[data-theme="dark"] .giveaway-card,
html[data-theme="dark"] .fav-card,
html[data-theme="dark"] .wall-post,
html[data-theme="dark"] .desk-card,
html[data-theme="dark"] .sheet-form,
html[data-theme="dark"] .profile-card,
html[data-theme="dark"] .card:not(.is-main),
html[data-theme="dark"] .chat-item,
html[data-theme="dark"] .sheet-card,
html[data-theme="dark"] .live-card,
html[data-theme="dark"] .sec-tile:not(.is-feature),
html[data-theme="dark"] .post:not(.pin),
html[data-theme="dark"] .theme-card {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--text);
}

html[data-theme="dark"] .admin-dash button.is-on,
html[data-theme="dark"] .admin-room-scroller button.is-on {
  background: var(--lime) !important;
  color: #111 !important;
}

html[data-theme="dark"] .sheet-card.pub-post .pub-title,
html[data-theme="dark"] .sheet-card.pub-post .pub-article .pub-title,
html[data-theme="dark"] .sheet-card.pub-detail .pub-title,
html[data-theme="dark"] .pub-title {
  color: var(--heading) !important;
}
html[data-theme="dark"] .sheet-card.pub-post .pub-text,
html[data-theme="dark"] .sheet-card.pub-post .pub-article .pub-text,
html[data-theme="dark"] .sheet-card.pub-post .pub-stats,
html[data-theme="dark"] .sheet-card.pub-post .live-stats,
html[data-theme="dark"] .sheet-card.pub-post .meta,
html[data-theme="dark"] .sheet-card.pub-detail .pub-text,
html[data-theme="dark"] .pub-text,
html[data-theme="dark"] .pub-article .pub-text,
html[data-theme="dark"] .live-card .live-body p,
html[data-theme="dark"] .live-body p {
  color: var(--text) !important;
}
html[data-theme="dark"] .live-card .live-room,
html[data-theme="dark"] .live-card .live-stats,
html[data-theme="dark"] .meta,
html[data-theme="dark"] .pub-hint,
html[data-theme="dark"] .live-raised,
html[data-theme="dark"] .pub-raised-once {
  color: var(--hint) !important;
}
html[data-theme="dark"] .pub-link { color: #b8ff3c !important; }

html[data-theme="dark"] .feed-mode-btn {
  background: var(--surface-muted);
  border-color: var(--line);
  color: var(--text);
}
html[data-theme="dark"] .feed-mode-btn.is-on {
  background: var(--lime);
  color: #111;
  border-color: #111;
}
html[data-theme="dark"] .feed-active-filter button {
  background: var(--soft-fill);
  color: var(--text);
  border-color: var(--line);
}

html[data-theme="dark"] .ghost { color: var(--ghost-fg); }
html[data-theme="dark"] .primary,
html[data-theme="dark"] .fab,
html[data-theme="dark"] .composer button { color: #111; }

html[data-theme="dark"] .pc-topbar {
  background: color-mix(in srgb, var(--bg) 88%, transparent) !important;
  border-bottom-color: var(--line) !important;
}
html[data-theme="dark"] .view-chat > .messages {
  background: color-mix(in srgb, var(--surface) 80%, transparent) !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"] .pc-search-suggest,
html[data-theme="dark"] .pc-card,
html[data-theme="dark"] .pc-side {
  background: var(--surface);
  color: var(--text);
  border-color: var(--line);
}
html[data-theme="dark"] .pc-me-name,
html[data-theme="dark"] .pc-brand span,
html[data-theme="dark"] .pc-topic {
  color: var(--heading) !important;
}

html[data-theme="dark"] .hub-tabs { background: var(--tabbar-bg); }
html[data-theme="dark"] .hub-studio-card.bg-default,
html[data-theme="dark"] .hub-studio-card.is-bg-light {
  background: var(--surface) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] .status-row,
html[data-theme="dark"] .status-price,
html[data-theme="dark"] .shop-card h3,
html[data-theme="dark"] .status-pack-head {
  color: var(--text);
}
html[data-theme="dark"] .status-row.is-owned .status-price {
  background: var(--soft-fill);
  color: var(--text);
}

html[data-theme="dark"] .auth-gate,
html[data-theme="dark"] .sub-gate,
html[data-theme="dark"] .pin-gate {
  background: var(--bg) !important;
}
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .sub-card,
html[data-theme="dark"] .pin-card,
html[data-theme="dark"] .maint-card {
  background: var(--surface) !important;
  color: var(--text);
  border-color: var(--ghost-ring);
  box-shadow: 8px 8px 0 rgba(0,0,0,0.45);
}
html[data-theme="dark"] .auth-tabs { background: #0f1114; }
html[data-theme="dark"] .auth-tabs button.is-on,
html[data-theme="dark"] .pin-pad button:active {
  background: var(--lime);
  color: #111;
}

html[data-theme="dark"] .report-reason {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--text);
}
html[data-theme="dark"] .pub-sheet-top {
  background: color-mix(in srgb, var(--surface) 94%, transparent) !important;
  color: var(--text);
}
html[data-theme="dark"] .pub-comment,
html[data-theme="dark"] .member-chip {
  background: var(--surface-muted) !important;
}

html[data-theme="dark"] .profile-tab.is-on {
  background: #0f1114;
  color: #fff;
  box-shadow: 0 0 0 1px rgba(184,255,60,0.25);
}
html[data-theme="dark"] .profile-stat {
  background: var(--soft-fill);
}
html[data-theme="dark"] .profile-stat .profile-stat-val,
html[data-theme="dark"] .profile-stat b {
  color: var(--heading);
}

html[data-theme="dark"] .msg.in { background: var(--bubble-in); color: var(--text); }
html[data-theme="dark"] .msg.out { background: var(--bubble-out); color: var(--bubble-out-fg); }
html[data-theme="dark"] .msg.sys { background: var(--surface-muted); color: var(--hint); }
html[data-theme="dark"] .msg-dm {
  background: rgba(255,255,255,0.08);
  color: var(--text);
}
html[data-theme="dark"] .msg.out .msg-dm {
  background: rgba(17,17,17,0.12);
  color: #111;
}

html[data-theme="dark"] .fx-chip {
  background: var(--surface-muted);
  border-color: var(--line);
  color: var(--text);
}
html[data-theme="dark"] .fx-chip.is-on,
html[data-theme="dark"] .style-swatch.is-on {
  background: #111 !important;
  color: var(--lime) !important;
}
html[data-theme="dark"] .style-swatch {
  background: var(--surface-muted);
  border-color: var(--line);
  color: var(--text);
}

html[data-theme="dark"] .sheet-card.pub-detail.bg-grid,
html[data-theme="dark"] .sheet-card.pub-detail.bg-aurora,
html[data-theme="dark"] .sheet-card.pub-detail.bg-mist,
html[data-theme="dark"] .sheet-card.pub-detail.bg-sunset,
html[data-theme="dark"] .profile-card.bg-grid,
html[data-theme="dark"] .bg-grid,
html[data-theme="dark"] .dm-shell.bg-grid,
html[data-theme="dark"] .msg.msg-bg-grid {
  background: #1c2028 !important;
  color: var(--text) !important;
}

html[data-theme="dark"] .toast,
html[data-theme="dark"] .ox-toast,
html[data-theme="dark"] .game-toast {
  background: #0f1114 !important;
  color: #f3f4f6 !important;
  border: 1px solid var(--line);
}

html[data-theme="dark"] .pin-badge {
  background: var(--ghost-bg);
  color: #111 !important;
  -webkit-text-fill-color: #111;
}
html[data-theme="dark"] .insure-badge.is-on {
  background: rgba(184,255,60,0.16);
  color: var(--lime);
}
html[data-theme="dark"] .insure-badge.is-off {
  background: rgba(255,77,122,0.16);
  color: #ff8fad;
}

html[data-theme="dark"] .wordmark,
html[data-theme="dark"] .top h1,
html[data-theme="dark"] .top h2,
html[data-theme="dark"] .brand-title h1,
html[data-theme="dark"] .sec-head h2,
html[data-theme="dark"] .giveaway-card h3,
html[data-theme="dark"] .dm-card h3,
html[data-theme="dark"] .shop-card h3 {
  color: var(--heading) !important;
}
html[data-theme="dark"] .empty,
html[data-theme="dark"] .lead-note,
html[data-theme="dark"] .giveaway-hint,
html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .entity-id {
  color: var(--hint) !important;
}

html[data-theme="dark"] a:not(.primary):not(.ghost):not(.tab) { color: #c7d2fe; }
html[data-theme="dark"] select option { background: var(--surface); color: var(--text); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #3a414d; }
html[data-theme="dark"] ::selection { background: rgba(184,255,60,0.35); color: #111; }


/* === Forced PC layout (Telegram Desktop / html.is-pc) === */

  html.is-pc .style-picker-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  html.is-pc .hub-tabs button { font-size: 12px !important; min-height: 58px !important; }


  html.is-pc .profile-hero-actions {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }


  html.is-pc { --tab: 0px; --pc-top: 66px; --pc-max: 1280px; --pc-gutter: max(24px, calc((100% - var(--pc-max)) / 2)); }
  html.is-pc body { background: var(--bg); }
  html.is-pc .app {
    width: 100%;
    max-width: none;
    border: 0;
    box-shadow: none;
    background: var(--app-gradient);
  }
  html.is-pc .app::before { mask-image: radial-gradient(circle at 50% 0%, #000 10%, transparent 70%); }
  html.is-pc .hud-top { display: none; }

  html.is-pc .pc-topbar {
    display: flex;
    align-items: center;
    gap: 18px;
    position: absolute;
    z-index: 6;
    top: 0;
    left: 0;
    right: 0;
    height: var(--pc-top);
    padding: 0 var(--pc-gutter);
    background: color-mix(in srgb, var(--surface) 84%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    backdrop-filter: blur(18px) saturate(1.4);
    border-bottom: 1px solid var(--soft-line);
  }
  html.is-pc .pc-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
    cursor: pointer;
    user-select: none;
  }
  html.is-pc .pc-brand img {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 0 0 2px #111;
  }
  html.is-pc .pc-brand span {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.05em;
    color: var(--heading);
  }
  html.is-pc .pc-brand em {
    font-style: normal;
    background: var(--lime);
    padding: 1px 7px;
    border-radius: 8px;
    margin-left: 2px;
  }

  html.is-pc .tabbar,
html.is-pc .tabbar.is-admin {
    position: static;
    inset: auto;
    width: auto;
    height: 42px;
    padding: 0;
    display: flex;
    gap: 4px;
    background: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  html.is-pc .tabbar button {
    flex-direction: row;
    gap: 8px;
    height: 42px;
    padding: 0 16px;
    border-radius: 13px;
    background: transparent;
    color: #444b55;
  }
  html.is-pc .tabbar button.is-on {
    background: #111;
    color: var(--lime);
    box-shadow: none;
  }
  html.is-pc .tabbar button:not(.is-on):hover { background: var(--soft-fill); }
  html.is-pc .tabbar .tab-ico { width: 18px; height: 18px; }
  html.is-pc .tabbar button:not(.is-on) .tab-ico { opacity: 0.8; }
  html.is-pc .tabbar .tab-label,
html.is-pc .tabbar.is-admin .tab-label { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }

  html.is-pc .pc-search {
    flex: 1 1 auto;
    max-width: 380px;
    margin-left: auto;
  }
  html.is-pc .pc-search input {
    width: 100%;
    height: 42px;
    padding: 0 16px 0 40px;
    border-radius: 13px;
    border: 1px solid var(--soft-line);
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 14px center no-repeat,
      var(--surface-muted);
    font: inherit;
    font-size: 14px;
    color: var(--heading);
  }
  html.is-pc .pc-search input:focus {
    outline: none;
    background-color: var(--input-bg);
    border-color: var(--lime);
    box-shadow: 0 0 0 4px rgba(184,255,60,0.35);
  }
  html.is-pc .pc-account {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
  }
  html.is-pc .pc-new-topic {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 42px;
    padding: 0 16px;
    border: 0;
    border-radius: 13px;
    background: var(--lime);
    color: #111;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(142,240,30,0.35);
  }
  html.is-pc .pc-new-topic .icon-svg { width: 16px; height: 16px; }
  html.is-pc .pc-me {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 12px 0 4px;
    border-radius: 14px;
    cursor: pointer;
    max-width: 200px;
  }
  html.is-pc .pc-me:hover { background: var(--soft-fill); }
  html.is-pc .pc-me-ava {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 11px;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: #111;
    color: var(--lime);
    font-weight: 800;
  }
  html.is-pc .pc-me-ava img { width: 100%; height: 100%; object-fit: cover; }
  html.is-pc .pc-me-name {
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  html.is-pc .view {
    height: 100%;
    padding: calc(var(--pc-top) + 24px) var(--pc-gutter) 40px;
  }
  html.is-pc .view-chat.is-active { padding-bottom: 24px; }

  html.is-pc .pc-side { display: block; min-width: 0; }
  html.is-pc .pc-side-inner {
    position: sticky;
    top: calc(var(--pc-top) + 16px);
    display: grid;
    gap: 14px;
  }
  html.is-pc .pc-card {
    background: var(--surface);
    border: 1px solid #e8ebee;
    border-radius: 20px;
    padding: 16px;
    box-shadow: 0 8px 24px rgba(17,17,17,0.04);
  }
  html.is-pc .pc-card h3 {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.02em;
  }
  html.is-pc .pc-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
  }
  html.is-pc .pc-link {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    color: #4d7d00;
    cursor: pointer;
  }
  html.is-pc .pc-link:hover { text-decoration: underline; }
  html.is-pc .pc-cta {
    background: #111;
    color: #fff;
    border-color: var(--ghost-ring);
  }
  html.is-pc .pc-cta strong { display: block; font-size: 17px; letter-spacing: -0.02em; }
  html.is-pc .pc-cta p { margin: 6px 0 12px; font-size: 13px; color: rgba(255,255,255,0.7); line-height: 1.4; }
  html.is-pc .pc-cta .primary { width: 100%; min-height: 42px; }
  html.is-pc .pc-rooms { display: grid; gap: 2px; }
  html.is-pc .pc-room {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 38px;
    padding: 6px 12px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #2b3038;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
  }
  html.is-pc .pc-room:hover { background: var(--surface-muted); }
  html.is-pc .pc-room.is-on { background: #111; color: #fff; }
  html.is-pc .pc-room-ico { display: none !important; }
  html.is-pc .pc-chat-line {
    display: grid;
    gap: 2px;
    padding: 8px 0;
    border-top: 1px solid #f0f2f4;
    font-size: 13px;
    line-height: 1.35;
  }
  html.is-pc .pc-chat-line:first-of-type { border-top: 0; padding-top: 0; }
  html.is-pc .pc-chat-line b { font-size: 12px; font-weight: 800; }
  html.is-pc .pc-chat-line span { color: #4b5260; overflow-wrap: anywhere; }
  html.is-pc .pc-topic {
    display: grid;
    gap: 4px;
    padding: 10px;
    margin: 0 -10px;
    width: calc(100% + 20px);
    border: 0;
    border-radius: 12px;
    background: none;
    text-align: left;
    font: inherit;
    cursor: pointer;
  }
  html.is-pc .pc-topic:hover { background: var(--surface-muted); }
  html.is-pc .pc-topic b { font-size: 14px; line-height: 1.3; color: var(--heading); }
  html.is-pc .pc-topic span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--hint);
    font-family: "IBM Plex Mono", monospace;
  }
  html.is-pc .pc-side-empty { margin: 0; font-size: 13px; color: var(--hint); }
  html.is-pc .pc-about p { margin: 0 0 10px; font-size: 13px; color: #4b5260; line-height: 1.4; }
  html.is-pc .pc-about-links { display: flex; gap: 8px; }
  html.is-pc .pc-about-links a {
    padding: 7px 12px;
    border-radius: 10px;
    background: var(--surface-muted);
    color: var(--heading);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
  }
  html.is-pc .pc-about-links a:hover { background: var(--lime); }

  html.is-pc #view-sections.is-active {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    grid-template-rows: repeat(7, auto) 1fr;
    column-gap: 26px;
    align-content: start;
  }
  html.is-pc #view-sections > :not(.pc-side) { grid-column: 1; min-width: 0; }
  html.is-pc #view-sections > .brand-wrap { display: none; }
  html.is-pc #view-sections > .pc-side { grid-column: 2; grid-row: 1 / -1; }
  html.is-pc .feed-fab.feed-fab { display: none; }

  html.is-pc .live-feed {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  html.is-pc .live-feed > .live-card.is-text { min-height: 0; }
  html.is-pc .live-card.is-text .live-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 24px;
    padding: 16px 20px;
  }
  html.is-pc .live-card.is-text .live-body > * { grid-column: 1; }
  html.is-pc .live-card.is-text .live-body h3 { font-size: 18px; margin-top: 8px; }
  html.is-pc .live-card.is-text .live-body p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #4b5260;
  }
  html.is-pc .live-card.is-text .live-stats {
    grid-column: 2;
    grid-row: 1 / span 4;
    margin-top: 0;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: center;
    gap: 8px;
    min-width: 120px;
  }
  html.is-pc .live-card.is-text .live-stats b { margin-left: 0; }

  html.is-pc #feed {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
  }
  html.is-pc #feed > .feed-ad,
html.is-pc #feed > .empty { grid-column: 1 / -1; }

  html.is-pc .view-chat.is-active {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    grid-template-rows: auto minmax(0, 1fr) auto;
    column-gap: 26px;
  }
  html.is-pc .view-chat > .chat-head { grid-column: 1; grid-row: 1; }
  html.is-pc .view-chat > .messages {
    grid-column: 1;
    grid-row: 2;
    padding: 18px 20px;
    background: color-mix(in srgb, var(--surface) 70%, transparent);
    border: 1px solid var(--line);
    border-radius: 22px;
    -webkit-mask-image: none;
    mask-image: none;
  }
  html.is-pc .view-chat > .composer-wrap { grid-column: 1; grid-row: 3; margin-top: 12px; }
  html.is-pc .view-chat > .pc-side {
    grid-column: 2;
    grid-row: 1 / 4;
    overflow: auto;
    min-height: 0;
  }
  html.is-pc #to-sections { display: none; }

  html.is-pc .carousel { min-height: 300px; }
  html.is-pc .ad-hero { min-height: 250px; }
  html.is-pc .ad-hero-inner { min-height: 218px; }
  html.is-pc #view-profile .profile {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
  }
  html.is-pc #view-profile .profile-hero,
html.is-pc #view-profile .profile-actions { grid-column: 1; }
  html.is-pc #view-profile .profile-main {
    grid-column: 2;
    grid-row: 1 / span 6;
  }
  html.is-pc .hub-body { padding-bottom: 30px; }
  html.is-pc .sheet-card.pub-detail { width: min(760px, 100%); }
  html.is-pc .user-profile-sheet { width: min(720px, 100%); }
  html.is-pc .auth-card {
    width: min(100%, 460px);
    padding: 30px;
    border-radius: 28px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.24);
  }


  html.is-pc .profile-tabs-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  html.is-pc .profile-tabs-5 .profile-tab { padding: 8px 6px; }
  html.is-pc .profile-tabs-6 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html.is-pc .profile-tabs-6 .profile-tab { padding: 8px 6px; }
  html.is-pc .pub-actions:not(.is-owner) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html.is-pc .chat-head {
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(17,17,17,0.06);
  }
  html.is-pc .msg { max-width: 72%; }


  html.is-pc #pub-modal.is-open {
    align-items: center;
    justify-content: center;
    padding: 28px;
  }
  html.is-pc .sheet-card.banner-order-sheet {
    width: min(520px, 100%);
    max-height: min(88vh, 900px);
    border-radius: 24px;
  }
  html.is-pc .banner-crop-overlay { z-index: 130; padding: 28px; }
  html.is-pc .banner-crop-card {
    width: min(720px, 100%);
    max-height: min(90vh, 860px);
  }
  html.is-pc .banner-term-grid { gap: 10px; }
  html.is-pc .banner-term-btn { padding: 14px 12px; border-radius: 14px; min-height: 80px; }
  html.is-pc .banner-order-cta { margin-bottom: 16px; padding: 14px 16px; border-radius: 18px; }
  html.is-pc .banner-promo { left: 22px; bottom: 22px; max-width: min(46%, 340px); }
  html.is-pc .banner-promo strong { font-size: 22px; }
  html.is-pc .giveaway-feed {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding-bottom: 40px;
  }
  html.is-pc .giveaway-card {
    padding: 12px 14px;
    border-radius: 16px;
    background: var(--surface-muted);
  }
  html.is-pc .giveaway-card:hover { background: var(--surface); }
  html.is-pc .giveaway-card.is-mine { background: rgba(184,255,60,0.2); }
  html.is-pc .giveaway-card h3 { font-size: 16px; }
  html.is-pc .giveaways-block .sec-head { margin-bottom: 8px; }
  html.is-pc .giveaway-hint { max-width: 62ch; }
  html.is-pc .sheet-card.giveaway-detail { width: min(520px, 100%); }


  html.is-pc #banner-order-btn.banner-order-cta,
html.is-pc .banner-order-cta {
    padding: 16px 18px;
    border-radius: 20px;
    margin-bottom: 16px;
  }
  html.is-pc #banner-order-btn.banner-order-cta strong,
html.is-pc .banner-order-cta strong { font-size: 16px; }



html.is-pc .pc-search {
  position: relative;
}
html.is-pc .pc-search-suggest {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 40;
  display: grid;
  gap: 2px;
  padding: 8px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--soft-line);
  box-shadow: var(--card-shadow);
  max-height: min(360px, 60vh);
  overflow: auto;
  color: var(--text);
}
html.is-pc .pc-search-suggest[hidden] { display: none !important; }
html.is-pc .pc-suggest-label {
  padding: 4px 10px 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hint);
  font-family: "IBM Plex Mono", monospace;
}
html.is-pc .pc-suggest-empty {
  padding: 12px 10px;
  font-size: 13px;
  color: var(--hint);
}
html.is-pc .pc-suggest-user {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--heading);
  text-align: left;
  cursor: pointer;
  font: inherit;
}
html.is-pc .pc-suggest-user:hover,
html.is-pc .pc-suggest-user:focus-visible {
  background: var(--surface-muted);
  outline: none;
}
html.is-pc .pc-suggest-ava {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #111;
  color: var(--lime);
  font-weight: 800;
  font-size: 14px;
}
html.is-pc .pc-suggest-ava img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
html.is-pc .pc-suggest-meta {
  display: grid;
  gap: 2px;
  min-width: 0;
}
html.is-pc .pc-suggest-meta strong {
  font-size: 14px;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html.is-pc .pc-suggest-meta em {
  font-style: normal;
  font-size: 12px;
  color: var(--hint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}



/* === Dark theme PC background fixes (must stay after html.is-pc block) === */
html[data-theme="dark"].is-pc body,
html.is-pc[data-theme="dark"] body,
html[data-theme="dark"] body {
  background: var(--bg) !important;
}
html[data-theme="dark"].is-pc .app,
html.is-pc[data-theme="dark"] .app,
html[data-theme="dark"] .app {
  background: var(--app-gradient) !important;
}
html[data-theme="dark"] .pc-search input {
  background-color: var(--input-bg) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%239aa1ac' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 14px center !important;
  border-color: var(--input-border) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] .dm-shell {
  background:
    radial-gradient(circle at 12% 0%, rgba(184,255,60,0.1), transparent 42%),
    linear-gradient(180deg, var(--bg2), var(--surface)) !important;
  border-bottom-color: var(--line) !important;
}
html[data-theme="dark"] .pc-about p,
html[data-theme="dark"] .pc-chat-line span {
  color: var(--hint) !important;
}
html[data-theme="dark"] .pc-chat-line {
  border-top-color: var(--line) !important;
}